:root{
    --riz:#F4EFE4;
    --miel:#C8A063;
    --oxyde:#762F3E;
    --anthracite:#2B2B2E;
    --sapin:#3E4A3D;
    --riz-warm:#E7E0D2;
    --ink:#26231F;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--riz);
    color:var(--ink);
    font-family:'Jost',sans-serif;
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .thai{font-family:'Noto Sans Thai',sans-serif;}

  /* ---- lang switching ---- */
  [data-lang]{display:none}
  body[data-active="fr"] [data-lang="fr"],
  body[data-active="en"] [data-lang="en"],
  body[data-active="th"] [data-lang="th"]{display:revert}

  /* ---- top bar ---- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;justify-content:space-between;align-items:center;
    padding:1.6rem clamp(1.5rem,5vw,4rem);
    border-bottom:1px solid transparent;
    transition:background .3s,padding .3s,border-color .3s;
  }
  /* L'en-tête flotte au-dessus du hero, où il a le contraste d'une photo
     claire. Dès qu'on quitte le haut de la page il se pose sur un fond
     opaque : sinon le libellé et le sélecteur de langue se superposent au
     texte des sections traversées. Le seuil est volontairement bas plutôt
     qu'indexé sur la hauteur du hero — sur téléphone l'en-tête traverse des
     sections sombres où le libellé bordeaux serait illisible sans fond. */
  header.posed{
    padding-top:.9rem;padding-bottom:.9rem;
    background:rgba(244,239,228,.94);
    border-bottom-color:rgba(200,160,99,.42);
    backdrop-filter:blur(10px);
  }
  .wordmark{
    font-family:'Jost',sans-serif;
    font-weight:400;
    font-size:1.15rem;
    letter-spacing:.32em;
    color:var(--oxyde);
    text-transform:uppercase;text-decoration:none;
    text-shadow:0 1px 12px rgba(244,239,228,.72);
  }
  .langs{display:flex;gap:.08rem;align-items:center;padding:.38rem .5rem;background:rgba(38,35,31,.82);border:1px solid rgba(200,160,99,.72);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.16)}
  .langs button{
    background:none;border:none;cursor:pointer;
    font-family:'Jost',sans-serif;font-weight:500;
    font-size:.78rem;letter-spacing:.16em;
    color:var(--riz);opacity:.72;
    padding:.3rem .5rem;transition:opacity .3s;
  }
  .langs button.on{opacity:1;color:var(--miel)}
  .langs span{color:var(--miel);opacity:.58;font-size:.6rem}

  /* ---- hero ---- */
  .hero{
    min-height:100vh;
    position:relative;
    isolation:isolate;
    background:var(--riz);
    overflow:hidden;
  }
  /* La photo suisse va jusqu'a 64 % et non 60 %, et ce n'est pas un reglage
     esthetique : la vague n'est pas une droite. Son trace part de x=60 en haut
     puis bombe vers la DROITE — ses points de controle sont a x=64 — pour
     atteindre 62,30 % avant de repartir vers la gauche. La photo, elle,
     s'arretait net a 60 %. Entre les deux, une bande que personne ne peignait :
     ni la photo suisse, ni l'image thaie qui commence apres la courbe. Mesure :
     22 px de vide a 1024, 27 a 1280, 31 a 1440, 42 a 1920 — signale par Eugen
     le 16/09 (« un espace entre les deux, en haut au centre »).
     Le debordement est invisible : tout ce qui depasse la courbe est recouvert
     par l'image thaie, qui est decoupee par ce meme trace. Si la vague est un
     jour redessinee plus a droite, c'est ce 64 % qu'il faut suivre. */
  .hero::before{
    content:"";position:absolute;inset:0 calc(36% - 2px) 0 0;z-index:0;
    background:linear-gradient(90deg,rgba(244,239,228,.76),rgba(244,239,228,.56)),url('../assets/hero-assiette-suisse-v1.webp') center/cover no-repeat;
  }
  /* the sapin (Thailand) side + the smooth S-wave are one SVG background */
  .hero-bg{
    position:absolute;inset:0;z-index:1;
    width:100%;height:100%;
  }
  .hero-bg-wide{width:100%;height:100%;display:block}
  /* le trace de la vague en portrait ne sert que de definition : jamais peint */
  .hero-curve-defs{position:absolute;width:0;height:0;overflow:hidden}
  .hero-bg-tall{display:none}
  /* content grid: text | empty center for the logo | text */
  .hero-grid{
    position:relative;z-index:2;
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr clamp(220px,28vw,360px) 1fr;
    align-items:center;
  }
  .hero-col{
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(2rem,5vw,5rem);
  }
  .hero-ch{align-items:flex-end;text-align:right;color:var(--ink)}
  .hero-th{align-items:flex-start;text-align:left;color:var(--riz)}
  .hero-eyebrow{
    font-family:'Jost',sans-serif;
    font-weight:400;
    font-size:clamp(2rem,3.2vw,3rem);
    letter-spacing:.10em;
    text-transform:uppercase;
    line-height:1;
    margin-bottom:1.4rem;
  }
  .hero-ch .hero-eyebrow{color:var(--oxyde)}
  .hero-th .hero-eyebrow{color:var(--riz);opacity:.7;white-space:nowrap}
  .hero-word{
    font-family:'Jost',sans-serif;
    font-weight:300;
    font-size:clamp(2.2rem,5vw,4.2rem);
    line-height:1.05;
    font-style:italic;
  }
  .hero-word.thai{font-style:normal;font-weight:300;}
  .hero-ch .hero-word{white-space:nowrap}
  /* center seam medallion — the real business-card logo */
  .seam-wrap{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    z-index:5;
    width:min(720px,94vw);
    display:flex;flex-direction:column;align-items:center;
    isolation:isolate;
  }
  /* Le bandeau central tombe a cheval sur les deux photos, et la vague
     symetrique lui a fait perdre du fond sombre : le dore de « Deux cultures »
     passait de 5,58:1 a 4,09:1 sur son fond, sous le minimum recommande de
     4,5:1. Ce voile — un degrade radial, donc sans bord visible — le remonte a
     6,62:1, au-dessus de ce qu'il etait avant. Mesure au pixel sur le rendu, pas
     a l'oeil. Il n'existe qu'au bureau : le telephone a sa propre vague, deja
     symetrique, et son bandeau a deja des ombres portees (voir le bloc
     @media(max-width:820px), qui le neutralise). */
  .seam-wrap::after{
    content:"";position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);
    width:min(920px,98vw);height:76%;
    background:radial-gradient(62% 60% at 50% 44%,rgba(14,18,14,.80),rgba(14,18,14,.58) 52%,rgba(14,18,14,0) 82%);
    z-index:-1;pointer-events:none;
  }
  .seam{
    position:relative;
    width:clamp(190px,24vw,300px);height:clamp(190px,24vw,300px);
    border-radius:50%;
    background:radial-gradient(circle at 50% 42%,#1c1a17,#0b0a08);
    display:flex;align-items:center;justify-content:center;
    border:4px solid var(--miel);
    box-shadow:0 0 0 1px rgba(200,160,99,.3),
               inset 0 0 40px rgba(0,0,0,.6),
               0 30px 70px rgba(0,0,0,.5);
  }
  .seam svg{width:78%;height:78%;display:block}
  .seam img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
  .seam-tag{
    margin:2rem 0 0;
    align-self:center;
    transform:translateX(0);
    font-size:clamp(.72rem,1.2vw,.9rem);letter-spacing:.32em;text-transform:uppercase;
    color:var(--miel);white-space:nowrap;font-weight:400;
    text-shadow:0 1px 3px rgba(0,0,0,.4);
    padding-bottom:.55rem;
    border-bottom:1.5px solid var(--miel);
  }
  .hero-service-line{
    max-width:680px;margin-top:1rem;color:var(--riz);font-size:clamp(.65rem,1vw,.78rem);
    font-weight:400;letter-spacing:.12em;text-align:center;text-transform:uppercase;white-space:nowrap;
    text-shadow:0 1px 5px rgba(0,0,0,.78);
  }
  .hero-actions{display:flex;justify-content:center;gap:.75rem;margin-top:1.25rem}
  .hero-cta{
    min-width:150px;padding:.72rem 1.1rem;border:1px solid var(--miel);background:rgba(25,24,21,.68);
    color:var(--riz);font-size:.64rem;font-weight:500;letter-spacing:.16em;text-align:center;text-decoration:none;text-transform:uppercase;
    backdrop-filter:blur(7px);transition:transform .25s,background .25s,border-color .25s;
  }
  .hero-cta.primary{background:var(--oxyde);border-color:var(--oxyde)}
  .hero-cta:hover{transform:translateY(-2px);background:var(--sapin);border-color:var(--miel)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--miel);outline-offset:4px}

  /* ---- intro strip ---- */
  .story{
    position:relative;overflow:hidden;
    padding:clamp(5rem,10vw,9rem) clamp(1.5rem,6vw,5rem);
    background:var(--sapin);color:var(--riz);
    border-top:1px solid rgba(200,160,99,.72);
    font-family:'Jost',sans-serif;
  }
  .story .thai{font-family:'Noto Sans Thai',sans-serif}
  .story-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:clamp(2.5rem,5vw,4rem) 0}
  .story-inner::before,.story-inner::after{
    content:"";position:absolute;left:3%;right:3%;height:1px;
    background:linear-gradient(90deg,transparent,var(--miel) 18%,var(--oxyde) 50%,var(--miel) 82%,transparent);
  }
  .story-inner::before{top:0}.story-inner::after{bottom:0}
  .story-head{display:block;max-width:1180px;margin:0 auto 4.5rem;text-align:center}
  .story-kicker{color:var(--miel);font-size:.68rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase}
  .story-title{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.1rem;font-size:clamp(2.15rem,4vw,4rem);font-weight:300;line-height:1.03;letter-spacing:-.025em;white-space:nowrap}
  .story-title::before,.story-title::after{content:"◆";color:var(--miel);font-size:.22em;line-height:1}
  .story-lead{max-width:64ch;margin:1.4rem auto 0;color:rgba(244,239,228,.76);font-size:clamp(.95rem,1.4vw,1.08rem);line-height:1.85}
  .story-close{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.6rem;padding-top:3.5rem;text-align:center}
  /* La figure est ecrite avant le paragraphe pour que le float fonctionne au
     bureau (voir le commentaire dans le HTML). En colonne, `order` remet
     l'ordre voulu : le texte, puis la photo, puis le lien. */
  .story-close p{order:1}
  .story-portrait{order:2}
  .story-link{order:3}
  .story-close p{max-width:710px;margin:0 auto;color:var(--riz);font-size:clamp(1.05rem,2vw,1.45rem);font-weight:300;line-height:1.6}
  .story-link{flex:none;color:var(--miel);text-decoration:none;font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--miel);padding-bottom:.55rem}

  .visit{
    padding:clamp(4rem,9vw,7rem) clamp(1.5rem,6vw,4rem);
    position:relative;text-align:center;background:var(--riz-warm);color:var(--ink);
    border-top:1px solid rgba(200,160,99,.72);
  }
  .visit-eyebrow{font-size:.68rem;letter-spacing:.35em;text-transform:uppercase;color:var(--oxyde);margin-bottom:1.6rem}
  .visit h2{
    font-family:'Jost',sans-serif;font-weight:300;font-style:italic;
    font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin-bottom:2rem;color:var(--oxyde);
  }
  .visit-place{font-size:.9rem;letter-spacing:.05em;opacity:.75;line-height:1.9}
  /* Cette regle valait 0,2,0 en specificite, contre 0,1,0 pour la bascule de
     langue « [data-lang]{display:none} » : elle gagnait, donc la ligne thaie
     restait affichee en francais et en anglais. Un visiteur francophone lisait
     « Doi Saket · Chiang Mai · Thailande ดอยสะเก็ด · เชียงใหม่ · ประเทศไทย ».
     Portee au cas ou la langue active est le thai. */
  body[data-active="th"] .visit-place .thai{display:inline}
  .cta-row{margin-top:2.8rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
  .cta{
    display:inline-block;
    padding:.95rem 2.2rem;
    font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
    text-decoration:none;transition:all .35s;
    border:1px solid var(--oxyde);color:var(--ink);
  }
  .cta:hover{background:var(--oxyde);color:var(--riz)}
  .cta.filled{background:var(--oxyde);border-color:var(--oxyde);color:var(--riz)}
  .cta.filled:hover{background:transparent;border-color:var(--oxyde);color:var(--ink)}

  footer{
    padding:2.5rem clamp(1.5rem,6vw,4rem);
    background:var(--sapin);color:rgba(244,239,228,.58);
    border-top:1px solid rgba(200,160,99,.72);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
    font-size:.68rem;letter-spacing:.14em;
  }
  footer .fw{font-family:'Jost',sans-serif;letter-spacing:.3em;font-size:.85rem;color:var(--miel)}
  .footer-brand{display:flex;flex-direction:column;gap:.35rem}
  .footer-hours{color:rgba(244,239,228,.72);font-size:.62rem;letter-spacing:.08em}
  .footer-nav{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
  .footer-nav a{color:var(--riz);text-decoration:none;font-size:.64rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
  .footer-nav a:hover{color:var(--miel)}

  /* ---- reveal animation ---- */
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
  }

  /* ---- responsive ---- */
  /* En portrait, on ne change pas de dessin : on fait pivoter celui du bureau
     d'un quart de tour. Les deux photos restent separees par la meme vague, la
     Suisse au-dessus et la Thailande en dessous, et le medaillon reste pose sur
     la couture. Avant le 06/09/2026 le telephone recevait une autre page : plus
     de vague, plus de photo derriere le medaillon, et un hero d'une page et
     demie a faire defiler.
     Le medaillon est cale sur le centre exact du hero (top = 50% - diametre/2),
     la ou la vague croise. Les deux bandes de texte sont ancrees en dehors de
     lui — l'une s'arrete a son bord haut, l'autre commence a son bord bas — ce
     qui rend le chevauchement impossible, quelle que soit la langue.
     Les deux blocs de texte sont bornes par la hauteur autant que par la
     largeur : sur un telephone tenu a l'horizontale, large et bas, c'est la
     hauteur qui manque, et c'est elle qui doit reduire les corps. */
  @media(max-width:820px){
    .hero{
      --seam-d:clamp(100px,min(33vw,16vh),190px);
      display:block;
      /* un ecran tres court deborde de quelques dizaines de pixels plutot
         que de faire chevaucher le medaillon et le texte thai. */
      min-height:100vh;min-height:max(100svh,690px);
      background:var(--riz);
    }
    /* la photo suisse couvre tout le hero ; la thaie est decoupee par-dessus */
    .hero::before{
      display:block;inset:0;
      background:linear-gradient(180deg,rgba(244,239,228,.84),rgba(244,239,228,.6)),url('../assets/hero-assiette-suisse-v1.webp') center/cover no-repeat;
    }
    .hero-bg{display:block}
    .hero-bg-wide{display:none}
    .hero-bg-tall{
      display:block;position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(38,49,40,.30),rgba(24,30,24,.52) 55%,rgba(20,25,20,.62)),url('../assets/hero-assiette-thai-v2.webp') center/cover no-repeat;
      -webkit-clip-path:url(#thai-curve-portrait);
      clip-path:url(#thai-curve-portrait);
    }
    /* la grille a trois colonnes s'efface : ses trois enfants se calent
       directement sur le hero, seul repere commun avec le medaillon. */
    .hero-grid{display:contents}
    .hero-center{display:none}
    .seam-wrap::after{display:none}
    .hero-col{position:absolute;left:0;right:0;z-index:2;align-items:center;text-align:center}
    .hero-ch{
      top:0;height:calc(50% - var(--seam-d)/2);
      justify-content:flex-start;
      /* Ancre en haut, pas centre : l'en-tete est fixe et le bloc doit rester
         sous lui sur un ecran court. Le retrait a ete remonte le 11/09/2026
         pour rapprocher le texte du medaillon.
         Le plancher de 6.5rem est celui des largeurs 521-820 px, ou l'en-tete
         garde son grand retrait (1.6rem) et mesure ~91 px : en dessous de ce
         plancher, « LA SUISSE » passait sous l'en-tete — c'etait deja le cas
         avant cette retouche, a 540x720 le titre etait recouvert de 25 px.
         Sous 521 px l'en-tete se resserre et la valeur est reprise plus bas. */
      padding:max(6.5rem,11.6vh) 1.2rem 0;
      color:var(--ink);
    }
    .hero-th{
      top:calc(50% + var(--seam-d)/2);bottom:0;
      justify-content:flex-end;
      padding:0 1.2rem clamp(.7rem,2vh,1.8rem);
      color:var(--riz);
    }
    .hero-eyebrow{font-size:clamp(1.05rem,min(5.4vw,3.8vh),1.9rem);margin-bottom:.4rem}
    .hero-ch .hero-word,.hero-th .hero-eyebrow{white-space:normal}
    .hero-word{font-size:clamp(1.25rem,min(6.4vw,3.9vh),2.3rem);line-height:1.14}
    .hero-th .hero-word{text-shadow:0 1px 10px rgba(0,0,0,.45)}
    .seam-wrap{
      position:absolute;top:calc(50% - var(--seam-d)/2);left:50%;
      transform:translateX(-50%);margin:0;
      width:min(430px,92vw);
    }
    /* En portrait, la tagline, la ligne des prestations et les deux boutons
       tombent sur la moitie basse du hero, c'est-a-dire sur la photo thaie,
       sombre et chargee : le dore de « Deux cultures » y passait sur du brun,
       et « Decouvrir la carte » se lisait mal. Un voile local, cale sous le
       medaillon et fondu sur ses bords, leur donne un plancher de contraste
       sans repeindre le panneau ni cacher le plat. Ellipse et non bande : une
       bande droite se verrait comme un rectangle pose sur la photo.
       Il reste dans la largeur de .seam-wrap (92vw) — l'elargir en vw
       ferait deborder la page horizontalement. */
    .seam-wrap::before{
      content:"";position:absolute;z-index:-1;pointer-events:none;
      left:-4%;right:-4%;top:calc(var(--seam-d) * .42);bottom:-1.6rem;
      /* Les rayons sont choisis pour que le degrade soit deja eteint quand il
         atteint les bords de la boite : sinon le voile se voit comme un trait
         droit en travers de la photo suisse. Bord haut a 50/66 = 0,76 du rayon,
         bord gauche a 50/62 = 0,81 — les deux au-dela du dernier arret. */
      background:radial-gradient(ellipse 62% 66% at 50% 50%,
        rgba(12,16,12,.86),rgba(12,16,12,.6) 45%,rgba(12,16,12,0) 78%);
    }
    .seam{width:var(--seam-d);height:var(--seam-d);border-width:3px}
    .seam-tag{transform:none;margin-top:clamp(.8rem,2.2vh,1.25rem);padding-bottom:.4rem;font-size:clamp(.6rem,2.7vw,.8rem);letter-spacing:.2em;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.7)}
    .hero-service-line{
      margin-top:.55rem;white-space:normal;
      font-size:clamp(.58rem,2.6vw,.72rem);letter-spacing:.1em;line-height:1.6;
    }
    .hero-actions{width:100%;margin-top:clamp(.75rem,2.1vh,1.2rem);gap:.5rem}
    .hero-cta{flex:1 1 0;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;
      padding:.6rem .45rem;font-size:clamp(.55rem,2.3vw,.64rem);letter-spacing:.12em;line-height:1.35;
      background:rgba(16,20,16,.82)}
    .hero-cta.primary{background:var(--oxyde)}
    .story-head{grid-template-columns:1fr;gap:1.4rem;margin-bottom:3rem}
    /* Sous 820 px, les enfants sont cales a gauche — mais le texte restait
       centre, herite de .story-close. Le lien « Decouvrir toute notre histoire »
       tombait donc a gauche pendant que le paragraphe au-dessus etait centre :
       aucun des deux bords ne repondait a l'autre, et le texte du corps juste
       au-dessus, lui, est a gauche. Signale par Eugen le 16/09/2026, mesure a
       360, 390, 430, 700 et 820 px. On aligne le texte a gauche aussi. */
    .story-close{align-items:flex-start;flex-direction:column;text-align:left}
    /* Et son « margin:0 auto » recentrait la boite juste sous 820 px, la ou elle
       est plus etroite que le conteneur : 6 px de decalage restants, mesures. */
    .story-close p{margin:0}
    /* Le lien reste centre, comme le portrait juste au-dessus — retour d'Eugen
       du 16/09 apres le test sur son telephone. Le paragraphe, lui, reste cale
       a gauche : c'est la colonne de texte, elle doit repondre au corps du
       recit. L'image et le lien forment le bloc de sortie de section, et ces
       deux-la se centrent ensemble. Mesure avant : le lien tombait 43 px a
       gauche du centre de la photo a 390 px, 63 px a 430. */
    .story-link{align-self:center}
  }


  /* ---- choix de l'expérience : accueil uniquement ---- */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .experience-chooser{
    padding:clamp(4.5rem,9vw,7.5rem) clamp(1.2rem,5vw,4rem);
    background:var(--riz-warm);color:var(--ink);
    border-top:1px solid rgba(200,160,99,.72);
  }
  .experience-head{max-width:760px;margin:0 auto 3.2rem;text-align:center}
  .experience-kicker{margin-bottom:1rem;color:var(--oxyde);font-size:.66rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
  .experience-head h2{font-size:clamp(2.3rem,5vw,4rem);font-weight:300;font-style:italic;line-height:1.05}
  .experience-head p{max-width:58ch;margin:1.1rem auto 0;color:#665f55;font-size:.9rem}
  .experience-grid{
    position:relative;max-width:1180px;margin:0 auto;padding:3.2rem 0;
    display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem);
  }
  .experience-grid::before,.experience-grid::after{content:"";position:absolute;left:3%;right:3%;height:1px;background:linear-gradient(90deg,transparent,var(--miel) 18%,var(--oxyde) 50%,var(--miel) 82%,transparent)}
  .experience-grid::before{top:0}.experience-grid::after{bottom:0}
  .experience-choice{
    min-height:170px;padding:clamp(1.25rem,2.5vw,2rem) .4rem;
    display:flex;flex-direction:column;align-items:center;color:var(--ink);text-align:center;text-decoration:none;
    transition:color .35s,transform .35s;
  }
  .experience-choice:hover,.experience-choice:focus-visible{color:var(--oxyde);transform:translateY(-5px);outline:none}
  .experience-choice h3{display:flex;align-items:center;justify-content:center;gap:.65rem;font-size:clamp(1.4rem,2.3vw,1.9rem);font-weight:400;line-height:1.15}
  .experience-choice h3::before,.experience-choice h3::after{content:"◆";color:var(--miel);font-size:.34em;line-height:1}
  .experience-menu{display:inline-block;margin-top:.85rem;color:var(--miel);font-size:.66rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
  .experience-menu + p{margin-top:.8rem}
  .experience-choice p{max-width:27ch;margin:1.25rem auto 0;font-size:.82rem;line-height:1.7;color:#625b52}
  .experience-action{margin-top:auto;padding-top:1rem;color:var(--oxyde);font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(118,47,62,.45)}
  @media(max-width:980px){.experience-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:900px){.story-title{white-space:normal}}
  /* Sous 620 px, la grille du bureau tombait a une colonne : quatre cartes
     empilees qui ne portent qu'un titre et un lien, dans des vides tailles
     pour des cartes a paragraphe. La section pesait 1063 px sur telephone
     pour quatre liens courts (mesure du 11/09/2026). Deux colonnes la
     ramenent a deux rangees, et les retraits a ce que le contenu demande.
     Le corps du titre est borne par la largeur de colonne et non par celle
     de l'ecran : en deux colonnes, « Chef at Home » et son equivalent thai
     debordaient a 1.4rem. */
  @media(max-width:620px){
    .experience-grid{grid-template-columns:repeat(2,1fr);gap:.6rem .9rem;padding:1.6rem 0}
    .experience-choice{min-height:auto;padding:1.1rem .3rem}
    .experience-choice h3{font-size:clamp(1rem,4.4vw,1.35rem);gap:.4rem}
    .experience-choice p{max-width:34ch}
  }
  /* Un ecran trop etroit ne tient pas deux colonnes : le titre y passe sur
     trois lignes et les losanges sortent de la colonne. */
  @media(max-width:339px){.experience-grid{grid-template-columns:1fr}}

  /* Cible tactile : la regle ne vivait que sous 520 px, si bien qu'entre
     521 et 820 — tablette, telephone a l'horizontale — les liens
     « Selectionner » faisaient 18 px de haut, moitie moins que le minimum
     tenable au doigt. Constat du 11/09/2026, anterieur a cette retouche.
     Les retraits de la section, eux, etaient tailles pour le bureau :
     72 px en haut et en bas autour de quatre liens courts. */
  @media(max-width:820px){
    .experience-action,.experience-menu{min-height:44px;display:inline-flex;align-items:center}
    .experience-chooser{padding-top:clamp(2.6rem,7vw,4rem);padding-bottom:clamp(2.6rem,7vw,4rem)}
    .experience-head{margin-bottom:1.8rem}
  }
  /* Un ecran qu'on touche, quelle que soit sa largeur — 23/09/2026. La regle
     ci-dessus est taillee sur la largeur, et la largeur ne dit pas si l'on
     vise au doigt : a 1024 px, un iPad a l'horizontale retombait a 34 px pour
     « Reserver », 18 px pour « Menu » et 42 px pour les deux boutons du haut
     (releve du 15/09, remesure le 23/09). any-pointer:coarse repond a la
     bonne question. La souris garde le dessin du bureau : c'etait la reserve
     qui avait fait reporter cette correction le 15/09.
     Le minimum de largeur tient « Menu » et son equivalent thai, plus etroits
     que le doigt. */
  @media(any-pointer:coarse){
    .experience-action,.experience-menu{min-height:44px;display:inline-flex;align-items:center}
    .experience-menu{min-width:44px;justify-content:center}
    .hero-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  }

  /* ---- titres des sections visuelles ---- */
  .content-head{max-width:820px;margin:0 auto 3.5rem;text-align:center}
  .content-kicker{margin-bottom:1rem;color:var(--oxyde);font-size:.66rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase}

  /* La photo du panneau des distinctions est posee contre le paragraphe de
     parcours : c'est elle qui porte la preuve des quatorze points et du
     Gault&Millau, et un visiteur la lit avant la phrase. Flottee a droite
     au-dessus de 700 px, en pleine largeur au-dessus du texte en dessous —
     une image flottee dans une colonne de 300 px ne laisse plus de place aux
     mots. Le ratio est declare sur l'element pour que rien ne saute pendant
     le chargement.
     Renommee story-photo le 11/09/2026, quand la section « A propos » a ete
     fondue dans « histoire » : le nom d'avant citait une section disparue. */
  .story-photo{margin:0 0 1.4rem;max-width:100%}
  /* Sur telephone, la photo est servie en 4/3 et non dans son cadrage
     d'origine : en 3/4 pleine largeur elle pesait 435 px de haut, soit la
     moitie d'un ecran. object-position garde le visage et le haut du panneau,
     ou sont les deux plaques ; c'est le bas du corps qui sort du cadre. */
  .story-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 22%;border:1px solid rgba(200,160,99,.55)}
  /* Legende sur fond sapin : le gris de l'ancienne section claire y etait
     illisible. */
  .story-photo figcaption{margin-top:.5rem;color:rgba(244,239,228,.6);font-size:.7rem;line-height:1.5}
  /* Le corps de l'histoire : aligne a gauche, contrairement au chapeau, parce
     qu'il entoure une image flottee. clear:both l'empeche de deborder sur la
     phrase de cloture quand le texte est plus court que la photo. */
  /* Portrait de fin de section (16/09/2026). Il suit la photo du panneau, section
     par section — retour du test d'Eugen sur son telephone le 16/09 : les deux
     photos de la page doivent se comporter pareil. Celle du panneau occupe toute
     la colonne au telephone, puis flotte a droite a partir de 701 px, bord droit
     contre bord droit du texte. Le portrait fait la meme chose dans SA section :
     centre au telephone, cale a droite a partir du MEME palier de 701 px (voir
     @media(min-width:701px) plus bas, ou vit aussi le float de l'autre photo —
     les deux changent de regime ensemble, ou elles se remettront a diverger).
     La figure sert de rail, et ce rail est celui de la COLONNE DU RECIT (74ch),
     pas celui du paragraphe juste au-dessus (710px). Arbitrage d'Eugen du
     16/09 : entre les deux photos de la page, c'est l'alignement des deux qui
     prime sur l'alignement de chacune avec son propre texte. Consequence assumee
     — au-dessus de 900 px le portrait ne colle plus au bord droit de son
     paragraphe, il tombe 26 px en dedans a 1440. En echange, les deux images
     partagent exactement la meme verticale, ce qui se voit en faisant defiler.
     74ch et non une valeur en pixels : c'est la meme unite que .story-body, donc
     les deux boites bougent ensemble si la police ou le corps de texte change.
     L'aligner sur le conteneur de section, lui, la collerait au bord de la
     fenetre — la section est bien plus large que les deux colonnes. */
  .story-portrait{margin:0 auto;align-self:center;width:100%;max-width:74ch;display:flex;justify-content:center}
  /* La largeur vit sur l'image, pas sur la figure : la figure sert de rail
     (elle epouse la boite du paragraphe), l'image s'y cale. Avec width:100% ici,
     elle s'etirait a 710 px des que la figure a pris la largeur du texte. */
  .story-portrait img{display:block;width:220px;max-width:58vw;height:auto;aspect-ratio:3/4;
    object-fit:cover;border:1px solid rgba(200,160,99,.55)}
  .story-body{max-width:74ch;margin:0 auto;text-align:left}
  .story-body::after{content:'';display:block;clear:both}
  .story-body p{margin-top:1.2rem;color:rgba(244,239,228,.78);font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.85}
  .story-body p:first-of-type{margin-top:0}
  @media(min-width:701px){
    .story-photo{float:right;width:min(260px,38%);margin:.2rem 0 1.1rem 1.6rem}
    /* Meme palier, meme regime : la fin de section prend le dessin du parcours
       — texte a gauche qui continue A COTE de l'image, et non au-dessus d'elle.
       Retour d'Eugen du 16/09 : le paragraphe centre en pleine largeur laissait
       la photo seule en dessous, avec un grand vide a cote.
       La position de la photo ne change pas : flottee a droite dans la meme
       colonne de 74ch, son bord droit tombe donc toujours sur celui de la photo
       du parcours — c'est l'arbitrage mesure du 16/09, il tient.
       Sa largeur non plus : 220 px, pas les 260 du parcours. Eugen a valide
       cette image-la a cette taille-la. */
    .story-close{display:block;max-width:74ch;margin:0 auto;text-align:left}
    .story-close p{max-width:none;margin:0}
    .story-portrait{float:right;display:block;width:220px;max-width:38%;margin:.2rem 0 1.1rem 1.6rem}
    .story-portrait img{width:100%;max-width:none}
    /* Le lien passe sous la photo : sans ca, un paragraphe court le laisse
       flotter a mi-hauteur dans le creux a gauche de l'image.
       `display:block` et non `inline-block` : `clear` ne s'applique qu'aux
       boites de bloc, et sur un inline-block il est ignore en silence — le lien
       remontait a cote de l'image sans qu'aucune regle ne paraisse fautive.
       `width:max-content` garde le soulignement a la largeur du texte. */
    .story-link{display:block;width:max-content;clear:both;margin-top:1.6rem}
    .story-photo img{aspect-ratio:570/760;object-position:center}
  }
  .content-head h2{font-family:'Jost',sans-serif;font-size:clamp(2.25rem,5vw,4rem);font-weight:300;font-style:italic;line-height:1.05}
  .content-head p{max-width:58ch;margin:1.15rem auto 0;color:#665f55;font-size:.9rem}
  /* ---- galerie en bas de page ---- */
  .gallery-preview{padding:clamp(5rem,10vw,8rem) clamp(1.2rem,5vw,4rem);background:var(--sapin);color:var(--riz);border-top:1px solid rgba(200,160,99,.72)}
  .gallery-preview .content-kicker{color:var(--miel)}
  .gallery-preview .content-head p{color:rgba(244,239,228,.7)}
  .gallery-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.4rem)}
  .gallery-item{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(145deg,#4c594b,#303b32)}
  .gallery-item:nth-child(even){background:linear-gradient(145deg,#53303a,#34282c)}
  .gallery-item::before{content:"";position:absolute;inset:8%;border-top:1px solid rgba(200,160,99,.72);border-bottom:1px solid rgba(200,160,99,.32)}
  .gallery-item > .gallery-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--miel);font-size:.64rem;font-weight:500;letter-spacing:.2em;text-align:center;text-transform:uppercase;white-space:nowrap}
  @media(max-width:820px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.gallery-grid{grid-template-columns:1fr}}
  @media(max-width:520px){
    header{padding:.85rem 1rem;align-items:center}
    .wordmark{font-size:.76rem;letter-spacing:.18em}
    .langs{padding:.25rem .3rem}
    .langs button{min-width:36px;min-height:40px;padding:.25rem .35rem;font-size:.75rem}
    /* En-tete resserre a cette largeur : le bloc suisse n'a plus besoin du
       plancher des largeurs superieures et reste pres du medaillon. */
    .hero-ch{padding-top:clamp(5.5rem,11.6vh,6.6rem)}
    .story,.experience-chooser,.visit,.gallery-preview{padding-left:1rem;padding-right:1rem}
    .story-title{font-size:2rem;line-height:1.15}
    .cta{width:100%;min-height:48px;padding:.85rem 1rem}
    footer{align-items:flex-start;flex-direction:column;letter-spacing:.08em}
    .footer-nav{width:100%;gap:.8rem 1.1rem}
    .footer-nav a{min-height:36px;display:inline-flex;align-items:center;font-size:.61rem}
  }

/* Calque décoratif de la grappe. Écrit en attribut « style » jusqu'au
   19/09/2026 : un attribut de style est bloqué par style-src dès qu'on
   retire 'unsafe-inline', et c'était le seul de cette page. Les valeurs
   sont recopiées telles quelles — ce commit déplace, il ne redessine pas.

   Le sélecteur, lui, ne pouvait pas rester « .grappe-calque » — corrigé le
   23/09/2026. Tant que les valeurs étaient dans l'attribut, elles battaient
   toute feuille. Déplacées dans une classe seule, elles perdaient contre
   « .seam img » (une classe ET une balise), qui imposait 100 % et un cercle.
   La grappe est passée de 46 % à 97 % du médaillon, a débordé de 54 px à
   gauche et recouvert le nom : on lisait « Win…irits », sur l'accueil, à
   toutes les largeurs, pendant quatre jours. « .seam .grappe-calque » (deux
   classes) passe devant. Les valeurs ne bougent pas : c'est le dessin
   d'avant le 19/09 qui revient, vérifié au pixel près.
   tests/medaillon.navigateur.js tient la décision. */
.seam .grappe-calque{position:absolute;right:20%;bottom:0;width:47%;height:47%;object-fit:cover;border-radius:0;display:block;pointer-events:none}