/* ==========================================================================
   Drood — vitrine
   Palette de marque v1.3, recollationnée sur marque/04-couleur/drood-palette.css.
   Le logo est monochrome : encre sur fond clair, sable sur fond sombre. Le lagon
   sert aux surfaces et aux accents, jamais au logo — et JAMAIS sur fond sombre,
   où son contraste tombe à 3,1 : c'est le lagon clair qui y travaille (7,7).
   Aucune ressource distante : les polices sont auto-hébergées.
   ========================================================================== */

@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;
  src:url(/polices/nunito-400.woff2) format("woff2")}
@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;
  src:url(/polices/nunito-800.woff2) format("woff2")}

:root{
  --encre:#131C1B; --lagon:#0E6F62; --lagon-clair:#57B7A6;
  --ecume:#E1EDEA; --sable:#F2F2EE; --nuit:#0E1413;
  --encre-2:#3A4746; --encre-3:#6B7877; --trait:#D8D8D2;

  --fond:var(--sable); --fond-2:#FBFBF9; --surface:#FFFFFF;
  --texte:var(--encre); --doux:var(--encre-2); --faible:var(--encre-3);
  --accent:var(--lagon); --accent-fond:var(--ecume); --bord:var(--trait);

  --ui:Nunito,-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,Menlo,monospace;
  --mesure:34rem; --large:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--ui);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--large);margin:0 auto;padding:0 30px}
.mesure{max-width:var(--mesure)}
.sr{position:absolute;left:-9999px}
.oeil{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);
  font-weight:800;margin:0 0 16px}

/* ---------- verrou ---------- */
/* Aire de protection : 0,25 x la hauteur du symbole. Rien n'y entre. */
.verrou{display:inline-flex;align-items:center;color:var(--texte);text-decoration:none;
  padding:6px 8px;margin:-6px -8px}
.verrou svg{height:27px;width:auto;display:block}

/* ---------- en-tête ---------- */
header.haut{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--fond) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--bord)}
.bar{display:flex;align-items:center;gap:22px;min-height:66px}
nav.principale{margin-left:auto;display:flex;align-items:center;gap:24px}
nav.principale a.lien{font-size:14.5px;font-weight:800;color:var(--doux);text-decoration:none;
  padding:6px 0;white-space:nowrap}
nav.principale a.lien:hover{color:var(--accent)}
@media (max-width:860px){nav.principale a.lien{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--ui);
  font-weight:800;font-size:15px;padding:11px 20px;border-radius:4px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s ease}
