/*
 * Soinora — feuille du site, construite sur tokens.css (charte « Terre & Sauge »).
 * Aucune couleur hors charte : toutes les valeurs viennent des jetons.
 * Points de rupture : 720 px (tablette), 960 px (deux colonnes), 1200 px (contenu maximal).
 */

/* ---- Jetons propres au site (valeurs de la charte) ------------------------------------------ */
:root {
  --cadre-telephone: #1d1916;     /* bordure des téléphones, identique dans les deux thèmes */
  --ecran-clair: #f7f3ee;         /* fond de l'app en clair (barre d'état des téléphones) */
  --ecran-sombre: #15110f;        /* fond de l'app en sombre */
  --qr-fond: #ffffff;             /* le QR reste sur fond clair, même en thème sombre */
  --gouttiere: 16px;
  --hauteur-entete: 64px;
  --respiration: 64px;
}
@media (min-width: 720px) { :root { --gouttiere: 24px; } }
@media (min-width: 960px) { :root { --gouttiere: 32px; --hauteur-entete: 72px; --respiration: 96px; } }
@media (min-width: 1200px) { :root { --respiration: 120px; } }

/* ---- Base ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--hauteur-entete) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { min-height: 100vh; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; color: var(--encre); }
h1 { font-size: var(--texte-hero); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: var(--texte-h2); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-size: var(--texte-h3); line-height: 1.2; letter-spacing: 0; }
a { color: var(--terracotta); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
strong { font-weight: 600; }
summary { cursor: pointer; }
[hidden] { display: none !important; }

.icone { width: 20px; height: 20px; flex: none; fill: currentColor; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 20px; border-radius: var(--rayon-pilule);
  background: var(--surface); color: var(--encre); font-weight: 600; text-decoration: none;
  box-shadow: var(--ombre-flottante);
}
.lien-evitement:focus { top: 12px; }

/* ---- Mise en page ---------------------------------------------------------------------------- */
.contenu { width: min(100% - 2 * var(--gouttiere), var(--largeur-contenu)); margin-inline: auto; }
.section { padding-block: var(--respiration); }
.section--sans-haut { padding-top: 0; }
.section--alt { background: var(--surface-alt); }
.section--surface { background: var(--surface); }

.entete-section { max-width: 760px; margin-bottom: 40px; }
.entete-section--centre { margin-inline: auto; text-align: center; }
.entete-section h2 + .chapo { margin-top: 16px; }
@media (min-width: 960px) { .entete-section { margin-bottom: 56px; } }

/* ---- Texte ----------------------------------------------------------------------------------- */
.surtitre {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: var(--texte-surtitre); line-height: 16px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-douce);
}
.surtitre--terracotta { color: var(--terracotta); }
.entete-section--centre .surtitre { justify-content: center; }
.entete-section--centre .chapo { margin-inline: auto; }
.surtitre .icone { width: 16px; height: 16px; }
.chapo { font-size: var(--texte-chapo); line-height: 1.55; color: var(--encre-douce); max-width: var(--largeur-texte); }
.detail { font-size: var(--texte-detail); line-height: 20px; color: var(--encre-douce); }
.titre-carte { font-family: var(--police-ui); font-size: var(--texte-titre-carte); line-height: 28px; font-weight: 600; letter-spacing: 0; }

