/* =========================================================
   1Location Photobooth — feuille unique
   DA "La bande photo" : aplats saturés, panneaux arrondis
   sur fond encre, bande de 4 vignettes comme motif.
   ========================================================= */
:root{
  --ink:#0A0A0A;
  --ink-2:#161616;
  --ink-3:#212121;
  --white:#FFFFFF;
  --paper:#FFFFFF;
  --paper-2:#F5F5F5;
  --rose:#FF2D87;             /* rose vif de base — noir dessus : 5.64, sur --ink : 5.64 */
  --rose-2:#FF6FB0;           /* rose clair, extrémité du dégradé — noir dessus : 7.69 */
  --rose-txt:#D6006E;         /* rose texte sur blanc : 5.14 (ajusté depuis #E01A73 ~4.60, marge insuffisante) */
  --degrade-rose: linear-gradient(135deg, var(--rose) 0%, var(--rose-2) 100%);
  --h1-accent-violet:#C650FF; /* palier médian du dégradé d'accent H1 accueil — sur --ink : 5.65 */
  --h1-accent-or:#FFC145;     /* palier final du dégradé d'accent H1 accueil — sur --ink : 12.23 */
  --txt:#0A0A0A;
  --txt-soft:#4A4A4A;
  --txt-faint:#6B6B6B;        /* 5.33 sur papier — conservée (gris neutre, hors périmètre vermillon/flash) */
  --on-ink:#FFFFFF;
  --on-ink-soft:#C4C4C4;
  --rule:#E5E5E5;
  --rule-ink:#2A2A2A;
  --sans:"Avenir Next","Segoe UI Variable Display","Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --r:18px;
  --r-lg:28px;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--paper);color:var(--txt);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:4px}

/* ---------- type ---------- */
h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,6.4vw,74px)}
h2{font-size:clamp(28px,4.2vw,44px);letter-spacing:-.028em;line-height:1.06}
h3{font-size:20px;letter-spacing:-.015em;line-height:1.25}
p{margin:0 0 16px}
.lede{font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--txt-soft);max-width:58ch}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose-txt);margin:0 0 16px;font-weight:600;
}
.eyebrow.on-ink{color:var(--rose-2)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rule);
}
.nav-in{display:flex;align-items:center;gap:24px;height:76px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo .mark{
  width:38px;height:38px;border-radius:12px;background:var(--rose);
  display:grid;place-items:center;flex:none;
  box-shadow:0 8px 18px rgba(255,45,135,.35);
}
.logo .mark span{width:15px;height:15px;border-radius:50%;border:3px solid var(--paper);display:block}
/* logo deux lignes façon référence : marque forte + tagline mono.
   La moitié "PHOTOBOOTH" est en --rose-txt (5.14 sur blanc), pas --rose
   (3.51 : trop faible pour du 16.5px, même en gras). */
.logo-txt b{display:block;font-weight:800;letter-spacing:-.02em;font-size:16.5px;line-height:1;color:var(--txt)}
.logo-txt b i{font-style:normal;color:var(--rose-txt)}
.logo-txt small{
  display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-soft);margin-top:4px;font-weight:600
}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px;flex-wrap:nowrap}
.nav nav a{text-decoration:none;color:var(--txt-soft);font-weight:500;white-space:nowrap}
.nav nav a:hover{color:var(--txt)}
.nav-tel{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  color:var(--txt);text-decoration:none;flex:none
}
.nav-tel svg{color:var(--rose-txt)}
@media(max-width:1150px){.nav-tel{display:none}}
/* ≤640px : le logo 2 lignes + CTA débordent sinon (trouvé par tests/qc.spec.mjs
   à 390px). On compacte tout ; ≤430px on masque aussi la moitié "PHOTOBOOTH"
   du logo, sans quoi il reste ~1px de dépassement au pire cas de rendu. */
