/* ==========================================================================
   Ribambelle d'amour — V2 « Carnet de mariage »
   Feuille de style unique, pensée d'abord pour le téléphone.

   Sommaire
   1.  Polices (hébergées sur le site, aucun appel externe)
   2.  Couleurs, tailles, espacements  ← pour changer l'ambiance, c'est ici
   3.  Base et typographie
   4.  Boutons et liens
   5.  En-tête, menu, barre de contact mobile
   6.  Accueil : hero, bandeau, manifeste
   7.  Blocs de l'offre (bento), étapes, réassurance, avis
   8.  FAQ
   9.  Contact et formulaire
   10. Pages internes : tarifs, options, animations, simulateur, Box
   11. Pied de page
   12. Apparitions au scroll, survols, mouvement réduit
   ========================================================================== */

/* 1. POLICES ------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italique.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* 2. VARIABLES ----------------------------------------------------------- */
:root {
  /* Palette (refonte oct. 2026) : rose poudré pour les fonds, mauve pour les
     titres, les boutons et les textes forts, sauge en touche fine uniquement.
     Les noms des variables sont conservés pour ne rien casser ailleurs. */
  --lin:          #FBEDEF;  /* rose poudré : fond général */
  --creme:        #FFF9FA;  /* cartes, formulaire */
  --sable:        #F6E1E5;  /* sections alternées */
  --argile:       #E2B8C0;  /* touches décoratives */
  --argile-pale:  #F8E4E8;  /* encarts clairs */
  --argile-fonce: #9A5664;  /* mots en italique (contraste 4,8:1 sur le rose) */
  --encre:        #7E4A57;  /* mauve : titres, boutons, sections foncées */
  --encre-2:      #683A46;  /* survol des boutons */
  --texte:        #4F3439;  /* texte courant (contraste 9:1 sur le rose) */
  --doux:         #765A60;  /* textes secondaires (contraste 5:1) */
  --sauge:        #6C8C73;  /* touche fine : puces, filets, icônes */
  --sauge-fonce:  #4A6650;  /* sauge lisible en petit (surtitres, focus) */
  --sauge-claire: #C9DCCD;  /* sauge sur fond mauve */
  --sur-encre:    #FBEDEF;  /* texte sur fond mauve */
  --sur-encre-2:  #F0D9DE;  /* texte secondaire sur fond mauve */
  --bordure:      #E6CBD1;  /* contour des champs */
  --ligne:        rgba(126, 74, 87, .16);
  --erreur:       #A13D2D;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter:  clamp(20px, 5vw, 48px);
  --largeur: 1200px;
  --sec:     clamp(56px, 8vw, 104px);   /* espace haut/bas des sections */
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --ombre: 0 1px 2px rgba(126, 74, 87, .05), 0 18px 40px -24px rgba(126, 74, 87, .32);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --entete-h: 68px;
}

/* 3. BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete-h) + 16px);
  interpolate-size: allow-keywords; /* ouverture douce des FAQ (navigateurs récents) */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--lin);
  color: var(--texte);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--sauge-fonce);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: .7em 1.1em; border-radius: 999px;
  background: var(--encre); color: var(--lin); text-decoration: none; font-weight: 600;
}
.lien-evitement:focus { top: 12px; }

/* Typographie */
h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 380;
  color: var(--encre);
  letter-spacing: -.018em;
  margin: 0 0 .45em;
}
h1 { font-size: clamp(2.45rem, 1.5rem + 4.6vw, 5rem); line-height: 1.03; }
h2 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.35rem); line-height: 1.07; }
h3 { font-size: clamp(1.28rem, 1.12rem + .6vw, 1.55rem); line-height: 1.2; letter-spacing: -.01em; font-weight: 420; }
h1 em, h2 em, .serif em { font-style: italic; font-weight: 340; color: var(--argile-fonce); }

.surtitre {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 1.1rem;
  font: 650 .76rem/1.2 var(--sans);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--sauge-fonce);
}
.surtitre::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sauge);
}
.lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem); line-height: 1.55; color: var(--texte); }
.note { font-size: .92rem; color: var(--doux); }
.petit { font-size: .92rem; }

.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Mise en page */
.wrap { width: min(100% - 2 * var(--gutter), var(--largeur)); margin-inline: auto; }
.wrap--etroit { max-width: 780px; }
.section { padding-block: var(--sec); }
.section--sable { background: var(--sable); }
.section--creme { background: var(--creme); }
.section--encre { background: var(--encre); color: var(--sur-encre); }
.section--encre h2, .section--encre h3 { color: var(--lin); }
.section--encre h2 em { color: var(--argile); }
.section--encre .surtitre { color: var(--sauge-claire); }
.section--encre .surtitre::before { background: var(--sauge-claire); }
/* Sur fond sombre, .tete p doit rester clair : sans cette ligne, le texte
   sombre de .tete se retrouve sur fond encre et devient illisible. */
.section--encre .tete p { color: var(--sur-encre); }
.section--serre { padding-block: clamp(40px, 5vw, 64px); }