/* ---- Boutons --------------------------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--hauteur-bouton); padding: 0 28px;
  border: 1px solid transparent; border-radius: var(--rayon-pilule);
  font-family: var(--police-ui); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--duree-courte) var(--courbe-sortie),
              box-shadow var(--duree-courte) var(--courbe-sortie),
              border-color var(--duree-courte) var(--courbe-sortie),
              transform var(--duree-courte) var(--courbe-sortie);
}
.bouton:active { transform: scale(0.98); }
.bouton--grand { min-height: var(--hauteur-bouton-grand); }
.bouton--plein { background: var(--terracotta); color: var(--terracotta-contraste); }
.bouton--plein:hover { background: color-mix(in srgb, var(--terracotta) 92%, black); box-shadow: var(--ombre-survol); }
.bouton--contour { background: transparent; color: var(--encre); border-color: var(--contour); }
.bouton--contour:hover { background: color-mix(in srgb, var(--encre) 5%, transparent); border-color: var(--encre-douce); }
.bouton--encre { background: var(--encre); color: var(--fond); }
.bouton--encre:hover { background: color-mix(in srgb, var(--encre) 88%, var(--fond)); box-shadow: var(--ombre-survol); }
/* Sur le dégradé Aube */
.bouton--blanc { background: var(--aube-texte); color: var(--aube-milieu); }
.bouton--blanc:hover { background: color-mix(in srgb, var(--aube-texte) 90%, var(--aube-debut)); box-shadow: 0 4px 16px #00000029; }
.aube :focus-visible { box-shadow: 0 0 0 2px var(--aube-debut), 0 0 0 4px var(--aube-texte); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  color: var(--terracotta); font-weight: 600; text-decoration: none;
}
.lien-fleche:hover { text-decoration: underline; }
.lien-fleche .icone { transition: transform var(--duree-courte) var(--courbe-sortie); }
.lien-fleche:hover .icone { transform: translateX(4px); }
.aube .lien-fleche { color: var(--aube-texte); }

/* CTA adapté à l'appareil : une variante par plateforme, une seule visible (voir js/plateforme.js) */
.selon-appareil > [data-pour] { display: none; }
html:not([data-cta]) .selon-appareil > [data-pour="autre"],
html[data-cta="autre"] .selon-appareil > [data-pour="autre"],
html[data-cta="windows"] .selon-appareil > [data-pour="windows"],
html[data-cta="android"] .selon-appareil > [data-pour="android"] { display: inline-flex; }
p.selon-appareil > [data-pour] { display: none; }
html:not([data-cta]) p.selon-appareil > [data-pour="autre"],
html[data-cta="autre"] p.selon-appareil > [data-pour="autre"],
html[data-cta="windows"] p.selon-appareil > [data-pour="windows"],
html[data-cta="android"] p.selon-appareil > [data-pour="android"] { display: inline; }

/* ---- Pastilles ------------------------------------------------------------------------------- */
.pastille {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 4px 10px;
  border-radius: var(--rayon-pilule); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap;
}
.pastille .icone { width: 14px; height: 14px; }
.pastille--sauge { background: var(--sauge-doux); color: var(--sauge-encre); }
.pastille--ardoise { background: var(--ardoise-doux); color: var(--ardoise-encre); }
.pastille--terracotta { background: var(--terracotta-doux); color: var(--terracotta-encre); }
.pastille--ambre { background: var(--ambre-doux); color: var(--ambre-encre); }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Cartes, icônes, listes ------------------------------------------------------------------ */
.carte {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 24px;
  transition: box-shadow var(--duree-courte) var(--courbe-sortie);
}
@media (min-width: 960px) { .carte { padding: 32px; } }
@media (hover: hover) and (min-width: 960px) { .carte--survol:hover { box-shadow: var(--ombre-survol); } }
.disque {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 50%; background: var(--terracotta-doux); color: var(--terracotta);
}
.disque .icone { width: 24px; height: 24px; }

.avantages { display: grid; gap: 12px; }
.avantages li { display: flex; gap: 12px; align-items: flex-start; }
.coche {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: 4px;
  border-radius: 50%; background: var(--sauge-doux); color: var(--sauge-encre);
}
.coche .icone { width: 12px; height: 12px; }
.croix { display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--encre-discrete); }
.croix .icone { width: 16px; height: 16px; }

/* ---- Cadres d'appareils ---------------------------------------------------------------------- */
.fenetre {
  overflow: hidden; background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon-champ); box-shadow: var(--ombre-appareil);
}
.fenetre__barre {
  display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 0 0 14px;
  border-bottom: 1px solid var(--trait); font-size: 12px; font-weight: 500; color: var(--encre-douce);
}
.fenetre__commandes { display: flex; height: 100%; }
.fenetre__commandes .icone { width: 10px; height: 10px; margin: auto 17px; }
.fenetre img { width: 100%; aspect-ratio: 16 / 10; }

.telephone {
  position: relative; width: 260px; padding: 10px; flex: none;
  background: var(--cadre-telephone); border-radius: 44px; box-shadow: var(--ombre-appareil);
}
.telephone__ecran {
  position: relative; overflow: hidden; padding-top: 11%;
  border-radius: 34px; background: var(--fond);
}
.telephone--clair .telephone__ecran { background: var(--ecran-clair); }
.telephone--sombre .telephone__ecran { background: var(--ecran-sombre); }
.telephone__ecran::before { /* île */
  content: ""; position: absolute; z-index: 1; top: 2.2%; left: 50%; transform: translateX(-50%);
  width: 26%; aspect-ratio: 96 / 28; height: auto; border-radius: var(--rayon-pilule); background: var(--cadre-telephone);
}
.telephone__ecran > img, .telephone__ecran > picture img { width: 100%; aspect-ratio: 390 / 844; }

/* Recadrage d'une capture sur une zone (sans retouche) : --x, --y, --l, --h en fractions de l'image */
.recadrage { position: relative; overflow: hidden; }
.recadrage img {
  position: absolute; max-width: none; height: auto;
  width: calc(100% / var(--l)); left: calc(-100% * var(--x) / var(--l)); top: calc(-100% * var(--y) / var(--h));
}