@media(max-width:640px){
  .logo-txt small{display:none}
  .logo .mark{width:32px;height:32px;border-radius:10px}
  .logo .mark span{width:12px;height:12px;border-width:2.5px}
  .logo-txt b{font-size:13.5px}
  .nav-in{gap:10px;height:62px}
  .nav .btn{padding:9px 13px;font-size:13px;border-radius:11px}
  .nav .btn .arw{display:none}
}
@media(max-width:430px){.logo-txt b i{display:none}}
/* Boutons : rose foncé + texte BLANC (retour client du 20/08 : plus de noir
   sur rose). Le blanc sur --rose vif (#FF2D87) ne fait que 3.51 — on prend
   --rose-txt (#D6006E), symétrique du noir-sur-blanc : blanc dessus = 5.14,
   AA. Rayon 14px (rect arrondi) aligné sur la référence. */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:14px;
  background:var(--rose-txt);color:var(--white);text-decoration:none;font-weight:700;
  font-size:15px;border:0;cursor:pointer;transition:filter .18s ease;white-space:nowrap;
}
.btn-lg{padding:16px 28px;font-size:16px;border-radius:16px;font-weight:700}
.btn:hover{filter:brightness(.86)}
.btn .arw{
  /* alpha .1 max : à .2, le cercle éclaircit le rose foncé et la flèche
     blanche tombe à 4.24 (attrapé par tests/qc.spec.mjs). */
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--white);
  display:grid;place-items:center;font-size:12px;flex:none
}
.btn-ghost{background:transparent;color:var(--txt);border:1.5px solid var(--rule)}
.btn-ghost:hover{background:var(--paper-2)}
.btn-ghost .arw{background:var(--paper-2);color:var(--txt)}
.btn-flash{background:var(--rose-txt);color:var(--white)}
.btn-flash .arw{background:rgba(255,255,255,.1);color:var(--white)}
@media(max-width:860px){.nav nav{display:none}}

/* ---------- hero (accueil) ----------
   Refonte du 19/08 (2e retour client, écran à l'appui) : hero pleine largeur
   sur fond encre, contenu CENTRÉ (badge, H1 dégradé, étoiles, CTA, avantages),
   halos lumineux flous en arrière-plan — décalqué de la structure de la
   référence. Le formulaire de lead quitte le hero pour la section
   #devis-rapide juste en dessous (les CTA y mènent). */
.hero{
  background:var(--ink);color:var(--on-ink);padding:58px 0 0;
  position:relative;overflow:hidden;text-align:center;
}
.hero-in{position:relative;z-index:1;max-width:920px;padding-bottom:64px}
/* halos : éléments réels (pas des pseudo-éléments — voir la note .hero-badge
   .dot). Opacité .22 max : à .3, le composite rose-sur-encre au cœur du halo
   ferait passer on-ink-soft juste sous 4.5:1. Vérifié à la main. */
.glow{
  position:absolute;width:540px;height:540px;border-radius:50%;
  filter:blur(90px);opacity:.22;pointer-events:none;
}
.glow.g1{background:var(--rose);top:-220px;left:8%}
.glow.g2{background:var(--h1-accent-violet);bottom:-260px;right:6%}
/* variante 2 colonnes du hero sombre (pages ville : texte + formulaire de
   lead). Reprend la grille de l'ancien hero-panel, alignée à gauche. */
.hero-cols{
  position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,56px);align-items:center;text-align:left;
  padding-top:8px;padding-bottom:64px;
}
@media(max-width:880px){.hero-cols{grid-template-columns:1fr}}
.hero-cols .lede{margin-left:0}
.hero-cols .hero-cta{justify-content:flex-start}
/* hero-proof et carte de formulaire sur fond encre (tous les heros sombres) */
.hero .hero-proof{color:var(--on-ink-soft);border-top-color:rgba(255,255,255,.16)}
.hero .hero-proof b{color:var(--on-ink)}
.hero-in .hero-proof{justify-content:center}
.hero .lead-card{box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,111,176,.14)}
.hero .lead-card .eyebrow{color:var(--ink)}
/* pastille de confiance au-dessus du H1 : reprend le texte réel et déjà
   validé (parc en propre / livraison France) plutôt qu'un label ou un
   "prix" inventé — voir note honnêteté dans le rapport de tâche. Point
   lumineux + glow pour matcher le traitement pastille de la référence
   client (retour du 19/08 : coller de près au visuel, badge/étoiles compris). */
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px;border-radius:100px;margin:0 0 22px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:var(--rose-2);box-shadow:0 0 26px -6px rgba(255,45,135,.45);
}
/* span réel plutôt que ::before : un pseudo-élément décoratif non couvrant
   est lu par tests/qc.spec.mjs comme un calque de fond plein pour tout
   l'ancêtre (prévu pour les surcouches type .vignette::after), ce qui
   donnait un faux positif sur le texte du badge. */
