/* ══════════════════════════════════════════════════════════════════════════
   PALETTE — un mariage tunisien, c'est de la lumière.
   Le fond dominant est l'ivoire chaud de ses visuels Instagram. L'or est
   franc et présent, pas timide. Le grenat vient du velours de la keswa,
   l'émeraude des broderies de karakou. Le sombre ne sert plus de décor :
   il ponctue, sur deux bandes seulement, pour le registre du soir.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* les fonds clairs, du plus chaud au plus net */
  --creme:#F7F2E9;
  --creme-2:#F0E8DA;
  --blanc:#FDFBF7;
  --sable:#E3D6C0;

  /* le sombre, réservé aux bandes de ponctuation */
  --encre:#1B1410;
  --encre-2:#251A14;
  --encre-3:#2F211A;

  /* l'or : trois valeurs, une par usage */
  --or:#8A6614;             /* texte sur ivoire — 4,7:1, AA atteint */
  --or-trait:#A8801F;       /* filets et motif — décoratif, plus clair */
  --or-vif:#D9AE3C;         /* sur sombre — éclat de fil doré */
  --or-pale:#EEDCA9;

  /* les pierres */
  --grenat:#8C2436;         /* le velours de la keswa */
  --grenat-clair:#C97181;   /* le même, sur fond sombre */
  --emeraude:#1E5A4A;       /* les broderies de karakou */
  --emeraude-clair:#6FB09A;

  /* les textes */
  --nuit-1:#1B1410;
  --nuit-2:#5A4A3E;
  --nuit-3:#8C7A6A;
  --jour-1:#F6EFE4;
  --jour-2:#C4B4A2;
  --jour-3:#948473;

  --w:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  background:var(--creme);color:var(--nuit-1);
  font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px;font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Bodoni Moda",Didot,Georgia,serif;margin:0;line-height:1.12;
  text-wrap:balance;font-weight:400}
p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--or);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 26px}

/* Chaque section porte ses jetons. Le clair est la règle, le sombre l'exception :
   .nuit ne s'applique qu'aux deux bandes qui portent le registre du soir. */
section, .hero{
  --bg:var(--creme); --fg:var(--nuit-1); --fg2:var(--nuit-2); --fg3:var(--nuit-3);
  --surf:var(--blanc); --metal:var(--or);
  --trait:rgba(156,116,24,.26); --trait-fort:rgba(156,116,24,.6);
  --accent2:var(--grenat); --accent2-trait:rgba(140,36,54,.42);
  background:var(--bg);color:var(--fg);padding:88px 0;position:relative;
}
section.blanc{--bg:var(--blanc); --surf:var(--creme)}
section.sable{--bg:var(--creme-2); --surf:var(--blanc)}
section.nuit{
  --bg:var(--encre); --fg:var(--jour-1); --fg2:var(--jour-2); --fg3:var(--jour-3);
  --surf:var(--encre-2); --metal:var(--or-vif);
  --trait:rgba(217,174,60,.26); --trait-fort:rgba(217,174,60,.6);
  --accent2:var(--grenat-clair); --accent2-trait:rgba(201,113,129,.45);
}
.lab{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;color:var(--metal)}
.lab.pale{color:var(--fg3)}

/* ─────────────────────────── marque ─────────────────────────── */
.mark{display:inline-flex;align-items:center;gap:11px}
.mark .mono{font-family:"Bodoni Moda",serif;font-size:25px;letter-spacing:-.06em;
  line-height:1;transition:font-size .3s}
.mark .mono b{font-weight:500}
.mark .mono i{font-style:normal;margin-left:-.14em}
.mark .nom{font-size:9px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--nuit-3);line-height:1.3;padding-left:11px;border-left:1px solid var(--sable)}
footer .mark .nom{color:var(--jour-3);border-left-color:rgba(217,174,60,.3)}