/* ---- Dégradé Aube ---------------------------------------------------------------------------- */
.aube {
  position: relative; isolation: isolate; background: var(--aube); color: var(--aube-texte);
  border-radius: var(--rayon-fenetre);
}
.aube h2, .aube h3, .aube p { color: var(--aube-texte); }
.aube__deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.aube__deco::before { /* halo */
  content: ""; position: absolute; width: 420px; height: 420px; top: -120px; right: -140px;
  border-radius: 50%; background: radial-gradient(closest-side, var(--aube-halo), transparent);
}
.aube__deco::after { /* galet */
  content: ""; position: absolute; width: 360px; height: 360px; left: -80px; bottom: -160px;
  border-radius: 50%; background: var(--aube-debut); opacity: 0.55;
}

/* ---- En-tête --------------------------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 50; height: var(--hauteur-entete);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duree-moyenne) var(--courbe-sortie);
}
.entete--defile { border-bottom-color: var(--trait); }
.entete .contenu { display: flex; align-items: center; height: 100%; gap: 16px; }
.logo { display: inline-flex; align-items: center; min-height: 48px; margin-right: auto; border-radius: var(--rayon-bloc); }
.logo img { height: 28px; width: auto; }
@media (min-width: 960px) { .logo img { height: 32px; } }
.nav-principale { display: none; }
@media (min-width: 960px) {
  .nav-principale { display: flex; gap: 8px; margin-right: 16px; }
  .nav-principale a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--rayon-pilule);
    color: var(--encre); font-size: 16px; font-weight: 500; text-decoration: none;
  }
  .nav-principale a:hover { color: var(--terracotta); }
  .nav-principale a[aria-current="true"] { color: var(--terracotta); }
}
.entete .bouton { min-height: 44px; padding: 0 20px; }
@media (max-width: 399px) { .entete .bouton { padding: 0 16px; } .entete .bouton .icone { display: none; } }
.bouton-menu {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -6px; padding: 0;
  border: 0; border-radius: var(--rayon-pilule); background: transparent; color: var(--encre); cursor: pointer;
}
.bouton-menu .icone { width: 24px; height: 24px; }
@media (min-width: 960px) { .bouton-menu { display: none; } }

/* Menu mobile plein écran */
.menu-mobile {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--surface); color: var(--encre);
}
.menu-mobile[open] { display: flex; flex-direction: column; }
.menu-mobile::backdrop { background: var(--voile); }
.menu-mobile__haut { display: flex; align-items: center; justify-content: space-between; height: var(--hauteur-entete); padding: 0 var(--gouttiere); }
.menu-mobile__haut img { height: 28px; width: auto; }
.menu-mobile nav { flex: 1; padding: 24px var(--gouttiere); }
.menu-mobile nav ul { display: grid; gap: 4px; }
.menu-mobile nav a {
  display: flex; align-items: center; min-height: 56px; color: var(--encre); text-decoration: none;
  font-family: var(--police-titre); font-size: 28px; font-weight: 500;
}
.menu-mobile__bas { padding: 16px var(--gouttiere) calc(24px + env(safe-area-inset-bottom)); }
.menu-mobile__bas .bouton { width: 100%; }

