/* Site Ovidium version 3 (deuxième version). Charte : Claude/Ovidium/Agent vocal Ovidium/Logo/03 Charte graphique. Tokens : css/tokens.css. */

@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ov-fond); color: var(--ov-texte); font-family: var(--ov-police-texte); font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ov-rouge); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--ov-police-titre); font-weight: 600; letter-spacing: var(--ov-interlettrage-titre); line-height: var(--ov-interligne-titre); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
section { padding-block: clamp(56px, 8vw, 96px); }
.lab { font-size: var(--ov-texte-mini); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ov-texte-3); }
.lab.rouge { color: var(--ov-rouge); }
.section-head { display: grid; gap: 12px; max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { color: var(--ov-texte-2); font-size: 1.1rem; }
.centre { text-align: center; justify-items: center; margin-inline: auto; }

/* Apparition au défilement et mouvements */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal.d1 { transition-delay: .1s; } html.js .reveal.d2 { transition-delay: .2s; } html.js .reveal.d3 { transition-delay: .3s; }
@keyframes carteIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(230, 58, 46, .45); } 70% { box-shadow: 0 0 0 10px rgba(230, 58, 46, 0); } }
@keyframes sonne { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-8deg); } 40% { transform: rotate(6deg); } 50% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--ov-police-texte); font-weight: 600; font-size: .9375rem; padding: 14px 24px; border-radius: var(--ov-rayon-pilule); border: 1px solid transparent; cursor: pointer; transition: transform .16s ease, background-color .16s ease, opacity .16s ease, box-shadow .16s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-primaire { background: var(--ov-primaire); color: var(--ov-primaire-texte); }
.btn-primaire:hover { opacity: .88; }
.btn-accent { background: var(--ov-rouge); color: #fff; box-shadow: 0 6px 18px rgba(230, 58, 46, .25); }
.btn-accent:hover { background: var(--ov-rouge-sombre); }
.btn-secondaire { background: transparent; color: var(--ov-texte); border-color: var(--ov-gris-300); }
.btn-secondaire:hover { background: var(--ov-surface); border-color: var(--ov-noir); }
.btn-grand { font-size: 1.0625rem; padding: 17px 30px; }
.btn-clair { background: var(--ov-blanc); color: var(--ov-noir); }

/* Barre de navigation */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(244, 241, 236, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ov-bordure); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 70px; }
.nav .logo img { height: 32px; width: auto; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav ul a { font-weight: 500; font-size: .9375rem; color: var(--ov-texte-2); transition: color .16s; }
.nav ul a:hover { color: var(--ov-rouge); }
@media (max-width: 820px) { .nav ul { display: none; } }

/* Promesse */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 88px); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero-copy .sub { font-size: 1.2rem; color: var(--ov-texte-2); max-width: 38ch; }
.hero-copy .sub strong { color: var(--ov-texte); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-actions .ecouter { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ov-texte); }
.hero-actions .ecouter .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--ov-surface); border: 1px solid var(--ov-bordure); display: grid; place-items: center; animation: sonne 2.6s ease-in-out infinite; animation-delay: 1.5s; }
.hero-actions .ecouter .ic img { width: 16px; }
.hero-actions .ecouter b { font-family: var(--ov-police-titre); font-variant-numeric: tabular-nums; }
.citation { font-size: .95rem; color: var(--ov-texte-3); max-width: 50ch; }
.citation cite { font-style: normal; }
.hero-visuel { display: grid; gap: 16px; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Bande de preuve */
.bande { background: var(--ov-noir); color: var(--ov-blanc); padding-block: 22px; }
.bande .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; text-align: center; }
.bande p { color: var(--ov-gris-300); }
.bande a.num { font-family: var(--ov-police-titre); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--ov-blanc); font-variant-numeric: tabular-nums; letter-spacing: .02em; border-bottom: 2px solid var(--ov-rouge); transition: color .16s; }
.bande a.num:hover { color: var(--ov-rouge); }

/* Problème */

/* Bénéfices */
.benef { background: var(--ov-noir); color: var(--ov-blanc); }
.benef .lab { color: var(--ov-gris-300); }
.benef .section-head p { color: var(--ov-gris-300); }
.points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.point { display: grid; gap: 12px; padding: 24px 22px; border-radius: var(--ov-rayon-l); background: var(--ov-gris-900); border: 1px solid var(--ov-gris-700); transition: transform .2s, border-color .2s; }
.point:hover { transform: translateY(-4px); border-color: var(--ov-rouge); }
.point .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--ov-rouge); display: grid; place-items: center; }
.point .ic img { width: 22px; height: 22px; filter: invert(1); }
.point h3 { font-size: 1.1rem; }
.point p { color: var(--ov-gris-300); font-size: .95rem; }
@media (max-width: 900px) { .points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .points { grid-template-columns: 1fr; } }

