/* ==========================================================================
   Panther Pare-Brise — Design System v3
   Rose saturé · noir · blanc. Typographie d'affichage Archivo Expanded.
   Parti pris : fun assumé, lettrage énorme, aucun demi-ton.
   ========================================================================== */

/* ------------------------------------------------------------- 0. Polices */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- 1. Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* [hidden] doit toujours gagner : sans ça, .pile { display:flex } le neutralise
   et tous les blocs de confirmation des formulaires restent visibles. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
/* Filet de sécurité : un <svg><use> sans dimension retombe sinon sur 300x150 px */
svg:not([width]):not([viewBox]) { width: 1em; height: 1em; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* -------------------------------------------------------------- 2. Tokens */
:root {
  --rose:        #ff2e88;
  --rose-vif:    #E80B6B;
  --rose-clair:  #FF7FB6;
  --rose-pale:   #FFDCEB;
  --rose-voile:  #FFF0F6;

  /* Bleu Méditerranée en fond profond, jaune soleil en accent — palette des visuels */
  --noir:        #0A2A48;   /* bleu nuit : remplace le noir partout */
  --noir-2:      #113A5E;
  --gris-900:    #1B4C77;
  --azur:        #17B8CE;
  --azur-clair:  #7FE3EE;
  --jaune:       #FFC93C;
  --jaune-clair: #FFE28A;
  --sable:       #FFF3D6;

  --gris-500:    #5F6C7B;
  --gris-300:    #AFC0CE;
  --gris-100:    #E6EDF3;
  --gris-50:     #F4F8FB;
  --blanc:       #FFFFFF;

  --fond:          var(--blanc);
  --fond-alt:      var(--gris-50);
  --surface:       var(--blanc);
  --surface-douce: var(--rose-voile);
  --texte:         #0E2C47;
  --texte-doux:    #445B70;
  --texte-tenu:    var(--gris-500);
  --bordure:       #DCE6EE;
  --bordure-forte: var(--noir);
  --accent:        var(--rose);
  --succes:        #0E8A5F;

  --ombre-s: 0 2px 6px rgba(10,9,12,.06);
  --ombre-m: 0 14px 34px -16px rgba(10,9,12,.24);
  --ombre-l: 0 34px 70px -30px rgba(10,9,12,.34);
  --ombre-dure: 6px 6px 0 var(--noir);
  --ombre-dure-rose: 6px 6px 0 var(--rose);

  --r-xs: 8px; --r-s: 12px; --r-m: 18px; --r-l: 26px; --r-xl: 34px; --r-pill: 999px;

  --gouttiere: clamp(1.15rem, 4vw, 2.75rem);
  --largeur: 1280px;
  --largeur-texte: 66ch;
  --section-y: clamp(3.75rem, 8vw, 7.5rem);

  --f-display: "Archivo", "Segoe UI Variable Display", system-ui, -apple-system, sans-serif;
  --f-corps: "Manrope", "Segoe UI Variable Text", system-ui, -apple-system, sans-serif;
  --f-data: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-xs:   clamp(.72rem, .70rem + .06vw, .76rem);
  --t-s:    clamp(.83rem, .81rem + .1vw, .89rem);
  --t-base: clamp(.94rem, .92rem + .12vw, 1rem);
  --t-m:    clamp(1.02rem, .98rem + .2vw, 1.15rem);
  --t-l:    clamp(1.18rem, 1.08rem + .45vw, 1.45rem);
  --t-xl:   clamp(1.35rem, 1.18rem + .75vw, 1.85rem);
  --t-2xl:  clamp(1.6rem, 1.35rem + 1.15vw, 2.4rem);
  --t-3xl:  clamp(1.95rem, 1.55rem + 1.9vw, 3.15rem);

  --transition: 180ms cubic-bezier(.3,.7,.4,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #061C31; --fond-alt: #0A2A48; --surface: #0E3557;
    --surface-douce: #123E63; --texte: #EAF3F9; --texte-doux: #B4C9D9; --texte-tenu: #8AA3B8;
    --bordure: rgba(255,255,255,.14); --bordure-forte: #fff; --accent: #FF5FA2;
    --ombre-dure: 6px 6px 0 var(--jaune); --succes: #2FCB8E;
  }
}
:root[data-theme="dark"] {
  --fond:#061C31; --fond-alt:#0A2A48; --surface:#0E3557; --surface-douce:#123E63;
  --texte:#EAF3F9; --texte-doux:#B4C9D9; --texte-tenu:#8AA3B8;
  --bordure:rgba(255,255,255,.14); --bordure-forte:#fff; --accent:#FF5FA2;
  --ombre-dure:6px 6px 0 var(--jaune); --succes:#2FCB8E;
}
:root[data-theme="light"] {
  --fond:#FFFFFF; --fond-alt:#F4F8FB; --surface:#FFFFFF; --surface-douce:#FFF0F6;
  --texte:#0E2C47; --texte-doux:#445B70; --texte-tenu:#5F6C7B;
  --bordure:#DCE6EE; --bordure-forte:#0A2A48; --accent:#FF2E88;
  --ombre-dure:6px 6px 0 #0A2A48; --succes:#0E8A5F;
}

/* ------------------------------------------------------------ 3. Base */
body {
  font-family: var(--f-corps);
  font-size: var(--t-base);
  line-height: 1.62;
  color: var(--texte);
  background: var(--fond);
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 112;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
h1 {
  font-size: var(--t-3xl);
  font-variation-settings: "wght" 900, "wdth" 112;
  letter-spacing: -.035em;
  line-height: .95;
  overflow-wrap: break-word;
}
h2 {
  font-size: var(--t-2xl);
  font-variation-settings: "wght" 900, "wdth" 110;
  letter-spacing: -.032em;
  line-height: 1;
  overflow-wrap: break-word;
}
h3 { font-size: var(--t-l); font-variation-settings: "wght" 800, "wdth" 108; letter-spacing: -.03em; }
h4 { font-size: var(--t-m); font-variation-settings: "wght" 700, "wdth" 105; text-transform: none; letter-spacing: -.02em; }
p { max-width: var(--largeur-texte); }
strong, b { font-weight: 700; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs);
}
::selection { background: var(--rose); color: #fff; }
.tabular { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ 4. Utilitaires */
.contenant { width: min(100% - 2*var(--gouttiere), var(--largeur)); margin-inline: auto; }
.contenant-etroit { width: min(100% - 2*var(--gouttiere), 780px); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--fond-alt); }
/* Rose — aplat exact #ff2e88. Les deux classes rendent désormais la même
   couleur : "rose-doux" est conservée pour ne pas casser les gabarits. */
.section--rose, .section--rose-doux { background: #ff2e88; color: #fff; }
.section--rose h1, .section--rose h2, .section--rose h3, .section--rose h4,
.section--rose-doux h1, .section--rose-doux h2, .section--rose-doux h3, .section--rose-doux h4 { color: #fff; }
.section--rose p, .section--rose li,
.section--rose-doux p, .section--rose-doux li { color: rgba(255,255,255,.94); }
.section--rose .plomb, .section--rose-doux .plomb { color: rgba(255,255,255,.94); }
.section--rose .tenu, .section--rose-doux .tenu { color: rgba(255,255,255,.78); }
.section--rose .sticker, .section--rose-doux .sticker { background: var(--noir); color: #fff; }
.section--rose .sticker--fantome, .section--rose-doux .sticker--fantome { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.section--rose .titre-souligne h2::after, .section--rose-doux .titre-souligne h2::after { background: #fff; }
.section--rose .btn, .section--rose-doux .btn { --btn-fond: var(--noir); --btn-survol: var(--gris-900); }
.section--rose .btn--fantome, .section--rose-doux .btn--fantome { --btn-fond: transparent; --btn-texte: #fff; --btn-bord: #fff; }
.section--rose .btn--fantome:hover, .section--rose-doux .btn--fantome:hover { background: #fff; --btn-texte: var(--rose-vif); }
/* Les blocs blancs posés sur le rose gardent leur texte foncé */
.section--rose .carte, .section--rose .etapes li, .section--rose .avis-g,
.section--rose .faq details, .section--rose .bande-cta, .section--rose .carte-verre,
.section--rose .tableau-enveloppe, .section--rose .bandeau-google, .section--rose .encadre,
.section--rose-doux .carte, .section--rose-doux .etapes li, .section--rose-doux .avis-g,
.section--rose-doux .faq details, .section--rose-doux .bande-cta, .section--rose-doux .carte-verre,
.section--rose-doux .tableau-enveloppe, .section--rose-doux .bandeau-google, .section--rose-doux .encadre {
  background: var(--surface); border-color: transparent; color: var(--texte);
}
.section--rose .carte h3, .section--rose .etapes h3, .section--rose .faq summary,
.section--rose-doux .carte h3, .section--rose-doux .etapes h3, .section--rose-doux .faq summary { color: var(--texte); }
.section--rose .carte p, .section--rose .etapes p, .section--rose .faq .reponse p,
.section--rose-doux .carte p, .section--rose-doux .etapes p, .section--rose-doux .faq .reponse p { color: var(--texte-doux); }
.section--rose .etapes li::before, .section--rose-doux .etapes li::before { color: var(--rose); }
.section--rose .nuage-liens a, .section--rose .nuage-liens span,
.section--rose-doux .nuage-liens a, .section--rose-doux .nuage-liens span {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff;
}
.section--rose .nuage-liens a:hover, .section--rose-doux .nuage-liens a:hover { background: #fff; color: var(--rose-vif); border-color: #fff; }
.section--rose .puces-atouts svg, .section--rose-doux .puces-atouts svg { color: #fff; }
.section--rose .atouts-bande > div, .section--rose-doux .atouts-bande > div { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.section--rose .atouts-bande h3, .section--rose-doux .atouts-bande h3 { color: #fff; }
.section--rose .atouts-bande p, .section--rose-doux .atouts-bande p { color: rgba(255,255,255,.85); }
.section--rose .atouts-bande svg, .section--rose-doux .atouts-bande svg { color: #fff; }
.section--rose .confiance > div, .section--rose-doux .confiance > div { background: rgba(255,255,255,.16); }
.section--rose .confiance b, .section--rose-doux .confiance b { color: #fff; }
.section--rose .confiance span, .section--rose-doux .confiance span { color: rgba(255,255,255,.8); }
.section--rose .recherche input, .section--rose-doux .recherche input { background: #fff; color: var(--texte); border-color: transparent; }
.section--noir { background: var(--noir); color: var(--gris-100); }
.section--noir h1, .section--noir h2, .section--noir h3, .section--noir h4 { color: #fff; }
.section--noir p, .section--noir li { color: var(--gris-300); }
.section--noir .carte { background: var(--noir-2); border-color: rgba(255,255,255,.14); color: #fff; }
.section--noir .carte p { color: var(--gris-300); }
.pile { display: flex; flex-direction: column; }
.pile-s{gap:.5rem} .pile-m{gap:1.1rem} .pile-l{gap:1.9rem} .pile-xl{gap:3rem}
.rangee { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.centre { text-align: center; }
.centre p, .centre .plomb { margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.plomb { font-size: var(--t-m); color: var(--texte-doux); max-width: 58ch; line-height: 1.5; }
.tenu { color: var(--texte-tenu); font-size: var(--t-s); }

/* Eyebrow */
.sticker {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-xs);
  font-variation-settings: "wght" 800, "wdth" 100;
  text-transform: uppercase; letter-spacing: .14em;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  background: var(--noir); color: #fff;
}
.sticker--fantome { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px currentColor; }
.sticker--azur, .sticker--nuit { background: var(--rose); color: #fff; }
.section--rose .sticker { background: var(--noir); }
.section--rose .sticker--fantome { background: transparent; color: #fff; }
.section--noir .sticker--fantome { color: var(--rose-clair); }

/* --------------------------------------------------------- 5. Boutons */
.btn {
  --btn-fond: var(--rose); --btn-survol: var(--rose-vif);
  --btn-texte: #fff; --btn-bord: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-s); line-height: 1;
  font-variation-settings: "wght" 800, "wdth" 104;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 1.1rem 1.85rem; border-radius: var(--r-pill);
  background: var(--btn-fond); color: var(--btn-texte);
  box-shadow: inset 0 0 0 2px var(--btn-bord), 5px 5px 12px rgba(10, 9, 12, .14);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .45s, color .45s, box-shadow .45s, transform .2s;
}
.btn:hover { background: var(--btn-survol); box-shadow: inset 0 0 0 2px var(--btn-bord), 7px 7px 18px rgba(10, 9, 12, .2); }
.btn:active { transform: scale(.97); transition-duration: .2s; }

/* L'icône s'anime : rotation si elle précède le libellé, glissement si c'est une flèche finale */
.btn svg { width: 1.15em; height: 1.15em; flex: none; transition: transform 1.2s cubic-bezier(.2,.8,.3,1); }
.btn:hover > svg:first-child { transform: rotate(-18deg) scale(1.12); }
.btn:hover > svg:last-child:not(:first-child) { transform: translateX(5px); transition-duration: .35s; }

.btn--grand { padding: 1.3rem 2.2rem; font-size: var(--t-base); }
.btn--nuit { --btn-fond: var(--noir); --btn-survol: var(--gris-900); }
.btn--fantome {
  --btn-fond: transparent; --btn-texte: var(--texte); --btn-bord: var(--texte);
  box-shadow: inset 0 0 0 2px var(--btn-bord);
}
.btn--fantome:hover { background: var(--texte); --btn-texte: var(--fond); box-shadow: inset 0 0 0 2px var(--btn-bord), 5px 5px 12px rgba(10,9,12,.14); }
.section--noir .btn--fantome, .section--rose .btn--fantome { --btn-texte: #fff; --btn-bord: #fff; }
.section--noir .btn--fantome:hover, .section--rose .btn--fantome:hover { background: #fff; --btn-texte: var(--noir); }
.btn--blanc { --btn-fond: #fff; --btn-texte: var(--noir); --btn-survol: var(--gris-100); }
.btn--whatsapp { --btn-fond: #1FA855; --btn-survol: #17904A; }
.btn--large { width: 100%; }

/* ---- Bouton d'appel : contour discret, néon rose à l'activation ---------- */
.btn[href^="tel:"] {
  --btn-fond: transparent;
  --btn-texte: color-mix(in srgb, var(--texte) 68%, transparent);
  --btn-bord: color-mix(in srgb, var(--texte) 40%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--btn-bord);
  transition: .5s ease;
  -webkit-user-select: none; user-select: none;
}
.btn[href^="tel:"]:hover,
.btn[href^="tel:"]:focus-visible {
  --btn-fond: var(--rose); --btn-texte: #fff; --btn-bord: var(--rose);
  box-shadow:
    inset 0 0 0 1.5px var(--rose),
    0 0 6px var(--rose),
    0 0 22px var(--rose),
    0 0 55px color-mix(in srgb, var(--rose) 55%, transparent);
}
/* Sur fond bleu profond : contour clair, néon rose à l'activation */
.heros .btn[href^="tel:"],
.section--noir .btn[href^="tel:"] {
  --btn-texte: rgba(255,255,255,.85); --btn-bord: rgba(255,255,255,.45);
}
.heros .btn[href^="tel:"]:hover,
.heros .btn[href^="tel:"]:focus-visible,
.section--noir .btn[href^="tel:"]:hover,
.section--noir .btn[href^="tel:"]:focus-visible {
  --btn-fond: var(--rose); --btn-texte: #fff; --btn-bord: var(--rose);
  box-shadow: inset 0 0 0 1.5px var(--rose), 0 0 8px var(--rose), 0 0 26px var(--rose), 0 0 66px rgba(255,46,136,.5);
}
/* Sur aplat rose plein : le néon passe en blanc */
.section--rose .btn[href^="tel:"] { --btn-texte: rgba(255,255,255,.85); --btn-bord: rgba(255,255,255,.5); }
.section--rose .btn[href^="tel:"]:hover,
.section--rose .btn[href^="tel:"]:focus-visible {
  --btn-fond: #fff; --btn-texte: var(--rose-vif); --btn-bord: #fff;
  box-shadow: inset 0 0 0 1.5px #fff, 0 0 8px rgba(255,255,255,.85), 0 0 28px rgba(255,255,255,.6);
}
/* La barre fixe mobile garde des boutons pleins : le néon y serait illisible */
.cta-mobile .btn[href^="tel:"] {
  --btn-fond: var(--noir); --btn-texte: #fff; --btn-bord: transparent;
  box-shadow: none;
}

/* Le téléphone de l'en-tête suit le même principe */
.entete__tel {
  color: color-mix(in srgb, var(--texte) 78%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--texte) 35%, transparent);
  transition: .5s ease;
}
.entete__tel:hover, .entete__tel:focus-visible {
  background: var(--rose); color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--rose), 0 0 6px var(--rose), 0 0 20px var(--rose), 0 0 48px color-mix(in srgb, var(--rose) 50%, transparent);
}
.entete__tel:hover svg { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .entete__tel { transition: none; }
  .btn:active { transform: none; }
  .btn:hover > svg { transform: none; }
}

/* ============================================================ 6. EN-TÊTE */
.bandeau-offre {
  background: var(--noir); color: #fff;
  font-family: var(--f-display); font-weight: 600;
  font-variation-settings: "wght" 600, "wdth" 100;
  font-size: var(--t-xs); letter-spacing: .04em; padding: .6rem 0;
}
.bandeau-offre .contenant { display: flex; gap: .5rem 1.5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.bandeau-offre b { color: var(--rose-clair); font-weight: 800; }
.bandeau-offre a { color: #fff; text-decoration: none; font-weight: 800; }
.bandeau-offre a:hover { color: var(--rose-clair); }
@media (max-width: 620px) { .bandeau-offre__detail { display: none; } }

.entete {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure);
}
.entete__interieur {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 1.5rem; min-height: 76px;
}

/* Logo */
.logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.logo svg { width: 38px; height: 38px; flex: none; }
.logo__marque {
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--f-display); text-transform: uppercase;
}
.logo__marque span:first-child {
  font-weight: 900; font-variation-settings: "wght" 900, "wdth" 118;
  font-size: 1.12rem; letter-spacing: -.03em; color: var(--rose);
}
.logo__marque span:last-child {
  font-weight: 700; font-variation-settings: "wght" 700, "wdth" 100;
  font-size: .58rem; letter-spacing: .22em; color: var(--texte-tenu); margin-top: .18rem;
}

/* Navigation — desktop */
.nav { justify-self: center; }
.nav > ul { display: flex; align-items: center; gap: .15rem; }
.nav a, .nav__parent > button {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem .85rem; border-radius: var(--r-pill);
  font-family: var(--f-display); font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" 100;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texte); text-decoration: none; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav a:hover, .nav__parent > button:hover { background: var(--surface-douce); color: var(--rose-vif); }
.nav a[aria-current="page"] { color: var(--rose); }
.nav__parent { position: relative; }
.nav__parent > button::after {
  content: ""; width: .36em; height: .36em; margin-left: .1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform var(--transition);
}
.nav__parent[data-ouvert="true"] > button { background: var(--surface-douce); color: var(--rose-vif); }
.nav__parent[data-ouvert="true"] > button::after { transform: rotate(-135deg) translateY(-1px); }

.sous-menu {
  position: absolute; top: calc(100% + .55rem); left: 50%; transform: translateX(-50%);
  min-width: 320px; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--r-l);
  box-shadow: var(--ombre-l); padding: .5rem; display: none; z-index: 5;
}
.nav__parent[data-ouvert="true"] .sous-menu { display: block; }
.sous-menu a {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .7rem .85rem; border-radius: var(--r-m); width: 100%;
  text-transform: none; letter-spacing: 0; font-size: var(--t-s);
  font-family: var(--f-corps); font-weight: 700;
}
.sous-menu a small {
  font-family: var(--f-corps); font-weight: 400; font-size: var(--t-xs);
  color: var(--texte-tenu); text-transform: none; letter-spacing: 0;
}
.sous-menu a:hover small { color: inherit; opacity: .8; }

/* Actions */
.entete__actions { display: flex; align-items: center; gap: .6rem; }
.entete__tel {
  display: inline-flex; align-items: center; gap: .38rem; text-decoration: none;
  font-family: var(--f-display); font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 100;
  font-size: .78rem; letter-spacing: -.005em; line-height: 1;
  padding: .55rem .85rem; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--bordure);
}
.entete__tel svg { width: 15px; height: 15px; flex: none; color: var(--rose); }
.entete .btn { padding: .7rem 1.15rem; font-size: .76rem; }
.entete .btn svg { width: 1em; height: 1em; }

.burger {
  display: none; width: 46px; height: 46px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--bordure); align-items: center; justify-content: center;
}
.burger span { display: block; width: 18px; height: 2.5px; background: currentColor; border-radius: 2px; position: relative; transition: background var(--transition); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform var(--transition), top var(--transition); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Repli progressif */
@media (max-width: 1240px) {
  .nav a, .nav__parent > button { padding: .6rem .6rem; font-size: .78rem; letter-spacing: .04em; }
  .entete__tel span { display: none; }
  .entete__tel { padding: .68rem .8rem; }
}

@media (max-width: 1060px) {
  .entete__interieur { grid-template-columns: auto 1fr; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(92vw, 400px);
    background: var(--surface); border-left: 1px solid var(--bordure);
    transform: translateX(100%); transition: transform var(--transition);
    padding: 6rem 1.25rem 2.5rem; overflow-y: auto; z-index: 95;
    display: flex; flex-direction: column; gap: 1rem;
  }
  .nav[data-ouvert="true"] { transform: translateX(0); box-shadow: var(--ombre-l); }
  .nav > ul { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav a, .nav__parent > button {
    width: 100%; justify-content: space-between;
    padding: .95rem 1rem; font-size: 1rem; border-radius: var(--r-m);
  }
  .sous-menu {
    position: static; transform: none; display: none; min-width: 0;
    box-shadow: none; border: 0; border-radius: 0; padding: .2rem 0 .5rem .85rem;
    border-left: 2px solid var(--rose);  margin: .2rem 0 .4rem .85rem;
  }
  .nav__parent[data-ouvert="true"] .sous-menu { display: block; }
  .burger { display: inline-flex; z-index: 96; }
  .voile {
    position: fixed; inset: 0; background: rgba(10,9,12,.55); z-index: 94;
    opacity: 0; pointer-events: none; transition: opacity var(--transition);
  }
  .voile[data-ouvert="true"] { opacity: 1; pointer-events: auto; }
}
@media (max-width: 720px) {
  .entete .btn { display: none; }
}

/* Bloc CTA en pied de menu mobile */
.nav__pied { display: none; }
@media (max-width: 1060px) {
  .nav__pied { display: flex; flex-direction: column; gap: .6rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--bordure); }
  .nav__pied .btn { width: 100%; }
}

/* ============================== 6 bis. Titres sur fond sombre — sans halo */
.titre-panthere, .heros h1, .heros h2, .section--noir h2, .offre h2 {
  color: #fff;
}
.titre-panthere .accent, .heros h1 .accent, .sans-eclat .accent {
  color: #fff;
}
/* Aucun texte du site ne porte d'ombre portée */
h1, h2, h3, h4, p, a, span, li, button, .btn { text-shadow: none; }

/* ============================================================== 7. HÉROS */
.heros {
  position: relative; isolation: isolate; overflow: hidden;
  background: #ff2e88;
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 5rem);
}
.heros h2, .heros h3 { color: #fff; }
.heros p, .heros .plomb { color: rgba(255,255,255,.94); }
.heros .tenu { color: rgba(255,255,255,.78); }

/* Photo de marque en fond du héros, fondue vers la gauche */
.heros__photo { position: absolute; inset: 0 0 0 auto; width: min(58%, 880px); z-index: -1; }
.heros__photo-cadre { position: absolute; inset: 0; border-radius: 0; box-shadow: none; background: none; }
.heros__photo-cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; }
.heros__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #ff2e88 0%, rgba(255,46,136,.9) 24%, rgba(255,46,136,.45) 62%, rgba(255,46,136,.2) 100%),
    linear-gradient(0deg, rgba(255,46,136,.5), transparent 45%);
}
@media (max-width: 980px) {
  .heros__photo { width: 100%; }
  .heros__photo::after {
    background: linear-gradient(180deg, rgba(255,46,136,.55) 0%, rgba(255,46,136,.9) 42%, #ff2e88 78%);
  }
  .heros__photo-cadre img { object-position: center 30%; }
}

/* Carte de prise de rendez-vous express — compacte */
.carte-rdv {
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--surface); color: var(--texte);
  border: 2px solid var(--jaune); border-radius: var(--r-l);
  box-shadow: 6px 6px 0 var(--jaune);
  padding: 1.3rem 1.35rem 1.15rem;
  max-width: 380px; margin-left: auto;
}
.carte-rdv .sticker { background: var(--rose); color: #fff; font-size: .64rem; padding: .32rem .7rem; letter-spacing: .1em; }
.carte-rdv > p { font-size: .78rem; color: var(--texte-doux); line-height: 1.45; }
.carte-rdv form { gap: .55rem !important; }
.carte-rdv .champ { gap: .2rem; }
.carte-rdv .champ label { font-size: .62rem; letter-spacing: .08em; }
.carte-rdv .champ input { background: var(--fond); font-size: .9rem; padding: .68rem .8rem; border-width: 1.5px; border-radius: var(--r-s); }
.carte-rdv .btn { padding: .85rem 1.2rem; font-size: .78rem; margin-top: .15rem; }
.carte-rdv__pied { font-size: .74rem; line-height: 1.5; color: var(--texte-doux); text-align: center; margin: .15rem 0 0; max-width: none; }
.carte-rdv__pied .tenu { font-size: .66rem; }
.carte-rdv__pied a { color: var(--rose-vif); text-decoration: none; }
.carte-rdv__pied a:hover { text-decoration: underline; }
@media (max-width: 980px) { .carte-rdv { margin-inline: auto; max-width: 420px; } }
@media (max-width: 700px) {
  .carte-rdv { box-shadow: 4px 4px 0 var(--jaune); padding: 1.1rem 1.05rem 1rem; max-width: none; }
  .carte-rdv h2 { font-size: 1.05rem; }
}
.heros__grille { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 980px) { .heros__grille { grid-template-columns: 1fr; } }
/* Surlignage blanc facon marqueur : la bande epouse la largeur du texte */
/* Premiere ligne du titre isolee : le surlignage suivant se decoupe par ligne */
.heros h1 .ligne { display: block; }

/* Surlignage : deux bandes blanches independantes, legerement inclinees */
.heros h1 .accent { display: block; background: none; padding: 0; color: inherit; margin-top: .18em; }
.surligne {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  background: #fff;
  color: #ff2e88;
  padding: .05em .32em .11em;
  border-radius: 10px;
  transform-origin: left center;
}
.surligne--a { transform: rotate(-1.8deg); }
.surligne--b { transform: rotate(1.4deg); margin-top: .16em; margin-left: .22em; }
@media (max-width: 700px) {
  .surligne { padding: .05em .26em .1em; border-radius: 8px; }
  .surligne--a { transform: rotate(-1.2deg); }
  .surligne--b { transform: rotate(1deg); margin-left: .12em; }
}
.heros h1 { line-height: 1.05; }
@media (max-width: 700px) { .heros h1 .accent { padding: .04em .22em .09em; border-radius: 6px; } }
.heros .sticker { background: var(--jaune); color: #0E2C47; }
.heros .sticker--fantome { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.heros .btn--fantome { --btn-texte: #fff; --btn-bord: rgba(255,255,255,.7); }
.heros .btn--fantome:hover { background: #fff; --btn-texte: #0E2C47; }
.heros .btn--nuit { --btn-fond: var(--jaune); --btn-texte: #0E2C47; --btn-survol: var(--jaune-clair); }

.heros__note { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-s); color: rgba(255,255,255,.94); }
.heros__note b { color: #fff; font-family: var(--f-display); font-weight: 800; }
.heros__note svg { width: 1.15em; height: 1.15em; }

/* Chiffre géant */
.chiffre-geant {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 125;
  font-size: clamp(4.5rem, 3rem + 9vw, 11rem);
  line-height: .8; letter-spacing: -.06em; color: var(--noir);
  display: block;
}
.chiffre-geant sup { font-size: .32em; vertical-align: super; letter-spacing: -.02em; }

/* Bandeau d'atouts */
.atouts-bande {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem;
}
.atouts-bande > div {
  display: flex; gap: .8rem; align-items: flex-start;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-l); padding: 1.1rem 1.2rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.atouts-bande svg { width: 25px; height: 25px; flex: none; color: #fff; }
.atouts-bande h3 { font-size: .95rem; color: #fff; margin-bottom: .1rem; }
.atouts-bande p { font-size: var(--t-xs); color: rgba(255,255,255,.82); max-width: 30ch; }
/* Hors héros (fond clair) */
.section .atouts-bande > div { background: var(--fond-alt); border-color: var(--bordure); }
.section .atouts-bande svg { color: var(--rose); }
.section .atouts-bande h3 { color: var(--texte); }
.section .atouts-bande p { color: var(--texte-doux); }

.puces-atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem 1.25rem; }
.puces-atouts li { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--t-s); font-weight: 600; }
.puces-atouts svg { width: 1.05em; height: 1.05em; flex: none; margin-top: .3em; color: var(--succes); }
.heros .puces-atouts li { color: #fff; }
.heros .puces-atouts svg { color: #fff; }
.section--noir .puces-atouts svg, .section--rose .puces-atouts svg { color: var(--rose-clair); }

/* ------------------------------------------------------------- 8. Média */
.media {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(155deg, #FF8CC0, var(--rose) 45%, #B00E58);
  aspect-ratio: 4/3; box-shadow: var(--ombre-l);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--carre { aspect-ratio: 1; }
.media--large { aspect-ratio: 16/10; }
.heros .media { background: linear-gradient(155deg, var(--noir), #2A0F1E); border: 2px solid rgba(255,255,255,.25); }
.media__repli { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; color: #fff; }
.media__repli b {
  display: block; font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 125;
  font-size: clamp(3rem, 8vw, 5.5rem); letter-spacing: -.06em; line-height: .85;
}
.media__repli span { font-family: var(--f-display); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .24em; font-weight: 800; }
.media__repli small { display: block; margin-top: 1rem; font-size: var(--t-xs); opacity: .6; max-width: 26ch; margin-inline: auto; }

.prix-flottant {
  position: absolute; left: clamp(-.5rem, -1vw, 0rem); bottom: clamp(1rem, 3vw, 2rem);
  background: #fff; color: var(--noir); border-radius: var(--r-l);
  padding: 1rem 1.4rem; box-shadow: var(--ombre-l); display: flex; align-items: center; gap: .9rem;
}
.prix-flottant b {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 120;
  font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.05em; color: var(--rose); line-height: 1;
}
.prix-flottant span { font-family: var(--f-display); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--texte-doux); max-width: 12ch; line-height: 1.25; }

.pastille {
  display: grid; place-items: center; text-align: center;
  width: clamp(110px, 12vw, 160px); aspect-ratio: 1; border-radius: 50%;
  background: var(--noir); color: #fff; font-family: var(--f-display); line-height: 1;
}
.pastille b { font-size: clamp(1.5rem, 2.8vw, 2.2rem); display: block; font-weight: 900; font-variation-settings: "wght" 900, "wdth" 120; letter-spacing: -.05em; }
.pastille small { font-size: .58rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 800; }

/* --------------------------------------------------- 9. Bandeau défilant */
.marquee { background: var(--noir); color: #fff; overflow: hidden; padding: .85rem 0; }
.marquee__piste { display: flex; gap: 2rem; width: max-content; animation: defile 40s linear infinite; }
.marquee__piste > * {
  display: inline-flex; align-items: center; gap: 2rem;
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 118;
  font-size: clamp(.95rem, 2vw, 1.3rem); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap;
}
.marquee__piste i { font-style: normal; color: var(--jaune); }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__piste { animation: none; } }

/* ------------------------------------------------------- 10. Confiance */
.confiance { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: .75rem; }
.confiance > div { background: var(--fond-alt); border-radius: var(--r-l); padding: 1.6rem 1.2rem; text-align: center; }
.confiance b {
  display: block; font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 120;
  font-size: var(--t-xl); color: var(--rose); letter-spacing: -.05em; line-height: 1;
}
.confiance span { display: block; margin-top: .5rem; font-size: var(--t-xs); color: var(--texte-tenu); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }

/* ---------------------------------------------------------- 11. Cartes */
.grille { display: grid; gap: clamp(.85rem, 1.8vw, 1.25rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.carte {
  position: relative; display: flex; flex-direction: column; gap: .8rem;
  background: var(--surface); border: 2px solid var(--bordure); border-radius: var(--r-xl);
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.carte--lien:hover { transform: translate(-3px, -3px); border-color: var(--noir); box-shadow: var(--ombre-dure); }
.carte h3 { font-size: var(--t-m); }
.carte p { font-size: var(--t-s); color: var(--texte-doux); }
.carte__lien { text-decoration: none; }
.carte__lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carte__icone { width: 56px; height: 56px; border-radius: var(--r-m); display: grid; place-items: center; background: var(--rose); color: #fff; }
.carte__icone svg { width: 28px; height: 28px; }
.carte__meta {
  margin-top: auto; padding-top: .8rem; border-top: 2px solid var(--bordure);
  display: flex; justify-content: space-between; gap: .75rem;
  font-family: var(--f-display); font-size: var(--t-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texte-tenu);
}
.carte__meta em { font-style: normal; color: var(--rose); }
.section--noir .carte--lien:hover { box-shadow: 6px 6px 0 var(--rose); border-color: var(--rose); }
@media (prefers-reduced-motion: reduce) { .carte--lien:hover { transform: none; } }

.carte--photo { padding: 0; overflow: hidden; }
.carte--photo .media { border-radius: 0; aspect-ratio: 4/3; box-shadow: none; }
.carte--photo .carte__corps { display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.2rem, 2.2vw, 1.6rem); flex: 1; }

/* Étapes */
.etapes { counter-reset: etape; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.etapes li {
  counter-increment: etape; background: var(--surface); border: 2px solid var(--bordure);
  border-radius: var(--r-xl); padding: 1.7rem 1.5rem; display: flex; flex-direction: column; gap: .5rem;
}
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 120;
  font-size: 2rem; line-height: 1; letter-spacing: -.05em; color: var(--rose);
}
.etapes h3 { font-size: 1rem; }
.etapes p { font-size: var(--t-s); color: var(--texte-doux); }
.section--noir .etapes li { background: var(--noir-2); border-color: rgba(255,255,255,.14); }
.section--noir .etapes h3 { color: #fff; }

/* ------------------------------------------------------- 12. Bloc offre */
.offre {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(155deg, #0E3557, var(--noir) 60%, #061C31);
  color: #fff; padding: clamp(1.85rem, 4.5vw, 3.75rem); isolation: isolate;
}
.offre::before { content: ""; position: absolute; z-index: -1; width: 55vmax; aspect-ratio: 1; border-radius: 50%; right: -16vmax; top: -22vmax; background: radial-gradient(circle, rgba(255,46,136,.5), transparent 62%); }
.offre::after { content: ""; position: absolute; z-index: -1; width: 42vmax; aspect-ratio: 1; border-radius: 50%; left: -14vmax; bottom: -20vmax; background: radial-gradient(circle, rgba(23,184,206,.35), transparent 64%); }
.offre h3 { color: #fff; }
.offre h2 {
  color: #FFA8D4;
}
.offre p { color: var(--gris-300); }
.offre__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem 3rem; align-items: start; }
.offre__liste li { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: var(--t-s); color: var(--gris-100); }
.offre__liste svg { width: 1.05em; height: 1.05em; flex: none; margin-top: .3em; color: var(--rose); }

/* ------------------------------------------------- 13. Formulaires */
/* Carte de formulaire — compacte, avec retours visuels à la saisie */
.carte-verre {
  background: var(--surface); border: 2px solid var(--noir); border-radius: var(--r-l);
  box-shadow: 6px 6px 0 var(--noir); padding: 1.35rem 1.4rem 1.25rem; color: var(--texte);
  max-width: 460px; transition: box-shadow var(--transition), transform var(--transition);
}
.carte-verre:focus-within { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--rose); border-color: var(--rose); }
.heros .carte-verre { border-color: var(--jaune); box-shadow: 6px 6px 0 var(--jaune); }
.heros .carte-verre:focus-within { box-shadow: 8px 8px 0 var(--jaune); border-color: var(--jaune); }
.carte-verre h2 { font-size: 1.15rem; letter-spacing: -.025em; }
.carte-verre .sticker { font-size: .62rem; padding: .3rem .7rem; letter-spacing: .1em; }
.carte-verre > form { gap: .6rem !important; }
.carte-verre .pile-m { gap: .6rem; }
.carte-verre small { font-size: .66rem; line-height: 1.4; }
@media (max-width: 980px) { .carte-verre { max-width: none; margin-inline: auto; } }
@media (max-width: 700px) { .carte-verre { padding: 1.1rem 1.05rem 1rem; box-shadow: 4px 4px 0 var(--noir); } }

/* Micro-interactions de saisie */
.champ { position: relative; }
.champ input:not([type=checkbox]):not([type=file]), .champ select, .champ textarea { transition: border-color .18s, box-shadow .18s, background .18s; }
.champ input:hover:not(:focus), .champ select:hover:not(:focus), .champ textarea:hover:not(:focus) { border-color: var(--rose-clair); }
.champ input:focus, .champ select:focus, .champ textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 22%, transparent); }
/* Coche verte dès qu'un champ obligatoire est correctement rempli */
.champ input:required:valid:not(:placeholder-shown) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A5F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 15px;
  padding-right: 2.2rem; border-color: color-mix(in srgb, var(--succes) 45%, transparent);
}
.champ--plaque input:required:valid:not(:placeholder-shown) { background-position: right .6rem center; }

.champ { display: flex; flex-direction: column; gap: .35rem; }
.champ label { font-family: var(--f-display); font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea {
  padding: .88rem 1rem; border-radius: var(--r-s);
  border: 2px solid var(--bordure); background: var(--fond); color: var(--texte);
  font-size: var(--t-s); width: 100%; transition: border-color var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--rose); outline: none; }
.champ small { font-size: var(--t-xs); color: var(--texte-tenu); }
.champ--plaque input {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 110;
  font-size: 1.15rem; text-align: center; text-transform: uppercase; letter-spacing: .1em;
  padding: .7rem .8rem;
}
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.champ label { font-size: .62rem; letter-spacing: .08em; }
.champ input:not([type=checkbox]), .champ select, .champ textarea { padding: .68rem .8rem; font-size: .87rem; border-width: 1.5px; }
.consentement { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--t-xs); color: var(--texte-tenu); }
.consentement input { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .18rem; accent-color: var(--rose); }

.segments { display: flex; gap: .3rem; padding: .3rem; background: var(--fond-alt); border-radius: var(--r-pill); }
.segments button { flex: 1; padding: .65rem .7rem; border-radius: var(--r-pill); font-family: var(--f-display); font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); transition: all var(--transition); }
.segments button[aria-pressed="true"] { background: var(--rose); color: #fff; }

/* --------------------------------------------- 14. Calculateur franchise */
.calculateur { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.resultat { background: var(--noir); color: #fff; border-radius: var(--r-xl); padding: clamp(1.35rem, 3vw, 2.1rem); }
.resultat__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: var(--t-s); color: var(--gris-300); }
.resultat__ligne b { font-family: var(--f-data); font-size: var(--t-base); color: #fff; font-variant-numeric: tabular-nums; }
.resultat__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1.2rem; }
.resultat__total span { font-family: var(--f-display); font-weight: 800; font-size: var(--t-base); text-transform: uppercase; letter-spacing: .04em; }
.resultat__total b {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 120;
  font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.05em; color: var(--rose); font-variant-numeric: tabular-nums; line-height: 1;
}

/* --------------------------------------------------- 15. Avant / Après */
.avant-apres { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16/10; background: var(--fond-alt); touch-action: none; cursor: ew-resize; border: 2px solid var(--noir); }
.avant-apres > svg, .avant-apres > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avant-apres__poignee { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; background: #fff; z-index: 2; }
.avant-apres__poignee::after { content: "◄ ►"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; color: var(--noir); font-size: .6rem; font-weight: 900; padding: .55rem .6rem; border-radius: var(--r-pill); box-shadow: var(--ombre-m); white-space: nowrap; }
.avant-apres__etiq { position: absolute; top: .9rem; z-index: 3; font-family: var(--f-display); font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; padding: .35rem .8rem; border-radius: var(--r-pill); background: var(--noir); color: #fff; }
.avant-apres__etiq--g { left: .9rem; } .avant-apres__etiq--d { right: .9rem; background: var(--rose); }

/* --------------------------------------------------------- 16. Avis */
.avis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.avis article { background: var(--surface); border: 2px solid var(--bordure); border-radius: var(--r-xl); padding: 1.6rem; display: flex; flex-direction: column; gap: .85rem; }
.etoiles { display: inline-flex; gap: .08rem; color: var(--jaune); }
.etoiles svg { width: 1.05rem; height: 1.05rem; }
.avis blockquote { font-size: var(--t-s); color: var(--texte-doux); }
.avis footer { margin-top: auto; display: flex; align-items: center; gap: .65rem; font-size: var(--t-xs); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; color: #fff; background: var(--rose); flex: none; }
.note-globale { display: inline-flex; align-items: center; gap: .7rem; padding: .65rem 1.1rem; border-radius: var(--r-pill); background: var(--surface); border: 2px solid var(--bordure); }
.heros .note-globale { background: #fff; border-color: #fff; color: var(--noir); }
.heros .note-globale .tenu { color: var(--texte-tenu); }
.note-globale b { font-family: var(--f-display); font-weight: 900; font-size: var(--t-m); letter-spacing: -.04em; }

/* Carrousel d'avis Google */
.carrousel { position: relative; }
.carrousel__piste { display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .35rem .25rem 1.5rem; margin-inline: -.25rem; scrollbar-width: none; }
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste > * { scroll-snap-align: start; flex: 0 0 clamp(255px, 78vw, 310px); }
.carrousel__fleches { display: flex; gap: .5rem; }
.carrousel__fleche { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 2px var(--bordure); color: var(--texte); transition: all var(--transition); }
.carrousel__fleche:hover:not(:disabled) { background: var(--rose); color: #fff; box-shadow: none; }
.carrousel__fleche:disabled { opacity: .3; cursor: default; }
.carrousel__fleche svg { width: 18px; height: 18px; }
.carrousel__fleche--prec svg { transform: rotate(180deg); }

/* Fiche d'avis au format Google : typographie et gris repris à l'identique */
.avis-g {
  --g-texte: #202124; --g-gris: #70757a; --g-corps: #3c4043;
  --g-etoile: #FBBC04; --g-lien: #1a73e8; --g-fond: #fff; --g-bord: #dadce0;
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--g-fond); border: 1px solid var(--g-bord); border-radius: 12px;
  padding: 1.15rem 1.25rem; height: 100%;
  font-family: Roboto, Arial, var(--f-corps), sans-serif;
}
:root[data-theme="dark"] .avis-g,
.section--noir .avis-g {
  --g-texte: #e8eaed; --g-gris: #9aa0a6; --g-corps: #bdc1c6;
  --g-fond: #202124; --g-bord: #3c4043;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avis-g {
    --g-texte: #e8eaed; --g-gris: #9aa0a6; --g-corps: #bdc1c6;
    --g-fond: #202124; --g-bord: #3c4043;
  }
}
.avis-g__tete { display: flex; align-items: center; gap: .75rem; }
.avis-g__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 1rem; font-weight: 500;
  font-family: Roboto, Arial, sans-serif;
}
.avis-g__identite { min-width: 0; display: flex; flex-direction: column; }
.avis-g__nom {
  display: flex; align-items: center; gap: .25rem;
  font-size: .875rem; font-weight: 500; color: var(--g-texte); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avis-g__statut { font-size: .75rem; color: var(--g-gris); line-height: 1.3; }
.avis-g__note { display: flex; align-items: center; gap: .5rem; }
.avis-g__etoiles { display: inline-flex; gap: 1px; color: var(--g-etoile); }
.avis-g__etoiles svg { width: 14px; height: 14px; }
.avis-g__date { font-size: .75rem; color: var(--g-gris); }
.avis-g__texte {
  font-size: .875rem; line-height: 1.5; color: var(--g-corps); margin: 0; max-width: none;
}
.avis-g__texte[data-tronque="true"] { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lire-suite {
  align-self: flex-start; font-family: Roboto, Arial, sans-serif;
  font-size: .875rem; font-weight: 500; color: var(--g-lien); padding: 0;
}
.lire-suite:hover { text-decoration: underline; }
.avis-g__pied { margin-top: auto; padding-top: .65rem; display: flex; align-items: center; gap: .4rem; }
.avis-g__pied svg.logo-google { height: 15px; width: auto; }
.avis-g__pied span { font-size: .7rem; color: var(--g-gris); }
.badge-verifie { width: 14px; height: 14px; flex: none; color: #1a73e8; }

/* Formulaire de dépôt d'avis */
.avis-formulaire { display: flex; flex-direction: column; gap: 1rem; }
.note-choix { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; }
.note-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.note-choix label { cursor: pointer; color: var(--bordure-forte); opacity: .28; transition: opacity var(--transition), color var(--transition); }
.note-choix label svg { width: 32px; height: 32px; }
.note-choix input:checked ~ label,
.note-choix label:hover, .note-choix label:hover ~ label { color: #FBBC04; opacity: 1; }
.note-choix input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.bandeau-google { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding: 1.15rem 1.5rem; border: 2px solid var(--bordure); border-radius: var(--r-xl); background: var(--surface); }
.bandeau-google__note { display: flex; align-items: center; gap: .7rem; }
.bandeau-google__note b { font-family: var(--f-display); font-weight: 900; font-variation-settings: "wght" 900, "wdth" 120; font-size: var(--t-xl); letter-spacing: -.05em; line-height: 1; }
.bandeau-google svg.logo-google { height: 22px; width: auto; }

/* ----------------------------------------------------------- 17. FAQ */
.faq { display: grid; gap: .6rem; }
.faq details { background: var(--surface); border: 2px solid var(--bordure); border-radius: var(--r-l); overflow: hidden; }
.faq details[open] { border-color: var(--rose); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-variation-settings: "wght" 700, "wdth" 105; font-size: var(--t-base); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 3px solid var(--rose); border-bottom: 3px solid var(--rose); transform: rotate(45deg) translateY(-2px); transition: transform var(--transition); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq .reponse { padding: 0 1.4rem 1.4rem; }
.faq .reponse p { font-size: var(--t-s); color: var(--texte-doux); }

/* ------------------------------------------------ 18. Recherche ville */
.recherche { position: relative; }
.recherche input { padding-left: 2.9rem; }
.recherche > svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; color: var(--texte-tenu); pointer-events: none; }
.resultats-villes { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; background: var(--surface); border: 2px solid var(--bordure); border-radius: var(--r-l); box-shadow: var(--ombre-l); max-height: 320px; overflow-y: auto; z-index: 20; padding: .35rem; }
.resultats-villes:empty { display: none; }
.resultats-villes a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; border-radius: var(--r-m); text-decoration: none; font-size: var(--t-s); font-weight: 700; color: var(--texte); }
.resultats-villes a:hover, .resultats-villes a:focus-visible { background: var(--surface-douce); color: var(--rose-vif); }
.resultats-villes small { color: var(--texte-tenu); font-weight: 400; }

.nuage-liens { display: flex; flex-wrap: wrap; gap: .4rem; }
.nuage-liens a, .nuage-liens span {
  display: inline-block; padding: .5rem .95rem; border-radius: var(--r-pill);
  background: var(--surface); border: 2px solid var(--bordure);
  font-family: var(--f-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .02em; text-decoration: none; color: var(--texte-doux); transition: all var(--transition);
}
.nuage-liens a:hover { border-color: var(--rose); color: var(--rose); }
.section--noir .nuage-liens a, .section--noir .nuage-liens span { background: transparent; border-color: rgba(255,255,255,.2); color: var(--gris-300); }

/* ------------------------------------------------------- 19. Fil d'Ariane */
.ariane { padding-block: .9rem; font-size: var(--t-xs); color: var(--texte-tenu); border-bottom: 1px solid var(--bordure); }
.ariane ol { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ariane li:not(:last-child)::after { content: "›"; margin-left: .35rem; opacity: .5; }
.ariane a { text-decoration: none; }
.ariane a:hover { color: var(--rose); }

/* --------------------------------------------------------- 20. Article */
.article-corps { max-width: var(--largeur-texte); }
.article-corps > * + * { margin-top: 1.05rem; }
.article-corps h2 { font-size: var(--t-xl); margin-top: 2.8rem; }
.article-corps h3 { font-size: var(--t-l); margin-top: 2rem; }
.article-corps ul, .article-corps ol { display: flex; flex-direction: column; gap: .45rem; padding-left: 1.2rem; }
.article-corps ul li { list-style: none; position: relative; }
.article-corps ul li::before { content: ""; position: absolute; left: -1.1rem; top: .6em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--rose); }
.article-corps ol { list-style: decimal; }
.article-corps ol li::marker { color: var(--rose); font-weight: 800; }
.article-corps a { color: var(--rose); text-underline-offset: 3px; }
.article-corps blockquote { border-left: 4px solid var(--rose); padding-left: 1.1rem; font-size: var(--t-m); }
.encadre { background: var(--surface-douce); border-radius: var(--r-l); padding: 1.3rem 1.5rem; }
.encadre p { font-size: var(--t-s); max-width: none; }
.encadre strong { color: var(--rose-vif); }
.tableau-enveloppe { overflow-x: auto; border: 2px solid var(--bordure); border-radius: var(--r-l); }
.tableau-enveloppe table { font-size: var(--t-s); min-width: 460px; }
.tableau-enveloppe th, .tableau-enveloppe td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--bordure); }
.tableau-enveloppe th { background: var(--noir); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; border-bottom: 0; }
.tableau-enveloppe td:not(:first-child) { font-variant-numeric: tabular-nums; }
.tableau-enveloppe tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------- 21. Pied de page */
.pied { background: var(--noir); color: var(--gris-300); padding-block: clamp(2.75rem, 5vw, 4.5rem) 2rem; }
.pied a { color: var(--gris-300); text-decoration: none; font-size: var(--t-s); }
.pied a:hover { color: var(--rose-clair); }
.pied h3 { color: #fff; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .16em; margin-bottom: .9rem; }
.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.pied__grille ul { display: flex; flex-direction: column; gap: .45rem; }
.pied__bas { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: var(--t-xs); color: var(--texte-tenu); }
.reseaux { display: flex; gap: .45rem; }
.reseaux a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); transition: all var(--transition); }
.reseaux a:hover { background: var(--rose); box-shadow: none; color: #fff; }
.reseaux svg { width: 16px; height: 16px; }

/* ------------------------------------------------- 22. Barre CTA mobile */
.cta-mobile {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; display: none; gap: .45rem;
  padding: .6rem var(--gouttiere) calc(.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 2px solid var(--noir);
}
.cta-mobile .btn { flex: 1; padding: .95rem .6rem; font-size: .72rem; letter-spacing: .02em; }
@media (max-width: 800px) { .cta-mobile { display: flex; } body { padding-bottom: 78px; } }

.bulle-wa { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 79; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #1FA855; color: #fff; box-shadow: var(--ombre-l); transition: transform var(--transition); }
.bulle-wa:hover { transform: scale(1.06); }
.bulle-wa svg { width: 27px; height: 27px; }
@media (max-width: 800px) { .bulle-wa { display: none; } }

/* ------------------------------- 21 bis. Carte cadeau 500 € (recto/verso) */
.carte-cadeau {
  background: transparent; perspective: 1400px; color: #fff;
  width: min(100%, 360px); aspect-ratio: 1.586; border-radius: 1.25rem;
  cursor: pointer;
}
.carte-cadeau__inner {
  position: relative; width: 100%; height: 100%; text-align: left;
  transition: transform .85s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d;
}
.carte-cadeau:hover .carte-cadeau__inner,
.carte-cadeau:focus-visible .carte-cadeau__inner { transform: rotateY(180deg); }
.carte-cadeau__face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 1.25rem; padding: 1.35rem 1.5rem; overflow: hidden;
  box-shadow: rgba(10,9,12,.4) 0 2px 2px, rgba(10,9,12,.3) 0 7px 16px -3px, rgba(255,255,255,.22) 0 1px 0 inset;
}
.carte-cadeau__recto {
  background:
    radial-gradient(120% 120% at 12% 8%, rgba(255,255,255,.34), transparent 46%),
    linear-gradient(140deg, #FF7FB6 0%, var(--rose) 42%, #B00E58 100%);
}
.carte-cadeau__verso {
  transform: rotateY(180deg);
  background: linear-gradient(140deg, #0E3557 0%, var(--noir) 60%, #061C31 100%);
}

/* Recto */
.carte-cadeau__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.carte-cadeau__marque {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 118;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; line-height: 1.25;
}
.carte-cadeau__type { font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; opacity: .78; font-weight: 700; }
.carte-cadeau__puce {
  width: 42px; height: 32px; border-radius: 6px; flex: none;
  background: linear-gradient(140deg, #F7D98B, #C9A24A 55%, #F2E3AE);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 1px; padding: 4px;
}
.carte-cadeau__puce i { background: rgba(0,0,0,.12); border-radius: 1px; }
.carte-cadeau__sansfil { width: 20px; height: 20px; flex: none; opacity: .85; }
.carte-cadeau__montant {
  margin-top: auto;
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 125;
  font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: .85; letter-spacing: -.055em;
}
.carte-cadeau__mention { font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; opacity: .88; margin-top: .3rem; }
.carte-cadeau__pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: .9rem; }
.carte-cadeau__porteur { font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; opacity: .9; }
.carte-cadeau__porteur small { display: block; font-size: .5rem; letter-spacing: .22em; opacity: .65; margin-bottom: .15rem; font-weight: 600; }
.carte-cadeau__retourner { font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; opacity: .72; font-weight: 700; }

/* Verso */
.carte-cadeau__bande {
  position: absolute; left: 0; right: 0; top: 1.5rem; height: 2.6rem;
  background: repeating-linear-gradient(45deg, #2E2E2E, #2E2E2E 10px, #1C1C1C 10px, #1C1C1C 20px);
}
.carte-cadeau__signature {
  margin-top: 4.4rem; background: #fff; color: var(--noir);
  border-radius: 4px; padding: .35rem .6rem;
  font-family: var(--f-data); font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.carte-cadeau__conditions { margin-top: .7rem; display: flex; flex-direction: column; gap: .22rem; }
.carte-cadeau__conditions li { font-size: .63rem; color: var(--gris-300); display: flex; gap: .4rem; align-items: flex-start; line-height: 1.4; }
.carte-cadeau__conditions svg { width: .8em; height: .8em; flex: none; margin-top: .28em; color: var(--rose-clair); }
.carte-cadeau__legal { margin-top: auto; font-size: .5rem; letter-spacing: .06em; color: var(--texte-tenu); }

@media (prefers-reduced-motion: reduce) {
  .carte-cadeau__inner { transition: none; }
}

/* ------------------------------------ 22 bis. Alerte de preuve sociale */
.alerte-preuve {
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 78;
  width: min(calc(100vw - 2.8rem), 330px); min-height: 78px;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem .7rem .7rem;
  background: color-mix(in srgb, var(--noir) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-l);
  color: #fff;
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}
.alerte-preuve[data-visible="true"] { opacity: 1; transform: none; pointer-events: auto; }
.alerte-preuve:hover { cursor: pointer; transform: scale(1.04); }

.alerte-preuve__vignette {
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 900; font-size: 1.05rem; color: #fff;
  background: linear-gradient(150deg, var(--rose-clair), var(--rose) 55%, #9E0B4C);
  transition: background .5s ease-in-out;
}
.alerte-preuve:hover .alerte-preuve__vignette { background: linear-gradient(150deg, var(--rose), #6D0836); }

.alerte-preuve__texte { min-width: 0; display: flex; flex-direction: column; gap: .12rem; flex: 1; }
.alerte-preuve__haut { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.alerte-preuve__nom {
  font-family: var(--f-display); font-weight: 800; font-size: .93rem;
  letter-spacing: -.015em; color: #fff; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alerte-preuve__quand { font-size: .66rem; color: var(--gris-300); white-space: nowrap; }
.alerte-preuve__action { font-size: .78rem; color: var(--rose-clair); font-weight: 600; }
.alerte-preuve__detail {
  font-size: .72rem; color: var(--gris-300); font-weight: 300;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alerte-preuve__fermer {
  position: absolute; top: .35rem; right: .45rem;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gris-300);
  font-size: 1rem; line-height: 1; transition: color var(--transition);
}
.alerte-preuve__fermer:hover { color: #fff; }

@media (max-width: 800px) { .alerte-preuve { bottom: 5.6rem; left: 1rem; right: 1rem; width: auto; } }
@media (prefers-reduced-motion: reduce) {
  .alerte-preuve { transition: opacity .2s; }
  .alerte-preuve:hover { transform: none; }
}

/* ------------------------------------------------------- 23. Animations */
.apparait { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.3,.7,.4,1), transform .55s cubic-bezier(.3,.7,.4,1); }
.apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; transition: none; } }
.flotte { animation: flottement 7s ease-in-out infinite; }
@keyframes flottement { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .flotte { animation: none; } }

/* ================================ 21 ter. Titre souligné + bande CTA */
.titre-souligne { text-align: center; }
.titre-souligne h2 { display: inline-block; }
.titre-souligne h2::after {
  content: ""; display: block; width: 74px; height: 6px; border-radius: 3px;
  background: var(--jaune); margin: .85rem auto 0;
}
.titre-souligne p { margin-inline: auto; margin-top: .9rem; }

.bande-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  background: var(--surface); border: 2px solid var(--bordure);
  border-radius: var(--r-xl); overflow: hidden;
}
.bande-cta__media { position: relative; min-height: 260px; }
.bande-cta__media .media { position: absolute; inset: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.bande-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.bande-cta__corps {
  display: flex; flex-direction: column; gap: .85rem; align-items: flex-start;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.bande-cta__corps h3 { font-size: var(--t-xl); }
.bande-cta__corps p { font-size: var(--t-m); color: var(--texte-doux); }
.bande-cta__corps .recherche { width: 100%; max-width: 420px; }
@media (max-width: 860px) {
  .bande-cta { grid-template-columns: 1fr; }
  .bande-cta__media { min-height: 210px; }
}

/* ============================================ 22 ter. Modale (popup) */
.modale {
  width: min(100% - 2rem, 620px); max-height: min(88vh, 900px);
  padding: 0; border: 0; border-radius: var(--r-xl);
  background: var(--surface); color: var(--texte);
  box-shadow: 0 40px 90px -30px rgba(6, 28, 49, .55);
  overflow: hidden;
}
.modale::backdrop { background: rgba(6, 28, 49, .62); backdrop-filter: blur(4px); }
.modale[open] { animation: modaleEntree .28s cubic-bezier(.2,.9,.3,1); }
@keyframes modaleEntree { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .modale[open] { animation: none; } }

.modale__entete {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 1.5rem 1rem;
  background: linear-gradient(150deg, #0E3557, var(--noir));
  color: #fff;
}
.modale__entete h2 { font-size: var(--t-l); color: #fff; margin-bottom: .25rem; }
.modale__entete p { font-size: var(--t-s); color: #BFD3E2; max-width: 42ch; }
.modale__fermer {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
  color: #fff; background: rgba(255,255,255,.14); transition: background var(--transition);
}
.modale__fermer:hover { background: rgba(255,255,255,.28); }
.modale__corps { padding: 1.4rem 1.5rem 1.6rem; overflow-y: auto; max-height: calc(88vh - 7rem); }

/* Avis en attente de validation */
.avis-g--attente { border-style: dashed; border-color: var(--rose); }
.avis-attente-badge {
  display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
  font-family: var(--f-display); font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .3rem .6rem; border-radius: var(--r-pill);
  background: var(--rose-voile); color: var(--rose-vif);
}
.avis-attente-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ======================================= 23 bis. Ajustements mobile */
@media (max-width: 700px) {
  :root { --section-y: clamp(2.75rem, 9vw, 3.75rem); }

  /* Titres : chasse resserrée et halo allégé — plus lisible sur petit écran */
  h1 { font-variation-settings: "wght" 900, "wdth" 100; letter-spacing: -.028em; line-height: 1; }
  h2 { font-variation-settings: "wght" 900, "wdth" 100; letter-spacing: -.026em; line-height: 1.05; }
  h3 { font-variation-settings: "wght" 800, "wdth" 100; }
  .heros h1 { animation: none; }

  .heros { padding-block: 2rem 2.5rem; }
  .heros__grille { gap: 1.75rem; }
  .plomb { font-size: 1rem; }

  .atouts-bande { grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.75rem; }
  .atouts-bande > div { padding: .85rem .9rem; gap: .55rem; flex-direction: column; }
  .atouts-bande svg { width: 21px; height: 21px; }
  .atouts-bande h3 { font-size: .82rem; }
  .atouts-bande p { font-size: .7rem; }

  .carte, .etapes li, .avis article { padding: 1.15rem 1.2rem; border-radius: var(--r-l); }
  .carte-verre { padding: 1.15rem 1.1rem; border-radius: var(--r-l); }
  .heros .carte-verre { box-shadow: 5px 5px 0 var(--jaune); }
  .grille { gap: .75rem; }
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }

  .btn { padding: .95rem 1.4rem; font-size: .78rem; }
  .btn--grand { padding: 1.05rem 1.5rem; font-size: .85rem; }
  .rangee > .btn { flex: 1 1 auto; }

  .media__repli b { font-size: clamp(2.2rem, 12vw, 3rem); }
  .prix-flottant { padding: .7rem 1rem; gap: .6rem; left: 0; bottom: .75rem; }
  .prix-flottant b { font-size: 1.7rem; }
  .prix-flottant span { font-size: .58rem; max-width: 10ch; }

  .confiance { grid-template-columns: 1fr 1fr; }
  .marquee__piste > * { font-size: .82rem; letter-spacing: 0; gap: 1.25rem; }
  .marquee__piste { gap: 1.25rem; }

  .faq summary { padding: .95rem 1.05rem; font-size: .92rem; }
  .faq .reponse { padding: 0 1.05rem 1.05rem; }
  .tableau-enveloppe table { min-width: 400px; }
}

@media (max-width: 400px) {
  :root { --t-3xl: 1.8rem; --t-2xl: 1.5rem; }
  .atouts-bande { grid-template-columns: 1fr; }
  .confiance { grid-template-columns: 1fr; }
  .cta-mobile .btn { font-size: .65rem; padding: .85rem .4rem; gap: .3rem; }
}

/* ------------------------------------------------------------ 24. Print */
@media print {
  .entete, .cta-mobile, .bulle-wa, .marquee, .bandeau-offre, .pied, .heros::before, .heros::after { display: none !important; }
  body { color: #000; background: #fff; }
  .heros, .section--noir, .section--rose, .offre, .resultat { background: #fff !important; color: #000 !important; }
  .heros h1, .heros h2, .section--noir h2, .offre h2 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}

/* =========================================================================
   CORRECTIFS — chargés après style.css, donc prioritaires dans la cascade.
   Réparent les règles supprimées lors du retrait global des halos de texte
   et recomposent le héros.
   ========================================================================= */

/* ---- Héros : aplat rose, photo lisible sur la moitié droite -------------- */
.heros { background: #ff2e88; }
.heros__photo { position: absolute; inset: 0 0 0 auto; width: min(50%, 820px); z-index: -1; }
.heros__photo-cadre { position: absolute; inset: 0; border-radius: 0; box-shadow: none; background: none; }
.heros__photo-cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.heros__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #ff2e88 0%, rgba(255, 46, 136, .92) 14%, rgba(255, 46, 136, 0) 44%);
}
@media (max-width: 980px) {
  .heros__photo { width: 100%; opacity: .28; }
  .heros__photo::after { background: linear-gradient(180deg, rgba(255, 46, 136, .5), #ff2e88 74%); }
}

/* ---- Titre du héros ------------------------------------------------------ */
.heros h1 { color: #fff; }
/* Surlignage blanc facon marqueur : la bande epouse la largeur du texte */
/* Premiere ligne du titre isolee : le surlignage suivant se decoupe par ligne */
.heros h1 .ligne { display: block; }

/* Surlignage : deux bandes blanches independantes, legerement inclinees */
.heros h1 .accent { display: block; background: none; padding: 0; color: inherit; margin-top: .18em; }
.surligne {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  background: #fff;
  color: #ff2e88;
  padding: .05em .32em .11em;
  border-radius: 10px;
  transform-origin: left center;
}
.surligne--a { transform: rotate(-1.8deg); }
.surligne--b { transform: rotate(1.4deg); margin-top: .16em; margin-left: .22em; }
@media (max-width: 700px) {
  .surligne { padding: .05em .26em .1em; border-radius: 8px; }
  .surligne--a { transform: rotate(-1.2deg); }
  .surligne--b { transform: rotate(1deg); margin-left: .12em; }
}
.heros h1 { line-height: 1.05; }
@media (max-width: 700px) { .heros h1 .accent { padding: .04em .22em .09em; border-radius: 6px; } }

/* ---- Tout bloc clair posé sur un fond coloré garde un texte foncé -------- */
.heros .carte-rdv, .heros .carte-verre,
.section--rose .carte-rdv, .section--rose .carte-verre,
.section--rose-doux .carte-rdv, .section--rose-doux .carte-verre { color: var(--texte); }

.heros .carte-rdv h1, .heros .carte-rdv h2, .heros .carte-rdv h3,
.heros .carte-verre h1, .heros .carte-verre h2, .heros .carte-verre h3,
.section--rose .carte-rdv h2, .section--rose .carte-verre h2,
.section--rose-doux .carte-rdv h2, .section--rose-doux .carte-verre h2 { color: var(--texte); }

.heros .carte-rdv p, .heros .carte-verre p,
.section--rose .carte-rdv p, .section--rose .carte-verre p,
.section--rose-doux .carte-rdv p, .section--rose-doux .carte-verre p { color: var(--texte-doux); }

.heros .carte-rdv label, .heros .carte-verre label,
.heros .carte-rdv small,  .heros .carte-verre small { color: var(--texte-doux); }
.heros .carte-rdv .tenu, .heros .carte-verre .tenu,
.heros .carte-rdv .consentement, .heros .carte-verre .consentement { color: var(--texte-tenu); }
.heros .carte-rdv .champ input, .heros .carte-verre .champ input,
.heros .carte-verre .champ select, .heros .carte-verre .champ textarea { color: var(--texte); }

/* Règles supprimées par erreur, restaurées */
.carte-rdv h2   { font-size: 1.15rem; letter-spacing: -.025em; line-height: 1.15; }
.carte-verre h2 { font-size: 1.15rem; letter-spacing: -.025em; line-height: 1.15; }
.carte-rdv > p  { font-size: .8rem; color: var(--texte-doux); line-height: 1.45; }

/* ---- Bandeau d'atouts sur l'aplat rose ---------------------------------- */
.heros .atouts-bande > div { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); }
.heros .atouts-bande h3, .heros .atouts-bande svg { color: #fff; }
.heros .atouts-bande p { color: rgba(255, 255, 255, .86); }

/* ---- Note Google du héros ----------------------------------------------- */
.heros .note-globale { background: #fff; border-color: #fff; color: var(--texte); }
.heros .note-globale .tenu { color: var(--texte-tenu); }

/* =========================================================================
   MOTIFS DE FOND — tribal organique + séparations en zigzag
   Tout est généré en CSS/SVG inline : aucune image, aucune requête réseau.
   ========================================================================= */

/* ------------------------------------------------------------------------
   1. TRAME TRIBALE
   feTurbulence produit un bruit fractal, feComponentTransfer le seuille en
   aplats : on obtient des formes organiques irrégulières, jamais répétitives
   à l'œil. Le motif est posé en ::before, sous le contenu.
   ------------------------------------------------------------------------ */
.section > .contenant,
.section > .contenant-etroit,
.heros > .contenant,
.pied > .contenant { position: relative; z-index: 2; }

.section, .heros, .pied { position: relative; }
.section, .pied { overflow: hidden; }

.section::before, .heros::before, .pied::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Sections claires : tribal rose très pâle */
.section:not(.section--rose):not(.section--noir)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='17'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 1 1 0 0 1 1 1 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23t)' fill='%23ff2e88'/%3E%3C/svg%3E");
  opacity: .045;
}

/* Aplats roses : tribal blanc */
.section--rose::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cfilter id='t2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0055' numOctaves='3' seed='29'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 1 1 0 0 1 1 1 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23t2)' fill='%23d1105f'/%3E%3C/svg%3E");
  opacity: .16;
}

/* Sections bleu nuit et pied de page : tribal rose */
.section--noir::before, .pied::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cfilter id='t3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='3' seed='41'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 1 1 1 0 0 1 1 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23t3)' fill='%23ff2e88'/%3E%3C/svg%3E");
  opacity: .07;
}

/* Héros : tribal blanc, estompé vers la droite pour ne pas gêner la photo */
.heros::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cfilter id='t4'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0048' numOctaves='3' seed='53'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 1 1 0 0 1 1 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23t4)' fill='%23d1105f'/%3E%3C/svg%3E");
  opacity: .15;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 62%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 62%);
}
.heros__photo { z-index: 1; }

/* =========================================================================
   CITADINE FLOTTANTE
   Élément décoratif : détouré, en lévitation, avec une ombre portée au sol
   qui respire en contretemps. Purement visuel — aria-hidden côté HTML.
   ========================================================================= */

.voiture-flottante {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  width: clamp(190px, 26vw, 340px);
  filter: drop-shadow(0 26px 26px rgba(10, 42, 72, .28));
  animation: levitation 6.5s ease-in-out infinite;
}
.voiture-flottante img { width: 100%; height: auto; }

/* Ombre au sol, indépendante de la voiture pour respirer en contretemps */
.voiture-flottante::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -6%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(10, 42, 72, .34), transparent 72%);
  animation: ombre-levitation 6.5s ease-in-out infinite;
}

@keyframes levitation {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-16px) rotate(1.2deg); }
}
@keyframes ombre-levitation {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(.86);  opacity: .3; }
}

/* --- Placements ---------------------------------------------------------- */

/* Héros : la voiture chevauche le coin haut-gauche du formulaire */
.voiture-flottante--heros {
  top: clamp(-90px, -9vw, -40px);
  left: clamp(-130px, -13vw, -60px);
  width: clamp(200px, 28vw, 380px);
}

/* Bloc CTA final : la voiture accompagne la carte cadeau */
.voiture-flottante--cta {
  right: clamp(-70px, -6vw, -20px);
  bottom: clamp(-50px, -5vw, -18px);
  width: clamp(170px, 22vw, 300px);
  animation-delay: -2.2s;
}
.voiture-flottante--cta::after { animation-delay: -2.2s; }

/* --- Adaptations --------------------------------------------------------- */
@media (max-width: 980px) {
  .voiture-flottante--heros { position: relative; top: 0; left: 0; margin: 0 auto .75rem; width: min(72%, 300px); }
  .voiture-flottante--cta { display: none; }
}
@media (max-width: 560px) {
  .voiture-flottante--heros { width: min(80%, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  .voiture-flottante, .voiture-flottante::after { animation: none; }
}
@media print { .voiture-flottante { display: none; } }

/* --- Mascotte : proportions verticales, ombre plus resserree ------------- */
.mascotte-flottante { filter: drop-shadow(0 22px 22px rgba(10, 42, 72, .26)); }
.mascotte-flottante::after { left: 24%; right: 24%; bottom: -3%; height: 11px; }

/* Heros : la mascotte se tient a gauche du formulaire */
.mascotte-flottante--heros {
  top: clamp(-70px, -7vw, -30px);
  left: clamp(-118px, -12vw, -55px);
  width: clamp(120px, 15vw, 190px);
  animation-delay: -1.1s;
}
.mascotte-flottante--heros::after { animation-delay: -1.1s; }

@media (max-width: 980px) {
  .mascotte-flottante--heros { position: absolute; top: -54px; left: auto; right: 4px; width: 96px; margin: 0; }
}
@media (max-width: 560px) {
  .mascotte-flottante--heros { top: -44px; right: 0; width: 78px; }
}

/* =========================================================================
   MOBILE — barre de navigation basse, menu épuré, petites cartes nettes
   Parti pris : lisibilité avant décoration. Aucun effet de verre.
   ========================================================================= */

/* ------------------------------------------------------------------------
   1. PETITES CARTES D'ATOUTS — aplats nets, plus de glassmorphism
   ------------------------------------------------------------------------ */
.atouts-bande > div {
  background: #fff;
  border: 0;
  border-radius: var(--r-m);
  padding: 1rem 1.15rem;
  gap: .75rem;
  align-items: flex-start;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(10, 42, 72, .06);
}
.atouts-bande svg { width: 22px; height: 22px; color: var(--rose); }
.atouts-bande h3 { font-size: .88rem; color: var(--texte); margin-bottom: .1rem; line-height: 1.2; }
.atouts-bande p  { font-size: .74rem; color: var(--texte-doux); line-height: 1.4; max-width: 32ch; }

/* Même traitement sur les fonds colorés : carte blanche, texte foncé */
.heros .atouts-bande > div,
.section--rose .atouts-bande > div,
.section--noir .atouts-bande > div { background: #fff; border: 0; }
.heros .atouts-bande h3,
.section--rose .atouts-bande h3,
.section--noir .atouts-bande h3 { color: var(--texte); }
.heros .atouts-bande p,
.section--rose .atouts-bande p,
.section--noir .atouts-bande p { color: var(--texte-doux); }
.heros .atouts-bande svg,
.section--rose .atouts-bande svg,
.section--noir .atouts-bande svg { color: var(--rose); }

/* ------------------------------------------------------------------------
   2. BARRE DE NAVIGATION BASSE — 5 onglets, icône + libellé
   ------------------------------------------------------------------------ */
.barre-mobile { display: none; }

@media (max-width: 900px) {
  .barre-mobile {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--bordure);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .barre-mobile a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .2rem; padding: .55rem .25rem .5rem;
    text-decoration: none; color: var(--texte);
    font-size: .6rem; font-weight: 600; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
  }
  .barre-mobile a svg { width: 22px; height: 22px; }
  .barre-mobile a:active { color: var(--rose); }
  .barre-mobile a[aria-current="page"] { color: var(--rose); }

  /* L'onglet central est le seul coloré : c'est l'action principale */
  .barre-mobile__cta { color: #fff !important; }
  .barre-mobile__cta svg {
    background: var(--rose); color: #fff;
    width: 40px !important; height: 40px !important;
    padding: 9px; border-radius: 50%;
    box-shadow: 0 4px 12px -2px rgba(255, 46, 136, .5);
  }
  .barre-mobile__cta span { color: var(--rose); font-weight: 800; }

  body { padding-bottom: 66px; }
  .bulle-wa { display: none; }
}

/* ------------------------------------------------------------------------
   3. MENU MOBILE — liste simple, gros points de contact
   ------------------------------------------------------------------------ */
@media (max-width: 1060px) {
  .nav {
    width: min(100%, 420px);
    padding: 5.25rem 0 2rem;
    gap: 0;
    background: var(--surface);
    border-left: 0;
    box-shadow: -18px 0 50px -20px rgba(10, 42, 72, .3);
  }
  .nav > ul { gap: 0; }

  /* Entrées de premier niveau */
  .nav > ul > li > a,
  .nav__parent > button {
    border-radius: 0;
    padding: 1.05rem 1.4rem;
    font-family: var(--f-corps);
    font-size: 1.02rem; font-weight: 700;
    text-transform: none; letter-spacing: -.01em;
    border-bottom: 1px solid var(--bordure);
    color: var(--texte);
  }
  .nav > ul > li > a:hover, .nav__parent > button:hover { background: var(--fond-alt); color: var(--texte); }
  .nav__parent[data-ouvert="true"] > button { background: transparent; color: var(--rose); border-bottom-color: transparent; }

  /* Sous-menus : liste sobre, sans encadré */
  .sous-menu {
    position: static; transform: none; min-width: 0;
    background: var(--fond-alt); border: 0; border-radius: 0;
    box-shadow: none; margin: 0; padding: .25rem 0 .5rem;
    border-bottom: 1px solid var(--bordure);
  }
  .sous-menu a {
    padding: .8rem 1.4rem .8rem 2.1rem;
    border-radius: 0; font-size: .95rem; font-weight: 600;
    gap: .1rem;
  }
  .sous-menu a:hover { background: transparent; color: var(--rose); }
  .sous-menu a small { font-size: .74rem; }

  /* Pied du menu : une seule action + le téléphone */
  .nav__pied {
    margin-top: 1.5rem; padding: 1.25rem 1.4rem 0;
    border-top: 0; gap: .5rem;
  }
  .nav__pied .btn { border-radius: var(--r-pill); }

  /* En-tête simplifié : logo + téléphone + burger */
  .entete__interieur { min-height: 62px; gap: .75rem; }
  .logo svg { width: 32px; height: 32px; }
  .logo__marque span:first-child { font-size: .98rem; }
  .logo__marque span:last-child { font-size: .5rem; letter-spacing: .18em; }
  .entete__tel { padding: .5rem .6rem; }
  .burger { width: 42px; height: 42px; box-shadow: none; }
  .voile { background: rgba(10, 42, 72, .5); }
}

@media (max-width: 900px) {
  /* La barre basse remplace le bouton du header : on l'enlève pour respirer */
  .entete .btn { display: none; }
}

/* ------------------------------------------------------------------------
   4. RESPIRATION GÉNÉRALE SUR PETIT ÉCRAN
   ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  .heros { padding-block: 1.75rem 2.25rem; }
  .heros__grille { gap: 1.5rem; }
  .atouts-bande { grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.5rem; }
  .atouts-bande > div { flex-direction: column; gap: .45rem; padding: .85rem .9rem; }
  .atouts-bande p { font-size: .68rem; }
  .rangee > .btn { flex: 1 1 100%; }
  .note-globale { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .atouts-bande { grid-template-columns: 1fr; }
  .barre-mobile a { font-size: .55rem; }
  .barre-mobile a svg { width: 20px; height: 20px; }
  .barre-mobile__cta svg { width: 36px !important; height: 36px !important; padding: 8px; }
}

.mention-rgpd { font-size: .68rem; line-height: 1.45; color: var(--texte-tenu); text-align: center; margin: 0; max-width: none; }
.mention-rgpd a { color: inherit; text-underline-offset: 2px; }

/* Pied de carte : deux colonnes compactes, plus de retour a la ligne force */
.carte__meta {
  font-size: .63rem;
  letter-spacing: .02em;
  gap: .7rem;
  align-items: baseline;
  line-height: 1.35;
  padding-top: .7rem;
}
.carte__meta > span { flex: 0 0 auto; white-space: nowrap; color: var(--texte-tenu); }
.carte__meta em { text-align: right; text-transform: none; font-weight: 700; font-size: .68rem; letter-spacing: 0; }
@media (max-width: 560px) { .carte__meta { font-size: .6rem; } .carte__meta em { font-size: .64rem; } }

/* =========================================================================
   VÉRIFICATION PAR IMMATRICULATION + retouches avis / modale
   ========================================================================= */

.verif {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: clamp(1.4rem, 3vw, 2.5rem);
  max-width: 640px;
  color: var(--texte);
}

/* --- Étape 1 : saisie ---------------------------------------------------- */
.verif__saisie { display: flex; flex-direction: column; gap: .9rem; }
.verif__saisie .champ--plaque input {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  letter-spacing: .16em;
  padding: .85rem .8rem;
  border-width: 2px;
  border-color: var(--noir);
  border-radius: var(--r-m);
  text-align: center;
}
.verif__saisie .champ--plaque input:focus { border-color: var(--rose); }
.verif__note { font-size: .7rem; color: var(--texte-tenu); text-align: center; margin: 0; max-width: none; }

/* --- Étape 2 : analyse --------------------------------------------------- */
.verif__analyse { display: flex; flex-direction: column; gap: 1rem; }
.verif__plaque-lue {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(1.4rem, 4vw, 1.9rem); letter-spacing: .16em;
  text-align: center; margin: 0; max-width: none;
  padding: .7rem; border: 2px dashed var(--bordure-forte); border-radius: var(--r-m);
}
.verif__etapes { display: flex; flex-direction: column; gap: .55rem; }
.verif__etapes li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: var(--texte-tenu);
  transition: color .3s;
}
.verif__etapes li::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--bordure-forte); transition: all .3s;
}
.verif__etapes li[data-actif] { color: var(--texte); font-weight: 600; }
.verif__etapes li[data-actif]::before {
  border-color: var(--rose);
  border-top-color: transparent;
  animation: verifRotation .7s linear infinite;
}
.verif__etapes li[data-fait] { color: var(--texte-doux); }
.verif__etapes li[data-fait]::before {
  background: var(--succes); border-color: var(--succes); animation: none;
}
@keyframes verifRotation { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .verif__etapes li[data-actif]::before { animation: none; border-top-color: var(--rose); }
}

.verif__barre { height: 6px; border-radius: 3px; background: var(--fond-alt); overflow: hidden; }
.verif__barre span { display: block; height: 100%; width: 0; background: var(--rose); border-radius: 3px; }

/* --- Étape 3 : résultat -------------------------------------------------- */
.verif__resultat { display: flex; flex-direction: column; gap: .7rem; outline: none; }
.verif__badge {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  font-family: var(--f-display); font-weight: 800; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .12em;
  padding: .4rem .85rem; border-radius: var(--r-pill);
  background: #E6F6EF; color: var(--succes);
}
.verif__badge svg { width: 14px; height: 14px; }
.verif__montant { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0; max-width: none; }
.verif__montant b {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 118;
  font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; letter-spacing: -.05em;
  color: var(--rose);
}
.verif__montant span { font-size: .95rem; color: var(--texte-doux); }
.verif__choix-titre {
  font-family: var(--f-display); font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--texte-tenu);
  margin: .35rem 0 0; max-width: none;
}
.verif__choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .4rem; }
.verif__choix li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600;
  background: var(--fond-alt); border-radius: var(--r-s); padding: .55rem .7rem;
}
.verif__choix svg { width: 15px; height: 15px; flex: none; color: var(--rose); }
.verif__refaire {
  align-self: flex-start; font-size: .75rem; font-weight: 600;
  color: var(--texte-tenu); text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.verif__refaire:hover { color: var(--rose); }

@media (max-width: 560px) {
  .verif { padding: 1.2rem 1.1rem; border-radius: var(--r-l); }
  .verif__choix { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   AVIS — pied de fiche au format Google
   ========================================================================= */
.avis-g__pied {
  margin-top: auto; padding-top: .7rem;
  display: flex; align-items: center; gap: .4rem;
  border-top: 1px solid var(--g-bord);
}
.avis-g__pied svg.logo-google { height: 14px; width: auto; flex: none; }
.avis-g__pied span { font-size: .68rem; color: var(--g-gris); line-height: 1.2; }

/* Bouton « Déposer un avis » en jaune */
.btn--jaune { --btn-fond: var(--jaune); --btn-texte: #0E2C47; --btn-survol: var(--jaune-clair); --btn-bord: transparent; }
.section--rose .btn--jaune, .section--noir .btn--jaune, .heros .btn--jaune {
  --btn-fond: var(--jaune); --btn-texte: #0E2C47;
}

/* =========================================================================
   MODALE — centrée à l'écran
   ========================================================================= */
.modale {
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: min(88vh, 900px);
}

/* =========================================================================
   CARTE DE FRANCE · BLOC DE FINANCEMENT · CTA FINAL
   ========================================================================= */

/* ---------------------------------------------------- Carte de France ---- */
.carte-france { margin: 0; display: flex; flex-direction: column; gap: .9rem; }
.carte-france svg { width: 100%; height: auto; display: block; }

.cf__contour {
  fill: color-mix(in srgb, var(--rose) 8%, transparent);
  stroke: var(--rose);
  stroke-width: 2;
  stroke-linejoin: round;
}
.cf__pt { fill: var(--rose); opacity: .55; transition: opacity .2s, r .2s; }
.cf__villes .cf__pt:hover { opacity: 1; r: 5; }
.cf__pt--agence { fill: var(--noir); opacity: 1; }
.cf__halo { fill: var(--rose); opacity: .22; transform-origin: center; animation: cfPulse 3.2s ease-out infinite; }
.cf__agence:nth-child(2n) .cf__halo { animation-delay: -1.1s; }
.cf__agence:nth-child(3n) .cf__halo { animation-delay: -2.2s; }
@keyframes cfPulse {
  0%   { transform: scale(.55); opacity: .38; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cf__halo { animation: none; opacity: .18; } }

.carte-france__legende {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  font-size: .72rem; font-weight: 600; color: var(--texte-doux);
}
.carte-france__legende span { display: inline-flex; align-items: center; gap: .4rem; }
.cf__puce { width: 9px; height: 9px; border-radius: 50%; background: var(--rose); opacity: .55; flex: none; }
.cf__puce--agence { background: var(--noir); opacity: 1; }
.cf__puce--zone { background: color-mix(in srgb, var(--rose) 25%, transparent); box-shadow: inset 0 0 0 1.5px var(--rose); opacity: 1; }

/* La carte remplace la photo dans la bande CTA */
.bande-cta__media--carte {
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: var(--fond-alt);
}
.bande-cta__media--carte .carte-france { width: 100%; }
.section--rose .bande-cta__media--carte { background: #fff; }

/* ------------------------------------------------------ Financement ------ */
.financement {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 1rem;
}
.financement__part {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface); border: 2px solid var(--bordure);
  border-radius: var(--r-xl); padding: clamp(1.2rem, 2.4vw, 1.8rem);
}
.financement__part--total { border-color: var(--rose); background: var(--surface-douce); }
.financement__montant {
  font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 118;
  font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1; letter-spacing: -.05em;
  color: var(--rose);
}
.financement__part h3 { font-size: 1rem; }
.financement__part p { font-size: .82rem; color: var(--texte-doux); line-height: 1.5; }
.financement__signe {
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 900;
  font-size: 2rem; color: var(--texte-tenu);
}
@media (max-width: 900px) {
  .financement { grid-template-columns: 1fr; gap: .6rem; }
  .financement__signe { font-size: 1.5rem; }
}

/* --------------------------------------------------------- CTA final ----- */
.cta-final {
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  text-align: center; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
  max-width: 720px; margin-inline: auto;
}
.cta-final h2 { color: #fff; }
.cta-final > p { color: rgba(255, 255, 255, .94); font-size: var(--t-m); max-width: 46ch; }
.cta-final__actions { justify-content: center; margin-top: .35rem; }
.cta-final .btn { --btn-fond: var(--noir); --btn-survol: var(--gris-900); }
.cta-final .btn--fantome { --btn-fond: transparent; --btn-texte: #fff; --btn-bord: #fff; }
.cta-final .btn--fantome:hover { background: #fff; --btn-texte: var(--rose-vif); }
.cta-final__note { font-size: .78rem; color: rgba(255, 255, 255, .78); margin: 0; }

/* =========================================================================
   ILOTS CLAIRS SUR FOND COLORE
   Un bloc blanc pose sur une section rose/bleue doit imposer ses propres
   couleurs de texte. Sans cette regle, `.section--rose li { color:#fff }`
   rend illisibles les listes des cartes blanches.
   ========================================================================= */
.section--rose .verif, .section--noir .verif, .heros .verif,
.section--rose .carte-verre, .section--noir .carte-verre, .heros .carte-verre,
.section--rose .carte-rdv, .section--noir .carte-rdv, .heros .carte-rdv,
.section--rose .carte, .section--noir .carte,
.section--rose .faq details, .section--noir .faq details,
.section--rose .avis-g, .section--noir .avis-g,
.section--rose .etapes li, .section--noir .etapes li,
.section--rose .tableau-enveloppe, .section--noir .tableau-enveloppe {
  color: var(--texte);
}
.section--rose .verif h1, .section--rose .verif h2, .section--rose .verif h3,
.section--noir .verif h1, .section--noir .verif h2, .section--noir .verif h3,
.heros .verif h1, .heros .verif h2, .heros .verif h3 { color: var(--texte); }

.section--rose .verif p, .section--noir .verif p, .heros .verif p,
.section--rose .verif li, .section--noir .verif li, .heros .verif li,
.section--rose .verif label, .section--noir .verif label, .heros .verif label,
.section--rose .verif span, .section--noir .verif span, .heros .verif span {
  color: var(--texte);
}
.section--rose .verif .verif__note, .section--noir .verif .verif__note, .heros .verif .verif__note,
.section--rose .verif .verif__choix-titre, .section--noir .verif .verif__choix-titre { color: var(--texte-tenu); }
.section--rose .verif .verif__montant b, .section--noir .verif .verif__montant b { color: var(--rose); }
.section--rose .verif .verif__montant span, .section--noir .verif .verif__montant span { color: var(--texte-doux); }
.section--rose .verif .verif__badge, .section--noir .verif .verif__badge { color: var(--succes); }
.section--rose .verif .verif__etapes li, .section--noir .verif .verif__etapes li { color: var(--texte-tenu); }
.section--rose .verif .verif__etapes li[data-actif], .section--noir .verif .verif__etapes li[data-actif] { color: var(--texte); }
.section--rose .verif .verif__refaire, .section--noir .verif .verif__refaire { color: var(--texte-tenu); }

/* Liste des cadeaux : fond clair, texte fonce, icone rose */
.verif__choix li { background: var(--fond-alt); color: var(--texte) !important; font-weight: 600; }
.verif__choix li svg { color: var(--rose) !important; }
.verif__choix li span { color: var(--texte) !important; }

/* Logo bitmap : hauteur calee sur la ligne du wordmark */
.logo__image { width: auto; height: 42px; flex: none; }
.pied .logo__image { height: 40px; }
@media (max-width: 1060px) { .logo__image { height: 36px; } }

/* Wordmark : PARE-BRISE en italique jaune */
.logo__marque .logo__pare-brise { color: var(--jaune); font-style: italic; letter-spacing: .2em; }
.pied .logo__marque .logo__pare-brise { color: var(--jaune); }

/* =========================================================================
   FICHES D'AVIS — pied sur une seule ligne + photo jointe
   ========================================================================= */
.avis-g { gap: .6rem; }

/* Le pied etait en deux colonnes etroites : texte casse mot par mot */
.avis-g__pied {
  margin-top: auto;
  padding-top: .65rem;
  border-top: 1px solid var(--g-bord);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: .45rem;
}
.avis-g__pied svg.logo-google { height: 13px; width: auto; flex: none; }
.avis-g__pied span {
  font-size: .68rem; line-height: 1.2; color: var(--g-gris);
  white-space: nowrap; flex: none;
}

/* Photo jointe a l'avis */
.avis-g__photo {
  margin: .2rem 0 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--g-bord);
}
.avis-g__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.3,.7,.4,1); }
.avis-g:hover .avis-g__photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .avis-g:hover .avis-g__photo img { transform: none; } }

/* Le texte se limite a 3 lignes quand une photo l'accompagne */
.avis-g__photo ~ * { flex: none; }
.avis-g:has(.avis-g__photo) .avis-g__texte[data-tronque="true"] { -webkit-line-clamp: 3; }

/* Grille : hauteurs egalisees, cartes qui respirent */
.avis, .grille--3 > .avis-g { align-items: stretch; }
.avis-g { padding: 1.05rem 1.1rem 1rem; }
@media (max-width: 560px) { .avis-g__photo { aspect-ratio: 16 / 10; } }

/* =========================================================================
   CTA FINAL — couleurs heritees de la section (l'alternance change le fond)
   ========================================================================= */
.cta-final h2 { color: inherit; }
.cta-final > p { color: var(--texte-doux); }
.cta-final__note { color: var(--texte-tenu); }
.cta-final .btn--fantome { --btn-fond: transparent; --btn-texte: var(--texte); --btn-bord: var(--texte); }
.cta-final .btn--fantome:hover { background: var(--texte); --btn-texte: var(--fond); }

.section--rose .cta-final h2 { color: #fff; }
.section--rose .cta-final > p { color: rgba(255, 255, 255, .94); }
.section--rose .cta-final__note { color: rgba(255, 255, 255, .78); }
.section--rose .cta-final .btn--fantome { --btn-texte: #fff; --btn-bord: #fff; }
.section--rose .cta-final .btn--fantome:hover { background: #fff; --btn-texte: var(--rose-vif); }

.section--noir .cta-final h2 { color: #fff; }
.section--noir .cta-final > p { color: var(--gris-300); }
.section--noir .cta-final__note { color: var(--texte-tenu); }
.section--noir .cta-final .btn--fantome { --btn-texte: #fff; --btn-bord: #fff; }

/* =========================================================================
   COMPAGNIES D'ASSURANCE — pastilles blanches, logos si disponibles
   ========================================================================= */
.assureurs__titre {
  font-family: var(--f-display); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--texte-tenu); margin: 0 auto;
}
.section--rose .assureurs__titre { color: rgba(255, 255, 255, .85); }

.assureurs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: .55rem;
  width: 100%;
}
.assureur {
  display: grid; place-items: center;
  background: #fff; border-radius: var(--r-m);
  min-height: 62px; padding: .7rem .8rem;
  box-shadow: 0 1px 3px rgba(10, 42, 72, .08);
  transition: transform var(--transition), box-shadow var(--transition);
}
.assureur:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(10, 42, 72, .28); }
.assureur img { max-height: 34px; max-width: 100%; width: auto; object-fit: contain; }
.assureur--texte span {
  font-family: var(--f-display); font-weight: 800;
  font-size: .8rem; letter-spacing: -.01em; color: #0E2C47;
  text-align: center; line-height: 1.2;
}
@media (max-width: 560px) {
  .assureurs { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .4rem; }
  .assureur { min-height: 54px; padding: .55rem .6rem; }
  .assureur--texte span { font-size: .72rem; }
}

/* =========================================================================
   AVIS — lisibilite sur fond colore + avatar photo
   `.section--rose p` (0,2,0) battait `.avis-g__texte` (0,1,0) : le texte
   des avis passait en blanc sur carte blanche. On re-specifie ici.
   ========================================================================= */
.section--rose .avis-g__texte, .section--noir .avis-g__texte,
.section--rose-doux .avis-g__texte { color: var(--g-corps); }
.section--rose .avis-g__nom, .section--noir .avis-g__nom { color: var(--g-texte); }
.section--rose .avis-g__statut, .section--noir .avis-g__statut,
.section--rose .avis-g__date, .section--noir .avis-g__date,
.section--rose .avis-g__pied span, .section--noir .avis-g__pied span { color: var(--g-gris); }
.section--rose .avis-g .lire-suite, .section--noir .avis-g .lire-suite { color: var(--g-lien); }
.section--rose .avis-g__etoiles, .section--noir .avis-g__etoiles { color: var(--g-etoile); }

/* Avatar photo, format Google */
.avis-g__avatar--photo {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex: none; display: block;
  background: var(--g-bord);
}

/* =========================================================================
   CARTES DE PRESTATION — illustration a la place de l'icone
   ========================================================================= */
.carte__illustration {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-l);
  background: var(--fond-alt);
  display: grid; place-items: center;
  overflow: hidden;
  margin-bottom: .2rem;
}
.carte__illustration img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: .4rem;
  transition: transform .5s cubic-bezier(.3,.7,.4,1);
}
.carte--lien:hover .carte__illustration img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .carte--lien:hover .carte__illustration img { transform: none; } }
.section--rose .carte__illustration, .section--noir .carte__illustration { background: var(--fond-alt); }
@media (max-width: 560px) { .carte__illustration { aspect-ratio: 16 / 9; } }

/* =========================================================================
   TUILES DE PRESTATION — selecteur compact, visuel puis libelle
   ========================================================================= */
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .75rem;
}
.tuile {
  display: flex; flex-direction: column; gap: .2rem;
  background: #FCEDF6;
  border: 2px solid var(--noir);
  border-radius: var(--r-m);
  padding: .9rem .9rem 1rem;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--noir);
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.tuile:hover {
  background: #fff;
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--noir);
}
.tuile__visuel {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: .35rem;
}
.tuile__visuel img { width: 100%; height: 100%; object-fit: contain; }
.tuile__visuel svg { width: 46%; height: auto; color: var(--rose); }
.tuile__titre {
  font-family: var(--f-display); font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 100;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
  line-height: 1.2; color: var(--rose-vif);
}
.tuile__meta { font-size: .68rem; color: var(--texte-tenu); }

/* Sur aplat rose, la tuile passe en blanc */
.section--rose .tuile { background: #fff; border-color: var(--noir); box-shadow: 5px 5px 0 var(--noir); }
.section--rose .tuile:hover { background: #fff; box-shadow: 8px 8px 0 var(--noir); }
.section--rose .tuile__titre { color: var(--rose-vif); }
.section--rose .tuile__meta { color: var(--texte-tenu); }

@media (max-width: 700px) {
  .tuiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
  .tuile { padding: .7rem .7rem .8rem; border-radius: var(--r-s); box-shadow: 3px 3px 0 var(--noir); }
  .tuile:hover { box-shadow: 5px 5px 0 var(--noir); }
  .tuile__titre { font-size: .74rem; }
  .tuile__meta { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) { .tuile:hover { transform: none; } }

/* =========================================================================
   MENU MOBILE — panneau plein opaque, ouverture par la droite
   Reecrit en fin de cascade : les regles precedentes laissaient un fond
   translucide et un empilement de z-index incoherent.
   ========================================================================= */
.barre-mobile { display: none !important; }

@media (max-width: 1060px) {
  body { padding-bottom: 0; }

  /* Voile */
  .voile {
    position: fixed; inset: 0;
    background: rgba(10, 42, 72, .55);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 120;
  }
  .voile[data-ouvert="true"] { opacity: 1; pointer-events: auto; }

  /* Panneau */
  .nav {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(84vw, 340px);
    max-width: 340px;
    background: #fff;
    border-left: 0;
    box-shadow: none;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.3,.7,.4,1);
    z-index: 130;
    display: flex; flex-direction: column;
    padding: 0 0 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav[data-ouvert="true"] { transform: translateX(0); box-shadow: -16px 0 40px -18px rgba(10, 42, 72, .35); }
  :root[data-theme="dark"] .nav { background: var(--noir-2); }

  /* Barre de fermeture en tete du panneau */
  .nav::before {
    content: "";
    display: block; height: 68px; flex: none;
    border-bottom: 1px solid var(--bordure);
  }

  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: .25rem 0; }
  .nav > ul > li > a,
  .nav__parent > button {
    display: flex; width: 100%;
    justify-content: space-between; align-items: center;
    padding: .95rem 1.25rem;
    font-family: var(--f-corps); font-size: 1rem; font-weight: 700;
    text-transform: none; letter-spacing: -.01em;
    color: var(--texte); background: transparent;
    border-radius: 0; border-bottom: 1px solid var(--bordure);
  }
  .nav > ul > li:last-child > a { border-bottom: 0; }
  .nav__parent[data-ouvert="true"] > button { color: var(--rose); border-bottom-color: transparent; }

  .sous-menu {
    position: static; transform: none; min-width: 0; display: none;
    background: var(--fond-alt); border: 0; border-bottom: 1px solid var(--bordure);
    border-radius: 0; box-shadow: none; margin: 0; padding: .15rem 0 .4rem;
  }
  .nav__parent[data-ouvert="true"] .sous-menu { display: block; }
  .sous-menu a {
    padding: .72rem 1.25rem .72rem 2rem;
    font-size: .92rem; font-weight: 600; border-radius: 0; gap: .05rem;
  }
  .sous-menu a small { font-size: .72rem; }

  .nav__pied {
    display: flex; flex-direction: column; gap: .5rem;
    margin-top: 1.25rem; padding: 0 1.25rem; border-top: 0;
  }
  .nav__pied .btn { width: 100%; }

  /* Bouton de fermeture, superpose a la barre du panneau */
  .burger {
    display: inline-flex; position: relative; z-index: 140;
    width: 42px; height: 42px; border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--bordure);
    background: var(--fond);
  }
  .burger[aria-expanded="true"] {
    position: fixed; top: 14px; right: 14px;
    background: #fff; box-shadow: 0 2px 10px rgba(10,42,72,.18);
  }

  /* En-tete allege */
  .entete__interieur { min-height: 60px; gap: .6rem; }
  .entete .btn { display: none; }
  .entete__tel { padding: .5rem .62rem; }
  .logo svg, .logo__image { height: 34px; }
  .logo__marque span:first-child { font-size: .95rem; }
  .logo__marque span:last-child { font-size: .48rem; letter-spacing: .16em; }
}

@media (max-width: 1060px) {
  /* La bulle WhatsApp reprend sa place, la barre du bas ayant disparu */
  .bulle-wa { display: grid; right: 1rem; bottom: 1rem; width: 52px; height: 52px; }
}

/* =========================================================================
   CORRECTIF D'EMPILEMENT DU MENU MOBILE
   `.entete` est sticky avec z-index 90 : elle cree un contexte d'empilement.
   Le panneau `.nav`, qui est son enfant, ne peut donc jamais depasser 90,
   quel que soit son propre z-index. Le voile, exterieur a l'en-tete, doit
   par consequent rester SOUS 90, sinon il recouvre le menu.
   ========================================================================= */
.voile { z-index: 85 !important; }
.entete { z-index: 90; }

@media (max-width: 1060px) {
  .nav { z-index: 5; }
  .burger { z-index: 6; }
  /* Ouvert, le bouton devient une croix fixee en haut a droite du panneau */
  .burger[aria-expanded="true"] {
    position: fixed; top: 13px; right: 13px; z-index: 7;
    background: #fff; box-shadow: 0 2px 10px rgba(10, 42, 72, .18);
  }
  /* La bulle WhatsApp ne doit pas flotter par-dessus le menu ouvert */
  body:has(.nav[data-ouvert="true"]) .bulle-wa,
  body:has(.nav[data-ouvert="true"]) .cta-mobile { display: none; }
}

/* =========================================================================
   PORTAIL CLIENT — depot de documents
   ========================================================================= */
.portail { max-width: 520px; }
.portail__fil {
  display: inline-block; font-family: var(--f-display); font-size: .64rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--texte-tenu); margin-bottom: .35rem;
}
.portail__fil b { color: var(--rose); }
.portail__etape > h2 { font-size: 1.25rem; margin-bottom: .3rem; }
.portail__etape > p { font-size: .85rem; color: var(--texte-doux); margin-bottom: 1rem; }
.portail__lien {
  font-size: .74rem; font-weight: 600; color: var(--texte-tenu);
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.portail__lien:hover { color: var(--rose); }
.portail__erreur { color: var(--alerte, #C4341C); font-weight: 600; }

.champ--code input {
  font-family: var(--f-data); font-size: 1.6rem; text-align: center;
  letter-spacing: .5em; padding: .8rem .5rem .8rem 1em; border-width: 2px;
}

.portail__progression { display: flex; align-items: center; gap: .7rem; font-size: .74rem; color: var(--texte-tenu); }
.portail__barre { flex: 1; height: 6px; border-radius: 3px; background: var(--fond-alt); overflow: hidden; }
.portail__barre span { display: block; height: 100%; width: 0; background: var(--rose); border-radius: 3px; transition: width .35s cubic-bezier(.3,.7,.4,1); }

.portail__etape--fin { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; outline: none; }

/* --- Blocs document ------------------------------------------------------ */
.docs { display: flex; flex-direction: column; gap: .6rem; }
.doc {
  border: 2px solid var(--bordure); border-radius: var(--r-m);
  padding: .9rem 1rem 1rem; transition: border-color var(--transition);
}
.doc[data-rempli] { border-color: var(--succes); background: #F2FAF6; }
.doc__entete { display: flex; align-items: flex-start; gap: .6rem; }
.doc__etat {
  width: 18px; height: 18px; flex: none; margin-top: .15rem;
  border-radius: 50%; border: 2px solid var(--bordure-forte);
  transition: background var(--transition), border-color var(--transition);
}
.doc[data-rempli] .doc__etat { background: var(--succes); border-color: var(--succes); }
.doc__titre h3 { font-size: .95rem; line-height: 1.2; }
.doc__officiel { font-size: .68rem; color: var(--texte-tenu); text-transform: uppercase; letter-spacing: .06em; }
.doc__aide { font-size: .74rem; color: var(--texte-doux); margin: .5rem 0 .7rem; line-height: 1.45; }

.doc__zone {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .9rem .8rem; border-radius: var(--r-s); cursor: pointer;
  border: 2px dashed var(--bordure-forte); background: var(--fond-alt);
  text-align: center; transition: border-color var(--transition), background var(--transition);
}
.doc__zone:hover, .doc__zone[data-survol] { border-color: var(--rose); background: var(--surface-douce); }
.doc__zone svg { width: 18px; height: 18px; color: var(--rose); }
.doc__consigne { font-size: .8rem; color: var(--texte); }
.doc__formats { font-size: .66rem; color: var(--texte-tenu); }
.doc[data-rempli] .doc__zone { display: none; }

.doc__resultat {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: #fff; border-radius: var(--r-s); padding: .55rem .7rem;
}
.doc__nom-fichier { font-size: .76rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc__retirer { font-size: .7rem; font-weight: 600; color: var(--texte-tenu); text-decoration: underline; padding: 0; flex: none; }
.doc__retirer:hover { color: var(--alerte, #C4341C); }
.doc__erreur { font-size: .72rem; color: var(--alerte, #C4341C); font-weight: 600; margin-top: .45rem; }

@media (max-width: 700px) {
  .portail { max-width: none; }
  .champ--code input { font-size: 1.35rem; letter-spacing: .38em; }
}

/* =========================================================================
   ENCART « UN SMS VIENT DE PARTIR » — affiche apres la creation du lead
   ========================================================================= */
.encart-espace {
  margin-top: 1rem; padding: 1rem 1.1rem;
  background: var(--surface-douce); border-radius: var(--r-m);
  text-align: left; display: flex; flex-direction: column; gap: .5rem;
}
.encart-espace__titre {
  font-family: var(--f-display); font-weight: 800; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--rose-vif);
  margin: 0;
}
.encart-espace__texte { font-size: .8rem; line-height: 1.5; color: var(--texte-doux); margin: 0; max-width: none; }
.encart-espace .btn { margin-top: .25rem; }

/* =========================================================================
   ESPACE ADMINISTRATEUR — suivi des dossiers
   ========================================================================= */
body.page-admin { background: var(--fond-alt); }
body.page-admin .entete, body.page-admin .pied,
body.page-admin .bandeau-offre, body.page-admin .ariane,
body.page-admin .bulle-wa, body.page-admin .cta-mobile { display: none !important; }

.admin { width: min(100% - 2rem, 1500px); margin: 1.5rem auto 3rem; display: flex; flex-direction: column; gap: 1rem; }
.admin__entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin__marque { display: flex; align-items: center; gap: .7rem; }
.admin__marque img { width: auto; height: 42px; }
.admin__marque strong { display: block; font-family: var(--f-display); font-size: 1.05rem; letter-spacing: -.02em; }
.admin__marque span { font-size: .72rem; color: var(--texte-tenu); }
.admin__actions { display: flex; gap: .5rem; }
.admin__actions .btn { padding: .7rem 1.1rem; font-size: .74rem; }

.admin__demo {
  background: #FFF6E3; border-left: 4px solid var(--jaune);
  border-radius: var(--r-s); padding: .7rem .9rem;
  font-size: .78rem; color: #6B5417; max-width: none;
}
.admin__demo code { font-family: var(--f-data); font-size: .74rem; background: rgba(0,0,0,.06); padding: .1rem .3rem; border-radius: 4px; }

.admin__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; }
.kpi { background: #fff; border-radius: var(--r-m); padding: 1rem 1.1rem; }
.kpi b {
  display: block; font-family: var(--f-display); font-weight: 900;
  font-variation-settings: "wght" 900, "wdth" 115;
  font-size: 1.9rem; line-height: 1; letter-spacing: -.04em; color: var(--noir);
}
.kpi span { display: block; margin-top: .3rem; font-size: .7rem; color: var(--texte-tenu); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.kpi--alerte b { color: #C4341C; }
.kpi--succes b { color: var(--succes); }

.admin__barre { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.admin__recherche { flex: 1 1 260px; max-width: 380px; }
.admin__recherche input { background: #fff; }
.filtres { display: flex; flex-wrap: wrap; gap: .35rem; }
.filtre {
  font-size: .72rem; font-weight: 700; padding: .45rem .8rem;
  border-radius: var(--r-pill); background: #fff; color: var(--texte-doux);
  box-shadow: inset 0 0 0 1.5px var(--bordure); transition: all var(--transition);
}
.filtre span { opacity: .55; margin-left: .15rem; }
.filtre:hover { color: var(--rose); }
.filtre[aria-pressed="true"] { background: var(--noir); color: #fff; box-shadow: none; }

.admin__tableau { background: #fff; border-radius: var(--r-l); overflow: auto; }
.admin__tableau table { min-width: 1080px; font-size: .8rem; }
.admin__tableau th {
  position: sticky; top: 0; z-index: 1;
  background: var(--noir); color: #fff;
  font-family: var(--f-display); font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .7rem .8rem; text-align: left;
}
.admin__tableau td { padding: .7rem .8rem; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.admin__tableau tr:last-child td { border-bottom: 0; }
.admin__tableau tbody tr:hover { background: var(--fond-alt); }
.admin__tableau small { display: block; font-size: .68rem; color: var(--texte-tenu); margin-top: .1rem; }
.admin__ref { font-family: var(--f-data); font-size: .74rem; font-weight: 700; }
.admin__voir {
  font-size: .72rem; font-weight: 700; padding: .4rem .8rem;
  border-radius: var(--r-pill); background: var(--rose); color: #fff;
  transition: background var(--transition);
}
.admin__voir:hover:not(:disabled) { background: var(--rose-vif); }
.admin__voir:disabled { background: var(--bordure); color: var(--texte-tenu); cursor: not-allowed; }
.admin__vide { padding: 2rem; text-align: center; color: var(--texte-tenu); font-size: .85rem; max-width: none; }

.doc-pastilles { display: inline-flex; gap: .25rem; }
.doc-pastille {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; font-size: .58rem; font-weight: 800;
  background: var(--fond-alt); color: var(--texte-tenu);
  box-shadow: inset 0 0 0 1.5px var(--bordure);
}
.doc-pastille--ok { background: var(--succes); color: #fff; box-shadow: none; }

.pastille-statut {
  display: inline-block; font-size: .68rem; font-weight: 800;
  padding: .32rem .7rem; border-radius: var(--r-pill); white-space: nowrap;
}
.pastille--attente   { background: #FDECEA; color: #C4341C; }
.pastille--incomplet { background: #FFF3DC; color: #8A5B00; }
.pastille--traiter   { background: #E7F0FE; color: #17569B; }
.pastille--accord    { background: #EAF6EF; color: #0E7A4F; }
.pastille--planifie  { background: var(--surface-douce); color: var(--rose-vif); }
.pastille--pose      { background: var(--succes); color: #fff; }
.pastille--annule    { background: var(--fond-alt); color: var(--texte-tenu); }

/* Fiche dossier */
.modale--dossier { width: min(100% - 2rem, 620px); }
.fiche__grille { display: grid; gap: .1rem; margin: .9rem 0 0; }
.fiche__ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--bordure); font-size: .82rem; }
.fiche__ligne span { color: var(--texte-tenu); }
.fiche__titre { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin: 1.2rem 0 .5rem; }
.fiche__docs { display: flex; flex-direction: column; gap: .35rem; }
.fiche__doc {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .8rem; border-radius: var(--r-s); background: var(--fond-alt); font-size: .8rem;
}
.fiche__doc--ok { background: #EAF6EF; }
.fiche__doc em { font-size: .72rem; color: var(--texte-tenu); font-style: normal; }
.fiche__actions { display: flex; gap: .5rem; margin-top: 1.2rem; flex-wrap: wrap; }
.fiche__actions .btn { padding: .75rem 1.2rem; font-size: .74rem; }
.fiche__note { margin-top: .8rem; font-size: .7rem; color: var(--texte-tenu); max-width: none; }

@media (max-width: 700px) {
  .admin { margin: 1rem auto 2rem; }
  .admin__kpis { grid-template-columns: 1fr 1fr; }
  .kpi b { font-size: 1.5rem; }
}

/* Bandeau de validite du lien securise */
.portail__validite { display: flex; align-items: center; gap: .4rem; background: #EAF6EF; color: var(--succes); border-radius: var(--r-s); padding: .5rem .7rem; font-size: .72rem; font-weight: 600; margin: 0 0 .8rem; max-width: none; }
.portail__validite svg { width: 14px; height: 14px; flex: none; }

/* ============================================================
   VERROU DE L'ESPACE ADMIN
   ============================================================ */
body.verrouille { overflow: hidden; }

.verrou {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,46,136,.28), transparent 60%),
    var(--noir);
}
.verrou[hidden] { display: none !important; }

.verrou__carte {
  width: min(380px, 100%);
  padding: 34px 30px 28px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(10,42,72,.45);
  text-align: center;
}
.verrou__carte img { width: 64px; height: auto; margin: 0 auto 14px; display: block; }
.verrou__carte h1 { font-size: 1.35rem; margin: 0 0 6px; color: var(--noir); }
.verrou__aide { font-size: .9rem; color: #6b7c8c; margin: 0 0 22px; }

.verrou__label {
  display: block;
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7c8c;
  margin-bottom: 6px;
}
.verrou__carte input[type="password"] {
  width: 100%;
  padding: 13px 15px;
  font-size: 1rem;
  letter-spacing: .18em;
  border: 2px solid #e3e9ef;
  border-radius: 12px;
  background: #f8fafc;
  color: var(--noir);
  transition: border-color .18s, background .18s;
}
.verrou__carte input[type="password"]:focus {
  outline: none;
  border-color: var(--rose);
  background: #fff;
}
.verrou__carte .btn { width: 100%; margin-top: 16px; justify-content: center; }

.verrou__erreur {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fdecef;
  color: #b3123f;
  font-size: .86rem;
  font-weight: 600;
  text-align: left;
}
.verrou__erreur[hidden] { display: none !important; }

.verrou__note {
  margin: 18px 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: #8c9aa8;
}

.admin[hidden] { display: none !important; }
/* ============================================================
   BANDEAU NOUVEAU DOSSIER (page de suivi)
   ============================================================ */
.admin__nouveau {
  margin: 0 0 18px;
  padding: 13px 18px;
  border-radius: 12px;
  border-left: 4px solid #12A150;
  background: #E9F9F0;
  color: #0B5A2E;
  font-weight: 700;
  font-size: .95rem;
  animation: nouveauSurgit .35s ease-out;
}
.admin__nouveau[hidden] { display: none !important; }

@keyframes nouveauSurgit {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .admin__nouveau { animation: none; }
}
/* ============================================================
   ESPACE CLIENT — page autonome, sans habillage du site
   ============================================================ */
.page-espace .entete,
.page-espace .pied,
.page-espace .barre-mobile,
.page-espace .alerte-preuve { display: none !important; }

.page-espace main { padding: 0 !important; }

.espace {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 18px 44px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,46,136,.30), transparent 62%),
    var(--noir);
}

.espace__boite {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 24px;
  padding: 30px 26px 26px;
  box-shadow: 0 26px 70px rgba(10,42,72,.42);
}

.espace__marque {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid #e8eef4;
}
.espace__marque img { width: 46px; height: auto; }
.espace__marque strong {
  display: block;
  font-size: 1.02rem;
  color: var(--noir);
  line-height: 1.2;
}
.espace__marque span {
  font-size: .8rem;
  color: #6b7c8c;
  font-weight: 600;
}

/* La carte du portail perd son fond : elle est deja dans la boite blanche */
.page-espace .portail {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
}
.page-espace .portail h2 { color: var(--noir); font-size: 1.3rem; }
.page-espace .portail p  { color: #55697a; }

.espace__pied {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e8eef4;
  font-size: .8rem;
  line-height: 1.65;
  color: #8395a5;
  text-align: center;
}
.espace__pied svg { width: 14px; height: 14px; vertical-align: -2px; }
.espace__pied a { color: var(--rose); font-weight: 700; }

@media (max-width: 520px) {
  .espace { padding: 16px 12px 30px; }
  .espace__boite { padding: 22px 18px 20px; border-radius: 18px; }
}
/* ============================================================
   APERCU D'UN DOCUMENT DANS LA FICHE
   ============================================================ */
.fiche__apercu {
  margin: -6px 0 14px;
  padding: 12px;
  border-radius: 12px;
  background: #f2f6f9;
  border: 1px solid #dde6ee;
}
.fiche__apercu img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.fiche__apercu-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.fiche__pdf {
  margin: 0 0 4px;
  padding: 22px 12px;
  text-align: center;
  color: #55697a;
  background: #fff;
  border-radius: 8px;
}
.fiche__tel {
  color: var(--rose);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.fiche__tel:hover { text-decoration: underline; }
/* Message d'erreur sous un champ de formulaire */
.champ__erreur {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.45;
  color: #C41E4E;
}
.champ__erreur[hidden] { display: none !important; }
input[aria-invalid="true"] {
  border-color: #C41E4E !important;
  background: #FDF0F4 !important;
}
/* ============================================================
   ENCART NOTIFICATIONS PUSH (page de suivi)
   ============================================================ */
.push {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0A2A48 0%, #164066 100%);
  color: #fff;
}
.push__texte { min-width: 240px; flex: 1 1 320px; }
.push__texte strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.push__texte span { font-size: .86rem; color: #B8CBDC; line-height: 1.5; }

.push__etat {
  margin: 9px 0 0;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.5;
  background: rgba(255,255,255,.12);
  color: #E6EFF7;
}
.push__etat--ok { background: rgba(18,161,80,.22); color: #7BE6AC; }
.push__etat[hidden] { display: none !important; }

.push__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.push__actions .portail__lien { color: #B8CBDC; }
.push__actions .portail__lien:hover { color: #fff; }

@media (max-width: 640px) {
  .push { flex-direction: column; align-items: stretch; }
  .push__actions { justify-content: space-between; }
  .push__actions .btn { flex: 1 1 auto; justify-content: center; }
}