/* La vitrine B « Carte vivante » (choisie le 23 octobre 2026 sur le canevas Claude Design) :
   la carte claire est le décor du héros, le titre se pose dessus comme un panneau de
   l'application, puis les trois gestes, les données, les formules et leur comparatif.
   Plein soleil : Manrope pour les titres, Public Sans pour le texte, jetons de jetons.css,
   la carte claire dans les deux thèmes. Elle se charge après vitrine.css, que la connexion
   et les pages publiques gardent telle quelle.

   POURQUOI tout le mouvement est sous « prefers-reduced-motion: no-preference » : la page
   sans animation est complète et belle ; le mouvement s'ajoute, il ne cache rien. Les
   apparitions liées au défilement passent par animation-timeline (sans script) ; ailleurs,
   un IntersectionObserver de la page pose la classe .vu. Uniquement transform et opacity. */

.accueil { font-family: 'Public Sans', var(--texte); }
.accueil h1, .accueil h2, .accueil h3, .accueil .marque, .accueil .prix, .accueil .preuves b, .accueil .numero { font-family: 'Manrope', var(--titre); }
.accueil .eyebrow { font: 600 14px/1.2 'Public Sans', var(--texte); letter-spacing: .12em; }
.accueil .marque { font-weight: 800; font-size: 24px; }
.accueil .bouton { height: 56px; padding: 0 26px; border-radius: 999px; font: 600 16px 'Public Sans', var(--texte); transition: transform .25s cubic-bezier(.2, .7, .1, 1), box-shadow .25s, border-color .25s; }
.accueil .bouton:hover { transform: translateY(-2px); border-color: var(--accent); }
.accueil .bouton.principal:hover { box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.accueil .bouton:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* L'en-tête en verre : collant, le décor passe dessous. */
.accueil .vitrine-entete { position: sticky; top: 0; z-index: 30; background: var(--chrome); background: color-mix(in srgb, var(--chrome) 80%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.accueil .entete-formules { display: none; }
.accueil .vitrine-entete .ouvrir { height: 44px; }
@media (min-width: 900px) {
  .accueil .entete-formules { display: inline-flex; margin-left: auto; height: 44px; padding: 0 20px; font-size: 15px; }
  .accueil .entete-formules + .ouvrir { margin-left: 0; }
}

/* Le héros : la carte claire en décor, le panneau du titre, le téléphone de la tournée. */
.accueil .heros { position: relative; overflow: hidden; max-width: none; margin: 0; padding: 0; display: block; background: var(--carte-fond); border-bottom: 2px solid var(--line); }
.carte-fond { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 60% 45%; }
.carte-fond .loire { fill: #CFE2E8; }
.carte-fond .routes path { fill: none; stroke: #FFFFFF; stroke-width: 14; stroke-linecap: round; }
.carte-fond .rues path { fill: none; stroke: #E2DBCB; stroke-width: 5; stroke-linecap: round; }
.carte-fond .trace { fill: none; stroke: var(--carte-trace); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.carte-fond .rayon { fill: none; stroke: var(--carte-trace); stroke-width: 2; stroke-dasharray: 8 8; transform-box: fill-box; transform-origin: center; }
.carte-fond .depart circle { fill: var(--carte-depart); }
.carte-fond .depart .coeur { fill: #FFFFFF; }
.carte-fond .epingles .epingle { fill: var(--carte-epingle); stroke: #FFFFFF; stroke-width: 3; }
.carte-fond .epingles.ambre .epingle { fill: var(--carte-epingle-ban); }
.carte-fond .epingle { transform-box: fill-box; transform-origin: center bottom; }
.heros-grille { position: relative; max-width: 1280px; margin: 0 auto; padding: 64px 24px; min-height: 760px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.accueil .panneau { flex: 999 1 520px; min-width: 0; max-width: 640px; gap: 0; background: var(--bg); border: 2px solid var(--line); border-radius: 28px; padding: clamp(24px, 4vw, 48px); box-shadow: 0 30px 80px -40px rgba(6, 22, 28, .5); }
.accueil .heros h1 { margin: 0; font: 800 clamp(2.4rem, 5.4vw, 4.4rem)/1.02 'Manrope', var(--titre); letter-spacing: -.03em; }
.accueil .heros h1 .eyebrow { display: block; margin-bottom: 20px; color: var(--muted); }
.accueil .heros h1 b { color: var(--marque); font-weight: 800; }
.masque { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ligne { display: block; }
.accueil .heros .reponse { margin: 24px 0 0; font: 700 clamp(1.3rem, 2.2vw, 1.65rem) 'Manrope', var(--titre); color: var(--ink); }
.accueil .heros p.chapeau { margin: 12px 0 0; max-width: 62ch; }
.accueil .heros .micro { margin: 12px 0 0; }
.accueil .heros .actions { margin-top: 32px; }
.heros-scene { flex: 1 1 300px; position: relative; min-height: 620px; }
.puces { position: absolute; left: 0; top: 24px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.puce { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font-weight: 600; font-size: 15px; box-shadow: var(--ombre); }
.puce.signal { background: var(--voile-ambre); color: var(--ambre); border-color: var(--ambre); border-color: color-mix(in srgb, var(--ambre) 40%, transparent); }
.pastille-verte { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.tel { width: 280px; flex: none; border-radius: 44px; border: 10px solid #06161C; background: #06161C; box-shadow: 0 50px 100px -40px rgba(6, 22, 28, .55); overflow: hidden; }
.tel img { display: block; width: 100%; height: auto; border-radius: 34px; background: #F1EEE7; }
.tel-heros { position: absolute; right: 0; top: 48px; rotate: 4deg; }
@media (max-width: 899px) {
  .heros-grille { min-height: 0; padding: 16px 16px 48px; gap: 24px; }
  .accueil .panneau { padding: 22px 20px; }
  .accueil .heros .reponse { margin-top: 16px; }
  .accueil .heros p.chapeau { font-size: 16px; }
  .accueil .heros .actions { margin-top: 24px; }
  /* Au téléphone, le haut de la tournée paraît dès le premier écran, sous le panneau : le produit se voit avant de défiler. */
  .heros-scene { flex-basis: 100%; min-height: 0; display: flex; justify-content: center; }
  .puces { display: none; }
  /* Au téléphone la carte est presque entièrement couverte : son zoom ne tourne pour personne (spécificité au-dessus de la règle du mouvement). */
  .accueil .heros .carte-fond { animation: none; }
  .tel-heros { position: relative; right: auto; top: auto; width: 240px; rotate: 0deg; }
}

/* La légende : les chiffres vrais, comme la légende d'une carte. */
.accueil .preuves { max-width: 1280px; padding: 56px 24px; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.accueil .preuves h2 { margin: 0; }
.accueil .preuves div { padding: 0; border: 0; background: none; flex-direction: row; gap: 16px; align-items: flex-start; }
.accueil .preuves p { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.accueil .preuves b { font: 800 64px/1 'Manrope', var(--titre); color: var(--ink); letter-spacing: -.03em; }
.accueil .preuves span { font-size: 16px; }
.repere { flex: none; margin-top: 18px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--bg); }
.repere.vert { background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.repere.ambre { background: var(--carte-epingle-ban); box-shadow: 0 0 0 2px var(--carte-epingle-ban); }
.repere.trait { margin-top: 28px; width: 28px; height: 6px; border: 0; border-radius: 3px; background: var(--accent); }
.compte { --n: var(--fin); counter-reset: n var(--n); }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }

/* Les bandes et les sections */
.bande-surface { background: var(--surface); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.accueil .section { max-width: 1280px; }
.accueil .section h2 { font: 800 clamp(2rem, 4.2vw, 3.4rem)/1.08 'Manrope', var(--titre); letter-spacing: -.025em; max-width: 880px; }
.accueil .section > p { font-size: 18px; max-width: 62ch; }
.accueil .deja { margin: 20px 0 0; text-align: center; }
.accueil .deja a { display: inline-block; padding: 12px 6px; font-weight: 600; }
.accueil .carte { border-radius: 22px; transition: transform .4s cubic-bezier(.2, .7, .1, 1), border-color .4s, box-shadow .4s; }
.accueil .offre:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 24px 50px -30px rgba(6, 22, 28, .45); }
.accueil .carte h3 { font: 700 1.35rem 'Manrope', var(--titre); }
.bande-surface .carte { background: var(--bg); }
.gestes { margin-top: 56px; display: grid; gap: 48px 32px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); justify-items: center; }
.geste { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.geste figcaption { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.geste h3 { margin: 0; font-size: 1.6rem; }
.geste p { margin: 0; color: var(--muted); max-width: 300px; }
.numero { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }

/* Les formules : pour qui, le prix et sa phrase, ce que chacune ajoute. */
.accueil .offre .pour-qui { margin: 0; font-weight: 600; font-size: 16px; color: var(--ink); }
.accueil .offre .rythme-note { margin: -4px 0 0; font-size: 14px; }
.accueil .carte .prix { font-weight: 800; font-size: 2.6rem; }
.accueil .carte .prix small { font-family: 'Public Sans', var(--texte); }
.accueil .offre ul { font-size: 15px; gap: 8px; }
.accueil .offre .pastille { font: 700 12px 'Public Sans', var(--texte); }

/* Le comparatif, ouvert et rangé par familles ; la première colonne reste en place au défilement horizontal. */
.comparatif-titre { margin: 64px 0 16px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.accueil .comparatif { margin-top: 0; }
.accueil .comparatif .tableau { padding: 0 0 8px; }
.accueil .comparatif table { min-width: 560px; }
.accueil .comparatif th, .accueil .comparatif td { padding: 12px 14px; vertical-align: middle; }
.accueil .comparatif thead th { font: 700 13px 'Public Sans', var(--texte); padding-top: 18px; }
.accueil .comparatif thead th:first-child, .accueil .comparatif tbody th[scope="row"], .accueil .comparatif tfoot th { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; width: 46%; }
.accueil .comparatif tbody th[scope="row"] { font-weight: 500; }
.accueil .comparatif .groupe th { position: static; text-align: left; padding-top: 24px; font: 700 13px 'Public Sans', var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border-top: 2px solid var(--line); }
.accueil .comparatif td { font: 700 17px 'Manrope', var(--titre); color: var(--ink); }
.accueil .comparatif td.avant { color: var(--accent); }
.accueil .comparatif td.ailleurs { color: var(--muted); font-weight: 500; }
.accueil .comparatif td.texte { font: 600 14px 'Public Sans', var(--texte); color: var(--ink); }
.accueil .comparatif tfoot th, .accueil .comparatif tfoot td { border-top: 2px solid var(--line); font: 700 14px 'Public Sans', var(--texte); color: var(--ink); }

/* Les questions */
.questions { margin-top: 64px; max-width: 860px; }
.questions h3 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.questions details { border-top: 2px solid var(--line); }
.questions details:last-child { border-bottom: 2px solid var(--line); }
.questions summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; font: 700 18px 'Manrope', var(--titre); }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: '+'; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 500; color: var(--accent); transition: transform .3s; }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.questions details p { margin: 0 0 20px; color: var(--muted); max-width: 720px; }

/* Le pied : la phrase, puis les liens légaux. Sombre dans les deux thèmes. */
.accueil .vitrine-pied { margin-top: 0; background: #06161C; color: #9DB2B8; border-top: 0; padding: 72px 24px 56px; }
.accueil .vitrine-pied a { color: #4ADE9B; display: inline-block; padding: 12px 4px; }
.accueil .carte .doux a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
:root[data-theme="sombre"] .accueil .vitrine-pied { border-top: 2px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .accueil .vitrine-pied { border-top: 2px solid var(--line); } }
.accueil .choix-formule button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.accueil .pied-phrase { margin: 0 0 24px; font: 800 clamp(1.8rem, 4vw, 2.6rem)/1.1 'Manrope', var(--titre); letter-spacing: -.02em; color: #FFFFFF; }
.accueil .vitrine-pied .pied-phrase b { color: #4ADE9B; }

/* Le mouvement : ajouté seulement quand l'appareil l'accepte. */
@media (prefers-reduced-motion: no-preference) {
  .carte-fond { animation: kb 24s ease-out forwards; }
  .heros.hors-ecran .carte-fond, .heros.hors-ecran .rayon, .heros.hors-ecran .tel-heros { animation-play-state: paused; }
  .carte-fond .trace { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: trace 4s .6s cubic-bezier(.4, 0, .2, 1) forwards; }
  .carte-fond .rayon { animation: rayon 3.5s ease-out infinite; }
  .carte-fond .epingle, .puce { animation: pose .6s var(--d, 0s) cubic-bezier(.2, .9, .3, 1.3) both; }
  .accueil .panneau { animation: pose-panneau .6s cubic-bezier(.2, .8, .1, 1) both; }
  .entree { animation: entree .5s var(--d, 0s) cubic-bezier(.2, .8, .1, 1) both; }
  .ligne { animation: ligne .7s var(--d, 0s) cubic-bezier(.2, .8, .1, 1) both; }
  .tel-heros { animation: arrive .8s .25s cubic-bezier(.2, .8, .1, 1) both, flotte 7s 1.2s ease-in-out infinite; }
  .geste:nth-child(2) { animation-range: entry 8% cover 34%; }
  .geste:nth-child(3) { animation-range: entry 16% cover 40%; }
  .apparitions .revele { opacity: 0; translate: 0 48px; transition: opacity .9s cubic-bezier(.2, .8, .1, 1), translate .9s cubic-bezier(.2, .8, .1, 1); }
  .apparitions .revele.vu { opacity: 1; translate: 0 0; }
  @supports (animation-timeline: view()) {
    .revele { animation: revele linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .parallaxe { animation: parallaxe linear both; animation-timeline: view(); }
    .compte .nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .compte::after { content: counter(n); }
    .compte { animation: compte linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes kb { from { scale: 1; } to { scale: 1.06; } }
@keyframes pose-panneau { from { translate: 0 32px; } to { translate: 0 0; } }
@keyframes entree { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes rayon { 0% { scale: .7; opacity: .9; } 100% { scale: 1.25; opacity: 0; } }
@keyframes pose { from { opacity: 0; translate: 0 -18px; } to { opacity: 1; translate: 0 0; } }
@keyframes arrive { from { opacity: 0; scale: .95; translate: 0 48px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes ligne { from { transform: translateY(105%); } to { transform: none; } }
@keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes revele { from { opacity: 0; translate: 0 56px; } to { opacity: 1; translate: 0 0; } }
@keyframes parallaxe { from { translate: 0 50px; } to { translate: 0 -50px; } }
@keyframes compte { from { --n: 0; } to { --n: var(--fin); } }@media (min-width: 900px) { .accueil .offre.avant:hover { transform: translateY(-18px); } }
/* Au téléphone, les trois colonnes tiennent dans l'écran : la capacité garde 40 %, les formules se partagent le reste. */
@media (max-width: 599px) {
  .accueil .comparatif .tableau { overflow-x: hidden; }
  .accueil .comparatif table { min-width: 0; table-layout: fixed; }
  .accueil .comparatif thead th:first-child, .accueil .comparatif tbody th[scope="row"], .accueil .comparatif tfoot th { position: static; width: 40%; }
  .accueil .comparatif th, .accueil .comparatif td { padding: 10px 6px; }
  .accueil .comparatif thead th { font-size: 11px; letter-spacing: 0; }
  .accueil .comparatif tbody th[scope="row"] { font-size: 14px; }
  .accueil .comparatif td.texte, .accueil .comparatif tfoot td { font-size: 12px; -webkit-hyphens: auto; hyphens: auto; }
  .accueil .comparatif tfoot th { font-size: 12px; }
}
/* Les bascules (rythme, formule au téléphone) aux cibles de la charte, 56 px ; le formulaire du paiement s'ouvre sous les formules. */
.accueil .bascule button, .accueil .choix-formule button { height: 56px; padding: 0 20px; font: 600 15px 'Public Sans', var(--texte); }
.accueil .formules .paiement { margin: 32px auto 0; }