/* Simulateur */
.sim-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 32px; background: var(--ov-surface); border: 1px solid var(--ov-bordure); border-radius: var(--ov-rayon-l); padding: 28px 30px; margin-bottom: 22px; }
.champ { display: grid; gap: 8px; }
.champ label { font-weight: 600; font-size: .95rem; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.champ label output { color: var(--ov-rouge); font-family: var(--ov-police-titre); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.champ input[type="range"] { width: 100%; accent-color: var(--ov-rouge); cursor: pointer; }
.champ .aide { font-size: var(--ov-texte-mini); color: var(--ov-texte-3); }
.sim-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tuile { display: grid; gap: 10px; align-content: start; padding: 28px 26px; border-radius: var(--ov-rayon-l); background: var(--ov-surface); border: 1px solid var(--ov-bordure); min-height: 210px; transition: transform .2s, box-shadow .2s; }
.tuile:hover { transform: translateY(-3px); box-shadow: var(--ov-ombre-m); }
.tuile .gros { font-family: var(--ov-police-titre); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.tuile .gros.rouge { color: var(--ov-rouge); }
.tuile .sous { color: var(--ov-texte-2); font-size: .95rem; }
.tuile.sombre { background: var(--ov-noir); color: var(--ov-blanc); border-color: var(--ov-noir); }
.tuile.sombre .lab { color: var(--ov-gris-300); }
.tuile.sombre .sous { color: var(--ov-gris-300); }
.tuile.sombre .sous b { color: var(--ov-blanc); }
.tuile.sombre .btn { justify-self: start; margin-top: 6px; }
.tuile.sombre.negatif .gros { color: var(--ov-gris-300); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.2; }
@media (max-width: 900px) { .sim-tuiles { grid-template-columns: 1fr; } .tuile { min-height: 0; } }
@media (max-width: 640px) { .sim-form { grid-template-columns: 1fr; padding: 22px; } }

/* Process */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: etape; }
.etape { counter-increment: etape; display: grid; gap: 8px; padding: 24px; border-radius: var(--ov-rayon-l); background: var(--ov-surface); border: 1px solid var(--ov-bordure); }
.etape::before { content: counter(etape, decimal-leading-zero); font-family: var(--ov-police-titre); font-weight: 600; font-size: 1.4rem; color: var(--ov-rouge); font-variant-numeric: tabular-nums; }
.etape p { color: var(--ov-texte-2); font-size: .95rem; }
@media (max-width: 760px) { .etapes { grid-template-columns: 1fr; } }

/* Offres */
.offres { background: var(--ov-surface); border-block: 1px solid var(--ov-bordure); }
.offres .section-head { max-width: none; }
.bascule { display: inline-flex; border: 1px solid var(--ov-gris-300); border-radius: var(--ov-rayon-pilule); padding: 4px; gap: 4px; background: var(--ov-fond); }
.bascule button { font: inherit; font-weight: 600; font-size: .9rem; padding: 9px 18px; border-radius: var(--ov-rayon-pilule); border: 0; background: transparent; color: var(--ov-texte-2); cursor: pointer; transition: background-color .16s, color .16s; }
.bascule button[aria-pressed="true"] { background: var(--ov-noir); color: var(--ov-blanc); }
.bascule small { font-weight: 500; opacity: .8; }
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.offre { position: relative; display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 14px; background: var(--ov-fond); border: 1px solid var(--ov-bordure); border-radius: var(--ov-rayon-l); padding: 30px 24px 24px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.offre:hover { transform: translateY(-4px); box-shadow: var(--ov-ombre-m); }
.offre .badge { position: absolute; top: -13px; left: 24px; background: var(--ov-rouge); color: #fff; font-size: var(--ov-texte-mini); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--ov-rayon-pilule); }
.offre h3 { font-size: 1.5rem; }
.offre .accroche { color: var(--ov-texte-3); font-size: .95rem; }
.offre .prix { display: grid; gap: 2px; }
.offre .prix .montant { font-family: var(--ov-police-titre); font-weight: 600; font-size: 2.4rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.offre .prix .montant small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ov-texte-3); }
.offre .prix .annuel-note { font-size: var(--ov-texte-petit); color: var(--ov-texte-3); min-height: 1.4em; }
.offre .minutes { font-weight: 600; padding: 10px 0; border-block: 1px solid var(--ov-bordure); font-variant-numeric: tabular-nums; }
.offre ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .9375rem; color: var(--ov-texte-2); }
.offre li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
.offre li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--ov-noir); }
.offre li.plus::before { background: var(--ov-rouge); }
.offre .btn { width: 100%; }
.sous-grille { margin-top: 24px; color: var(--ov-texte-2); font-size: .95rem; text-align: center; }
.sous-grille a { color: var(--ov-texte); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .grille { grid-template-columns: 1fr; } }


/* Questions */
.faq-liste { display: grid; border-top: 1px solid var(--ov-bordure); }
.faq-liste details { border-bottom: 1px solid var(--ov-bordure); }
.faq-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font-family: var(--ov-police-titre); font-weight: 600; font-size: 1.1rem; transition: color .16s; }
.faq-liste summary:hover { color: var(--ov-rouge); }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: "+"; font-size: 1.5rem; color: var(--ov-texte-3); flex: none; transition: transform .2s; }
.faq-liste details[open] summary::after { transform: rotate(45deg); color: var(--ov-rouge); }
.faq-liste details p { padding-bottom: 20px; color: var(--ov-texte-2); max-width: 66ch; }

/* Pourquoi */
.pourquoi { background: var(--ov-noir); color: var(--ov-blanc); }
.pourquoi .wrap-narrow { display: grid; gap: 20px; justify-items: center; text-align: center; }
.pourquoi .lab { color: var(--ov-gris-300); }
.pourquoi blockquote { margin: 0; font-family: var(--ov-police-titre); font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.pourquoi cite { font-style: normal; color: var(--ov-gris-300); font-size: var(--ov-texte-petit); }
.pourquoi .flamme { width: 26px; }

/* Dernier appel */
.fin-cta { text-align: center; }
.fin-cta .wrap-narrow { display: grid; gap: 20px; justify-items: center; }
.fin-cta h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.fin-cta p { color: var(--ov-texte-2); }
.fin-cta p b { color: var(--ov-texte); font-variant-numeric: tabular-nums; }

/* Pied de page */
footer { padding-block: 40px; font-size: var(--ov-texte-petit); color: var(--ov-texte-3); border-top: 1px solid var(--ov-bordure); }
footer .wrap { display: grid; gap: 18px; }
footer .haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; }
footer .haut img { height: 24px; width: auto; }
footer ul { display: flex; flex-wrap: wrap; gap: 12px 22px; list-style: none; margin: 0; padding: 0; }
footer a:hover { color: var(--ov-texte); }

/* Widget flottant : un rond noir avec la flamme qui bouge doucement ; une info-bulle au survol. */
.widget { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; justify-items: end; gap: 12px; }
.widget-bouton { position: relative; width: 66px; height: 66px; padding: 0; border-radius: 50%; border: 0; background: var(--ov-noir); display: grid; place-items: center; box-shadow: var(--ov-ombre-m), inset 0 0 0 1px rgba(255, 255, 255, .08); cursor: pointer; transition: transform .16s, box-shadow .16s; }
.widget-bouton:hover { transform: translateY(-2px); }
.widget-bouton[aria-expanded="true"] { box-shadow: var(--ov-ombre-m), 0 0 0 3px rgba(230, 58, 46, .55); }
.widget-bouton .flamme-ovi { width: auto; height: 38px; transform-origin: 50% 100%; animation: flammeOvi 5s ease-in-out infinite; }
@keyframes flammeOvi { 0%, 58%, 100% { transform: rotate(0) scale(1); } 66% { transform: rotate(-5deg) scale(1.06); } 76% { transform: rotate(4deg) scale(1.03); } 86% { transform: rotate(-2deg) scale(1.01); } }
.widget-bouton .infobulle { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 7px 12px; border-radius: var(--ov-rayon-pilule); background: var(--ov-noir); color: var(--ov-blanc); font-size: var(--ov-texte-petit); font-weight: 600; box-shadow: var(--ov-ombre-m); opacity: 0; pointer-events: none; transition: opacity .16s; }
@media (hover: hover) { .widget-bouton:hover .infobulle { opacity: 1; } }
.widget-bouton:focus-visible .infobulle { opacity: 1; }
.widget-bouton[aria-expanded="true"] .infobulle { display: none; }
.widget-panneau { width: min(340px, calc(100vw - 40px)); background: var(--ov-surface); border: 1px solid var(--ov-bordure); border-radius: var(--ov-rayon-l); box-shadow: var(--ov-ombre-l); padding: 22px; display: grid; gap: 14px; animation: carteIn .25s both; }
.widget-panneau[hidden] { display: none; }
.widget-panneau .bulle { background: var(--ov-fond); border-radius: var(--ov-rayon-m); padding: 12px 14px; font-size: .9375rem; }
.widget-panneau .bascule { justify-self: start; }
.widget-panneau .micro { width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--ov-rouge); display: grid; place-items: center; justify-self: center; cursor: pointer; animation: pulse 2s infinite; }
.widget-panneau .micro img { width: 28px; filter: invert(1); }
.widget-panneau .saisie input { width: 100%; font: inherit; padding: 11px 14px; border-radius: var(--ov-rayon-m); border: 1px solid var(--ov-bordure); margin-top: 6px; background: var(--ov-fond); }
.mention-ia { font-size: var(--ov-texte-mini); }
.mention-ia a { text-decoration: underline; text-underline-offset: 2px; }
.numero-grand .mention-ia { color: var(--ov-gris-300); margin-top: -6px; }
.widget-panneau .mention-ia { color: var(--ov-texte-2); text-align: center; }
.widget-panneau .conf { font-size: var(--ov-texte-mini); color: var(--ov-texte-3); text-align: center; }
@media (prefers-reduced-motion: reduce) { .widget-bouton .flamme-ovi { animation: none; } }