.hero-badge .dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--rose-2);box-shadow:0 0 9px 1px rgba(255,111,176,.75);
}
/* mot d'accent du H1 : dégradé multi-teintes (rose → violet → or) en clip-text
   sur le fond encre, plus proche du visuel de référence que le dégradé rose
   seul — scopé à ce seul mot, --degrade-rose (boutons, autres pages) inchangé.
   Les 3 arrêts passent large l'AA grand texte (3:1) sur --ink : rose 5.64:1,
   violet 5.65:1, or 12.23:1 (calculés à la main, vérifiés par tests/qc.spec.mjs
   qui remonte désormais jusqu'au vrai fond ancêtre pour ce type d'élément). */
.hero h1 span{
  background:linear-gradient(90deg, var(--rose) 0%, var(--h1-accent-violet) 55%, var(--h1-accent-or) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--rose);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* lede sur le fond encre du hero : variante on-ink + centrage. */
.hero .lede{color:var(--on-ink-soft);margin:20px auto 0;max-width:62ch}
.hero .btn-ghost{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.32);color:var(--on-ink)
}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14)}
.hero .btn-ghost svg{color:var(--rose-2)}
/* ligne étoiles façon référence — délibérément SANS note chiffrée (0 client
   réel à ce jour, un "4,9/5 sur N avis" serait une allégation fausse) : la
   légende à côté le dit explicitement, même registre que temoignages()
   ("avis illustratifs — exemples de démonstration") plutôt qu'un ⓘ discret.
   Étoiles en or (12.23 sur encre), comme la référence. */
.hero-stars{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.hero-stars .etoiles{color:var(--h1-accent-or);font-size:17px;letter-spacing:3px}
.hero-stars-note{font-size:13px;color:var(--on-ink-soft);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero .hero-cta{justify-content:center}
/* avantages sous les CTA, façon checklist de la référence */
.hero-perks{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px 34px;margin:38px auto 0;padding:24px 0 0;max-width:780px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px;color:var(--on-ink-soft);font-weight:600
}
.hero-perks li{display:inline-flex;align-items:center;gap:8px}
.hero-perks svg{color:var(--rose-2);flex:none}
/* section formulaire sous le hero — cible des CTA "Réserver" */
.sec-devis-rapide{padding:56px 0}
.sec-devis-rapide .lead-card{
  max-width:600px;margin:0 auto;
  box-shadow:0 26px 60px rgba(255,45,135,.13),0 4px 14px rgba(20,16,25,.08)
}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--rule);font-size:13.5px;color:var(--txt-soft)
}
.hero-proof b{display:block;font-family:var(--mono);font-size:19px;color:var(--txt);letter-spacing:-.02em}

.hero-ribbon{
  background:var(--ink);color:var(--on-ink-soft);font-family:var(--mono);font-size:12px;
  letter-spacing:.05em;padding:16px 0 20px;display:flex;gap:34px;flex-wrap:wrap;justify-content:center
}
.hero-ribbon b{color:var(--rose-2);font-weight:600}

/* ---------- lead-card (formulaire hero) ---------- */
.lead-card{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,32px);box-shadow:0 22px 50px rgba(20,16,25,.16);color:var(--txt)
}
.lead-card h3{margin:6px 0 20px;font-size:clamp(19px,2.4vw,23px)}
.lead-form{display:flex;flex-direction:column;gap:11px}
.lead-form input{
  width:100%;padding:13px 16px;border:1.5px solid var(--rule);border-radius:12px;
  font:inherit;font-size:15px;background:var(--white);color:var(--txt)
}
.lead-form input::placeholder{color:var(--txt-faint)}
.lead-form input:focus-visible{outline:3px solid var(--rose);outline-offset:2px;border-color:var(--rose)}
.lead-form input.hp{position:absolute;width:1px;height:1px;opacity:0;left:-9999px;pointer-events:none}
.lead-form .btn{justify-content:center;margin-top:5px}
.eagle-status{margin:2px 0 0;min-height:1.2em;font-size:13px;color:var(--txt-soft);text-align:center}

/* ---------- sections ---------- */
section{padding:clamp(56px,8vw,96px) 0}
.sec-ink{background:var(--ink);color:var(--on-ink)}
.sec-ink .lede{color:var(--on-ink-soft)}
.sec-head{max-width:64ch;margin-bottom:44px}
/* variante centrée + eyebrow en pastille (retour client du 20/08 : reprendre
   les en-têtes de section de la référence) */