.tete { max-width: 44rem; margin-bottom: clamp(28px, 4vw, 52px); }
.tete--centre { margin-inline: auto; text-align: center; }
.tete--centre .surtitre { justify-content: center; }
.tete p { color: var(--texte); }

/* Rangée de boutons après une section clé, avec une ligne de réassurance */
.relance {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin-top: clamp(28px, 4vw, 44px);
}
.relance--centre { justify-content: center; text-align: center; }
.relance__note { display: inline-flex; align-items: center; gap: .5em; font-size: .92rem; color: var(--doux); margin: 0; }
.relance__note .ico { color: var(--sauge); }

/* 4. BOUTONS ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .8em 1.55em;
  border: 0; border-radius: 999px;
  background: var(--encre); color: var(--lin);
  font: 620 1rem/1.2 var(--sans); letter-spacing: .01em;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.btn:hover { background: var(--encre-2); }
.btn:active { transform: scale(.98); }
.btn .fleche { width: 1.1em; height: 1.1em; transition: transform .35s var(--ease); }
.btn:hover .fleche { transform: translateX(4px); }
.btn--contour { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--contour:hover { background: var(--encre); color: var(--lin); }
/* Bouton secondaire (WhatsApp…) : contour mauve, la sauge reste une touche fine */
.btn--sauge { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.btn--sauge .ico { color: var(--sauge-fonce); }
.btn--sauge:hover { background: var(--encre); color: var(--lin); }
.btn--sauge:hover .ico { color: inherit; }
.section--encre .btn--sauge, .menu-mobile .btn--sauge { box-shadow: inset 0 0 0 1.5px currentColor; }
.section--encre .btn--sauge { color: var(--lin); }
.section--encre .btn--sauge .ico { color: var(--sauge-claire); }
.section--encre .btn--sauge:hover { background: var(--lin); color: var(--encre); }
.btn--clair { background: var(--lin); color: var(--encre); }
.btn--clair:hover { background: #fff; }
.btn--contour-clair { background: transparent; color: var(--lin); box-shadow: inset 0 0 0 1.5px rgba(251, 237, 239, .6); }
.btn--contour-clair:hover { background: var(--lin); color: var(--encre); }
.btn--petit { min-height: 44px; padding: .6em 1.2em; font-size: .94rem; }
.btn--bloc { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

.lien {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 620; color: var(--encre); text-decoration: none;
  background: linear-gradient(var(--sauge), var(--sauge)) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: 3px;
  transition: background-size .35s var(--ease), color .2s;
}
.lien:hover { background-size: 100% 3px; color: var(--sauge-fonce); }
.lien .fleche { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
.lien:hover .fleche { transform: translateX(3px); }
.section--encre .lien { color: var(--lin); }

/* 5. EN-TÊTE ------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 237, 239, .9);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.entete.est-defile { border-bottom-color: var(--ligne); }
.entete__in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--entete-h);
}
.marque { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--encre); }
.marque img { width: 32px; height: auto; }
.marque span { font-family: var(--serif); font-size: 1.22rem; letter-spacing: -.01em; white-space: nowrap; }
.marque em { font-style: italic; color: var(--argile-fonce); }

.nav__liste { display: none; }
.entete__cta { display: none; }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 48px; height: 48px; margin-right: -10px;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.burger span { width: 22px; height: 1.6px; background: var(--encre); border-radius: 2px; transition: transform .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.8px) rotate(-45deg); }

/* Menu plein écran (mobile) */
.menu-mobile {
  position: fixed; inset: var(--entete-h) 0 0 0; z-index: 39;
  display: flex; flex-direction: column; gap: 28px;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--lin);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.menu-mobile.est-ouvert { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.menu-mobile ul { display: grid; gap: 4px; }
.menu-mobile ul a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--ligne);
  font-family: var(--serif); font-size: 1.9rem; color: var(--encre); text-decoration: none;
}
.menu-mobile ul a[aria-current="page"] { font-style: italic; color: var(--argile-fonce); }
.menu-mobile__bas { margin-top: auto; display: grid; gap: 12px; }
.menu-mobile__bas p { font-size: .95rem; color: var(--doux); margin: 4px 0 0; }
body.menu-ouvert { overflow: hidden; }

@media (min-width: 960px) {
  .burger, .menu-mobile { display: none; }
  .nav__liste { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
  .nav__liste a {
    font-size: .96rem; font-weight: 520; color: var(--encre); text-decoration: none;
    padding: 6px 0;
    background: linear-gradient(var(--sauge), var(--sauge)) 0 100% / 0 1.5px no-repeat;
    transition: background-size .35s var(--ease);
  }
  .nav__liste a:hover, .nav__liste a[aria-current="page"] { background-size: 100% 1.5px; }
  .entete__cta { display: inline-flex; }
}

/* Barre de contact collée en bas de l'écran (mobile uniquement) */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 237, 239, .95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--ligne);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.barre-mobile.est-visible { transform: none; }
.barre-mobile .btn { flex: 1; }
.barre-mobile__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  text-decoration: none;
}
.barre-mobile__ico--wa { box-shadow: inset 0 0 0 1.5px var(--sauge); color: var(--sauge-fonce); }
.barre-mobile__ico--tel { box-shadow: inset 0 0 0 1.5px var(--encre); color: var(--encre); }
.barre-mobile__ico .ico { width: 22px; height: 22px; }
@media (min-width: 960px) { .barre-mobile { display: none; } }

/* 6. ACCUEIL ------------------------------------------------------------- */
.hero { padding: clamp(16px, 3vw, 48px) 0 clamp(40px, 6vw, 88px); }
.hero__grille { display: grid; gap: 30px; align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero .lead { max-width: 33rem; margin-bottom: 1.5rem; }

/* Mini-formulaire « Vérifier ma date » */
.verif { display: grid; gap: 10px; max-width: 34rem; }
.verif__label { font-size: .88rem; font-weight: 620; color: var(--encre); }
.verif__champ {
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 16px;
  background: var(--creme); border: 1px solid var(--bordure); border-radius: 16px;
}
.verif__champ .ico { color: var(--sauge-fonce); }
.verif__champ input {
  flex: 1; min-width: 0; height: 52px;
  border: 0; background: transparent; font-size: 1rem; color: var(--encre);
}
.verif__champ input:focus { outline: none; }
.verif__champ:focus-within { border-color: var(--sauge-fonce); box-shadow: 0 0 0 3px rgba(74, 102, 80, .35); }
@media (min-width: 520px) {
  .verif__ligne {
    display: flex; gap: 6px; padding: 6px;
    background: var(--creme); border: 1px solid var(--bordure); border-radius: 999px;
  }
  .verif__ligne:focus-within { border-color: var(--sauge-fonce); box-shadow: 0 0 0 3px rgba(74, 102, 80, .35); }
  .verif__champ { flex: 1; min-height: 48px; background: none; border: 0; box-shadow: none !important; }
  .verif__champ input { height: 48px; }
}
@media (max-width: 519.98px) {
  .verif__ligne { display: grid; gap: 10px; }
}

.rassure {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 1.2rem; font-size: .92rem; color: var(--doux);
}
.rassure li { display: inline-flex; align-items: center; gap: .45em; }
.rassure .ico { color: var(--sauge); width: 1.1em; height: 1.1em; }

.hero__visuel { position: relative; }
.arche {
  position: relative; overflow: hidden;
  border-radius: 999px 999px var(--r-m) var(--r-m);
  background: var(--sable);
  aspect-ratio: 1 / 1.02;
}
/* CADRAGE DE LA PHOTO DU HAUT DE PAGE
   La photo est plus large que l'arche : le navigateur en coupe les côtés.
   Le premier pourcentage choisit QUELLE PARTIE de la largeur reste visible.
   0 % = bord gauche, 100 % = bord droit.
   Réglé à 54 % pour centrer sur les enfants et laisser l'adulte de droite
   hors du cadre. Si vous changez de photo, réajustez cette valeur. */
.arche img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 60%; }
.pastille {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 249, 250, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 16px; box-shadow: var(--ombre);
  font-size: .9rem; line-height: 1.35; color: var(--texte);
}
.pastille strong { display: block; color: var(--encre); font-weight: 650; }
.pastille__rond {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--sauge-fonce); color: #fff;
}
.pastille__rond .ico { width: 22px; height: 22px; }

@media (min-width: 900px) {
  .hero__grille { grid-template-columns: 1.08fr .92fr; gap: clamp(40px, 5vw, 80px); }
  .arche { aspect-ratio: 4 / 5; }
  .pastille { left: -28px; right: auto; bottom: 36px; max-width: 290px; }
}

/* Bandeau de réassurance */
.bandeau { border-block: 1px solid var(--ligne); background: var(--lin); }
.bandeau ul {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px;
  padding-block: 22px;
}
.bandeau li { display: flex; align-items: flex-start; gap: .6em; font-size: .92rem; line-height: 1.35; color: var(--encre); font-weight: 520; }
.bandeau .ico { color: var(--sauge); margin-top: .05em; }
@media (min-width: 900px) {
  .bandeau ul { grid-template-columns: repeat(4, auto); justify-content: space-between; }
}

/* Manifeste (l'émotion) */
.manifeste { display: grid; gap: clamp(24px, 4vw, 56px); }
.manifeste__citation {
  font-family: var(--serif); font-weight: 340;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem); line-height: 1.18; letter-spacing: -.015em;
  color: var(--encre);
}
.manifeste__citation em { font-style: italic; color: var(--argile-fonce); }
.manifeste__signature { display: flex; align-items: center; gap: 14px; margin-top: 1.4rem; font-size: .95rem; color: var(--doux); }
.manifeste__signature img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.manifeste__signature strong { color: var(--encre); display: block; font-weight: 620; }
.manifeste__texte { align-self: end; max-width: 30rem; }
@media (min-width: 900px) {
  .manifeste { grid-template-columns: 1.5fr 1fr; align-items: end; }
}

