/* La Brigade des Chefs · démonstration Studio Devanture
   Crème et noir de leur logo, cuivre de leurs visuels. La partie On Board passe en bleu nuit et laiton. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(polices/CormorantGaramond-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(polices/CormorantGaramond-italic.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(polices/Manrope-normal.woff2) format('woff2')}

:root{
  --creme:#f4ede2; --papier:#ece3d4; --encre:#131110; --nuit-cuisine:#0b0a09; --texte:#4f473e; --doux:#8a7f71;
  --cuivre:#a8743d; --cuivre-clair:#c99b63; --trait:rgba(19,17,16,.16); --trait-clair:rgba(244,237,226,.2);
  --marine:#081726; --marine-2:#0e2438; --laiton:#c9ac74; --ecume:#e7edf0;
  --titre:'Cormorant Garamond','Times New Roman',serif; --corps:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --marge:clamp(22px,6.5vw,118px); --large:1320px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--texte);font-family:var(--corps);font-size:15.5px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--cuivre);outline-offset:4px}
.wrap{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}

/* le grain du papier, posé sur les fonds clairs */
.papier{position:relative;background:var(--creme)}
.papier::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .33 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E")}
.papier>*{position:relative}

/* petits éléments communs */
.etiquette{font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--cuivre)}
.titre{font-family:var(--titre);font-weight:400;font-size:clamp(30px,3.7vw,54px);line-height:1.16;letter-spacing:.12em;text-transform:uppercase;color:var(--encre)}
.titre em{font-style:italic;text-transform:none;letter-spacing:.01em;font-size:1.12em;font-weight:400}
.filet{display:block;width:56px;height:1px;background:var(--cuivre);margin:26px 0}
.bouton{position:relative;z-index:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:0 34px;border:1px solid var(--encre);background:transparent;color:var(--encre);
  font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;cursor:pointer;transition:color .45s,border-color .45s;white-space:nowrap}
.bouton::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--encre);transform:translateY(102%);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.bouton:hover::before,.bouton:focus-visible::before{transform:none}
.bouton:hover,.bouton:focus-visible{color:var(--creme)}
.bouton.plein{background:var(--creme);border-color:var(--creme);color:var(--encre)}
.bouton.plein::before{background:var(--cuivre)}
.bouton.plein:hover{color:#fff;border-color:var(--cuivre)}
.bouton.clair{border-color:rgba(244,237,226,.55);color:var(--creme)}
.bouton.clair::before{background:var(--creme)}
.bouton.clair:hover{color:var(--encre);border-color:var(--creme)}
.bouton.laiton{border-color:var(--laiton);color:var(--laiton)}
.bouton.laiton::before{background:var(--laiton)}
.bouton.laiton:hover{color:var(--marine)}
.lien{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--encre);padding-bottom:8px;border-bottom:1px solid var(--cuivre)}
.lien::after{content:"";width:26px;height:1px;background:currentColor;transition:width .35s}
.lien:hover::after{width:44px}

/* bandeau de démonstration */
.demo-bandeau{background:#000;color:#b9b0a3;font-size:12px;line-height:1.5;text-align:center;padding:8px 16px;position:relative;z-index:40}

/* premier écran : bandeau, haut de page et ouverture tiennent ensemble dans la hauteur de l'écran */
.premier-ecran{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--nuit-cuisine)}
.haut{position:absolute;top:0;left:0;right:0;z-index:30;color:var(--creme)}
.haut .wrap{max-width:none;display:flex;align-items:center;gap:28px;height:104px}
.marque{display:flex;align-items:center;gap:14px;margin-right:auto}
.marque img{width:62px;height:62px}
.marque .noir{display:none}
.nav{display:flex;align-items:center;gap:clamp(16px,2.1vw,36px)}
.nav a[aria-current]::after{right:0}
.nav a{font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding:8px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--cuivre-clair);transition:right .35s}
.nav a:hover::after{right:0}
.nav .bord{color:var(--laiton)}
.langue{display:flex;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.2em}
.langue a{opacity:.55}.langue a.ici{opacity:1;border-bottom:1px solid var(--cuivre-clair)}
.haut .bouton{min-height:44px;padding:0 22px}
.menu-case,.menu-bouton{display:none}
/* une fois l'ouverture passée, le haut de page devient une barre crème */
.haut.pose{position:fixed;top:0;background:rgba(244,237,226,.96);color:var(--encre);box-shadow:0 1px 0 var(--trait);animation:descendre .45s ease}
.haut.pose .wrap{height:74px}
.haut.pose .marque img{width:48px;height:48px}
.haut.pose .marque .creme{display:none}.haut.pose .marque .noir{display:block}
.haut.pose .nav .bord{color:#1d4566}
.haut.pose .bouton.clair{border-color:var(--encre);color:var(--encre)}
.haut.pose .bouton.clair::before{background:var(--encre)}
.haut.pose .bouton.clair:hover{color:var(--creme)}
.haut.pose{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.haut.pose.cache{transform:translateY(-102%)}
@keyframes descendre{from{transform:translateY(-100%)}to{transform:none}}

.ouverture{flex:1;position:relative;display:flex;align-items:center;overflow:hidden;color:var(--creme);min-height:520px}
.ouverture-photo{position:absolute;top:0;right:0;height:100%;aspect-ratio:1/1;max-width:68%}
.ouverture-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;animation:approche 2.6s cubic-bezier(.2,.6,.2,1) both}
.ouverture-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--nuit-cuisine) 0,rgba(11,10,9,.55) 14%,rgba(11,10,9,0) 34%),linear-gradient(0deg,rgba(11,10,9,.55) 0,rgba(11,10,9,0) 22%),linear-gradient(180deg,rgba(11,10,9,.7) 0,rgba(11,10,9,0) 20%)}
@keyframes approche{from{transform:scale(1.07)}to{transform:none}}
.ouverture-texte{position:relative;z-index:2;width:100%;padding:118px var(--marge) 70px;max-width:min(760px,56%)}
.ouverture h1{font-family:var(--titre);font-weight:300;font-size:clamp(50px,7.2vw,116px);line-height:.94;letter-spacing:.005em;color:var(--creme);margin:22px 0 0}
.ouverture h1 em{display:block;font-style:italic;font-weight:300;padding-left:.62em}
.ouverture .signature{font-family:var(--titre);font-style:italic;font-size:clamp(19px,1.75vw,25px);line-height:1.45;color:#ddd3c4;margin-top:30px;max-width:22em}
.ouverture .metiers{font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--cuivre-clair);margin-top:22px}
.ouverture .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.defiler{position:absolute;left:var(--marge);bottom:0;z-index:2;display:flex;align-items:center;gap:14px;font-size:10.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:#a99f90;writing-mode:vertical-rl;translate:-46px 0}
.defiler::after{content:"";width:1px;height:54px;background:linear-gradient(var(--cuivre-clair),transparent)}
/* le décalage du repère s'écrit avec « translate », pas « transform » : l'entrée (.entre, animation « paraitre ») finit sur transform:none et le garde,
   ce qui annulait le décalage (repère collé à la colonne) et décentrait « Larguer les amarres » sur On Board de la moitié de sa largeur */

/* à l'affiche */
.affiche .etiquette{color:var(--cuivre-clair)}
.affiche .dates{font-family:var(--titre);font-size:clamp(30px,3vw,44px);line-height:1;white-space:nowrap}
.affiche .dates small{display:block;font-family:var(--corps);font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#a99f90;margin-top:10px}
.affiche p{font-size:14.5px;line-height:1.7;color:#cfc5b6;max-width:46em}
.affiche p strong{color:var(--creme);font-weight:600}

main{overflow-x:clip}
/* manifeste */
.manifeste{padding:clamp(90px,11vw,170px) 0 clamp(70px,8vw,120px)}
.manifeste .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,7vw,120px);align-items:start}
.manifeste .texte p{font-size:16.5px;max-width:34em}
.manifeste .texte p+p{margin-top:18px}
.valeurs{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--trait)}
.valeurs li{display:flex;align-items:baseline;gap:22px;padding:17px 0;border-bottom:1px solid var(--trait);font-family:var(--titre);font-size:22px;color:var(--encre)}
.valeurs li span{font-family:var(--corps);font-size:10.5px;font-weight:600;letter-spacing:.3em;color:var(--cuivre)}
.flottant{position:absolute;pointer-events:none;filter:drop-shadow(0 34px 34px rgba(60,40,15,.28));will-change:transform}
.f-assiette{width:clamp(190px,23vw,360px);left:calc(var(--marge) - 34px);bottom:-90px;z-index:3}
.f-brin{width:clamp(70px,8vw,128px);right:5%;top:16%;z-index:1;filter:drop-shadow(0 18px 16px rgba(60,40,15,.2))}
.f-citron{width:clamp(110px,13vw,200px);left:-3%;bottom:2%;z-index:3}
.f-cannelle{width:clamp(120px,14vw,220px);right:-2%;top:-4%;z-index:3}
.f-piment{width:clamp(34px,3.6vw,56px);left:44%;bottom:-2%;z-index:3;filter:drop-shadow(0 16px 12px rgba(60,40,15,.25))}
.f-nappee{width:clamp(240px,32vw,500px);right:-5%;top:-110px;z-index:3;filter:drop-shadow(0 40px 30px rgba(40,25,10,.3))}
.f-branche{width:clamp(200px,30vw,470px);right:-6%;top:22px;z-index:0;filter:drop-shadow(0 20px 18px rgba(60,40,15,.16))}
.f-passion{width:clamp(70px,8vw,130px);left:3%;bottom:6%;z-index:1}

