/* =========================================================
   Otomatiztonbiz — système de design
   Inspiré du langage Apple 2026 (Liquid Glass, révision iOS 27) :
   verre plus opaque, bord foncé fin, reflet spéculaire en haut,
   texte toujours posé sur une surface lisible.
   Les couleurs --accent et --g1/--g2/--g3 sont injectées par le CMS
   (voir src/_data/theme.json et palettes.json).
   ========================================================= */

:root {
  /* Couleurs fixes */
  --encre: #141A32;
  --encre-2: #474D66;
  --encre-3: #6E7490;
  --papier: #FFFFFF;
  --brume: #F3F5F9;
  --nuit: #0E1226;
  --trait: rgba(20, 26, 50, 0.1);
  --succes: #1F9D55;

  /* Valeurs par défaut si le CMS ne fournit rien */
  --accent: #7336EA;
  --accent-hover: #5F27D1;
  --accent-doux: #EFE8FD;
  --g1: #A90BF6;
  --g2: #3C62DF;
  --g3: #00E9F0;
  --degrade: linear-gradient(135deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%);

  /* Typographie : police système (SF Pro sur Apple, Segoe UI Variable sur Windows) */
  --police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Rayons selon la hiérarchie */
  --r-scene: 36px;
  --r-tuile: 28px;
  --r-carte: 22px;
  --r-petit: 14px;
  --r-pilule: 999px;

  --largeur: 1120px;
  --gouttiere: clamp(20px, 5vw, 40px);
  --espace-section: clamp(88px, 12vw, 152px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
.ic { display: inline-block; flex: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--police-titre); color: var(--encre); }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.saut { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 10px; }
.saut:focus { top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.etroit { max-width: calc(820px + 2 * var(--gouttiere)); }
.centre { text-align: center; margin-inline: auto; }

/* ---------- Typographie ---------- */
.titre-1 {
  font-size: clamp(44px, 7.4vw, 92px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.038em;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.titre-1-gauche { margin-inline: 0; font-size: clamp(40px, 5vw, 64px); max-width: none; }
.phrase { display: block; text-wrap: balance; }
.titre-2 {
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.07;
  font-weight: 700;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.titre-3 { font-size: clamp(21px, 2vw, 24px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.titre-4 { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.016em; }
.surtitre { font-size: 17px; font-weight: 600; color: var(--accent); margin-bottom: 14px; letter-spacing: -0.01em; }
.chapo {
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.42;
  color: var(--encre-2);
  letter-spacing: -0.016em;
  max-width: 38em;
  margin-top: 22px;
  text-wrap: pretty;
}
.centre .chapo { margin-inline: auto; }
.discret { color: var(--encre-3); }

/* ---------- Boutons ---------- */
.bouton {
  --fond: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border-radius: var(--r-pilule); border: 0;
  background: var(--fond); color: #fff;
  font: 500 17px/1.2 var(--police); letter-spacing: -0.012em;
  cursor: pointer; text-decoration: none;
  transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.bouton:hover { --fond: var(--accent-hover); text-decoration: none; }
.bouton:active { transform: scale(.97); }
.bouton-grand { min-height: 52px; padding: 14px 28px; font-size: 18px; }
.bouton-petit { min-height: 36px; padding: 7px 16px; font-size: 15px; }
.bouton-second { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.bouton-second:hover { background: var(--accent-doux); color: var(--accent-hover); }
.bouton-plein-largeur { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.actions-centre { justify-content: center; }

.lien-plus { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; font-weight: 500; color: var(--accent); }
.lien-plus .ic { transition: transform .2s var(--ease); }
a:hover .lien-plus .ic, a.lien-plus:hover .ic, .tuile:hover .lien-plus .ic { transform: translateX(3px); }

/* ---------- Matériau verre (Liquid Glass, révision 2026) ---------- */
.verre {
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),        /* reflet spéculaire */
    inset 0 -1px 0 rgba(255, 255, 255, .35),
    0 0 0 .5px rgba(20, 26, 50, .16),               /* bord foncé fin */
    0 12px 32px -14px rgba(20, 26, 50, .28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre { background: rgba(255, 255, 255, .96); }
}
@media (prefers-reduced-transparency: reduce) {
  .verre { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Icône d'app : l'icône du logo devient le motif de chaque service */
.app-icone {
  --t: 44px;
  position: relative;
  display: inline-grid; place-items: center; flex: none;
  width: var(--t); height: var(--t);
  border-radius: calc(var(--t) * .28);
  background: var(--degrade);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 .5px rgba(20, 26, 50, .12);
}
.app-icone::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.app-icone .ic { position: relative; z-index: 1; stroke-width: 2.1; }

/* ---------- En-tête flottant ---------- */
.entete { position: fixed; inset: 12px 0 auto; z-index: 50; padding-inline: 12px; pointer-events: none; }
.barre {
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  max-width: 1080px; margin-inline: auto;
  min-height: 56px; padding: 8px 8px 8px 16px;
  border-radius: var(--r-pilule);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); font-weight: 600; font-size: 18px; letter-spacing: -0.024em; }
.marque:hover { text-decoration: none; }
.marque img { display: block; height: 32px; width: auto; }
.pied .marque img { height: 38px; }
.barre-liens { display: flex; align-items: center; gap: 2px; list-style: none; margin-left: auto; }
.barre-liens a { display: block; padding: 8px 12px; border-radius: var(--r-pilule); color: var(--encre); font-size: 15px; }
.barre-liens a:hover { background: rgba(20, 26, 50, .06); text-decoration: none; }
.barre-liens a[aria-current="page"] { font-weight: 600; }
.barre-tel { display: none; }
.barre-cta { margin-left: 6px; }
.barre-menu { display: none; }

@media (max-width: 900px) {
  .barre { padding-left: 14px; }
  .barre-cta { margin-left: auto; }
  .barre-menu {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(20, 26, 50, .06); color: var(--encre); cursor: pointer;
  }
  .barre-menu .i-fermer { display: none; }
  .barre-menu[aria-expanded="true"] .i-ouvrir { display: none; }
  .barre-menu[aria-expanded="true"] .i-fermer { display: block; }
  .barre-liens {
    position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px; border-radius: var(--r-carte);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 0 0 .5px rgba(20, 26, 50, .16), 0 20px 40px -16px rgba(20, 26, 50, .35);
    opacity: 0; transform: translateY(-6px) scale(.98); visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s;
  }
  .barre-liens.ouvert { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .barre-liens a { padding: 14px 14px; font-size: 18px; border-radius: 12px; }
  .barre-tel { display: block; border-top: 1px solid var(--trait); margin-top: 6px; padding-top: 6px; }
  .barre-tel a { display: flex; align-items: center; gap: 10px; color: var(--accent); }
}
@media (max-width: 420px) {
  .barre-cta { padding-inline: 12px; font-size: 14px; }
}
@media (max-width: 400px) {
  .barre .marque img { height: 36px; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--espace-section); }
.section-brume { background: var(--brume); }
.section-nuit { background: var(--nuit); color: #fff; overflow: hidden; }
.section-nuit .titre-2, .section-nuit h3 { color: #fff; }
.section-nuit .chapo { color: rgba(255, 255, 255, .72); }
.entete-section { margin-bottom: clamp(40px, 6vw, 64px); max-width: 760px; }
.lien-section { margin-top: 40px; }

/* Aurore : champ de couleur de la marque, flou, derrière le verre */
.aurore {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.aurore::before, .aurore::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(100px);
}
.aurore::before { width: 56vw; height: 56vw; max-width: 760px; max-height: 760px; background: var(--g1); left: -6%; bottom: -34%; opacity: .14; }
.aurore::after { width: 52vw; height: 52vw; max-width: 700px; max-height: 700px; background: var(--g3); right: -8%; bottom: -30%; opacity: .2; }
.section > .conteneur, .hero > .conteneur { position: relative; z-index: 1; }

/* ---------- Hero accueil ---------- */
.hero { position: relative; overflow: hidden; padding-top: clamp(140px, 18vw, 196px); }
.page-accueil .hero { padding-bottom: clamp(72px, 10vw, 128px); }
.aurore-hero::before { left: 8%; bottom: auto; top: 46%; }
.aurore-hero::after { right: 6%; bottom: auto; top: 38%; }

.notifs-scene { margin-top: clamp(56px, 8vw, 88px); }
.notifs { list-style: none; display: grid; gap: 12px; max-width: 460px; margin-inline: auto; }
.notif {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 14px 16px 15px; border-radius: var(--r-carte);
}
.notif:nth-child(2) { margin-inline: 3% -3%; }
.notif:nth-child(3) { margin-inline: -2% 2%; }
.notif-corps { min-width: 0; flex: 1; }
.notif-tete { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--encre-3); line-height: 1.3; }
.notif-titre { font-weight: 600; font-size: 16px; line-height: 1.3; margin-top: 1px; }
.notif-texte { font-size: 15px; line-height: 1.35; color: var(--encre-2); }

/* Moment orchestré unique : les notifications arrivent comme sur un iPhone */
@media (prefers-reduced-motion: no-preference) {
  .js .notif { opacity: 0; transform: translateY(-18px) scale(.96); }
  .js .notif.visible { animation: arrivee .7s var(--ease) forwards; animation-delay: calc(var(--i) * 420ms + 250ms); }
  @keyframes arrivee { to { opacity: 1; transform: none; } }
}

/* ---------- Cibles (artisans / médical) ---------- */
.cibles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 64px); }
.cible {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 520px; padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-scene); overflow: hidden;
  color: var(--encre); background: var(--brume);
  transition: transform .35s var(--ease);
}
.cible:hover { transform: scale(1.01); }
.cible p { color: var(--encre-2); margin-top: 10px; max-width: 32em; }
.cible .titre-3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; }
.cible .lien-plus { margin-top: 16px; }
.cible-artisans { background: var(--nuit); }
.cible-artisans .titre-3 { color: #fff; }
.cible-artisans p { color: rgba(255, 255, 255, .7); }
.cible-artisans .lien-plus { color: #fff; }

.cible-visuel { position: relative; display: grid; place-items: end center; flex: 1; padding-top: 40px; }

.cible-artisans .cible-visuel::before {
  content: ""; position: absolute; width: 90%; aspect-ratio: 1; bottom: -55%;
  background: var(--degrade); border-radius: 50%; filter: blur(70px); opacity: .45;
}
.mini-appel {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: var(--r-pilule);
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 15px; font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 .5px rgba(255, 255, 255, .25);
}
.mini-appel-point { width: 9px; height: 9px; border-radius: 50%; background: #39D98A; box-shadow: 0 0 0 4px rgba(57, 217, 138, .25); }
.onde { display: flex; align-items: center; gap: 3px; height: 26px; }
.onde i { width: 3px; height: var(--h); border-radius: 2px; background: #fff; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .onde i { animation: onde 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--h) * -12ms); transform-origin: center; }
  @keyframes onde { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
}

.mini-chat { display: grid; gap: 10px; width: 100%; max-width: 360px; }
.bulle { padding: 11px 15px; border-radius: 20px; font-size: 15px; line-height: 1.35; max-width: 85%; margin: 0 !important; }
.bulle-in { background: #fff; color: var(--encre) !important; border-bottom-left-radius: 6px; box-shadow: 0 0 0 .5px var(--trait); }
.bulle-out { justify-self: end; background: var(--accent); color: #fff !important; border-bottom-right-radius: 6px; }

/* ---------- Bento des services ---------- */
.bento { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 16px; }
.tuile {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-tuile); background: var(--papier);
  grid-column: span 3;
}
.tuile p { color: var(--encre-2); }
.tuile .app-icone { margin-bottom: 8px; }
.tuile .lien-plus { margin-top: auto; padding-top: 6px; }
.tuile-petit { grid-column: span 2; }
.tuile-moyen { grid-column: span 3; }
.tuile-grand { grid-column: span 4; grid-row: span 2; }
.tuile-grand .titre-3 { font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -0.028em; }
.tuile-grand > p { font-size: 19px; max-width: 30em; }
.lien-etendu { color: inherit; }
.lien-etendu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lien-etendu:hover { text-decoration: none; }
.lien-etendu:focus-visible { outline: none; }
.lien-etendu:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 3px; }
.tuile:has(.lien-etendu) { transition: transform .35s var(--ease); }
.tuile:has(.lien-etendu):hover { transform: scale(1.012); }


.tuile-demo {
  position: relative; flex: 1; display: grid; place-items: center;
  margin: 16px -8px 8px; padding: 28px 12px; min-height: 180px;
  border-radius: var(--r-carte); overflow: hidden;
  background: var(--brume);
}
.tuile-demo::before {
  content: ""; position: absolute; inset: 20% 10%; background: var(--degrade); filter: blur(46px); opacity: .32; border-radius: 50%;
}
.ligne-flux { position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; }
.etiquette { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--r-pilule); font-size: 14px; font-weight: 500; white-space: nowrap; }
.etiquette .ic { color: var(--accent); }
.etiquette-fin { background: var(--encre); color: #fff; box-shadow: none; }
.etiquette-fin .ic { color: var(--g3); }
.trait { width: 22px; height: 2px; border-radius: 2px; background: var(--encre-3); opacity: .4; }

/* ---------- Étapes (vraie séquence) ---------- */
.etapes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(44px, 6vw, 72px); counter-reset: etape; }
.etapes-4 { grid-template-columns: repeat(4, 1fr); }
.etape { position: relative; padding-top: 22px; border-top: 1px solid var(--trait); }
.etape p { color: var(--encre-2); margin-top: 8px; }
.etape-num {
  display: inline-block; margin-bottom: 18px;
  font: 700 clamp(44px, 5vw, 64px)/1 var(--police-titre); letter-spacing: -0.04em;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Cartes de prix ---------- */
.audit, .offre { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.audit-premium { margin-top: 28px; color: rgba(255, 255, 255, .72); max-width: 34em; }
.audit-premium strong { color: #fff; font-weight: 600; }
.nowrap { white-space: nowrap; }
.carte-prix {
  position: relative; isolation: isolate; padding: clamp(28px, 3.4vw, 40px);
  border-radius: var(--r-scene); background: var(--papier);
  box-shadow: 0 0 0 .5px rgba(20, 26, 50, .12), 0 30px 60px -30px rgba(20, 26, 50, .3);
}
.carte-prix-nuit {
  background: rgba(255, 255, 255, .07); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 0 .5px rgba(255, 255, 255, .16);
}
.carte-prix-nuit::before {
  content: ""; position: absolute; inset: -30% -20% auto auto; width: 70%; aspect-ratio: 1;
  background: var(--degrade); filter: blur(80px); opacity: .35; z-index: -1; border-radius: 50%;
}
.carte-prix-nom { font-weight: 600; font-size: 17px; color: var(--encre-2); }
.carte-prix-nuit .carte-prix-nom { color: rgba(255, 255, 255, .75); }
.prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.prix-montant { font: 700 clamp(48px, 5.4vw, 64px)/1 var(--police-titre); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.prix-devise { font-size: 20px; font-weight: 600; color: var(--encre-3); }
.carte-prix-nuit .prix-devise { color: rgba(255, 255, 255, .6); }
.prix-unite { width: 100%; font-size: 15px; color: var(--encre-3); }
.prix-duo { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; }
.prix-plus .prix-montant { font-size: clamp(36px, 3.8vw, 44px); }
.prix-plus::before { content: "+"; font: 600 28px/1 var(--police-titre); color: var(--encre-3); margin-right: 4px; }

.coches { list-style: none; display: grid; gap: 10px; margin: 26px 0 30px; }
.coches li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.coches .ic { color: var(--accent); margin-top: 2px; }
.carte-prix-nuit .coches .ic { color: var(--g3); }
.coches-compactes { gap: 8px; margin: 18px 0 0; font-size: 15px; color: var(--encre-2); }
.coches-compactes .ic { margin-top: 1px; }

.packs { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pack { padding: 28px 24px 30px; border-radius: var(--r-tuile); background: var(--brume); }
.pack-nom { font-size: 19px; font-weight: 600; letter-spacing: -0.018em; }
.pack .prix-montant { font-size: 40px; }
.pack .prix-devise { font-size: 17px; }

/* ---------- CTA final ---------- */
.cta-final { overflow: hidden; background: var(--brume); }
.cta-final .aurore::before { left: -10%; bottom: -60%; }
.cta-final .aurore::after { right: -10%; bottom: -50%; }
.cta-alternatives { margin-top: 22px; color: var(--encre-2); font-size: 16px; }

/* ---------- Pied de page ---------- */
.pied { padding-block: 64px 32px; font-size: 14px; color: var(--encre-2); border-top: 1px solid var(--trait); }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 32px; }
.pied-marque p { margin-top: 14px; max-width: 26em; }
.pied-titre { font-size: 14px; font-weight: 600; margin-bottom: 12px; font-family: var(--police); }
.pied ul { list-style: none; display: grid; gap: 8px; }
.pied a { color: var(--encre-2); }
.pied a:hover { color: var(--encre); }
.pied-contact { line-height: 1.8; }
.pied-horaires { margin-top: 8px; line-height: 1.6; }
.pied-bas { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; color: var(--encre-3); }
.pied-bas::before { content: ""; flex-basis: 100%; height: 1px; background: var(--trait); margin-bottom: 4px; }

/* =========================================================
   Page métier (plombier)
   ========================================================= */
.hero-metier { padding-bottom: clamp(72px, 9vw, 120px); }
.aurore-metier::before { left: auto; right: 10%; bottom: auto; top: 12%; opacity: .22; }
.aurore-metier::after { right: -12%; bottom: -20%; opacity: .3; }
.hero-metier-grille { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero-metier .chapo { margin-top: 20px; }
.hero-prix { margin-top: 18px; font-size: 15px; color: var(--encre-3); }
.fil { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--encre-3); margin-bottom: 28px; }
.fil a { color: var(--encre-2); }
.fil .ic { opacity: .6; }

.appel { margin: 0; padding: 20px; border-radius: var(--r-scene); max-width: 460px; justify-self: end; width: 100%; }
.appel-tete { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; border-bottom: 1px solid var(--trait); }
.appel-nom { font-weight: 600; font-size: 17px; }
.appel-statut { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--encre-3); }
.appel-duree { font-variant-numeric: tabular-nums; margin-left: 4px; }
.point-direct { width: 8px; height: 8px; border-radius: 50%; background: var(--succes); box-shadow: 0 0 0 3px rgba(31, 157, 85, .2); }
.transcript { list-style: none; display: grid; gap: 8px; padding: 16px 0; }
.replique { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.38; }
.replique-agent { background: var(--papier); border-bottom-left-radius: 6px; box-shadow: 0 0 0 .5px var(--trait); }
.replique-client { justify-self: end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.devis-notif {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 18px; background: var(--encre); color: #fff;
}
.devis-notif .notif-titre { color: #fff; font-size: 15px; }
.devis-notif .notif-texte { color: rgba(255, 255, 255, .7); font-size: 14px; }
.devis-coche { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--succes); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .js .replique, .js .devis-notif { opacity: 0; transform: translateY(8px); }
  .js .appel.visible .replique, .js .appel.visible .devis-notif { animation: arrivee .5s var(--ease) forwards; animation-delay: calc(var(--i) * 650ms + 300ms); }
}

.probleme-titre { max-width: 22ch; }
.probleme-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); margin-top: clamp(40px, 6vw, 64px); }
.probleme-point { padding-left: 18px; border-left: 3px solid; border-image: var(--degrade) 1; }
.probleme-point p { color: var(--encre-2); margin-top: 8px; }

/* Simulateur */
.simulateur {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: stretch;
  padding: clamp(28px, 5vw, 64px); border-radius: var(--r-scene); background: var(--brume);
}
.simu-reglages .chapo { margin-bottom: 18px; }
.curseur { margin-top: 26px; }
.curseur label { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; }
.curseur output { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--encre); white-space: nowrap; }
.curseur input[type="range"] {
  --p: 50%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin-top: 8px; background: transparent; cursor: pointer;
}
.curseur input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(20, 26, 50, .12) var(--p)); }
.curseur input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(20, 26, 50, .12); }
.curseur input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.curseur input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 .5px rgba(20, 26, 50, .2), 0 3px 8px rgba(20, 26, 50, .22);
}
.curseur input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px rgba(20, 26, 50, .2), 0 3px 8px rgba(20, 26, 50, .22); }
.simu-resultat {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 4vw, 44px); border-radius: var(--r-tuile);
  background: var(--nuit); color: #fff; position: relative; overflow: hidden; isolation: isolate;
}
.simu-resultat::before { content: ""; position: absolute; width: 90%; aspect-ratio: 1; right: -40%; top: -40%; background: var(--degrade); filter: blur(70px); opacity: .45; z-index: -1; border-radius: 50%; }
.simu-libelle { color: rgba(255, 255, 255, .72); font-weight: 500; }
.simu-montant { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.simu-montant [data-sortie] { font: 700 clamp(52px, 6vw, 76px)/1 var(--police-titre); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.simu-montant .prix-devise { color: rgba(255, 255, 255, .6); }
.simu-comparaison { margin-top: 22px; font-size: 19px; font-weight: 600; letter-spacing: -0.016em; }
.simu-note { margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, .55); }

/* FAQ */
.faq { margin-top: 44px; border-top: 1px solid var(--trait); }
.faq-item { border-bottom: 1px solid var(--trait); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-signe { position: relative; width: 16px; height: 16px; flex: none; }
.faq-signe::before, .faq-signe::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: var(--encre-2); transition: transform .3s var(--ease); }
.faq-signe::after { transform: rotate(90deg); }
.faq-item[open] .faq-signe::after { transform: rotate(0deg); }
.faq-item p { padding: 0 36px 24px 0; color: var(--encre-2); max-width: 44em; }
.autres-metiers { margin-top: 44px; color: var(--encre-2); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1000px) {
  .etapes-4 { grid-template-columns: repeat(2, 1fr); }
  .packs { grid-template-columns: repeat(2, 1fr); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .tuile-grand { grid-column: span 6; grid-row: auto; }
  .tuile-petit { grid-column: span 3; }
}
@media (max-width: 860px) {
  .hero-metier-grille, .audit, .offre, .simulateur { grid-template-columns: 1fr; }
  .appel { justify-self: stretch; max-width: none; }
  .cibles { grid-template-columns: 1fr; }
  .cible { min-height: 440px; }
  .probleme-points { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .bento { grid-template-columns: 1fr; }
  .tuile, .tuile-petit, .tuile-moyen, .tuile-grand { grid-column: auto; }
  .etapes, .etapes-4 { grid-template-columns: 1fr; }
  .packs { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .actions .bouton-grand { width: 100%; }
  .cible { min-height: 0; }
  .cible-visuel { min-height: 170px; padding-top: 32px; }
  .notif:nth-child(n) { margin-inline: 0; }
  .ligne-flux { flex-direction: column; }
  .trait { width: 2px; height: 14px; }
}

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

/* =========================================================
   Médias gérés dans le CMS (image, vidéo, vidéo en boucle, audio)
   ========================================================= */
.media { position: relative; margin: 0; overflow: hidden; background: var(--brume); border-radius: var(--r-scene); isolation: isolate; }
.media img, .media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-lecteur { aspect-ratio: 16 / 9; background: var(--nuit); }
.media-lecteur video { object-fit: contain; background: #000; }
.media-lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Lecture différée des vidéos YouTube / Vimeo : rien n'est chargé avant le clic */
.video-facade { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: radial-gradient(120% 90% at 70% 10%, var(--g2), var(--nuit) 70%); }
.video-facade:hover { text-decoration: none; }
.video-facade img { position: absolute; inset: 0; }
.video-bouton {
  position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); color: #fff;
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 .5px rgba(255, 255, 255, .35), 0 16px 40px -12px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.video-bouton .ic { margin-left: 4px; }
.video-facade:hover .video-bouton { transform: scale(1.06); background: rgba(255, 255, 255, .32); }
.video-facade:focus-visible { outline-offset: -6px; border-radius: inherit; }

/* Vidéo d'ambiance en boucle : bouton pause toujours disponible */
.video-pause {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(14, 18, 38, .55); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.video-pause .i-lire { display: none; }
.video-pause[aria-pressed="true"] .i-pause { display: none; }
.video-pause[aria-pressed="true"] .i-lire { display: block; }
.video-pause .ic { width: 16px; height: 16px; }

/* Lecteur audio */
.lecteur { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: var(--r-pilule); text-align: left; }
.lecteur-natif { width: 100%; }
.js .lecteur-natif { display: none; }
.lecteur-ui { display: flex; align-items: center; gap: 14px; width: 100%; }
.lecteur-ui[hidden] { display: none; }
.lecteur-bouton {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.lecteur-bouton:hover { background: var(--accent-hover); }
.lecteur-bouton:active { transform: scale(.94); }
.lecteur-bouton .i-lire .ic { margin-left: 3px; }
.lecteur-bouton .i-pause { display: none; }
.lecteur.en-lecture .lecteur-bouton .i-lire { display: none; }
.lecteur.en-lecture .lecteur-bouton .i-pause { display: block; }
.lecteur-corps { flex: 1; min-width: 0; }
.lecteur-titre { font-weight: 600; font-size: 15px; line-height: 1.2; }
.lecteur-piste { display: flex; align-items: center; gap: 10px; }
.lecteur-temps { font-size: 13px; color: var(--encre-3); font-variant-numeric: tabular-nums; min-width: 4.6em; text-align: right; white-space: nowrap; }
.lecteur input[type="range"] {
  --p: 0%;
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
.lecteur input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(20, 26, 50, .14) var(--p)); }
.lecteur input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(20, 26, 50, .14); }
.lecteur input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.lecteur input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--accent); border: 0; }
.lecteur input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent); }

/* Placement des médias selon l'emplacement */
.hero-media { margin-top: clamp(48px, 7vw, 80px); }
.media-hero { max-width: 1040px; margin-inline: auto; aspect-ratio: 16 / 9; box-shadow: 0 0 0 .5px rgba(20, 26, 50, .12), 0 40px 80px -40px rgba(20, 26, 50, .45); }
.hero-metier-media { display: grid; gap: 14px; justify-self: end; width: 100%; max-width: 480px; }
.media-hero-metier { aspect-ratio: 4 / 5; box-shadow: 0 0 0 .5px rgba(20, 26, 50, .12), 0 30px 60px -30px rgba(20, 26, 50, .4); }
.media-hero-metier.media-lecteur { aspect-ratio: 16 / 9; }
.appel .lecteur-appel { margin-top: 14px; box-shadow: 0 0 0 .5px var(--trait); background: var(--brume); }

.media-cible { position: absolute; inset: auto 0 0; height: 55%; border-radius: 0; background: transparent; }
.cible-avec-media { justify-content: flex-start; }
.media-tuile { border-radius: var(--r-carte); aspect-ratio: 16 / 10; margin-top: 8px; }
.tuile-grand .media-tuile { flex: 1; min-height: 200px; aspect-ratio: auto; }
.media-carte { border-radius: var(--r-carte); aspect-ratio: 4 / 3; margin-top: 24px; }

/* Section démo (visible seulement si un média est renseigné) */
.demo-media { margin-top: clamp(36px, 5vw, 56px); }
.demo-media .media { max-width: 960px; margin-inline: auto; box-shadow: 0 0 0 .5px rgba(20, 26, 50, .12), 0 40px 80px -40px rgba(20, 26, 50, .45); }
.demo-image .media, .demo-boucle .media { aspect-ratio: 16 / 9; }
.demo-audio .lecteur { max-width: 520px; margin-inline: auto; padding: 14px 24px 14px 14px; }
.demo-audio .lecteur-bouton { width: 56px; height: 56px; }
.demo-audio .lecteur-titre { font-size: 17px; }

/* =========================================================
   Page Artisans
   ========================================================= */
.hero-artisans { padding-bottom: clamp(56px, 8vw, 96px); }
.hero-artisans .aurore { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.hero-artisans .hero-prix { margin-top: 18px; }
.fil-centre { justify-content: center; }
.section-metiers { padding-top: clamp(56px, 7vw, 88px); }
.metiers { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 64px); }
.metier-carte {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 34px); border-radius: var(--r-scene); background: var(--brume);
  transition: transform .35s var(--ease);
}
.metier-carte:hover { transform: scale(1.012); }
.metier-texte .app-icone { margin-bottom: 18px; }
.metier-texte .titre-3 { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -0.028em; }
.metier-texte p { color: var(--encre-2); margin-top: 8px; }
.metier-carte .lien-plus { margin-top: 22px; }
.metier-visuel { display: grid; gap: 10px; align-content: end; flex: 1; min-height: 170px; margin-top: 28px; }
.metier-visuel .bulle { max-width: 92%; }
.metier-visuel .etiquette { justify-self: end; margin: 0; }
.metier-autre {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 20px; padding: 24px clamp(24px, 3vw, 34px); border-radius: var(--r-tuile);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.metier-autre p { color: var(--encre-2); margin-top: 4px; max-width: 46em; }

@media (max-width: 1000px) {
  .metiers { grid-template-columns: 1fr; }
  .metier-carte { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: end; }
  .metier-visuel, .media-carte { grid-row: 1 / span 2; grid-column: 2; margin-top: 0; }
  .metier-carte .lien-plus { grid-column: 1; }
}
@media (max-width: 640px) {
  .metier-carte { display: flex; align-items: stretch; }
  .metier-visuel { min-height: 0; }
  .media-carte { margin-top: 20px; }
  .hero-metier-media { max-width: none; }
  .media-hero-metier { aspect-ratio: 4 / 3; }
  .lecteur { padding-right: 14px; }
}
@media (max-width: 860px) {
  .hero-metier-media { justify-self: stretch; max-width: none; }
}

/* =========================================================
   Tranche 2 : pages simples (tarifs, contact, équipe, légal)
   ========================================================= */
.hero-simple { padding-bottom: clamp(56px, 8vw, 96px); }
.hero-simple .aurore { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent); mask-image: linear-gradient(180deg, #000 50%, transparent); }
.sommaire { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; }
.sommaire a { display: inline-block; padding: 8px 16px; border-radius: var(--r-pilule); background: rgba(20, 26, 50, .055); color: var(--encre); font-size: 15px; }
.sommaire a:hover { background: rgba(20, 26, 50, .1); text-decoration: none; }

/* ---------- Médical & Esthétique ---------- */
.replique-heure { display: block; margin-top: 3px; font-size: 11px; line-height: 1; text-align: right; opacity: .62; font-variant-numeric: tabular-nums; }
.section-segments { padding-bottom: clamp(56px, 8vw, 104px); }
.segments { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 64px); }
.segment { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-tuile); background: var(--brume); }
.segment .app-icone { margin-bottom: 12px; }
.segment p { color: var(--encre-2); }
.segment .media-carte { margin-top: 14px; }
.cadre-titre { margin-top: 26px; }
.coches-cadre { gap: 0; margin: 0; font-size: clamp(18px, 1.8vw, 21px); font-weight: 500; letter-spacing: -0.014em; }
.coches-cadre li { gap: 14px; padding: 17px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.coches-cadre li:first-child { border-top: 1px solid rgba(255, 255, 255, .12); }
.coches-cadre .ic { color: var(--g3); margin-top: 2px; }

/* ---------- Tarifs ---------- */
.section-tarifs { padding-top: clamp(40px, 6vw, 72px); }
.duo-prix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }
.duo-prix .carte-prix { display: flex; flex-direction: column; }
.duo-prix .coches { flex: 1; align-content: start; }
.carte-prix-pourqui { font-size: 15px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.carte-prix-lien { margin-top: 18px; text-align: center; }
.carte-prix-claire { color: var(--encre); background: var(--papier); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .2), 0 40px 80px -40px rgba(0, 0, 0, .6); }
.section-tarifs .carte-prix { box-shadow: 0 0 0 .5px rgba(20, 26, 50, .12), 0 30px 60px -34px rgba(20, 26, 50, .32); }
.note-prix { margin-top: 24px; font-size: 15px; color: var(--encre-3); }
.pack-action { display: flex; flex-direction: column; }
.pack-action .coches { flex: 1; align-content: start; }
.pack-actions { display: grid; gap: 12px; justify-items: center; margin-top: 26px; }
.pack-actions .bouton-second { background: var(--papier); }

/* ---------- Contact ---------- */
.section-canaux { padding-top: 0; }
.canaux { list-style: none; display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.canal {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; align-content: center;
  padding: 22px 26px; border-radius: var(--r-tuile); background: var(--brume);
  transition: transform .35s var(--ease);
}
.canal:hover { transform: scale(1.012); }
.canal > .app-icone { grid-row: span 3; }
.canal .titre-4 { font-size: 17px; }
.canal p { color: var(--encre-2); font-size: 15px; }
.canal .canal-valeur { color: var(--encre); font-size: 19px; font-weight: 600; letter-spacing: -0.016em; margin: 2px 0; }
.canal-principal {
  grid-row: span 3; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; overflow: hidden; isolation: isolate;
  min-height: 380px; padding: clamp(30px, 4vw, 48px); border-radius: var(--r-scene); background: var(--nuit); color: #fff;
}
.canaux:not(.canaux-4) .canal-principal { grid-row: span 2; min-height: 300px; }
.canal-principal::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; right: -30%; bottom: -45%; background: var(--degrade); filter: blur(80px); opacity: .5; z-index: -1; border-radius: 50%; }
.canal-principal .app-icone { margin-bottom: 14px; }
.canal-principal .titre-3 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.032em; color: #fff; }
.canal-principal p { color: rgba(255, 255, 255, .72); font-size: 17px; }
.canal-bouton { margin-top: auto; }
.canal-principal:hover .canal-bouton { background: var(--accent-hover); }

.contact-grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.formulaire {
  position: relative; display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-scene); background: var(--papier);
  box-shadow: 0 0 0 .5px rgba(20, 26, 50, .12), 0 30px 60px -30px rgba(20, 26, 50, .25);
}
.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.champ { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.champ label, .champ legend { padding: 0; font-size: 15px; font-weight: 500; }
.champ legend { margin-bottom: 8px; }
.facultatif { color: var(--encre-3); font-weight: 400; }
.champ input, .champ textarea {
  width: 100%; padding: 13px 16px; border: 0; border-radius: var(--r-petit);
  font: inherit; font-size: 17px; color: var(--encre); background: var(--brume);
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; background: var(--papier); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-doux); }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille { position: relative; }
.pastille input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pastille span { display: inline-block; padding: 10px 16px; border-radius: var(--r-pilule); background: var(--brume); font-size: 15px; transition: background-color .2s var(--ease), color .2s var(--ease); }
.pastille input:checked + span { background: var(--accent); color: #fff; }
.pastille input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.formulaire-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 4px; }
.mention-donnees { max-width: 30em; font-size: 14px; color: var(--encre-3); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.infos { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 6vw, 72px); align-items: center; }
.infos-avec-media { grid-template-columns: 1fr 1fr; }
.infos-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: clamp(32px, 5vw, 48px) 0 0; }
.infos-avec-media .infos-liste { grid-template-columns: 1fr; }
.infos-liste > div { padding-top: 18px; border-top: 1px solid var(--trait); }
.infos-liste dt { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.infos-liste dt .ic { color: var(--accent); }
.infos-liste dd { margin: 8px 0 0; color: var(--encre-2); line-height: 1.6; }
.media-contact { aspect-ratio: 4 / 3; box-shadow: 0 0 0 .5px rgba(20, 26, 50, .12), 0 30px 60px -30px rgba(20, 26, 50, .35); }

.hero-merci { min-height: 72vh; }
.merci-coche { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 28px; border-radius: 50%; background: var(--succes); color: #fff; }

/* ---------- Équipe et histoire ---------- */
.hero-avec-media { padding-bottom: clamp(56px, 8vw, 96px); }
.section-histoire { padding-top: clamp(40px, 6vw, 80px); }
.histoire { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(28px, 6vw, 88px); align-items: start; }
.histoire-texte p { font: 600 clamp(22px, 2.5vw, 31px)/1.28 var(--police-titre); letter-spacing: -0.024em; color: var(--encre-3); text-wrap: pretty; }
.histoire-texte p + p { margin-top: .85em; }
.histoire-texte .histoire-objectif { color: var(--encre); }
.equipe { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: clamp(40px, 6vw, 64px); }
.membre { grid-column: span 2; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 24px 34px; border-radius: var(--r-tuile); background: var(--papier); text-align: center; }
.membre:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.membre .app-icone { margin-bottom: 18px; }
.membre-photo { width: 96px; height: 96px; margin-bottom: 18px; border-radius: 50%; object-fit: cover; }
.membre-nom { color: var(--encre-2); }
.membre-exp { color: var(--encre-3); font-size: 15px; }
.temoignages { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: clamp(40px, 6vw, 56px); }
.temoignage figure { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; height: 100%; margin: 0; padding: 32px; border-radius: var(--r-tuile); background: var(--papier); }
.temoignage blockquote { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -0.014em; }
.temoignage figcaption { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.temoignage figcaption img { border-radius: 50%; object-fit: cover; }
.temoignage figcaption > span { display: grid; }

/* ---------- Pages légales ---------- */
.hero-doc { padding-bottom: 12px; }
.hero-doc .etroit, .doc { max-width: calc(760px + 2 * var(--gouttiere)); }
.hero-doc .titre-1-gauche { font-size: clamp(38px, 5vw, 60px); }
.hero-doc .chapo { font-size: 19px; }
.doc-maj { margin-top: 14px; font-size: 15px; color: var(--encre-3); }
.section-doc { padding-top: 32px; }
.doc-section { padding: 28px 0 30px; border-top: 1px solid var(--trait); }
.doc-section .titre-4 { margin-bottom: 10px; }
.doc-section p { max-width: 64ch; color: var(--encre-2); }
.doc-section p + p { margin-top: 8px; }
.doc a { overflow-wrap: anywhere; }
.doc-identite { display: grid; margin: 0; }
.doc-identite > div { display: grid; grid-template-columns: 230px 1fr; gap: 16px; padding: 9px 0; }
.doc-identite dt { color: var(--encre-3); }
.doc-identite dd { margin: 0; }
.doc-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 15px; }
.doc-table th, .doc-table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; }
.doc-table thead th { font-weight: 500; color: var(--encre-3); }
.doc-table tbody th { font-weight: 600; }
.doc-table td { color: var(--encre-2); }

/* ---------- Responsive, tranche 2 ---------- */
@media (max-width: 1000px) {
  .equipe { grid-template-columns: repeat(2, 1fr); }
  .membre, .membre:nth-child(4):nth-last-child(2) { grid-column: auto; }
  .membre:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .segments, .duo-prix, .contact-grille, .histoire, .canaux, .infos-avec-media { grid-template-columns: 1fr; }
  .canal-principal, .canaux:not(.canaux-4) .canal-principal { grid-row: auto; min-height: 300px; }
  .infos-liste { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .champs-duo { grid-template-columns: 1fr; }
  .equipe { grid-template-columns: 1fr; }
  .membre:last-child:nth-child(odd) { grid-column: auto; }
  .formulaire-pied .bouton { width: 100%; }
  .canal { padding: 20px; column-gap: 14px; }
  .canal .canal-valeur { font-size: 17px; }
  .doc-identite > div { grid-template-columns: 1fr; gap: 2px; }
  .doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc-table tr { display: grid; grid-template-columns: 1fr; padding: 10px 0; border-bottom: 1px solid var(--trait); }
  .doc-table th, .doc-table td { padding: 1px 0; border: 0; }
  .sommaire { gap: 6px; }
}
.section-rapprochee { padding-top: clamp(24px, 4vw, 48px); }
.section-canaux + .section:not(.section-brume) { padding-top: clamp(40px, 6vw, 80px); }
.prix-depuis { font-size: 15px; font-weight: 500; color: var(--encre-3); }
.forfaits { margin-top: 40px; }
.forfaits .titre-4 { margin-bottom: 4px; }
@media (max-width: 640px) {
  .forfaits .doc-table td[data-label]::before { content: attr(data-label) " : "; color: var(--encre-3); }
}

/* =========================================================
   Page de pub plombiers (/offre-plombiers/)
   ========================================================= */
.lp-bandeau {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 8px 14px; border-radius: var(--r-pilule);
  background: var(--accent-doux); color: var(--accent-hover); font-size: 15px; font-weight: 600;
}
.lp-bandeau:hover { text-decoration: none; background: #E4D9FC; }
.lp-bandeau-point { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 3px rgba(229, 72, 77, .2); }
.lp-lieux { display: inline-flex; align-items: center; gap: 6px; }
.lp-legende { margin-top: 12px; font-size: 13px; color: var(--encre-3); text-align: center; }
.lp-surtitre-nuit { color: var(--g3); display: inline-flex; align-items: center; gap: 8px; }

.lp-chiffres { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-chiffres li {
  display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; border-radius: var(--r-tuile);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 .5px rgba(255, 255, 255, .14);
}
.lp-chiffre {
  font: 700 clamp(36px, 4vw, 48px)/1 var(--police-titre); letter-spacing: -0.035em;
  background: linear-gradient(90deg, #fff, var(--g3)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-chiffre-texte { color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.35; }

.lp-modules { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-module { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; border-radius: var(--r-tuile); background: var(--papier); }
.lp-module .app-icone { margin-bottom: 6px; }
.lp-module p { color: var(--encre-2); font-size: 16px; }
.lp-module-bonus { background: var(--nuit); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.lp-module-bonus::before { content: ""; position: absolute; width: 90%; aspect-ratio: 1; right: -40%; top: -40%; background: var(--degrade); filter: blur(60px); opacity: .5; z-index: -1; border-radius: 50%; }
.lp-module-bonus h3 { color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-module-bonus p { color: rgba(255, 255, 255, .75); }
.lp-module-bonus a { color: var(--g3); }
.lp-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pilule);
  background: var(--degrade); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.lp-badge-grand { font-size: 13px; padding: 7px 14px; margin-bottom: 18px; }
.lp-controle { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 18px; font-weight: 600; color: var(--encre); }
.lp-controle .ic { color: var(--succes); }

.lp-vocal { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.lp-conclusion { margin-top: 22px; font-size: 19px; font-weight: 600; letter-spacing: -0.016em; }
.lp-dictee {
  margin: 0; padding: 24px; border-radius: var(--r-scene); background: var(--brume);
  display: grid; gap: 16px; position: relative; isolation: isolate; overflow: hidden;
}
.lp-dictee::before { content: ""; position: absolute; inset: 10% 15% auto; height: 60%; background: var(--degrade); filter: blur(60px); opacity: .25; z-index: -1; border-radius: 50%; }
.lp-dictee-micro { display: flex; align-items: center; gap: 16px; }
.lp-micro { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--degrade); color: #fff; box-shadow: 0 0 0 8px rgba(115, 54, 234, .12); flex: none; }
.lp-onde { height: 34px; }
.lp-onde i { background: var(--accent); }
.lp-dictee-texte { margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--papier); box-shadow: 0 0 0 .5px var(--trait); font-size: 16px; line-height: 1.45; color: var(--encre-2); font-style: italic; }

.lp-offre-grille { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.lp-cadeau .carte-prix-nom { color: #fff; font-size: 19px; }
.lp-valeur { font-size: 16px; color: rgba(255, 255, 255, .6); width: 100%; }
.lp-cadeau .prix-montant { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(255, 255, 255, .5); }
.lp-offert { margin-left: 10px; padding: 6px 12px; border-radius: var(--r-pilule); background: var(--succes); color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.lp-cadeau-texte { margin: 16px 0 26px; color: rgba(255, 255, 255, .75); }
.lp-bouton-clair { --fond: #fff; color: var(--nuit); }
.lp-bouton-clair:hover { --fond: #EDEBFA; color: var(--nuit); }
.lp-gain { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, .72); }
.lp-rarete { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--g3); }

.lp-confiance-section { padding-bottom: clamp(40px, 6vw, 72px); }
.lp-confiance { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-confiance li { display: flex; gap: 14px; align-items: flex-start; }
.lp-confiance .ic { color: var(--accent); margin-top: 2px; }
.lp-confiance-titre { font-weight: 600; }
.lp-confiance li p:not(.lp-confiance-titre) { color: var(--encre-2); font-size: 15px; }

@media (max-width: 1000px) {
  .lp-chiffres, .lp-modules { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .lp-vocal, .lp-offre-grille { grid-template-columns: 1fr; }
  .lp-confiance { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lp-modules { grid-template-columns: 1fr; }
  .lp-chiffres { gap: 10px; }
  .lp-chiffres li { padding: 20px 16px; }
  .lp-controle { font-size: 16px; align-items: flex-start; }
  .lp-bouton-clair { font-size: 16px; padding-inline: 16px; }
  .lp-cadeau { padding: 24px 20px; }
}

/* Page pub plombiers : visuels */
.lp-visuel { max-width: 960px; margin: clamp(28px, 4vw, 48px) auto 0; }
.media-lp { border-radius: var(--r-carte); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55); }
.media-lp img { display: block; width: 100%; height: auto; }
.lp-vocal-droite { display: grid; gap: 20px; min-width: 0; }
.lp-vocal-droite .lp-visuel { margin: 0; max-width: none; }
.lp-vocal-droite .media-lp { box-shadow: 0 24px 50px -28px rgba(20, 26, 50, .45); }
.lp-banniere { background: var(--nuit); line-height: 0; }
.lp-banniere .media { border-radius: 0; box-shadow: none; }
.lp-banniere img { display: block; width: 100%; height: auto; }
.lp-appel-section { padding-top: 0; }
.lp-appel-boite { max-width: 640px; }
.hero-lp .media-hero-metier { aspect-ratio: 3 / 2; }
.hero-lp .media-hero-metier img { width: 100%; height: 100%; object-fit: cover; }