.sec-head.centre{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.centre .lede{margin-left:auto;margin-right:auto}
.eyebrow-pill{
  display:inline-flex;align-items:center;padding:7px 16px;border-radius:100px;
  background:rgba(255,45,135,.07);border:1px solid rgba(255,45,135,.28)
}
.sec-ink .eyebrow-pill{background:rgba(255,45,135,.12);border-color:rgba(255,45,135,.38)}
/* en-tête de section avec lien d'action à droite (galerie événements) */
.sec-head-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:36px
}
.sec-head-row .sec-head{margin-bottom:0}
.lien-droite{color:var(--rose-txt);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.lien-droite:hover{text-decoration:underline}

/* ---------- cards ---------- */
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr);align-items:stretch}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g3,.g4,.g2{grid-template-columns:1fr}}
.card{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  padding:26px 24px;display:flex;flex-direction:column;gap:9px
}
.sec-ink .card{background:var(--ink-2);border-color:var(--rule-ink)}
.card .ic{
  width:38px;height:38px;border-radius:11px;background:var(--paper-2);
  display:grid;place-items:center;margin-bottom:6px
}
.sec-ink .card .ic{background:var(--ink-3)}
.card p{margin:0;font-size:15px;color:var(--txt-soft);line-height:1.55}
.sec-ink .card p{color:var(--on-ink-soft)}
.card-lien{text-decoration:none;transition:transform .18s ease,border-color .18s ease}
.card-lien:hover{transform:translateY(-3px);border-color:var(--rose)}

/* cards #materiel : photo encadrée dans la carte (coins arrondis, façon
   référence), gros prix coloré, bouton encre */
.card-materiel{padding:14px 14px 24px;overflow:hidden}
.card-materiel .card-img{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2);position:relative;border-radius:13px}
.card-materiel .card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-materiel .card-body{padding:16px 12px 0;display:flex;flex-direction:column;gap:9px}
/* accent violet de la carte miroir (façon carte "Glamour & Mariages") */
.accent-violet .badge-img{background:var(--h1-accent-violet)}
.accent-violet .checks svg{color:var(--h1-accent-violet)}
/* bouton encre (cards claires) — le hover repasse au rose */
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{filter:none;background:var(--rose-txt)}
.btn-ink .arw{background:rgba(255,255,255,.16);color:var(--white)}
/* icônes pastel de la grille d'atouts */
.ic-pastel{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:8px}
.ic-rose{background:rgba(255,45,135,.11);color:var(--rose-txt)}
.ic-violet{background:rgba(198,80,255,.12);color:var(--h1-accent-violet)}
.ic-or{background:rgba(255,193,69,.24);color:var(--txt)}
/* pastille descriptive sur la photo (façon référence) — descriptive uniquement
   ("L'essentiel", "VIP 360°"), jamais un superlatif invérifiable type
   "le + populaire" : 0 client réel à ce jour. */
.badge-img{
  position:absolute;top:12px;left:12px;background:var(--rose);color:var(--ink);
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:100px
}
.badge-or{background:var(--h1-accent-or)}
.checks{list-style:none;padding:0;margin:6px 0 2px;display:flex;flex-direction:column;gap:8px;
  font-size:13.5px;color:var(--txt-soft);font-weight:500}
.checks li{display:flex;align-items:center;gap:9px}
.checks svg{color:var(--rose-txt);flex:none}
.card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:10px;padding-top:16px;border-top:1px solid var(--rule)
}
.btn-sm{padding:10px 16px;font-size:13.5px;border-radius:11px}
.prix-dep{margin:2px 0 0;font-size:12.5px;color:var(--txt-soft);line-height:1.4}
.prix-dep b{font-family:var(--mono);color:var(--rose-txt);font-size:26px;letter-spacing:-.02em}
.card-lien-txt{color:var(--rose-txt);font-size:14px;font-weight:600;text-decoration:none;margin-top:2px}
.card-lien-txt:hover{text-decoration:underline}
/* variante sombre de la carte 360 (façon carte "VIP" de la référence) */
.card-sombre{background:var(--ink);border-color:var(--ink)}
.card-sombre .card-body h3{color:var(--on-ink)}
.card-sombre .card-body p{color:var(--on-ink-soft)}
.card-sombre .checks{color:var(--on-ink-soft)}
.card-sombre .checks svg{color:var(--h1-accent-or)}
.card-sombre .card-foot{border-top-color:rgba(255,255,255,.16)}
.card-sombre .prix-dep{color:var(--on-ink-soft)}
.card-sombre .prix-dep b{color:var(--h1-accent-or)}
.card-sombre .card-lien-txt{color:var(--rose-2)}