/* les métiers, en titres qui s'enchaînent */
.metiers-liste{padding:clamp(60px,7vw,110px) 0 clamp(40px,5vw,80px)}
.metier{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:0 28px;align-items:center;padding:clamp(40px,6vw,90px) 0}
.metier .photo{grid-column:1/6;position:relative}
.metier .fil{position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--cuivre);opacity:.6}
.metier figure{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--papier)}
.metier figure img{width:100%;height:100%;object-fit:cover}
.metier .texte{grid-column:7/12;position:relative;z-index:2}
.metier:nth-child(even) .photo{grid-column:8/13;order:2}
.metier:nth-child(even) .fil{inset:18px 18px -18px -18px}
.metier:nth-child(even) .texte{grid-column:2/7;order:1}
.fantome{position:absolute;right:2%;top:4%;z-index:0;font-family:var(--titre);font-weight:300;font-size:clamp(150px,24vw,360px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(168,116,61,.3);pointer-events:none;user-select:none}
.metier:nth-child(even) .fantome{right:auto;left:38%}
.metier .numero{font-family:var(--titre);font-style:italic;font-size:22px;color:var(--cuivre);display:flex;align-items:center;gap:16px}
.metier .numero::after{content:"";width:64px;height:1px;background:var(--cuivre)}
.metier h3{font-family:var(--titre);font-weight:400;font-size:clamp(27px,3vw,44px);line-height:1.2;letter-spacing:.11em;text-transform:uppercase;color:var(--encre);margin:20px 0 22px}
.metier h3 em{font-style:italic;text-transform:none;letter-spacing:.01em;font-size:1.12em}
.metier p{max-width:31em}
.metier .mots{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--doux);margin:22px 0 30px}

/* on board : la porte vers l'autre univers */
.porte-bord{position:relative;min-height:min(92vh,860px);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ecume);background:var(--marine);overflow:hidden}
.porte-bord>img.fond{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover}
.porte-bord::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,23,38,.84) 0,rgba(8,23,38,.6) 42%,rgba(8,23,38,.9) 100%)}
.porte-bord::after{content:"";position:absolute;inset:22px;z-index:1;border:1px solid rgba(201,172,116,.45);pointer-events:none}
.porte-bord .contenu{position:relative;z-index:2;padding:90px var(--marge);max-width:880px}
.porte-bord .sceau{width:118px;height:118px;margin:0 auto 26px}
.porte-bord .etiquette{color:var(--laiton)}
.porte-bord h2{font-family:var(--titre);font-weight:300;font-size:clamp(40px,6vw,92px);line-height:1;margin:18px 0 0;color:#fff}
.porte-bord h2 em{font-style:italic;color:var(--laiton)}
.porte-bord p{font-family:var(--titre);font-size:clamp(19px,1.7vw,24px);line-height:1.55;color:#d5dde2;max-width:30em;margin:26px auto 38px}

/* la brigade */
.brigade{background:var(--encre);color:#cfc5b6;padding:clamp(90px,10vw,150px) 0}
.brigade .titre{color:var(--creme)}
.brigade .tete{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(44px,5vw,74px)}
.brigade .tete>p{max-width:32em;justify-self:end}
.portraits{display:grid;grid-template-columns:1fr 1fr 1.08fr;gap:clamp(22px,3vw,46px);align-items:start}
.portrait figure{overflow:hidden;aspect-ratio:4/5}
.portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.portrait h3{font-family:var(--titre);font-weight:400;font-size:31px;line-height:1.1;color:var(--creme);margin:24px 0 8px}
.portrait .role{font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--cuivre-clair)}
.portrait p{font-size:14.5px;line-height:1.75;margin-top:16px}
.portrait.equipe{margin-top:clamp(40px,6vw,96px)}
.portrait.equipe figure{aspect-ratio:1000/1160}

/* galerie : la bande qui défile de côté */
.defile-colle{padding:clamp(80px,9vw,130px) 0 clamp(60px,7vw,100px)}
.defile .tete{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:clamp(30px,4vw,52px)}
.defile-piste{display:flex;align-items:flex-start;gap:clamp(14px,2vw,34px);padding:0 var(--marge);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.defile-piste::-webkit-scrollbar{display:none}
.defile-piste figure{flex:0 0 auto;scroll-snap-align:center}
.defile-piste figure a{display:block;overflow:hidden}
.defile-piste img{height:clamp(300px,50vh,520px);width:auto;max-width:none;transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.defile-piste figure a:hover img{transform:scale(1.05)}
.defile-piste figcaption{display:flex;gap:16px;font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--doux);margin-top:14px}
.defile-piste figcaption span{color:var(--cuivre)}
.defile-piste .fin{align-self:center;padding:0 clamp(20px,5vw,80px)}
.defile-jauge{height:1px;background:var(--trait);margin:34px var(--marge) 0;position:relative}
.defile-jauge i{position:absolute;inset:0;background:var(--cuivre);transform-origin:left;transform:scaleX(.06)}
.js .defile.epingle .defile-colle{position:sticky;top:0;height:100vh;padding:74px 0 0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.js .defile.epingle .defile-piste{overflow:visible;scroll-snap-type:none;will-change:transform}
.js .defile.epingle .defile-piste img{height:clamp(240px,calc(100vh - 380px),600px)}
.js .defile.epingle .defile-piste figure:nth-child(even){margin-top:26px}
.js .defile.epingle .tete{margin-bottom:clamp(20px,3.4vh,44px)}

/* les mots des convives */
.mots-convives{position:relative;background:var(--papier);padding:clamp(100px,11vw,160px) 0 clamp(80px,9vw,130px);text-align:center}
.mots-convives .wrap{position:relative;z-index:2}
.mots-convives .filet{margin:26px auto}
.temoignages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px);margin:clamp(34px,4vw,56px) 0 44px;text-align:left}
.temoignage{background:var(--creme);padding:38px 34px 32px;border:1px solid var(--trait);position:relative}
.temoignage::before{content:"“";font-family:var(--titre);font-size:86px;line-height:.6;color:var(--cuivre);display:block;height:36px}
.temoignage blockquote{margin:0;font-family:var(--titre);font-size:21px;line-height:1.5;color:var(--encre)}
.temoignage cite{display:block;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--doux);margin-top:22px;padding-top:18px;border-top:1px solid var(--trait)}

/* votre projet */
.projet{padding:clamp(90px,10vw,150px) 0}
.projet{position:relative}
.projet .wrap{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,120px);align-items:start}
.coordonnees{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--trait)}
.coordonnees li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:17px 0;border-bottom:1px solid var(--trait)}
.coordonnees span{font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--doux)}
.coordonnees a{font-family:var(--titre);font-size:23px;color:var(--encre);overflow-wrap:anywhere;text-align:right}
.coordonnees a:hover{color:var(--cuivre)}
.formulaire{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;background:#fbf7f0;border:1px solid var(--trait);padding:clamp(26px,3.6vw,54px)}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ.large{grid-column:1/-1}
.champ label{font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--doux)}
.champ input,.champ select,.champ textarea{width:100%;min-width:0;border:0;border-bottom:1px solid rgba(19,17,16,.34);background:transparent;padding:9px 0 11px;font-family:var(--titre);font-size:20px;color:var(--encre);border-radius:0;outline:0;transition:border-color .3s}
.champ select{-webkit-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a8743d'/%3E%3C/svg%3E") right 4px center no-repeat}
.champ textarea{min-height:104px;resize:vertical;line-height:1.5}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-bottom-color:var(--cuivre)}
.formulaire .pied{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:6px}
.formulaire .pied small{font-size:12.5px;color:var(--doux);max-width:26em;line-height:1.6}
.merci{grid-column:1/-1;font-family:var(--titre);font-size:23px;line-height:1.45;color:var(--encre);border-left:1px solid var(--cuivre);padding:6px 0 6px 22px}

