@font-face{font-family:"Lemon Milk Italic";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/lemon-milk-regular-italic.woff2") format("woff2")}
@font-face{font-family:"Tallboy";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/tallboy-regular.woff2") format("woff2")}
@font-face{font-family:"Oxanium";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("fonts/oxanium-variable.woff2") format("woff2")}

:root{
  --papier:#F0E7D2; --papier-creux:#E6DBC0; --papier-vif:#F7F1E2;
  --encre:#141414; --encre-douce:#5A5344; --encre-tenue:#948B76;
  --filet:#CFC3A4;
  --eau:#3FD3CB; --eau-profonde:#2A7FC4; --eau-menthe:#6FE0B4;
  --eau-encre:#0A6A66; --eau-voile:rgba(63,211,203,.18);
  --pousse:#4FCE3E;
  --lueur-cuisine:rgba(242,179,61,.55); --lueur-chambre:rgba(63,211,203,.50);
  --lueur-bureau:rgba(194,78,122,.50); --lueur-salon:rgba(111,224,180,.52);
  --bureau:#C24E7A;
  --halo:rgba(255,255,255,.55); --creux:rgba(0,0,0,.05);
  --grain:.15; --grain-mode:multiply; --lueur:transparent;

  --f-display:"Lemon Milk Italic","Futura","Avenir Next","Century Gothic","Trebuchet MS",sans-serif;
  --f-texte:"Oxanium","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-plan:ui-monospace,"SF Mono","Menlo",monospace;
  --f-logo:"Tallboy","Futura","Avenir Next","Century Gothic","Trebuchet MS",sans-serif;
  --m:clamp(1.15rem,5vw,4rem);
  color-scheme:light;
}

*{box-sizing:border-box}
body{
  margin:0; color:var(--encre); font-family:var(--f-texte); font-weight:300;
  font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  background-color:var(--papier);
  background-image:
    radial-gradient(ellipse 80% 45% at 18% -5%, var(--halo), transparent 62%),
    radial-gradient(ellipse 60% 40% at 92% 96%, var(--creux), transparent 68%);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:var(--grain);mix-blend-mode:var(--grain-mode);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}
.enveloppe{position:relative;z-index:1;max-width:82rem;margin:0 auto;padding-inline:var(--m)}

.display{font-family:var(--f-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;line-height:.95;text-wrap:balance;margin:0}
.plan{font-family:var(--f-plan);font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;font-size:.68rem;color:var(--encre-tenue);margin:0}
p{margin:0 0 1.05em;max-width:62ch}
a{color:inherit}

.saut{position:absolute;left:-9999px}
.saut:focus{left:1rem;top:1rem;z-index:99;background:var(--encre);color:var(--papier);padding:.6rem 1rem;border-radius:0}

/* ───── en-tête ───── */
.entete{position:sticky;top:0;z-index:20;backdrop-filter:blur(9px);
  background:color-mix(in srgb,var(--papier) 86%,transparent);
  border-bottom:1px solid transparent;transition:border-color .3s}
.entete.pose{border-bottom-color:var(--filet)}
.entete .enveloppe{display:flex;align-items:center;gap:1.25rem;padding-block:.85rem}
.marque{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.marque svg{width:5.2rem;height:auto;color:var(--encre)}
.marque b{font-family:var(--f-logo);font-weight:400;
  text-transform:uppercase;font-size:3.15rem;letter-spacing:.01em;line-height:1}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem}
.nav a{font-family:var(--f-plan);text-transform:uppercase;letter-spacing:.14em;
  font-size:.9rem;text-decoration:none;color:var(--encre-douce);padding-block:.4rem;
  text-shadow:1px 1px 0 var(--papier-creux)}
.nav a:hover{color:var(--encre)}
.nav a:focus-visible{outline:2px solid var(--eau-encre);outline-offset:3px}
@media(max-width:56rem){.nav a:not(.bouton){display:none}}
@media(max-width:28rem){
  .marque b{display:none}
  .nav .bouton{padding:.6rem 1rem;font-size:.85rem;gap:.4rem}
}

.bouton{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:1rem;letter-spacing:.06em;padding:.75rem 1.3rem;border-radius:0;
  border:2px solid var(--encre);background:var(--encre);color:var(--papier);
  text-decoration:none;cursor:pointer;transition:background .16s,color .16s}
.bouton:hover{background:var(--eau-encre);border-color:var(--eau-encre)}
.bouton:focus-visible{outline:3px solid var(--eau-encre);outline-offset:2px}
.bouton--creux{background:transparent;color:var(--encre)}
.bouton--creux:hover{background:var(--encre);color:var(--papier)}
.nav .bouton{font-family:var(--f-display);font-size:.85rem;padding:.55rem 1rem;letter-spacing:.04em;text-shadow:none}

/* ───── hero ───── */
.hero{padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2rem,5vw,4rem)}
.hero .enveloppe{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(min-width:74rem){
  .hero .enveloppe{grid-template-columns:minmax(18rem,25rem) 1fr;gap:4.25rem}
  .hero-tete{padding-bottom:1.5rem}
}
.hero-tete{display:grid;gap:1.4rem;max-width:54rem;align-content:center;min-width:0}
.hero h1{font-size:clamp(2.3rem,6.4vw,4.46rem);overflow-wrap:break-word}
.chapo{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.55;color:var(--encre-douce);max-width:46ch;margin:0}

.plan-cadre{position:relative;min-width:0}
.batiment{display:block;width:100%;height:auto;max-height:min(72vh,46rem);
  color:var(--encre);overflow:visible}
@media(max-width:73.99rem){
  /* En dessous du desktop, la maison n'a pas de colonne voisine à qui céder de la place :
     elle déborde volontairement du padding de page pour gagner en taille.
     Pas le crop détail des pages pièces : déjà zoomé, le bord à bord y fait
     chevaucher le texte sur le dessin. */
  .batiment:not(.detail){width:calc(100% + 2 * var(--m));margin-inline:calc(-1 * var(--m))}
}
.batiment .coupe{fill:currentColor;stroke:none}
.batiment .struct{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.batiment .mob{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.batiment .fin{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;opacity:.55}
.batiment .silh{fill:currentColor;stroke:none;opacity:.85}

.batiment .piece{cursor:pointer;text-decoration:none;transform-box:fill-box;transform-origin:center}
.batiment .zone{fill:transparent;transition:fill .5s cubic-bezier(.4,0,.2,1);cursor:pointer;
  transform-box:fill-box;transform-origin:center}
.batiment .piece[aria-label^="Cuisine"] .zone{fill:rgba(242,179,61,.14)}
.batiment .piece[aria-label^="Chambre"] .zone{fill:rgba(63,211,203,.14)}
.batiment .piece[aria-label^="Bureau"] .zone{fill:rgba(194,78,122,.14)}
.batiment .piece[aria-label^="Salon"] .zone{fill:rgba(111,224,180,.14)}
.batiment .mob.lampe-cuisine{fill:#F2B33D;fill-opacity:.92}
.batiment .mob.toile-chambre{fill:#3FD3CB;fill-opacity:.92}
.batiment .mob.bureau-desk{fill:#C24E7A;fill-opacity:.92}
.batiment .piece:hover .zone,.batiment .piece:focus-visible .zone,.batiment .piece.demo .zone{fill:var(--eau-voile);animation:lueur-pulse 1.6s ease-in-out infinite}
.batiment .piece[aria-label^="Cuisine"]:hover .zone,.batiment .piece[aria-label^="Cuisine"]:focus-visible .zone,.batiment .piece[aria-label^="Cuisine"].demo .zone{fill:var(--lueur-cuisine)}
.batiment .piece[aria-label^="Chambre"]:hover .zone,.batiment .piece[aria-label^="Chambre"]:focus-visible .zone,.batiment .piece[aria-label^="Chambre"].demo .zone{fill:var(--lueur-chambre)}
.batiment .piece[aria-label^="Bureau"]:hover .zone,.batiment .piece[aria-label^="Bureau"]:focus-visible .zone,.batiment .piece[aria-label^="Bureau"].demo .zone{fill:var(--lueur-bureau)}
.batiment .piece[aria-label^="Salon"]:hover .zone,.batiment .piece[aria-label^="Salon"]:focus-visible .zone,.batiment .piece[aria-label^="Salon"].demo .zone{fill:var(--lueur-salon)}
.batiment .piece:hover,.batiment .piece:focus-visible,.batiment .piece.demo{animation:tremble .5s ease-in-out}
.batiment .piece:focus{outline:none}
.batiment .piece:focus-visible{outline:none}
.batiment:focus,.batiment:focus-visible{outline:none}
.batiment .piece:focus-visible .zone{stroke:var(--eau-encre);stroke-width:2;stroke-dasharray:6 5}
.batiment .etiq-fond{fill:var(--papier);opacity:.88;pointer-events:none}
.batiment .etiq{font-family:var(--f-plan);font-weight:700;text-transform:uppercase;
  letter-spacing:.17em;font-size:19px;fill:var(--encre)}
.batiment .etiq-sous{font-family:var(--f-texte);font-size:18px;font-weight:700;fill:var(--encre-douce)}
.batiment .fleche{font-family:var(--f-texte);font-size:22px;fill:var(--eau-encre);
  opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.batiment .piece:hover .fleche,.batiment .piece:focus-visible .fleche,.batiment .piece.demo .fleche{opacity:1;transform:none}
@keyframes lueur-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes tremble{0%,100%{transform:translate(0,0)}20%{transform:translate(-1.5px,.5px)}
  40%{transform:translate(1.5px,-.5px)}60%{transform:translate(-1px,1px)}80%{transform:translate(1px,-1px)}}

/* le trait se dessine */
.trace .dessin{stroke-dasharray:var(--L);stroke-dashoffset:var(--L);animation:tracer 1s ease-out forwards}
.trace .coupe,.trace .silh{opacity:0;animation:parait .6s ease-out forwards}
.trace .etiq,.trace .etiq-sous{opacity:0;animation:parait .5s ease-out forwards}
@keyframes tracer{to{stroke-dashoffset:0}}
@keyframes parait{to{opacity:1}}
.trace .silh{animation-name:parait-silh}
@keyframes parait-silh{to{opacity:.85}}
@media(prefers-reduced-motion:reduce){
  .trace .dessin{animation:none;stroke-dashoffset:0}
  .trace .coupe,.trace .etiq,.trace .etiq-sous{animation:none;opacity:1}
  .trace .silh{animation:none;opacity:.85}
  .batiment .piece:hover .zone,.batiment .piece:focus-visible .zone{animation:none}
  .batiment .piece:hover,.batiment .piece:focus-visible{animation:none}
  .partenaires-ruban{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:2rem}
  .partenaires-logo[aria-hidden="true"]{display:none}
  .partenaires-piste{overflow:visible}
}

/* ───── sections ───── */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section-tete{display:grid;gap:.9rem;margin-bottom:2.5rem;max-width:46rem}
.section h2{font-size:clamp(1.52rem,3.52vw,2.4rem)}

.vague{display:block;width:100%;height:auto;color:var(--eau-profonde);opacity:.55}

.trio{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.pole{display:grid;gap:.7rem;align-content:start;border-top:2px solid var(--encre);padding-top:1rem}
.pole h3{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:1.4rem;margin:0;line-height:1.05;letter-spacing:.01em}
.pole p{margin:0;font-size:.98rem;color:var(--encre-douce)}
.pole-photo{display:block;width:100%;height:12rem;object-fit:cover;
  border:2px solid var(--encre);background:var(--papier-creux)}

.equipe-photo{display:block;width:100%;height:auto;max-height:min(56vh,32rem);
  object-fit:cover;border:2px solid var(--encre);background:var(--papier-vif)}
.lien{font-family:var(--f-plan);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;
  color:var(--eau-encre);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:1px solid currentColor;padding-bottom:2px;align-self:start}
.lien:hover{color:var(--encre)}
.lien:focus-visible{outline:2px solid var(--eau-encre);outline-offset:3px}

/* atelier en vedette */
.vedette{display:grid;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:1fr;align-items:start}
@media(min-width:60rem){.vedette{grid-template-columns:1.05fr .95fr}}
.galerie{display:grid;gap:.7rem;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
.galerie figure{margin:0;overflow:hidden;border-radius:0;background:var(--papier-creux);border:2px solid var(--encre)}
.galerie img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.galerie figure:first-child{grid-column:1/-1}
.galerie figure:first-child img{aspect-ratio:16/10}
.faits{list-style:none;margin:1.4rem 0 1.8rem;padding:0;display:grid;gap:.5rem;max-width:26rem}
.faits li{display:flex;justify-content:space-between;gap:1rem;
  border-bottom:1px dotted var(--filet);padding-bottom:.45rem;font-size:.95rem}
.faits .cle{color:var(--encre-douce)}
.faits .val{font-weight:700;font-variant-numeric:tabular-nums}
blockquote{margin:0 0 1.4rem;padding-left:1.1rem;border-left:3px solid var(--eau-encre);
  font-size:1.15rem;line-height:1.5;color:var(--encre-douce);max-width:38ch}

/* encart nouvelle */
.encart{border:2px solid var(--encre);border-radius:0;background:var(--papier-vif);
  padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:1rem;max-width:52rem}
.encart h3{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:1.5rem;margin:0;line-height:1.05}

/* contact */
.contact{text-align:center;display:grid;gap:1.4rem;justify-items:center;padding-block:clamp(3.5rem,8vw,6rem)}
.contact h2{font-size:clamp(1.76rem,4.8vw,3.2rem)}
.contact p{margin:0}

.pied{border-top:1px solid var(--filet);padding-block:2rem 3rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;font-size:.85rem;color:var(--encre-tenue)}
.pied a{color:var(--encre-douce);text-decoration:none;border-bottom:1px solid var(--filet)}
.pied a:hover{color:var(--encre)}
.pied .droite{margin-left:auto;display:flex;gap:1.25rem;flex-wrap:wrap}

/* charte Ukiyo : un seul theme, pas de bascule jour/nuit */
.bascule{display:none}
.pastille{width:.6rem;height:.6rem;border-radius:0;background:var(--eau);box-shadow:none}


/* ═══ pages de pièce ═══ */
.piece-hero{padding-top:clamp(1.75rem,4vw,3rem);padding-bottom:clamp(2rem,5vw,3.5rem)}
.piece-hero .enveloppe{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(min-width:70rem){.piece-hero .enveloppe{grid-template-columns:1fr minmax(20rem,30rem)}}
.piece-hero h1{font-size:clamp(2.6rem,7vw,5rem)}
.detail{display:block;width:100%;height:auto;max-height:min(52vh,30rem);
  color:var(--encre);overflow:hidden;border:2px solid var(--encre);border-radius:0;
  background:var(--papier-vif)}
.batiment.detail{padding:0}
.fil{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.fil a{font-family:var(--f-plan);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;
  color:var(--encre-tenue);text-decoration:none}
.fil a:hover{color:var(--encre)}
.fil span{color:var(--filet)}

.bloc{padding-block:clamp(3rem,7vw,5rem);border-top:1px solid var(--filet)}
.bloc:first-of-type{border-top:0}
.bloc-tete{display:grid;gap:.8rem;margin-bottom:2rem;max-width:44rem}
.bloc h2{font-size:clamp(1.36rem,3.04vw,2.08rem)}
.bloc h3{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:1.3rem;margin:0 0 .5rem;line-height:1.05}
.duo{display:grid;gap:clamp(1.5rem,4vw,3rem)}
@media(min-width:62rem){.duo{grid-template-columns:1.05fr .95fr;align-items:start}}
.duo--inverse>*:first-child{order:2}
@media(max-width:61.99rem){.duo--inverse>*:first-child{order:0}}

.cartes{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.carte{border:2px solid var(--encre);border-radius:0;background:var(--papier-vif);
  padding:1.35rem;display:grid;gap:.55rem;align-content:start}
.carte h3{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:1.3rem;margin:0 0 .5rem;line-height:1.05}
.carte .plan{margin-bottom:.15rem}
.carte p{margin:0;font-size:.95rem;color:var(--encre-douce)}
.carte .picto{width:2.6rem;height:2.6rem;margin-bottom:.2rem}
.carte .picto svg{width:100%;height:100%;display:block}
.picto-trait{fill:none;stroke:var(--encre);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.picto-accent{fill:var(--eau-encre);stroke:none}
.picto-noeud{fill:var(--papier-vif);stroke:var(--encre);stroke-width:1.6}

.lieux{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lieux li{display:grid;gap:.25rem .9rem;padding-block:1rem;border-bottom:1px solid var(--filet)}
@media(min-width:44rem){.lieux li{grid-template-columns:12rem 1fr auto;align-items:baseline}}
.lieux b{font-family:var(--f-display);font-weight:600;text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em}
.lieux span{font-size:.95rem;color:var(--encre-douce)}
.lieux .ou{font-family:var(--f-plan);text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;color:var(--eau-encre);white-space:nowrap}

.bio{display:grid;gap:.9rem;align-content:start}
.bio .plan{margin:0}
.bio h3{margin:0}
.bio p{margin:0;color:var(--encre-douce)}

.bios{display:grid;gap:1.5rem}
.bios .bio{gap:.6rem}
.bios .bio h3{font-size:1.15rem}
.bios .bio p{font-size:.92rem;line-height:1.55}

.reserve{border:2px dashed var(--eau-encre);border-radius:0;padding:1.1rem 1.3rem;
  background:color-mix(in srgb,var(--eau) 12%,var(--papier-vif));display:grid;gap:.4rem;max-width:44rem}
.reserve b{font-family:var(--f-plan);text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;color:var(--eau-encre)}
.reserve p{margin:0;font-size:.93rem;color:var(--encre-douce)}

.galerie--trois{grid-template-rows:auto}
.galerie--trois figure:first-child{grid-column:1/-1}

.eau-ondule{filter:url(#eau-repos);transition:filter .3s}
.eau-ondule:hover{filter:url(#eau-survol)}
@media(prefers-reduced-motion:reduce){.eau-ondule{filter:none;transition:none}}

.pellicule{max-width:22rem;border:2px solid var(--encre);margin-bottom:1.2rem}
.perfo{height:.95rem;background:var(--bureau);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='16'%3E%3Crect%20x='6'%20y='3'%20width='10'%20height='10'%20rx='2'%20fill='%23F7F1E2'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:22px .95rem}
.perfo--haut{display:flex;align-items:center}
.perfo-num{font-family:var(--f-plan);font-size:.6rem;letter-spacing:.08em;
  color:var(--papier-vif);padding-left:.5rem;position:relative;z-index:1;
  text-shadow:0 0 3px var(--bureau),0 0 3px var(--bureau)}

.regarder{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  border-left:2px solid var(--encre);border-right:2px solid var(--encre);background:var(--papier-vif);text-decoration:none}
.regarder img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
.regarder:hover img{transform:scale(1.05)}
.regarder::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,.72),transparent 48%)}
.regarder .jouer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:3.6rem;height:3.6rem;border-radius:50%;background:var(--papier);border:2px solid var(--encre);
  display:flex;align-items:center;justify-content:center;z-index:1;
  transition:background .3s,border-color .3s,transform .3s}
.regarder .jouer svg{width:1.1rem;height:1.1rem;fill:var(--encre);margin-left:.15rem}
.regarder:hover .jouer{background:var(--eau-encre);border-color:var(--eau-encre);
  transform:translate(-50%,-50%) scale(1.08)}
.regarder:hover .jouer svg{fill:var(--papier)}
.regarder-legende{position:absolute;left:1rem;right:1rem;bottom:.85rem;z-index:1;
  font-family:var(--f-plan);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;
  color:var(--papier-vif);display:flex;align-items:center;gap:.35rem}
.regarder:focus-visible{outline:3px solid var(--eau-encre);outline-offset:2px}

.legal{display:grid;gap:.55rem;max-width:46rem;font-size:.95rem;color:var(--encre-douce)}
.legal dt{font-family:var(--f-plan);text-transform:uppercase;letter-spacing:.14em;
  font-size:.66rem;color:var(--encre-tenue);margin-top:.7rem}
.legal dd{margin:0}


/* Lien dont l'adresse doit encore etre fournie par le client : visible dans la
   maquette, mais inerte et signale comme tel, pour qu'on n'oublie pas de le remplir. */
.a-fournir{opacity:.6;cursor:not-allowed}
.a-fournir::after{content:" (à fournir)";font-size:.9em;color:var(--encre-tenue)}

/* ───── formulaire de contact ───── */
.formulaire{display:grid;gap:1.15rem;width:100%;max-width:38rem;text-align:left;
  border:2px solid var(--encre);background:var(--papier-vif);
  padding:clamp(1.4rem,3.5vw,2.2rem)}
.champ{display:grid;gap:.4rem}
.champ label{font-family:var(--f-plan);text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;color:var(--encre-douce)}
.champ .obligatoire{color:var(--eau-encre)}
.champ input,.champ select,.champ textarea{
  font-family:var(--f-texte);font-size:1rem;color:var(--encre);
  background:var(--papier);border:2px solid var(--encre);border-radius:0;
  padding:.7rem .85rem;width:100%;transition:border-color .16s,box-shadow .16s}
.champ textarea{min-height:8rem;resize:vertical}
.champ select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),
                   linear-gradient(135deg,var(--encre) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) center,calc(100% - .8rem) center;
  background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat;
  padding-right:2.4rem}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--eau-encre);box-shadow:0 0 0 3px var(--eau-voile)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--encre-tenue)}
.aide{font-size:.87rem;line-height:1.5;color:var(--encre-douce);margin:0;max-width:none}
.formulaire .bouton{justify-self:start;margin-top:.3rem}
.formulaire .reserve{max-width:none}

/* ───── bandeau partenaires ───── */
.partenaires{padding-block:clamp(2.5rem,6vw,4rem)}
.partenaires .enveloppe{margin-bottom:clamp(1rem,2.5vw,1.8rem);text-align:center}
.partenaires-piste{overflow:hidden;width:100%}
.partenaires-piste:hover .partenaires-ruban,
.partenaires-piste:focus .partenaires-ruban,
.partenaires-piste:focus-within .partenaires-ruban{animation-play-state:paused}
.partenaires-ruban{
  display:flex;
  width:max-content;
  gap:clamp(3rem,6vw,5rem);
  align-items:center;
  animation:defilement-partenaires 45s linear infinite;
}
.partenaires-logo{
  height:3rem;
  width:auto;
  max-width:10rem;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.45;
  flex-shrink:0;
}
.partenaires-logo[src$="plaine-de-vie.svg"]{opacity:.85}
@keyframes defilement-partenaires{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ───── bandeau cookies ───── */
.bandeau-cookies[hidden]{display:none}
.bandeau-cookies{position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--encre);color:var(--papier);
  padding:1.1rem var(--m);display:flex;flex-wrap:wrap;gap:1rem 1.5rem;
  align-items:center;justify-content:space-between;
  box-shadow:0 -4px 24px rgba(0,0,0,.18)}
.bandeau-cookies p{margin:0;max-width:56ch;font-size:.92rem;color:var(--papier)}
.bandeau-cookies a{color:inherit;text-decoration:underline}
.bandeau-cookies .choix{display:flex;gap:.7rem;flex:none}
.bandeau-cookies .bouton{border-color:var(--papier);background:var(--papier);color:var(--encre)}
.bandeau-cookies .bouton:hover{background:var(--eau);border-color:var(--eau);color:var(--encre)}
.bandeau-cookies .bouton--creux{background:transparent;color:var(--papier);border-color:var(--papier)}
.bandeau-cookies .bouton--creux:hover{background:var(--papier);color:var(--encre)}