/* ---------- formules (packs) sur fond encre ---------- */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media(max-width:960px){.packs{grid-template-columns:1fr}}
.pack{
  position:relative;background:var(--ink-2);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:34px 28px 28px;display:flex;flex-direction:column;gap:10px
}
.pack-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--on-ink-soft);margin:0 0 4px
}
.pack h3{color:var(--on-ink);font-size:23px;text-transform:uppercase;letter-spacing:.01em}
.pack-sous{color:var(--on-ink-soft);font-size:13.5px;margin:0}
.pack-prix{margin:10px 0 4px}
.pack-prix b{font-family:var(--mono);font-size:36px;color:var(--on-ink);letter-spacing:-.02em}
.pack-prix span{font-size:12.5px;color:var(--on-ink-soft)}
/* accents façon référence : pack signature en rose, expérience 360 en or */
.pack-rose .pack-eyebrow{color:var(--rose-2)}
.pack-rose .pack-prix b{color:var(--rose-2)}
.pack-or .pack-eyebrow{color:var(--h1-accent-or)}
.pack-or .pack-prix b{color:var(--h1-accent-or)}
.pack-or .checks svg{color:var(--h1-accent-or)}
.pack-badge.or{background:var(--h1-accent-or)}
.pack .checks{color:var(--on-ink-soft);border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin-top:6px;flex:1}
.pack .checks svg{color:var(--rose-2)}
.pack .btn{justify-content:center;margin-top:14px}
.pack-star{border:2px solid var(--rose);box-shadow:0 24px 60px rgba(255,45,135,.22)}
.pack-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--rose);color:var(--ink);font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 15px;border-radius:100px;white-space:nowrap
}
.pack-lien{display:block;text-align:center;color:var(--rose-2);font-size:13px;font-weight:600;text-decoration:none;margin-top:10px}
.pack-lien:hover{text-decoration:underline}
/* bouton fantôme sur section sombre (packs) */
.sec-ink .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:var(--on-ink)}
.sec-ink .btn-ghost:hover{background:rgba(255,255,255,.13)}
.sec-ink .btn-ghost .arw{background:rgba(255,255,255,.14);color:var(--on-ink)}

/* avis clients (Task 10) */
.avis{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:24px 22px;display:flex;flex-direction:column;gap:16px}
.etoiles{color:var(--rose-txt);font-size:15px;letter-spacing:2px}
.avis p{margin:0;font-size:15px;color:var(--txt-soft);line-height:1.6;flex:1}
.avis-auteur{display:flex;align-items:center;gap:12px}
.avis-auteur img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.avis-auteur b{display:block;font-size:14.5px;font-weight:650}
.avis-auteur span{display:block;font-size:12.5px;color:var(--txt-faint);margin-top:1px}

/* "Adapté à tout événement" — vignettes photo + dégradé (Task 10) */
/* galerie 2 × 2 avec accroche manuscrite + titre capitales + description,
   décalquée de la galerie événements de la référence (retour du 20/08) */
.vignettes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:720px){.vignettes{grid-template-columns:1fr}}
.vignette{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;text-decoration:none}
.vignette img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.vignette .v-in{position:absolute;left:22px;right:22px;bottom:18px;display:flex;flex-direction:column;gap:3px}
.v-accent{
  font-family:"Snell Roundhand","Apple Chancery","Segoe Script","Brush Script MT",cursive;
  font-size:22px;line-height:1.15
}
.v-accent.or{color:var(--h1-accent-or)}
.v-accent.rose{color:var(--rose-2)}
.v-accent.violet{color:var(--h1-accent-violet)}
.v-titre{color:var(--white);font-weight:800;font-size:21px;letter-spacing:.02em;text-transform:uppercase}
.v-desc{color:var(--on-ink-soft);font-size:13px;line-height:1.45}
/* dégradé quasi opaque en bas : garantit l'AA du titre quelle que soit la
   luminosité de la photo source, plutôt qu'un simple assombrissement global. */
/* palier .93 maintenu jusqu'à 36% : le bloc de texte fait désormais 3 lignes
   (accroche + titre + description) et remonte plus haut qu'avant — l'ancien
   dégradé (.32 à 48%) laissait les accroches colorées sous l'AA à leur
   hauteur réelle (attrapé par tests/qc.spec.mjs, interpolation spatiale). */
.vignette::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.95) 0%,rgba(10,10,10,.93) 36%,rgba(10,10,10,.28) 64%,rgba(10,10,10,0) 82%)}
.vignette:hover img{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.vignette:hover img{transform:none}}