/* pied de page */
.pied-page{background:var(--nuit-cuisine);color:#a99f90;padding:clamp(60px,7vw,96px) 0 34px;font-size:13.5px}
.pied-page .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.pied-page img{width:96px;height:96px;margin-bottom:20px}
.pied-page h4{margin:0 0 16px;font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--cuivre-clair)}
.pied-page a{display:block;padding:4px 0;color:#d5cbbc}
.pied-page a:hover{color:#fff}
.pied-page .devise{font-family:var(--titre);font-style:italic;font-size:21px;line-height:1.45;color:#d5cbbc;max-width:15em}
.pied-page .bas{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid rgba(244,237,226,.12);font-size:12px}
.pied-page .bas a{display:inline;padding:0}

/* ---------- le mouvement (tout est armé par la classe « js » : sans script la page est entière et fixe) ---------- */
:root{--t0:1.25s}
.deja{--t0:.15s}
/* rideau d'entrée : le sceau sur fond noir, puis le rideau se lève */
.rideau{display:none}
.js .rideau{display:flex;position:fixed;inset:0;z-index:100;background:var(--nuit-cuisine);align-items:center;justify-content:center;animation:lever .9s .85s cubic-bezier(.75,0,.2,1) forwards}
.js .rideau img{width:150px;height:150px;animation:sceau .8s .02s cubic-bezier(.2,.7,.2,1) both}
.js.deja .rideau{display:none}
@keyframes lever{to{transform:translateY(-100%);visibility:hidden}}
@keyframes sceau{from{opacity:0;transform:scale(.84) rotate(-10deg)}to{opacity:1;transform:none}}
/* l'ouverture entre en scène */
.ouverture h1 .l{display:block;overflow:hidden;padding:.04em .22em .2em 0;margin-bottom:-.2em}
.ouverture h1 em.l{padding-left:.62em}
.ouverture h1 .l>span{display:inline-block}
.js .ouverture h1 .l>span{animation:monter 1.25s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--t0) + var(--n)*.13s)}
.js .ouverture .entre{animation:paraitre 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--t0) + var(--n)*.11s)}
.js .ouverture .haut:not(.pose){animation:paraitre 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--t0) + .5s)}
.js .ouverture-photo img{animation-delay:calc(var(--t0) - .5s)}
.ouverture-photo,.ouverture-texte{will-change:transform}
@keyframes monter{from{transform:translateY(112%)}to{transform:none}}
@keyframes paraitre{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* apparitions au défilement */
.js .voile{opacity:0;transform:translateY(34px);transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),transform 1.1s cubic-bezier(.2,.6,.2,1)}
.js .voile.vu{opacity:1;transform:none}
.js .voile.d1{transition-delay:.12s}.js .voile.d2{transition-delay:.24s}.js .voile.d3{transition-delay:.36s}
/* les titres montent mot à mot, derrière un cache */
.js .lignes .mot{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .14em .2em;margin:-.06em -.14em -.2em}
.js .lignes .mot>span{display:inline-block;transform:translateY(118%);transition:transform 1.05s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*60ms)}
.js .lignes.vu .mot>span{transform:none}
/* les photos se dévoilent comme un rideau qu'on tire */
/* (le cache est posé sur l'image et non sur son cadre : un cadre entièrement masqué n'est jamais vu par le déclencheur) */
.js .masque img{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s cubic-bezier(.7,0,.15,1)}
.js .masque.vu img{clip-path:inset(0)}
.js .masque img[data-vi]{transform:scale(1.18)}
.js .portrait:nth-child(2) .masque img{transition-delay:.15s}.js .portrait:nth-child(3) .masque img{transition-delay:.3s}
/* les filets se tracent */
.js .trace{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.7,0,.2,1) .15s}
.js .trace.vu{transform:none}
.mots-convives .trace{transform-origin:center}
.js .metier .fil{opacity:0;transition:opacity 1.4s .5s}
.js .metier .masque.vu~.fil,.js .metier .photo.vu .fil{opacity:.6}
/* on board : le bandeau arrive en carte puis s'ouvre en grand */
.js .porte-bord[data-ouvre]{clip-path:inset(var(--oy,9%) var(--ox,7%));will-change:clip-path}
[data-v],.flottant{will-change:transform}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rideau{display:none}
  .js .voile,.js .lignes .mot>span,.js .trace{opacity:1;transform:none;transition:none}
  .js .masque img{clip-path:none;transition:none}.js .masque img[data-vi]{transform:none}
  .js .metier .fil{opacity:.6}
  .js .porte-bord[data-ouvre]{clip-path:none}
  .js .ouverture h1 .l>span,.js .ouverture .entre,.js .ouverture .haut,.ouverture-photo img,.haut.pose{animation:none}
}

