/* Anim' Événements & Vacances : « La bande photo »
   Couleurs de leur marque : crème, vert sauge, or, noir du logo.
   Rayons : 3px partout (papier photo), 999px pour la pastille du devis seulement. */

@font-face { font-family: "Red Hat Display"; src: url("fonts/redhatdisplay.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Display"; src: url("fonts/redhatdisplay-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("fonts/redhattext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  --papier: #f2ecdf;
  --papier-2: #e9e1d0;
  --tirage: #fffdf8;
  --encre: #1d261c;
  --encre-2: #4c5647;
  --sauge: #6f7d5a;
  --sauge-fonce: #3d4a33;
  --or: #9a7526;
  --or-clair: #c9a55a;
  --trait: #d6ccb6;
  --bord: #8f8672;
  --rouge: #a1321f;
  --voile: #cfc8b4;

  --r: 3px;
  --ombre: 0 1px 1px rgb(61 74 51 / .08), 0 8px 24px -10px rgb(61 74 51 / .28);
  --ombre-haute: 0 2px 2px rgb(61 74 51 / .10), 0 18px 36px -14px rgb(61 74 51 / .38);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --z-top: 20;
  --z-pastille: 30;
  --z-vol: 40;

  --gouttiere: clamp(18px, 4.5vw, 64px);
  --large: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Red Hat Text", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, legend { font-family: "Red Hat Display", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 2px solid var(--sauge-fonce); outline-offset: 3px; border-radius: var(--r); }

.ic { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--encre); color: var(--papier); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 12px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 22px;
  border: 1.5px solid transparent; border-radius: var(--r);
  font-family: "Red Hat Display", sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-main { background: var(--sauge-fonce); color: #fbf8ef; }
.btn-line { border-color: var(--sauge-fonce); color: var(--sauge-fonce); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn-main:hover { background: var(--encre); }
  .btn-line:hover { background: var(--sauge-fonce); color: #fbf8ef; }
}
.lien { background: none; border: 0; padding: 6px 0; color: var(--encre-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .95rem; }

/* ---------- En-tête ---------- */
.top {
  position: sticky; top: 0; z-index: var(--z-top);
  display: flex; align-items: center; gap: 28px;
  height: 68px; padding: 0 var(--gouttiere);
  background: rgb(242 236 223 / .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: "Red Hat Display", sans-serif; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.brand img { border-radius: var(--r); }
.brand-amp { color: var(--encre-2); font-weight: 500; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { text-decoration: none; font-size: .98rem; color: var(--encre-2); padding: 8px 0; transition: color 160ms ease; }
.top-tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: "Red Hat Display", sans-serif; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--encre); } }

/* ---------- Accueil : le photobooth ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 80px);
  min-height: calc(100dvh - 68px); max-height: 900px;
  padding: 0 var(--gouttiere);
  max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto;
  overflow: hidden;
}
.hero-text { align-self: center; padding: 48px 0 64px; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.9rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--sauge-fonce); display: block; line-height: 1.12; padding-bottom: .08em; }
.hero-sub { margin-top: 26px; max-width: 34ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--encre-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-booth { position: relative; }
.slot {
  position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 2;
  background: linear-gradient(#141a13, #2a3327);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 10px 18px -8px rgb(20 26 19 / .55);
}
.strips { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.2vw, 30px); height: 100%; padding: 0 clamp(8px, 2vw, 28px); }
.strip {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--tirage); padding: 12px 12px 34px;
  box-shadow: var(--ombre-haute);
  border-radius: 0 0 var(--r) var(--r);
  align-self: start;
}
.strip-a { height: 92%; }
.strip-b { height: 70%; }
.frame { flex: 1 1 0; min-height: 0; min-width: 0; position: relative; background: var(--voile); overflow: hidden; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Choix de la fête ---------- */
.occasion { padding: clamp(56px, 8vw, 104px) var(--gouttiere) clamp(28px, 4vw, 48px); max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto; }
.occasion h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip {
  min-height: 46px; padding: 0 18px; border-radius: var(--r);
  border: 1.5px solid var(--bord); background: transparent; cursor: pointer;
  font-family: "Red Hat Display", sans-serif; font-weight: 600;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
@media (hover: hover) and (pointer: fine) { .chip[aria-pressed="false"]:hover { border-color: var(--sauge-fonce); } }
.occasion-mot { margin-top: 18px; color: var(--encre-2); }

/* ---------- Sections ---------- */
.sec { padding: clamp(48px, 7vw, 96px) var(--gouttiere); max-width: calc(var(--large) + 2 * var(--gouttiere)); margin: 0 auto; }
.sec-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.03em; }
.sec-head p, .voix-text > p, .gourmand-text > p, .qui-text p { margin-top: 16px; color: var(--encre-2); max-width: 58ch; }
.fine { font-size: .9rem; color: var(--encre-2); margin-top: 16px; }
.more { margin-top: 32px; color: var(--encre-2); }
.more a { color: var(--sauge-fonce); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Le tirage (brique de base) ---------- */
.tirage { margin: 0; background: var(--tirage); padding: 10px 10px 0; box-shadow: var(--ombre); border-radius: var(--r); display: flex; flex-direction: column; }
.tirage-img { background: var(--voile); overflow: hidden; aspect-ratio: 1 / 1; }
.tirage-img img { width: 100%; height: 100%; object-fit: cover; }
.tirage figcaption, .tirage-bas { padding: 12px 2px 14px; }
.tirage figcaption { font-family: "Red Hat Display", sans-serif; font-weight: 600; font-size: .95rem; }
.tirage-bas { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: start; flex: 1; }
.tirage-nom { font-family: "Red Hat Display", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em; }
.tirage-note { grid-column: 1 / -1; font-size: .86rem; color: var(--encre-2); line-height: 1.35; }
.tirage-prix { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.tirage-prix small { display: block; font-weight: 500; font-size: .74rem; color: var(--encre-2); }
.tirage-act { grid-column: 1 / -1; margin-top: 8px; align-self: end; }

/* Ajouter / quantité */
.add {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--sauge-fonce); border-radius: var(--r); background: transparent; color: var(--sauge-fonce);
  font-family: "Red Hat Display", sans-serif; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease;
}
.add:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .add:hover { background: var(--sauge-fonce); color: #fbf8ef; } }
.qte { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 44px; border-radius: var(--r); background: var(--sauge-fonce); color: #fbf8ef; }
.qte button { height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; border-radius: var(--r); transition: transform 140ms var(--ease-out), background-color 160ms ease; }
.qte button:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .qte button:hover { background: rgb(255 255 255 / .14); } }
.qte output { text-align: center; font-family: "Red Hat Display", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.qte :focus-visible { outline-color: #fbf8ef; outline-offset: -4px; }

/* Développement des tirages à l'entrée dans l'écran */
.js .dev { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
.js .dev .tirage-img img, .js .dev.frame img { opacity: 0; transform: scale(1.05); transition: opacity 900ms ease, transform 1100ms var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms + 120ms); }
.js .dev.vu { opacity: 1; transform: none; }
.js .dev.vu .tirage-img img, .js .dev.vu.frame img { opacity: 1; transform: none; }
/* ---------- Décoration : la planche-contact ---------- */
.planche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }

/* ---------- Photobooth : le réglage ---------- */
.booth { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 72px); align-items: start; }
.booth legend, .feu-tir legend { font-size: 1.05rem; margin-bottom: 14px; }
.booth-bornes, .booth-options { grid-column: 1; }
.booth-formules { grid-column: 2; grid-row: 1 / span 2; }
.booth-total { grid-column: 1 / -1; }
.bornes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.borne { position: relative; cursor: pointer; display: block; }
.borne input, .formule input, .option input, .radio input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.borne .tirage { padding: 6px 6px 0; transition: transform 200ms var(--ease-out), box-shadow 200ms ease; }
.borne .tirage-img { aspect-ratio: 4 / 5; }
.borne figcaption { padding: 8px 0 10px; font-size: .82rem; text-align: center; font-variant-numeric: tabular-nums; }
.borne input:checked + .tirage { box-shadow: 0 0 0 2px var(--sauge-fonce), var(--ombre-haute); transform: translateY(-4px); }
.borne input:focus-visible + .tirage { outline: 2px solid var(--sauge-fonce); outline-offset: 4px; }
.formules, .options { display: grid; gap: 8px; }
.formule, .option { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 12px 14px; border: 1.5px solid var(--bord); border-radius: var(--r); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; }
.formule b, .option b { font-family: "Red Hat Display", sans-serif; font-weight: 600; }
.formule i, .option i { font-style: normal; font-family: "Red Hat Display", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.formule small, .option small { grid-column: 1 / -1; color: var(--encre-2); font-size: .88rem; }
.formule:has(input:checked), .option:has(input:checked) { border-color: var(--sauge-fonce); background: rgb(111 125 90 / .13); }
.formule:has(input:focus-visible), .option:has(input:focus-visible) { outline: 2px solid var(--sauge-fonce); outline-offset: 3px; }
.booth-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--trait); }
.booth-prix { display: grid; gap: 4px; }
.booth-prix span { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 2.2rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.booth-prix small { color: var(--encre-2); font-size: .88rem; max-width: 30ch; }

/* ---------- Livre d'or vocal ---------- */
.sec-voix { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.tirage-grand { padding: 14px 14px 46px; max-width: 420px; }
.tirage-grand .tirage-img { aspect-ratio: 4 / 5; }
.lignes { margin-top: 26px; display: grid; gap: 4px; }
.ligne { display: grid; grid-template-columns: 1fr auto 132px; gap: 4px 18px; align-items: center; padding: 12px 0; }
.ligne + .ligne { border-top: 1px solid var(--trait); }
.ligne-nom { font-family: "Red Hat Display", sans-serif; font-weight: 600; }
.ligne-note { display: block; font-family: "Red Hat Text", sans-serif; font-weight: 400; font-size: .88rem; color: var(--encre-2); }
.ligne-prix { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ligne-prix small { font-weight: 500; font-size: .76rem; color: var(--encre-2); display: block; }

/* ---------- Feu d'artifice de jour ---------- */
.feu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.feu-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 22px); }
.feu-photos .tirage-img { aspect-ratio: 2 / 3; }
.feu-photos .tirage:nth-child(2) { margin-top: 44px; }
.feu-reglage { display: grid; gap: 14px; }
.panaches { display: flex; align-items: flex-end; justify-content: center; gap: 1.4%; height: 170px; padding: 0 4%; border-bottom: 2px solid var(--sauge-fonce); }
.panache { flex: 0 1 5.2%; height: 100%; transform-origin: 50% 100%; border-radius: 40% 40% 0 0 / 14% 14% 0 0;
  background: linear-gradient(to top, rgb(154 117 38 / .9), rgb(201 165 90 / .55) 45%, rgb(201 165 90 / 0));
  transition: transform 420ms var(--ease-out), opacity 300ms ease; }
.panache:nth-child(3n) { background: linear-gradient(to top, rgb(61 74 51 / .85), rgb(111 125 90 / .5) 45%, rgb(111 125 90 / 0)); }
.panache:nth-child(3n+1) { background: linear-gradient(to top, rgb(161 50 31 / .7), rgb(201 120 90 / .42) 45%, rgb(201 120 90 / 0)); }
.panache.off { transform: scaleY(0.04); opacity: 0; }
.feu-reglage label[for="feu-range"] { font-family: "Red Hat Display", sans-serif; font-weight: 600; margin-top: 8px; }
input[type="range"] { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--sauge-fonce); cursor: pointer; }
.feu-lu { display: flex; justify-content: space-between; align-items: baseline; font-family: "Red Hat Display", sans-serif; }
.feu-lu strong { font-weight: 600; font-size: 1.15rem; }
.feu-lu span { font-weight: 700; font-size: 2.2rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.feu-tir { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.feu-tir legend { width: 100%; }
.radio { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--bord); border-radius: var(--r); cursor: pointer; font-family: "Red Hat Display", sans-serif; font-weight: 600; transition: border-color 160ms ease, background-color 160ms ease; }
.radio:has(input:checked) { border-color: var(--sauge-fonce); background: rgb(111 125 90 / .13); }
.radio:has(input:focus-visible) { outline: 2px solid var(--sauge-fonce); outline-offset: 3px; }
.feu-reglage .btn { justify-self: start; }

/* ---------- Jeux en bois : le rail ---------- */
.sec-jeux { max-width: none; padding-left: 0; padding-right: 0; }
.sec-jeux .sec-head { padding: 0 var(--gouttiere); max-width: calc(640px + 2 * var(--gouttiere)); margin-left: max(0px, calc((100vw - var(--large)) / 2 - var(--gouttiere))); }
.rail { position: relative; scroll-padding-inline: max(var(--gouttiere), calc((100vw - var(--large)) / 2)); display: flex; gap: clamp(14px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x proximity; padding: 8px max(var(--gouttiere), calc((100vw - var(--large)) / 2)) 28px; scrollbar-width: thin; scrollbar-color: var(--sauge) transparent; }
.rail .tirage { flex: 0 0 clamp(210px, 22vw, 262px); scroll-snap-align: start; }

/* ---------- Gourmandises ---------- */
.sec-gourmand { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.gourmand-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); }
.gourmand-photos .tirage-img { aspect-ratio: 2 / 3; }
.gourmand-photos .tirage:nth-child(2) { margin-top: 36px; }
.gourmand-photos .tirage-bas { grid-template-columns: 1fr; }
.gourmand-photos .tirage-prix { text-align: left; }
.gourmand-photos .tirage-prix small { display: inline; margin-right: 5px; }
.gourmand-text h3 { font-size: 1.15rem; margin-top: 36px; }
.gourmand-text .lignes { margin-top: 10px; }

/* ---------- Animations ---------- */
.equipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); align-items: start; }
.groupe h3 { font-size: 1.25rem; padding-bottom: 14px; border-bottom: 2px solid var(--encre); }
.groupe .lignes { margin-top: 4px; }
.groupe .ligne { grid-template-columns: 1fr auto; }
.groupe .ligne .ligne-act { grid-column: 1 / -1; }
.groupe .ligne .add, .groupe .ligne .qte { width: 132px; }

/* ---------- Carine et Dan ---------- */
.sec-qui { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3.2fr); gap: 40px clamp(28px, 6vw, 96px); align-items: start; grid-template-rows: auto 1fr; border-top: 1px solid var(--trait); }
.qui-text p + p { margin-top: 14px; }
.qui-photo { grid-column: 2; grid-row: 1 / span 2; }
.qui-photo .tirage-img { aspect-ratio: 3 / 4; }
.reperes { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.reperes dt { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; color: var(--sauge-fonce); }
.reperes dd { margin: 8px 0 0; color: var(--encre-2); font-size: .95rem; }

/* ---------- Devis : la bande ---------- */
.sec-devis { border-top: 1px solid var(--trait); }
.devis { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.bande { position: relative; background: var(--tirage); box-shadow: var(--ombre-haute); border-radius: 0 0 var(--r) var(--r); padding: 34px 16px 18px; }
.bande-slot { position: absolute; left: -10px; right: -10px; top: 0; height: 18px; background: linear-gradient(#141a13, #2a3327); border-radius: 0 0 var(--r) var(--r); box-shadow: 0 8px 14px -8px rgb(20 26 19 / .5); }
.bande-liste { display: grid; gap: 0; }
.bl { display: grid; grid-template-columns: 56px 1fr auto; gap: 4px 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--trait); }
.bl-img { width: 56px; height: 56px; background: var(--voile); overflow: hidden; border-radius: var(--r); display: grid; place-items: center; font-family: "Red Hat Display", sans-serif; font-weight: 700; color: var(--sauge-fonce); font-size: 1.1rem; }
.bl-img img { width: 100%; height: 100%; object-fit: cover; }
.bl-nom { font-family: "Red Hat Display", sans-serif; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.bl-detail { display: block; font-family: "Red Hat Text", sans-serif; font-weight: 400; font-size: .86rem; color: var(--encre-2); }
.bl-prix { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.bl-prix small { display: block; font-weight: 500; font-size: .74rem; color: var(--encre-2); }
.bl-act { grid-column: 2 / -1; display: flex; align-items: center; gap: 12px; }
.bl-act .qte { width: 132px; }
.bl-suppr { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--encre-2); cursor: pointer; border-radius: var(--r); transition: color 160ms ease, transform 140ms var(--ease-out); }
.bl-suppr:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .bl-suppr:hover { color: var(--rouge); } }
.bl { transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out); }
.bande-vide { padding: 18px 4px 10px; display: grid; gap: 16px; justify-items: start; color: var(--encre-2); }
.bande-vide strong { color: var(--encre); font-family: "Red Hat Display", sans-serif; }
.remises { margin-top: 14px; display: grid; gap: 6px; font-size: .93rem; color: var(--sauge-fonce); }
.remises li { display: flex; justify-content: space-between; gap: 16px; }
.remises li span:last-child { font-family: "Red Hat Display", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-family: "Red Hat Display", sans-serif; }
.total span { font-weight: 600; }
.total strong { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.bande-total .fine { margin-top: 8px; }

.demande { display: grid; gap: 18px; }
.champ { display: grid; gap: 8px; }
.champ-2 { grid-template-columns: 1fr 1fr; gap: 16px; }
.champ-2 > div { display: grid; gap: 8px; }
.champ label { font-family: "Red Hat Display", sans-serif; font-weight: 600; font-size: .98rem; }
.opt { font-weight: 400; color: var(--encre-2); }
.champ input, .champ textarea { width: 100%; min-height: 48px; padding: 11px 14px; background: var(--tirage); border: 1.5px solid #7d745f; border-radius: var(--r); transition: border-color 160ms ease, box-shadow 160ms ease; }
.champ textarea { resize: vertical; min-height: 96px; }
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--sauge-fonce); outline-offset: 2px; border-color: var(--sauge-fonce); }
.champ [aria-invalid="true"] { border-color: var(--rouge); }
.aide { font-size: .88rem; color: var(--encre-2); }
.erreur { font-size: .9rem; color: var(--rouge); font-weight: 500; }
.envoi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* ---------- Pied ---------- */
.pied { background: var(--encre); color: #e6e0d0; padding: 56px var(--gouttiere) 110px; display: grid; grid-template-columns: 1.4fr 1.4fr 1fr; gap: 32px clamp(24px, 5vw, 72px); }
.pied-id { display: flex; gap: 16px; align-items: flex-start; }
.pied-id img { border-radius: var(--r); }
.pied strong { font-family: "Red Hat Display", sans-serif; color: #fbf8ef; }
.pied a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; overflow-wrap: anywhere; }
.pied-contact li:last-child { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; }
.pied .ic { color: var(--or-clair); }
@media (hover: hover) and (pointer: fine) { .pied a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } }
.pied-legal { grid-column: 1 / -1; font-size: .86rem; color: #b9b3a2; max-width: 80ch; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .14); }

/* ---------- Pastille du devis ---------- */
.pastille {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--z-pastille);
  display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 20px 0 8px;
  background: var(--encre); color: #fbf8ef; border-radius: 999px; text-decoration: none;
  font-family: "Red Hat Display", sans-serif; font-weight: 600;
  box-shadow: 0 10px 30px -8px rgb(20 26 19 / .6);
  transition: transform 260ms var(--ease-out), opacity 220ms ease;
}
.pastille[hidden] { display: inline-flex; opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none; visibility: hidden; transition: transform 200ms var(--ease-out), opacity 160ms ease, visibility 0s 200ms; }
.pastille:active { transform: scale(0.97); }
.pastille-n { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; background: var(--or-clair); color: var(--encre); font-weight: 800; font-variant-numeric: tabular-nums; transition: transform 200ms var(--ease-out); }
.pastille-n.bump { transform: scale(1.18); }
.pastille-total { font-variant-numeric: tabular-nums; color: var(--or-clair); font-weight: 700; }
.vol { position: fixed; z-index: var(--z-vol); pointer-events: none; object-fit: cover; border: 3px solid var(--tirage); border-radius: var(--r); box-shadow: var(--ombre-haute); will-change: transform, opacity; }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 1080px) {
  .planche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .booth { grid-template-columns: 1fr; }
  .booth-bornes, .booth-options, .booth-formules, .booth-total { grid-column: 1; grid-row: auto; }
  .equipe { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .top-tel { margin-left: auto; }
}
@media (max-width: 767px) {
  body { font-size: 1rem; }
  .top { gap: 12px; height: 60px; }
  html { scroll-padding-top: 72px; }
  .brand-amp { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; max-height: none; gap: 0; }
  .hero-text { padding: 40px 0 32px; }
  .hero-sub { max-width: none; }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-booth { margin: 0 calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere); height: 230px; }
  .slot { left: var(--gouttiere); right: var(--gouttiere); height: 16px; }
  .strips { grid-template-columns: 1fr; padding: 0 10px; }
  .strip { flex-direction: row; height: 190px; padding: 10px 10px 26px; }
  .strip-a { height: 190px; }
  .strip-b { display: none; }
  .planche { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tirage { padding: 7px 7px 0; }
  .tirage-bas { grid-template-columns: 1fr; }
  .tirage-prix { text-align: left; }
  .tirage-prix small { display: inline; margin-left: 4px; }
  .bornes { grid-template-columns: repeat(5, 104px); overflow-x: auto; padding: 8px 2px 14px; margin: -8px -2px 0; }
  .booth-total .btn, .feu-reglage .btn { width: 100%; }
  .sec-voix, .feu, .sec-gourmand, .sec-qui, .devis { grid-template-columns: 1fr; }
  .tirage-grand { max-width: 300px; padding: 10px 10px 30px; }
  .ligne { grid-template-columns: 1fr auto; }
  .ligne .ligne-act { grid-column: 1 / -1; }
  .ligne .add, .ligne .qte { width: 132px; }
  .feu-photos .tirage:nth-child(2), .gourmand-photos .tirage:nth-child(2) { margin-top: 24px; }
  .gourmand-photos .tirage-bas { padding-top: 8px; }
  .equipe { grid-template-columns: 1fr; }
  .qui-photo { grid-column: 1; grid-row: auto; max-width: 260px; }
  .reperes { grid-template-columns: 1fr; gap: 18px; }
  .champ-2 { grid-template-columns: 1fr; }
  .envoi .btn { width: 100%; }
  .pied { grid-template-columns: 1fr; padding-bottom: 104px; }
  .rail .tirage { flex-basis: 200px; }
}

/* ---------- Mouvement réduit : on garde les fondus, on retire les déplacements ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .dev, .js .dev .tirage-img img, .js .dev.frame img { transform: none; transition: opacity 300ms ease; transition-delay: 0ms; }
  .borne input:checked + .tirage { transform: none; }
  .panache { transition: opacity 200ms ease; }
  .pastille, .pastille[hidden] { transform: none; }
  .pastille-n.bump { transform: none; }
  .bl { transition: opacity 200ms ease; }
  .btn:active, .chip:active, .add:active { transform: none; }
}

/* ---------- Impression : la bande du devis seule ---------- */
@media print {
  .top, .hero, .occasion, #univers, .sec-qui, .pastille, .demande, .pied-liens, .bande-vide, .bl-act, #vider, .skip { display: none !important; }
  body { background: #fff; }
  .devis { grid-template-columns: 1fr; }
  .bande { box-shadow: none; border: 1px solid #999; }
  .pied { background: #fff; color: #000; padding: 20px; }
}

/* ---------- Compléments ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* La bande sort de la fente du photobooth au chargement */
.js .strip { transform: translateY(-58%); transition: transform 1300ms var(--ease-out); }
.js .strip-b { transition-delay: 160ms; }
.js.pret .strip { transform: none; }
.js .frame.dev { transform: none; }
.frame:nth-child(2) { --i: 4; }
.frame:nth-child(3) { --i: 8; }
.strip-b .frame { --i: 3; }
.strip-b .frame:nth-child(2) { --i: 7; }
.strip-b .frame:nth-child(3) { --i: 11; }

/* Une fois développé, le tirage répond vite au survol et à la sélection */
.js .tirage.pose { transition: transform 220ms var(--ease-out), box-shadow 220ms ease; transition-delay: 0ms; }
@media (hover: hover) and (pointer: fine) {
  .planche .tirage.pose:hover, .rail .tirage.pose:hover { transform: translateY(-3px); box-shadow: var(--ombre-haute); }
}
@media (max-width: 767px) {
  .js .strip { transform: translateY(-70%); }
}
@media (prefers-reduced-motion: reduce) {
  .js .strip, .js.pret .strip { transform: none; transition: none; }
  .planche .tirage.pose:hover, .rail .tirage.pose:hover { transform: none; }
}

/* Devis : le formulaire reste à portée pendant qu'on relit une longue bande */
@media (min-width: 768px) { .demande { position: sticky; top: 92px; } }
.bl { padding: 10px 0; }
.bl-act { margin-top: 2px; }
/* La pastille s'efface quand le devis est à l'écran */
.pastille.range { opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none; visibility: hidden; transition: transform 200ms var(--ease-out), opacity 160ms ease, visibility 0s 200ms; }
@media (prefers-reduced-motion: reduce) { .pastille.range { transform: none; } }

/* Téléphone : cibles tactiles et planche repliée */
.top-tel { min-height: 44px; }
.lien { min-height: 44px; }
.planche-plus { display: none; margin-top: 18px; }
@media (max-width: 767px) {
  .planche.replie > .tirage:nth-child(n+9) { display: none; }
  .planche-plus { display: inline-flex; width: 100%; }
  .planche-plus[hidden] { display: none; }
}

[hidden]:not(.pastille) { display: none !important; }
@media (max-width: 767px) {
  .gourmand-photos { display: flex; overflow-x: auto; gap: 12px; margin: 0 calc(-1 * var(--gouttiere)); padding: 6px var(--gouttiere) 20px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gouttiere); position: relative; }
  .gourmand-photos .tirage { flex: 0 0 190px; scroll-snap-align: start; }
  .gourmand-photos .tirage:nth-child(2) { margin-top: 0; }
  .gourmand-photos .tirage-img { aspect-ratio: 4 / 5; }
}

/* ---------- Corrections après relecture ---------- */
.pied :focus-visible, .pastille:focus-visible { outline-color: var(--or-clair); }
.pied a, .pied-contact li:last-child { min-height: 44px; }
.qte button:disabled { opacity: .4; cursor: default; }
.sans-js { max-width: 60ch; margin: 24px auto; padding: 0 var(--gouttiere); }
.sec-head .fine { margin-top: 12px; }
/* Témoin visible du choix (radio ronde, case carrée) */
.coche { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 10px; vertical-align: -4px; border: 1.5px solid var(--bord); border-radius: 50%; color: transparent; background: var(--tirage); transition: background-color 160ms ease, border-color 160ms ease; }
.coche-case { border-radius: var(--r); }
.coche .ic { width: 14px; height: 14px; }
input:checked ~ b .coche { background: var(--sauge-fonce); border-color: var(--sauge-fonce); color: #fbf8ef; }
.formule small, .option small { padding-left: 30px; }
/* Devis : actions du bas */
.bande-envoyer { display: none; width: 100%; margin-top: 16px; }
.bande-liens { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px; }
.gourmand-photos { order: -1; }
@media (max-width: 767px) {
  .brand { min-width: 0; }
  .brand > span { overflow: hidden; text-overflow: ellipsis; }
  .bande-envoyer { display: inline-flex; }
  .gourmand-photos { order: 0; }
}
@media (max-width: 480px) {
  .bl { grid-template-columns: 44px minmax(0, 1fr); }
  .bl-img { width: 44px; height: 44px; }
  .bl-prix { grid-column: 2; text-align: left; }
  .bl-prix small { display: inline; margin-right: 5px; }
  .bl-detail { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 400px) {
  .top-tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .top-tel { min-width: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .qte button:active, .bl-suppr:active, .pastille:active { transform: none; } }
@media print {
  .pied *, .pied strong, .pied-legal { color: #000 !important; }
  .pied .ic, .sec-head p, .bande-envoyer, .bande-liens, .bande-slot { display: none !important; }
  .bl { break-inside: avoid; transition: none; }
}