/* 7. BENTO DE L'OFFRE ---------------------------------------------------- */
.bento { display: grid; gap: 14px; }
.tuile {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--creme); border-radius: var(--r-l);
  border: 1px solid rgba(126, 74, 87, .08);
}
.tuile h3 { margin: 0; }
.tuile p { margin: 0; color: var(--texte); }
.tuile__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #E6EDE6; color: var(--sauge-fonce); margin-bottom: 6px;
}
.tuile__ico .ico { width: 22px; height: 22px; }
.tuile--encre { background: var(--encre); color: var(--sur-encre); border: 0; }
.tuile--encre h3 { color: var(--lin); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.1; }
.tuile--encre h3 em { font-style: italic; color: var(--argile); font-weight: 340; }
.tuile--encre p { color: var(--sur-encre); }
.tuile--prix { background: var(--argile-pale); border: 0; }
.tuile--prix .prix { font-family: var(--serif); font-size: clamp(3rem, 2.4rem + 2.4vw, 4.4rem); line-height: 1; color: var(--encre); letter-spacing: -.03em; margin: 6px 0 4px; }
.tuile--prix .prix small { font-family: var(--sans); font-size: 1rem; letter-spacing: 0; color: var(--texte); }
.tuile__bas { margin-top: auto; padding-top: 12px; }
.puces { display: grid; gap: 8px; margin-top: 8px; }
.puces li { display: flex; gap: .6em; align-items: flex-start; }
.puces .ico { color: var(--sauge); margin-top: .18em; width: 1.1em; height: 1.1em; }
.tuile--encre .puces .ico { color: var(--sauge-claire); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.etiquettes li {
  padding: .38em .85em; border-radius: 999px;
  background: var(--lin); border: 1px solid var(--ligne);
  font-size: .9rem; color: var(--encre);
}

@media (min-width: 640px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .tuile--large { grid-column: span 2; }
}
@media (min-width: 1040px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "a a b c"
      "a a d c"
      "e e e f";
  }
  .bento > :nth-child(1) { grid-area: a; }
  .bento > :nth-child(2) { grid-area: b; }
  .bento > :nth-child(3) { grid-area: c; }
  .bento > :nth-child(4) { grid-area: d; }
  .bento > :nth-child(5) { grid-area: e; }
  .bento > :nth-child(6) { grid-area: f; }
  .tuile--large { grid-column: auto; }
}