/* écrans moyens : le menu se replie */
@media (max-width:1080px){
  .menu-bouton{display:flex;flex-direction:column;justify-content:center;gap:7px;width:44px;height:44px;cursor:pointer;z-index:3}
  .menu-bouton span{display:block;height:1px;background:currentColor;transition:transform .3s,opacity .3s}
  .menu-case:checked~.menu-bouton span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-case:checked~.menu-bouton span:nth-child(2){opacity:0}
  .menu-case:checked~.menu-bouton span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .nav{position:fixed;inset:0;z-index:2;flex-direction:column;justify-content:center;gap:26px;background:var(--nuit-cuisine);color:var(--creme);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .nav a{font-family:var(--titre);font-size:30px;font-weight:400;letter-spacing:.08em;text-transform:none}
  .menu-case:checked~.nav{opacity:1;visibility:visible}
  .menu-case:checked~.menu-bouton{color:var(--creme)}
  .haut .wrap{height:84px;gap:16px}
  .haut .bouton{display:none}
  .manifeste .wrap,.projet .wrap,.brigade .tete{grid-template-columns:1fr}
  .brigade .tete>p{justify-self:start}
  .f-assiette{left:auto;right:-40px;bottom:auto;top:-70px;width:200px}
  .f-brin{right:auto;left:4%;top:auto;bottom:3%;width:64px}
  .fantome{font-size:200px}
  .pied-page .wrap{grid-template-columns:1fr 1fr}
}
/* téléphones */
@media (max-width:760px){
  body{font-size:15px}
  .ouverture{flex-direction:column;align-items:stretch;min-height:0}
  .ouverture-photo{position:relative;height:auto;max-width:none;width:100%;aspect-ratio:auto;flex:1 1 0;min-height:210px}
  .ouverture-photo img{position:absolute;inset:0;object-position:50% 46%}
  .ouverture-photo::after{background:linear-gradient(0deg,var(--nuit-cuisine) 0,rgba(11,10,9,0) 38%),linear-gradient(180deg,rgba(11,10,9,.78) 0,rgba(11,10,9,0) 30%)}
  .ouverture-texte{max-width:none;padding:6px var(--marge) 34px;margin-top:-34px}
  .ouverture h1{font-size:clamp(44px,14.5vw,68px);margin-top:12px}
  .ouverture .signature{margin-top:16px;font-size:18px}
  .ouverture .metiers{margin-top:14px;font-size:10px;letter-spacing:.22em}
  .ouverture .actions{margin-top:22px;gap:10px}
  .ouverture .actions .bouton{flex:1 1 100%;min-height:50px;padding:0 16px;letter-spacing:.2em}
  .defiler{display:none}
  .metier{display:block}
  .metier .photo{margin:0 18px 44px 0}
  .metier:nth-child(even) .photo{margin:0 0 44px 18px}
  .fantome{font-size:150px;top:0;right:0}
  .metier:nth-child(even) .fantome{left:0}
  .f-citron{left:auto;right:-6%;bottom:auto;top:42%;width:96px}
  .f-cannelle{width:110px;right:-8%;top:-2%}
  .f-piment{left:auto;right:8%}
  .f-nappee{width:210px;top:-66px;right:-12%}
  .f-branche{width:190px;right:-14%;top:10px;opacity:.9}
  .f-passion{display:none}
  .portraits{grid-template-columns:1fr 1fr}
  .portrait.equipe{grid-column:1/-1;margin-top:10px}
  .portrait h3{font-size:25px}
  .defile .tete{flex-direction:column;align-items:flex-start}
  .defile-piste img{height:330px}
  .temoignages{grid-template-columns:1fr}
  .formulaire{grid-template-columns:1fr}
  .coordonnees li{flex-direction:column;align-items:flex-start;gap:4px}
  .coordonnees a{font-size:20px;text-align:left}
  .f-assiette{width:150px;right:-34px;top:-52px}
  .porte-bord::after{inset:12px}
  .porte-bord .sceau{width:92px;height:92px}
  .pied-page .wrap{grid-template-columns:1fr}
}
/* écrans bas : l'ouverture se resserre pour rester entière */
@media (max-height:700px) and (min-width:761px){
  .ouverture-texte{padding-top:96px;padding-bottom:40px}
  .ouverture h1{font-size:clamp(46px,min(7.2vw,13.5vh),96px)}
  .ouverture .signature{margin-top:18px}.ouverture .metiers{margin-top:14px}.ouverture .actions{margin-top:24px}
  .haut .wrap{height:84px}
}
@media (max-height:640px) and (max-width:760px){
  .ouverture h1{font-size:42px}.ouverture .signature{font-size:16.5px;margin-top:10px}.ouverture .metiers{display:none}.ouverture .actions{margin-top:16px}
  .ouverture .actions .bouton{min-height:46px}
}

/* ================= LA BRIGADE DES CHEFS ON BOARD : bleu nuit, écume et laiton ================= */
/* la carte servie à bord */
.carte{--or:var(--laiton);--or-rvb:201,172,116;background:var(--marine);color:#c3cfd8;padding:clamp(90px,10vw,150px) 0;position:relative;overflow:hidden}
.carte::before{content:"";position:absolute;inset:22px;border:1px solid rgba(var(--or-rvb),.3);pointer-events:none}
.carte .tete{text-align:center;max-width:720px;margin:0 auto clamp(44px,5vw,76px)}
.carte .etiquette{color:var(--or)}
.carte .filet{margin:26px auto;background:var(--or)}
.carte .titre{color:#fff}
.carte .titre em{color:var(--or)}
.carte .note{font-size:13.5px;margin-top:22px;color:#93a4b1}
.chapitres{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,84px) clamp(40px,7vw,120px);max-width:1080px;margin:0 auto}
.chapitre h3{font-family:var(--titre);font-style:italic;font-weight:400;font-size:30px;color:var(--or);margin-bottom:8px;display:flex;align-items:center;gap:18px}
.chapitre h3::after{content:"";flex:1;height:1px;background:rgba(var(--or-rvb),.35)}
.plat{padding:18px 0;border-bottom:1px solid rgba(233,238,241,.12)}
.plat .ligne{display:flex;align-items:baseline;gap:14px}
.plat .nom{font-family:var(--titre);font-size:23px;line-height:1.25;color:#fff}
.plat .points{flex:1;border-bottom:1px dotted rgba(233,238,241,.3);transform:translateY(-5px);min-width:20px}
.plat .prix{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--or);white-space:nowrap}
.plat .detail{font-size:13.5px;line-height:1.6;color:#93a4b1;margin-top:4px;max-width:30em}
.carte .suite{text-align:center;margin-top:clamp(40px,5vw,70px)}
.carte.terre{--or:var(--cuivre-clair);--or-rvb:201,155,99;background:var(--encre);color:#cfc5b6}
.carte.terre .note,.carte.terre .plat .detail{color:#a99f90}
/* les photos à bord : trois colonnes qui glissent à des vitesses différentes */
.colonnes-photos{padding:clamp(90px,10vw,150px) 0 clamp(120px,14vw,220px);overflow:hidden}
.colonnes-photos .tete{margin-bottom:clamp(36px,4vw,60px)}
.colonnes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,26px);align-items:start}
.colonnes>div{display:grid;gap:clamp(10px,1.6vw,26px)}
.colonnes>div:nth-child(2){margin-top:clamp(40px,8vw,130px)}
.colonnes figure{overflow:hidden;background:var(--papier)}
.colonnes img{width:100%;height:auto}
/* écrans bas : le grand titre se resserre pour que l'ouverture reste entière */
@media (max-height:700px) and (min-width:761px){}
@media (max-width:1080px){.chapitres{grid-template-columns:1fr}}
@media (max-width:760px){
        .colonnes{grid-template-columns:1fr 1fr}
  .colonnes>div:nth-child(3){grid-column:1/-1;grid-template-columns:1fr 1fr}
  .carte::before{inset:12px}
  .plat .nom{font-size:21px}
}
@media (max-height:600px) and (max-width:760px){}

/* ================= pages par métier ================= */
.ouverture h1 .h1-mots{display:block;font-family:var(--corps);font-size:11px;font-weight:600;line-height:1.6;letter-spacing:.34em;text-transform:uppercase;color:var(--cuivre-clair);margin-bottom:22px}
.ouverture h1:has(.h1-mots){margin-top:0}
.fil-ariane{display:flex;gap:12px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--doux);margin-bottom:26px}
.fil-ariane a{border-bottom:1px solid var(--trait)}
.fil-ariane a:hover{color:var(--cuivre)}
.etapes{background:var(--encre);color:#cfc5b6;padding:clamp(90px,10vw,150px) 0}
.etapes .titre{color:var(--creme)}
.etapes ol{list-style:none;margin:clamp(40px,5vw,70px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,70px);border-top:1px solid var(--trait-clair)}
.etapes li{padding-top:34px;position:relative}
.etapes li::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:1px;background:var(--cuivre-clair)}
.etapes .rang{font-family:var(--titre);font-style:italic;font-size:54px;line-height:1;color:var(--cuivre-clair)}
.etapes h3{font-family:var(--titre);font-weight:400;font-size:30px;color:var(--creme);margin:16px 0 10px}
.etapes p{font-size:14.5px;line-height:1.75;max-width:26em}
.faq{padding:clamp(90px,10vw,150px) 0}
.faq .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,120px);align-items:start}
.reponses{border-top:1px solid var(--trait)}
.reponses details{border-bottom:1px solid var(--trait)}
.reponses summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:var(--titre);font-size:clamp(21px,1.9vw,26px);line-height:1.3;color:var(--encre)}
.reponses summary::-webkit-details-marker{display:none}
.reponses summary::after{content:"";flex:0 0 13px;height:13px;background:linear-gradient(var(--cuivre),var(--cuivre)) center/100% 1px no-repeat,linear-gradient(var(--cuivre),var(--cuivre)) center/1px 100% no-repeat;transition:transform .4s}
.reponses details[open] summary::after{transform:rotate(45deg)}
.reponses details p{padding:0 40px 26px 0;max-width:38em}
.autres{padding:0 0 clamp(90px,10vw,150px)}
.autres-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,44px);margin-top:clamp(34px,4vw,56px)}
.autre{display:block}
.autre figure{overflow:hidden;aspect-ratio:4/5;background:var(--papier)}
.autre img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.6,.2,1),clip-path 1.5s cubic-bezier(.7,0,.15,1)}
.autre:hover img{transform:scale(1.05)}
.autre h3{font-family:var(--titre);font-weight:400;font-size:28px;color:var(--encre);margin:22px 0 6px}
.autre p{font-size:14.5px;margin-bottom:18px;max-width:24em}
@media (max-width:1240px){.haut .bouton{display:none}}
@media (max-width:1080px){.faq .wrap{grid-template-columns:1fr}}
@media (max-width:760px){
  .etapes ol{grid-template-columns:1fr}
  .autres-grille{grid-template-columns:1fr}
  .autre figure{aspect-ratio:3/2}
  .ouverture h1 .h1-mots{font-size:10px;letter-spacing:.24em;margin-bottom:12px}
}

