/* ==========================================================================
   « Verre et lumière » — habillage du site public (13/10/2026)

   Chargée APRÈS style.css, sur toutes les pages publiques et l'espace membre ;
   l'administration ne la charge pas (elle garde admin.css).

   Principe : style.css pilote tout par des jetons (--color-*, --radius-*,
   --shadow-*). On redéfinit ces jetons ici (clair, sombre, sépia) puis on
   n'ajoute que ce qu'un jeton ne sait pas dire : la barre de menu flottante,
   les dégradés, les arrondis des boutons et des cartes.

   Contrastes mesurés sur blanc :  indigo #4F46E5 = 6,3:1 · foncé #3730A3 = 10,4:1
   · encre #14213D = 15,6:1 · texte doux #4A5876 = 7,2:1 · discret #55647F = 6,0:1.
   ========================================================================== */

:root{
  --color-bg:#F4F7FB;
  --color-bg-alt:#EAF0FB;
  --color-surface:#FFFFFF;
  --color-ink:#14213D;
  --color-ink-soft:#4A5876;
  --color-ink-mute:#55647F;
  --color-primary:#4F46E5;
  --color-primary-dark:#3730A3;
  --color-primary-light:#EEF0FF;
  --color-accent:#4F46E5;
  --color-accent-btn:#4F46E5;
  --color-accent-light:#EEF0FF;
  --color-accent-2:#4F46E5;
  --color-accent-text:#4F46E5;
  --color-accent-2-text:#4F46E5;
  --color-border:#DCE3F2;
  --color-border-strong:#C0CBE0;
  --fonce:#14213D;
  --fonce-bas:#232866;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-xl:28px;
  --shadow-sm:0 1px 2px rgba(30,42,90,.06), 0 4px 14px rgba(30,42,90,.06);
  --shadow-md:0 2px 4px rgba(30,42,90,.05), 0 16px 36px -10px rgba(30,42,90,.16);
  --shadow-lg:0 4px 8px rgba(30,42,90,.05), 0 32px 64px -16px rgba(30,42,90,.28);
  --vl-barre:rgba(255,255,255,.84);
  --vl-barre-bord:rgba(255,255,255,.9);
  --vl-halo:#EAF0FF;
  --vl-degrade:linear-gradient(135deg,#4F46E5,#7C3AED);
  --vl-texte-degrade:linear-gradient(90deg,#4F46E5,#7C3AED 55%,#0E7490);
}
:root[data-theme="sombre"]{
  --color-primary:#A5B4FC;
  --color-primary-dark:#C7D2FE;
  --color-primary-light:#25284A;
  --color-accent:#A5B4FC;
  --color-accent-btn:#A5B4FC;
  --color-accent-light:#25284A;
  --color-accent-2:#A5B4FC;
  --color-accent-text:#A5B4FC;
  --color-accent-2-text:#A5B4FC;
  --vl-barre:rgba(27,27,37,.82);
  --vl-barre-bord:rgba(255,255,255,.10);
  --vl-halo:#1B1B25;
  --vl-degrade:linear-gradient(135deg,#A5B4FC,#C4B5FD);
  --vl-texte-degrade:linear-gradient(90deg,#A5B4FC,#C4B5FD 55%,#67E8F9);
}
:root[data-theme="sepia"]{
  --color-primary-light:#ECE6F5;
  --vl-barre:rgba(251,245,233,.88);
  --vl-barre-bord:rgba(255,255,255,.7);
  --vl-halo:#EFE5D2;
}

body{ background:linear-gradient(180deg,var(--vl-halo) 0,var(--color-bg) 520px) no-repeat, var(--color-bg); }
h1,h2,h3{ letter-spacing:-.025em; }
h2{ font-weight:800; }

/* ---------- Barre de menu flottante ----------
   Le flou est posé sur un pseudo-élément, JAMAIS sur .site-header ni
   .header-inner : un backdrop-filter sur un ancêtre fait de lui le bloc
   conteneur du tiroir mobile (position:fixed) et le casse. */
.site-header{ background:none; border:0; box-shadow:none; padding:10px 12px 0; pointer-events:none; }
/* style.css pose un fond plein sur la barre en thème sombre (spécificité 0,2,0) : on la rattrape à égalité, plus bas dans la cascade. */
:root .site-header, :root[data-theme] .site-header, :root[data-theme] .site-header.is-scrolled{ background:none; box-shadow:none; }
.header-inner{ pointer-events:auto; position:relative; z-index:0; max-width:1180px; padding:.4rem .6rem .4rem 1.35rem; border-radius:999px; border:1px solid var(--vl-barre-bord); box-shadow:0 10px 36px rgba(30,42,90,.14); transition:box-shadow .25s var(--ease-out); }
.header-inner::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--vl-barre); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); }
.site-header.is-scrolled .header-inner{ box-shadow:0 14px 44px rgba(30,42,90,.22); }
:root[data-theme="sombre"] .header-inner{ box-shadow:0 10px 36px rgba(0,0,0,.5); }
.logo{ font-weight:800; letter-spacing:-.02em; }
.logo .dot{ width:14px; height:14px; background:var(--vl-degrade); box-shadow:0 0 0 4px rgba(79,70,229,.14); }
:root[data-theme="sombre"] .logo .dot{ box-shadow:0 0 0 4px rgba(165,180,252,.18); }

.main-nav{ gap:.15rem; }
.main-nav a{ border-radius:999px; padding:0 .8rem; }
.main-nav > a::after, .dropdown-head > a::after{ display:none; }
.main-nav > a:hover, .dropdown-head > a:hover, .dropdown:focus-within .dropdown-head > a{ background:var(--color-primary-light); color:var(--color-primary-dark); }
.main-nav a[aria-current="page"]:not(.nav-cta){ background:var(--color-primary-light); color:var(--color-primary-dark); }
.dropdown-head > a{ padding-right:.3rem; }
.dropdown-toggle{ border-radius:999px; }
.main-nav a.nav-cta{ background:var(--color-ink); color:var(--color-surface); padding:0 1.15rem; margin-left:.4rem; box-shadow:0 6px 16px -6px rgba(20,33,61,.5); }
.main-nav a.nav-cta:hover{ background:var(--color-primary-dark); color:#fff; }
:root[data-theme="sombre"] .main-nav a.nav-cta, :root[data-theme="sombre"] .main-nav a.nav-cta:hover{ background:var(--color-primary); color:#0B1F1E; }
.main-nav .dropdown-panel{ border-radius:20px; padding:.7rem; border-color:transparent; box-shadow:0 28px 64px rgba(30,42,90,.28); margin-top:.7rem; }
:root[data-theme="sombre"] .main-nav .dropdown-panel{ border-color:var(--color-border); box-shadow:0 28px 64px rgba(0,0,0,.6); }
.main-nav .dropdown-panel::before{ top:-.8rem; height:.8rem; }
.dropdown-panel a{ border-radius:12px; }
.dropdown-panel a:hover{ background:var(--color-primary-light); color:var(--color-primary-dark); }
.dropdown-pied a{ color:var(--color-primary-dark); }

.btn-comfort, .btn-icon{ border-color:var(--color-border); background:transparent; }
.btn-comfort:hover, .btn-icon:hover{ background:var(--color-primary-light); }
.lecture-panneau{ border-radius:22px; box-shadow:0 28px 64px rgba(30,42,90,.28); }

@media (max-width:1240px){
  .main-nav{ border-radius:26px 0 0 26px; background:var(--color-surface); }
  .main-nav > a:hover, .dropdown-head:hover{ background:var(--color-primary-light); }
  .main-nav > a.nav-cta{ background:var(--color-ink); color:var(--color-surface); }
  :root[data-theme="sombre"] .main-nav > a.nav-cta{ background:var(--color-primary); color:#0B1F1E; }
  .dropdown-head a:hover{ background:var(--color-primary-light); }
  .dropdown-toggle{ background:var(--color-primary-light); }
}
@media (max-width:560px){
  .site-header{ padding:8px 8px 0; }
  .header-inner{ padding:.3rem .45rem .3rem 1rem; }
  .main-nav{ border-radius:0; }
}
/* Logo, recherche, écoute, lecture et menu doivent tenir dans la pilule à 375 px (ils dépassaient de 25 px). */
@media (max-width:480px){
  .header-inner{ gap:.3rem; }
  .logo{ font-size:1.12rem; gap:.4rem; }
  .header-actions{ gap:.3rem; }
  .btn-icon, .nav-toggle{ width:40px; height:40px; }
  .btn-comfort{ padding:.45rem .7rem; font-size:.82rem; min-height:40px; }
}
@media (max-width:340px){
  .header-inner{ gap:.2rem; padding-left:.8rem; }
  .logo{ font-size:.98rem; gap:.3rem; }
  .logo .dot{ width:11px; height:11px; }
  .header-actions{ gap:.2rem; }
  .btn-icon, .nav-toggle{ width:38px; height:38px; }
  .btn-comfort{ padding:.45rem .5rem; font-size:.78rem; }
}

/* ---------- Boutons ---------- */
.btn{ border-radius:14px; }
:root:not([data-theme="sombre"]) .btn-primary,
:root:not([data-theme="sombre"]) .btn-accent{ background:var(--vl-degrade); box-shadow:0 12px 26px -10px rgba(79,70,229,.6); }
:root:not([data-theme="sombre"]) .btn-primary:hover,
:root:not([data-theme="sombre"]) .btn-accent:hover{ background:var(--color-primary-dark); box-shadow:0 18px 34px -12px rgba(79,70,229,.65); }
:root[data-theme="sombre"] .btn-primary, :root[data-theme="sombre"] .btn-accent{ box-shadow:0 12px 26px -10px rgba(165,180,252,.4); }
.btn-outline{ background:var(--color-surface); border-color:var(--color-border-strong); }
.btn-outline:hover{ background:var(--color-ink); border-color:var(--color-ink); }
/* Sur une bande sombre, le bouton « contour » gardait l'encre foncée : texte invisible (page « Comprendre », bas de page). */
.bg-dark .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.65); }
.bg-dark .btn-outline:hover{ background:#fff; color:#14213D; border-color:#fff; }
.skip-link{ background:var(--color-primary-dark); }
@keyframes pulse-speak{ 0%,100%{ box-shadow:0 0 0 0 rgba(79,70,229,.4); } 50%{ box-shadow:0 0 0 6px rgba(79,70,229,0); } }

/* ---------- Fonds et sections ---------- */
.hero::before{ background:radial-gradient(60% 60% at 50% 0%, rgba(99,102,241,.14), transparent 70%), transparent; }
.hero::after{ display:none; }
/* 14/10/2026 : le haut des fiches, des tests et des pages livres portait encore le réseau de points vert-bleu de l'ancienne charte. */
.type-hero{ background:radial-gradient(70% 90% at 85% 0%, rgba(99,102,241,.16), transparent 65%), radial-gradient(50% 70% at 0% 100%, rgba(6,182,212,.10), transparent 70%), var(--color-bg-alt); }
:root[data-theme="sombre"] .type-hero{ background:radial-gradient(70% 90% at 85% 0%, rgba(165,180,252,.12), transparent 65%), var(--color-bg-alt); }
.hero h1 em, .hv-hero-copy h1 em{ font-style:normal; font-weight:800; color:var(--color-primary); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em, .hv-hero-copy h1 em{ background:var(--vl-texte-degrade); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
}
.hero .eyebrow, .hv-hero-copy .eyebrow{ color:var(--color-primary-dark); }
.hero .eyebrow::before{ color:var(--color-primary); }
.bg-alt{ background:var(--color-bg-alt); }
.bg-dark{ background:linear-gradient(135deg,#14213D 0%,#232866 60%,#0B3A55 100%); }
/* Le texte d'introduction d'une bande sombre reprenait --color-ink-soft, pensé pour un fond clair. */
.bg-dark .section-head p, .bg-dark .lead{ color:#d5d9f0; }

/* ---------- Cartes ---------- */
.card, .product-card, .sidebar-box, .content-block{ border-radius:var(--radius-lg); border-color:var(--color-border); }
.card{ box-shadow:var(--shadow-sm); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--color-primary); }
.card .icon{ background:var(--vl-degrade); border-radius:18px; }
.card .icon svg{ stroke:#fff; }
:root[data-theme="sombre"] .card .icon svg{ stroke:#0B1F1E; }
.testimonial{ border-radius:var(--radius-lg); }
.callout, .tldr-box{ border-radius:18px; }

/* ---------- Accueil ---------- */
.home-v2{
  --hv-clay:#4F46E5;
  --hv-clay-text:#3730A3;
  --hv-clay-tint:#EEF0FF;
  --hv-violet-deep:#1E1B4B;
  --hv-violet-tint:#EEF0FF;
  --hv-shadow:0 36px 80px -34px rgba(55,48,163,.5);
}
/* Le bloc d'accueil n'avait aucun conteneur : texte et statistiques collaient au bord de la fenêtre. */
.home-v2{ max-width:var(--container); margin:0 auto; padding:0 var(--space-3); }
.hv-hero{ padding:var(--space-5) 0 var(--space-4); }
.hv-hero-copy h1{ font-size:clamp(2.2rem,4.8vw,3.6rem); font-weight:800; letter-spacing:-.035em; line-height:1.05; }
.hv-hero-photo{ border-radius:44% 56% 52% 48% / 46% 42% 58% 54%; box-shadow:inset 0 0 0 6px rgba(255,255,255,.55), var(--hv-shadow); }
.hv-hero-stats div{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:18px; padding:.8rem 1.2rem; box-shadow:var(--shadow-sm); }
.hv-hero-stats{ gap:.8rem; }
.hv-profile-card{ border-radius:26px; }
.hv-profile-card .tint{ opacity:.55; }
/* Voile sous le texte : le blanc doit se lire quelle que soit la photo. */
.hv-profile-card .content{ background:linear-gradient(180deg,transparent,rgba(20,22,70,.78) 55%); padding-top:3.2rem; }
.hv-banner{ border-radius:30px; }

/* ---------- Champs ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea{ border-radius:12px; border-color:var(--color-border-strong); }
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid var(--color-primary); outline-offset:2px; }

/* ---------- Pied de page ---------- */
.site-footer{ border-radius:40px 40px 0 0; margin-top:var(--space-4); }
.site-footer::before{ background:radial-gradient(circle, rgba(129,140,248,.2), transparent 70%); }
.footer-logo .dot{ background:linear-gradient(135deg,#A5B4FC,#C4B5FD); }
.site-footer a{ color:#d5d9f0; }

/* ---------- Thème sombre : l'accent est un indigo clair, le texte blanc posé dessus ne se lit pas (2:1).
   On garde les aplats sombres pour les pastilles et encarts à texte blanc, et le texte sombre sur les états « actif ». ---------- */
:root[data-theme="sombre"] .content-block h2 .num,
:root[data-theme="sombre"] .sidebar-cta,
:root[data-theme="sombre"] .product-cover{ background:linear-gradient(160deg,#4338CA,#232866); color:#fff; }
:root[data-theme="sombre"] .lecture-choix button[aria-pressed="true"],
:root[data-theme="sombre"] .btn-comfort[aria-pressed="true"],
:root[data-theme="sombre"] .quiz-option.selected,
:root[data-theme="sombre"] a.tag-pill:hover{ color:#0B1F1E; }

/* ---------- Cas où le vert-bleu était écrit en dur dans style.css ---------- */
.quiz-result-band-high{ background:linear-gradient(160deg,#4F46E5,#2A2F7A); }

@media (max-width:640px){ .site-footer{ border-radius:28px 28px 0 0; } .hv-hero-photo{ border-radius:40px; } }
@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none; } .header-inner{ transition:none; } }

/* 14/10/2026 : imprimer en thème sombre donnait des aplats foncés sur papier blanc. À l'impression, toujours les couleurs claires. */
@media print{ :root[data-theme="sombre"], :root[data-theme="sepia"]{ --color-bg:#FFFFFF; --color-bg-alt:#F4F6FA; --color-surface:#FFFFFF; --color-ink:#14213D; --color-ink-soft:#4A5876; --color-ink-mute:#55647F; --color-border:#DCE3F2; --color-border-strong:#C0CBE0; --color-primary:#4F46E5; --color-primary-dark:#3730A3; --color-primary-light:#EEF0FF; --color-accent:#4F46E5; --color-accent-btn:#4F46E5; --color-accent-light:#EEF0FF; --color-accent-text:#4F46E5; --color-accent-2-text:#4F46E5; --color-accent-3-text:#7A5A05; --color-success:#15713F; --color-success-text:#15713F; --color-danger:#B02A2A; color-scheme:light; } }

/* 14/10/2026 : encadré « Pour aller plus loin » (includes/maillage.php), posé en bas des fiches, des tests et des pages MDPH.
   Une liste courte, un lien par ligne, une phrase dessous : rien que des jetons, pour le clair, le sombre et le sépia. */
.maillage h2{ font-size:1.35rem; margin-top:0; }
.maillage-liste{ list-style:none; margin:0; padding:0; }
.maillage-liste li{ padding:.85rem 0; border-top:1px solid var(--color-border); min-width:0; overflow-wrap:anywhere; }
.maillage-liste li:first-child{ border-top:0; padding-top:.25rem; }
.maillage-genre{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--color-ink-mute); margin-bottom:.15rem; }
.maillage-liste a{ font-weight:700; font-size:1.05rem; color:var(--color-primary-dark); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; display:inline-block; padding:.1rem 0; }
.maillage-liste a:hover{ text-decoration-thickness:2px; }
.maillage-liste a:focus-visible{ outline:3px solid var(--color-primary); outline-offset:2px; border-radius:4px; }
.maillage-phrase{ display:block; color:var(--color-ink-soft); font-size:.95rem; line-height:1.5; margin-top:.2rem; max-width:68ch; }
@media print{ .maillage{ display:none; } }

/* 14/10/2026 : en flex, « <strong>Libellé :</strong> texte » devenait deux colonnes serrées qui se chevauchaient sur téléphone
   (fiches : « Conseils pratiques »). La ligne redevient un paragraphe, la coche reste à gauche. */
.checklist li{ display:block; position:relative; padding-left:2.4rem; }
.checklist li::before{ position:absolute; left:1.05rem; top:.75rem; }