/* ─────────────────────────── navigation ─────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:rgba(247,242,233,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(156,116,24,.28);
  transition:background .3s,box-shadow .3s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px;
  transition:height .25s cubic-bezier(.16,.8,.3,1)}
.nav.compacte .wrap{height:58px}
.nav.compacte{background:rgba(247,242,233,.99);box-shadow:0 1px 22px rgba(27,20,16,.1)}
.nav.compacte .mark .mono{font-size:21px}
.nav ul{display:none;list-style:none;margin:0;padding:0;gap:32px;font-size:13.5px;letter-spacing:.07em}
.nav ul a{color:var(--nuit-2);position:relative;padding:8px 0;transition:color .25s}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--or)}
@media(min-width:960px){.nav ul{display:flex}}
.tel{font-size:13.5px;letter-spacing:.09em;color:var(--or);white-space:nowrap;font-weight:400}

.nav-mob{border-bottom:1px solid rgba(156,116,24,.2);background:rgba(247,242,233,.93);
  overflow-x:auto;scrollbar-width:none}
.nav-mob::-webkit-scrollbar{display:none}
.nav-mob ul{display:flex;gap:26px;list-style:none;margin:0;padding:13px 26px;
  font-size:13px;letter-spacing:.07em;white-space:nowrap;color:var(--nuit-2)}
.nav-mob a[aria-current]{color:var(--or)}
/* Au-delà de 960 px le menu principal tient dans la barre : la rangée
   défilante disparaît, sinon les deux se doublonnent. */
@media(min-width:960px){.nav-mob{display:none}}

/* ─────────────────────────── boutons ─────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--grenat);
  background:var(--grenat);color:#FBF6EE;position:relative;overflow:hidden;
  transition:background .25s,border-color .25s,color .25s}
.btn > span{position:relative;z-index:1}
.btn:hover{background:#73182A;border-color:#73182A}
.btn.line{background:transparent;color:var(--or);border-color:var(--trait-fort)}
.btn.line:hover{background:rgba(156,116,24,.09);border-color:var(--or)}
section.nuit .btn{background:var(--or-vif);border-color:var(--or-vif);color:#1B1410}
section.nuit .btn:hover{background:var(--or-pale);border-color:var(--or-pale)}
section.nuit .btn.line{background:transparent;color:var(--or-vif)}
section.nuit .btn.line:hover{background:rgba(217,174,60,.12)}

/* ─────────────────────────── héros ─────────────────────────── */
.hero{padding:78px 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;top:-200px;right:-200px;width:700px;height:700px;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(217,174,60,.20) 0%,transparent 64%)}
.hero::after{content:"";position:absolute;bottom:-240px;left:-220px;width:640px;height:640px;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(140,36,54,.10) 0%,transparent 62%)}
.hero-grid{display:grid;gap:46px;align-items:center;position:relative}
@media(min-width:940px){.hero-grid{grid-template-columns:1.03fr .97fr;gap:66px}}
.hero h1{font-size:clamp(44px,7.4vw,84px);letter-spacing:-.015em}
.hero h1 em{font-style:italic;color:var(--grenat)}
.hero .sub{margin-top:28px;font-size:18px;color:var(--fg2);max-width:33em}
.hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero .rass{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:38px;padding-top:24px;
  border-top:1px solid var(--trait);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg3)}
.hero .fil{color:var(--fg3)}

/* ─────────────────────────── cadres photo ─────────────────────────── */
.ph{--mx:50%;--my:38%;position:relative;overflow:hidden;
  border:1px solid var(--trait);
  background:linear-gradient(166deg,var(--creme-2) 0%,var(--blanc) 55%,var(--sable) 100%);
  display:grid;place-content:center;text-align:center;padding:28px}
section.nuit .ph{background:linear-gradient(166deg,#2E211A 0%,#1E1611 56%,#2A1E17 100%)}
.ph::before{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--mx) var(--my),
             rgba(255,255,255,.9) 0%,transparent 60%)}
section.nuit .ph::before{background:radial-gradient(380px circle at var(--mx) var(--my),
             rgba(217,174,60,.16) 0%,transparent 62%)}
.ph::after{content:"";position:absolute;inset:10px;border:1px solid var(--trait);pointer-events:none}
.ph .n{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--metal);position:relative}
.ph .d{font-size:12.5px;color:var(--fg3);margin-top:9px;max-width:22em;line-height:1.55;position:relative}
.ph.portrait{aspect-ratio:3/4}
.ph.haut{aspect-ratio:4/5}
.ph.large{aspect-ratio:16/10}

/* ───────────────────── couture : le fil qui se pique ───────────────────── */
.couture{height:1px;margin:0;
  background-image:repeating-linear-gradient(90deg,var(--or-trait) 0 7px,transparent 7px 14px);
  opacity:.7}