/* ================= galerie : albums, filtres, visionneuse ================= */
.galerie{padding:clamp(70px,8vw,120px) 0 clamp(60px,7vw,100px)}
.filtres{display:flex;flex-wrap:wrap;gap:10px}
.filtre{border:1px solid var(--trait);background:transparent;padding:0 22px;min-height:44px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--encre);cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.filtre:hover{border-color:var(--encre)}
.filtre.actif{background:var(--encre);border-color:var(--encre);color:var(--creme)}
.album{padding:clamp(50px,6vw,90px) 0 0}
.album[hidden]{display:none}
.album-tete{display:grid;grid-template-columns:1fr auto;align-items:end;gap:clamp(18px,3vw,44px);padding-bottom:26px;margin-bottom:clamp(22px,3vw,40px);border-bottom:1px solid var(--trait)}
.album-tete .titre{font-size:clamp(26px,3vw,44px);margin-top:10px}
.album-sous{font-size:14px;color:var(--doux);margin-top:8px}
.album-compte{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--doux);white-space:nowrap}
.mur{columns:3;column-gap:clamp(10px,1.4vw,22px)}
.mur .vue{display:block;break-inside:avoid;margin-bottom:clamp(10px,1.4vw,22px);overflow:hidden;background:var(--papier);cursor:zoom-in}
.mur .vue img{width:100%;height:auto;transition:transform 1.4s cubic-bezier(.2,.6,.2,1),clip-path 1.5s cubic-bezier(.7,0,.15,1)}
.mur .vue:hover img{transform:scale(1.04)}
.visionneuse{position:fixed;inset:0;z-index:90;background:rgba(11,10,9,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.visionneuse.ouverte{opacity:1;visibility:visible}
.visionneuse img{max-width:min(92vw,1500px);max-height:82vh;width:auto;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.5);transition:opacity .35s}
.visionneuse .legende{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#cfc5b6}
.visionneuse .legende b{color:var(--cuivre-clair);font-weight:600;margin-right:16px}
.visionneuse button{position:absolute;background:none;border:0;color:var(--creme);cursor:pointer;width:64px;height:64px;font-family:var(--titre);font-size:44px;line-height:1;opacity:.75;transition:opacity .3s}
.visionneuse button:hover{opacity:1}
.visionneuse .fermer{top:14px;right:14px}.visionneuse .avant{left:8px;top:calc(50% - 32px)}.visionneuse .apres{right:8px;top:calc(50% - 32px)}
@media (max-width:1080px){.mur{columns:2}}
@media (max-width:760px){.album-tete{grid-template-columns:1fr}.visionneuse button{width:48px;height:48px;font-size:36px}}
@media (max-height:600px) and (max-width:760px){.ouverture h1 .h1-mots{margin-bottom:8px}.ouverture h1:has(.h1-mots)~.signature{display:none}}

/* à l'affiche : une publication de l'espace à la place du bloc écrit dans la page */
/* le mot-clé au-dessus du grand titre s'est allongé (ville et pays) : on le resserre sur les écrans bas */
.ouverture h1 .h1-mots{letter-spacing:.28em}
@media (max-height:700px) and (min-width:761px){.ouverture h1 .h1-mots{margin-bottom:12px}.ouverture-texte{padding-top:90px;padding-bottom:30px}}
@media (max-height:700px) and (max-width:760px){.ouverture h1 .h1-mots{margin-bottom:8px;letter-spacing:.2em}}

/* retouches du 06/10 au soir (Adrien) : « Découvrir » passe à droite, hors des boutons ; le mot-clé ne se coupe plus au trait d'union */
.defiler{left:auto;right:var(--marge);translate:46px 0}
.ouverture h1 .h1-mots .bloc{display:inline-block}
@media (max-width:1380px){.defiler{translate:26px 0}}

/* ================= ON BOARD : une page à part, toute en bleus (refonte du 06/10 au soir, demande d'Adrien :
   « très différent comme page, dans les tons bleus, un peu unique »). Ouverture plein cadre et centrée, page sombre
   du haut en bas, compas qui tourne, houle, route tracée entre trois escales en hublots, carte du bord sur papier clair. ===== */
/* (« body.bord » et non « .bord » : le lien On Board du menu porte aussi la classe bord) */
body.bord{--nuit:#06121f;--marine:#0a1f33;--lagon:#0f4a5e;--azur:#8fc3d3;--ecume:#eaf2f5;--laiton:#c9ac74;
  --creme:#eaf2f5;--papier:#0d2a40;--encre:#081726;--nuit-cuisine:#06121f;--texte:#b4c5d0;--doux:#7d93a3;--cuivre:#c9ac74;--cuivre-clair:#c9ac74;--trait:rgba(234,242,245,.16);--trait-clair:rgba(234,242,245,.2);
  background:#06121f}
.bord main{background:linear-gradient(180deg,#06121f 0,#0a2236 18%,#0c3447 46%,#0a2236 74%,#06121f 100%)}
.bord .demo-bandeau{background:#02080e;color:#9fb0bd}
.bord .papier{background:transparent}
.bord .papier::before{display:none}
.bord .titre,.bord .valeurs li,.bord .reponses summary,.bord .coordonnees a,.bord .lien{color:#f3f8fa}
.bord .titre em{color:var(--laiton)}
.bord .reponses summary::after{background:linear-gradient(var(--laiton),var(--laiton)) center/100% 1px no-repeat,linear-gradient(var(--laiton),var(--laiton)) center/1px 100% no-repeat}
/* le haut de page reste sombre une fois posé */
.bord .haut .marque img{width:66px;height:66px}
.bord .haut.pose{background:rgba(6,18,31,.94);color:var(--ecume);box-shadow:0 1px 0 rgba(234,242,245,.12)}
.bord .haut.pose .marque img{width:50px;height:50px}
.bord .haut.pose .marque .creme{display:block}.bord .haut.pose .marque .noir{display:none}
.bord .haut.pose .nav .bord{color:var(--laiton)}
.bord .haut.pose .bouton.clair{border-color:rgba(234,242,245,.55);color:var(--ecume)}
.bord .haut.pose .bouton.clair::before{background:var(--ecume)}
.bord .haut.pose .bouton.clair:hover{color:var(--nuit)}
.bord .bouton.plein{background:var(--laiton);border-color:var(--laiton);color:var(--nuit)}
.bord .bouton.plein::before{background:var(--ecume)}
.bord .bouton.plein:hover{color:var(--nuit);border-color:var(--ecume)}
/* ouverture : la photo du lagon en plein cadre, le titre au centre, un cadre de laiton */
.bord .ouverture{justify-content:center;text-align:center}
.bord .ouverture::after{content:"";position:absolute;inset:18px;border:1px solid rgba(201,172,116,.42);pointer-events:none;z-index:1}
.bord .ouverture-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto}
.bord .ouverture-photo img{object-position:38% 26%}
.bord .ouverture-photo::after{background:radial-gradient(ellipse at 50% 46%,rgba(6,18,31,.5) 0,rgba(6,18,31,.2) 46%,rgba(6,18,31,0) 70%),linear-gradient(180deg,rgba(6,18,31,.86) 0,rgba(6,18,31,.34) 30%,rgba(6,18,31,.3) 62%,#06121f 100%)}
.bord .ouverture-texte{max-width:1000px;margin:0 auto;padding:128px var(--marge) 84px}
.bord .ouverture h1{font-size:clamp(64px,min(13.5vw,25vh),230px);line-height:.9;margin:0;text-shadow:0 2px 40px rgba(6,18,31,.55)}
.bord .ouverture h1 .l{display:inline-block;padding:.04em .08em .22em;margin-bottom:-.22em}
.bord .ouverture h1 em.l{padding-left:.16em;color:var(--laiton)}
.bord .ouverture h1 .h1-mots{color:var(--laiton);margin-bottom:10px}
.bord .ouverture .surtitre{font-family:var(--titre);font-style:italic;font-size:clamp(21px,2.1vw,31px);color:var(--ecume);margin-top:6px}
.bord .ouverture .actions{justify-content:center;margin-top:34px}
.bord .ouverture .position{font-size:10.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:#c6d6df;margin-top:30px}
.bord .ouverture .position::before,.bord .ouverture .position::after{content:"";display:inline-block;vertical-align:middle;width:34px;height:1px;background:var(--laiton);margin:0 16px}
.bord .defiler{right:auto;left:50%;bottom:18px;translate:-50% 0;writing-mode:horizontal-tb;flex-direction:column;gap:8px;color:#c6d6df}
.bord .defiler::after{width:1px;height:26px}
/* la houle : un filet de vagues qui dérive entre les sections */
.houle{height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26'%3E%3Cpath d='M0 13 Q15 1 30 13 T60 13 T90 13 T120 13' fill='none' stroke='%23c9ac74' stroke-width='1'/%3E%3C/svg%3E") repeat-x 0 50%;opacity:.55;animation:houle 9s linear infinite}
@keyframes houle{to{background-position-x:120px}}
/* l'histoire, avec le compas */
.bord .manifeste{position:relative;overflow:hidden}
.compas{position:absolute;right:-90px;top:50%;width:clamp(300px,38vw,560px);height:auto;margin-top:calc(clamp(300px,38vw,560px) / -2);opacity:.5;pointer-events:none}
.compas circle,.compas path,.compas line{fill:none;stroke:var(--laiton);stroke-width:1}
.compas .aiguille{fill:var(--laiton);stroke:none}
.bord .manifeste .wrap{position:relative;z-index:1}
/* la route : trois escales en hublots, reliées par un trait qui se trace en descendant */
.route{position:relative;padding:clamp(70px,8vw,120px) 0 clamp(60px,7vw,110px)}
.route-tete{text-align:center;margin-bottom:clamp(50px,6vw,90px)}
.route-tete .filet{margin:26px auto}
.escales{position:relative}
.route-trait{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(201,172,116,.2)}
.route-trait i{display:block;width:100%;height:100%;background:var(--laiton);transform-origin:top;transform:scaleY(var(--p,1))}
.escale{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(60px,10vw,170px);align-items:center;padding:clamp(30px,4vw,60px) 0}
.escale::before{content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-8px 0 0 -8px;border-radius:50%;background:#0b2a3d;border:1px solid var(--laiton);box-shadow:0 0 0 7px rgba(201,172,116,.12);z-index:1}
.hublot{position:relative;justify-self:end;width:clamp(240px,32vw,440px);aspect-ratio:1/1}
.hublot::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(201,172,116,.55)}
.hublot::after{content:"";position:absolute;inset:-30px;border-radius:50%;border:1px dashed rgba(201,172,116,.25);animation:tourne 80s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.hublot figure{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#0d2a40;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.hublot img{width:100%;height:100%;object-fit:cover}
.escale:nth-child(odd) .hublot{order:2;justify-self:start}
.escale:nth-child(odd) .texte{order:1;text-align:right;justify-self:end}
.escale:nth-child(odd) .texte p{margin-left:auto}
.escale .texte{max-width:27em}
.escale .rang{font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--laiton)}
.escale h3{font-family:var(--titre);font-weight:400;font-size:clamp(28px,3.2vw,48px);line-height:1.14;color:#f3f8fa;margin:16px 0 18px}
.escale h3 em{font-style:italic;color:var(--laiton)}
.escale .mots{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--doux);margin:18px 0 26px}
/* la carte du bord : une feuille claire posée sur la nuit */
.bord .carte{background:transparent;padding:clamp(60px,7vw,110px) 0;overflow:visible}
.bord .carte::before{display:none}
.bord .carte .wrap{max-width:1060px;background:#eef4f7;color:#3c4a58;padding:clamp(40px,6vw,90px) clamp(22px,6vw,90px);position:relative;box-shadow:0 40px 90px rgba(0,0,0,.4)}
.bord .carte .wrap::before{content:"";position:absolute;inset:14px;border:1px solid rgba(8,23,38,.22);pointer-events:none}
.bord .carte .wrap::after{content:"";position:absolute;inset:20px;border:1px solid rgba(169,138,78,.55);pointer-events:none}
.bord .carte{--or:#9c7f45;--or-rvb:156,127,69}
.bord .carte .titre{color:#081726}
.bord .carte .titre em{color:#9c7f45}
.bord .carte .note{color:#667a89}
.bord .carte .plat{border-bottom-color:rgba(8,23,38,.12)}
.bord .carte .plat .nom{color:#081726}
.bord .carte .plat .points{border-bottom-color:rgba(8,23,38,.3)}
.bord .carte .plat .detail{color:#667a89}
.bord .carte .bouton.laiton{border-color:#081726;color:#081726}
.bord .carte .bouton.laiton::before{background:#081726}
.bord .carte .bouton.laiton:hover{color:#eef4f7}
.bord .colonnes figure{background:#0d2a40}
/* la demande : le formulaire reste une feuille claire */
.bord .formulaire{--trait:rgba(8,23,38,.2);--doux:#5f7180;--texte:#3c4a58;--cuivre:#9c7f45;background:#eef4f7;color:#3c4a58;border-color:transparent;box-shadow:0 30px 70px rgba(0,0,0,.35)}
/* retour à terre : le seul bloc crème de la page */
.bord .porte-bord.terre{background:#f4ede2;color:#4f473e;min-height:0}
.bord .porte-bord.terre::before{display:none}
.bord .porte-bord.terre::after{border-color:rgba(168,116,61,.45)}
.bord .porte-bord.terre .contenu{padding:clamp(70px,8vw,110px) var(--marge)}
.bord .porte-bord.terre .sceau{width:96px;height:96px}
.bord .porte-bord.terre .etiquette{color:#a8743d}
.bord .porte-bord.terre h2{color:#131110}
.bord .porte-bord.terre h2 em{color:#a8743d}
.bord .porte-bord.terre p{color:#4f473e}
.bord .porte-bord.terre .bouton{border-color:#131110;color:#131110}
.bord .porte-bord.terre .bouton::before{background:#131110}
.bord .porte-bord.terre .bouton:hover{color:#f4ede2}
.bord .pied-page{background:#040c15}
@media (max-height:700px) and (min-width:761px){.bord .ouverture-texte{padding:104px var(--marge) 64px}.bord .ouverture h1{font-size:clamp(56px,min(11vw,21vh),150px)}.bord .ouverture .actions{margin-top:20px}.bord .ouverture .position{margin-top:16px}}
@media (max-width:1080px){.compas{opacity:.28}}
@media (max-width:760px){
  .bord .ouverture{flex-direction:row;align-items:center;min-height:0}
  .bord .ouverture::after{inset:10px}
  .bord .ouverture-photo{position:absolute;inset:0;flex:none;min-height:0}
  .bord .ouverture-photo img{position:static;object-position:40% 30%}
  .bord .ouverture-texte{padding:104px 26px 70px;margin-top:0}
  .bord .ouverture h1{font-size:clamp(54px,min(21vw,13vh),104px)}
  .bord .ouverture .surtitre{font-size:19px}
  .bord .ouverture .actions{margin-top:22px}
  .bord .ouverture .position{font-size:9.5px;letter-spacing:.24em;margin-top:18px}
  .bord .ouverture .position::before,.bord .ouverture .position::after{width:16px;margin:0 8px}
  .bord .defiler{display:none}
  .compas{right:-140px;width:300px;margin-top:-150px;opacity:.2}
  .route-trait{left:18px}
  .escale{grid-template-columns:1fr;gap:34px;padding:30px 0 30px 48px}
  .escale::before{left:18px;top:36px}
  .hublot,.escale:nth-child(odd) .hublot{order:0;justify-self:center;width:min(66vw,300px)}
  .escale:nth-child(odd) .texte{order:1;text-align:left;justify-self:start}
  .escale:nth-child(odd) .texte p{margin-left:0}
  .bord .carte .wrap{margin:0 12px}
}
@media (max-height:640px) and (max-width:760px){.bord .ouverture h1{font-size:48px}.bord .ouverture .position{display:none}.bord .ouverture-texte{padding:92px 22px 34px}.bord .ouverture .surtitre{display:block}}
@media (prefers-reduced-motion:reduce){.houle,.hublot::after{animation:none}}

/* séparations des sections (choix d'Adrien du 06/10 : proposition B2, les trois losanges, évidés comme sur B1).
   Un filet centré portant trois losanges au trait, posé là où une section claire suit une autre section claire ;
   le même, moitié moins large, entre deux métiers. Pas sur la page On Board, qui a sa houle. */
body:not(.bord) :is(.papier,.mots-convives)+:is(.papier,.mots-convives)::after,body:not(.bord) .metier+.metier::after{content:"";position:absolute;top:-15px;left:50%;width:min(760px,84vw);margin-left:calc(min(760px,84vw) / -2);height:30px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='24' viewBox='0 0 84 24'%3E%3Cg fill='none' stroke='%23a8743d' stroke-width='1.2'%3E%3Cpath d='M42 1.5 L52.5 12 L42 22.5 L31.5 12Z'/%3E%3Cpath d='M12 7 L17 12 L12 17 L7 12Z'/%3E%3Cpath d='M72 7 L77 12 L72 17 L67 12Z'/%3E%3C/g%3E%3C/svg%3E") center/auto no-repeat,
  linear-gradient(#a8743d,#a8743d) left center/calc(50% - 56px) 1px no-repeat,linear-gradient(#a8743d,#a8743d) right center/calc(50% - 56px) 1px no-repeat}
body:not(.bord) .metier+.metier::after{width:min(360px,60vw);margin-left:calc(min(360px,60vw) / -2);opacity:.7}
/* pages de métier : la section « D'autres façons de nous recevoir » n'avait pas de marge en haut, l'ornement tombait sur son étiquette */
body:not(.bord) .faq{padding-bottom:clamp(70px,8vw,120px)}
.autres{padding-top:clamp(70px,8vw,120px)}

/* ================= liste d'Élodie du 07/10/2026 ================= */
/* chiffres : par défaut la police de titre dessine un « 1 » sans drapeau, qu'on lit comme un I (numéros 01, téléphone).
   Les chiffres alignés de la même police ont un vrai « 1 ». */
body{font-variant-numeric:lining-nums}

/* listes de qualités : un petit astérisque à la place du chiffre */
.valeurs li{gap:16px}
.valeurs li span{font-family:var(--titre);font-size:30px;font-weight:400;letter-spacing:0;line-height:.5;transform:translateY(.36em);flex:0 0 auto}

/* premier écran de l'accueil : le texte de présentation, sous la signature */
.ouverture .presentation{font-size:14px;line-height:1.7;color:#b9b0a3;max-width:36em;margin-top:18px}
/* premier écran des pages de métier : un titre long sur deux ou trois lignes, la taille suit la ligne la plus longue (--car) */
.ouverture h1.long{--col:calc(min(760px,56vw) - 2*var(--marge));line-height:1;
  font-size:clamp(32px,min(calc(var(--col) / (var(--car) * .43 + .45)),calc((100svh - 430px) / (var(--lig) * 1.06))),116px)}
@media (max-width:1080px) and (min-width:761px){.ouverture h1.long{font-size:clamp(32px,min(calc(var(--col) / (var(--car) * .43 + .45)),calc((100svh - 505px) / (var(--lig) * 1.06))),116px)}}
@media (max-width:760px){.ouverture h1.long{--col:calc(100vw - 2*var(--marge));font-size:clamp(27px,min(calc(var(--col) / (var(--car) * .43 + .45)),calc((100svh - 500px) / (var(--lig) * 1.06))),68px)}}
.ouverture h1.long em.l{padding-left:.4em}
.ouverture h1.long~.metiers{margin-top:34px}
.ouverture .metiers{text-wrap:balance;line-height:1.9}
.ouverture .metiers .bloc{display:inline-block}

/* à l'affiche et radio : deux blocs distincts, l'un sous l'autre dans la même bande sombre, sous l'ouverture de l'accueil */
.annonces{background:var(--encre);color:var(--creme);border-top:1px solid rgba(244,237,226,.12)}
.annonces .wrap{max-width:none;padding-top:30px;padding-bottom:30px}
.affiche{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,3.4vw,54px)}
.affiche .dates,.affiche p{overflow-wrap:anywhere}
.affiche .dates{white-space:normal}   /* un lieu ou un titre saisi par l'équipe peut être long : il passe à la ligne */
.radio{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(20px,3.4vw,54px)}
.annonces .affiche:not([hidden])+.radio{margin-top:26px;padding-top:22px;border-top:1px solid rgba(244,237,226,.14)}
.radio .etiquette{color:var(--cuivre-clair)}
.radio-titre{font-family:var(--titre);font-style:italic;font-size:25px;line-height:1.15;color:var(--creme)}
.radio p:last-child{font-size:14px;line-height:1.6;color:#cfc5b6;overflow-wrap:anywhere}
@media (max-width:1080px){
  .affiche{grid-template-columns:auto 1fr;row-gap:16px}
  .affiche>p:not(.etiquette):not(.dates),.affiche .bouton{grid-column:1/-1}
  .affiche .bouton{justify-self:start}
}
@media (max-width:760px){.affiche{grid-template-columns:1fr}.affiche .dates{white-space:normal}.radio{flex-direction:column;gap:6px}}

/* page Actualités : le rendez-vous du moment en détail, puis l'encart radio */
.affiche-detail{padding:clamp(70px,8vw,120px) 0 clamp(60px,7vw,100px)}
.affiche-grille{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,100px);align-items:center}
.affiche-dates{font-family:var(--titre);font-size:clamp(30px,3vw,44px);line-height:1;color:var(--encre);margin:26px 0 22px}
.affiche-dates small{display:block;font-family:var(--corps);font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--doux);margin-top:10px}
.affiche-texte p{max-width:32em;overflow-wrap:anywhere}
.affiche-texte .titre{font-size:clamp(26px,2.9vw,42px);hyphens:auto;overflow-wrap:break-word}
.affiche-tarifs{font-weight:600;color:var(--encre);margin-top:14px}
.affiche-texte .bouton{margin-top:32px}
.affiche-photos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,22px)}
.affiche-photos figure{overflow:hidden;background:var(--papier);aspect-ratio:3/2}
.affiche-photos figure:first-child:not(:only-child){grid-column:1/-1}
.affiche-photos figure:only-child{grid-column:1/-1}
.affiche-photos img{width:100%;height:100%;object-fit:cover}
.affiche-detail .radio{margin-top:clamp(40px,5vw,70px);padding-top:26px;border-top:1px solid var(--trait)}
.affiche-detail .radio .etiquette{color:var(--cuivre)}
.affiche-detail .radio-titre{color:var(--encre)}
.affiche-detail .radio p:last-child{color:var(--texte);font-size:15px}
.affiche-detail.sans-affiche .radio{margin-top:0;padding-top:0;border-top:0}
.galerie .filtres{margin-top:34px}
@media (max-width:1080px){.affiche-grille{grid-template-columns:1fr}}

/* pages de métier : la phrase sur le service et la sommelière, sous les trois étapes ; un lien dans une réponse */
.etapes-options{margin-top:clamp(36px,4.4vw,60px);padding-top:28px;border-top:1px solid var(--trait-clair);font-family:var(--titre);font-style:italic;font-size:clamp(19px,1.7vw,23px);line-height:1.5;color:var(--creme);max-width:40em}
.reponses details p a{color:var(--cuivre);border-bottom:1px solid currentColor;white-space:nowrap}
.bord .reponses details p a{color:var(--laiton)}

/* encart On Board : « La Brigade des Chefs » sur une ligne, « On Board » sur la suivante */
.porte-bord h2:has(br){font-size:clamp(30px,min(5vw,8.4vw),76px)!important;line-height:1.08}

/* menu du haut : les intitulés d'Élodie sont plus longs (« Traiteur & événementiel », « Ateliers de cuisine »).
   Un intitulé ne se coupe jamais ; lettres et écarts resserrés ; le bouton « Votre projet » ne s'affiche qu'à partir de 1 300 px
   (le lien Contact mène au même endroit). */
.nav{gap:clamp(13px,1.7vw,30px)}
.nav a{white-space:nowrap;font-size:11px;letter-spacing:.18em}
.haut .wrap{gap:22px}
@media (max-width:1299px){.haut .bouton{display:none}}
@media (max-width:1080px){.nav a{font-size:30px;letter-spacing:.06em;white-space:normal;text-align:center}.nav{gap:22px}}
@media (max-width:1080px) and (max-height:620px){.nav a{font-size:24px}.nav{gap:14px}}

/* titres : des lignes de longueur voisine plutôt qu'un mot seul à la ligne */
h2,h3{text-wrap:balance}

/* la Brigade au téléphone : les textes des cofondateurs sont plus longs, un portrait par ligne (deux colonnes de 150 px se lisaient mal) */
@media (max-width:760px){
  .portraits{grid-template-columns:1fr;gap:44px}
  .portrait figure,.portrait.equipe figure{aspect-ratio:1/1}
  .portrait img{object-position:50% 18%}
  .portrait.equipe{grid-column:auto;margin-top:0}
}

/* légende d'une photo de la bande, saisie par l'équipe : elle ne s'étire pas plus large que sa photo */
.defile-piste figure:not(.fin){width:min-content}
.defile-piste figcaption{overflow-wrap:anywhere}

/* l'ouverture tient dans le premier écran, même petit : le texte de présentation se resserre, puis s'efface sur les écrans
   très bas ; au téléphone la photo cède de la place (elle garde 170 px au lieu de 210) */
@media (max-height:700px) and (min-width:761px){
  .ouverture h1:not(.long){font-size:clamp(44px,min(7.2vw,12vh),96px)}
  .ouverture .presentation{font-size:13px;line-height:1.55;margin-top:10px;max-width:44em}
  .ouverture .metiers{margin-top:10px}.ouverture .actions{margin-top:18px}
}
@media (max-height:620px) and (min-width:761px){.ouverture .presentation{display:none}}
@media (max-width:760px){.ouverture .presentation{font-size:13px;line-height:1.55;margin-top:10px}}
@media (max-height:700px) and (max-width:760px){.ouverture-photo{min-height:170px}.ouverture h1.long~.metiers{margin-top:18px}}
@media (max-height:600px) and (max-width:760px){.ouverture .presentation{display:none}.ouverture h1.long~.metiers{display:none}}

/* menu du téléphone : l'entrée du haut de page ne déplace plus rien. Une animation qui garde un déplacement (même nul) enferme
   le menu plein écran dans la barre de 84 px : ses premières rubriques sortaient par le haut de l'écran (défaut d'origine). */
@keyframes paraitre-doux{from{opacity:0}to{opacity:1}}
.js .ouverture .haut:not(.pose){animation-fill-mode:backwards}
@media (max-width:1080px){.js .ouverture .haut:not(.pose){animation-name:paraitre-doux}}

/* la vidéo d'une publication : une tuile du mur, au format du film (vertical), lecture au clic */
.mur .film{break-inside:avoid;margin-bottom:clamp(10px,1.4vw,22px);background:#000;line-height:0}
.mur .film video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#000}

/* un grand titre ne passe jamais à la ligne tout seul : tant que l'italique n'était pas arrivée, « Board » dans la police de secours
   était plus large, le titre d'On Board prenait deux lignes puis revenait à une, et tout le premier écran sautait deux fois
   (mesuré le 08/10/2026 : saut de 0,18 sur téléphone). Les lignes des titres longs sont déjà réglées sur leur colonne. */
.bord .ouverture h1{white-space:nowrap}
.bord .ouverture-texte{max-width:1260px}   /* « On Board » tient sur une ligne jusqu'aux grands écrans (à 1 920 px il se coupait en deux) */
.bord .ouverture h1 .h1-mots{white-space:normal}
.ouverture h1.long .l>span{white-space:nowrap}

/* ================= logo du haut de page : 115 px à l'ordinateur, 86 px au téléphone (choix d'Adrien, 08/10/2026) =================
   Il reste à sa place, en haut à gauche, sur toutes les pages, On Board comprise. La barre grandit avec lui, le texte de
   l'ouverture descend d'autant et les grands titres en tiennent compte, pour que le premier écran reste entier. La barre
   crème qui suit le défilement (.pose) garde son petit logo. Sur un écran d'ordinateur très bas (700 px et moins), 86 px. */
@media (min-width:1081px){
  .haut:not(.pose) .wrap{height:145px}
  .haut:not(.pose) .marque img,.bord .haut:not(.pose) .marque img{width:115px;height:115px}
  body:not(.bord) .ouverture-texte{padding-top:159px}
  .ouverture h1.long{font-size:clamp(32px,min(calc(var(--col) / (var(--car) * .43 + .45)),calc((100svh - 471px) / (var(--lig) * 1.06))),116px)}
}
@media (min-width:1081px) and (max-height:700px){
  .haut:not(.pose) .wrap{height:108px}
  .haut:not(.pose) .marque img,.bord .haut:not(.pose) .marque img{width:86px;height:86px}
  body:not(.bord) .ouverture-texte{padding-top:116px}
  body:not(.bord) .ouverture h1:not(.long){font-size:clamp(44px,min(7.2vw,11.5vh),96px)}
}
@media (max-width:1080px){
  .haut:not(.pose) .wrap{height:110px}
  .haut:not(.pose) .marque img,.bord .haut:not(.pose) .marque img{width:86px;height:86px}
}
@media (max-width:1080px) and (min-width:761px){
  body:not(.bord) .ouverture-texte{padding-top:128px}
  .ouverture h1.long{font-size:clamp(32px,min(calc(var(--col) / (var(--car) * .43 + .45)),calc((100svh - 531px) / (var(--lig) * 1.06))),116px)}
}

/* l'entrée du haut de page ne se joue qu'une fois : elle se rejouait chaque fois qu'on remontait tout en haut (la barre
   disparaissait une à deux secondes), et elle ignorait le réglage « moins d'animations » du visiteur */
.js .ouverture .haut.entree:not(.pose){animation:none}
@media (prefers-reduced-motion:reduce){.js .ouverture .haut:not(.pose){animation:none}}

/* ================= accueil à l'ordinateur : le texte de présentation et le bouton au pied du premier écran, posés sur la photo =================
   Choix d'Adrien du 08/10/2026. D'abord en bande sombre sur toute la largeur (version B des maquettes) ; le soir même, sans
   bande : elle coupait la photo. Le texte d'Élodie et « Parlons de votre projet » (plus petit qu'un bouton ordinaire) sont
   posés directement sur la photo, qui descend jusqu'en bas : ni fond ni filet, une ombre sous les lettres suffit. À gauche,
   au-dessus, il reste le titre, la signature et la ligne des activités. Au téléphone et sous 1 080 px rien ne change : mêmes
   éléments, dans l'ordre de la page. Un seul contenu pour les deux mises en page : la colonne de texte devient une grille
   qui prend tout le premier écran, sa dernière rangée est le pied. « Découvrir » garde son coin, en bas à droite, à côté
   du bouton. */
@media (min-width:1081px){
  .ouverture-texte.avec-pied{align-self:stretch;width:100%;max-width:none;padding-bottom:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto auto 1fr auto;column-gap:clamp(30px,6vw,110px)}
  .avec-pied>h1,.avec-pied>.signature,.avec-pied>.metiers{grid-column:1/-1;max-width:calc(min(760px,56vw) - 2*var(--marge))}
  .avec-pied>h1{grid-row:2}
  .avec-pied>.signature{grid-row:3;margin-top:26px}
  .avec-pied>.metiers{grid-row:4;margin-top:18px}
  .ouverture .avec-pied>.presentation{display:block;grid-row:6;grid-column:1;align-self:end;margin:0;padding:0 0 36px;font-family:var(--titre);font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:#e9dfd0;max-width:44em;text-shadow:0 1px 2px rgba(11,10,9,.55),0 0 18px rgba(11,10,9,.8)}
  .ouverture .avec-pied>.actions{grid-row:6;grid-column:2;align-self:center;margin:0 0 36px}
  .ouverture .avec-pied .bouton{min-height:44px;padding:0 24px;font-size:10.5px;letter-spacing:.24em}
}
@media (min-width:1081px) and (max-width:1380px){.ouverture .avec-pied>.actions{margin-right:20px}}   /* « Découvrir » est alors plus près de la colonne : le bouton s'en écarte */
/* vrai site (16/10/2026) : le message quand une demande n'est pas partie, et le champ piège contre les robots, invisible pour tous */
.souci-envoi{margin-top:16px;color:#a33a24;font-weight:600;line-height:1.5}
.piege{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}