/* Site éventail mariage, V5 du 01/10/2026 : direction « papeterie de mariage » (papier ivoire, encre bronze, filets fins, air).
   Ce fichier : variables, base typographique, en-tête, intro, collection, budget, étapes, FAQ, appel final, pied de page.
   Le configurateur (bandeau, ccfg, reglages, scene, commande, pied…) vit dans assets/configurateur.css. */
:root {
  /* couleurs (noms figés, teintes affinées : plus chaudes, plus profondes) */
  --encre: #2a2420;        /* encre : texte courant, titres */
  --encre2: #665b51;       /* encre douce : textes secondaires (≈ 5,8:1 sur ivoire) */
  --fond: #faf6ef;         /* papier ivoire */
  --carte: #fffdf9;        /* surfaces (panneaux, champs) */
  --ligne: #e3d9cb;        /* filets */
  --accent: #74573a;       /* bronze : accents, boutons (≈ 6,2:1 sur ivoire, blanc sur bronze ≈ 6,5:1) */
  --accent-c: #f2e9dd;     /* bronze très clair : fonds de sélection */
  --alerte: #a33a2a; --ok: #3f6b4b;

  /* polices (chargées dans le <head>) : réutilisables par le configurateur */
  --police-titre: "Cormorant Garamond", "Times New Roman", Georgia, serif;   /* titres, numéros, nom de marque */
  --police-script: "Great Vibes", "Pinyon Script", cursive;                   /* un mot ou une ligne, jamais plus */
  --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;  /* corps, boutons, champs */

  /* matière : rayons et ombre communs à toute la page */
  --rayon-controle: 8px;   /* boutons, champs, pastilles */
  --rayon-panneau: 14px;   /* panneaux, vignette mobile */
  --ombre-douce: 0 14px 34px rgba(42, 36, 32, .08);           /* la seule ombre autorisée, rare */
  --ombre-eventail: drop-shadow(0 14px 22px rgba(42, 36, 32, .12)); /* filtre pour les éventails SVG posés sur le papier */
  --filet: 1px solid var(--ligne);

  /* mesures lues par app.js */
  --entete: 60px;
  --apercu: clamp(150px, 28vh, 320px);
}
@supports (height: 1svh) { :root { --apercu: clamp(150px, 28svh, 320px); } }

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene, .scene > *, #faq summary::after { transition: none !important; }
}
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.6 var(--police-texte); -webkit-font-smoothing: antialiased; }
.cadre { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 861px) { .cadre { padding-inline: 28px; } }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
h1, h2 { font-family: var(--police-titre); font-weight: 500; letter-spacing: .005em; }
h2 { font-size: 1.6rem; margin: 0 0 .4em; }
p { margin-top: 0; }
[hidden] { display: none !important; }

button, .bouton { cursor: pointer; font: inherit; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: var(--rayon-controle); padding: 10px 18px; text-decoration: none; display: inline-block; min-height: 44px; letter-spacing: .02em; line-height: 1.3; }
button.secondaire { background: var(--carte); color: var(--encre); border-color: var(--ligne); }
button:hover, .bouton:hover { filter: brightness(1.08); }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bouton-grand { padding: 15px 30px; font-weight: 600; }
.petit { color: var(--encre2); font-size: .88rem; }
.erreur { color: var(--alerte); font-size: .88rem; }

/* étiquette en petites capitales espacées (réutilisable) */
.kicker, .carte .style, table.data thead th, .entete-nav a { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }

/* ── en-tête : une ligne, discret, collant ─────────────────────────────── */
.entete { background: rgba(250, 246, 239, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: var(--filet); position: sticky; top: 0; z-index: 20; height: var(--entete); }
.entete-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.marque { font-family: var(--police-titre); font-size: 1.45rem; font-weight: 600; color: var(--encre); text-decoration: none; white-space: nowrap; letter-spacing: .01em; line-height: 1; }
.entete-nav { display: flex; gap: 26px; }
.entete-nav a { color: var(--encre2); text-decoration: none; padding: 12px 0; }
.entete-nav a:hover { color: var(--accent); }
.entete-cta { padding: 10px 18px; min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; }
@media (max-width: 720px) { .entete-nav { display: none; } .marque { font-size: 1.3rem; } }

/* ── intro : hiérarchie forte, air, visuel sans cadre ──────────────────── */
/* section pleine largeur : photo d'ambiance en fond, voile ivoire sous le texte, fondu vers la page en bas */
.intro { position: relative; isolation: isolate; overflow: hidden; }
.intro-fond img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 246, 239, .96) 0%, rgba(250, 246, 239, .9) 34%, rgba(250, 246, 239, .35) 56%, rgba(250, 246, 239, 0) 70%),
              linear-gradient(180deg, rgba(250, 246, 239, 0) 78%, var(--fond) 100%); }
.intro-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; padding-block: 84px 92px; min-height: min(760px, calc(100vh - var(--entete))); }
.kicker { margin: 0 0 22px; color: var(--encre2); }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.3rem); line-height: 1.02; margin: 0 0 .5em; font-weight: 500; }
h1 span { display: block; font-family: var(--police-script); font-weight: 400; font-size: .86em; line-height: 1.15; color: var(--accent); margin-top: .08em; padding-left: .04em; }
.chapeau { max-width: 56ch; color: var(--encre2); font-size: 1.08rem; line-height: 1.65; margin: 0 0 28px; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin: 0 0 30px; }
.lien-doux { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--accent); padding: 10px 0 3px; }
.lien-doux:hover { color: var(--accent); }
.garanties { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; list-style: none; padding: 16px 0 0; margin: 0; color: var(--encre2); font-size: .92rem; border-top: var(--filet); }
.garanties li { display: inline-flex; align-items: center; }
.garanties li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); margin-inline: 14px; flex: none; }
.intro-visuel { margin: 0; padding: 8px 4px 0; background: none; border: 0; min-height: min(calc((100vw - 112px) * .3085 + 54px), 390px); } /* hauteur réservée (SVG 600 × 370 + légende) : pas de saut quand app.js dessine */
.intro-visuel svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 26px rgba(42, 36, 32, .2)) drop-shadow(0 3px 5px rgba(42, 36, 32, .12)); }  /* posé sur le papier */
.intro-couple { margin: 14px 0 0; text-align: center; font-family: var(--police-titre); font-style: italic; font-size: 1.1rem; color: var(--encre2); }
@media (max-width: 860px) {
  .intro-in { grid-template-columns: 1fr; gap: 18px; padding-block: 18px 32px; min-height: 0; }
  .intro-fond img { object-position: 50% 0; height: calc((100vw - 32px) * .617 + 120px); bottom: auto; }
  /* mobile : la photo reste derrière l'éventail, puis se fond dans le papier ivoire sous le titre */
  .intro::before { background: linear-gradient(180deg, rgba(250, 246, 239, 0) 0, rgba(250, 246, 239, 0) calc((100vw - 32px) * .617 - 70px), rgba(250, 246, 239, .9) calc((100vw - 32px) * .617 + 14px), var(--fond) calc((100vw - 32px) * .617 + 60px)); }
  .intro-visuel { order: -1; padding: 0; min-height: calc((100vw - 32px) * .617 + 40px); }
  .intro-couple { margin-top: 8px; }
  .kicker { margin-bottom: 14px; }
  .chapeau { font-size: 1.02rem; margin-bottom: 22px; }
}

/* ── sections éditoriales : collection, budget, étapes, FAQ ────────────── */
.bloc { padding-block: 64px; }
.bloc h2, .final h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); text-align: center; margin: 0 0 .5em; }
.bloc h2::after { content: ""; display: block; width: 44px; height: 1px; background: var(--accent); margin: 20px auto 0; opacity: .75; }
.bloc-intro { max-width: 65ch; color: var(--encre2); margin: 0 auto 24px; text-align: center; }
.bloc > .petit { max-width: 65ch; margin: 18px auto 0; text-align: center; }
@media (max-width: 860px) { .bloc { padding-block: 44px; } }