/* ===== Version 4 : ajouts ===== */

/* Idées à valider : surlignées en jaune */
.idee { background: #FFF1A8; color: #3A2F00; border-radius: 6px; padding: 1px 6px; box-decoration-break: clone; }
.idee-bloc { background: #FFF6C2; color: #3A2F00; border: 1.5px dashed #D9B400; border-radius: var(--ov-rayon-l); padding: 20px 22px; display: grid; gap: 8px; }
.idee-bloc .tag, .idee-tag { display: inline-block; font-size: var(--ov-texte-mini); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7A5F00; }
.idee-bloc p { color: #3A2F00; }

/* Bandeau d'annonce */
.annonce { background: var(--ov-rouge); color: #fff; font-size: .9375rem; font-weight: 500; }
.annonce .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; min-height: 42px; padding-block: 8px; text-align: center; }
.annonce b { font-weight: 700; }
.annonce a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.annonce .compteur { font-family: var(--ov-police-titre); font-weight: 600; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .18); padding: 3px 10px; border-radius: var(--ov-rayon-pilule); }

/* Hero v4 */
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge-ligne { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ov-texte-petit); font-weight: 600; padding: 6px 12px; border-radius: var(--ov-rayon-pilule); border: 1px solid var(--ov-bordure); background: var(--ov-surface); }
.badge-ligne .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--ov-rouge); animation: pulse 2s infinite; }
.hero-actions .btn-secondaire { background: var(--ov-surface); }

/* Bande de confiance */
.confiance { padding-block: 26px; border-block: 1px solid var(--ov-bordure); background: var(--ov-surface); }
.confiance .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: center; }
.confiance .item { display: grid; gap: 4px; text-align: center; }
.confiance .item b { font-family: var(--ov-police-titre); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.confiance .item span { font-size: var(--ov-texte-petit); color: var(--ov-texte-3); }
@media (max-width: 760px) { .confiance .wrap { grid-template-columns: 1fr; } }

/* Ce que vous obtenez */
.obtenez { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.obtenez .item { display: grid; gap: 10px; padding: 22px; border-radius: var(--ov-rayon-l); background: var(--ov-surface); border: 1px solid var(--ov-bordure); transition: transform .2s, border-color .2s; }
.obtenez .item:hover { transform: translateY(-3px); border-color: var(--ov-noir); }
.obtenez .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--ov-noir); display: grid; place-items: center; }
.obtenez .ic img { width: 20px; height: 20px; filter: invert(1); }
.obtenez h3 { font-size: 1.05rem; }
.obtenez p { color: var(--ov-texte-2); font-size: .925rem; }
.obtenez .item.plus { background: var(--ov-noir); color: var(--ov-blanc); border-color: var(--ov-noir); display: grid; align-content: center; justify-items: start; }
.obtenez .item.plus p { color: var(--ov-gris-300); }
@media (max-width: 1000px) { .obtenez { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .obtenez { grid-template-columns: 1fr; } }

/* Entendez Ovi : numéro + extraits */
.entendez { background: var(--ov-noir); color: var(--ov-blanc); }
.entendez .lab { color: var(--ov-gris-300); }
.entendez .section-head p { color: var(--ov-gris-300); }
.entendez .grille-e { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; }
.numero-grand { display: grid; gap: 14px; padding: 32px; border-radius: var(--ov-rayon-l); background: var(--ov-gris-900); border: 1px solid var(--ov-gris-700); text-align: center; }
.numero-grand a.num { font-family: var(--ov-police-titre); font-weight: 600; font-size: clamp(2rem, 5vw, 3.4rem); color: var(--ov-blanc); font-variant-numeric: tabular-nums; letter-spacing: .02em; transition: color .16s; }
.numero-grand a.num:hover { color: var(--ov-rouge); }
.numero-grand p { color: var(--ov-gris-300); }
.numero-grand .btn { justify-self: center; }
.extraits { display: grid; gap: 14px; }
.extrait { background: var(--ov-gris-900); border: 1px solid var(--ov-gris-700); border-radius: var(--ov-rayon-l); padding: 18px 20px; display: grid; gap: 10px; }
.extrait .qui { font-size: var(--ov-texte-mini); letter-spacing: .08em; text-transform: uppercase; color: var(--ov-gris-300); }
.extrait .bulle { padding: 10px 14px; border-radius: 14px; max-width: 90%; font-size: .95rem; }
.extrait .bulle.client { background: var(--ov-gris-700); justify-self: start; }
.extrait .bulle.ovi { background: var(--ov-rouge); color: #fff; justify-self: end; }
.extrait .issue { font-size: var(--ov-texte-petit); color: var(--ov-gris-300); display: flex; align-items: center; gap: 8px; }
.extrait .issue .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--ov-rouge); }
@media (max-width: 900px) { .entendez .grille-e { grid-template-columns: 1fr; } }

/* Process avec visuels */
.etape .visuel { height: 120px; border-radius: var(--ov-rayon-m); background: var(--ov-fond); border: 1px solid var(--ov-bordure); display: grid; place-items: center; padding: 12px; margin-bottom: 6px; }
.mini { width: 100%; max-width: 200px; background: var(--ov-surface); border: 1px solid var(--ov-bordure); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; font-size: 11px; box-shadow: var(--ov-ombre-s); }
.mini .l { height: 7px; border-radius: 4px; background: var(--ov-gris-100); }
.mini .l.c { width: 60%; } .mini .l.r { background: var(--ov-rouge); width: 40%; height: 9px; }
.mini .t { font-weight: 700; display: flex; justify-content: space-between; }
.mini .t i { font-style: normal; color: var(--ov-rouge); }
.mini .sonne { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ov-rouge); animation: sonne 2.6s ease-in-out infinite; }
.mini .sonne img { width: 12px; filter: invert(1); }

/* Témoignages (emplacements) */
.temoignages .cartes-t { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .temoignages .cartes-t { grid-template-columns: 1fr; } }

/* Tarifs : rareté sur les cartes */
.offre .rarete { font-size: var(--ov-texte-mini); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ov-rouge); }