/* ---------- simulateur ---------- */
.simu{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(26px,3.6vw,40px);display:grid;grid-template-columns:1.1fr .9fr;gap:38px
}
@media(max-width:880px){.simu{grid-template-columns:1fr;gap:26px}}
.simu fieldset{border:0;padding:0;margin:0 0 26px}
.simu legend{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-faint);margin-bottom:12px;font-weight:600;padding:0
}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
/* color explicite : sans elle, le simulateur placé dans .sec-ink hérite
   de --on-ink (quasi blanc) et le libellé disparaît sur la pastille blanche. */
.opt span{
  display:block;padding:11px 17px;border:1.5px solid var(--rule);border-radius:100px;
  font-size:14.5px;font-weight:600;cursor:pointer;transition:.15s ease;
  background:var(--white);color:var(--txt)
}
.opt .px{color:var(--txt-soft)}
.opt input:checked+span .px{color:#C9C0D4}
.simu legend{color:var(--txt-faint)}
.opt input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt input:focus-visible+span{outline:3px solid var(--rose);outline-offset:2px}
.opt .px{font-family:var(--mono);font-size:12px;font-weight:500;margin-left:5px}
/* bandeau CTA final du devis : dégradé rose + texte noir (seule combinaison qui
   passe l'AA sur toute la largeur du dégradé — cf. rapport). Le bouton interne
   repasse en noir/blanc pour se détacher du panneau plutôt que de s'y fondre. */
.simu-out{
  background:var(--degrade-rose);color:var(--ink);border-radius:var(--r);padding:30px 28px;
  display:flex;flex-direction:column;justify-content:center
}
.simu-out .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.simu-out .prix{
  font-size:60px;font-weight:700;letter-spacing:-.045em;line-height:1;margin:14px 0 4px;
  font-variant-numeric:tabular-nums
}
.simu-out .det{font-size:13.5px;color:var(--ink);line-height:1.75;margin:16px 0 0;
  padding-top:16px;border-top:1px solid rgba(10,10,10,.2)}
.simu-out .det div{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:12.5px}
.simu-out .btn{
  margin-top:22px;justify-content:center;background:var(--ink);color:var(--white)
}
.simu-out .btn:hover{filter:brightness(1.3)}
.simu-out .btn .arw{background:rgba(255,255,255,.18);color:var(--white)}

/* ---------- tableaux / listes ---------- */
.faq{border-top:1px solid var(--rule);max-width:78ch}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  padding:20px 40px 20px 0;font-weight:650;font-size:17.5px;cursor:pointer;
  list-style:none;position:relative;letter-spacing:-.012em
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:19px;font-size:24px;font-weight:400;
  color:var(--rose-txt);transition:transform .2s ease
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 42px 22px 0;color:var(--txt-soft);font-size:15.5px;margin:0;max-width:70ch}

.taglist{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.taglist li{
  font-size:14px;padding:8px 15px;border-radius:100px;background:var(--paper-2);
  border:1px solid var(--rule);color:var(--txt-soft)
}
.sec-ink .taglist li{background:var(--ink-2);border-color:var(--rule-ink);color:var(--on-ink-soft)}

/* villes */
.villes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:960px){.villes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.villes{grid-template-columns:1fr}}
.ville-l{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 18px;background:var(--white);border:1px solid var(--rule);
  border-radius:12px;text-decoration:none;font-weight:600;font-size:15.5px;transition:.16s ease
}
.ville-l:hover{border-color:var(--rose);transform:translateY(-2px)}
.ville-l em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--txt-faint);font-weight:500}
.sec-ink .ville-l{background:var(--ink-2);border-color:var(--rule-ink);color:var(--on-ink)}
/* --txt-faint est calibrée pour le papier : sur l'encre des cartes villes,
   elle tombe à 3.4. Valeur dédiée pour le fond encre (≈5.5 sur ink-2). */
.sec-ink .ville-l em{color:#9A90A8}

/* fil d'ariane */
.bc{font-family:var(--mono);font-size:12px;color:var(--txt-faint);padding:20px 0 0;letter-spacing:.02em}
.bc a{color:var(--txt-soft);text-decoration:none}
.bc a:hover{color:var(--rose-txt)}
.bc span{margin:0 7px;opacity:.5}

/* bandeau démo — dégradé tri-teinte façon barre d'annonce de la référence.
   Texte en --ink (pas blanc) : blanc sur le palier violet ne fait que 3.34:1,
   l'encre passe sur les 3 arrêts (rose 5.64, violet 5.65, or 12.23). */
.demo-bar{
  background:linear-gradient(90deg, var(--rose) 0%, var(--h1-accent-violet) 50%, var(--h1-accent-or) 100%);
  color:var(--ink);font-family:var(--mono);font-size:12px;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  text-align:center;padding:9px 16px;letter-spacing:.03em;font-weight:600
}
.demo-bar .tag{
  background:var(--white);color:var(--ink);border-radius:100px;padding:2px 11px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;flex:none
}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--on-ink-soft);padding:64px 0 40px;font-size:14.5px}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr 1.3fr;gap:30px;padding-bottom:38px;
  border-bottom:1px solid var(--rule-ink)}