/* collection : l'éventail domine, pas de carte dans une carte */
#modeles .filtres { justify-content: center; gap: 8px 10px; margin: 0 0 32px; }
#modeles .filtres button { background: none; color: var(--encre2); border: 1px solid transparent; border-radius: 999px; padding: 10px 14px; min-height: 44px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
#modeles .filtres button small { font-size: .78rem; color: var(--encre2); letter-spacing: 0; margin-left: 2px; }
#modeles .filtres button[aria-pressed=true] { background: none; color: var(--accent); border-color: var(--accent); }
#modeles .filtres button[aria-pressed=true] small { color: var(--accent); }
.cartes { display: grid; gap: 44px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
@media (min-width: 1000px) { .cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carte { background: none; border: 0; border-radius: 0; padding: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.carte svg { width: 100%; height: auto; display: block; margin-bottom: 14px; filter: var(--ombre-eventail); }
.carte .style { color: var(--accent); }
.carte h3 { margin: 2px 0 0; font-family: var(--police-titre); font-size: 1.45rem; font-weight: 600; line-height: 1.1; }
.carte p { margin: 0; color: var(--encre2); font-size: .9rem; }
.carte button { margin-top: 10px; background: none; color: var(--accent); border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 10px 2px 4px; min-height: 44px; font-size: .9rem; letter-spacing: .03em; }
.carte.choisie h3 { color: var(--accent); }
.carte.choisie button { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: var(--rayon-controle); padding: 10px 18px; }
@media (max-width: 860px) {
  #modeles .filtres { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; margin-bottom: 20px; }
  #modeles .filtres::-webkit-scrollbar { display: none; }
  #modeles .filtres button { white-space: nowrap; flex: none; }
  .cartes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding-bottom: 12px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: thin; }
  .carte { flex: 0 0 72vw; max-width: 300px; scroll-snap-align: start; }
}

/* budget : filets fins, chiffres tabulaires */
.table-scroll { overflow-x: auto; max-width: 820px; margin: 0 auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; background: none; border: 0; border-top: 1px solid var(--encre); font-variant-numeric: tabular-nums lining-nums; }
table.data th, table.data td { padding: 14px 16px; text-align: left; border-bottom: var(--filet); vertical-align: baseline; }
table.data thead th { color: var(--encre2); border-bottom: 1px solid var(--encre); padding-block: 12px; }
table.data td.num, table.data th.num { text-align: right; }
table.data td { font-size: 1.02rem; }
table.data td b { font-weight: 600; color: var(--encre); }
table.data tbody tr:last-child td { border-bottom: 1px solid var(--encre); }
@media (max-width: 860px) {
  .table-scroll { margin-inline: -16px; padding-inline: 16px; }
  table.data th, table.data td { padding: 12px 12px; }
}
/* 375 px : le tableau tient sans défilement (police 14 px, cellules serrées) ; s'il déborde quand même, ombres de défilement aux bords */
@media (max-width: 600px) {
  table.data th, table.data td { padding: 10px 6px; }
  table.data thead th { font-size: .7rem; letter-spacing: .06em; white-space: normal; }
  table.data td { font-size: .875rem; }
  table.data td .petit { font-size: .75rem; }
  .table-scroll {
    background:
      linear-gradient(to right, var(--fond) 30%, rgba(250, 246, 239, 0)) 0 0 / 40px 100% no-repeat local,
      linear-gradient(to left, var(--fond) 30%, rgba(250, 246, 239, 0)) 100% 0 / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(42, 36, 32, .14), transparent) 0 0 / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(42, 36, 32, .14), transparent) 100% 0 / 14px 100% no-repeat scroll;
  }
}