/* ---- 1. Hero --------------------------------------------------------------------------------- */
.hero { padding-block: 32px 64px; }
.hero .contenu { display: grid; gap: 40px; }
.hero h1 .court { display: none; }
@media (max-width: 559px) { .hero h1 .long { display: none; } .hero h1 .court { display: inline; } }
.hero .chapo { margin-top: 20px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__actions .selon-appareil { flex: 1 1 100%; }
.hero__actions .selon-appareil > .bouton { width: 100%; }
.hero__actions > .bouton--contour { flex: 1 1 100%; }
@media (min-width: 560px) {
  .hero__actions .selon-appareil, .hero__actions > .bouton--contour { flex: 0 0 auto; }
  .hero__actions .selon-appareil > .bouton { width: auto; }
}
.hero__meta { margin-top: 12px; }
.hero__meta a { color: var(--encre-douce); }
.hero__meta a:hover { color: var(--terracotta); }
.hero .pastilles { margin-top: 24px; }

.hero__visuel { position: relative; }
.hero__panneau { overflow: hidden; height: 440px; }
.hero__panneau .fenetre { position: absolute; top: 32px; left: 24px; width: 640px; opacity: 0.92; }
.hero__panneau .telephone { position: absolute; left: 50%; transform: translateX(-50%); top: 72px; width: 236px; }
@media (min-width: 720px) {
  .hero__panneau { height: 520px; }
  .hero__panneau .fenetre { width: 760px; left: 32px; top: 40px; }
  .hero__panneau .telephone { left: auto; right: 48px; transform: none; top: 96px; width: 248px; }
}
@media (min-width: 960px) {
  .hero { padding-block: 48px 72px; }
  .hero .contenu { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
  .hero h1 { font-size: clamp(2.5rem, 1.2rem + 2.9vw, 4rem); }
  .hero__visuel { padding-bottom: 56px; }
  .hero__panneau { overflow: visible; height: auto; padding: 40px 15% 72px 40px; }
  .hero__panneau .fenetre { position: relative; top: auto; left: auto; width: 100%; opacity: 1; }
  .hero__panneau .telephone { top: auto; right: 0; bottom: -56px; width: 30%; max-width: 230px; }
}
@media (min-width: 1200px) { .hero__panneau .telephone { right: -16px; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__panneau .telephone { animation: hero-telephone 600ms var(--courbe-sortie) 200ms both; }
}
@keyframes hero-telephone { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

/* ---- 2. Réassurance -------------------------------------------------------------------------- */
.reassurance { padding-block: 8px 24px; }
.reassurance ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: 4px 0;
  font-size: 15px; line-height: 1.4; color: var(--encre-douce);
}
.reassurance li { display: flex; align-items: flex-start; gap: 8px; }
.reassurance li:last-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .reassurance ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reassurance li:last-child { grid-column: auto; } }
.reassurance .icone { color: var(--terracotta); }
@media (min-width: 960px) {
  .reassurance ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
}

/* ---- 3. Avant / avec -------------------------------------------------------------------------- */
.comparaison { display: grid; gap: 16px; }
@media (min-width: 720px) { .comparaison { grid-template-columns: 1fr 1fr; gap: 24px; } }
.comparaison .titre-carte { margin-bottom: 20px; }
.comparaison .carte--sans { color: var(--encre-douce); }
.comparaison .carte--avec { border-top: 3px solid var(--terracotta); }

/* ---- 4. Fonctionnalités ---------------------------------------------------------------------- */
.fonctionnalite { display: grid; gap: 40px; align-items: center; }
.fonctionnalite + .fonctionnalite, .fonctionnalite + .cta-lien + .fonctionnalite { margin-top: var(--respiration); }
.fonctionnalite h3 { margin-bottom: 16px; }
.fonctionnalite .chapo { font-size: var(--texte-corps); line-height: 1.6; }
.fonctionnalite .avantages { margin-top: 24px; }
.fonctionnalite__mention { margin-top: 20px; }
.fonctionnalite__visuel { position: relative; min-width: 0; }
@media (min-width: 960px) {
  .fonctionnalite { grid-template-columns: 5fr 7fr; gap: 64px; }
  .fonctionnalite--inverse { grid-template-columns: 7fr 5fr; }
  .fonctionnalite--inverse .fonctionnalite__texte { order: 2; }
}
.legende-couleurs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.legende-couleurs .pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* 4.2 : téléphone + notification */
.visuel-telephone { display: flex; justify-content: center; padding-top: 48px; }
.notification {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 12px; align-items: center; width: min(360px, 100%); padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte); box-shadow: var(--ombre-flottante);
}
.notification .disque { width: 40px; height: 40px; }
.notification .disque .icone { width: 20px; height: 20px; }
.notification strong { display: block; font-size: 15px; line-height: 20px; color: var(--encre); }
.notification span { display: block; font-size: 14px; line-height: 20px; color: var(--encre-douce); }
@media (min-width: 960px) { .notification { left: 4%; transform: none; top: 24px; } }

/* 4.3 : loupe sur la fiche client */
.visuel-loupe { padding-bottom: 72px; }
.loupe {
  position: absolute; right: -4px; bottom: 0; width: 46%; max-width: 280px;
  border: 1px solid var(--trait); border-radius: var(--rayon-carte); background: var(--ecran-clair);
  box-shadow: var(--ombre-flottante); aspect-ratio: 648 / 828;
}
@media (min-width: 1200px) { .loupe { right: -32px; } }

/* 4.4 : rappels */
.visuel-rappels { position: relative; padding: 0 0 24px; }
.visuel-rappels .fenetre { width: 88%; margin-left: auto; }
.visuel-rappels .telephone { position: absolute; left: 0; bottom: 0; width: 46%; max-width: 270px; min-width: 200px; }
.ecran-sms { background: var(--surface); padding-top: 14%; aspect-ratio: 390 / 760; display: flex; flex-direction: column; }
.ecran-sms__entete {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 12px 12px;
  border-bottom: 1px solid var(--trait); font-size: 13px; font-weight: 600; color: var(--encre);
}
.avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ambre-doux); color: var(--ambre-encre); font-size: 13px; font-weight: 600;
}
.ecran-sms ol { display: grid; gap: 10px; padding: 12px 10px; }
.bulle {
  padding: 8px 11px; max-width: 92%; background: var(--surface-alt); color: var(--encre);
  border-radius: 18px 18px 18px 6px; font-size: 12px; line-height: 1.4;
}
.bulle time { display: block; margin-top: 4px; font-size: 11px; color: var(--encre-douce); }
@media (min-width: 720px) { .bulle { font-size: 13px; } }
@media (max-width: 559px) {
  .visuel-rappels { display: grid; gap: 24px; justify-items: center; }
  .visuel-rappels .fenetre { width: 100%; }
  .visuel-rappels .telephone { position: relative; width: 260px; }
}
.frise { display: grid; gap: 0; margin-top: 32px; margin-bottom: var(--respiration); }
.frise li { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--encre-douce); }
.frise li::before {
  content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--terracotta);
}
.frise li:first-child::before { background: var(--terracotta); }
.frise li + li::after {
  content: ""; position: absolute; left: 5px; top: -12px; height: 24px; border-left: 2px dotted var(--contour);
}
@media (min-width: 960px) {
  .frise { grid-template-columns: repeat(5, 1fr); margin-top: 48px; }
  .frise li { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 12px 0 0; }
  .frise li + li::after { left: -100%; right: auto; top: 5px; width: calc(100% - 16px); height: 0; margin-left: 14px; border-left: 0; border-top: 2px dotted var(--contour); }
}
.note-visuel { margin-top: 16px; }