/* Étapes (déroulé) */
.etapes { display: grid; gap: 0; counter-reset: etape; }
.etape {
  position: relative; counter-increment: etape;
  display: grid; grid-template-columns: 56px 1fr; gap: 0 18px;
  padding-bottom: 28px;
}
.etape::before {
  content: counter(etape, decimal-leading-zero);
  grid-row: span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--creme); border: 1px solid var(--ligne);
  font-family: var(--serif); font-size: 1.2rem; color: var(--argile-fonce);
  position: relative; z-index: 1;
}
.etape::after {
  content: ""; position: absolute; left: 28px; top: 56px; bottom: 0;
  width: 1px; background: var(--ligne);
}
.etape:last-child { padding-bottom: 0; }
.etape:last-child::after { display: none; }
.etape h3 { margin: 12px 0 6px; font-size: clamp(1.2rem, 1.1rem + .5vw, 1.4rem); }
.etape p { margin: 0; color: var(--texte); font-size: 1rem; }
.section--sable .etape::before { background: var(--lin); }

@media (min-width: 900px) {
  .etapes { grid-template-columns: repeat(var(--nb, 4), 1fr); gap: 24px; }
  .etape { grid-template-columns: 1fr; padding-bottom: 0; }
  .etape::before { grid-row: auto; }
  .etape::after { left: 64px; right: -24px; top: 28px; bottom: auto; width: auto; height: 1px; }
  .etape h3 { margin-top: 20px; }
}