/* comment ça marche : 4 étapes, numéro en Cormorant, un filet */
.etapes-liste { list-style: none; counter-reset: etape; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 36px; padding: 0; margin: 40px auto 0; max-width: none; }
.etapes-liste li { counter-increment: etape; padding-top: 18px; border-top: var(--filet); margin: 0; }
.etapes-liste li::before { content: counter(etape, decimal-leading-zero); display: block; font-family: var(--police-titre); font-size: 2.2rem; line-height: 1; color: var(--accent); margin-bottom: 12px; font-variant-numeric: lining-nums; }
.etapes-liste b { display: block; font-family: var(--police-titre); font-size: 1.4rem; font-weight: 600; line-height: 1.15; margin-bottom: 6px; }
.etapes-liste p { margin: 0; color: var(--encre2); max-width: 32ch; }
@media (max-width: 860px) { .etapes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 28px; } }
@media (max-width: 520px) { .etapes-liste { grid-template-columns: 1fr; gap: 22px; } .etapes-liste li::before { font-size: 1.9rem; margin-bottom: 8px; } }

/* FAQ : filets, marqueur « + » fin, pas de fond */
#faq details { background: none; border: 0; border-bottom: var(--filet); border-radius: 0; padding: 0; margin: 0 auto; max-width: 75ch; }
#faq details:first-of-type { border-top: var(--filet); margin-top: 40px; }
#faq summary { cursor: pointer; list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 0; min-height: 44px; font-family: var(--police-titre); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--accent); transition: transform .25s ease; margin-top: -2px; }
#faq details[open] summary::after { transform: rotate(45deg); }
#faq details p { margin: 0 44px 20px 0; color: var(--encre2); max-width: 65ch; }
@media (max-width: 860px) { #faq summary { font-size: 1.18rem; padding: 16px 0; } #faq details p { margin-right: 0; } }

/* ── appel final et pied de page ───────────────────────────────────────── */
.final { text-align: center; padding-block: 72px 80px; border-top: var(--filet); }
.final p { color: var(--encre2); max-width: 55ch; margin: 0 auto 28px; font-size: 1.05rem; }
.pied-page { padding-block: 28px; color: var(--encre2); font-size: .85rem; text-align: center; border-top: var(--filet); }
.pied-page p { margin: 0; }
@media (max-width: 860px) { .final { padding-block: 52px 60px; } }

/* Logo (kit du 01/10/2026) */
.marque { display: inline-flex; align-items: center; color: var(--accent); line-height: 0; }
.marque svg { height: 28px; width: auto; display: block; }
.marque .marque-symbole { display: none; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 720px) { .marque svg { height: 24px; } .marque .marque-complet { display: none; } .marque .marque-symbole { display: block; } .marque { padding-inline: 10px; margin-left: -10px; } }
.pied-page p { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
.pied-marque { height: 22px; width: auto; flex: none; color: var(--accent); }

/* Menu (01/10/2026) : cinq entrées calées sur les recherches des couples ; sur mobile, un bouton Menu qui déplie la même liste */
.menu-mobile { display: none; position: relative; }
.menu-mobile summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre2); }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-trait { display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-trait::before, .menu-trait::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.menu-trait::before { top: -6px; } .menu-trait::after { top: 6px; }
.menu-mobile[open] summary { color: var(--accent); }
.menu-mobile nav { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--carte); border: var(--filet, 1px solid var(--ligne)); border-radius: var(--rayon-panneau, 14px); box-shadow: var(--ombre-douce, 0 10px 30px rgba(43,38,34,.1)); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.menu-mobile nav a { color: var(--encre); text-decoration: none; padding: 12px 12px; border-radius: 8px; font-size: 1rem; }
.menu-mobile nav a:hover { background: var(--accent-c); }
.menu-mobile nav a.bouton { color: #fff; margin-top: 6px; text-align: center; }
@media (max-width: 1060px) { .entete-nav { display: none; } .menu-mobile { display: block; } }
@media (max-width: 720px) { .entete-cta { display: none; } }
#couleurs { scroll-margin-top: calc(var(--entete) + 12px); }

/* Menu : libellés sur une ligne, bascule mobile plus tôt, pas de chevron hérité des details */
.entete-nav { gap: 22px; }
.entete-nav a { white-space: nowrap; letter-spacing: .1em; }
@media (max-width: 1200px) { .entete-nav { display: none; } .menu-mobile { display: block; } }
/* 1201 à 1380 px (portables 1280 et 1366) : nav compactée pour que logo, cinq entrées et bouton tiennent sans déborder (audit U-B1) */
@media (min-width: 1201px) and (max-width: 1380px) {
  .entete-nav { gap: 16px; }
  .entete-nav a { font-size: .7rem; letter-spacing: .04em; }
  .marque svg { height: 24px; }
  .entete-cta { font-size: .95rem; padding: 9px 14px; }
}
.menu-mobile summary::after, .menu-mobile summary::before { content: none !important; display: none !important; }
.menu-mobile summary::marker { content: ""; }
.menu-mobile summary { padding-right: 10px !important; }

.entete-cta { white-space: nowrap; }

/* ── Contacts et demande sur mesure (01/10/2026) : filets et texte, pas de cartes ───────────────────────── */
.intro-sur-mesure { margin: 18px 0 0; color: var(--encre2); font-size: .95rem; }
.intro-sur-mesure a, .renvoi-sur-mesure a, .sur-mesure a { color: var(--accent); text-underline-offset: 3px; }
.contact-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--accent); border-radius: var(--rayon-controle); color: var(--accent); text-decoration: none; font-weight: 600; background: transparent; transition: background-color .2s, color .2s; }
.contact-lien:hover { background: var(--accent); color: #fff; }
.contact-lien[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.renvoi-sur-mesure { text-align: center; color: var(--encre2); margin: 36px auto 0; max-width: 65ch; }
.final-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin: 0; }

.sur-mesure-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px 64px; margin-top: 36px; align-items: start; }
.sur-mesure-cas ul { list-style: none; padding: 0; margin: 14px 0 0; }
.sur-mesure-cas li { padding: 12px 0; border-top: var(--filet); color: var(--encre2); }
.sur-mesure-cas li b { color: var(--encre); font-weight: 600; }
.sur-mesure-direct { margin-top: 30px; }
.sur-mesure-direct .contact-liens { margin: 12px 0 10px; }
.sur-mesure-direct .petit { margin: 6px 0 0; }
.selectionnable { user-select: all; color: var(--encre); white-space: nowrap; }
.sur-mesure-form { display: grid; gap: 14px; }
.sur-mesure-form label { display: block; font-size: .88rem; color: var(--encre2); }
.sur-mesure-form .facultatif { font-size: .8rem; color: var(--encre2); }
.sur-mesure-form :is(input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], textarea) {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; font: inherit; font-size: 16px; color: var(--encre);
  background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon-controle); padding: 10px 12px; min-height: 44px; }
