/* Site Lumo (lumis-app.fr), refonte du 29/09/2026.
   Référence : DA-SITE-LUMO.md. Aucune couleur ici : tout vient des jetons. */

/* ── Base ─────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: hidden; }
main:focus { outline: none; }
p { margin: 0; }
ul, ol.demo-etapes { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
svg { flex-shrink: 0; }
picture { display: block; }
picture img { width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

.aller-contenu {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--blanc); color: var(--encre); font-weight: 700;
  padding: 12px 18px; border-radius: var(--r-bouton);
}
.aller-contenu:focus { top: 12px; }

.surtitre {
  display: block; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--turquoise-profond);
}
.surtitre-sombre { color: var(--turquoise); }
.intro { font-size: var(--t-intro); line-height: 1.55; color: var(--encre-2); }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: var(--r-bouton);
  font-family: var(--police-texte); font-size: 16px; font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.bouton-petit { min-height: 44px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
.bouton-grand { min-height: 58px; padding: 0 28px; border-radius: 16px; font-size: 17px; }
.bouton-blanc { background: var(--blanc); color: var(--encre); }
.bouton-blanc:hover { background: var(--turquoise-teinte); color: var(--encre); }
.bouton-encre { background: var(--encre); color: var(--blanc); }
.bouton-encre:hover { background: var(--encre-2); color: var(--blanc); }
.bouton-contour-sombre { background: transparent; color: var(--blanc); border-color: var(--blanc-40); }
.bouton-contour-sombre:hover { background: var(--blanc-8); color: var(--blanc); }
.bouton-contour { background: transparent; color: var(--encre); border-color: var(--filet-fort); }
.bouton-contour:hover { background: var(--surface); color: var(--encre); }

/* ── En-tête (toujours sur fond canard) ──────────────────────────────── */
.entete {
  position: absolute; inset: 0 0 auto 0; z-index: 20; height: 76px;
  display: flex; align-items: center; gap: 24px; padding: 0 var(--marge);
  border-bottom: 1px solid var(--blanc-12);
}
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--blanc); }
.marque:hover { color: var(--blanc); }
.marque img { width: 42px; height: 38px; object-fit: contain; }
.marque span { font-family: var(--police-marque); font-weight: 800; font-size: 23px; letter-spacing: -0.01em; }
.marque-sombre, .marque-sombre:hover { color: var(--encre); }
.entete-nav { display: flex; gap: 36px; margin: 0 auto; }
.entete-nav a { color: var(--lien-sur-sombre); font-size: 15px; font-weight: 500; padding: 10px 0; }
.entete-nav a:hover { color: var(--turquoise); }
.bouton-menu {
  display: none; width: 44px; height: 44px; margin-left: auto; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid var(--blanc-25); background: transparent; color: var(--blanc); cursor: pointer;
}
.bouton-menu span { display: flex; }
.bouton-menu .i-fermer, .bouton-menu[aria-expanded="true"] .i-ouvrir { display: none; }
.bouton-menu[aria-expanded="true"] .i-fermer { display: flex; }
.panneau-menu {
  position: absolute; top: 64px; left: 0; right: 0; z-index: 30;
  background: var(--canard); border-bottom: 1px solid var(--blanc-12); padding: 8px 16px 20px;
}
.panneau-menu nav { display: flex; flex-direction: column; }
.panneau-menu a:not(.bouton) {
  color: var(--blanc); font-size: 18px; font-weight: 600; padding: 14px 4px; border-bottom: 1px solid var(--blanc-12);
}
.panneau-menu .bouton { margin-top: 16px; }

/* ── Haut de page immersif ───────────────────────────────────────────── */
.haut { position: relative; overflow: hidden; background: var(--canard); color: var(--blanc); padding-top: 76px; }
.haut-grille {
  position: relative; max-width: calc(var(--largeur-max) + 2 * var(--marge)); margin: 0 auto;
  padding: 56px var(--marge) 128px;
  display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 64px; align-items: center;
}
.haut-texte { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 28px; }
.pastille-surtitre {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border-radius: var(--r-pastille); background: var(--blanc-8); border: 1px solid var(--blanc-22);
  font-size: 14px; font-weight: 600;
}
.pastille-surtitre i { width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise); }
.haut h1 { font-size: var(--t-h1); line-height: .98; letter-spacing: -0.04em; color: var(--blanc); }
.haut h1 .turquoise { color: var(--turquoise); }
.insecable, .compte-a-rebours, .flottante-ligne strong { white-space: nowrap; }
.haut-intro { max-width: 560px; font-size: 20px; line-height: 1.55; color: var(--texte-sur-sombre); }
.haut-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.haut-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 28px; }
.badge-iphone {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 14px;
  border-radius: 12px; border: 1px solid var(--blanc-45);
}
.badge-iphone div { display: flex; flex-direction: column; gap: 1px; }
.badge-iphone span { font-size: 11px; color: var(--texte-sur-sombre); }
.badge-iphone strong { font-size: 16px; line-height: 1.1; }
.haut-garanties { font-size: 14px; color: var(--texte-sur-sombre); }

/* La scène : téléphone, anneaux, cartes flottantes, mascotte, pièces */
.scene { position: relative; height: 660px; display: flex; align-items: center; justify-content: center; }
.anneaux { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 0; }
.anneaux i { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.anneaux .a1 { width: 1500px; height: 1500px; background: var(--canard-2); }
.anneaux .a2 { width: 1200px; height: 1200px; background: var(--canard-3); }
.anneaux .a3 { width: 920px; height: 920px; background: var(--canard-4); }
.anneaux .a4 { width: 660px; height: 660px; border: 2px solid var(--turquoise); }
.anneaux .a5 { width: 460px; height: 460px; background: var(--canard-5); }
.scene .telephone { position: relative; z-index: 1; }
.scene .ecran { gap: 9px; }
.flottante {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); color: var(--encre); border-radius: 16px; padding: 14px 16px; box-shadow: var(--ombre-flottante);
}
.flottante-payee { left: 28px; top: 108px; width: 214px; }
.flottante-payee .statut { align-self: flex-start; font-size: 11px; }
.flottante-urssaf { right: 24px; bottom: 96px; width: 226px; }
.flottante-ligne { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.flottante-titre { font-size: 14px; font-weight: 600; }
.flottante-montant { font-family: var(--police-titre); font-size: 22px; font-weight: 700; color: var(--vert); }
.flottante-note { font-size: 12.5px; color: var(--encre-2); }
.haut-mascotte { position: absolute; z-index: 3; left: -48px; bottom: -8px; width: 220px; }
.piece { position: absolute; z-index: 2; }
.piece-1 { right: 70px; top: 36px; width: 58px; transform: rotate(-14deg); animation: flotte 5s ease-in-out infinite; }
.piece-2 { right: 20px; top: 96px; width: 34px; transform: rotate(18deg); animation: flotte-2 6s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-8px) rotate(-10deg); } }
@keyframes flotte-2 { 50% { transform: translateY(6px) rotate(24deg); } }