@media(max-width:1080px){.f-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:820px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}
footer h4{font-size:12px;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--rose-2);margin:0 0 15px;font-weight:600}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
footer a{color:var(--on-ink-soft);text-decoration:none}
footer a:hover{color:var(--on-ink)}
.f-bot{padding-top:26px;font-family:var(--mono);font-size:12px;color:#8A8096;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.f-liens{display:flex;gap:22px}
.f-liens a{color:#8A8096;text-decoration:none}
.f-liens a:hover{color:var(--on-ink);text-decoration:underline}
.f-logo{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.f-logo .mark{
  width:38px;height:38px;border-radius:12px;background:var(--rose);
  display:grid;place-items:center;flex:none
}
.f-logo .mark span{width:15px;height:15px;border-radius:50%;border:3px solid var(--white);display:block}
.f-logo .logo-txt b{color:var(--on-ink)}
/* sur l'encre du footer, --rose-txt (calibré pour fond blanc) ne fait que
   3.85:1 — on repasse au rose vif (5.64 sur encre). Attrapé par qc.spec.mjs. */
.f-logo .logo-txt b i{color:var(--rose)}
.f-desc{max-width:36ch;line-height:1.65;font-size:14px;margin:0}
.f-contact li{display:flex;align-items:flex-start;gap:10px}
.f-contact svg{color:var(--rose-2);flex:none;margin-top:3px}



/* ---------- pages annexes : sources & mentions légales ---------- */
.tbl-sources{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--white)}
.tbl-sources table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.tbl-sources th{
  text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-soft);padding:14px 18px;border-bottom:1px solid var(--rule)
}
.tbl-sources td{padding:12px 18px;border-bottom:1px solid var(--rule);color:var(--txt-soft)}
.tbl-sources tr:last-child td{border-bottom:0}
.tbl-sources a{color:var(--rose-txt);text-decoration:none}
.tbl-sources a:hover{text-decoration:underline}
.prose-legale{max-width:72ch}
.prose-legale h2{font-size:21px;margin:34px 0 10px}
.prose-legale p{color:var(--txt-soft);font-size:15.5px}
.prose-legale a{color:var(--rose-txt);text-decoration:none}
.prose-legale a:hover{text-decoration:underline}

/* ---------- cocon /guides/ : hub + gabarit article ---------- */
.guide-card{color:inherit;padding:14px 14px 22px}
/* vignette du hub : photo encadrée en tête de card, même architecture que
   .card-materiel (padding réduit + coins arrondis internes 13px) ; le texte
   reprend un retrait de 10px pour retrouver la gouttière d'origine */
.guide-card-img{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:13px;background:var(--paper-2)}
.guide-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.guide-card .guide-date{margin-top:10px}
.guide-card .guide-date,.guide-card h3,.guide-card>p,.guide-card .card-lien-txt{padding-left:10px;padding-right:10px}
.guide-date{font-family:var(--mono);font-size:11.5px;color:var(--txt-faint);margin:0 0 2px;letter-spacing:.04em}
.wrap-article{max-width:820px}
.article h1{font-size:clamp(30px,4.6vw,50px)}
.byline{font-family:var(--mono);font-size:12.5px;color:var(--txt-faint);margin:14px 0 26px;letter-spacing:.02em}
/* image de une : pleine largeur du wrap-article, coins arrondis. Pas de
   loading="lazy" (posée dans le gabarit) : c'est le LCP probable de la page. */
.article-une{border-radius:var(--r);overflow:hidden;margin:0 0 26px;background:var(--paper-2)}
.article-une img{width:100%;height:auto;display:block}
.en-resume{
  background:var(--paper-2);border:1px solid var(--rule);border-left:4px solid var(--rose-txt);
  border-radius:var(--r);padding:20px 24px;margin:0 0 34px
}
.en-resume-titre{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rose-txt);font-weight:700;margin:0 0 10px
}
.en-resume ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:15.5px}
.article h2{font-size:clamp(23px,3vw,31px);margin:40px 0 14px}
.article h3{margin:26px 0 10px}
.article p{color:var(--txt);font-size:16.5px;line-height:1.7}
.article ul,.article ol{font-size:16.5px;line-height:1.7;padding-left:24px;margin:0 0 16px;
  display:flex;flex-direction:column;gap:6px}
