/* ============================================
   Pivau — charte "Encre & menthe" (13/07/2026)
   Encre profonde #0F2A2E — fonds sombres, titres, texte
   Menthe #2ED3B7 — accents seulement (boutons, filets, chiffres)
   Blanc glacé #F4F8F7 — fonds clairs
   Gris sauge #6B8A87 — texte secondaire
   ============================================ */

/* Manrope auto-hébergée (RGPD : plus aucun appel aux serveurs Google) — police variable, graisses 400 à 800 */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --encre: #0F2A2E;
  --encre-2: #143A3F;      /* encre légèrement éclaircie pour les surfaces sombres */
  --menthe: #2ED3B7;
  --menthe-fonce: #0E7A66; /* liens et accents sur fond clair, 4,91:1 sur blanc glace (WCAG AA) */
  --glace: #F4F8F7;
  --sauge: #587370; /* assombri vs charte (#6B8A87) pour le contraste AA du texte sur fond clair */
  --blanc: #FFFFFF;
  --radius: 14px;
  --maxw: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  color: var(--encre);
  background: var(--glace);
  line-height: 1.6;
  font-size: 17px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Navigation ---------- */

header.site {
  background: var(--encre);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow .25s ease;
}
header.site.scrolled { box-shadow: 0 6px 24px rgba(15, 42, 46, .35); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Lien d'evitement : invisible tant qu'il n'a pas le focus, puis bien visible.
   Il evite de traverser les cinq entrees de menu a chaque page au clavier. */
.saut-contenu {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--menthe);
  color: var(--encre);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .15s ease;
}
.saut-contenu:focus { top: 0; }

/* Logo officiel (identite/logo/), verrou horizontal blanc : le bandeau et le pied
   de page sont en encre, donc fond sombre, donc aplat blanc et jamais dégradé. */
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--glace);
}
.wordmark img {
  display: block;
  width: 132px;
  height: 40px;
}
footer.site .wordmark img { width: 106px; height: 32px; }

/* Focus visible partout. Le navigateur en pose un par defaut, on le rend
   lisible sur les deux fonds de la charte au lieu de s'en remettre au hasard. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
label.burger:focus-visible {
  outline: 3px solid var(--menthe);
  outline-offset: 3px;
  border-radius: 4px;
}
section:not(.dark):not(.hero) a:focus-visible,
section.alt a:focus-visible,
.legal a:focus-visible {
  outline-color: var(--menthe-fonce);
}

.nav-droite { display: flex; align-items: center; gap: 28px; }

.nav nav { display: flex; align-items: center; gap: 28px; }

.page-ici { display: none; }

.nav nav a {
  color: var(--glace);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  opacity: .85;
}
.nav nav a:hover, .nav nav a[aria-current="page"] { opacity: 1; }
.nav nav a[aria-current="page"] { border-bottom: 2px solid var(--menthe); padding-bottom: 2px; }

.btn {
  display: inline-block;
  background: var(--menthe);
  color: var(--encre);
  font-weight: 700;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(46, 211, 183, .35); }

.btn.ghost {
  background: transparent;
  color: var(--glace);
  border: 1.5px solid rgba(244, 248, 247, .4);
}
.btn.ghost:hover { border-color: var(--menthe); color: var(--menthe); box-shadow: none; }

.nav .btn { padding: 10px 20px; font-size: 15px; }

/* Burger (mobile) — caché sur desktop */
/* Masquage accessible : invisible a l'ecran mais toujours atteignable au clavier
   et annonce par un lecteur d'ecran. Ne jamais remplacer par display:none,
   qui retire l'element de l'ordre de tabulation. */
.masque-accessible,
.menu-toggle,
.filtres-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* La case du menu recoit le focus, on le rend visible sur le burger qui la represente */
.menu-toggle:focus-visible ~ .burger {
  outline: 3px solid var(--menthe);
  outline-offset: 3px;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  cursor: pointer;
  border: 1.5px solid rgba(244, 248, 247, .35);
  border-radius: 8px;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--glace);
  border-radius: 2px;
}

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(ellipse 60% 55% at 78% 18%, rgba(46, 211, 183, .14), transparent),
    radial-gradient(ellipse 45% 40% at 8% 92%, rgba(46, 211, 183, .07), transparent),
    var(--encre);
  color: var(--glace);
  padding: 84px 0 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}