/* Réassurance : Zélie + garanties */
.confiance { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
.confiance__photo { position: relative; max-width: 460px; }
.confiance__photo .arche { aspect-ratio: 4 / 5; }
.confiance__photo .arche img { object-position: 50% 30%; }
.confiance__photo figcaption {
  position: absolute; right: -8px; bottom: 28px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--encre); color: var(--lin);
  font-size: .88rem; font-weight: 560; box-shadow: var(--ombre);
}
.citation {
  margin: 1.4rem 0; padding-left: 18px; border-left: 2px solid var(--sauge);
  font-family: var(--serif); font-style: italic; font-weight: 340;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); line-height: 1.45; color: var(--encre);
}
.garanties { display: grid; gap: 10px; margin-top: 1.6rem; }
.garantie {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--r-m);
  background: var(--lin); border: 1px solid var(--ligne);
}
.section--creme .garantie, .section--lin .garantie { background: var(--creme); }
.garantie .ico { color: var(--sauge-fonce); width: 24px; height: 24px; margin-top: 2px; }
.garantie strong { display: block; color: var(--encre); font-weight: 650; line-height: 1.3; }
.garantie span { font-size: .93rem; color: var(--doux); line-height: 1.45; display: block; margin-top: 2px; }
@media (min-width: 640px) { .garanties { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .confiance { grid-template-columns: .85fr 1.15fr; }
  .confiance--inverse > :first-child { order: 2; }
}

/* Avis */
.avis { max-width: 52rem; margin-inline: auto; text-align: center; }
.avis__guillemet { font-family: var(--serif); font-size: 5rem; line-height: .6; color: var(--argile); margin-bottom: 8px; }
.avis blockquote p {
  font-family: var(--serif); font-weight: 340;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); line-height: 1.38; color: var(--encre);
}
.avis__auteur { margin-top: 1.4rem; font-weight: 650; color: var(--encre); }
.avis__auteur span { display: block; font-weight: 400; font-size: .92rem; color: var(--doux); }

/* 8. FAQ ----------------------------------------------------------------- */
.faq-grille { display: grid; gap: clamp(24px, 4vw, 64px); }
@media (min-width: 900px) {
  .faq-grille { grid-template-columns: .8fr 1.2fr; align-items: start; }
  .faq-grille > :first-child { position: sticky; top: calc(var(--entete-h) + 32px); }
}
.faq details { border-top: 1px solid var(--ligne); }
.faq details:last-child { border-bottom: 1px solid var(--ligne); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem); line-height: 1.3; color: var(--encre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--ligne);
  background:
    linear-gradient(var(--encre), var(--encre)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--encre), var(--encre)) center / 1.5px 12px no-repeat;
  transition: transform .35s var(--ease), background-color .25s;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--creme); }
.faq summary:hover::after { background-color: var(--creme); }
.faq__reponse { padding: 0 48px 22px 0; color: var(--texte); }
.faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .4s var(--ease), content-visibility .4s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* 9. CONTACT ------------------------------------------------------------- */
.contact { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: .9fr 1.1fr; } }
.contact__points { display: grid; gap: 12px; margin: 1.6rem 0; }
.contact__points li { display: flex; gap: .7em; align-items: flex-start; }
.contact__points .ico { color: var(--sauge-claire); margin-top: .2em; }
.section--encre .contact__points strong { color: var(--lin); }
.contact__direct { display: flex; flex-wrap: wrap; gap: 10px; }
.contact__zone { margin-top: 1.4rem; font-size: .93rem; opacity: .85; }

/* Liste de coordonnées (page contact) */
.coordonnees { display: grid; gap: 10px; margin-top: 1.4rem; }
.coordonnees a, .coordonnees div {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--r-m);
  background: var(--creme); border: 1px solid var(--ligne);
  color: var(--encre); text-decoration: none; font-weight: 560;
  transition: border-color .25s, transform .25s var(--ease);
  overflow-wrap: anywhere;
}
.coordonnees a:hover { border-color: var(--sauge); }
.coordonnees .ico { color: var(--sauge-fonce); width: 22px; height: 22px; }
.coordonnees small { display: block; font-weight: 400; color: var(--doux); font-size: .86rem; }

