/* ==================================================================
   Carnet d'Hôte — vitrine
   Direction : la papeterie d'une belle maison, imprimée en une seule
   encre. Le bleu encre est l'encre (textes, filets, QR codes, dessins),
   l'ivoire est le papier, la pierre sert de second papier. Les photos
   sont les seules couleurs : des planches rectangulaires, légendées.
   Typo : Brygada 1918 (titres, chiffres, légendes en italique)
          + Schibsted Grotesk (texte, interface).
   Échelle (base 17 px) : 13,5 · 15 · 17 · 21 · 26 · 34 · 46 · 64 · 96+.
================================================================== */
:root {
  --bleu: #182B40;        /* l'encre : marque, titres sur papier, aplats */
  --bleu-nuit: #111E2D;   /* téléphones, détails sur aplat bleu */
  --ivoire: #F4EFE6;      /* papier principal */
  --papier: #FAF7F1;      /* papier clair : devis, champs */
  --pierre: #E7DFD2;      /* second papier */
  --taupe: #B5A18A;       /* filets et repères (jamais pour du texte) */
  --taupe-texte: #6E5B46; /* petits textes taupe, lisibles */
  --texte: #292824;       /* noir doux */
  --gris: #615C54;        /* texte secondaire */
  --filet: #D5CBBB;       /* séparateurs sur ivoire */
  --filet-pierre: #C6B9A5;
  --sur-bleu: #F4EFE6;
  --sur-bleu-doux: rgba(244, 239, 230, .74);
  --filet-bleu: rgba(244, 239, 230, .2);
  --ok: #2F6B45;
  --danger: #9C3424;
  --display: "Brygada 1918", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mesure: 1280px;
  --gout: clamp(20px, 4.5vw, 56px);
  --col: clamp(14px, 1.8vw, 28px);
  --ease: cubic-bezier(.22, .7, .2, 1);
  /* anciens noms (questionnaire, scripts) */
  --sapin: var(--bleu); --sapin-clair: #24405E; --encre: var(--texte);
  --laiton: var(--taupe); --laiton-texte: var(--taupe-texte);
  --sur-sapin: var(--sur-bleu); --sur-sapin-doux: var(--sur-bleu-doux); --socle: var(--papier);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ivoire); color: var(--texte); font: 400 17px/1.6 var(--body); font-kerning: normal; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { max-width: 100%; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }
.bleu :focus-visible, .foot :focus-visible { outline-color: var(--sur-bleu); }
[hidden] { display: none !important; }
.ico { width: 22px; height: 22px; flex: none; }
.ico-s { width: 17px; height: 17px; flex: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bleu); color: var(--sur-bleu); padding: 10px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, summary, figcaption { text-wrap: pretty; }

.wrap {
  max-width: calc(var(--mesure) + 2 * var(--gout)); margin: 0 auto;
  padding-left: max(var(--gout), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gout), env(safe-area-inset-right, 0px));
}