/* Accroche rotative sans saut de page.
   La hauteur est reservee par une phrase fantome, la plus longue des quatre,
   ce qui donne la bonne hauteur a toutes les largeurs sans valeur magique.
   Le dispositif ne s'active que si le JS tourne ET si les animations sont
   acceptees, exactement les deux conditions sous lesquelles app.js fait tourner
   l'accroche. Sinon, la phrase reste dans le flux normal. */
.hero h1 .phrase {
  display: block;
  transition: opacity .35s ease, transform .35s ease;
}
.hero h1 .phrase.sortie { opacity: 0; transform: translateY(-10px); }
.phrase-slot { display: block; }
.phrase-fantome { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .phrase-slot { position: relative; }
  .js .phrase-fantome { display: block; visibility: hidden; }
  .js .phrase-slot .phrase { position: absolute; top: 0; left: 0; right: 0; }
}
.hero h1 .fixe {
  display: block;
  color: rgba(244, 248, 247, .5);
  font-size: .62em;
  margin-top: 10px;
  font-weight: 700;
}

/* Fil d'activité en direct */
.live {
  background: var(--encre);
  border: 1px solid rgba(46, 211, 183, .22);
  border-radius: var(--radius);
  padding: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 42, 46, .18);
}
.live-titre {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 800;
  color: rgba(244, 248, 247, .6);
  margin-bottom: 16px;
}
.live-titre::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--menthe);
  animation: clignote 1.8s ease-in-out infinite;
}
@keyframes clignote {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 211, 183, .5); }
  50% { opacity: .5; box-shadow: 0 0 0 5px rgba(46, 211, 183, 0); }
}
.live-feed { display: grid; gap: 10px; }
.live-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(244, 248, 247, .06);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
}
.live-item strong { color: var(--glace); font-weight: 700; }
.live-item span { color: rgba(244, 248, 247, .55); font-size: 13px; }
.live-item.alerte { border-color: rgba(46, 211, 183, .45); }
.live-item.alerte strong { color: var(--menthe); }
.live-item.entree { animation: liveIn .45s ease; }
@keyframes liveIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

.hero .kicker {
  color: var(--menthe);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.12;
  font-weight: 800;
  max-width: 780px;
  margin-bottom: 22px;
}

.hero p.lead {
  font-size: clamp(17px, 2vw, 20px);
  max-width: 640px;
  opacity: .85;
  margin-bottom: 36px;
}

.hero .actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero.small { padding: 64px 0 72px; }

/* ---------- Sections ---------- */

section { padding: 76px 0; }
section.alt { background: var(--blanc); }
section.dark { background: var(--encre); color: var(--glace); }

.section-head { max-width: 680px; margin-bottom: 44px; }

.section-head .kicker {
  color: var(--menthe-fonce);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}
section.dark .section-head .kicker { color: var(--menthe); }

.section-head h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.2;
  font-weight: 800;
  margin-bottom: 12px;
}

.section-head p { color: var(--sauge); font-size: 17.5px; }
section.dark .section-head p { color: rgba(244, 248, 247, .75); }

/* ---------- Cards ---------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.card {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: 0 2px 16px rgba(15, 42, 46, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15, 42, 46, .12); }
section.alt .card { background: var(--glace); box-shadow: none; }

.card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.card p { font-size: 15.5px; color: var(--sauge); }

.card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--encre);
  color: var(--menthe);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 18px;
}

/* ---------- Métiers ---------- */

.metiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.metier {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  border-top: 3px solid var(--menthe);
}
.metier h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.metier p { font-size: 14.5px; color: var(--sauge); }

/* ---------- Listes à coche ---------- */

ul.check { list-style: none; }
ul.check li {
  padding-left: 32px;
  position: relative;
  margin-bottom: 14px;
  font-size: 16.5px;
}
ul.check li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--menthe-fonce);
  font-weight: 800;
  font-size: 18px;
}
section.dark ul.check li::before { color: var(--menthe); }