.article a{color:var(--rose-txt);text-decoration:none}
.article a:hover{text-decoration:underline}
/* le CTA du handoff est un <a class="btn"> : sans ce garde-fou, .article a
   (0,1,1) écrase le blanc de .btn (0,1,0) → rose sur rose, 1:1 (attrapé par
   tests/qc.spec.mjs sur les premières pages du cocon). */
.article a.btn{color:var(--white)}
.article a.btn:hover{text-decoration:none}
.article .tbl{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);margin:18px 0}
.article table{width:100%;border-collapse:collapse;font-size:15px;min-width:480px}
.article th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-soft);padding:12px 16px;border-bottom:1px solid var(--rule)}
.article td{padding:11px 16px;border-bottom:1px solid var(--rule);color:var(--txt-soft)}
.article tr:last-child td{border-bottom:0}
.note-tableau{font-size:13px;color:var(--txt-faint);margin:-8px 0 18px;line-height:1.55}
.article .faq{margin-bottom:8px}
.outil-article{
  background:var(--ink);color:var(--on-ink);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);margin:26px 0
}
.outil-article h3{color:var(--on-ink);margin-top:0}
.outil-article label{display:block;font-size:13.5px;color:var(--on-ink-soft);margin:12px 0 5px;font-weight:600}
.outil-article input,.outil-article select{
  width:100%;max-width:340px;padding:11px 13px;border-radius:11px;border:1px solid rgba(255,255,255,.25);
  background:var(--ink-2);color:var(--on-ink);font-size:15px
}
.outil-article .resultat{
  margin-top:18px;padding:16px 18px;background:var(--ink-2);border-radius:var(--r);
  border:1px solid rgba(255,111,176,.3);font-size:15px;line-height:1.65;color:var(--on-ink)
}
.outil-article .resultat b{color:var(--rose-2)}
/* pièges de gabarit attrapés par le QC sur la 2e vague d'articles :
   1) un <p>/<li> posé DANS l'outil sombre héritait de ".article p"
   (encre sur encre, quasi invisible) ; 2) le white-space:nowrap global
   des .btn faisait déborder les boutons longs du corps d'article à
   390px. Corrigés ici pour tous les articles d'un coup. */
.article .outil-article p{color:var(--on-ink-soft)}
.article .outil-article li{color:var(--on-ink-soft)}
.article .outil-article h3{color:var(--on-ink)}
.article .btn{white-space:normal;text-align:center}
/* encart « Le conseil du loueur » — même architecture que .en-resume mais fond
   rose très pâle (rgba de --rose, comme .ic-rose) : distinct au premier regard.
   Contraste vérifié par le QC : --txt sur ce fond ≈ 19:1, --rose-txt ≈ 4.7:1. */
.encart-conseil{
  background:rgba(255,45,135,.06);border:1px solid rgba(255,45,135,.18);
  border-left:4px solid var(--rose-txt);border-radius:var(--r);
  padding:18px 22px;margin:24px 0
}
.article .encart-conseil .encart-conseil-titre{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rose-txt);font-weight:700;margin:0 0 8px
}
.article .encart-conseil p{margin:0;font-size:15.5px;color:var(--txt)}
.checklist-inter{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:9px}
.checklist-inter li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px}
.checklist-inter input[type=checkbox]{width:19px;height:19px;margin-top:2px;accent-color:var(--rose-txt);flex:none}
.handoff{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:26px 28px;margin:38px 0 0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px
}
.handoff p{margin:0;font-size:16px;font-weight:600;max-width:52ch}
.bloc-auteur{border-top:1px solid var(--rule);margin-top:34px;padding-top:22px}
.bloc-auteur p{font-size:14px;color:var(--txt-soft);line-height:1.65;margin:0}
.sources{margin-top:26px}
.sources-titre{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-soft);font-weight:700;margin:0 0 10px}
.sources ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;
  font-size:13.5px;color:var(--txt-faint)}
.sources a{color:var(--rose-txt);text-decoration:none}
.sources a:hover{text-decoration:underline}