/* ---------- typographie ---------- */
.h2, .h3, .couv-titre { font-family: var(--display); font-weight: 400; margin: 0; font-variant-numeric: lining-nums; color: var(--bleu); }
.h2 { font-size: clamp(2rem, 3.6vw, 3.15rem); line-height: 1.06; letter-spacing: -.018em; }
.h2.grand { font-size: clamp(2.7rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -.03em; }
.h3 { font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; }
.bleu .h2, .bleu .h3 { color: var(--sur-bleu); }

/* ---------- boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border-radius: 0; cursor: pointer;
  font-weight: 600; font-size: 15.5px; letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--bleu); background: var(--bleu); color: var(--sur-bleu);
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--bleu-nuit); border-color: var(--bleu-nuit); }
.btn:active { transform: translateY(1px); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.btn.sapin, .btn.primary { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.btn.trait, .btn.ghost { background: transparent; color: var(--bleu); border-color: var(--bleu); }
.btn.trait:hover, .btn.ghost:hover { background: var(--bleu); color: var(--sur-bleu); }
.btn.ivoire { background: var(--sur-bleu); border-color: var(--sur-bleu); color: var(--bleu); }
.btn.ivoire:hover { background: #fff; border-color: #fff; }
.btn.clair { background: transparent; border-color: rgba(244, 239, 230, .5); color: var(--sur-bleu); }
.btn.clair:hover { background: var(--sur-bleu); border-color: var(--sur-bleu); color: var(--bleu); }
.lien { font-weight: 600; font-size: 15.5px; color: var(--bleu); text-decoration: underline; text-decoration-color: var(--taupe); text-decoration-thickness: 1px; text-underline-offset: 6px; transition: text-decoration-color .2s; }
.lien:hover { text-decoration-color: var(--bleu); }

/* ---------- en-tête ---------- */
.top {
  position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ivoire) 95%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.top.scrolled { border-bottom-color: var(--filet); }
.top .wrap { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.logo { text-decoration: none; font-family: var(--display); font-weight: 500; font-size: 1.55rem; line-height: 1; letter-spacing: -.012em; color: var(--bleu); white-space: nowrap; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--gris); padding: 6px 0; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nav a:hover { color: var(--bleu); text-decoration: underline; text-decoration-color: var(--taupe); }
.top .btn .s { display: none; }
.menu { display: none; }
@media (max-width: 960px) {
  .nav { display: none; }
  .top .wrap > .btn { margin-left: auto; }
  .top .wrap { gap: 16px; }
  /* menu des parties : trois traits, s'ouvre même sans script (details/summary) */
  .menu { display: block; position: relative; }
  .burger { list-style: none; cursor: pointer; display: grid; align-content: center; justify-items: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; -webkit-tap-highlight-color: transparent; }
  .burger::-webkit-details-marker { display: none; }
  .burger::marker { content: ""; }
  .burger i { display: block; width: 22px; height: 1.5px; background: var(--bleu); transition: transform .25s var(--ease), opacity .2s; }
  .menu[open] .burger i:nth-of-type(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu[open] .burger i:nth-of-type(2) { opacity: 0; }
  .menu[open] .burger i:nth-of-type(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .menu-pan {
    position: absolute; right: -10px; top: calc(100% + 12px); width: min(300px, calc(100vw - 24px));
    background: var(--papier); border: 1px solid var(--filet); border-top: 2px solid var(--bleu);
    padding: 6px 0 12px; max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain;
  }
  .menu[open] .menu-pan { animation: menu-in .18s var(--ease); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
  .menu-pan ul { list-style: none; margin: 0; padding: 0; }
  .menu-pan li a { display: block; padding: 11px 20px; text-decoration: none; font-size: 16px; font-weight: 500; color: var(--texte); }
  .menu-pan li a:hover, .menu-pan li a:focus-visible { background: var(--ivoire); }
  .menu-pan li a[aria-current] { color: var(--bleu); box-shadow: inset 2px 0 0 var(--bleu); font-weight: 600; }
  .menu-espace { display: block; margin: 8px 20px 0; padding-top: 12px; border-top: 1px solid var(--filet); font-size: 14.5px; font-weight: 600; color: var(--bleu); text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { .menu[open] .menu-pan { animation: none; } .burger i { transition: none; } }
@media (max-width: 430px) { .top .btn .l { display: none; } .top .btn .s { display: inline; } }
@media (max-width: 420px) { .top .btn { padding: 0 14px; } .logo { font-size: 1.35rem; } .top .wrap { gap: 12px; } }

/* ---------- téléphones (aperçus réels des livrets) ---------- */
.phone {
  --w: 262px; --bz: 9px; --s: .65067; --h: 534px; --ih: 516px; /* --s = (w − 2 × bz) / 375 */
  width: var(--w); height: var(--h); border-radius: 42px; background: var(--bleu-nuit); padding: var(--bz);
  position: relative; flex: none;
}
.phone::before { content: ""; position: absolute; top: calc(var(--bz) + 11px * var(--s)); left: 50%; width: calc(126px * var(--s)); height: calc(37px * var(--s)); transform: translateX(-50%); background: #070C13; border-radius: 999px; z-index: 3; }
.screen { width: 100%; height: 100%; border-radius: calc(42px - var(--bz)); overflow: hidden; overflow: clip; background: #fff; position: relative; isolation: isolate; }
.screen::after { content: ""; position: absolute; z-index: 3; left: 50%; bottom: 6px; width: 34%; height: 4px; transform: translateX(-50%); border-radius: 4px; background: rgba(20, 18, 14, .5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); pointer-events: none; }
.screen iframe { width: 375px; height: calc(var(--ih) / var(--s)); border: 0; display: block; transform: scale(var(--s)); transform-origin: 0 0; }
.bleu .phone { box-shadow: 0 0 0 1px rgba(244, 239, 230, .22); }
.phone.grand { --w: 300px; --bz: 10px; --s: .74667; --h: 612px; --ih: 592px; border-radius: 46px; }
.phone.grand .screen { border-radius: 36px; }

/* ---------- couverture ---------- */
.couv { padding-top: clamp(28px, 5vw, 72px); }
.couv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--col); }
.couv-titre {
  grid-column: 1 / span 8; grid-row: 1;
  font-size: clamp(3.1rem, 7.6vw, 7.4rem); line-height: .93; letter-spacing: -.037em; font-weight: 400;
}
.couv-texte { grid-column: 1 / span 5; grid-row: 2; padding-top: clamp(32px, 4vw, 52px); display: grid; gap: 30px; align-content: start; }
.couv-lead { margin: 0; font-size: clamp(1.06rem, 1.35vw, 1.18rem); line-height: 1.6; color: var(--texte); max-width: 31em; }
.couv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.tampon { grid-column: 6 / span 3; grid-row: 2; padding-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-content: start; align-items: end; }
.tampon-qr { width: 112px; height: 112px; padding: 8px; border: 1px solid var(--bleu); color: var(--bleu); background: var(--ivoire); }
.tampon-qr svg { width: 100%; height: 100%; display: block; }
.tampon p { margin: 0; font-family: var(--display); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--gris); }
.couv-epreuve { grid-column: 9 / span 4; grid-row: 1 / span 3; justify-self: end; position: relative; z-index: 2; display: grid; justify-items: center; }
.couv-ouvrir { margin-top: 16px; font-size: 14.5px; }
.couv { padding-bottom: clamp(72px, 9vw, 128px); }

@media (min-width: 1181px) { .hero-phone { --w: 300px; --bz: 10px; --s: .74667; --h: 612px; --ih: 592px; border-radius: 46px; } .hero-phone .screen { border-radius: 36px; } }
@media (max-width: 1180px) {
  .couv-titre { grid-column: 1 / span 8; }
  .tampon { grid-column: 1 / span 6; grid-row: 3; padding-top: 36px; }
  .couv-texte { grid-column: 1 / span 6; }
  .couv-epreuve { grid-column: 8 / span 5; }
}
@media (max-width: 860px) {
  .couv-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .couv-titre, .couv-texte, .tampon, .couv-epreuve { grid-column: 1; grid-row: auto; }
  .couv-titre { font-size: clamp(2.9rem, 12.5vw, 4.6rem); }
  .tampon { display: none; }
  .couv-epreuve { justify-self: center; margin-top: 48px; }
  .couv-ouvrir { margin-top: 18px; }
  }
@media (hover: none) { .tampon { display: none; } }
@media (max-width: 560px) {
  .hero-phone { --w: 236px; --bz: 8px; --s: .58667; --h: 482px; --ih: 466px; border-radius: 36px; }
  .hero-phone .screen { border-radius: 28px; }
}

/* ---------- sections ---------- */
.band { padding-block: clamp(88px, 11vw, 160px); }
.band.ivoire { background: var(--ivoire); }
.band.papier { background: var(--papier); }
.band.pierre { background: var(--pierre); }
.band.bleu, .band.sapin { background: var(--bleu); color: var(--sur-bleu); }
.bleu p { color: var(--sur-bleu-doux); }

/* ---------- registre : une journée d'hôte ---------- */
.registre { background: var(--pierre); padding-block: clamp(88px, 11vw, 150px); }
.registre-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); align-items: start; }
.registre-tete { grid-column: 1 / span 4; position: sticky; top: 110px; display: grid; gap: 18px; }
.registre-tete p { margin: 0; color: var(--gris); max-width: 22em; }
.journee { grid-column: 6 / span 7; }
.journee-tete, .journee-liste li { display: grid; grid-template-columns: 64px minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 clamp(16px, 2.6vw, 36px); align-items: baseline; }
.journee-tete { margin: 0; padding-bottom: 14px; font-size: 13.5px; color: var(--gris); }
.journee-tete span:first-child { grid-column: 1 / 3; }
.journee-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bleu); }
.journee-liste li { padding: 24px 0 26px; border-bottom: 1px solid var(--filet-pierre); }
.journee-liste time { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--gris); }
.journee-liste q { font-family: var(--display); font-style: italic; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; letter-spacing: -.008em; color: var(--texte); quotes: "«\00a0" "\00a0»"; }
.rubrique { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--bleu); padding-left: 14px; border-left: 1px solid var(--taupe); }
@media (max-width: 960px) {
  .registre-tete { grid-column: 1 / -1; position: static; margin-bottom: 44px; }
  .journee { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .journee-tete { display: none; }
  .journee-liste li { grid-template-columns: 52px minmax(0, 1fr); gap: 10px 12px; }
  .rubrique { grid-column: 2; }
}

/* ---------- parcours ---------- */
.parcours-titre { max-width: 17em; }
.parcours { list-style: none; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 0 var(--col); }
.parcours li { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; min-width: 0; border-top: 1px solid var(--bleu); padding-top: 18px; }
.parcours .quand { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2.05rem); line-height: 1.05; letter-spacing: -.012em; color: var(--bleu); font-variant-numeric: lining-nums; }
.parcours h3 { margin: 22px 0 8px; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.parcours p { margin: 0; color: var(--gris); font-size: 15.5px; }
.parcours a { color: var(--bleu); text-decoration-color: var(--taupe); text-underline-offset: 4px; }
@media (max-width: 900px) {
  .parcours { grid-template-columns: 1fr 1fr; gap: 44px var(--col); grid-template-rows: none; }
  .parcours li { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 560px) { .parcours { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- exemples : trois livrets ---------- */
.salon-texte { display: grid; gap: 22px; margin-bottom: clamp(56px, 7vw, 96px); }
.salon-texte p { margin: 0 0 0 auto; max-width: 30em; font-size: 1.08rem; }
.salon-app { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "choix scene" "detail scene"; gap: 0 clamp(32px, 5vw, 80px); align-items: start; }
.salon-choix { grid-area: choix; border-top: 1px solid var(--sur-bleu); }
.salon-choix button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--filet-bleu); color: var(--sur-bleu);
}
.salon-choix button > span:last-child { transition: opacity .25s; }
.salon-choix button[aria-selected="false"] > span:last-child { opacity: .6; }
.salon-choix button[aria-selected="false"]:hover > span:last-child { opacity: .82; }
.salon-choix button[aria-selected="true"] .nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; text-decoration-color: rgba(244, 239, 230, .55); }
.salon-choix button:focus-visible { outline: 2px solid var(--sur-bleu); outline-offset: 4px; }
.vign { width: 52px; aspect-ratio: 4 / 5; background: var(--c) center / cover no-repeat; opacity: .55; transition: opacity .25s; }
.salon-choix button[aria-selected="true"] .vign, .salon-choix button:hover .vign { opacity: 1; }
.salon-choix .t { display: block; font-size: 13.5px; opacity: .8; }
.salon-choix .nom { display: block; font-family: var(--display); font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.1; margin: 2px 0 3px; }
.salon-choix .ville { display: block; font-size: 14px; opacity: .8; }
.salon-detail { grid-area: detail; padding-top: 30px; display: grid; gap: 24px; }
.salon-detail p { margin: 0; max-width: 28em; }
.salon-qr { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; align-items: end; }
.salon-qr .qr { width: 104px; height: 104px; background: var(--sur-bleu); padding: 7px; color: var(--bleu); }
.salon-qr .qr svg { width: 100%; height: 100%; display: block; }
.salon-qr small { display: block; font-size: 14px; color: var(--sur-bleu-doux); margin-bottom: 12px; line-height: 1.4; }
.salon-scene { grid-area: scene; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: end; }
.salon-photo { order: 2; align-self: start; aspect-ratio: 4 / 5; background: var(--bleu-nuit); overflow: hidden; }
.salon-photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s var(--ease); }
.salon-phone { --w: 300px; --bz: 10px; --s: .74667; --h: 612px; --ih: 592px; border-radius: 46px; }
.salon-phone .screen { border-radius: 36px; }
.salon-phone .screen iframe { transition: opacity .25s var(--ease); }
.salon-scene.change .salon-photo img, .salon-scene.change .screen iframe { opacity: 0; }
@media (max-width: 1180px) {
  .salon-phone { --w: 262px; --bz: 9px; --s: .65067; --h: 534px; --ih: 516px; border-radius: 42px; }
  .salon-phone .screen { border-radius: 33px; }
}
@media (max-width: 960px) {
  .salon-app { grid-template-columns: 1fr; grid-template-areas: "choix" "detail" "scene"; }
  .salon-scene { margin-top: 56px; grid-template-columns: auto minmax(0, 1fr); }
  .salon-texte p { margin-left: 0; }
}
@media (max-width: 640px) {
  .salon-scene { grid-template-columns: 1fr; justify-items: center; }
  .salon-photo { display: none; }
  .salon-phone { --w: 262px; --bz: 9px; --s: .65067; --h: 534px; --ih: 516px; }
  .salon-choix button { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
  .vign { width: 44px; }
  .salon-qr { grid-template-columns: 1fr; }
  .salon-qr .qr { display: none; } /* sur téléphone, on ouvre le livret directement */
}

/* ---------- contenu : une bande de photos à faire défiler ---------- */
.contenu-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px 48px; flex-wrap: wrap; margin-bottom: clamp(36px, 4.5vw, 56px); }
.contenu-tete > div:first-child { display: grid; gap: 18px; max-width: 40rem; }
.contenu-tete p { margin: 0; color: var(--gris); }
.defile-nav { display: flex; gap: 8px; }
.defile-btn { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; border: 1px solid var(--bleu); color: var(--bleu); cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.defile-btn svg { width: 20px; height: 20px; }
.defile-btn:hover:not(:disabled) { background: var(--bleu); color: var(--sur-bleu); }
.defile-btn:disabled { opacity: .3; cursor: default; }
.defile {
  --h: clamp(300px, 34vw, 480px);
  position: relative; display: flex; gap: var(--col); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: max(var(--gout), calc((100% - var(--mesure)) / 2));
  scroll-padding-inline: max(var(--gout), calc((100% - var(--mesure)) / 2));
}
.defile::-webkit-scrollbar { display: none; }
.defile:focus-visible { outline-offset: -2px; }
.planche { margin: 0; flex: none; width: max-content; scroll-snap-align: start; }
.planche img { height: var(--h); width: auto; max-width: none; object-fit: cover; background: var(--pierre); }
.planche figcaption { width: 0; min-width: 100%; margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--gris); }
.planche figcaption b { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 16.5px; color: var(--bleu); }
.defile-barre { margin-top: 28px; height: 1px; background: var(--filet); position: relative; }
.defile-barre span { position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--w, .3) * 100%); background: var(--bleu); transform: translateX(calc(var(--p, 0) * (1 / var(--w, .3) - 1) * 100%)); }
@media (max-width: 640px) {
  .defile { --h: min(360px, 92vw); }
  .planche img { max-width: calc(100vw - 2 * var(--gout)); }
  .defile-nav { display: none; }
}
.sommaire-bloc { margin-top: clamp(96px, 12vw, 168px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); }
.sommaire-bloc > .h3 { grid-column: 1 / span 3; }
.sommaire { grid-column: 4 / span 9; }
.som-groupe { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--col); padding: 22px 0 28px; border-top: 1px solid var(--bleu); }
.som-groupe:last-child { border-bottom: 1px solid var(--bleu); }
.som-groupe h4 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.3rem; color: var(--bleu); }
.som-groupe dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--col); }
.som-groupe dt { font-weight: 600; font-size: 16px; }
.som-groupe dd { margin: 3px 0 0; color: var(--gris); font-size: 15px; line-height: 1.5; }
@media (max-width: 960px) {
  .sommaire-bloc > .h3, .sommaire { grid-column: 1 / -1; }
  .sommaire-bloc > .h3 { margin-bottom: 24px; }
}
@media (max-width: 640px) {
  .som-groupe { grid-template-columns: 1fr; gap: 14px; }
  .som-groupe dl { grid-template-columns: 1fr; }
}