.couture.epais{height:2px;opacity:.85}
.couture.rose{background-image:repeating-linear-gradient(90deg,var(--grenat) 0 7px,transparent 7px 14px);
  opacity:.75}

/* Frise khatam — beaucoup plus présente qu'avant : c'est elle qui dit
   « oriental » sans un seul cliché, et sur fond clair elle respire enfin. */
.frise{height:52px;background-repeat:repeat-x;background-position:center;
  background-size:auto 52px;opacity:.85;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='52' viewBox='0 0 58 52'%3E%3Cg fill='none' stroke='%23A8801F' stroke-width='1'%3E%3Crect x='11' y='8' width='36' height='36'/%3E%3Crect x='11' y='8' width='36' height='36' transform='rotate(45 29 26)'/%3E%3Ccircle cx='29' cy='26' r='6'/%3E%3Ccircle cx='29' cy='26' r='11.5'/%3E%3C/g%3E%3C/svg%3E")}
section.nuit .frise,.frise.nuit{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='52' viewBox='0 0 58 52'%3E%3Cg fill='none' stroke='%23D9AE3C' stroke-width='1'%3E%3Crect x='11' y='8' width='36' height='36'/%3E%3Crect x='11' y='8' width='36' height='36' transform='rotate(45 29 26)'/%3E%3Ccircle cx='29' cy='26' r='6'/%3E%3Ccircle cx='29' cy='26' r='11.5'/%3E%3C/g%3E%3C/svg%3E")}

/* ─────────────────────────── têtes de section ─────────────────────────── */
.stop{display:grid;gap:16px;margin-bottom:46px}
@media(min-width:880px){.stop{grid-template-columns:1.1fr .9fr;align-items:end;gap:52px}}
.stop h2{font-size:clamp(30px,4.5vw,48px)}
.stop h2 em{font-style:italic;color:var(--metal)}
/* Rythme : l'italique est champagne sur la nuit, rose sur l'ivoire. */
/* l'italique prend le grenat sur clair, le rose clair sur nuit */
.stop p{color:var(--fg2);max-width:40em}

/* ─────────────────────────── lookbook ─────────────────────────── */
/* Cinq pièces : on impose le nombre de colonnes plutôt que de laisser
   auto-fit décider — sinon la cinquième carte se retrouve seule sur sa ligne. */
.pieces{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:700px){.pieces{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:1080px){.pieces{grid-template-columns:repeat(5,1fr);gap:14px}}
@media(min-width:1080px){.piece .txt{padding:16px 16px 20px}
  .piece h3{font-size:18.5px}.piece p{font-size:12.8px}}
.piece{display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.16,.8,.3,1)}
.piece .ph{border-bottom:none}
.piece .txt{border:1px solid var(--trait);border-top:none;padding:19px 21px 23px;
  background:var(--surf);flex:1;transition:border-color .25s,background .25s}
.piece h3{font-size:21px;margin-bottom:7px}
.piece .role{font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent2);margin-bottom:9px}
.piece p{font-size:13.5px;color:var(--fg2);line-height:1.6}
.piece .plus{display:inline-block;margin-top:15px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--metal);padding-bottom:5px;
  background-image:repeating-linear-gradient(90deg,var(--metal) 0 5px,transparent 5px 10px);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s cubic-bezier(.16,.8,.3,1),letter-spacing .24s}

.piece:hover{transform:translateY(-8px)}
.piece:hover .plus{background-size:100% 1px;letter-spacing:.24em}
.piece:hover .ph,.piece:hover .txt{border-color:var(--accent2-trait)}

/* ─────────────────────────── triptyque ─────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;
  background:var(--trait);border:1px solid var(--trait)}
.trio > div{background:var(--bg);padding:36px 30px 34px;display:flex;flex-direction:column;gap:12px;
  transition:background .25s}
.trio > div:hover{background:var(--surf)}
.trio h3{font-size:27px}
.trio > div > p{font-size:14.5px;color:var(--fg2)}
.trio ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;
  font-size:13.8px;color:var(--fg2)}
.trio li{padding-left:19px;position:relative}
.trio li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;
  background:var(--metal);opacity:.75}
.trio .prix{margin-top:auto;padding-top:22px;font-family:"Bodoni Moda",serif;font-size:21px;
  color:var(--metal)}


/* ─────────────────────────── étapes ─────────────────────────── */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:36px}
.etape{display:flex;flex-direction:column;gap:12px}
.etape .no{font-family:"Bodoni Moda",serif;font-size:46px;color:var(--metal);
  opacity:.5;line-height:1}