.btn-p{background:var(--lagon);color:#F2F2EE}
.btn-p:hover{background:#0B5A50;transform:translateY(-1px)}
.btn-s{border-color:var(--bord);color:var(--texte);background:var(--surface)}
.btn-s:hover{border-color:var(--accent);color:var(--accent)}
.btn-h{border-color:rgba(242,242,238,.34);color:#F2F2EE;background:transparent}
.btn-h:hover{border-color:#F2F2EE;background:rgba(242,242,238,.06)}

/* barre d'action, téléphone seulement */
.cta-mobile{display:none}
@media (max-width:860px){
  .cta-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px;
    background:color-mix(in srgb,var(--fond) 95%,transparent);backdrop-filter:blur(8px);
    border-top:1px solid var(--bord);transform:translateY(115%);transition:transform .22s ease;
    pointer-events:none}
  .cta-mobile.on{transform:none;pointer-events:auto}
  .cta-mobile .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.cta-mobile{transition:none}}

/* ---------- sections ---------- */
section{padding:76px 0}
.f2{background:var(--fond-2);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.fe{background:var(--ecume);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
h1,h2,h3,h4{text-wrap:balance}
h2{font-size:clamp(28px,3.5vw,39px);line-height:1.12;letter-spacing:-.022em;font-weight:800;
  margin:0 0 16px;max-width:24ch}
h2.l{max-width:31ch}
.intro{font-size:17.5px;color:var(--doux);max-width:var(--mesure);margin:0 0 8px}

/* ---------- hero ---------- */
.hero{padding:74px 0 6px}
.hero-g{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:52px;align-items:start}
h1{font-size:clamp(37px,4.4vw,54px);line-height:1.05;letter-spacing:-.028em;font-weight:800;margin:0 0 22px}
.brd{display:none}
@media (min-width:901px){.brd{display:inline}}
.def{font-size:19px;color:var(--doux);margin:0 0 18px;max-width:36rem}
.def b{color:var(--texte);font-weight:800}
.sous{font-size:17px;color:var(--faible);margin:0 0 30px;max-width:34rem}
.sous u{text-decoration-color:var(--accent);text-underline-offset:3px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- plan de plage (schéma) ---------- */
.plan{background:var(--surface);border:1px solid var(--bord);border-radius:6px;padding:20px 20px 16px;
  box-shadow:0 1px 2px rgba(19,28,27,.05),0 12px 34px -22px rgba(19,28,27,.35)}
.plan-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.plan-t .l{font-size:13px;font-weight:800}
.plan-t .h{font-family:var(--mono);font-size:12px;color:var(--faible)}
.rang{display:grid;grid-template-columns:16px repeat(14,1fr);gap:4px;align-items:center;margin-bottom:4px}
.rang .r{font-family:var(--mono);font-size:10.5px;color:var(--faible)}
.pl{aspect-ratio:1/1.3;border-radius:2px;border:1.25px solid var(--bord);position:relative;
  opacity:0;animation:pop .4s ease forwards}
@keyframes pop{to{opacity:1}}
.pl.occ{background:var(--accent-fond);border-color:var(--accent)}
.pl.cmd{background:var(--accent);border-color:var(--accent)}
.pl.cmd::after{content:"";position:absolute;inset:auto 0 2px 0;margin:auto;width:5px;height:5px;
  border-radius:50%;background:var(--surface)}
.pl.cible{border-color:var(--texte);border-width:2px;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.plan-l{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--bord)}
.plan-l span{font-size:11.5px;color:var(--faible);display:flex;align-items:center;gap:6px}
.plan-l i{width:11px;height:13px;border-radius:2px;border:1.25px solid var(--bord);display:inline-block}
.plan-l i.o{background:var(--accent-fond);border-color:var(--accent)}
.plan-l i.c{background:var(--accent);border-color:var(--accent)}
.legende{font-size:12.5px;color:var(--faible);margin:10px 2px 0;line-height:1.5;max-width:44ch}
@media (prefers-reduced-motion:reduce){.pl{animation:none;opacity:1}}

/* ---------- frise ---------- */
.frise{display:grid;grid-template-columns:repeat(5,1fr);margin-top:40px;border-top:2px solid var(--texte)}
/* Deux marges à tenir, et ce sont deux choses différentes.
   En HAUT : la pastille déborde de 6 px sous le filet, donc l'heure se pose à
   36 px, pas à 22 — sinon elle se lit comme collée à la ligne.
   À GAUCHE : le séparateur porte le MÊME retrait des deux côtés. Il était posé
   en border-right sans retrait à gauche, et le texte de chaque colonne venait
   toucher le trait de la colonne précédente. */
.mo{padding:36px 26px 30px 26px;border-left:1px solid var(--bord);position:relative}
.mo:first-child{border-left:0;padding-left:0}
.mo::before{content:"";position:absolute;top:-6px;left:26px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid var(--fond-2)}
.mo:first-child::before{left:0}
.mo .h{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:11px}
/* Pas de « balance » ici : sur une colonne étroite il coupe « A-14 » en deux
   lignes pour équilibrer, et un identifiant de place ne se coupe pas. */
.mo h3{font-size:17.5px;font-weight:800;margin:0 0 9px;line-height:1.3;text-wrap:pretty}
.mo p{margin:0;font-size:15.5px;color:var(--doux);line-height:1.55}
/* Trois titres tiennent sur deux lignes, deux sur une : sans plancher, les
   descriptions démarrent à cinq hauteurs différentes et la frise se déhanche. */
@media (min-width:901px){.mo h3{min-height:2lh}}
/* En repli, le trait passe à l'horizontale : un séparateur vertical entre deux
   colonnes de deux lignes chacune ne sépare plus rien. */
@media (max-width:900px){
  .frise{grid-template-columns:1fr 1fr;column-gap:26px}
  .mo{border-left:0;padding-left:0;border-bottom:1px solid var(--bord);padding-right:0}
  .mo::before{left:0}
}
@media (max-width:520px){.frise{grid-template-columns:1fr}}

/* ---------- aveu, relances ---------- */
.aveu{margin-top:38px;border-left:3px solid var(--accent);padding:18px 22px;background:var(--surface);
  border-radius:0 4px 4px 0;max-width:52rem}
.aveu p{margin:0;font-size:17px;color:var(--doux)}
.aveu b{color:var(--texte)}
.relance{margin-top:40px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--bord);border-radius:6px;padding:20px 24px}
.relance p{margin:0;font-size:16.5px;color:var(--doux);flex:1 1 320px}
.relance b{color:var(--texte)}
.sombre .relance{background:rgba(242,242,238,.05);border-color:rgba(242,242,238,.16)}
.sombre .relance p{color:#C4CECC}
.sombre .relance b{color:#F7F7F3}

/* ---------- emplacement d'image ---------- */
figure.shot{margin:0;border:1.5px dashed var(--bord);border-radius:6px;background:var(--surface);
  min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px 24px;gap:8px}
figure.shot .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
figure.shot .t{font-weight:800;font-size:15.5px}
figure.shot figcaption{font-size:13.5px;color:var(--faible);max-width:52ch;line-height:1.55}
.shots-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
@media (max-width:820px){.shots-2{grid-template-columns:1fr}}

/* ---------- cadre d'aperçu d'interface ---------- */
.apercu{margin-top:38px}
.apercu-t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.apercu-t .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.apercu-t .t{font-weight:800;font-size:15.5px}
.apercu figcaption{font-size:13.5px;color:var(--faible);margin-top:12px;max-width:70ch;line-height:1.55}
.cadre{border:1px solid var(--bord);border-radius:8px;overflow:hidden;
  box-shadow:0 1px 2px rgba(19,28,27,.05),0 18px 46px -30px rgba(19,28,27,.5)}

/* ===== aperçu 1 : l'écran du bar et de la cuisine =====
   Couleurs relevées sur packages/ihm/src/ihm.css (poste de production). */
.prod{background:#0E1315;color:#EDEFEE;font-size:15px;padding:16px 18px 20px}
.prod .bandeau{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:13px;border-bottom:1px solid #26302F;flex-wrap:wrap}
.prod .qui{font-size:16px;font-weight:800}
.prod .ou{font-size:13px;color:#93A09E}
.prod .jeton{font-size:12.5px;color:#93A09E;border:1px solid #2C3739;border-radius:99px;padding:5px 12px;
  display:inline-flex;align-items:center;gap:7px}
.prod .point{width:7px;height:7px;border-radius:50%;background:var(--lagon-clair);display:inline-block}
.prod h4{margin:18px 0 12px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  display:flex;align-items:baseline;gap:12px}
.prod h4 .cible{font-size:12.5px;letter-spacing:0;text-transform:none;color:#8A9694;font-weight:400}
.prod .bon{display:flex;align-items:center;gap:14px;background:#182022;border:1px solid #2C3739;
  border-radius:12px;padding:13px 15px;margin-bottom:10px}
.prod .bon .m{flex:1;min-width:0}
.prod .bon .l{font-size:19px;font-weight:800;line-height:1.25}
.prod .bon .meta{font-family:var(--mono);font-size:13px;color:#93A09E;margin-top:3px}
.prod .bon .croise{font-size:13px;font-weight:800;color:#D6A44E;margin-top:6px}
.prod .minuterie{font-family:var(--mono);font-size:25px;font-weight:800;letter-spacing:-.03em}
.prod .act{border:2px solid #EDEFEE;background:transparent;color:#EDEFEE;border-radius:12px;
  font-family:var(--ui);font-size:15px;font-weight:800;padding:12px 18px;min-width:104px}
.prod .bon[data-s="prise"]{background:#12242E;border-color:#2E7FA8}
.prod .bon[data-retard="1"]{box-shadow:inset 6px 0 0 #C64339}
.prod .bon[data-retard="1"] .minuterie{color:#F0958B}
.prod .passe{font-size:12.5px;color:#8A9694;text-align:right;max-width:104px;line-height:1.3}
@media (max-width:640px){
  .prod .bon{flex-wrap:wrap}
  .prod .act{width:100%}
}

/* ===== aperçu 2 : la carte sur le téléphone du client =====
   Couleurs par défaut de packages/ihm/src/convive.css. Sur une vraie plage,
   elles sont remplacées par celles de l'établissement (règle C-012). */
.tels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media (max-width:900px){.tels{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}
.tel-b{display:flex;flex-direction:column;gap:10px}
.tel-n{font-size:13px;font-weight:800;color:var(--texte)}
.tel-n span{font-weight:400;color:var(--faible)}
.tel{background:#F5F0E6;color:#16272E;border-radius:16px;border:1px solid var(--bord);
  overflow:hidden;font-size:14px;line-height:1.45}
.tel .entete{background:#16272E;color:#F5F0E6;padding:13px 15px}
.tel .entete .nom{font-weight:800;font-size:15px;display:block}
.tel .entete .lieu{font-size:12px;opacity:.72}
.tel .barre{background:#16272E;color:#F5F0E6;padding:9px 15px;display:flex;align-items:center;gap:10px;
  font-size:13px;border-top:1px solid rgba(245,240,230,.14)}
.tel .barre .t{font-weight:800;flex:1}
.tel .barre .ctx{font-family:var(--mono);opacity:.72}
.tel .page{padding:15px}
.tel h5{margin:0 0 6px;font-size:19px;font-weight:800;line-height:1.2}
.tel .lede{margin:0 0 14px;font-size:13px;color:#4E6067;line-height:1.5}
.tel .acte{display:flex;align-items:center;gap:10px;background:#FFF;border:1px solid #E1D8C8;
  border-radius:12px;padding:10px 12px;margin-bottom:8px}
.tel .acte.premier{background:#16272E;border-color:#16272E;color:#F5F0E6}
.tel .acte .ico{width:22px;height:22px;flex:none;color:var(--lagon)}
.tel .acte.premier .ico{color:#F5F0E6}
.tel .acte .txt{flex:1;min-width:0}
.tel .acte .n{font-size:13.5px;font-weight:800;display:block;line-height:1.25}
.tel .acte .d{font-size:11.5px;color:#7B8A8F;line-height:1.35}
.tel .acte.premier .d{color:rgba(245,240,230,.72)}
.tel .acte .fl{color:#7B8A8F;font-size:14px}
.tel .acte.premier .fl{color:rgba(245,240,230,.72)}
.tel .note{font-size:11px;color:#7B8A8F;line-height:1.45;margin:12px 0 0}
.tel .formule{display:flex;align-items:center;gap:10px;background:#FFF;border:1px solid #E1D8C8;
  border-radius:12px;padding:10px 12px;margin-bottom:8px}
.tel .formule[aria-pressed="true"]{border-color:var(--lagon);background:var(--ecume)}
.tel .formule .p{font-family:var(--mono);font-weight:800;font-size:14px}
.tel .cta{background:var(--lagon);color:#F5F0E6;border-radius:12px;padding:12px;text-align:center;
  font-weight:800;font-size:14px;margin-top:12px}
.tel .cta.second{background:transparent;color:#16272E;border:1px solid #E1D8C8;margin-top:8px}
.tel .sejour{background:#FFF;border:1px solid #E1D8C8;border-radius:12px;overflow:hidden;margin-bottom:12px}
.tel .sejour .h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border-bottom:1px solid #E1D8C8}
.tel .sejour .id{font-family:var(--mono);font-size:28px;font-weight:800;letter-spacing:-.02em}
.tel .sejour .m{font-size:12px;color:#7B8A8F;text-align:right;line-height:1.35}
.tel .sejour .b{display:grid;grid-template-columns:1fr 1fr}
.tel .sejour .c{padding:11px 14px}
.tel .sejour .c+.c{border-left:1px solid #E1D8C8}
.tel .sejour .l{font-size:11px;color:#7B8A8F;display:block}
.tel .sejour .v{font-family:var(--mono);font-size:16px;font-weight:800}
.tel .inter{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7B8A8F;
  font-weight:800;margin:14px 0 8px}

/* ===== aperçu 3 : votre bureau ===== */
.bo{display:grid;grid-template-columns:190px 1fr;background:#EFF1F0;color:#141A1C;font-size:13.5px;
  min-height:430px}
.bo .rail{background:#FFF;border-right:1px solid #D8DDDC;padding:14px 10px}
.bo .grp{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#727F82;font-weight:800;
  padding:12px 10px 6px}
.bo .rail button{display:flex;width:100%;justify-content:space-between;gap:8px;align-items:center;
  background:transparent;border:0;text-align:left;font-family:var(--ui);font-size:13px;color:#4B5658;
  padding:7px 10px;border-radius:6px;cursor:default}
.bo .rail button[aria-current="true"]{background:var(--ecume);color:var(--lagon);font-weight:800}
.bo .flou{filter:blur(3.2px);opacity:.55;user-select:none;pointer-events:none}
.bo .corps{padding:16px 18px 18px;min-width:0}
.bo .entete{background:#141A1C;color:#EFF1F0;margin:-16px -18px 16px;padding:11px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bo .entete .nom{font-weight:800;font-size:14px}
.bo .entete .sous{font-size:11.5px;opacity:.7}
.bo .entete .droite{display:flex;align-items:center;gap:12px;font-size:12px}
.bo .version{font-family:var(--mono);border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:3px 10px}
.bo h5{margin:0 0 4px;font-size:20px;font-weight:800}
.bo .lede{margin:0 0 16px;font-size:12.5px;color:#4B5658}
.bo .mesures{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.bo .mes{background:#FFF;border:1px solid #D8DDDC;border-radius:8px;padding:11px 12px}
.bo .mes .o{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#727F82;font-weight:800;display:block}
.bo .mes .v{font-family:var(--mono);font-size:21px;font-weight:800;margin-top:3px}
.bo .mes .d{font-size:10.5px;color:#727F82;margin-top:1px}
.bo .plaque{background:#FFF;border:1px solid #D8DDDC;border-radius:8px;padding:13px 14px}
.bo .plaque h6{margin:0 0 10px;font-size:12.5px;font-weight:800}
.bo .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bo table{border-collapse:collapse;width:100%;font-size:12px}
.bo th{text-align:left;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#727F82;
  font-weight:800;padding:5px 7px;border-bottom:1px solid #D8DDDC;white-space:nowrap}
.bo td{padding:6px 7px;border-bottom:1px solid #EAEEED;white-space:nowrap}
.bo tr:last-child td{border-bottom:0}
.bo .num{text-align:right;font-family:var(--mono)}
.bo .puce{font-size:10.5px;font-weight:800;border-radius:4px;padding:2px 7px;display:inline-block}
.bo .pv{background:var(--ecume);color:var(--lagon)}.bo .pa{background:#F7E9D2;color:#8E5100}
.bo .pr{background:#F7E1DE;color:#9C2019}
.bo .barreau{display:grid;grid-template-columns:74px 1fr 54px;align-items:center;gap:8px;
  font-size:11.5px;margin-bottom:6px}
.bo .barreau .g{height:9px;background:#EAEEED;border-radius:99px;overflow:hidden}
.bo .barreau .g i{display:block;height:100%;background:var(--lagon);border-radius:99px}
.bo .barreau .m{font-family:var(--mono);text-align:right;font-weight:800}
.bo .brouillon{margin:14px -18px -18px;padding:10px 18px;background:#F7E9D2;border-top:1px solid #8E5100;
  display:flex;align-items:center;gap:12px;font-size:12px;flex-wrap:wrap}
.bo .brouillon .v{font-family:var(--mono);font-weight:800}
.bo .bouton{border:1px solid #B4BDBC;background:#FFF;border-radius:6px;padding:5px 11px;font-size:12px;
  font-family:var(--ui);font-weight:800}
.bo .bouton--fort{background:var(--lagon);border-color:var(--lagon);color:#FFF}
@media (max-width:820px){
  .bo{grid-template-columns:1fr}
  .bo .rail{border-right:0;border-bottom:1px solid #D8DDDC;display:flex;gap:6px;overflow-x:auto;padding:10px}
  .bo .rail .grp{display:none}
  .bo .rail button{width:auto;white-space:nowrap}
  .bo .mesures{grid-template-columns:1fr 1fr}
  .bo .duo{grid-template-columns:1fr}
}

/* ---------- quatre postes ---------- */
.postes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:40px;background:var(--bord);
  border:1px solid var(--bord);border-radius:6px;overflow:hidden}
.poste{background:var(--surface);padding:22px 20px 24px}
.poste .q{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:10px}
.poste h3{font-size:17px;font-weight:800;margin:0 0 8px;line-height:1.25}
.poste p{margin:0;font-size:15px;color:var(--doux);line-height:1.5}
.poste ul{margin:12px 0 0;padding:10px 0 0;list-style:none;border-top:1px solid var(--bord)}
.poste li{font-size:12.5px;color:var(--faible);padding:2.5px 0}
@media (max-width:980px){.postes{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.postes{grid-template-columns:1fr}}

/* ---------- trois décisions ---------- */
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.dec{background:var(--surface);border:1px solid var(--bord);border-radius:6px;padding:26px 24px}
.dec .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:14px}
.dec h3{font-size:19px;font-weight:800;margin:0 0 12px;line-height:1.26}
.dec p{margin:0 0 12px;font-size:16px;color:var(--doux)}
.dec p:last-child{margin-bottom:0}
@media (max-width:880px){.trois{grid-template-columns:1fr}}

/* ---------- comparatif ---------- */
.cmp{overflow-x:auto;margin-top:38px;border:1px solid var(--bord);border-radius:6px;background:var(--surface)}
.cmp table{border-collapse:collapse;width:100%;min-width:760px;font-size:15.5px}
.cmp th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faible);text-align:left;
  font-weight:800;padding:14px 16px;border-bottom:1px solid var(--bord)}
.cmp th.nous{color:var(--accent)}
.cmp td{padding:14px 16px;border-bottom:1px solid var(--bord);vertical-align:top;color:var(--doux);width:30%}
.cmp tr:last-child td{border-bottom:0}
.cmp td.suj{color:var(--texte);font-weight:800;font-size:14.5px;width:22%}
.cmp td.nous{color:var(--texte);background:var(--accent-fond)}
.cmp td.nous b{color:var(--accent)}

/* ---------- bande sombre ---------- */
.sombre{background:var(--nuit);color:#EDEDE7;border:0}
.sombre .oeil{color:var(--lagon-clair)}
.sombre h2{color:#F7F7F3}
.sombre p{color:#C4CECC}
.sombre b{color:#F7F7F3}
.sombre u{color:#F7F7F3;text-decoration-color:var(--lagon-clair);text-underline-offset:3px}
.deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:54px;align-items:start}
.deux p{margin:0 0 16px;font-size:17px}
@media (max-width:880px){.deux{grid-template-columns:1fr;gap:26px}}

/* ---------- paramétrage ---------- */
.etapes{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:38px;background:var(--bord);
  border:1px solid var(--bord);border-radius:6px;overflow:hidden}
.etapes .et{background:var(--surface);padding:16px}
.etapes .et .n{font-family:var(--mono);font-size:11.5px;color:var(--accent);display:block;margin-bottom:7px}
.etapes .et h4{font-size:14.5px;font-weight:800;margin:0 0 5px;line-height:1.25}
.etapes .et p{margin:0;font-size:13.5px;color:var(--faible);line-height:1.45}
@media (max-width:980px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.etapes{grid-template-columns:1fr}}
.pacte{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.pa{border-left:3px solid var(--accent);padding:4px 0 4px 18px}
.pa h4{font-size:16px;font-weight:800;margin:0 0 8px;line-height:1.3}
.pa p{margin:0;font-size:15.5px;color:var(--doux)}
@media (max-width:880px){.pacte{grid-template-columns:1fr;gap:22px}}
.jamais{margin-top:32px;background:var(--surface);border:1px solid var(--bord);border-radius:6px;padding:24px}
.jamais h4{font-size:16px;font-weight:800;margin:0 0 12px}
.jamais ul{margin:0;padding-left:20px;columns:2;column-gap:34px}
.jamais li{font-size:15.5px;color:var(--doux);margin-bottom:7px;break-inside:avoid}
.jamais p{margin:14px 0 0;font-size:15.5px;color:var(--doux)}
@media (max-width:700px){.jamais ul{columns:1}}

/* ---------- prix ---------- */
.prix{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start;margin-top:34px}
.prix .gros{font-size:76px;font-weight:800;letter-spacing:-.04em;color:var(--accent);line-height:.9;white-space:nowrap}
.prix .u{font-size:14.5px;color:var(--faible);display:block;margin-top:14px;white-space:nowrap}
.prix p{margin:0 0 16px;font-size:17px;color:var(--doux)}
.prix p:last-child{margin-bottom:0}
@media (max-width:700px){.prix{grid-template-columns:1fr;gap:18px}}

/* ---------- état du produit ---------- */
.etat{margin-top:38px;border-top:1px solid var(--bord)}
.li{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:20px 0;border-bottom:1px solid var(--bord)}
.chip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:3px;background:var(--accent-fond);color:var(--accent);white-space:nowrap}
.chip.futur{background:transparent;border:1px solid var(--bord);color:var(--faible)}
.li h3{margin:0 0 6px;font-size:17.5px;font-weight:800}
.li p{margin:0;font-size:16px;color:var(--doux)}
@media (max-width:640px){.li{grid-template-columns:1fr;gap:10px}}

/* ---------- questions ---------- */
.qs{margin-top:38px;border-top:1px solid var(--bord)}
details{border-bottom:1px solid var(--bord)}
summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-weight:800;
  font-size:17.5px;line-height:1.35}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:29px;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);
  transition:transform .18s ease}
details[open] summary::after{transform:rotate(-135deg);top:32px}
details p{margin:0 0 20px;font-size:16.5px;color:var(--doux);max-width:64ch}

/* ---------- formulaire ---------- */
.form{margin-top:36px;max-width:720px}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.paire{grid-template-columns:1fr}}
.champ{margin-bottom:18px}
.champ label{display:block;font-weight:800;font-size:14px;margin-bottom:6px}
.req{font-size:10px;letter-spacing:.1em;color:var(--accent);background:var(--accent-fond);
  padding:2px 7px;border-radius:3px;margin-left:8px;vertical-align:1px;text-transform:uppercase}
.champ .aide{font-size:12.5px;color:var(--faible);margin-top:5px}
input,textarea{width:100%;font-family:var(--ui);font-size:16px;color:var(--texte);background:var(--surface);
  border:1px solid var(--bord);border-radius:4px;padding:11px 13px}
input:focus,textarea:focus{border-color:var(--accent)}
textarea{min-height:118px;resize:vertical}
.piege{position:absolute;left:-9999px}
.rgpd{font-size:13px;color:var(--faible);margin-top:16px;max-width:62ch;line-height:1.6}
.rgpd a{color:var(--accent)}
.reponse{margin-top:22px;border-radius:6px;padding:18px 20px;font-size:16px;line-height:1.55;display:none}
.reponse.on{display:block}
.reponse.ok{background:var(--accent-fond);border:1px solid var(--accent);color:var(--texte)}
.reponse.ko{background:#F7E1DE;border:1px solid #9C2019;color:#3A1512}
.reponse b{font-weight:800}
.reponse a{color:inherit}
.reponse .btn{margin-top:12px}
button[disabled]{opacity:.6;cursor:progress}

/* ---------- pied ---------- */
footer.pied{background:var(--nuit);color:#EDEDE7;padding:52px 0 34px}
.pied-g{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.pied-g .verrou{color:#F2F2EE}
footer.pied p{margin:12px 0 0;font-size:15.5px;color:#AFB9B7;max-width:36ch}
footer.pied a{color:#D8E2E0}
.pied-l{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:20px;
  border-top:1px solid rgba(242,242,238,.14);font-size:13px;color:#8E9997}
.pied-l a{color:#8E9997;text-decoration:none}
.pied-l a:hover{color:#F2F2EE}
@media (max-width:640px){.pied-g{grid-template-columns:1fr;gap:22px}}

@media (max-width:900px){
  .hero-g{grid-template-columns:1fr;gap:38px}
  .hero{padding:50px 0 4px}
  section{padding:56px 0}
  .wrap{padding:0 22px}
}

/* ---------- pages annexes ---------- */
.doc{max-width:var(--mesure);padding:56px 0 20px}
.doc h1{font-size:clamp(30px,4vw,42px);margin-bottom:10px}
.doc h2{font-size:22px;margin:38px 0 10px;max-width:none}
.doc h3{font-size:17px;margin:24px 0 6px;font-weight:800}
.doc p,.doc li{font-size:16.5px;color:var(--doux)}
.doc a{color:var(--accent)}
.doc .maj{font-size:13.5px;color:var(--faible);margin-bottom:30px}
.doc dl{margin:0}
.doc dt{font-weight:800;font-size:14px;margin-top:14px}
.doc dd{margin:2px 0 0;color:var(--doux)}
.doc .acompleter{background:var(--accent-fond);color:var(--accent);font-family:var(--mono);
  font-size:.86em;padding:2px 7px;border-radius:3px}


/* ---------- pictogrammes ----------
   Un seul jeu : 24 px, trait de 1,6, extrémités arrondies, aucun aplat.
   Ils prennent la couleur du texte ou de l'accent selon le bloc, et disparaissent
   des lecteurs d'écran : ils redisent le titre, ils ne l'augmentent pas. */
.pic{width:24px;height:24px;flex:none;display:block;color:var(--accent)}
.pic-l{width:28px;height:28px}
.mo .pic{margin-bottom:12px}
.poste .pic{margin-bottom:12px;width:26px;height:26px}
.dec-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dec-h .n{margin:0}
.cmp td.suj{white-space:normal}
.cmp .suj-i{display:flex;align-items:flex-start;gap:10px}
.cmp .suj-i .pic{width:20px;height:20px;margin-top:1px;color:var(--faible)}

/* ---------- aperçu : le plan de plage sur le sable ----------
   Couleurs relevées sur packages/ihm/src/ihm.css, ramenées au lagon de la
   charte : l'état « libre » y était vert, il est ici lagon. L'ambre de
   « à encaisser » reste — c'est une couleur d'état, pas un accent de marque. */
.ter{background:#E7E1D3;color:#141A1C;font-size:14px}
.ter .haut{background:#141A1C;color:#F2F2EE;padding:12px 16px;display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ter .qui{font-weight:800;font-size:15px}
.ter .ou{font-size:12.5px;color:#A9B4B2}
.ter .jetons{display:flex;gap:8px}
.ter .jeton{border:1px solid rgba(242,242,238,.4);border-radius:99px;padding:5px 13px;
  font-size:12.5px;display:inline-flex;align-items:center;gap:7px}
.ter .jeton b{font-family:var(--mono);font-weight:800}
.ter .pt{width:7px;height:7px;border-radius:50%;background:var(--lagon-clair)}
.ter .corps{padding:14px 16px 16px}
.ter .onglets{display:flex;gap:9px;margin-bottom:12px}
.ter .ong{background:#FFF;border:1px solid #CAC2AF;border-radius:99px;padding:9px 18px;
  font-size:13.5px;font-weight:800}
.ter .ong[aria-current="true"]{background:#141A1C;border-color:#141A1C;color:#F2F2EE}
.ter .filtres{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.ter .flt{background:#FFF;border:1px solid #CAC2AF;border-radius:99px;padding:8px 15px;
  font-size:13px;font-weight:800;display:inline-flex;align-items:baseline;gap:8px}
.ter .flt span{font-family:var(--mono);font-weight:400;font-size:11.5px;color:#6E7A7C}
.ter .flt[aria-pressed="true"]{background:#141A1C;border-color:#141A1C;color:#F2F2EE}
.ter .flt[aria-pressed="true"] span{color:#B6C0BE}
.ter .parc{background:#DCD5C4;border-radius:12px;padding:12px 14px 14px}
.ter .mer{text-align:center;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#4B5658;background:linear-gradient(#CBD8D6,#DCD5C4);border-radius:8px;padding:5px;margin-bottom:12px}
.ter .rg{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
  color:#4B5658;margin:0 0 6px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* L'attribut commercialisable se porte sur le rang, pas sur chaque place :
   c'est ce qui fait qu'une rangée se vend plus cher qu'une autre. */
.ter .attr{background:var(--ecume);color:var(--lagon);border:1px solid color-mix(in srgb,var(--lagon) 35%,transparent);
  border-radius:999px;padding:3px 11px;font-size:10px;letter-spacing:.11em}
/* La passerelle entre deux rangs, telle qu'elle est au plan. Purement
   visuelle : elle n'est pas une place et ne porte aucun libellé. */
.ter .passerelle{height:22px;width:58%;margin:2px 0 14px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#FFFDF8 0 7px,#E3DCCB 7px 10px);
  border:1px solid #D6CFBD}
.ter .rg small{font-family:var(--mono);font-weight:400;letter-spacing:0;text-transform:none;color:#6E7A7C}
.ter .places{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px}
.ter .pc{background:#FFF;border:1.5px dashed color-mix(in srgb,var(--lagon) 45%,transparent);
  border-radius:9px;padding:9px 10px;min-height:62px}
.ter .pc .id{font-family:var(--mono);font-weight:800;font-size:13.5px;display:block}
.ter .pc .st{font-size:12px;color:var(--lagon);display:block;margin-top:3px}
.ter .pc.due{background:#F6E7CB;border:1.5px solid #8E5100}
.ter .pc.due .st{color:#8E5100;font-weight:800}
.ter .pc.reg{background:#FFF;border:1.5px solid #141A1C}
.ter .pc.reg .st{color:#141A1C}
.ter .pc.hs{background:repeating-linear-gradient(-45deg,#DDD9CE 0 6px,#D2CDC1 6px 12px);
  border:1.5px solid #A9A08A;color:#6E7A7C}
.ter .pc.hs .id,.ter .pc.hs .st{color:#6E7A7C}
.ter .bas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.ter .act{background:#FFF;border:1.5px solid #141A1C;border-radius:12px;padding:15px;
  text-align:center;font-weight:800;font-size:15px}
.ter .act.eteint{background:#DCD5C4;border-color:transparent;color:#8A8578}
@media (max-width:760px){
  .ter .places{grid-template-columns:repeat(3,1fr)}
  .ter .bas{grid-template-columns:1fr}
}

/* ---------- aperçu : une offre dans le tunnel ----------
   Les jetons du tunnel sont déjà ceux de la marque : --tn-lagon vaut #0E6F62.
   On les reprend tels quels. */
.tn{background:var(--sable);color:var(--encre);padding:18px;font-size:14.5px}
.tn .bulle{background:var(--ecume);border-radius:14px 14px 14px 4px;padding:13px 16px;
  max-width:90%;margin-bottom:14px;line-height:1.55}
.tn .bulle b{font-weight:800}
.tn .refus{background:color-mix(in srgb,#9E2222 12%,transparent);border-left:4px solid #9E2222;
  color:#9E2222;border-radius:0 9px 9px 0;padding:11px 14px;margin-bottom:14px;font-size:13.5px}
.tn .saisie{background:var(--ecume);border-left:4px solid var(--lagon);border-radius:12px;
  padding:15px 17px}
.tn .saisie>b{display:block;font-size:15.5px;margin-bottom:12px}
.tn .lab{display:block;font-size:12.5px;font-weight:800;margin:12px 0 5px}
.tn .lab:first-of-type{margin-top:0}
.tn .champ{background:#FFF;border:1.5px solid color-mix(in srgb,var(--encre) 25%,transparent);
  border-radius:9px;padding:11px 12px;font-size:15px;min-height:44px}
.tn .champ.vide{color:#8A9694}
.tn .deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tn .qual{display:flex;gap:11px;align-items:flex-start;background:#FFF;border:1.5px solid #CBCFCD;
  border-radius:10px;padding:11px 13px;margin-top:10px}
.tn .qual[data-pris="oui"]{border-color:var(--lagon);background:var(--ecume)}
.tn .case{width:18px;height:18px;border:1.5px solid #8A9694;border-radius:4px;flex:none;margin-top:2px;
  display:grid;place-items:center;background:#FFF}
.tn .qual[data-pris="oui"] .case{background:var(--lagon);border-color:var(--lagon);color:#FFF}
.tn .qual .t{font-weight:800;font-size:13.5px;display:block}
.tn .qual .d{font-size:12px;color:#5C6866;line-height:1.45;display:block;margin-top:3px}
.tn .familles{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.tn .fam{border:1.5px solid #CBCFCD;background:var(--sable);border-radius:999px;padding:7px 14px;font-size:13px}
.tn .fam[data-pris="oui"]{background:color-mix(in srgb,var(--lagon) 12%,transparent);
  border-color:var(--lagon);font-weight:800}
.tn .lignes{margin-top:8px;display:grid;gap:6px}
.tn .lg{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;
  background:var(--sable);border-radius:9px;padding:9px 12px;font-size:13.5px}
.tn .lg .n{font-size:11.5px;color:#5C6866;display:block;font-family:var(--mono)}
.tn .lg .rt{font-size:11.5px;color:#9E2222}
.tn .bilan{background:color-mix(in srgb,var(--lagon) 10%,transparent);border-left:3px solid var(--lagon);
  border-radius:0 9px 9px 0;padding:11px 14px;margin-top:14px;font-size:13.5px;line-height:1.55}
.tn .double{background:color-mix(in srgb,#B0740B 12%,transparent);border-left:3px solid #B0740B;
  border-radius:0 9px 9px 0;padding:11px 14px;margin-top:10px;font-size:13px;line-height:1.5}
.tn .note{font-size:12.5px;color:#5C6866;line-height:1.5;margin:8px 0 0}
.tn .gestes{display:flex;gap:12px;flex-wrap:wrap;margin-top:15px}
.tn .bt{border:1.5px solid var(--lagon);color:var(--lagon);background:transparent;border-radius:10px;
  padding:11px 20px;font-weight:800;font-size:14px}
.tn .bt.premier{background:var(--lagon);color:#FFF}
.tn .bt.annuler{border-color:#9E2222;color:#9E2222}
.tn .pied{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;
  font-size:12.5px;color:#5C6866}
@media (max-width:640px){.tn .deux{grid-template-columns:1fr}}


/* Un écran de tunnel fait 1 700 px de haut : on en montre la moitié haute et on
   le dit. Couper sans le dire ferait croire que l'écran s'arrête là. */
.cadre.coupe{position:relative;max-height:640px;overflow:hidden}
.cadre.coupe::after{content:"";position:absolute;inset:auto 0 0 0;height:150px;pointer-events:none;
  background:linear-gradient(rgba(242,242,238,0),var(--sable))}