/* ---------- supports : des objets ---------- */
.sup-tete { display: grid; gap: 20px; margin: 0 0 clamp(56px, 7vw, 96px) calc(100% / 3); max-width: 40rem; }
.sup-tete p { margin: 0; color: var(--gris); }
.objets { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(40px, 5vw, 64px) clamp(32px, 5vw, 80px); }
.objet { min-width: 0; }
.objet-cle { grid-row: 1 / 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-content: start; }
.objet:not(.objet-cle) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.socle { background: var(--papier); display: grid; place-items: center; padding: 40px 24px 28px; }
.objet-cle .socle { min-height: 480px; }
.socle svg { width: 100%; height: auto; display: block; }
.objet-cle .socle svg { max-width: 250px; }
.objet:not(.objet-cle) .socle { min-height: 270px; }
.objet:not(.objet-cle) .socle svg { max-width: 210px; }
.cartel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cartel h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 2.3vw, 2rem); line-height: 1.05; letter-spacing: -.012em; color: var(--bleu); }
.cartel p { margin: 0; color: var(--gris); font-size: 15.5px; }
.cartel .matiere { font-family: var(--display); font-style: italic; font-size: 16px; color: var(--taupe-texte); margin-top: -4px; }
.prix-objet { padding-top: 12px; border-top: 1px solid var(--filet-pierre); color: var(--texte) !important; }
.prix-objet b { font-family: var(--display); font-weight: 400; font-size: 1.45rem; font-variant-numeric: lining-nums tabular-nums; margin-right: 4px; color: var(--bleu); }
.note-bas { margin: 44px 0 0; font-size: 14px; color: var(--gris); }
.pierre .fob-body { transition: fill .3s var(--ease); }
.fob-colors { border: 0; margin: 6px 0 0; padding: 0; min-width: 0; }
.fob-colors legend { padding: 0; margin-bottom: 10px; font-size: 14.5px; font-weight: 600; }
.fob-colors legend b { font-weight: 400; color: var(--gris); margin-left: 6px; }
.couleurs { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.coul { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 500; }
.coul input { position: absolute; opacity: 0; pointer-events: none; }
.coul .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 3px solid var(--papier); box-shadow: 0 0 0 1px var(--filet); flex: none; transition: box-shadow .2s; }
.coul:hover .dot { box-shadow: 0 0 0 1px var(--gris); }
.coul:has(input:checked) .dot { box-shadow: 0 0 0 1.5px var(--bleu); }
.coul:has(input:focus-visible) .dot { outline: 2px solid var(--bleu); outline-offset: 4px; }
.pierre .coul .dot { border-color: var(--pierre); }
.fob-text { display: grid; gap: 6px; font-size: 14.5px; font-weight: 600; margin-top: 6px; }
.fob-text small { font-weight: 400; color: var(--gris); }
.fob-text input { min-height: 46px; border-radius: 0; border: 1px solid var(--filet-pierre); background: var(--papier); padding: 8px 12px; font-weight: 500; width: 100%; }
.fob-text input:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
@media (max-width: 960px) {
  .sup-tete { margin-left: 0; }
  .objets { grid-template-columns: 1fr; }
  .objet-cle { grid-row: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .objet-cle .socle { min-height: 420px; }
}
@media (max-width: 640px) {
  .objet-cle, .objet:not(.objet-cle) { grid-template-columns: 1fr; gap: 22px; }
  .objet-cle .socle { min-height: 380px; }
}

/* ---------- offres : une carte de prix ---------- */
.offres-tete { margin-bottom: clamp(56px, 7vw, 96px); }
.offres-tete .h2 { max-width: 20em; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col) * 2); max-width: 1040px; }
.plan { padding: 22px 0 0; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 16px; min-width: 0; border-top: 1px solid var(--bleu); }
.plan-nom { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.6rem; line-height: 1; color: var(--bleu); }
.plan .choisi { font-family: var(--display); font-style: italic; font-size: 15px; color: var(--taupe-texte); }
.plan .acc { margin: 0; color: var(--gris); font-size: 15.5px; min-height: 3.1em; }
.price { display: grid; gap: 4px; }
.price b { font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 7vw, 6.4rem); line-height: .9; letter-spacing: -.045em; color: var(--bleu); font-variant-numeric: lining-nums; }
.price span { font-size: 14px; color: var(--gris); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; }
.plan li { padding: 9px 0; border-top: 1px solid var(--filet); font-size: 15.5px; line-height: 1.45; }
.plan .meta { font-size: 14px; color: var(--gris); }
.plan .btn { width: 100%; }
@media (min-width: 981px) { .plans { grid-template-rows: repeat(5, auto); } .plan { grid-row: span 5; grid-template-rows: subgrid; row-gap: 16px; } .plan .acc { min-height: 0; } }
@media (max-width: 980px) {
  .plans { grid-template-columns: 1fr; max-width: 620px; row-gap: 64px; }
  .plan .acc { min-height: 0; }
}