.sur-mesure-form textarea { resize: vertical; line-height: 1.5; }
.sur-mesure-form :is(input:not([type=checkbox]):not([type=file]), textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-c); outline: none; }
.sm-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sm-types { border: 0; padding: 0; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.sm-types legend { font-size: .88rem; color: var(--encre2); margin-bottom: 8px; padding: 0; }
.sm-types label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--ligne); border-radius: 999px; color: var(--encre); font-size: .9rem; cursor: pointer; background: var(--carte); transition: border-color .2s, background-color .2s; }
.sm-types label:has(input:checked) { border-color: var(--accent); background: var(--accent-c); }
.sm-types label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sm-types input { accent-color: var(--accent); margin: 0; }
.sur-mesure-form .bouton-grand { justify-self: start; }
.sur-mesure-form .petit, .sur-mesure-form .erreur { margin: 0; }
@media (max-width: 860px) {
  .sur-mesure-grille { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 520px) { .sm-ligne { grid-template-columns: 1fr; } .sur-mesure-form .bouton-grand { justify-self: stretch; } }

/* ── Galerie (01/10/2026) : 8 modèles au départ, 12 de plus à chaque demande ; sur mobile, deux par ligne, texte serré ── */
.cartes-suite { text-align: center; margin-top: 40px; }
.cartes-suite:empty { display: none; }
.cartes-suite .petit { margin: 0 0 12px; }
.cartes-suite button { background: none; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--rayon-controle); padding: 12px 28px; min-height: 48px; font-weight: 500; }
.cartes-suite button:hover { background: var(--accent); color: #fff; filter: none; }
@media (max-width: 860px) {
  .cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; }
  .carte { flex: none; max-width: none; gap: 2px; }
  .carte svg { margin-bottom: 8px; }
  .carte .style { font-size: .75rem; letter-spacing: .08em; }
  .carte h3 { font-size: 1.12rem; }
  .carte p { font-size: .78rem; line-height: 1.4; }
  .carte button { font-size: .82rem; letter-spacing: 0; white-space: nowrap; margin-top: 4px; padding: 8px 2px 4px; }
  .carte.choisie button { padding: 8px 12px; }
  .cartes-suite { margin-top: 30px; }
}