/* 4.5 : encaissement */
.visuel-encaissement { padding-bottom: 64px; }
.vignette-encaissement {
  position: absolute; left: -8px; bottom: 0; width: 38%; max-width: 230px; aspect-ratio: 962 / 1066;
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-flottante); border: 1px solid var(--trait); background: var(--surface);
}
.compteur {
  position: absolute; right: 8px; bottom: 16px; z-index: 2; font-size: 14px; min-height: 36px; padding: 6px 14px;
  box-shadow: var(--ombre-flottante);
}
.compteur .icone { width: 18px; height: 18px; }
@media (min-width: 1200px) { .vignette-encaissement { left: -32px; } }

/* 4.6 : campagnes */
.ciblages { margin-top: 24px; }
.ciblages .pastille { font-size: 13px; min-height: 32px; padding: 6px 14px; }

.cta-lien { display: flex; justify-content: center; margin-top: var(--respiration); }

/* ---- 5. Bandeau Aube ------------------------------------------------------------------------- */
.bandeau-aube { display: grid; gap: 28px; padding: 48px 24px; overflow: hidden; }
.bandeau-aube p { margin-top: 12px; opacity: 0.92; max-width: 620px; }
.bandeau-aube .bouton { justify-self: start; }
@media (min-width: 720px) { .bandeau-aube { padding: 56px 48px; } }
@media (min-width: 960px) {
  .bandeau-aube { grid-template-columns: 1fr auto; align-items: center; padding: 64px; gap: 48px; }
}

/* ---- 6. Et aussi ----------------------------------------------------------------------------- */
.grille { display: grid; gap: 16px; }
@media (min-width: 720px) { .grille { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } }
.carte-fonction { display: flex; flex-direction: column; gap: 16px; }
.carte-fonction p { color: var(--encre-douce); }
.vignette {
  aspect-ratio: 16 / 9; border-radius: var(--rayon-champ); border: 1px solid var(--trait);
  background: var(--ecran-clair); margin-top: auto;
}

/* ---- 7. Appareils ---------------------------------------------------------------------------- */
.appareils { display: grid; gap: 32px; justify-items: center; }
.appareils .fenetre { width: 100%; }
.appareils__lien { display: flex; align-items: center; gap: 12px; color: var(--encre-douce); font-size: 15px; }
.appareils__lien::before, .appareils__lien::after { content: ""; width: 40px; border-top: 2px dotted var(--contour); }
.appareils .telephone { width: 240px; }
@media (min-width: 960px) {
  .appareils { grid-template-columns: 1fr auto 260px; align-items: center; gap: 24px; }
  .appareils .telephone { width: 260px; }
  .appareils__lien { flex-direction: column; text-align: center; max-width: 120px; }
  .appareils__lien::before, .appareils__lien::after { width: 0; height: 40px; border-top: 0; border-left: 2px dotted var(--contour); }
}
.apercu .apercu-sombre { display: none; }
.apercu[data-apercu="sombre"] .apercu-sombre { display: block; }
.apercu[data-apercu="sombre"] .apercu-clair { display: none; }
.apercu .telephone .apercu-sombre { background: var(--ecran-sombre); }
.apercu[data-apercu="sombre"] .telephone .telephone__ecran { background: var(--ecran-sombre); }
.apercu:not([data-apercu="sombre"]) .telephone .telephone__ecran { background: var(--ecran-clair); }
.bascule-zone { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; text-align: center; }
.segmente {
  display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--rayon-pilule);
  background: var(--surface-alt); border: 1px solid var(--trait);
}
.segmente button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0;
  border-radius: var(--rayon-pilule); background: transparent; color: var(--encre-douce); font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background-color var(--duree-moyenne) var(--courbe-sortie), color var(--duree-moyenne) var(--courbe-sortie);
}
.segmente button[aria-checked="true"], .segmente button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-survol); }
.segmente .pastille { margin-left: 2px; }
html:not(.js) .segmente, html:not(.js) .bascule-zone { display: none; }