.forfaits-bloc { margin-top: clamp(96px, 11vw, 150px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); }
.forfaits-tete { grid-column: 1 / span 3; display: grid; gap: 12px; align-content: start; }
.forfaits-tete p { margin: 0; color: var(--gris); font-size: 15.5px; }
.forfaits { grid-column: 4 / span 9; border-top: 1px solid var(--bleu); }
.forfait { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 2fr) minmax(0, 4fr); gap: 6px var(--col); padding: 24px 0 26px; border-bottom: 1px solid var(--filet); align-items: baseline; }
.forfait h4 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.45rem; color: var(--bleu); grid-column: 1; }
.forfait h4 small { display: block; font-style: italic; font-weight: 400; font-size: 14.5px; color: var(--taupe-texte); margin-top: 4px; }
.forfait .pm { grid-column: 2; font-family: var(--display); font-weight: 400; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; color: var(--bleu); font-variant-numeric: lining-nums; }
.forfait .pm span { display: block; margin-top: 6px; font-family: var(--body); font-size: 13.5px; letter-spacing: 0; color: var(--gris); }
.forfait p { grid-column: 3; margin: 0; font-weight: 600; font-size: 15.5px; }
.forfait ul { grid-column: 3; margin: 2px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--gris); }
.forfait li { display: inline; }
.forfait li + li::before { content: " · "; color: var(--taupe); }
@media (max-width: 960px) {
  .forfaits-tete, .forfaits { grid-column: 1 / -1; }
  .forfaits-tete { margin-bottom: 28px; }
}
@media (max-width: 640px) {
  .forfait { grid-template-columns: minmax(0, 1fr) auto; }
  .forfait h4 { grid-column: 1; }
  .forfait .pm { grid-column: 2; text-align: right; }
  .forfait p, .forfait ul { grid-column: 1 / -1; }
}