/* Formulaire */
.formulaire {
  padding: clamp(22px, 3.4vw, 40px);
  background: var(--creme); color: var(--texte);
  border-radius: var(--r-l); box-shadow: var(--ombre);
}
.formulaire h2, .formulaire h3 { color: var(--encre); }
.formulaire__titre { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); margin-bottom: .3em; }
.formulaire__intro { font-size: .95rem; color: var(--doux); margin-bottom: 1.4rem; }
.champs { display: grid; gap: 16px; }
.champs-2 { display: grid; gap: 16px; }
@media (min-width: 560px) { .champs-2 { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: 6px; }
.champ label, .champ .libelle { font-size: .9rem; font-weight: 640; color: var(--encre); }
.champ label small, .champ .libelle small { font-size: inherit; font-weight: 400; color: var(--doux); }
.champ input, .champ textarea, .champ select {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font-size: 1rem; /* 16 px minimum : évite le zoom automatique sur iPhone */
  background: #fff; color: var(--encre);
  border: 1px solid var(--bordure); border-radius: 14px;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.champ input[type="date"] { min-height: 52px; line-height: 1.2; }
.champ textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--sauge-fonce); box-shadow: 0 0 0 3px rgba(74, 102, 80, .35);
}
.champ input::placeholder, .champ textarea::placeholder { color: #A08A8F; }
.champ [aria-invalid="true"] { border-color: var(--erreur); }
.champ__aide { font-size: .84rem; color: var(--doux); margin: 0; }
.champ__erreur { font-size: .86rem; color: var(--erreur); font-weight: 560; margin: 0; }
.champ__erreur:empty { display: none; }

/* Choix du type de demande (pastilles) */
.choix { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.choix legend { padding: 0; margin-bottom: 8px; font-size: .9rem; font-weight: 640; color: var(--encre); }
.choix__liste { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5em 1.1em;
  border-radius: 999px; border: 1px solid var(--bordure); background: #fff;
  font-size: .95rem; font-weight: 560; color: var(--encre); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.choix input:checked + label { background: var(--encre); color: var(--lin); border-color: var(--encre); }
.choix input:focus-visible + label { outline: 2px solid var(--sauge-fonce); outline-offset: 2px; }

/* « Ajouter un message » */
.plus summary {
  display: inline-flex; align-items: center; gap: .5em;
  cursor: pointer; list-style: none;
  font-weight: 620; color: var(--sauge-fonce); font-size: .95rem;
  padding: 6px 0;
}
.plus summary::-webkit-details-marker { display: none; }
.plus summary::before { content: "+"; font-size: 1.2em; line-height: 1; }
.plus[open] summary::before { content: "–"; }
.plus .champ { margin-top: 8px; }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__envoi { margin-top: 20px; }
.formulaire__legal { font-size: .82rem; color: var(--doux); margin: 14px 0 0; line-height: 1.5; }
.formulaire__legal a { color: var(--doux); }
.retour {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--r-m);
  background: #E6EDE6; color: var(--encre); font-size: .96rem;
}
.retour.est-erreur { background: #F6E3DE; }
.retour strong { display: block; margin-bottom: 2px; }
.retour a { font-weight: 620; }
.retour:focus { outline: none; }

/* 10. PAGES INTERNES ----------------------------------------------------- */
.page-tete { padding: clamp(18px, 3vw, 40px) 0 clamp(40px, 6vw, 80px); }
.fil { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(20px, 3vw, 36px); font-size: .86rem; color: var(--doux); }
.fil li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.fil a { color: var(--doux); text-decoration: none; }
.fil a:hover { color: var(--encre); text-decoration: underline; }
.page-tete__grille { display: grid; gap: 32px; align-items: end; }
.page-tete .lead { max-width: 38rem; }
.page-tete__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 1.6rem; }
.page-tete__pastille {
  display: inline-flex; flex-direction: column; justify-self: start;
  padding: 18px 24px; border-radius: var(--r-l); background: var(--argile-pale);
}
.page-tete__pastille .serif { font-size: 2.6rem; line-height: 1; margin: 0; }
.page-tete__pastille span { font-size: .92rem; color: var(--texte); }
@media (min-width: 900px) {
  .page-tete__grille { grid-template-columns: 1.6fr .6fr; }
  .page-tete__pastille { justify-self: end; }
}

/* Piliers (page garde) */
.piliers { display: grid; gap: 14px; }
@media (min-width: 900px) { .piliers { grid-template-columns: repeat(3, 1fr); } }

/* Tarif */
.tarif { display: grid; gap: 14px; }
@media (min-width: 900px) { .tarif { grid-template-columns: 1fr 1fr; } }
.tarif__carte { border-radius: var(--r-l); padding: clamp(26px, 3.4vw, 42px); }
.tarif__carte--encre { background: var(--encre); color: var(--sur-encre); }
.tarif__carte--encre h3 { color: var(--lin); }
.tarif__prix { font-family: var(--serif); font-size: clamp(3.6rem, 2.8rem + 3vw, 5.4rem); line-height: 1; color: var(--lin); letter-spacing: -.035em; margin: 10px 0 12px; }
.tarif__prix small { font-family: var(--sans); font-size: 1.05rem; letter-spacing: 0; color: var(--sur-encre); }
.tarif__carte--creme { background: var(--creme); border: 1px solid var(--ligne); }
.tarif__carte hr { border: 0; border-top: 1px solid rgba(251, 237, 239, .18); margin: 18px 0; }

/* Options et animations en cartes */
.cartes-prix { display: grid; gap: 14px; }
@media (min-width: 700px) { .cartes-prix { grid-template-columns: 1fr 1fr; } }
.carte-prix {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(22px, 3vw, 30px); border-radius: var(--r-l);
  background: var(--creme); border: 1px solid var(--ligne);
}
.carte-prix__haut { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.carte-prix h3 { margin: 0; }
.carte-prix__prix { font-family: var(--serif); font-size: 1.6rem; color: var(--encre); white-space: nowrap; }
.carte-prix__prix small { font-family: var(--sans); font-size: .82rem; color: var(--doux); }
.carte-prix__meta { font-size: .86rem; font-weight: 620; color: var(--sauge-fonce); letter-spacing: .02em; }
.carte-prix p { margin: 0; }

/* Simulateur */
.simulateur { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) {
  .simulateur { grid-template-columns: 1.2fr .8fr; gap: 24px; }
  .resultat { position: sticky; top: calc(var(--entete-h) + 24px); }
}
.simulateur__saisie { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-l); background: var(--creme); border: 1px solid var(--ligne); }
.simulateur fieldset { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.simulateur legend { font-family: var(--serif); font-size: 1.2rem; color: var(--encre); margin-bottom: 10px; padding: 0; }
.cases { display: grid; gap: 8px; }
.case {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--bordure);
  cursor: pointer;
}
.case input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sauge-fonce); flex: none; }
.case label { cursor: pointer; font-size: .98rem; }
.resultat {
  padding: clamp(24px, 3vw, 34px); border-radius: var(--r-l);
  background: var(--encre); color: var(--sur-encre);
}
.resultat .surtitre { color: var(--sauge-claire); }
.resultat .surtitre::before { background: var(--sauge-claire); }
.resultat__total { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--lin); margin: 0 0 16px; letter-spacing: -.03em; }
.resultat ul { display: grid; gap: 8px; margin-bottom: 16px; font-size: .94rem; }
.resultat li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(251, 237, 239, .16); }
.resultat .note { color: var(--sur-encre-2); }
.resultat .btn { margin-top: 10px; }