/* ── Appels à l'action (plan CTA du 01/10/2026) : bouton contour, empilements mobiles, renvois ── */
.bouton-contour { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.bouton-contour:hover { background: var(--accent-c); filter: none; }
.carte[data-choisir-galerie] { cursor: pointer; }
.galerie-reprendre { text-align: center; margin: 28px auto 0; }
.galerie-reprendre + .renvoi-sur-mesure { margin-top: 22px; }
.bloc-renvoi { text-align: center; margin: 22px auto 0; }
.etapes-cta { text-align: center; margin: 44px 0 0; }
.faq-autre { max-width: 75ch; margin: 28px auto 0; color: var(--encre2); }
.faq-autre a { color: var(--accent); text-underline-offset: 3px; display: inline-block; padding-block: 10px; margin-block: -6px; }
@media (max-width: 720px) {
  .intro-actions, .final-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .intro-actions .bouton, .final-actions .bouton { text-align: center; }
  .intro-actions .lien-doux, .final-actions .lien-doux { align-self: center; }
  .etapes-cta .bouton { display: block; text-align: center; }
}

/* Galerie en photos (01/10/2026) : mises en scène WebP de assets/galerie, même emprise que l'ancien dessin */
.carte img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 14px; border-radius: 6px; background: var(--accent-c); }
.carte.choisie img { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 860px) { .carte img { margin-bottom: 8px; border-radius: 4px; } }