/* la carte (options) : comme une carte de room service */
.carte { margin-top: clamp(96px, 11vw, 150px); background: var(--pierre); padding: clamp(28px, 4.5vw, 64px); }
.carte-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 32px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--bleu); }
.carte-tete p { margin: 0; color: var(--gris); }
.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 6vw, 88px); }
.extras h4 { margin: 28px 0 6px; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.35rem; color: var(--bleu); }
.extras dl { margin: 0; }
.extras .row { display: flex; gap: 12px; align-items: baseline; padding: 13px 0; }
.extras dt { font-weight: 600; }
.extras dt small { display: block; font-weight: 400; color: var(--gris); font-size: 14px; }
.extras .dots { flex: 1; border-bottom: 1px dotted var(--taupe-texte); transform: translateY(-5px); min-width: 24px; }
.extras dd { margin: 0; font-family: var(--display); font-size: 1.3rem; color: var(--bleu); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.tva { margin: 26px 0 0; font-size: 14px; color: var(--gris); }
@media (max-width: 760px) { .extras { grid-template-columns: 1fr; } }

/* ---------- devis : un outil sur mesure ---------- */
.devis-tete { display: grid; gap: 18px; margin-bottom: clamp(48px, 6vw, 80px); max-width: 44rem; }
.devis-tete p { margin: 0; color: var(--gris); }
.devis { display: grid; grid-template-columns: 168px minmax(0, 1fr) minmax(0, 400px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.rail { position: sticky; top: 110px; }
.rail ol { list-style: none; margin: 0; padding: 0; counter-reset: r; border-left: 1px solid var(--filet); }
.rail li { counter-increment: r; }
.rail a { display: block; position: relative; padding: 9px 0 9px 22px; text-decoration: none; font-size: 14.5px; color: var(--gris); transition: color .2s; }
.rail a::before { content: counter(r); font-family: var(--display); font-size: 15px; margin-right: 10px; color: var(--taupe-texte); }
.rail a::after { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--bleu); transform: scaleY(0); transition: transform .3s var(--ease); }
.rail a:hover { color: var(--texte); }
.rail a.actif { color: var(--bleu); font-weight: 600; }
.rail a.actif::after { transform: none; }
.config { display: grid; gap: 56px; min-width: 0; }
.field { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; scroll-margin-top: 110px; }
.field legend { padding: 0; margin-bottom: 18px; display: flex; gap: 14px; align-items: baseline; font-family: var(--display); font-size: clamp(1.45rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.01em; color: var(--bleu); }
.field legend .step { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--taupe-texte); min-width: 1ch; font-variant-numeric: lining-nums; }
.hint { font-size: 14px; color: var(--gris); margin: 0; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cards.options { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.opt {
  position: relative; display: grid; gap: 5px; align-content: start; padding: 18px 18px 16px;
  background: var(--ivoire); border: 1px solid var(--filet); cursor: pointer; min-width: 0;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt b { font-weight: 600; line-height: 1.25; padding-right: 22px; }
.opt small { color: var(--gris); font-size: 13.5px; line-height: 1.4; }
.opt .p .barre { color: var(--gris); font-family: var(--sans, inherit); font-size: .8em; font-weight: 400; margin-right: 6px; text-decoration-thickness: 1px; }
.opt .p { font-family: var(--display); font-size: 1.3rem; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; color: var(--bleu); }
.opt:not(.check)::after { content: ""; position: absolute; right: 16px; top: 20px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--taupe-texte); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.opt:hover { border-color: var(--taupe-texte); }
.opt:has(input:checked) { border-color: var(--bleu); background: #fff; box-shadow: inset 0 0 0 1px var(--bleu); }
.opt:not(.check):has(input:checked)::after { border-color: var(--bleu); background: var(--bleu); box-shadow: inset 0 0 0 3px #fff; }
.opt:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px; }
.opt.check { grid-template-columns: 22px 1fr auto; align-items: start; gap: 4px 14px; }
.opt.check b { padding-right: 0; }
.opt.check .tick { width: 22px; height: 22px; border: 1px solid var(--taupe-texte); display: grid; place-items: center; color: transparent; grid-row: span 2; background: #fff; transition: background-color .2s, border-color .2s; }
.opt.check:has(input:checked) .tick { background: var(--bleu); border-color: var(--bleu); color: var(--sur-bleu); }
.opt.check .p { grid-row: span 2; font-size: 1.15rem; }
.opt.off { opacity: .5; cursor: not-allowed; }
.cards.rangs { grid-template-columns: 1fr; gap: 8px; }
.rangs .opt { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; padding: 16px 52px 16px 20px; align-items: center; }
.rangs .opt b, .rangs .opt small { grid-column: 1; padding-right: 0; }
.rangs .opt .p { grid-column: 2; grid-row: 1 / span 2; font-size: 1.2rem; }
.rangs .opt:not(.check)::after { top: 50%; margin-top: -6px; right: 20px; }
@media (max-width: 700px) { .cards, .cards.options { grid-template-columns: 1fr; } .rangs .opt { padding-right: 44px; } }

.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 16px 0; border-bottom: 1px solid var(--filet); flex-wrap: wrap; }
.qty-row:first-of-type { border-top: 1px solid var(--filet); }
.qty-row label { min-width: 0; flex: 1 1 220px; font-weight: 500; }
.qty-row label small { display: block; color: var(--gris); font-size: 14px; font-weight: 400; }
.qty-row .p { font-size: 14px; color: var(--taupe-texte); font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--taupe-texte); background: #fff; }
.stepper button { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; font-size: 18px; color: var(--bleu); transition: background-color .2s; }
.stepper button:hover { background: var(--ivoire); }
.stepper input { width: 52px; text-align: center; border: 0; background: transparent; font-family: var(--display); font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--bleu); font-weight: 600; text-decoration: underline; text-decoration-color: var(--taupe); text-underline-offset: 4px; cursor: pointer; font-size: 14px; }
.toggle { display: inline-flex; padding: 3px; border: 1px solid var(--taupe-texte); background: #fff; flex-wrap: wrap; }
.toggle label { position: relative; cursor: pointer; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--gris); transition: background-color .2s, color .2s; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle label:has(input:checked) { background: var(--bleu); color: var(--sur-bleu); }
.toggle label:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px; }
#f-forfait .toggle { justify-self: start; margin-bottom: 4px; }

/* supports dans le devis */
.sup-box { display: grid; }
.sup-line { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 0; border-bottom: 1px solid var(--filet); flex-wrap: wrap; }
.sup-line .lbl { font-weight: 500; flex: 1 1 220px; }
.sup-line .lbl a { display: block; font-size: 14px; color: var(--gris); text-decoration-color: var(--taupe); text-underline-offset: 3px; }
.sup-line .couleurs { gap: 6px; }
.sup-line .coul { font-size: 0; gap: 0; }
.sup-line .coul .dot { width: 28px; height: 28px; border-color: var(--papier); }
.sup-line .sup-line .sup-line .qty-row .en-plus { font-size: 12.5px; font-style: italic; font-family: var(--display); color: var(--taupe-texte); margin-left: 4px; }

/* la note de devis */
.folio-col { position: sticky; top: 100px; display: grid; gap: 14px; min-width: 0; }
.folio {
  background: #FFFEFB; color: var(--texte); font-size: 14.5px; line-height: 1.5; font-variant-numeric: tabular-nums;
  padding: 34px 30px 28px; position: relative; border: 1px solid var(--filet); border-top: 3px solid var(--bleu);
}
.folio-head { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--filet); }
.folio-head .brand { font-family: var(--display); font-weight: 500; font-size: 1.65rem; line-height: 1.05; letter-spacing: -.01em; color: var(--bleu); }
.folio-head small { color: var(--gris); font-size: 13.5px; }
.folio-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 13px; color: var(--gris); padding: 14px 0; margin: 0; border-bottom: 1px solid var(--filet); }
.folio-meta dd { margin: 0; text-align: right; color: var(--texte); }
.folio-lines { list-style: none; margin: 0; padding: 14px 0; display: grid; gap: 8px; border-bottom: 1px solid var(--filet); }
.fl { display: flex; align-items: baseline; gap: 6px; }
.fl .l { min-width: 0; }
.fl .l small { display: block; color: var(--gris); font-size: 12.5px; }
.fl .d { flex: 1; border-bottom: 1px dotted var(--taupe); transform: translateY(-5px); min-width: 14px; }
.fl .a { white-space: nowrap; }
.fl.minus .a { color: var(--ok); }
.fl.sec { margin-top: 10px; font-family: var(--display); font-style: italic; font-size: 15.5px; color: var(--taupe-texte); }
.fl.sec:first-child { margin-top: 0; }
.folio-tot { display: grid; gap: 6px; padding-top: 16px; }
.folio-tot .fl { font-weight: 600; }
.folio-tot .big { font-size: 1.05rem; align-items: baseline; }
.folio-tot .big .a { font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1; letter-spacing: -.02em; color: var(--bleu); font-variant-numeric: lining-nums tabular-nums; }
.folio-note { margin: 16px 0 0; font-size: 12.5px; color: var(--gris); line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .folio.maj .folio-tot .big .a { animation: maj .5s var(--ease); }
  @keyframes maj { from { opacity: .35; } to { opacity: 1; } }
}
.folio-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.folio-actions .btn { flex: 1 1 auto; }

.request { margin-top: clamp(64px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 4.5vw, 56px); background: var(--pierre); }
.request-intro { display: grid; gap: 14px; align-content: start; }
.request-intro p { margin: 0; color: var(--gris); }
.request-intro b { color: var(--bleu); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
.form label span small { font-weight: 400; color: var(--gris); }
.form input, .form textarea { width: 100%; min-height: 52px; border-radius: 0; border: 1px solid var(--filet-pierre); background: var(--papier); padding: 12px 14px; font-size: 16px; font-weight: 400; transition: border-color .2s, box-shadow .2s; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.form input[aria-invalid="true"] { border-color: var(--danger); }
.form .err { color: var(--danger); font-size: 13px; font-weight: 500; }
.form-status { grid-column: 1 / -1; padding: 16px 18px; font-size: 15px; display: grid; gap: 10px; background: var(--papier); border-left: 3px solid var(--taupe); }
.form-status.ok { border-left-color: var(--ok); }
.form-status pre { margin: 0; white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; max-height: 220px; overflow: auto; background: var(--ivoire); padding: 10px 12px; }
.form-status .btn { justify-self: start; }
@media (max-width: 1180px) { .devis { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); } .rail { display: none; } }
@media (max-width: 900px) { .devis { grid-template-columns: 1fr; } .folio-col { position: static; } .request { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } .folio { padding: 28px 20px 22px; } }

/* barre résumé (mobile) */
.devis-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 12px max(18px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  background: var(--bleu); color: var(--sur-bleu);
  display: none; align-items: center; justify-content: space-between; gap: 12px;
}
.devis-bar b { font-family: var(--display); font-weight: 400; font-size: 1.45rem; font-variant-numeric: lining-nums tabular-nums; }
.devis-bar small { display: block; opacity: .8; font-size: 13px; }
.devis-bar a { color: var(--sur-bleu); font-weight: 600; font-size: 14px; text-decoration-color: rgba(244, 239, 230, .5); text-underline-offset: 4px; }
@media (max-width: 900px) { .devis-bar.on { display: flex; } }

/* ---------- console : l'interface ---------- */
.console-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.console-text { display: grid; gap: 24px; }
.console-text > p { margin: 0; max-width: 32em; }
.ticks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet-bleu); }
.ticks li { padding: 9px 0; border-bottom: 1px solid var(--filet-bleu); font-size: 15.5px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.bleu .note { font-size: 14px; margin: 0; color: var(--sur-bleu-doux); }
.ecran { position: relative; padding-bottom: 60px; min-width: 0; }
.mock { --m-fond: #FBF8F2; --m-cote: #F1ECE2; --m-filet: #DDD4C5; --m-texte: #292824; --m-doux: #6B665E;
  background: var(--m-fond); color: var(--m-texte); overflow: hidden; font-size: 13.5px; }
.mock-bar { display: flex; gap: 7px; padding: 12px 16px; background: var(--m-cote); border-bottom: 1px solid var(--m-filet); align-items: center; }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--m-filet); }
.mock-bar span { margin-left: 10px; color: var(--m-doux); font-size: 13px; }
.mock-pub { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ok); }
.mock-body { display: grid; grid-template-columns: 158px minmax(0, 1fr); min-height: 330px; }
.mock-side { border-right: 1px solid var(--m-filet); padding: 14px 10px; display: grid; gap: 2px; align-content: start; background: var(--m-cote); }
.mock-side span { padding: 8px 10px; color: var(--m-doux); }
.mock-side span.on { background: var(--m-fond); color: var(--m-texte); font-weight: 600; box-shadow: inset 2px 0 0 var(--bleu); }
.mock-main { padding: 22px 24px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.mock-main h4 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.35rem; color: var(--bleu); }
.mock-field { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--m-doux); }
.mock-input { border: 1px solid var(--m-filet); padding: 10px 12px; font-weight: 400; background: #fff; color: var(--m-texte); font-size: 13.5px; min-height: 42px; }
.mock-input.focus { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
.caret { display: inline-block; width: 1.5px; height: 1em; background: var(--m-texte); vertical-align: -2px; margin-left: 1px; }
@media (prefers-reduced-motion: no-preference) { .caret { animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } }
.mock-sw { display: flex; align-items: center; gap: 10px; }
.mock .sw { width: 36px; height: 20px; border-radius: 999px; background: var(--bleu); position: relative; flex: none; }
.mock .sw::after { content: ""; position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.mock-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mock-btn { font-size: 12.5px; font-weight: 600; padding: 8px 16px; border: 1px solid var(--m-filet); background: #fff; }
.mock-btn.p { background: var(--bleu); color: var(--sur-bleu); border-color: var(--bleu); }
.mock-tel { position: absolute; right: -2%; bottom: 0; width: 196px; padding: 14px 12px 18px; background: #FDFBF6; border-radius: 26px; border: 7px solid var(--bleu-nuit); box-shadow: 0 0 0 1px rgba(244, 239, 230, .22); color: #292824; font-size: 11.5px; display: grid; gap: 10px; }
.mock-tel-top { font-family: var(--display); font-size: 15px; padding: 18px 2px 4px; border-bottom: 1px solid #E6DECF; }
.mock-preview { padding: 10px; border-radius: 6px; background: #F6E6E0; border: 1px solid #E6C3B7; line-height: 1.35; }
.mock-preview b { display: block; font-size: 11px; font-weight: 700; color: #8E3A26; margin-bottom: 2px; }
.mock-lignes { display: grid; gap: 6px; }
.mock-lignes i { display: block; height: 6px; border-radius: 3px; background: #E9E2D4; }
@media (max-width: 960px) { .console-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mock-body { grid-template-columns: 1fr; } .mock-side { display: none; } .mock-tel { width: 160px; right: 0; } .ecran { padding-bottom: 90px; } }

/* ---------- questions ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); align-items: start; }
.faq-tete { grid-column: 1 / span 4; display: grid; gap: 18px; position: sticky; top: 120px; }
.faq-tete p { margin: 0; color: var(--gris); }
.faq-tete a { color: var(--bleu); text-decoration-color: var(--taupe); text-underline-offset: 4px; }
.qa { grid-column: 6 / span 7; border-top: 1px solid var(--bleu); }
.qa details { border-bottom: 1px solid var(--filet); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-family: var(--display); font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.3; color: var(--texte); align-items: baseline; transition: color .2s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 13px; height: 13px; margin-top: 4px; background: linear-gradient(var(--bleu), var(--bleu)) center / 13px 1.5px no-repeat, linear-gradient(var(--bleu), var(--bleu)) center / 1.5px 13px no-repeat; transition: transform .25s var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--bleu); }
.qa summary:focus-visible { outline-offset: 4px; }
.qa p { margin: -6px 0 26px; color: var(--gris); max-width: 60ch; }
@media (max-width: 900px) { .faq-tete, .qa { grid-column: 1 / -1; } .faq-tete { position: static; margin-bottom: 36px; } }

/* ---------- contact ---------- */
.fin-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); row-gap: 40px; align-items: start; }
.fin-tete { grid-column: 1 / span 4; display: grid; gap: 18px; }
.fin-tete p { margin: 0; color: var(--gris); }
.coordonnees { grid-column: 6 / span 7; margin: 0; border-top: 1px solid var(--bleu); }
.cline { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--filet-pierre); }
.cline dt { font-size: 14px; color: var(--gris); }
.cline dd { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cline b, .cline .c-grand { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.75rem); color: var(--bleu); font-variant-numeric: lining-nums; overflow-wrap: anywhere; letter-spacing: -.01em; }
.c-mail { padding: 20px 0; }
.cline .c-grand { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--taupe); }
.cline .c-grand:hover { text-decoration-color: var(--bleu); }
@media (max-width: 900px) { .fin-tete, .coordonnees { grid-column: 1 / -1; } }
@media (max-width: 520px) { .cline { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- pied de page : colophon ---------- */
.foot { background: var(--bleu); color: var(--sur-bleu-doux); padding-block: clamp(64px, 8vw, 104px) calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col); row-gap: 44px; }
.foot-marque { grid-column: 1 / span 4; display: grid; gap: 14px; align-content: start; }
.foot-marque p { margin: 0; max-width: 24em; }
.foot-nom { font-family: var(--display); font-weight: 500; font-size: 1.9rem; line-height: 1; color: var(--sur-bleu); }
.foot-nav { grid-column: 6 / span 2; display: grid; gap: 8px; align-content: start; }
.foot a { color: var(--sur-bleu); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.colophon { grid-column: 9 / span 4; display: grid; gap: 12px; align-content: start; }
.colophon h2 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.15rem; color: var(--sur-bleu); }
.colophon p { margin: 0; }
.legal { font-size: 13.5px; padding-top: 12px; border-top: 1px solid var(--filet-bleu); }
@media (max-width: 900px) { .foot-marque { grid-column: 1 / -1; } .foot-nav { grid-column: 1 / span 6; } .colophon { grid-column: 7 / -1; } }
@media (max-width: 560px) { .foot-nav, .colophon { grid-column: 1 / -1; } .foot-nav { grid-template-columns: 1fr 1fr; } }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70;
  background: var(--bleu); color: var(--sur-bleu); padding: 11px 18px; font-size: 14px; font-weight: 600;
}

/* ---------- impression du devis ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #000; }
  .skip, .top, .couv, .registre, .band:not(#devis), .foot, .rail, .config, .folio-actions, .request, .devis-bar, #devis .devis-tete, .toast { display: none !important; }
  #devis { padding: 0; background: #fff; }
  .devis { display: block; }
  .folio-col { position: static; }
  .folio { border: 1px solid #999; max-width: 560px; margin: 0 auto; background: #fff; color: #000; }
}
.plans-note { max-width: 1040px; margin-top: 18px; font-size: 14px; color: var(--gris); }

/* Logo : le galet (porte-clés) devant le nom, en aplat de la couleur du texte */
.logo { display: inline-flex; align-items: center; gap: .4em; }
.logo::before { content: ""; flex: none; width: .8em; height: 1.12em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 56%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22M26.52 6.95L35.84 30.82A17 17 0 1 1 4.16 30.82L13.48 6.95A7 7 0 0 1 26.52 6.95ZM20 6.8a2.7 2.7 0 1 0 0 5.4a2.7 2.7 0 0 0 0-5.4z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 56%22%3E%3Cpath fill=%22%23000%22 fill-rule=%22evenodd%22 d=%22M26.52 6.95L35.84 30.82A17 17 0 1 1 4.16 30.82L13.48 6.95A7 7 0 0 1 26.52 6.95ZM20 6.8a2.7 2.7 0 1 0 0 5.4a2.7 2.7 0 0 0 0-5.4z%22/%3E%3C/svg%3E") center / contain no-repeat; }
.nav .nav-espace { color: var(--bleu); font-weight: 600; }
.nav a { white-space: nowrap; }
@media (max-width: 1100px) { .nav { gap: 18px; } .nav a { font-size: 14.5px; } }