/* ---------- Étapes (timeline offre) ---------- */

.etapes { display: grid; gap: 0; }

.etape {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(15, 42, 46, .08);
}
.etape:last-child { border-bottom: none; }

.etape .badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--encre);
  color: var(--menthe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.etape h3 { font-size: 18.5px; margin-bottom: 6px; }
.etape p { color: var(--sauge); font-size: 15.5px; max-width: 640px; }
.etape .duree { color: var(--menthe-fonce); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- FAQ ---------- */

details {
  background: var(--blanc);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 12px;
}
details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16.5px;
  list-style: none;
  position: relative;
  padding-right: 30px;
}
details summary::after {
  content: "+";
  position: absolute;
  right: 0; top: -2px;
  color: var(--menthe-fonce);
  font-size: 24px;
  font-weight: 400;
}
details[open] summary::after { content: "–"; }
details p { margin-top: 12px; color: var(--sauge); font-size: 15.5px; }

/* ---------- Pastilles métiers ---------- */

.pills { display: flex; flex-wrap: wrap; gap: 12px; }
.pill {
  background: var(--blanc);
  border: 1.5px solid rgba(15, 42, 46, .12);
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 15.5px;
  font-weight: 600;
}
section.alt .pill { background: var(--glace); border-color: transparent; }

/* ---------- Bibliothèque d'exemples (filtres CSS purs) ---------- */

/* Les boutons radio sont masques par .masque-accessible plus haut, jamais par
   display:none : ils doivent rester atteignables au clavier. */

.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }

.filtres label {
  background: var(--blanc);
  border: 1.5px solid rgba(15, 42, 46, .15);
  border-radius: 30px;
  padding: 12px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease;
}
.filtres label:hover { border-color: var(--menthe); }

#f-tous:checked ~ .filtres label[for="f-tous"],
#f-independants:checked ~ .filtres label[for="f-independants"],
#f-pme:checked ~ .filtres label[for="f-pme"],
#f-orga:checked ~ .filtres label[for="f-orga"] {
  background: var(--encre);
  color: var(--menthe);
  border-color: var(--encre);
}

/* Focus visible : le radio a le focus, on le montre sur l'etiquette qui le represente */
#f-tous:focus-visible ~ .filtres label[for="f-tous"],
#f-independants:focus-visible ~ .filtres label[for="f-independants"],
#f-pme:focus-visible ~ .filtres label[for="f-pme"],
#f-orga:focus-visible ~ .filtres label[for="f-orga"] {
  outline: 3px solid var(--menthe-fonce);
  outline-offset: 2px;
}

#f-independants:checked ~ .exemples .exemple:not(.independants) { display: none; }
#f-pme:checked ~ .exemples .exemple:not(.pme) { display: none; }
#f-orga:checked ~ .exemples .exemple:not(.orga) { display: none; }

.exemples { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.exemple {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 2px 16px rgba(15, 42, 46, .06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.exemple:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(15, 42, 46, .12); }
.exemple .qui {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: var(--sauge);
}
.exemple h3 { font-size: 20px; font-weight: 800; }
.exemple p { font-size: 15.5px; color: var(--sauge); }
.exemple .resultat {
  margin-top: auto;
  padding-top: 8px;
  color: var(--menthe-fonce);
  font-weight: 700;
  font-size: 15px;
}
.exemple a.detail-lien {
  color: var(--encre);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: underline;
  text-decoration-color: var(--menthe);
  text-underline-offset: 4px;
}

.lien-fleche {
  display: inline-block;
  margin-top: 30px;
  color: var(--menthe-fonce);
  font-weight: 700;
  text-decoration: none;
  font-size: 16.5px;
}
.lien-fleche:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Bandeau réassurance ---------- */

.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  justify-content: center;
}
.strip span {
  font-weight: 700;
  font-size: 16px;
  padding-left: 26px;
  position: relative;
}
.strip span::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--menthe-fonce);
  font-weight: 800;
}

/* ---------- CTA final ---------- */