/* ---- 8. Démarrer ----------------------------------------------------------------------------- */
.etapes { display: grid; gap: 16px; counter-reset: etape; }
@media (min-width: 960px) { .etapes { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.etape { display: flex; flex-direction: column; gap: 14px; }
.etape__numero {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--terracotta-doux); color: var(--terracotta-encre); font-family: var(--police-titre); font-size: 20px; font-weight: 500;
}
.etape p { color: var(--encre-douce); }
.etape .vignette { margin-top: 8px; }
.etape__icone { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-top: 8px; border-radius: var(--rayon-champ); background: var(--surface-alt); color: var(--terracotta); }
.etape__icone .icone { width: 48px; height: 48px; }
.centre-actions { display: flex; justify-content: center; margin-top: 40px; }

/* ---- 9. Tarifs ------------------------------------------------------------------------------- */
.tarifs__bascule { display: flex; justify-content: center; margin-bottom: 32px; }
.formules { display: grid; gap: 16px; max-width: 920px; margin-inline: auto; }
@media (min-width: 840px) { .formules { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } }
.formule { display: flex; flex-direction: column; gap: 20px; }
.formule__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.formule h3 { font-family: var(--police-titre); }
.formule__pour { color: var(--encre-douce); margin-top: 4px; }
.formule--equipe { border-color: var(--terracotta); }
.prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.prix__montant { font-family: var(--police-titre); font-size: clamp(3rem, 2.6rem + 1vw, 3.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.01em; color: var(--encre); }
.prix__unite { color: var(--encre-douce); }
.prix__suite { color: var(--encre-douce); font-size: 15px; margin-top: -8px; }
.prix-zone { min-height: 96px; transition: opacity var(--duree-moyenne) var(--courbe-sortie); }
.prix-zone.change { opacity: 0; }
.formule .avantages { margin-top: 4px; }
.formule .bouton { margin-top: auto; width: 100%; }
.calculateur {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 16px; border-radius: var(--rayon-champ); background: var(--surface-alt);
}
.calculateur__libelle { font-size: 15px; font-weight: 600; }
.calculateur__commandes { display: flex; align-items: center; gap: 4px; }
.calculateur button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--contour);
  border-radius: 50%; background: var(--surface); color: var(--encre); cursor: pointer;
}
.calculateur button:disabled { opacity: 0.45; cursor: not-allowed; }
.calculateur__nombre { min-width: 36px; text-align: center; font-weight: 600; font-size: 18px; }
.calculateur__resultat { flex: 1 1 100%; font-size: 15px; color: var(--encre-douce); }
.calculateur__plus { flex: 1 1 100%; font-size: 14px; color: var(--encre-douce); }
.tarifs__mentions { margin: 32px auto 0; max-width: 760px; text-align: center; }

/* ---- 10. Histoire ---------------------------------------------------------------------------- */
.histoire { display: grid; gap: 48px; align-items: center; }
.histoire p { max-width: var(--largeur-texte); }
.histoire .texte-courant { font-size: 19px; line-height: 1.6; margin-top: 24px; color: var(--encre); }
.citation { position: relative; margin-top: 32px; padding-top: 40px; }
.citation::before {
  content: "«"; position: absolute; top: -32px; left: -6px; font-family: var(--police-titre); font-size: 96px; line-height: 1; color: var(--terracotta-doux);
}
.citation blockquote p { font-family: var(--police-titre); font-size: var(--texte-h3); line-height: 1.35; }
.citation figcaption { margin-top: 12px; color: var(--encre-douce); font-size: 15px; }
.histoire__visuel { display: flex; justify-content: center; }
@media (min-width: 960px) { .histoire { grid-template-columns: 7fr 5fr; gap: 64px; } }