/* Menu gélule */
.gelule {
  position: absolute; z-index: 4; left: 50%; bottom: 32px; transform: translateX(-50%);
  width: 524px; height: 52px; padding: 6px; border-radius: var(--r-pastille); background: var(--turquoise);
  display: flex; align-items: center; gap: 4px;
}
.gelule a { flex-grow: 1; text-align: center; font-size: 14px; font-weight: 600; color: var(--encre); padding: 10px 4px; border-radius: var(--r-pastille); }
.gelule a:hover { color: var(--encre); background: var(--blanc-22); }
.gelule .gelule-maison {
  flex-grow: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--encre); color: var(--turquoise);
}
.gelule .gelule-maison:hover { background: var(--encre-2); color: var(--turquoise); }
.gelule a:focus-visible { outline-color: var(--encre); }

/* ── Maquette de téléphone (HTML et CSS, pas une capture) ────────────── */
.telephone {
  width: 300px; height: 612px; flex-shrink: 0; padding: 10px; border-radius: 48px;
  background: var(--encre); box-shadow: var(--ombre-telephone);
}
.ecran {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 38px;
  background: var(--fond); color: var(--encre); display: flex; flex-direction: column; gap: 10px;
  padding: 46px 14px 0; font-family: var(--police-texte); line-height: 1.3;
}
.ilot { position: absolute; top: 11px; left: 50%; width: 88px; height: 25px; margin-left: -44px; border-radius: 14px; background: var(--encre); }
.ecran-bonjour { display: flex; align-items: center; gap: 9px; }
.ecran-bonjour div { display: flex; flex-direction: column; gap: 1px; }
.ecran-bonjour strong { font-size: 13.5px; }
.ecran-bonjour span:not(.avatar) { font-size: 10.5px; color: var(--encre-3); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--turquoise-teinte); color: var(--turquoise-profond);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.ecran-ca { background: var(--encre); color: var(--blanc); border-radius: 18px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.ecran-ca-haut { display: flex; flex-direction: column; gap: 2px; }
.ecran-ca-haut span, .ecran-ca-grille span { font-size: 10.5px; color: var(--texte-sur-encre); }
.ecran-ca-haut strong { font-family: var(--police-titre); font-size: 28px; letter-spacing: -0.02em; }
.ecran-ca-haut small { font-size: 10px; color: var(--ecran-legende); }
.ecran-ca-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ecran-ca-grille div { background: var(--ecran-carte); border-radius: 10px; padding: 8px 9px; display: flex; flex-direction: column; gap: 2px; }
.ecran-ca-grille span { font-size: 9.5px; }
.ecran-ca-grille strong { font-size: 13px; }
.ecran-bouton {
  min-height: 38px; border-radius: 11px; background: var(--turquoise); color: var(--encre);
  font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ecran-titre { font-family: var(--police-titre); font-size: 22px; font-weight: 700; }
.ecran-titre-liste { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); margin-top: 4px; }
.ecran-titre-retard { color: var(--orange); }
.ecran-ligne { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--surface); border-radius: 12px; }
.ecran-ligne-texte { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ecran-nom { font-size: 12.5px; font-weight: 600; }
.ecran-meta { font-size: 10.5px; color: var(--encre-3); }
.ecran-montant { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ecran-somme { font-size: 12px; font-weight: 700; white-space: nowrap; }
.ecran-segments { display: flex; gap: 4px; padding: 3px; background: var(--ecran-segment); border-radius: 10px; }
.ecran-segments span { flex-grow: 1; text-align: center; font-size: 10.5px; font-weight: 600; padding: 5px 0; border-radius: 8px; color: var(--encre-2); }
.ecran-segments .actif { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-segment); }
.ecran-carte { background: var(--surface); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ecran-carte-haut { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.ecran-pile { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ecran-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ecran-duo div { background: var(--fond); border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 2px; }
.ecran-duo span { font-size: 9.5px; color: var(--encre-3); }
.ecran-duo strong { font-size: 13.5px; }
.ecran-carte .ecran-bouton { min-height: 36px; border-radius: 10px; }
.compte-a-rebours { font-size: 11px; font-weight: 700; background: var(--encre); color: var(--blanc); padding: 3px 8px; border-radius: var(--r-pastille); }
.jauge { height: 8px; border-radius: 99px; background: var(--ecran-segment); overflow: hidden; }
.jauge span { display: block; width: var(--part); height: 100%; border-radius: 99px; background: var(--turquoise-profond); }
.ecran-note { font-size: 11px; line-height: 1.4; color: var(--encre-2); }
.date {
  width: 38px; height: 40px; flex-shrink: 0; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 700;
}
.date strong { font-size: 14px; font-weight: 800; line-height: 1; }
.date-orange { color: var(--orange); background: var(--orange-fond); }
.date-bleu { color: var(--bleu); background: var(--bleu-fond); }
.date-ambre { color: var(--ambre); background: var(--ambre-fond); }
.date-violet { color: var(--violet); background: var(--violet-fond); }
.ecran-onglets {
  margin: auto -14px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 9px 6px 22px; background: var(--surface); border-top: 1px solid var(--filet);
}
.ecran-onglet { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; color: var(--encre-3); }
.ecran-onglet.actif { color: var(--turquoise-profond); font-weight: 700; }

/* Pastilles de statut et étiquettes : toujours un mot, jamais la couleur seule */
.statut { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pastille); }
.statut i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.statut-vert { color: var(--vert); background: var(--vert-fond); }
.statut-bleu { color: var(--bleu); background: var(--bleu-fond); }
.statut-orange { color: var(--orange); background: var(--orange-fond); }
.etiquette { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pastille); white-space: nowrap; }
.flottante .etiquette { font-size: 11px; }
.etiquette-ambre { color: var(--ambre); background: var(--ambre-fond); }
.etiquette-violet { color: var(--violet); background: var(--violet-fond); }

/* ── Bande de preuves ────────────────────────────────────────────────── */
.preuves { max-width: var(--largeur-max); margin: 0 auto; padding: 0 var(--marge); box-sizing: content-box; }
.preuves ul { padding: 36px 0; border-bottom: 1px solid var(--filet); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.preuves li { display: flex; gap: 14px; align-items: flex-start; }
.preuves div { display: flex; flex-direction: column; gap: 3px; }
.preuves strong { font-size: 15px; }
.preuves span:not(.carre-icone) { font-size: 14px; line-height: 1.45; color: var(--encre-2); }
.carre-icone {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--surface); border: 1px solid var(--filet);
  display: flex; align-items: center; justify-content: center; color: var(--turquoise-profond);
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { max-width: var(--largeur-max); margin: 0 auto; padding: var(--section) var(--marge); box-sizing: content-box; }
.section h2, .confiance h2, .appel h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.03em; }
.entete-section { display: flex; flex-direction: column; gap: 20px; margin-bottom: 72px; }
.entete-section h2 { max-width: 860px; }
.entete-section .intro { max-width: 680px; }

/* Au quotidien : blocs alternés */
.fonctions { padding-bottom: 24px; }
.fonction { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; margin-bottom: 96px; }
.fonction:last-child { margin-bottom: 0; }
.fonction-texte { display: flex; flex-direction: column; gap: 22px; padding-right: 24px; }
.fonction-inverse .fonction-texte { order: 2; padding: 0 0 0 24px; }
.fonction-numero { font-size: 14px; font-weight: 700; color: var(--encre-3); }
.fonction h3 { font-size: var(--t-h3); line-height: 1.08; letter-spacing: -0.025em; }
.fonction p { font-size: 18px; line-height: 1.6; color: var(--encre-2); }
.coches { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.coches li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; color: var(--encre-liste); }
.coches svg { margin-top: 2px; color: var(--turquoise-profond); }
.panneau-telephone {
  height: 660px; border-radius: var(--r-panneau); background: var(--surface); border: 1px solid var(--filet);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}

/* Et aussi : le carnet à onglets */
.carnet-entete { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: end; margin-bottom: 56px; }
.carnet-entete > div { display: flex; flex-direction: column; gap: 16px; }
.carnet-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.classeur { display: flex; flex-direction: column; }
.classeur-onglet { align-self: flex-start; padding: 7px 16px 6px; border-radius: 12px 12px 0 0; font-size: 13px; font-weight: 700; }
.classeur-corps {
  flex-grow: 1; min-height: 176px; background: var(--surface); border: 1px solid var(--filet); border-top-width: 3px;
  border-radius: 0 18px 18px 18px; padding: 28px; display: flex; flex-direction: column; gap: 10px;
}
.classeur h3 { font-size: 23px; letter-spacing: -0.015em; line-height: 1.3; }
.classeur p { font-size: 16px; line-height: 1.55; color: var(--encre-2); }
.classeur-turquoise .classeur-onglet { background: var(--turquoise-teinte); color: var(--turquoise-profond); }
.classeur-turquoise .classeur-corps { border-top-color: var(--turquoise-teinte); }
.classeur-bleu .classeur-onglet { background: var(--bleu-fond); color: var(--bleu); }
.classeur-bleu .classeur-corps { border-top-color: var(--bleu-fond); }
.classeur-orange .classeur-onglet { background: var(--orange-fond); color: var(--orange); }
.classeur-orange .classeur-corps { border-top-color: var(--orange-fond); }
.classeur-vert .classeur-onglet { background: var(--vert-fond); color: var(--vert); }
.classeur-vert .classeur-corps { border-top-color: var(--vert-fond); }
.classeur-ambre .classeur-onglet { background: var(--ambre-fond); color: var(--ambre); }
.classeur-ambre .classeur-corps { border-top-color: var(--ambre-fond); }
.classeur-violet .classeur-onglet { background: var(--violet-fond); color: var(--violet); }
.classeur-violet .classeur-corps { border-top-color: var(--violet-fond); }

/* Vos données : fond encre */
.confiance { background: var(--encre); color: var(--fond); }
.confiance-grille {
  max-width: var(--largeur-max); margin: 0 auto; padding: var(--section) var(--marge); box-sizing: content-box;
  display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 80px; align-items: start;
}
.confiance-texte { display: flex; flex-direction: column; gap: 20px; }
.confiance h2 { color: var(--blanc); }
.confiance .intro { color: var(--texte-sur-encre); }
.lien-fleche { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; font-size: 16px; font-weight: 600; color: var(--turquoise); padding: 6px 0; }
.lien-fleche:hover { color: var(--blanc); }
.confiance-mascotte { display: flex; align-items: flex-end; gap: 4px; margin-top: 28px; }
.confiance-mascotte picture:first-child { width: 200px; }
.confiance-mascotte picture:last-child { width: 170px; margin-bottom: 4px; }
.confiance-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.confiance-cartes li {
  min-height: 230px; background: var(--carte-sombre); border: 1px solid var(--filet-sombre); border-radius: 22px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.confiance-cartes h3 { font-size: var(--t-carte); color: var(--blanc); line-height: 1.3; }
.confiance-cartes p { font-size: 16px; line-height: 1.55; color: var(--texte-sur-encre); }
.carre-icone-sombre {
  width: 46px; height: 46px; border-radius: 14px; background: var(--icone-sur-encre); color: var(--turquoise);
  display: flex; align-items: center; justify-content: center;
}

/* Questions : accordéon */
.questions-grille { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 80px; align-items: start; }
.questions-grille > div:first-child { display: flex; flex-direction: column; gap: 20px; }
.questions .intro { font-size: 18px; line-height: 1.6; }
.questions .intro a { font-weight: 600; }
.faq { border-top: 1px solid var(--filet-fort); }
.faq-item { border-bottom: 1px solid var(--filet-fort); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  border-radius: 6px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-question { font-family: var(--police-titre); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.faq-signe {
  position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--filet-fort); background: var(--surface);
}
.faq-signe::before, .faq-signe::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.2px; margin: -1.1px 0 0 -7px;
  background: var(--encre); border-radius: 2px; transition: transform .2s ease;
}
.faq-signe::after { transform: rotate(90deg); }
.faq-item[open] .faq-signe::after { transform: rotate(0deg); }
.faq-item p { padding: 0 60px 28px 0; font-size: 17px; line-height: 1.6; color: var(--encre-2); }

/* Bloc d'appel final */
.appel {
  max-width: var(--largeur-max); margin: 0 auto 40px; box-sizing: border-box;
  width: calc(100% - 2 * var(--marge)); border-radius: 36px; background: var(--turquoise); color: var(--encre);
  padding: 64px 72px; display: flex; align-items: center; gap: 56px;
}
.appel-texte { flex-grow: 1; display: flex; flex-direction: column; gap: 14px; }
.appel h2 { font-size: 52px; color: var(--encre); }
.appel p { font-size: 19px; line-height: 1.5; color: var(--icone-sur-encre); }
.appel .bouton { flex-shrink: 0; }
.appel-mascotte { flex-shrink: 0; width: 224px; }

/* Planches animées : 16 images de 320 × 300 px */
.sprite { background-repeat: no-repeat; }
.sprite-marche-piece {
  width: 224px; height: 210px;
  background-image: url(/img/sprites/marche-piece.png);
  background-image: image-set(url(/img/sprites/marche-piece.webp) type("image/webp"), url(/img/sprites/marche-piece.png) type("image/png"));
  background-size: calc(224px * 16) 210px;
  animation: sprite-224 1.3s steps(16) infinite;
}
@keyframes sprite-224 { from { background-position: 0 0; } to { background-position: calc(-224px * 16) 0; } }
.sprite-secours { display: none; }

.traversee { position: relative; height: 90px; overflow: hidden; }
.sprite-marche {
  position: absolute; left: 0; bottom: -1px; width: 96px; height: 90px;
  background-image: url(/img/sprites/marche.png);
  background-image: image-set(url(/img/sprites/marche.webp) type("image/webp"), url(/img/sprites/marche.png) type("image/png"));
  background-size: calc(96px * 16) 90px;
  animation: sprite-96 1.1s steps(16) infinite, traverse 18s linear infinite;
}
@keyframes sprite-96 { from { background-position: 0 0; } to { background-position: calc(-96px * 16) 0; } }
@keyframes traverse { from { transform: translateX(-120px); } to { transform: translateX(calc(100vw + 20px)); } }

@media (prefers-reduced-motion: reduce) {
  .sprite-marche-piece { display: none; }
  .sprite-secours { display: block; }
  .traversee { display: none; }
}

/* ── Pied de page ─────────────────────────────────────────────────────── */
.pied { background: var(--surface); border-top: 1px solid var(--filet); }
.pied-interieur { max-width: var(--largeur-max); margin: 0 auto; padding: 72px var(--marge) 40px; box-sizing: content-box; }
.pied-haut { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.pied-marque { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.pied-marque p { font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.pied-marque .pied-petit { font-size: 14px; color: var(--encre-3); }
.pied-colonne { display: flex; flex-direction: column; gap: 14px; }
.pied-colonne h2 { font-family: var(--police-texte); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.pied-colonne a { font-size: 15px; font-weight: 500; color: var(--encre-liste); padding: 2px 0; }
.pied-colonne a:hover { color: var(--turquoise-profond); }
.pied-bas {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--filet);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--encre-3);
}

/* ── Tablette : 1100 px et moins ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .entete-nav { gap: 24px; }
  .haut-grille { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-bottom: 136px; }
  .haut-texte { max-width: 720px; }
  .scene { max-width: 600px; width: 100%; margin: 0 auto; }
  .preuves ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fonction { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fonction-inverse .fonction-texte { order: 0; padding: 0; }
  .fonction-texte { padding: 0; }
  .carnet-entete { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .carnet-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confiance-grille { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .questions-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .appel { padding: 48px; gap: 32px; flex-wrap: wrap; }
  .appel h2 { font-size: var(--t-h2); }
  .appel-texte { flex-basis: 300px; }
  .pied-haut { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .entete-nav, .entete-ecrire { display: none; }
  .bouton-menu { display: flex; }
}

/* ── Téléphone : 720 px et moins ─────────────────────────────────────── */
@media (max-width: 720px) {
  .entete { height: 64px; }
  .marque img { width: 38px; height: 34px; }
  .marque span { font-size: 21px; }
  .haut { padding-top: 64px; }
  .haut-grille { padding: 36px var(--marge) 40px; gap: 24px; }
  .haut-texte { gap: 20px; }
  .pastille-surtitre { font-size: 13px; padding: 6px 12px; }
  .haut h1 { line-height: 1; letter-spacing: -0.035em; }
  .haut-intro { font-size: 17px; }
  .haut-boutons { flex-direction: column; }
  .haut-boutons .bouton { width: 100%; min-height: 52px; }
  .haut-badge { flex-direction: column; padding-top: 4px; gap: 10px; }
  .badge-iphone { min-height: 48px; }
  .haut-garanties { font-size: 13px; text-align: center; }
  .scene { height: auto; padding: 24px 0 8px; }
  .anneaux .a1 { width: 900px; height: 900px; }
  .anneaux .a2 { width: 700px; height: 700px; }
  .anneaux .a3 { width: 520px; height: 520px; }
  .anneaux .a4 { width: 430px; height: 430px; }
  .anneaux .a5 { width: 300px; height: 300px; }
  .flottante, .piece-2 { display: none; }
  .haut-mascotte { left: -14px; bottom: -14px; width: 130px; }
  .piece-1 { right: 4px; top: 40px; width: 42px; }
  .gelule { display: none; }
  .telephone { width: 280px; height: 572px; padding: 9px; border-radius: 44px; }
  .ecran { border-radius: 35px; padding: 42px 12px 0; gap: 9px; }
  .ecran-onglets { margin-left: -12px; margin-right: -12px; }
  .scene .ecran-onglets, .meta-date { display: none; }

  .surtitre { font-size: 12.5px; }
  .preuves ul { padding: 32px 0; gap: 20px 16px; }
  .preuves .carre-icone { display: none; }
  .preuves strong { font-size: 14.5px; }
  .preuves span:not(.carre-icone) { font-size: 13.5px; }
  .entete-section { gap: 14px; margin-bottom: 32px; }
  .section h2, .confiance h2 { line-height: 1.08; }
  .fonction { gap: 24px; margin-bottom: 64px; }
  .fonction-texte { gap: 16px; }
  .fonction-numero { font-size: 13px; }
  .fonction h3 { line-height: 1.12; letter-spacing: -0.02em; }
  .fonction p { font-size: 16px; line-height: 1.55; }
  .coches { gap: 10px; }
  .coches li { font-size: 15.5px; gap: 10px; }
  .panneau-telephone { height: auto; padding: 28px 0; border-radius: 28px; }
  .carnet-entete { margin-bottom: 32px; }
  .carnet-grille { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .classeur-onglet { padding: 6px 14px 5px; border-radius: 10px 10px 0 0; font-size: 12px; }
  .classeur-corps { min-height: 0; padding: 20px; gap: 6px; border-radius: 0 16px 16px 16px; }
  .classeur h3 { font-size: 19px; }
  .classeur p { font-size: 14.5px; line-height: 1.5; }
  .confiance-grille { gap: 32px; }
  .confiance-mascotte picture:first-child { width: 150px; }
  .confiance-mascotte picture:last-child { width: 128px; }
  .confiance-cartes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .confiance-cartes li { min-height: 0; padding: 22px; gap: 8px; border-radius: 18px; }
  .confiance-cartes p { font-size: 14.5px; line-height: 1.5; }
  .questions .intro { font-size: 16px; }
  .faq-item summary { padding: 20px 0; gap: 16px; }
  .faq-question { font-size: 17.5px; }
  .faq-signe { width: 32px; height: 32px; }
  .faq-item p { padding: 0 0 22px; font-size: 15.5px; }
  .appel { flex-direction: column; text-align: center; padding: 40px 20px; border-radius: 28px; gap: 20px; }
  .appel-texte { flex-basis: auto; }
  .appel h2 { font-size: 30px; }
  .appel p { font-size: 16px; }
  .appel-mascotte { width: 160px; }
  .sprite-marche-piece { width: 160px; height: 150px; background-size: calc(160px * 16) 150px; animation-name: sprite-160; }
  .appel .bouton { width: 100%; }
  .pied-interieur { padding-top: 48px; }
  .pied-haut { gap: 32px; }
  .pied-bas { margin-top: 40px; flex-direction: column; }
}
@keyframes sprite-160 { from { background-position: 0 0; } to { background-position: calc(-160px * 16) 0; } }

/* ════════════════════════════════════════════════════════════════════
   VIDÉOS (DA 7 bis)
   ════════════════════════════════════════════════════════════════════ */
.lien-video { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 8px; color: var(--blanc); font-size: 16px; font-weight: 600; }
.lien-video:hover { color: var(--turquoise); }
.rond-lecture { width: 38px; height: 38px; border-radius: 50%; background: var(--turquoise); color: var(--encre); display: flex; align-items: center; justify-content: center; }
.bouton-demo {
  align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px 0 8px;
  border-radius: var(--r-pastille); background: var(--surface); border: 1px solid var(--filet-fort);
  font-family: var(--police-texte); font-size: 15px; font-weight: 600; color: var(--encre); cursor: pointer;
}
.bouton-demo:hover { border-color: var(--turquoise-profond); }
.rond-demo { width: 36px; height: 36px; border-radius: 50%; background: var(--encre); color: var(--turquoise); display: flex; align-items: center; justify-content: center; }

/* Section « En vidéo » */
.video-section { padding-bottom: 0; }
.video-section .carnet-entete { margin-bottom: 40px; }

/* Le lecteur (commun au principal et au portrait) */
.lecteur { position: relative; overflow: hidden; background: var(--canard); color: var(--blanc); isolation: isolate; }
.lecteur-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--encre); }
.lecteur-video::cue { color: transparent; background: transparent; }
.lecteur-principal { aspect-ratio: 16 / 9; border-radius: var(--r-panneau); }
.lecteur-principal .lecteur-video { object-fit: cover; }
.lecteur-accroche { position: absolute; inset: 0; z-index: 2; background: var(--canard); overflow: hidden; }
.lecteur.lance .lecteur-accroche { display: none; }
.accroche-anneaux i { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); left: 77%; top: 25%; }
.accroche-anneaux i:nth-child(1) { width: 86%; aspect-ratio: 1; background: var(--canard-2); }
.accroche-anneaux i:nth-child(2) { width: 64%; aspect-ratio: 1; background: var(--canard-3); }
.accroche-anneaux i:nth-child(3) { width: 48%; aspect-ratio: 1; border: 2px solid var(--turquoise); }
.accroche-anneaux i:nth-child(4) { width: 36%; aspect-ratio: 1; background: var(--canard-4); }
.accroche-mascotte { position: absolute; right: 9.4%; top: 15%; width: 23%; }
.accroche-texte { position: absolute; left: 5%; top: 8.9%; width: 48%; display: flex; flex-direction: column; gap: 18px; }
.pastille-duree { font-size: 13px; background: var(--blanc-8); }
.accroche-titre { font-family: var(--police-titre); font-size: 52px; font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; color: var(--blanc); }
.accroche-titre .turquoise { color: var(--turquoise); }
.accroche-phrase { font-size: 18px; line-height: 1.5; color: var(--texte-sur-sombre); }
.accroche-bouton {
  position: absolute; left: 5%; top: 55.5%; min-height: 72px; padding: 0 30px 0 8px; border: 0; border-radius: var(--r-pastille);
  background: var(--turquoise); color: var(--encre); display: flex; align-items: center; gap: 16px; cursor: pointer;
  font-family: var(--police-texte); font-size: 18px; font-weight: 700; box-shadow: 0 0 0 10px var(--halo-turquoise);
}
.accroche-bouton:hover { box-shadow: 0 0 0 14px var(--halo-turquoise); }
.accroche-rond { width: 56px; height: 56px; border-radius: 50%; background: var(--encre); color: var(--turquoise); display: flex; align-items: center; justify-content: center; }

/* Barre de contrôle */
.lecteur-barre {
  position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 24px; min-height: 60px; padding: 0 16px;
  border-radius: 18px; background: var(--voile-barre); display: flex; align-items: center; gap: 16px; color: var(--blanc);
}
.lecteur-barre button { border: 0; background: transparent; color: var(--blanc); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--police-texte); min-width: 44px; min-height: 44px; }
.lecteur-barre button:focus-visible, .lc-progression:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.lc-lecture { width: 40px; height: 40px; min-width: 40px !important; min-height: 40px !important; border-radius: 50%; background: var(--blanc) !important; color: var(--encre) !important; }
.lc-lecture .pau, .lecteur.en-lecture .lc-lecture .tri { display: none; }
.lecteur.en-lecture .lc-lecture .pau { display: block; }
.lc-temps { font-size: 14px; font-weight: 600; color: var(--lien-sur-sombre); white-space: nowrap; }
.lc-progression { position: relative; flex-grow: 1; height: 6px; border-radius: 99px; background: var(--blanc-22); cursor: pointer; }
.lc-progression::before { content: ""; position: absolute; inset: -14px 0; }
.lc-lu { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 99px; background: var(--turquoise); }
.lc-reperes i { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1px; border-radius: 2px; background: var(--blanc); }
.lc-st { height: 32px; min-height: 32px !important; padding: 0 10px; border: 1.5px solid var(--blanc) !important; border-radius: 8px; font-size: 12px; font-weight: 800; }
.lc-st[aria-pressed="true"] { background: var(--turquoise) !important; border-color: var(--turquoise) !important; color: var(--encre) !important; }
.lc-volume .i-muet, .lc-volume[aria-pressed="true"] .i-son { display: none; }
.lc-volume[aria-pressed="true"] .i-muet { display: flex; }
.lecteur-soustitre { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 100px; text-align: center; pointer-events: none; }
.lecteur-soustitre span { display: inline; padding: 4px 8px; border-radius: 6px; background: var(--voile-soustitre); color: var(--blanc); font-size: 15px; line-height: 1.7; font-weight: 500; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lecteur-indispo {
  position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px 22px; border-radius: var(--r-pastille);
  background: var(--blanc); color: var(--encre); font-weight: 700; font-size: 16px; box-shadow: var(--ombre-flottante); white-space: nowrap;
}
.lecteur-principal .lecteur-indispo { top: auto; bottom: 108px; left: auto; right: 24px; transform: none; }
.lecteur-secours { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; gap: 8px; align-items: center; padding: 12px 20px; border-radius: 12px; background: var(--blanc); color: var(--encre); font-weight: 700; }
.lecteur:fullscreen { border-radius: 0; }

/* Cartes de chapitres */
.chapitres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.chapitre {
  width: 100%; text-align: left; font-family: var(--police-texte); cursor: pointer; background: var(--surface); color: var(--encre);
  border: 1px solid var(--filet); border-radius: 18px; padding: 21px 23px; display: flex; align-items: center; gap: 16px;
}
.chapitre.actif { border: 2px solid var(--turquoise-profond); padding: 20px 22px; }
.chapitre:hover { border-color: var(--turquoise-profond); }
.chapitre-numero {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--fond); border: 1px solid var(--filet-fort);
  display: flex; align-items: center; justify-content: center; font-family: var(--police-titre); font-size: 17px; font-weight: 700;
}
.chapitre.actif .chapitre-numero { background: var(--turquoise-profond); border-color: var(--turquoise-profond); color: var(--blanc); }
.chapitre-texte { display: flex; flex-direction: column; gap: 2px; }
.chapitre-texte span { font-size: 13px; color: var(--encre-3); }
.chapitre-texte strong { font-size: 17px; }

/* Fenêtre de démo : un seul <dialog> réutilisé */
.demo {
  width: min(1220px, calc(100vw - 48px)); max-width: none; height: min(780px, calc(100vh - 48px)); max-height: none; padding: 0; border: 0;
  border-radius: 28px; background: var(--surface); color: var(--encre); overflow: hidden; box-shadow: var(--ombre-fenetre);
}
.demo::backdrop { background: var(--voile-fenetre); }
html.fenetre-ouverte { overflow: hidden; }
.demo-grille { height: 100%; display: grid; grid-template-columns: 520px minmax(0, 1fr); }
.demo-video { position: relative; background: var(--canard); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 24px; }
.demo-anneaux i { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); left: 50%; top: 45%; }
.demo-anneaux i:first-child { width: 1040px; height: 1040px; background: var(--canard-2); }
.demo-anneaux i:last-child { width: 740px; height: 740px; border: 2px solid var(--turquoise); }
.lecteur-portrait { width: 360px; max-width: 100%; aspect-ratio: 9 / 16; max-height: 100%; border-radius: 30px; box-shadow: var(--ombre-telephone); }
.lecteur-portrait .lecteur-video { object-fit: cover; }
.lecteur-portrait .lecteur-barre { left: 12px; right: 12px; bottom: 12px; min-height: 52px; padding: 0 10px; gap: 8px; border-radius: 14px; background: var(--voile-soustitre); }
.lecteur-portrait .lc-lecture { width: 34px; height: 34px; min-width: 34px !important; min-height: 34px !important; }
.lecteur-portrait .lc-st { height: 26px; min-height: 26px !important; padding: 0 7px; font-size: 11px; }
.lecteur-portrait .lecteur-soustitre { left: 16px; right: 16px; bottom: 76px; }
.lecteur-portrait .lecteur-soustitre span { font-size: 14px; }
.demo-texte { position: relative; padding: 48px 48px 40px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.demo-fermer {
  position: absolute; right: 24px; top: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filet-fort);
  background: var(--surface); color: var(--encre); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.demo-etiquette { align-self: flex-start; padding: 5px 12px; border-radius: var(--r-pastille); font-size: 13px; font-weight: 700; }
.demo h2 { max-width: 520px; padding-right: 48px; font-size: 38px; line-height: 1.08; letter-spacing: -0.025em; }
.demo-phrase { max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--encre-2); }
.demo-sous-titre { margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.demo-etapes { display: flex; flex-direction: column; gap: 10px; }
.etape {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--filet);
  background: var(--surface); text-align: left; font-family: var(--police-texte); color: var(--encre); cursor: pointer;
}
.etape:hover { border-color: var(--turquoise-profond); }
.etape.actif { border: 2px solid var(--turquoise-profond); padding: 12px 15px; }
.etape-numero { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--fond); border: 1px solid var(--filet-fort); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.etape.actif .etape-numero { background: var(--turquoise-profond); border-color: var(--turquoise-profond); color: var(--blanc); }
.etape-titre { flex-grow: 1; font-size: 16px; font-weight: 600; }
.etape-encours { font-size: 12px; font-weight: 700; color: var(--turquoise-profond); }
.demo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.demo-actions .bouton { font-size: 14px; gap: 8px; }
.pastille-st { padding: 1px 5px; border-radius: 4px; background: var(--encre); color: var(--blanc); font-size: 10px; font-weight: 800; }
.demo-st[aria-pressed="false"] .pastille-st { background: var(--encre-3); }
.demo-transcription-texte { padding: 16px 18px; border-radius: 14px; background: var(--fond); font-size: 15px; line-height: 1.6; color: var(--encre-2); white-space: pre-line; }
.demo-suivante {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 0; border-radius: 16px;
  background: var(--fond); color: var(--encre); font-family: var(--police-texte); text-align: left; cursor: pointer;
}
.demo-suivante:hover { background: var(--turquoise-teinte); }
.demo-suivante > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.demo-suivante-label { font-size: 12.5px; color: var(--encre-3); }
.demo-suivante strong { font-size: 16px; }
.demo-suivante-rond { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--encre); color: var(--blanc); display: flex; align-items: center; justify-content: center; }
.famille-turquoise { background: var(--turquoise-teinte); color: var(--turquoise-profond); }
.famille-ambre { background: var(--ambre-fond); color: var(--ambre); }
.famille-orange { background: var(--orange-fond); color: var(--orange); }
.famille-vert { background: var(--vert-fond); color: var(--vert); }
.famille-bleu { background: var(--bleu-fond); color: var(--bleu); }
.famille-violet { background: var(--violet-fond); color: var(--violet); }