/* Pied de page complet */
footer .colonnes-f { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
footer .colonnes-f h4 { font-family: var(--ov-police-titre); font-weight: 600; font-size: .95rem; color: var(--ov-texte); margin: 0 0 8px; }
footer .colonnes-f ul { display: grid; gap: 6px; }
footer .colonnes-f p { max-width: 40ch; }
@media (max-width: 760px) { footer .colonnes-f { grid-template-columns: 1fr; } }
footer .logo-f { height: 24px; width: auto; margin-bottom: 12px; }


/* Offres : options absentes, barrées */
.offre li.non { color: var(--ov-texte-3); text-decoration: line-through; text-decoration-color: var(--ov-gris-300); }
.offre li.non::before { background: transparent; border: 1.5px solid var(--ov-gris-300); width: 6px; height: 6px; }

/* Conversation animée */
.transcription { background: var(--ov-gris-900); border: 1px solid var(--ov-gris-700); border-radius: var(--ov-rayon-l); padding: 18px 20px 16px; display: grid; gap: 14px; min-height: 440px; align-content: start; }
.transcription .tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--ov-texte-mini); letter-spacing: .06em; text-transform: uppercase; color: var(--ov-gris-300); }
.transcription .etat { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ov-blanc); }
.transcription .etat .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--ov-rouge); animation: pulse 1.6s infinite; }
.transcription .etat.fini .pt { background: #4CB879; animation: none; }
.transcription .fil { display: grid; gap: 10px; }
.transcription .msg { padding: 10px 14px; border-radius: 16px; max-width: 86%; font-size: .95rem; line-height: 1.45; margin: 0; animation: carteIn .35s both; }
.transcription .msg.ovi { background: var(--ov-rouge); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.transcription .msg.client { background: var(--ov-gris-700); color: var(--ov-blanc); justify-self: start; border-bottom-left-radius: 4px; }
html.js .transcription .msg[data-attente] { display: none; }
.transcription .frappe { justify-self: end; display: inline-flex; gap: 5px; padding: 12px 14px; border-radius: 16px; background: var(--ov-rouge); margin: 0; }
.transcription .frappe[hidden] { display: none; }
.transcription .frappe span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .85); animation: frappe 1s infinite; }
.transcription .frappe span:nth-child(2) { animation-delay: .15s; }
.transcription .frappe span:nth-child(3) { animation-delay: .3s; }
@keyframes frappe { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.transcription .pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 28px; }
.transcription .issue { font-size: var(--ov-texte-petit); color: var(--ov-gris-300); display: inline-flex; align-items: center; gap: 8px; animation: carteIn .4s both; }
.transcription .issue .pt { width: 8px; height: 8px; border-radius: 50%; background: #4CB879; }
.transcription .issue[hidden], .transcription .rejouer[hidden] { display: none; }
.transcription .rejouer { background: transparent; border: 1px solid var(--ov-gris-700); color: var(--ov-blanc); font: inherit; font-size: var(--ov-texte-petit); font-weight: 600; padding: 6px 12px; border-radius: var(--ov-rayon-pilule); cursor: pointer; }
.transcription .rejouer:hover { border-color: var(--ov-blanc); }


/* ===== Version 4, deuxième passe ===== */

/* Citation du fondateur, en carte */
.fondateur { margin: 0; display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: start; background: var(--ov-surface); border: 1px solid var(--ov-bordure); border-left: 3px solid var(--ov-rouge); border-radius: var(--ov-rayon-m); padding: 16px 20px; max-width: 56ch; }
.fondateur img { width: 22px; height: auto; margin-top: 4px; }
.fondateur p { font-family: var(--ov-police-titre); font-weight: 500; font-size: 1.05rem; line-height: 1.4; color: var(--ov-texte); }
.fondateur cite { display: block; font-style: normal; font-size: var(--ov-texte-petit); color: var(--ov-texte-3); margin-top: 8px; }

/* Bande de confiance à quatre faits */
.confiance .wrap.quatre { grid-template-columns: repeat(4, 1fr); }
.confiance .item b { font-size: 1.15rem; }
.confiance .item a { color: var(--ov-rouge); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .confiance .wrap.quatre { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .confiance .wrap.quatre { grid-template-columns: 1fr; } }

/* La phrase clé, en grand, sur fond noir */
.phrase-cle { background: var(--ov-noir); color: var(--ov-blanc); padding-block: clamp(40px, 6vw, 72px); text-align: center; }
.phrase-cle p { font-family: var(--ov-police-titre); font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; max-width: 24ch; margin-inline: auto; }
.phrase-cle em { font-style: normal; color: var(--ov-rouge); }

/* Ce que vous obtenez, sur un fond différent du problème */
.obtenez-sec { background: var(--ov-surface); border-bottom: 1px solid var(--ov-bordure); }
.obtenez .item { background: var(--ov-fond); }

/* Carte de réservation à la fin de la conversation */
.tr-carte { background: var(--ov-blanc); color: var(--ov-noir); border-radius: var(--ov-rayon-m); padding: 18px 20px; display: grid; gap: 10px; animation: carteIn .45s both; box-shadow: var(--ov-ombre-m); }
.tr-carte[hidden] { display: none; }
.tr-carte .lab { color: var(--ov-rouge); display: inline-flex; align-items: center; gap: 8px; }
.tr-carte .lab .pt { width: 8px; height: 8px; border-radius: 50%; background: #1E7A46; }
.tr-carte h3 { font-size: 1.2rem; }
.tr-carte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .925rem; color: var(--ov-texte-2); }
.tr-carte li { display: grid; grid-template-columns: 12px 1fr; gap: 8px; }
.tr-carte li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--ov-noir); }
.tr-carte .boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tr-carte .btn { padding: 11px 16px; font-size: .875rem; }
.tr-carte .btn-clair { background: transparent; color: var(--ov-noir); border-color: var(--ov-gris-300); }
.tr-carte .btn-clair:hover { border-color: var(--ov-noir); }