/* ---- 11. Téléchargement ---------------------------------------------------------------------- */
.plateformes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .plateformes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plateformes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.plateforme { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.plateforme__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plateforme__tete .icone { width: 32px; height: 32px; color: var(--encre); }
.plateforme :is(h2, h3) { font-family: var(--police-ui); font-size: 20px; line-height: 28px; font-weight: 600; }
.plateforme__sous-titre { color: var(--encre-douce); font-size: 15px; line-height: 22px; }
.plateforme__meta { font-size: 14px; color: var(--encre-douce); min-height: 20px; }
.plateforme .bouton { width: 100%; margin-top: auto; white-space: normal; }
.plateforme .pastille { white-space: normal; }
.plateforme__recommande { display: none; }
.plateforme--bientot { background: var(--surface-alt); color: var(--encre-douce); }
.plateforme--bientot .plateforme__tete .icone { color: var(--encre-douce); }
.plateforme--bientot :is(h2, h3) { color: var(--encre-douce); }
.plateforme details { font-size: 15px; }
.plateforme summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--terracotta); font-weight: 600; }
.plateforme details ol { margin-top: 8px; padding-left: 20px; list-style: decimal; display: grid; gap: 8px; color: var(--encre); }
.qr { display: none; }
@media (min-width: 960px) {
  html:not([data-plateforme="android"]):not([data-plateforme="ios"]) .qr { display: flex; align-items: center; gap: 14px; }
  .qr img { width: 152px; height: 152px; flex: none; padding: 12px; background: var(--qr-fond); border-radius: var(--rayon-champ); border: 1px solid var(--trait); }
  .qr p { font-size: 14px; line-height: 20px; color: var(--encre-douce); }
  @media (min-width: 1100px) { .qr { flex-direction: column; align-items: flex-start; } .qr img { width: 140px; height: 140px; } }
}
/* Ordre et mise en avant selon l'appareil (le DOM est aussi réordonné par site.js) */
html[data-plateforme="windows"] .plateforme[data-plateforme="windows"],
html[data-plateforme="android"] .plateforme[data-plateforme="android"],
html[data-plateforme="ios"] .plateforme[data-plateforme="ios"],
html[data-plateforme="mac"] .plateforme[data-plateforme="mac"] { order: -1; }
html[data-plateforme="windows"] .plateforme[data-plateforme="windows"],
html[data-plateforme="android"] .plateforme[data-plateforme="android"] { border-color: var(--terracotta); }
html[data-plateforme="windows"] .plateforme[data-plateforme="windows"] .plateforme__recommande,
html[data-plateforme="android"] .plateforme[data-plateforme="android"] .plateforme__recommande { display: inline-flex; }
.plateforme--bientot .plateforme__recommande { display: none !important; }
.bouton--desactive { background: var(--surface); color: var(--encre-douce); border-color: var(--trait); cursor: default; }
.bouton--desactive:active { transform: none; }
html[data-plateforme="windows"] .plateforme[data-plateforme="windows"] .bouton--encre,
html[data-plateforme="android"] .plateforme[data-plateforme="android"] .bouton--encre {
  background: var(--terracotta); color: var(--terracotta-contraste);
}
.telechargement__apres { display: grid; gap: 8px; margin-top: 40px; text-align: center; max-width: 720px; margin-inline: auto; }
.telechargement__apres p:first-child { color: var(--encre); }
.telechargement__erreur { margin: 0 auto 24px; max-width: 720px; padding: 14px 18px; border-radius: var(--rayon-champ); background: var(--ambre-doux); color: var(--ambre-encre); display: flex; gap: 10px; align-items: flex-start; }

/* ---- 12. FAQ --------------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; align-items: start; }
@media (min-width: 960px) { .faq { grid-template-columns: 1fr 1fr; gap: 16px 24px; } .faq__colonne { display: grid; gap: 16px; } }
.faq__colonne { display: grid; gap: 12px; }
.question { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte); }
.question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 20px;
  font-weight: 600; font-size: 17px; line-height: 1.4; list-style: none; border-radius: var(--rayon-carte);
}
.question summary::-webkit-details-marker { display: none; }
.question summary .icone { color: var(--terracotta); transition: transform var(--duree-moyenne) var(--courbe-sortie); }
.question[open] summary .icone { transform: rotate(45deg); }
.question p { padding: 0 20px 20px; color: var(--encre-douce); }
.faq__pied { margin-top: 32px; text-align: center; color: var(--encre-douce); }

/* ---- 13. CTA final --------------------------------------------------------------------------- */
.cta-final { overflow: hidden; display: grid; gap: 32px; padding: 48px 24px 0; }
.cta-final p { margin-top: 16px; opacity: 0.92; max-width: 540px; font-size: var(--texte-chapo); line-height: 1.55; }
.cta-final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 32px; }
.cta-final .telephone { justify-self: center; width: 240px; margin-bottom: -180px; }
.cta-final__visuel { height: 300px; display: flex; justify-content: center; }
@media (min-width: 960px) {
  .section-cta-final { padding-top: calc(var(--respiration) + 120px); }
  .cta-final { overflow: visible; grid-template-columns: 1fr 300px; padding: 72px 64px; align-items: center; }
  .cta-final__visuel { position: relative; height: auto; align-self: stretch; }
  .cta-final .telephone { position: absolute; right: 0; bottom: -24px; width: 260px; margin: 0; }
}