@media (max-width: 1100px) {
  .accroche-titre { font-size: 40px; }
  .accroche-phrase { font-size: 16px; }
  .accroche-texte { width: 60%; gap: 12px; }
  .accroche-bouton { top: auto; bottom: 108px; }
  .chapitres { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .demo-grille { grid-template-columns: 420px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .lecteur-principal { aspect-ratio: auto; height: 560px; }
  .accroche-texte { left: 24px; right: 24px; width: auto; top: 28px; }
  .accroche-mascotte { width: 150px; right: 16px; top: auto; bottom: 170px; }
  .accroche-anneaux i { left: 80%; top: 70%; }
  .accroche-bouton { left: 24px; bottom: 104px; min-height: 60px; font-size: 16px; }
  .accroche-rond { width: 46px; height: 46px; }
  .lc-temps, .lc-volume { display: none !important; }
  .lecteur-barre { left: 12px; right: 12px; bottom: 12px; gap: 10px; padding: 0 10px; }
  .lecteur-principal .lecteur-indispo { bottom: 88px; right: 12px; font-size: 14px; }
  /* Fenêtre de démo : la vidéo prend l'écran, le texte passe dessous */
  .demo { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .demo-grille { display: block; height: 100%; overflow-y: auto; }
  .demo-video { min-height: 100dvh; padding: 0; }
  .lecteur-portrait { width: 100%; height: 100dvh; max-height: none; aspect-ratio: auto; border-radius: 0; }
  .demo-texte { overflow: visible; padding: 32px 16px 40px; }
  .demo-fermer { position: fixed; z-index: 5; right: 16px; top: 16px; }
  .demo h2 { font-size: 28px; padding-right: 0; }
}
@media (max-width: 720px) {
  .lien-video { justify-content: center; }
  .bouton-demo { width: 100%; }
  .accroche-titre { font-size: 30px; }
  .accroche-phrase { font-size: 15px; }
  .pastille-duree { font-size: 12px; }
  .lecteur-principal { border-radius: 24px; height: 520px; }
  .chapitre { padding: 15px 17px; }
  .chapitre.actif { padding: 14px 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES : bande d'en-tête canard, Aide, pages légales, 404
   ════════════════════════════════════════════════════════════════════ */
[aria-current="page"] { color: var(--turquoise) !important; font-weight: 700 !important; }
.panneau-menu [aria-current="page"] { color: var(--turquoise) !important; }
.bande { position: relative; overflow: hidden; background: var(--canard); color: var(--blanc); padding-top: 76px; }
.bande-anneaux i { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); left: calc(100% - 110px); top: 90px; }
.bande-anneaux i:nth-child(1) { width: 700px; height: 700px; background: var(--canard-2); }
.bande-anneaux i:nth-child(2) { width: 500px; height: 500px; border: 2px solid var(--turquoise); }
.bande-anneaux i:nth-child(3) { width: 340px; height: 340px; background: var(--canard-4); }
.bande-texte {
  position: relative; max-width: var(--largeur-max); margin: 0 auto; padding: 72px var(--marge) 88px; box-sizing: content-box;
  display: flex; flex-direction: column; gap: 18px;
}
.bande-texte > * { max-width: 760px; }
.bande h1 { font-size: 68px; line-height: 1; letter-spacing: -0.035em; color: var(--blanc); }
.bande-intro { font-size: 20px; line-height: 1.55; color: var(--texte-sur-sombre); }
.bande .maj { font-size: 16px; }
.bande-mascotte { position: absolute; z-index: 1; right: max(var(--marge), calc((100% - var(--largeur-max)) / 2 + 110px)); top: 112px; width: 210px; }
.bande-avec-mascotte .bande-texte > * { max-width: min(760px, calc(100% - 260px)); }

/* Aide */
.aide-grille { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 64px; align-items: start; padding-top: 72px; padding-bottom: 96px; }
.aide-colonne { display: flex; flex-direction: column; gap: 20px; }
.carte-contact { background: var(--encre); color: var(--blanc); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.carre-turquoise { width: 48px; height: 48px; border-radius: 14px; background: var(--turquoise); color: var(--encre); display: flex; align-items: center; justify-content: center; }
.carte-contact-label { font-size: 15px; line-height: 1.55; color: var(--texte-sur-encre); }
.carte-contact-mail { font-family: var(--police-titre); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--turquoise); overflow-wrap: anywhere; }
.carte-contact-mail:hover { color: var(--blanc); }
.carte-bug { background: var(--surface); border: 1px solid var(--filet); border-radius: 24px; padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.carte-bug h2 { font-family: var(--police-texte); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.carte-bug p { font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.aide-faq { display: flex; flex-direction: column; gap: 16px; }
.aide-faq h2 { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 8px; }
.faq-carte { background: var(--surface); border: 1px solid var(--filet); border-radius: 20px; padding: 26px 28px; display: flex; flex-direction: column; gap: 8px; }
.faq-carte h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.faq-carte p { font-size: 16px; line-height: 1.6; color: var(--encre-2); }
.faq-carte a, .faq-item a { font-weight: 600; }
.guides { padding-top: 0; }
.guides .carnet-entete h2 { font-size: 44px; }
.guides-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.guide { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; text-align: left; font-family: var(--police-texte); color: var(--encre); cursor: pointer; }
.guide-vignette { position: relative; height: 230px; border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 6px; }
.guide:hover .guide-vignette, .guide:focus-visible .guide-vignette { outline: 2px solid var(--turquoise-profond); outline-offset: 2px; }
.guide-image { display: flex; height: var(--h); }
.guide-image picture, .guide-image img { width: auto; height: 100%; }
.guide-etiquette { position: absolute; left: 16px; top: 16px; padding: 4px 10px; border-radius: var(--r-pastille); background: var(--blanc); font-size: 12px; font-weight: 700; }
.guide-rond { position: absolute; left: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; background: var(--encre); color: var(--turquoise); display: flex; align-items: center; justify-content: center; }
.guide-titre { font-family: var(--police-titre); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.guide-meta { font-size: 14px; color: var(--encre-3); }

/* Pages légales : colonne de 760 px, intertitres Bricolage 28 px */
.texte-legal { max-width: 760px; margin: 0 auto; padding: 72px var(--marge) var(--section); box-sizing: content-box; font-size: 17px; line-height: 1.65; color: var(--encre-2); }
.texte-legal h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; color: var(--encre); margin: 48px 0 14px; }
.texte-legal > h2:first-child, .texte-legal > .encadre:first-child + h2 { margin-top: 0; }
.texte-legal h3 { font-size: 20px; color: var(--encre); margin: 28px 0 8px; }
.texte-legal p { margin: 0 0 14px; }
.texte-legal ul, .texte-legal ol { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.texte-legal ol { list-style: decimal; }
.texte-legal li { margin-bottom: 6px; }
.texte-legal strong { color: var(--encre); }
.texte-legal a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.texte-legal .carte { background: var(--surface); border: 1px solid var(--filet); border-radius: 20px; padding: 22px 24px; margin: 16px 0; }
.texte-legal .carte p:last-child, .texte-legal .encadre p:last-child { margin-bottom: 0; }
.texte-legal .encadre { background: var(--turquoise-teinte); border-radius: 20px; padding: 18px 22px; margin: 16px 0 24px; color: var(--encre); }
.texte-legal .chapo { font-size: 19px; }
.texte-legal .defilement { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--filet); border-radius: 16px; background: var(--surface); }
.texte-legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.texte-legal th, .texte-legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--filet); }
.texte-legal tr:last-child td { border-bottom: 0; }
.texte-legal th { color: var(--encre); font-weight: 700; background: var(--fond); }
.texte-legal code, .texte-legal kbd { font-family: var(--police-texte); font-weight: 700; color: var(--encre); background: var(--surface); border: 1px solid var(--filet); border-radius: 6px; padding: 0 6px; }

/* 404 */
.bande-404 { min-height: 70vh; display: flex; align-items: center; }
.page404 { position: relative; max-width: 760px; margin: 0 auto; padding: 72px var(--marge) 96px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.page404-logo { width: 180px; }
.page404 .haut-boutons { justify-content: center; margin-top: 10px; }
.page-404 .traversee { display: none; }

@media (max-width: 1100px) {
  .aide-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .guides-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bande-mascotte { width: 170px; }
}
@media (max-width: 720px) {
  .bande { padding-top: 64px; }
  .bande-texte { padding: 40px var(--marge) 48px; gap: 12px; }
  .bande h1 { font-size: 40px; }
  .bande-intro { font-size: 17px; }
  .bande-anneaux i { left: calc(100% - 20px); top: 40px; }
  .bande-mascotte { position: relative; right: auto; top: auto; width: 130px; margin: 24px auto -8px; }
  .bande-avec-mascotte .bande-texte > * { max-width: none; }
  .bande-avec-mascotte .bande-texte { padding-top: 12px; }
  .aide-grille { padding-top: 40px; padding-bottom: 56px; }
  .carte-contact { padding: 24px; }
  .carte-contact-mail { font-size: 24px; }
  .carte-bug { padding: 22px 24px; }
  .aide-faq h2, .guides .carnet-entete h2 { font-size: 30px; }
  .faq-carte { padding: 20px 22px; }
  .faq-carte h3 { font-size: 18px; }
  .guides-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .guide-vignette { height: 200px; }
  .texte-legal { padding-top: 40px; font-size: 16px; }
  .texte-legal h2 { font-size: 24px; margin-top: 36px; }
  .page404 { padding: 40px var(--marge) 56px; }
  .page404-logo { width: 130px; }
  .page404 .haut-boutons { width: 100%; }
}

/* ── Blocs ajoutés depuis l'administration ─────────────────────────── */
.bloc-titre { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.025em; margin: 32px 0 12px; }
.bloc-texte { font-size: var(--t-intro); line-height: 1.6; color: var(--encre-2); margin: 0 0 16px; max-width: 760px; }
.bloc-bouton { margin: 8px 0 24px; }
.bloc-image { margin: 24px 0; border-radius: var(--r-carte); overflow: hidden; }
.bloc-image img { width: 100%; height: auto; }
.bloc-lecteur { margin: 32px 0; }
.ecran-capture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: inherit; }
.haut .bloc-texte, .bande .bloc-texte, .confiance .bloc-texte { color: var(--texte-sur-sombre); }