.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; margin-bottom: 14px; }
.cta-final p { opacity: .8; margin-bottom: 30px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---------- Formulaire ---------- */

form.contact {
  max-width: 620px;
  display: grid;
  gap: 18px;
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 6px;
}
.field label .opt { color: var(--sauge); font-weight: 400; }

.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid rgba(15, 42, 46, .15);
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  background: var(--blanc);
  color: var(--encre);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--menthe);
  box-shadow: 0 0 0 3px rgba(46, 211, 183, .2);
}

.field .aide { font-size: 13.5px; color: var(--sauge); margin-top: 5px; }

/* Piege a robots Netlify : le champ ne doit jamais etre vu ni rempli par un humain,
   display:none est ici le comportement voulu, contrairement au menu et aux filtres. */
.pot-de-miel { display: none; }

/* Mention de collecte sous le formulaire. En classe et non en style= : c'est ce qui
   permet de retirer 'unsafe-inline' de la CSP dans _headers. */
.note-form { font-size: 13.5px; color: var(--sauge); }
.note-form a { color: var(--menthe-fonce); }

/* ---------- Footer ---------- */

footer.site {
  background: var(--encre);
  color: rgba(244, 248, 247, .7);
  padding: 40px 0;
  font-size: 14.5px;
}
footer.site .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
footer.site a { color: rgba(244, 248, 247, .7); text-decoration: none; }
footer.site a:hover { color: var(--menthe); }
footer.site .wordmark { font-size: 20px; }

/* ---------- Pages légales ---------- */

.legal { max-width: 760px; }
.legal h2 { font-size: 22px; margin: 36px 0 12px; }
.legal p, .legal li { color: var(--encre); font-size: 15.5px; margin-bottom: 10px; }
.legal ul { padding-left: 22px; }
.a-completer { background: #FFF3CD; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

/* ---------- Avant / Après (accueil) ---------- */

.avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.colonne {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: 0 2px 16px rgba(15, 42, 46, .06);
}
.colonne h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 800;
  margin-bottom: 18px;
  color: var(--sauge);
}
.colonne ul { list-style: none; display: grid; gap: 13px; }
.colonne li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  color: var(--sauge);
}
.colonne li::before {
  content: "✕";
  position: absolute;
  left: 0; top: 0;
  font-weight: 800;
  color: rgba(107, 138, 135, .6);
}

.colonne.apres { background: var(--encre); }
.colonne.apres h3 { color: var(--menthe); }
.colonne.apres li { color: rgba(244, 248, 247, .9); }
.colonne.apres li::before { content: "✓"; color: var(--menthe); }

/* ---------- Cartes "gains" ---------- */

.card.gain svg {
  width: 42px; height: 42px;
  color: var(--menthe-fonce);
  margin-bottom: 16px;
}

/* ---------- Calculateur ---------- */

.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

.field-range { margin-bottom: 30px; }
.field-range label {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}
.field-range output { color: var(--menthe); }

.field-range input[type="range"] {
  width: 100%;
  accent-color: var(--menthe);
  cursor: pointer;
  height: 6px;
}

.calc-note {
  font-size: 14px;
  color: rgba(244, 248, 247, .65);
  max-width: 460px;
}

.calc-resultat {
  background: var(--encre-2);
  border-radius: var(--radius);
  padding: 38px 32px;
  text-align: center;
  border: 1px solid rgba(46, 211, 183, .25);
}
.calc-resultat .petit {
  font-size: 14.5px;
  color: rgba(244, 248, 247, .7);
}
.calc-resultat .gros {
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 800;
  color: var(--menthe);
  line-height: 1.1;
  margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
  transition: transform .15s ease;
}
.calc-resultat .gros.pop { transform: scale(1.05); }
.calc-resultat .calc-mois {
  font-size: 15px;
  color: rgba(244, 248, 247, .7);
  margin-top: 6px;
}
.calc-resultat .calc-mois span { font-weight: 700; color: var(--glace); }

.calc-resultat .ligne-choc {
  font-weight: 700;
  font-size: 16px;
  margin: 22px 0 24px;
}

.calc-confidentialite {
  font-size: 14.5px;
  color: var(--sauge);
  text-align: center;
  margin-top: 28px;
}

/* Renvoi vers le calculateur (accueil) */