.etape h3{font-size:18px;font-family:"Jost",sans-serif;font-weight:400;letter-spacing:.03em}
.etape p{font-size:14.2px;color:var(--fg2)}

/* ─────────────────────────── tarifs ─────────────────────────── */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:20px}
.tarif{border:1px solid var(--trait);padding:30px 28px;background:var(--surf);
  display:flex;flex-direction:column;gap:10px;transition:border-color .35s}
.tarif:hover{border-color:var(--trait-fort)}
.tarif .n{font-family:"Bodoni Moda",serif;font-size:33px;color:var(--metal)}

.tarif p{font-size:13.8px;color:var(--fg2)}

/* ─────────────────────────── retours clients ─────────────────────────── */
.avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:20px}
.avis .a{border:1px solid var(--accent2-trait);background:var(--surf);padding:28px 26px;
  display:flex;flex-direction:column;gap:13px;min-height:186px}
.etoiles{color:var(--metal);letter-spacing:.24em;font-size:14px}

.avis .vide{color:var(--fg3);font-size:13.8px;font-style:italic;line-height:1.65}

/* ─────────────────────────── venir essayer ─────────────────────────── */
.venir{display:grid;gap:38px}
@media(min-width:900px){.venir{grid-template-columns:.95fr 1.05fr;gap:58px;align-items:center}}
.infos{display:flex;flex-direction:column;gap:23px;font-size:15.5px}
.infos .bloc{display:flex;flex-direction:column;gap:5px}
.infos .bloc span{color:var(--fg2)}
.horaires{display:grid;grid-template-columns:auto 1fr;gap:5px 24px;font-size:15px;color:var(--fg2)}
.horaires b{font-weight:400;color:var(--fg)}

/* à compléter avec elle */
.ar{border-bottom:1px dotted var(--metal);color:var(--metal)}


/* ─────────────────────────── pied ─────────────────────────── */
footer{border-top:2px solid var(--or-vif);background:var(--encre);padding:56px 0 42px;
  --fg:var(--jour-1);--fg2:var(--jour-2);--fg3:var(--jour-3);--metal:var(--or-vif);
  --accent2:var(--grenat-clair);color:var(--jour-1)}
.fgrid{display:grid;gap:34px}
@media(min-width:820px){.fgrid{grid-template-columns:1.25fr 1fr 1fr}}
footer h4{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--or-vif);
  font-family:"Jost",sans-serif;font-weight:400;margin-bottom:15px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-size:14.5px;color:var(--jour-2)}
footer address{font-style:normal;font-size:14.5px;color:var(--jour-2);line-height:1.8}
.fbas{margin-top:42px;padding-top:24px;border-top:1px solid rgba(217,174,60,.2);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:12.5px;color:var(--jour-3)}


/* ══════════════════════════════════════════════════════════════════════════
   MOUVEMENT — le vocabulaire vient du métier : on coud, on dévoile, on ajuste.
   Sécurité : tout est visible par défaut ; les états d'animation ne
   s'appliquent que si le script tourne (classe .js), plus un filet à 3 s.
   prefers-reduced-motion coupe absolument tout.
   ══════════════════════════════════════════════════════════════════════════ */

/* le titre : chaque ligne remonte de derrière un ourlet */
.h-titre .ln{display:block;overflow:hidden;padding-bottom:.07em}
.h-titre .ln i{display:block;font-style:inherit}
.js .h-titre .ln i{transform:translateY(114%);
  animation:ourlet .72s cubic-bezier(.16,.86,.26,1) forwards}
.js .h-titre .ln:nth-child(2) i{animation-delay:.09s}
@keyframes ourlet{to{transform:translateY(0)}}