/* Box Éveil */
.galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.galerie figure { overflow: hidden; border-radius: var(--r-m); background: var(--sable); aspect-ratio: 3 / 4; }
.galerie figure:first-child { border-radius: 999px 999px var(--r-m) var(--r-m); }
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.objets { display: grid; gap: 14px; }
@media (min-width: 640px) { .objets { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .objets { grid-template-columns: repeat(3, 1fr); } }
.objet { border-radius: var(--r-l); overflow: hidden; background: var(--creme); border: 1px solid var(--ligne); display: flex; flex-direction: column; }
.objet figure { aspect-ratio: 4 / 4.2; overflow: hidden; background: var(--sable); }
.objet figure img { width: 100%; height: 100%; object-fit: cover; }
.objet__texte { padding: 20px 22px 24px; }
.objet__texte h3 { margin-bottom: .3em; }
.objet__texte p { margin: 0; }
.objet__num { font-size: .8rem; font-weight: 650; letter-spacing: .14em; color: var(--sauge-fonce); text-transform: uppercase; margin-bottom: 6px; display: block; }
/* Le livre noir et blanc : motif graphique en attendant une photo */
.contraste {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 50% 50%, #1b1816 0 18%, transparent 18.5%),
    radial-gradient(circle at 50% 50%, #fff 0 30%, transparent 30.5%),
    repeating-linear-gradient(45deg, #1b1816 0 22px, #F7F3EE 22px 44px);
}
.objet--carnet { background: var(--sable); border: 0; padding: clamp(24px, 3vw, 32px); justify-content: center; }
@media (min-width: 1000px) { .objet--carnet { grid-column: span 1; } }

.prix-box { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .prix-box { grid-template-columns: 1.3fr .7fr; } }
.prix-box__carte { padding: clamp(26px, 3.4vw, 40px); border-radius: var(--r-l); background: var(--argile-pale); text-align: center; }
.prix-box__carte .serif { font-size: clamp(3.6rem, 3rem + 2.4vw, 5rem); line-height: 1; margin: 0 0 10px; letter-spacing: -.03em; }

/* Qui suis-je : photo complice */
.polaroid {
  max-width: 300px; padding: 12px 12px 16px; background: #fff; border-radius: 6px;
  box-shadow: var(--ombre); transform: rotate(-2.5deg);
}
.polaroid img { border-radius: 3px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; width: 100%; }
.polaroid figcaption { font-family: var(--serif); font-style: italic; text-align: center; margin-top: 10px; color: var(--encre); }

/* Texte légal */
.texte-legal h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); margin-top: 1.8em; }
.texte-legal a { color: var(--sauge-fonce); }

/* Page 404 */
.page-404 { text-align: center; padding-block: clamp(64px, 12vw, 140px); }
.page-404 img { width: 88px; margin: 0 auto 24px; }

/* Encart Box sur l'accueil */
.encart-box { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.encart-box__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.encart-box__photos figure { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 3 / 4; background: var(--sable); }
.encart-box__photos figure:first-child { border-radius: 999px 999px var(--r-m) var(--r-m); }
.encart-box__photos figure:last-child { margin-top: 36px; }
.encart-box__photos img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .encart-box { grid-template-columns: 1fr 1fr; } }

/* 10 bis. REFONTE OCT. 2026 : ACCUEIL « BIENTÔT », FORMULES, INSTAGRAM -- */

/* Hero : logo centré et annonce */
.annonce { padding: clamp(44px, 10vw, 128px) 0 clamp(52px, 10vw, 128px); text-align: center; }
.annonce__logo {
  display: grid; place-items: center;
  width: clamp(116px, 28vw, 160px); aspect-ratio: 1; margin: 0 auto clamp(28px, 4vw, 44px);
  border-radius: 50%; background: var(--creme);
  box-shadow: 0 0 0 1px var(--ligne), 0 0 0 12px rgba(255, 249, 250, .6), var(--ombre);
}
.annonce__logo img { width: 50%; height: auto; }
.annonce__avant {
  margin: 0 0 .3em;
  font-family: var(--serif); font-style: italic; font-weight: 340;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.2; color: var(--encre);
}
.annonce h1 { max-width: 13ch; margin: 0 auto; color: var(--encre); }
.annonce h1 em { color: var(--encre); }
.annonce__precision { max-width: 34rem; margin: 1.1rem auto 0; font-size: clamp(1rem, .95rem + .3vw, 1.12rem); line-height: 1.55; color: var(--texte); }
.annonce__precision strong { color: var(--encre); font-weight: 620; }
.formule .formule__note { font-size: .92rem; font-style: italic; color: var(--doux); }
.annonce__filet { width: 56px; height: 1.5px; margin: clamp(28px, 4vw, 40px) auto 0; border: 0; background: var(--sauge); }

/* Les trois formules */
.formules { display: grid; gap: 16px; }
@media (min-width: 820px) { .formules { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.formule {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: clamp(40px, 5vw, 56px) clamp(24px, 3vw, 34px) clamp(28px, 3.4vw, 38px);
  text-align: center;
  background: var(--creme); border: 1px solid var(--ligne);
  border-radius: 180px 180px var(--r-l) var(--r-l);
}
.formule::before { content: ""; width: 28px; height: 1.5px; margin-bottom: 6px; background: var(--sauge); }
.formule h3 { margin: 0; font-size: clamp(1.4rem, 1.2rem + .7vw, 1.7rem); }
.formule p { margin: 0; color: var(--texte); max-width: 26rem; }

/* Bandeau Instagram */
.insta { text-align: center; }
.insta__ico {
  display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 20px;
  border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sauge-claire); color: var(--sauge-claire);
}
.insta__ico .ico { width: 26px; height: 26px; }
.mise-en-avant {
  max-width: 30ch; margin: 0 auto 1.4em;
  font-family: var(--serif); font-weight: 360;
  font-size: clamp(1.45rem, 1.15rem + 1.5vw, 2.35rem); line-height: 1.25; letter-spacing: -.012em;
}
.section--encre .mise-en-avant { color: var(--lin); }
.mise-en-avant em { font-style: italic; color: var(--argile); }
.liens-annexes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 2rem; }
.liens-annexes:not(:has(a)) { display: none; }

/* Formulaire à deux variantes (page contact) */
.choix--bascule legend { font-size: 1rem; font-weight: 500; color: var(--texte); margin-bottom: 12px; line-height: 1.5; }
.choix--bascule .choix__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choix--bascule label { justify-content: center; min-height: 52px; padding: .5em .6em; font-size: .97rem; line-height: 1.2; text-align: center; white-space: nowrap; }
.variante { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.variante__titre {
  margin: 14px 0 0; padding-top: 22px; border-top: 1px solid var(--ligne);
  font-size: clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
}
.requis { color: var(--argile-fonce); font-weight: 650; }
.formulaire__requis { font-size: .84rem; color: var(--doux); margin: 0; }
.champ select {
  padding-right: 46px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E4A57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}
.champ select:focus { outline: none; border-color: var(--sauge-fonce); box-shadow: 0 0 0 3px rgba(74, 102, 80, .35); }
.coche { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-weight: 560; color: var(--encre); }
.coche input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--encre); cursor: pointer; }
.formulaire[aria-busy="true"] .variante { opacity: .6; }