/* Envoi des demandes et pages légales (02/10/2026) */
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cmd-confirmation, .sm-confirmation { color: var(--ok); padding: 14px 0; border-top: var(--filet); }
.cmd-confirmation b, .sm-confirmation b { display: block; font-family: var(--police-titre); font-size: 1.3rem; font-weight: 600; margin-bottom: 4px; }
.sur-mesure-form input[type=file] { display: block; margin-top: 6px; font-size: .9rem; color: var(--encre2); }
.sur-mesure-form input[type=file]::file-selector-button { font: inherit; font-size: .92rem; font-weight: 600; color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: var(--rayon-controle); padding: 10px 16px; min-height: 44px; margin: 0 12px 0 0; cursor: pointer; }
.sur-mesure-form input[type=file]::file-selector-button:hover { background: var(--accent-c); }
.pied-page { text-align: center; padding-block: 40px 48px; border-top: var(--filet); color: var(--encre2); font-size: .92rem; }
.pied-page p { margin: 0 0 8px; }
.pied-marque-ligne { font-family: var(--police-titre); font-size: 1.15rem; color: var(--encre); display: inline-flex; align-items: center; gap: 8px; letter-spacing: .04em; }
.pied-marque-ligne .pied-marque { width: 22px; height: 22px; color: var(--accent); }
.pied-contact a, .pied-liens a { color: var(--encre2); text-underline-offset: 3px; display: inline-block; padding-block: 10px; }
.pied-contact a:hover, .pied-liens a:hover { color: var(--accent); }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 14px; }
.legal { max-width: 68ch; margin: 0 auto; padding-block: 48px 72px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 .3em; }
.legal .chapo { color: var(--encre2); font-size: 1.1rem; margin: 0 0 32px; }
.legal h2 { font-size: 1.45rem; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--encre); line-height: 1.65; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0; }
.legal dt { color: var(--encre2); }
.legal dd { margin: 0; }
.legal .note { color: var(--encre2); font-size: .88rem; margin-top: 40px; }
.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal a.bouton, .legal a.bouton:hover { color: #fff; } /* page 404 : le bouton reste lisible malgré .legal a (audit U-B4) */
.legal .contacts a, .legal dd a { display: inline-block; padding-block: 9px; } /* liens de contact en blocs de 44 px (U-D8) */
@media (max-width: 600px) { .legal dl { grid-template-columns: 1fr; gap: 2px; } .legal dt { margin-top: 10px; } }

/* Corrections d'audit du 02/10/2026 (Page) */
main [id]:not(#personnalisation), #commande-mobile { scroll-margin-top: calc(var(--entete) + 16px); } /* ancres sous l'en-tête collant (U-I8) */
.intro-note { margin: 10px 0 0; color: var(--encre2); font-size: .85rem; } /* ligne discrète sous les garanties */
.atelier { max-width: 62ch; margin: 44px auto 0; text-align: center; color: var(--encre2); line-height: 1.65; } /* bloc confiance, trois lignes, sans carte (V-B2) */
.cmd-confirmation a, .sm-confirmation a { color: var(--accent); text-underline-offset: 3px; display: inline-block; padding-block: 8px; margin-block: -4px; }
.cmd-confirmation p, .sm-confirmation p { color: var(--encre2); margin: 0 0 6px; }
@media (max-width: 860px) { .atelier { margin-top: 32px; text-align: left; } }
/* prix sur les cartes de modèles : le même que dans les données structurées (unitaire HT pour 100 pièces) */
.carte p.carte-prix { color: var(--encre); margin-top: 2px; }
.carte p.carte-prix b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* lien d'évitement (clavier) et message sans JavaScript */
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 10px 14px; border-radius: var(--rayon-controle); text-decoration: none; }
.evitement:focus { top: 12px; }
.noscript { margin: 0; padding: 14px 16px; background: var(--accent-c); color: var(--encre); text-align: center; }
.liste-modeles { margin-top: 28px; border-top: var(--filet); padding-top: 14px; }
.liste-modeles summary { cursor: pointer; color: var(--accent); font-size: .92rem; }
.liste-modeles p { margin: 10px 0 0; font-size: .88rem; line-height: 1.6; color: var(--encre2); }
.liste-modeles a { color: var(--encre2); }
.guide-table td:first-child { color: var(--encre2); }
/* héros (03/10/2026) : titre plus compact, éventail plus présent */
.intro h1 { font-size: clamp(2.3rem, 4.1vw, 3.55rem); margin-bottom: .45em; }
.intro h1 span { font-size: .78em; margin-top: .14em; }
.intro .chapeau { max-width: 50ch; font-size: 1.04rem; }
@media (min-width: 861px) {
  .intro-in { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); padding-block: 56px 64px; }
  .intro-visuel { transform: translateX(2%) scale(1.06); transform-origin: 50% 60%; }
}
/* le jour J (03/10/2026) : un petit texte à lire, sans cadre, sous le paragraphe de marque */
.jour-j { max-width: 62ch; margin: 36px auto 0; text-align: center; }
.jour-j h3 { margin: 0 0 10px; font-family: var(--police-titre); font-size: 1.45rem; font-weight: 500; }
.jour-j p { margin: 0; color: var(--encre2); line-height: 1.7; }
@media (max-width: 860px) { .jour-j { text-align: left; margin-top: 28px; } }

/* héros mobile (03/10/2026) : une photo composée pour l'écran étroit (4:3, fleurs en haut à droite, ruban en bas à gauche),
   l'éventail posé au centre, légende discrète ; puis titre, phrase et bouton visibles sans défiler */