.calc-teaser {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: center;
}
.calc-teaser .section-head { margin-bottom: 28px; }

.calc-apercu {
  display: block;
  background: var(--encre-2);
  border-radius: var(--radius);
  padding: 34px 28px;
  text-align: center;
  border: 1px solid rgba(46, 211, 183, .25);
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}
.calc-apercu:hover { transform: translateY(-3px); border-color: var(--menthe); }
.calc-apercu .petit {
  font-size: 14.5px;
  color: rgba(244, 248, 247, .7);
}
.calc-apercu .gros {
  font-size: clamp(38px, 4.6vw, 52px);
  font-weight: 800;
  color: var(--menthe);
  line-height: 1.1;
  margin: 12px 0 4px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Détail relance : téléphone + frise ---------- */

.detail-duo {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 52px;
  align-items: start;
}

.phone {
  background: var(--encre);
  border-radius: 36px;
  padding: 16px 14px;
  max-width: 320px;
  box-shadow: 0 18px 40px rgba(15, 42, 46, .25);
}
.phone .ecran {
  background: var(--glace);
  border-radius: 24px;
  padding: 22px 14px;
  display: grid;
  gap: 12px;
}
.bulle {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
}
.bulle.envoye {
  background: var(--encre);
  color: var(--glace);
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.bulle.recu {
  background: #E2ECE9;
  color: var(--encre);
  border-bottom-left-radius: 4px;
}
.notif {
  background: var(--blanc);
  border-left: 3px solid var(--menthe);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(15, 42, 46, .12);
}
.phone-legende {
  text-align: center;
  color: rgba(244, 248, 247, .75);
  font-size: 13px;
  padding: 12px 6px 4px;
}

/* Bulles animées en séquence quand le téléphone devient visible */
.js .phone .bulle, .js .phone .notif { opacity: 0; }
.js .phone.visible .bulle, .js .phone.visible .notif {
  animation: apparition .5s ease forwards;
}
.js .phone.visible .bulle.recu { animation-delay: .7s; }
.js .phone.visible .notif { animation-delay: 1.4s; }

@keyframes apparition {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Frise (timeline verticale) ---------- */

.timeline {
  display: grid;
  gap: 0;
  margin-bottom: 30px;
}
.jalon {
  position: relative;
  padding: 0 0 26px 34px;
}
.jalon::before {
  content: "";
  position: absolute;
  left: 6px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--menthe);
}
.jalon::after {
  content: "";
  position: absolute;
  left: 11px; top: 22px;
  bottom: 0;
  width: 2px;
  background: rgba(15, 42, 46, .12);
}
.jalon:last-child::after { display: none; }
.jalon .quand {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: var(--menthe-fonce);
  margin-bottom: 4px;
}
.jalon p { font-size: 15.5px; color: var(--sauge); max-width: 480px; }
.jalon.fin::before { background: var(--encre); box-shadow: 0 0 0 3px rgba(46, 211, 183, .4); }

/* ---------- Flux avant/après (tri des mails) ---------- */

.flux-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 36px;
}
.flux {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(15, 42, 46, .06);
}
.flux-titre {
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: var(--sauge);
  margin-bottom: 20px;
}
.flux.apres .flux-titre { color: var(--menthe-fonce); }
.flux-etape {
  background: var(--glace);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
}
.flux.apres .flux-etape { border: 1.5px solid rgba(46, 211, 183, .35); }
.flux-fleche {
  color: var(--sauge);
  font-size: 20px;
  line-height: 1;
  padding: 8px 0;
}
.flux.apres .flux-fleche { color: var(--menthe-fonce); }

/* ---------- Schéma hub (vos outils → Pivau → résultats) ---------- */

.schema-hub {
  display: grid;
  grid-template-columns: 1fr 64px auto 64px 1fr;
  gap: 0;
  align-items: center;
  margin-bottom: 52px;
}

.hub-col { display: grid; gap: 12px; }
.hub-label {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: var(--sauge);
  margin-bottom: 4px;
  text-align: center;
}
.hub-box {
  background: var(--blanc);
  border: 1.5px solid rgba(15, 42, 46, .12);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 10px rgba(15, 42, 46, .05);
}
.hub-box.ok { border-color: rgba(46, 211, 183, .45); }

.hub-lien {
  height: 2px;
  background-image: linear-gradient(90deg, var(--menthe-fonce) 55%, transparent 0);
  background-size: 12px 2px;
  background-repeat: repeat-x;
  animation: flux-h 1s linear infinite;
}
@keyframes flux-h { to { background-position: 12px 0; } }

.hub-centre {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 30px;
  background: var(--encre);
  color: var(--glace);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.5px;
}
.hub-centre em { font-style: normal; color: var(--menthe); }
.hub-centre::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 36px;
  border: 2px solid rgba(46, 211, 183, .45);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.94); opacity: 1; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* ---------- Stepper 1-2-3 ---------- */

.stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}
.step {
  position: relative;
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 24px 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 0 2px 16px rgba(15, 42, 46, .06);
}
.step .num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--encre);
  color: var(--menthe);
  font-weight: 800;
}
.step h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 4px; }
.step p { font-size: 14.5px; color: var(--sauge); }
.step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--menthe-fonce);
  font-size: 20px;
  font-weight: 800;
}

.fleche-adaptive::after { content: "→"; color: var(--menthe-fonce); font-weight: 800; }

/* Comment ça marche : étapes + fil d'activité côte à côte */
.marche-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  align-items: center;
}
.stepper.vertical { grid-template-columns: 1fr; gap: 14px; }
.stepper.vertical .step::after { display: none; }

/* ---------- Révélation au défilement ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .js .reveal.visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .phone .bulle, .js .phone .notif { opacity: 1; animation: none; }
  .hub-lien, .hub-centre::before, .live-titre::before, .live-item.entree { animation: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .cards, .metiers { grid-template-columns: 1fr 1fr; }
  .nav nav { gap: 18px; }
}

@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; gap: 34px; }
  .calc-teaser { grid-template-columns: 1fr; gap: 30px; }
  .detail-duo { grid-template-columns: 1fr; gap: 36px; }
  .phone { margin: 0 auto; }

  .hero-grid { grid-template-columns: 1fr; gap: 40px; }

  .schema-hub { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .hub-col { width: 100%; max-width: 420px; }
  .hub-lien {
    width: 2px;
    height: 42px;
    background-image: linear-gradient(180deg, var(--menthe-fonce) 55%, transparent 0);
    background-size: 2px 12px;
    background-repeat: repeat-y;
    animation: flux-v 1s linear infinite;
  }

  .stepper { grid-template-columns: 1fr; gap: 14px; }
  .step:not(:last-child)::after { display: none; }
  .marche-duo { grid-template-columns: 1fr; gap: 26px; }
  .fleche-adaptive::after { content: "↓"; }
}
@keyframes flux-v { to { background-position: 0 12px; } }

@media (max-width: 760px) {
  .exemples { grid-template-columns: 1fr; }
  .avant-apres { grid-template-columns: 1fr; }
  .flux-duo { grid-template-columns: 1fr; }
}

/* Menu burger : déclenché dès 780px, la barre ne tient plus les 5 liens en ligne */
@media (max-width: 780px) {
  .burger { display: flex; }
  .nav { position: relative; }
  .page-ici {
    display: inline;
    color: var(--menthe);
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
  }
  .nav nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--encre);
    padding: 10px 24px 22px;
    border-bottom: 2px solid var(--menthe);
    box-shadow: 0 14px 30px rgba(15, 42, 46, .35);
  }
  .menu-toggle:checked ~ nav { display: flex; }
  .nav nav a { padding: 10px 0; font-size: 17px; opacity: 1; }
  .nav nav a[aria-current="page"] { border-bottom: none; color: var(--menthe); }
}

@media (max-width: 620px) {
  .cards, .metiers { grid-template-columns: 1fr; }
  section { padding: 56px 0; }
  .hero { padding: 60px 0 70px; }

  .nav { padding: 14px 16px; }
  .nav-droite { gap: 10px; }
  .nav .btn { padding: 9px 13px; font-size: 13.5px; }
  .wordmark { font-size: 23px; }
}