.js .a1,.js .a3,.js .a4,.js .a5,.js .a6{opacity:0;animation:entre .6s cubic-bezier(.16,.8,.3,1) forwards}
.js .a1{animation-delay:.04s}
.js .a3{animation-delay:.26s}
.js .a4{animation-delay:.34s}
.js .a5{animation-delay:.42s}
.js .a6{animation-delay:.13s}
@keyframes entre{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* apparitions au défilement */
.js .stop,.js .piece,.js .trio > div,.js .etape,
.js .tarif,.js .avis .a,.js .venir > *{opacity:0;transform:translateY(18px)}
.js .revele{animation:entre .5s cubic-bezier(.16,.8,.3,1) forwards;
  animation-delay:calc(var(--i,0) * 48ms)}

/* le fil se pique de gauche à droite */
.js .couture,.js .frise{clip-path:inset(0 100% 0 0)}
.js .couture.revele{animation:coud .85s cubic-bezier(.32,.72,.3,1) forwards}
.js .frise.revele{animation:coud 1.25s cubic-bezier(.32,.72,.3,1) forwards,
                            galon 80s linear 1.25s infinite}
@keyframes coud{to{clip-path:inset(0 0 0 0)}}
@keyframes galon{from{background-position:0 center}to{background-position:420px center}}

/* le chiffre des étapes s'installe après sa carte */
.js .etape.revele .no{animation:chiffre .8s cubic-bezier(.16,.8,.3,1) forwards;
  animation-delay:calc(var(--i,0) * 48ms + .12s)}
@keyframes chiffre{from{opacity:0;transform:translateY(16px)}62%{opacity:.86}to{opacity:.5;transform:none}}

/* un éclat traverse l'or au survol — la lumière sur un galon */
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 36%,rgba(255,255,255,.4) 50%,transparent 64%);
  transform:translateX(-130%);transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(130%)}
.btn.line::after{background:linear-gradient(100deg,transparent 36%,rgba(156,116,24,.28) 50%,transparent 64%)}

/* liens de navigation : le soulignement se pique aussi */
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background-image:repeating-linear-gradient(90deg,var(--metal) 0 5px,transparent 5px 10px);
  transform:scaleX(0);transform-origin:right;
  transition:transform .26s cubic-bezier(.16,.8,.3,1)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}

/* sans pointeur (tactile) : la lumière balaie toute seule */
.tactile .ph::before{animation:soie 9s ease-in-out infinite}
.tactile .piece:nth-child(2) .ph::before{animation-delay:1.2s}
.tactile .piece:nth-child(3) .ph::before{animation-delay:2.4s}
.tactile .piece:nth-child(4) .ph::before{animation-delay:3.6s}
.tactile .piece:nth-child(5) .ph::before{animation-delay:4.8s}
@keyframes soie{0%,100%{--mx:-10%}50%{--mx:110%}}
@property --mx{syntax:"<percentage>";inherits:true;initial-value:50%}

/* profondeur : le cadre du héros dérive un peu moins vite que la page */
.para{will-change:transform}