/* ---- 14. Pied de page ------------------------------------------------------------------------ */
.pied { background: var(--surface); border-top: 1px solid var(--trait); padding-block: 56px 32px; font-size: 15px; }
.pied__colonnes { display: grid; gap: 32px; }
@media (min-width: 720px) { .pied__colonnes { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.pied__marque p { margin-top: 12px; color: var(--encre-douce); max-width: 280px; }
.pied__marque img { height: 28px; width: auto; }
.pied h2 { font-family: var(--police-ui); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-douce); margin-bottom: 8px; }
.pied ul { display: grid; }
.pied li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre); text-decoration: none; }
.pied li a:hover { color: var(--terracotta); text-decoration: underline; }
.pied__contact { display: inline-flex; min-height: 44px; align-items: center; color: var(--encre-douce); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--trait); color: var(--encre-douce); font-size: 14px; }

/* ---- Barre collante mobile ------------------------------------------------------------------- */
.barre-mobile { display: none; }
@media (max-width: 719px) {
  .barre-mobile {
    display: block; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 12px var(--gouttiere) calc(12px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--trait);
    transform: translateY(110%); transition: transform var(--duree-longue) var(--courbe-sortie);
  }
  .barre-mobile--visible { transform: none; box-shadow: var(--ombre-flottante); }
  .barre-mobile .bouton { width: 100%; }
  .barre-mobile .selon-appareil { display: block; }
  html[data-cta="windows"] .barre-mobile .selon-appareil > [data-pour="autre"] { display: inline-flex; }
}

/* ---- Fenêtre d'aide à l'installation --------------------------------------------------------- */
.aide {
  width: min(560px, 100% - 32px); max-height: min(720px, 100% - 32px); padding: 0; border: 0;
  border-radius: var(--rayon-fenetre); background: var(--surface); color: var(--encre); box-shadow: var(--ombre-flottante);
}
.aide::backdrop { background: var(--voile); }
.aide__corps { padding: 32px 24px 24px; }
@media (min-width: 560px) { .aide__corps { padding: 40px 40px 32px; } }
.aide h2 { font-size: var(--texte-h3); margin-bottom: 8px; }
.aide__fermer {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: var(--encre-douce); cursor: pointer;
}
.aide h3 { font-family: var(--police-ui); font-size: 16px; font-weight: 600; margin: 24px 0 10px; }
.aide ol { display: grid; gap: 10px; padding-left: 22px; list-style: decimal; }
.aide .bouton { margin-top: 28px; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .aide[open], .menu-mobile[open] { animation: apparaitre var(--duree-longue) var(--courbe-sortie); }
}
@keyframes apparaitre { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* ---- Pages simples (légales, 404, téléchargement) -------------------------------------------- */
.page-texte { padding-block: 48px var(--respiration); }
.page-texte .contenu { max-width: var(--largeur-texte); }
.page-texte h1 { font-size: var(--texte-h2); line-height: 1.1; margin-bottom: 12px; }
.page-texte h2 { font-family: var(--police-ui); font-size: 20px; line-height: 28px; font-weight: 600; margin: 40px 0 12px; }
.page-texte h3 { font-family: var(--police-ui); font-size: 17px; line-height: 24px; font-weight: 600; margin: 24px 0 8px; }
.page-texte p, .page-texte ul { margin-bottom: 12px; }
.page-texte ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }
.page-texte .mise-a-jour { color: var(--encre-douce); font-size: 15px; }
.a-completer { background: var(--ambre-doux); color: var(--ambre-encre); border-radius: var(--rayon-bloc); padding: 0 4px; }
.page-404 { min-height: calc(100vh - var(--hauteur-entete) - 200px); display: grid; align-content: center; }
.page-404 .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---- Apparition au défilement (seulement avec JS et sans réduction des animations) ------------ */
@media (prefers-reduced-motion: no-preference) {
  html.js .apparait { opacity: 0; translate: 0 16px; transition: opacity var(--duree-longue) var(--courbe-sortie), translate var(--duree-longue) var(--courbe-sortie); }
  html.js .apparait.visible { opacity: 1; translate: 0 0; }
}