@media (max-width: 860px) {
  .intro { --photo: calc(100vw * .757); }
  .intro-in { gap: 16px; padding-block: 0 30px; }
  .intro-fond img { height: var(--photo); object-position: 50% 50%; }
  .intro::before { background: linear-gradient(180deg, rgba(250, 246, 239, 0) 0, rgba(250, 246, 239, 0) calc(var(--photo) - 36px), var(--fond) var(--photo)); }
  .intro-visuel { order: -1; margin: 0 -16px; min-height: var(--photo); height: var(--photo); padding: 7vw 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; transform: none; }
  .intro-visuel svg { width: 80%; max-width: 420px; filter: drop-shadow(0 14px 16px rgba(42, 36, 32, .18)) drop-shadow(0 2px 4px rgba(42, 36, 32, .1)); }
  .intro-couple { margin-top: 6px; font-size: .86rem; color: var(--encre2); }
  .kicker { font-size: .7rem; letter-spacing: .12em; margin: 4px 0 10px; white-space: nowrap; }
  .kicker-option { display: none; }
  .intro h1 { font-size: clamp(1.95rem, 8.4vw, 2.5rem); line-height: 1.06; margin-bottom: .35em; }
  .intro h1 span { font-size: .74em; margin-top: .18em; }
  .intro .chapeau { font-size: 1rem; line-height: 1.55; margin-bottom: 20px; }
  .intro-actions { margin-bottom: 22px; gap: 12px; }
  .intro-sur-mesure { font-size: .9rem; }
}
@media (max-width: 860px) { .intro-couple { text-shadow: 0 0 6px var(--fond), 0 0 12px var(--fond); } }
@media (max-width: 860px) { .intro-couple { max-width: 100%; padding-inline: 20px; box-sizing: border-box; font-size: .82rem; line-height: 1.35; } }

/* héros mobile, mise en page de faire-part (03/10/2026) : tout centré, l'éventail du logo en ornement entre deux filets */
.ornement { display: none; }
@media (max-width: 860px) {
  .intro-texte { text-align: center; }
  .kicker { margin: 6px 0 12px; }
  .intro h1 { margin-bottom: .2em; text-wrap: balance; }
  .intro h1 span { margin-top: .22em; }
  .ornement { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px auto 14px; color: var(--accent); }
  .ornement::before, .ornement::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .45; }
  .ornement svg { width: 22px; height: 22px; opacity: .85; }
  .intro .chapeau { font-family: var(--police-titre); font-style: italic; font-size: 1.22rem; line-height: 1.45; color: var(--encre); max-width: 30ch; margin: 0 auto 22px; text-wrap: pretty; }
  .intro-actions { align-items: center; }
  .intro-actions .bouton { align-self: stretch; }
  .intro-sur-mesure { font-size: .88rem; max-width: 32ch; margin-inline: auto; }
  .garanties { justify-content: center; font-size: .82rem; gap: 4px 0; padding-top: 14px; margin-top: 18px; }
  .garanties li + li::before { margin-inline: 10px; }
  .intro-note { font-size: .78rem; max-width: 34ch; margin: 10px auto 0; }
}
@media (max-width: 860px) {
  .garanties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; }
  .garanties li { justify-content: center; text-align: center; padding: 2px 6px; line-height: 1.35; }
  .garanties li + li { border-left: 1px solid var(--ligne); }
  .garanties li + li::before { content: none; }
}
@media (max-width: 860px) { .garanties li { display: block; } }
.intro-fond img { background-color: #eee7dc; }  /* teinte du papier pendant le chargement de la photo */

/* Où livrons-nous (03/10/2026) : trois zones, la langue du site d'abord, sans cadre */
.livraison-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 8px; }
.livraison-zone { border-top: var(--filet); padding-top: 18px; }
.livraison-zone h3 { margin: 0 0 10px; font-family: var(--police-titre); font-size: 1.4rem; font-weight: 500; }
.livraison-zone p { margin: 0 0 10px; color: var(--encre2); line-height: 1.6; }
.livraison-zone p b { color: var(--encre); font-weight: 600; }
.livraison .bloc-renvoi { text-align: center; margin-top: 22px; }
@media (max-width: 860px) { .livraison-grille { grid-template-columns: 1fr; gap: 22px; } }

.livraison-pays { max-width: 68ch; margin: 0 auto; text-align: center; color: var(--encre2); line-height: 1.7; }