/* 11. PIED DE PAGE ------------------------------------------------------- */
.pied {
  background: var(--encre); color: var(--sur-encre);
  padding: clamp(48px, 6vw, 80px) 0 calc(28px + 84px); /* place pour la barre mobile */
  border-top: 1px solid rgba(251, 237, 239, .12);
  font-size: .95rem;
}
@media (min-width: 960px) { .pied { padding-bottom: 32px; } }
.pied__grille { display: grid; gap: 32px; }
@media (min-width: 760px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied .marque { color: var(--lin); }
.pied .marque img { filter: invert(1) sepia(.2); opacity: .9; }
.pied .marque em { color: var(--sur-encre-2); }
.pied__accroche { margin-top: 14px; max-width: 26rem; color: var(--sur-encre-2); }
.pied h2 { font-family: var(--sans); font-size: .76rem; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; color: var(--sauge-claire); margin-bottom: 14px; }
.pied ul { display: grid; gap: 4px; }
.pied ul a { display: inline-block; padding: 4px 0; } /* zone tactile plus confortable */
.pied a { color: var(--sur-encre); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pied__bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(251, 237, 239, .16);
  font-size: .85rem; color: var(--sur-encre-2);
}
.pied__bas p { margin: 0; }

/* 12. APPARITIONS, SURVOLS, MOUVEMENT RÉDUIT ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-apparait] {
    opacity: 0; transform: translateY(18px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  html.js [data-apparait].est-vu { opacity: 1; transform: none; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zoom { overflow: hidden; }
  .zoom img { transition: transform 1.2s var(--ease); }
  .zoom:hover img { transform: scale(1.035); }
  .tuile, .carte-prix, .objet, .garantie { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
  .tuile:hover, .carte-prix:hover, .objet:hover, .garantie:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}