/* Formulaire de devis */
.form-devis { display: grid; gap: 18px; background: var(--ov-surface); border: 1px solid var(--ov-bordure); border-radius: var(--ov-rayon-l); padding: 28px; }
.form-devis .champ label { display: block; }
.form-devis input { font: inherit; padding: 12px 14px; border-radius: var(--ov-rayon-m); border: 1px solid var(--ov-bordure); background: var(--ov-fond); color: var(--ov-texte); width: 100%; }
.form-devis input:focus { border-color: var(--ov-noir); outline: none; }
.form-devis .btn { justify-self: start; }
.form-devis .merci { color: #1E7A46; font-weight: 600; }
.form-devis .merci[hidden] { display: none; }


/* ===== Version 4, troisième passe ===== */

/* Bande qui défile */
.defile { overflow: hidden; background: var(--ov-surface); border-block: 1px solid var(--ov-bordure); padding-block: 14px; }
.defile .piste { display: flex; width: max-content; gap: 0; animation: defile 32s linear infinite; }
.defile:hover .piste { animation-play-state: paused; }
.defile .item { display: inline-flex; align-items: center; gap: 12px; padding-inline: 28px; white-space: nowrap; font-weight: 500; font-size: .95rem; color: var(--ov-texte-2); }
.defile .item i { width: 7px; height: 7px; border-radius: 50%; background: var(--ov-gris-500); flex: none; }
.defile .item a { color: var(--ov-rouge); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile .piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* Conversation : la carte se superpose, le fil passe en arrière-plan, et ça tourne en boucle */
.transcription { position: relative; }
.transcription .tete, .transcription .fil { transition: filter .5s ease, opacity .5s ease; }
.transcription.fini .tete, .transcription.fini .fil { filter: blur(4px); opacity: .35; }
.tr-carte { position: absolute; left: 18px; right: 18px; top: 50%; transform: translateY(-50%); z-index: 2; }
@keyframes carteSurgit { from { opacity: 0; transform: translateY(-46%) scale(.97); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
.tr-carte { animation: carteSurgit .5s both; }

/* Icône devant une option d'offre */
.offre li.avec-ico { grid-template-columns: 16px 1fr; }
.offre li.avec-ico::before { display: none; }
.offre li.avec-ico .ico-li { width: 14px; height: 14px; margin-top: 5px; }
.offre li.non.avec-ico .ico-li { opacity: .4; }


/* ===== Version 4, quatrième passe ===== */

/* Devis masqué jusqu'au clic */
.devis[hidden] { display: none; }


/* ===== Page devis (devis.html) ===== */
.page-devis main { min-height: 60vh; }
.page-devis .devis[hidden] { display: block; }
.titre-devis { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.note-devis { margin-top: 22px; text-align: center; color: var(--ov-texte-2); }
.note-devis a { color: var(--ov-rouge); font-weight: 600; font-variant-numeric: tabular-nums; }
.offre li.avec-ico .ico-li { width: 16px; height: 16px; margin-top: 4px; border-radius: 3px; }

/* Logo Google Agenda, deux fois plus grand */
.offre li.avec-ico { grid-template-columns: 38px 1fr; align-items: center; }
.offre li.avec-ico .ico-li { width: 32px; height: auto; margin-top: 0; border-radius: 4px; }

/* Offres : plus d'air entre les fonctionnalités */
.offre ul { gap: 14px; padding-block: 4px; }
.offre li { line-height: 1.4; }
.offre li::before { margin-top: 7px; }
.offre .minutes { margin-bottom: 4px; }


/* ===== Animations, cinquième passe ===== */

/* Mot souligné d'un trait rouge qui se dessine à l'arrivée du titre */
.souligne { background-image: linear-gradient(var(--ov-rouge), var(--ov-rouge)); background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 3px; transition: background-size .7s cubic-bezier(.2, .7, .2, 1) .25s; }
.in .souligne, .in.souligne { background-size: 100% 3px; }
.probleme .souligne, .benef .souligne { background-position: 0 94%; }

/* Les tuiles du simulateur, les étapes et les raisons glissent plus franchement */
html.js .tuile.reveal, html.js .etape.reveal, html.js .raison.reveal, html.js .situation.reveal, html.js .offre.reveal { transform: translateY(28px); }
html.js .tuile.reveal.in, html.js .etape.reveal.in, html.js .raison.reveal.in, html.js .situation.reveal.in, html.js .offre.reveal.in { transform: none; }

/* La flamme respire */
@keyframes respire { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
.pourquoi .flamme, .fondateur img { animation: respire 3.2s ease-in-out infinite; transform-origin: 50% 100%; }

/* La phrase clé : le mot rouge s'allume après l'arrivée */
.phrase-cle em { color: var(--ov-blanc); transition: color .5s ease .5s; }
.phrase-cle .in em { color: var(--ov-rouge); }

/* Le badge « Recommandé » attire l'œil une fois */
@keyframes badge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .souligne, .in .souligne { background-size: 100% 3px; transition: none; }
  .pourquoi .flamme, .fondateur img { animation: none; }
}

/* Widget « Parler à Ovi » : fil de conversation, micro, saisie. */
.widget-panneau .widget-tete { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.widget-fil { display: grid; gap: 8px; max-height: min(320px, 45vh); overflow-y: auto; align-content: start; }
.widget-fil .bulle { margin: 0; max-width: 88%; font-size: .9rem; line-height: 1.45; }
.widget-fil .bulle.ovi { justify-self: start; }
.widget-fil .bulle.client { justify-self: end; background: var(--ov-noir); color: var(--ov-blanc); }
.widget-fil .bulle.info { justify-self: stretch; max-width: none; background: transparent; border: 1px dashed var(--ov-bordure); color: var(--ov-texte-2); }
.widget-fil .bulle.info a { color: var(--ov-rouge); font-weight: 600; }
.widget-fil .bulle.attente { color: var(--ov-texte-3); }
.widget-voix { display: grid; justify-items: center; gap: 8px; }
.widget-voix[hidden], .widget-panneau .saisie[hidden] { display: none; }
.widget-panneau .micro.actif { background: var(--ov-noir); animation: none; }
.widget-panneau .etat-voix { margin: 0; font-size: var(--ov-texte-mini); color: var(--ov-texte-3); text-align: center; }
.widget-panneau .saisie .ligne { display: flex; gap: 8px; margin-top: 6px; }
.widget-panneau .saisie .ligne input { margin-top: 0; min-width: 0; flex: 1; }
.widget-panneau .saisie .ligne .btn { padding: 10px 14px; }

/* Bandeau de consentement aux cookies de mesure d'audience (public/js/mesure.js) : barre en bas de l'écran */
.bandeau-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ov-noir); color: var(--ov-blanc); box-shadow: 0 -12px 40px rgba(11,11,12,.25); padding: 18px max(20px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); font-family: var(--ov-police-texte); }
.bandeau-cookies-dedans { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 24px 32px; }
.bandeau-cookies-texte { flex: 1; display: grid; gap: 4px; }
.bandeau-cookies p { margin: 0; font-size: var(--ov-texte-petit); line-height: 1.5; color: rgba(244,241,236,.78); max-width: 72ch; }
.bandeau-cookies .bandeau-cookies-titre { font-family: var(--ov-police-titre); font-weight: 600; font-size: 1.0625rem; color: var(--ov-blanc); }
.bandeau-cookies a { color: var(--ov-blanc); text-decoration: underline; text-underline-offset: 2px; }
.bandeau-cookies-boutons { display: flex; gap: 10px; flex-shrink: 0; }
.bc-bouton { font-family: var(--ov-police-texte); font-weight: 600; font-size: .9375rem; min-width: 150px; padding: 12px 22px; border-radius: var(--ov-rayon-pilule); cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.bc-refuser { background: transparent; color: var(--ov-blanc); border: 1px solid rgba(244,241,236,.55); }
.bc-refuser:hover { border-color: var(--ov-blanc); background: rgba(244,241,236,.08); }
.bc-accepter { background: var(--ov-blanc); color: var(--ov-noir); border: 1px solid var(--ov-blanc); }
.bc-accepter:hover { background: #fff; }
.bc-bouton:focus-visible { outline: 2px solid var(--ov-rouge); outline-offset: 2px; }
@media (max-width: 760px) { .bandeau-cookies-dedans { flex-direction: column; align-items: stretch; gap: 14px; } .bandeau-cookies-boutons .bc-bouton { flex: 1; min-width: 0; } }

/* ===== Version 5 (2026-10-25) : titre, conversation en haut, mot du fondateur, cartes empilées,
   tableau comparatif, fondateurs, filtre. La garantie et la démonstration de l'app sont retirées. ===== */

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

/* Le haut de page : un titre plus long, la conversation à la place de la vidéo */
.hero h1 { font-size: clamp(2rem, 4vw, 3.3rem); }
.hero-copy .sub { max-width: 44ch; }
.hero-demo { color: var(--ov-texte-3); font-size: var(--ov-texte-petit); }
.hero-demo a { color: var(--ov-rouge); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-visuel .transcription { min-height: 420px; box-shadow: var(--ov-ombre-l); }
.transcription .meta { text-transform: none; letter-spacing: 0; }

/* Lecteur de l'extrait audio, affiché quand l'enregistrement existe */
.lecteur { display: flex; align-items: center; gap: 12px; background: var(--ov-noir); border-radius: var(--ov-rayon-pilule); padding: 8px 18px 8px 8px; color: var(--ov-blanc); }
.lecteur[hidden] { display: none; }
.lecteur button { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--ov-rouge); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lecteur button svg { width: 16px; height: 16px; fill: currentColor; }
.lecteur .onde { flex: 1; height: 26px; display: flex; align-items: center; gap: 3px; }
.lecteur .onde i { flex: 1; border-radius: 2px; background: var(--ov-gris-700); height: 40%; }
.lecteur .onde i:nth-child(3n) { height: 85%; } .lecteur .onde i:nth-child(3n + 1) { height: 60%; } .lecteur .onde i:nth-child(4n) { height: 30%; }
.lecteur.joue .onde i { background: var(--ov-rouge); }
.lecteur .texte { font-size: var(--ov-texte-petit); color: var(--ov-gris-300); white-space: nowrap; }

/* Le mot du fondateur, en grand, sur un côté */
.mot-fondateur { padding-block: clamp(48px, 7vw, 96px); background: var(--ov-noir); color: var(--ov-blanc); }
.mot-fondateur .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 6vw, 96px); align-items: end; }
.mot-fondateur blockquote { margin: 0; }
.mot-fondateur blockquote p { font-family: var(--ov-police-titre); font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; max-width: 28ch; }
.mot-fondateur .signature { display: grid; justify-items: center; gap: 14px; }
.mot-fondateur .signature img { width: 56px; height: auto; animation: respire 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.mot-fondateur cite { font-style: normal; font-size: var(--ov-texte-petit); color: var(--ov-gris-300); white-space: nowrap; }
@media (max-width: 760px) {
  .mot-fondateur .wrap { grid-template-columns: 1fr; }
  .mot-fondateur .signature { grid-auto-flow: column; justify-content: start; align-items: center; }
  .mot-fondateur .signature img { width: 22px; }
}

/* Le problème : aujourd'hui, puis avec Ovi */
.probleme { background: var(--ov-surface); color: var(--ov-texte); }
.probleme .section-head p { color: var(--ov-texte-2); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.duo-col { display: grid; gap: 20px; align-content: start; padding: clamp(24px, 3vw, 34px); border-radius: var(--ov-rayon-l); }
.duo-col.avant { background: var(--ov-noir); color: var(--ov-blanc); }
.duo-col.apres { background: var(--ov-fond); color: var(--ov-noir); border: 1px solid var(--ov-bordure); }
.duo-col h3 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; }
.duo-col h3 i { width: 11px; height: 11px; border-radius: 50%; background: var(--ov-rouge); }
.duo-col.apres h3 i { background: #1E7A46; }
.duo-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.duo-col li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; line-height: 1.5; }
.duo-col .quand { font-family: var(--ov-police-titre); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ov-gris-300); }
.duo-col.apres .quand { color: var(--ov-gris-500); }
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } }
.phrase-cle .wrap-narrow { display: grid; gap: 26px; justify-items: center; }

/* Ce que vous obtenez : six cartes qui s'empilent au défilement (inspiration ouichef-agence.com).
   Chaque carte reste collée sous la barre de navigation ; la suivante la recouvre, et main.js fait
   pencher et reculer un peu celle du dessous (--p de 0 à 1). */
.obtenez-sec { background: var(--ov-fond); }
.pile { display: grid; gap: 28px; }
.carte-pile { --haut: calc(env(safe-area-inset-top, 0px) + 92px); position: sticky; top: var(--haut); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 4vw, 52px); align-items: center; min-height: 360px; padding: clamp(24px, 4vw, 52px); border-radius: 28px; transform-origin: 50% 0; transform: scale(calc(1 - .05 * var(--p, 0))) rotate(calc(var(--tilt, 0deg) * var(--p, 0))); box-shadow: 0 -14px 44px rgba(11, 11, 12, .14); }
.carte-pile:nth-child(1) { --tilt: -2.5deg; }
.carte-pile:nth-child(2) { top: calc(var(--haut) + 14px); --tilt: 2deg; }
.carte-pile:nth-child(3) { top: calc(var(--haut) + 28px); --tilt: -2deg; }
.carte-pile:nth-child(4) { top: calc(var(--haut) + 42px); --tilt: 2.5deg; }
.carte-pile:nth-child(5) { top: calc(var(--haut) + 56px); --tilt: -1.5deg; }
.carte-pile:nth-child(6) { top: calc(var(--haut) + 70px); }
.carte-pile.ton-noir { background: var(--ov-noir); color: var(--ov-blanc); }
.carte-pile.ton-blanc { background: var(--ov-blanc-pur); color: var(--ov-noir); border: 1px solid var(--ov-bordure); }
.carte-pile.ton-rouge { background: var(--ov-rouge); color: #fff; }
.cp-texte { display: grid; gap: 14px; align-content: center; }
.cp-num { font-family: var(--ov-police-titre); font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; color: var(--ov-rouge); font-variant-numeric: tabular-nums; }
.ton-rouge .cp-num { color: rgba(255, 255, 255, .78); }
.cp-texte h3 { font-size: clamp(1.75rem, 3.4vw, 2.8rem); line-height: 1.04; letter-spacing: -.028em; }
.cp-texte p { font-size: 1.1rem; line-height: 1.5; max-width: 40ch; }
.ton-noir .cp-texte p { color: var(--ov-gris-300); }
.ton-blanc .cp-texte p { color: var(--ov-texte-2); }
.ton-rouge .cp-texte p { color: rgba(255, 255, 255, .88); }
.cp-visuel { display: grid; gap: 12px; align-content: center; padding: clamp(16px, 2.4vw, 26px); border-radius: 22px; background: rgba(255, 255, 255, .06); }
.ton-blanc .cp-visuel { background: var(--ov-blanc); }
.ton-rouge .cp-visuel { background: rgba(11, 11, 12, .14); }
.mini-appel { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--ov-gris-900); border: 1px solid var(--ov-gris-700); }
.mini-appel b { font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ic-rond { width: 36px; height: 36px; border-radius: 50%; background: var(--ov-rouge); display: grid; place-items: center; animation: sonne 2.6s ease-in-out infinite; }
.mini-appel + .mini-appel .ic-rond { animation-delay: .4s; }
.ic-rond img { width: 16px; height: 16px; filter: invert(1); }
.mini-puce { font-style: normal; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--ov-rayon-pilule); background: rgba(76, 184, 121, .18); color: #7BD6A5; white-space: nowrap; }
.mini-note { font-size: .875rem; opacity: .72; }
.mini-bulle { margin: 0; padding: 11px 15px; border-radius: 16px; font-size: .95rem; line-height: 1.4; max-width: 90%; }
.mini-bulle.client { justify-self: start; background: var(--ov-blanc-pur); color: var(--ov-noir); border: 1px solid var(--ov-bordure); border-bottom-left-radius: 4px; }
.mini-bulle.ovi { justify-self: end; background: var(--ov-noir); color: var(--ov-blanc); border-bottom-right-radius: 4px; }
.ton-rouge .mini-bulle.client { border-color: transparent; }
.mini-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.mini-places span { text-align: center; padding: 11px 6px; border-radius: 12px; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; background: var(--ov-blanc-pur); border: 1px solid var(--ov-bordure); }
.mini-places .plein { color: var(--ov-rouge-sombre); border-color: rgba(230, 58, 46, .4); background: repeating-linear-gradient(135deg, rgba(230, 58, 46, .1) 0 6px, transparent 6px 12px); }
.mini-lettres { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-lettres span { width: clamp(38px, 5vw, 50px); aspect-ratio: 5 / 6; border-radius: 12px; background: var(--ov-blanc-pur); color: var(--ov-noir); display: grid; place-items: center; font-family: var(--ov-police-titre); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
.mini-lettres span:nth-child(3) { margin-left: 10px; }
.mini-alerte { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 16px; background: var(--ov-gris-900); border: 1px solid var(--ov-gris-700); color: var(--ov-blanc); }
.ton-rouge .mini-alerte { background: var(--ov-blanc-pur); color: var(--ov-noir); border-color: transparent; }
.mini-alerte .pt { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--ov-rouge); animation: pulse 2s infinite; }
.mini-alerte b { display: block; font-weight: 600; }
.mini-alerte span:not(.pt) { font-size: .85rem; opacity: .72; }
.mini-resume { display: grid; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--ov-blanc-pur); border: 1px solid var(--ov-bordure); }
.mini-resume .lab { color: var(--ov-rouge); }
.mini-resume p:not(.lab) { line-height: 1.5; }
.mini-resume span { font-size: .8rem; color: var(--ov-texte-3); }
.pile-fin { margin-top: 32px; display: grid; justify-items: center; gap: 10px; text-align: center; padding: clamp(26px, 4vw, 40px); border-radius: var(--ov-rayon-l); background: var(--ov-surface); border: 1px solid var(--ov-bordure); }
.pile-fin h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.pile-fin p { color: var(--ov-texte-2); }
.pile-fin .btn { margin-top: 8px; }
@media (max-width: 760px) {
  .carte-pile { --haut: calc(env(safe-area-inset-top, 0px) + 80px); grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 20px; }
  .carte-pile:nth-child(2) { top: calc(var(--haut) + 8px); } .carte-pile:nth-child(3) { top: calc(var(--haut) + 16px); }
  .carte-pile:nth-child(4) { top: calc(var(--haut) + 24px); } .carte-pile:nth-child(5) { top: calc(var(--haut) + 32px); }
  .carte-pile:nth-child(6) { top: calc(var(--haut) + 40px); }
}
@media (prefers-reduced-motion: reduce) { .carte-pile { position: relative; top: auto; transform: none; } }

/* La preuve : le numéro dans une carte noire, sur fond clair */
.entendez { background: var(--ov-surface); color: var(--ov-texte); border-block: 1px solid var(--ov-bordure); }
.entendez .section-head .lab { color: var(--ov-rouge); }
.entendez .section-head p { color: var(--ov-texte-2); }
.entendez .numero-grand { max-width: 640px; margin-inline: auto; background: var(--ov-noir); border-color: var(--ov-noir); box-shadow: var(--ov-ombre-l); }

/* Pourquoi Ovidium : quatre raisons, une par levier */
.raisons-sec { background: var(--ov-noir); color: var(--ov-blanc); }
.quatre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ov-gris-700); }
.raison4 { display: grid; gap: 10px; align-content: start; padding: 28px 24px 4px; border-left: 1px solid var(--ov-gris-700); }
.raison4:first-child { border-left: 0; padding-left: 0; }
.raison4 h3 { font-size: 1.3rem; line-height: 1.2; }
.raison4 p:last-child { color: var(--ov-gris-300); line-height: 1.55; }
@media (max-width: 900px) {
  .quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raison4:nth-child(3) { border-left: 0; padding-left: 0; }
  .raison4:nth-child(n + 3) { border-top: 1px solid var(--ov-gris-700); margin-top: 24px; }
}
@media (max-width: 560px) {
  .quatre { grid-template-columns: minmax(0, 1fr); }
  .raison4 { border-left: 0; padding-left: 0; padding-bottom: 24px; }
  .raison4 + .raison4 { border-top: 1px solid var(--ov-gris-700); margin-top: 0; }
}

/* Le tableau comparatif : oui, à moitié, non, et la colonne Ovi en rouge */
.compare { background: var(--ov-fond); }
.ic { position: relative; display: inline-block; width: 18px; height: 18px; flex: none; }
.ic.oui::before { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 7px; border: solid #1E7A46; border-width: 0 0 3px 3px; border-radius: 1px; transform: rotate(-45deg); }
.ic.non::before, .ic.non::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 3px; border-radius: 2px; background: var(--ov-rouge); transform: rotate(45deg); }
.ic.non::after { transform: rotate(-45deg); }
.table-compare { overflow-x: auto; }
.table-compare table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.table-compare th, .table-compare td { padding: 20px 18px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ov-bordure); }
.table-compare thead th { font-family: var(--ov-police-titre); font-weight: 600; font-size: 1.05rem; color: var(--ov-texte-2); border-bottom: 2px solid var(--ov-noir); vertical-align: bottom; }
.table-compare tbody th { font-family: var(--ov-police-titre); font-weight: 600; font-size: 1.12rem; width: 24%; }
.table-compare td { color: var(--ov-texte-2); }
.table-compare .val { display: inline-flex; align-items: center; gap: 10px; }
.table-compare .ovi { background: var(--ov-rouge); color: #fff; font-weight: 600; border-bottom-color: rgba(255, 255, 255, .22); }
.table-compare thead .ovi { color: #fff; font-size: 1.35rem; border-radius: 18px 18px 0 0; border-bottom-color: var(--ov-rouge); }
.table-compare tbody tr:last-child .ovi { border-radius: 0 0 18px 18px; border-bottom-color: var(--ov-rouge); }
.table-compare .ovi .ic.oui::before { border-color: #fff; }
@media (max-width: 720px) {
  .table-compare table { min-width: 0; }
  .table-compare table, .table-compare tbody, .table-compare tr, .table-compare th, .table-compare td { display: block; width: auto; }
  .table-compare thead { display: none; }
  .table-compare tbody { display: grid; gap: 14px; }
  .table-compare tr { border: 1px solid var(--ov-bordure); border-radius: var(--ov-rayon-l); background: var(--ov-surface); overflow: hidden; }
  .table-compare tbody th { padding: 18px 18px 10px; border: 0; }
  .table-compare td { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 0; border-top: 1px solid var(--ov-bordure); }
  .table-compare td::before { content: attr(data-label); font-weight: 600; color: var(--ov-texte); }
  .table-compare td .val { justify-content: flex-end; text-align: right; }
  .table-compare td.ovi::before { color: #fff; }
  .table-compare tbody tr:last-child .ovi { border-radius: 0; }
}

/* Les tarifs : le Pro à gauche pour l'ancre, le Standard mis en avant */
.offre.vedette { border: 2px solid var(--ov-noir); box-shadow: var(--ov-ombre-m); background: #fff; }
.offre.vedette.in .badge { animation: badge 1.2s ease-in-out 3; }
.offre .minutes small { display: block; font-weight: 500; font-size: var(--ov-texte-petit); color: var(--ov-texte-3); margin-top: 2px; }
.offre .fondateur-ligne { font-size: var(--ov-texte-petit); color: var(--ov-texte-2); text-align: center; }
.offre .fondateur-ligne[hidden] { display: none; }
.offre .fondateur-ligne a { color: var(--ov-rouge); font-weight: 600; }

/* Restaurants fondateurs */
.fondateurs { padding-top: clamp(40px, 6vw, 72px); }
.bloc-fondateurs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: var(--ov-rouge); color: #fff; }
.bloc-fondateurs .lab { color: rgba(255, 255, 255, .82); letter-spacing: .12em; }
.bloc-fondateurs h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); max-width: 16ch; margin: 12px 0 16px; }
.bloc-fondateurs p:not(.lab) { max-width: 54ch; line-height: 1.55; }
.bloc-fondateurs .btn { margin-top: 24px; }
.btn-blanc { background: #fff; color: var(--ov-rouge); }
.btn-blanc:hover { background: var(--ov-blanc); }
.places-fondateurs { display: grid; justify-items: center; gap: 8px; min-width: 240px; padding: 30px 36px; border-radius: 22px; background: var(--ov-rouge-sombre); text-align: center; }
.places-fondateurs b { font-family: var(--ov-police-titre); font-weight: 600; font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.places-fondateurs span { max-width: 18ch; }
@media (max-width: 760px) { .bloc-fondateurs { grid-template-columns: minmax(0, 1fr); } .places-fondateurs { justify-self: start; min-width: 0; } }

/* On ne travaille pas avec tout le monde */
.filtre { background: var(--ov-noir); color: var(--ov-blanc); }
.filtre .section-head p { color: var(--ov-gris-300); }
.filtre-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.filtre-item { display: grid; gap: 8px; align-content: start; padding: 24px 26px; border: 1px solid var(--ov-gris-700); border-radius: var(--ov-rayon-l); }
.filtre-item h3 { font-size: 1.12rem; }
.filtre-item p { color: var(--ov-gris-300); }
@media (max-width: 760px) { .filtre-grille { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) { .mot-fondateur .signature img, .offre.vedette.in .badge, .ic-rond { animation: none; } }

/* ===== Version 5, retours du 2026-10-25 ===== */

/* Le bandeau qui défile : blanc, à plat, entre le haut de page et le bloc noir */
.defile { background: var(--ov-blanc-pur); border-block: 1px solid var(--ov-bordure); }
.defile .item { color: var(--ov-noir); }
.defile .item i { background: var(--ov-rouge); }

/* Les boutons d'action à la fin des blocs */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: clamp(28px, 4vw, 40px); }
.phrase-cle .actions { margin-top: 0; justify-content: center; }
.btn-contour-clair { background: transparent; color: var(--ov-blanc); border-color: rgba(244, 241, 236, .4); }
.btn-contour-clair:hover { border-color: var(--ov-blanc); background: rgba(244, 241, 236, .06); }
.filtre-fin { margin-top: clamp(28px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; padding: 22px 26px; border-radius: var(--ov-rayon-l); background: var(--ov-gris-900); }
.filtre-fin p { font-family: var(--ov-police-titre); font-weight: 600; font-size: 1.25rem; }

/* Les liens vers une section s'arrêtent sous la barre de navigation */
[id] { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 84px); }

/* Défilement fluide (Lenis, js/lenis.min.js), comme ouichef-agence.com */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Boutons : au survol, les lettres montent et d'autres arrivent en tournant un peu ; au clic, le bouton s'enfonce */
.btn:active { transform: scale(.96); transition-duration: .08s; }
.btn .lettres { display: inline-flex; overflow: hidden; line-height: 1.25; padding-block: .06em; }
.btn .lettres .l { position: relative; display: inline-block; white-space: pre; transition: transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 16ms); }
.btn .lettres .l::after { content: attr(data-l); position: absolute; left: 0; top: 100%; transform: rotate(var(--r, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: inherit; }
.btn:hover .lettres .l { transform: translateY(-100%); }
.btn:hover .lettres .l::after { transform: rotate(0deg); }

/* Questions : la réponse s'ouvre en glissant (navigateurs récents ; ailleurs, elle s'ouvre d'un coup) */
@supports (interpolate-size: allow-keywords) {
  .faq-liste { interpolate-size: allow-keywords; }
  .faq-liste details::details-content { height: 0; overflow: clip; transition: height .45s cubic-bezier(.2, .7, .2, 1), content-visibility .45s allow-discrete; }
  .faq-liste details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* ===== Version 5 : effets d'ouichef-agence.com sur les textes et les cartes (ordinateur seulement) =====
   Tout est posé par main.js : sans script, rien n'est caché. Sur téléphone et avec moins d'animations
   demandé, les blocs gardent leur apparition simple (.reveal). */

/* Titres mot par mot, paragraphes ligne par ligne : chaque mot monte depuis l'arrière d'un cache */
.mot { display: inline-block; vertical-align: top; overflow: hidden; overflow: clip; overflow-clip-margin: .2em; }
.mot-in { display: inline-block; transform: translateY(108%); transition: transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 1ms); }
.texte-monte.vu .mot-in { transform: none; }

/* Cartes : elles arrivent par en dessous, déjà penchées, et restent penchées */
html.js .penche { opacity: 0; transform: translateY(70px) rotate(var(--rot, 0deg)); transition: opacity .6s ease, transform .95s cubic-bezier(.2, .9, .3, 1.2); }
html.js .penche.vu { opacity: 1; transform: translate(var(--ix, 0px), var(--iy, 0px)) rotate(calc(var(--rot, 0deg) + var(--ir, 0deg))); }
/* Poussée par la souris : départ rapide, retour souple */
html.js .penche.vu.pousse { transition: opacity .6s ease, transform .14s ease-out; }

/* Lignes du tableau et questions : une par une */
html.js .monte { opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 1ms); }
html.js .monte.vu { opacity: 1; transform: none; }

/* Tarifs : le Pro résume « tout le Standard, et en plus », le Standard détaille tout */
.offre li.titre-liste { display: block; font-weight: 600; color: var(--ov-texte); }
.offre li.titre-liste::before { display: none; }
/* Chaque carte garde sa hauteur : le Standard, plus long, dépasse le Pro et l'Essentiel (comme dans l'atelier des cartes) */
.grille { align-items: start; }
.offre ul { align-content: start; }