@media (prefers-reduced-motion: reduce){
  .js .h-titre .ln i,.js .a1,.js .a3,.js .a4,.js .a5,.js .a6,
  .js .stop,.js .piece,.js .trio > div,.js .etape,
  .js .tarif,.js .avis .a,.js .venir > *{
    opacity:1!important;transform:none!important;animation:none!important}
  .js .couture,.js .frise{clip-path:none!important;animation:none!important}
  .ph::before,.hero::before,.js .etape.revele .no{animation:none!important}
  .btn::after{display:none}
  .para{transform:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   AJOUTS DU SITE COMPLET — éléments absents de la maquette d'accueil.
   ══════════════════════════════════════════════════════════════════════════ */

/* Lien d'évitement, visible seulement au clavier. */
.saut{position:absolute;left:-9999px;top:0;z-index:100;background:var(--metal);
  color:#141110;padding:12px 20px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.saut:focus{left:0}

/* Cadres photo : la version « vide » garde la mise en page centrée du gabarit,
   la version remplie devient une simple boîte qui recadre l'image. */
.ph-vide{display:grid;place-content:center;text-align:center;padding:28px}
picture.ph{display:block;padding:0}
picture.ph img{width:100%;height:100%;object-fit:cover;display:block}
picture.ph::before{z-index:1}
picture.ph::after{z-index:2}
.ph:not(.ph-vide) .n,.ph:not(.ph-vide) .d{display:none}
/* Le clair a besoin d'une ombre douce là où le sombre se passait de relief. */
.piece,.tarif,.avis .a{box-shadow:0 1px 2px rgba(27,20,16,.04),0 12px 28px -20px rgba(27,20,16,.22)}
section.nuit .piece,section.nuit .tarif,section.nuit .avis .a{box-shadow:none}

/* Fil d'Ariane. */
.fil{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.hero .fil{color:var(--jour-3)}
.fil a{color:inherit;text-decoration:none;transition:color .2s}
.fil a:hover{color:var(--metal)}
.fil span[aria-hidden]{opacity:.45}
.fil [aria-current]{color:var(--fg2)}

/* Questions fréquentes. Le contenu est TOUJOURS dans le HTML : un <details>
   replié reste extractible, un contenu injecté en JavaScript ne l'est pas. */
.faq{max-width:46em;border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;list-style:none;padding:19px 38px 19px 0;position:relative;
  font-family:"Bodoni Moda",serif;font-size:18px;color:var(--fg);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent2)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:1px solid var(--metal);border-bottom:1px solid var(--metal);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:focus-visible{outline:1.5px solid var(--or);outline-offset:3px}
.faq .rep{padding:0 42px 22px 0;color:var(--fg2);max-width:40em}

/* Liens dans les listes et les prix. */
.trio li a,.trio .prix a,.tarif a,.lien-plus{color:var(--accent2);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .28s cubic-bezier(.16,.8,.3,1)}
.trio li a:hover,.trio .prix a:hover,.tarif a:hover,.lien-plus:hover{background-size:100% 1px}
.trio h3 a{color:inherit}
.trio h3 a:hover{color:var(--accent2)}
.tarif{justify-content:flex-start}

/* Date de révision. */
.maj{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);
  padding-top:22px;border-top:1px solid var(--trait);max-width:46em}

/* ─────────────────────────── formulaire ─────────────────────────── */
.form{max-width:44em}
.champs{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.champs{grid-template-columns:1fr 1fr}}
.champ{display:flex;flex-direction:column;gap:7px;margin:0}
.form > .champ{margin-top:18px}
.champ label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg2)}
.champ .oblig{color:var(--accent2)}
.champ .opt{letter-spacing:.06em;text-transform:none;color:var(--fg3);font-size:12px}
.champ input,.champ select,.champ textarea{
  font-family:inherit;font-size:16px;font-weight:300;color:var(--fg);
  background:var(--surf);border:1px solid var(--trait);border-radius:0;
  padding:13px 15px;width:100%;transition:border-color .2s,background .2s}
.champ textarea{resize:vertical;min-height:110px;line-height:1.6}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--metal);background:var(--bg)}
.champ input[aria-invalid],.champ textarea[aria-invalid]{border-color:var(--accent2)}
.champ .err{font-size:13px;color:var(--accent2)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--fg3);opacity:1}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.envoi{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:26px}
.envoi .note-envoi{font-size:13px;color:var(--fg3);max-width:34em}
.envoi .note-envoi a{color:var(--accent2)}
button.btn{font-family:inherit;cursor:pointer}

/* Messages d'état. */
.msg{padding:15px 19px;margin:0 0 26px;font-size:15px;max-width:46em;border-left:3px solid}
.msg.ok{border-color:var(--metal);background:var(--surf);color:var(--fg)}
.msg.err{border-color:var(--accent2);background:var(--surf);color:var(--fg)}

/* Pages légales : une colonne de texte, lisible. */
.texte{max-width:44em}
.texte h2{font-size:clamp(22px,3vw,29px);margin:42px 0 14px}
.texte h2:first-child{margin-top:0}
.texte p{color:var(--fg2);margin-bottom:15px}
.texte ul{margin:0 0 18px;padding-left:0;list-style:none}
.texte li{color:var(--fg2);padding:6px 0 6px 20px;position:relative}
.texte li::before{content:"";position:absolute;left:0;top:1.05em;width:9px;height:1px;
  background:var(--metal)}
.texte b,.texte strong{color:var(--fg);font-weight:500}
.texte a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px}

/* Le fil d'Ariane a besoin d'air avant l'étiquette de la page. */
.hero .fil{margin-bottom:22px}