/* ==========================================================================
   PAGES DE LA VITRINE (vitrine-pages.css) : style commun aux 5 pages publiques
   (/, /fonctionnalites, /securite, /tarifs, /faq). Sorti de l'ancien <style>
   d'index.html le 04.10.2026, quand la page unique a été découpée.
   Les maquettes d'écrans restent dans vitrine.css.
   ========================================================================== */
/* =========================================================
   VERSION A — « VERRE » : la vitrine parle la même langue
   visuelle que l'app (thème solaire liquid glass clair).

   ⚠️ COPIE VOLONTAIRE de css/couleurs.css : la vitrine ne charge
   NI style.css NI couleurs.css (choix de rapidité). Les tokens
   --so-*, la règle .btn--primary::before et le @keyframes so-shine
   ci-dessous sont donc DUPLIQUÉS depuis couleurs.css et le bas de
   style.css.
   → Si tu retouches le verre là-bas, reporte-le ICI à la main (et
     inversement). Modifier un seul des deux endroits ne mettra PAS
     à jour la page d'accueil.
   ========================================================= */
:root {
  --c1: #FF6B35;
  --c2: #E8143C;
  --c3: #C0392B;
  --gradient: linear-gradient(135deg, var(--c1) 0%, var(--c2) 60%, var(--c3) 100%);
  --gradient-app: linear-gradient(160deg, var(--c1) 0%, var(--c1) 20%, var(--c2) 65%, var(--c3) 100%);
  --gradient-soft: linear-gradient(135deg, color-mix(in srgb, var(--c1) 10%, transparent) 0%, color-mix(in srgb, var(--c2) 6%, transparent) 100%);
  --glow-1: color-mix(in srgb, var(--c1) 38%, transparent);
  --glow-2: color-mix(in srgb, var(--c1) 52%, transparent);

  /* Palette chaude du thème solaire (mêmes valeurs que l'app) */
  --so-bg: color-mix(in srgb, var(--c1) 5%, #FBF8F4 95%);
  --so-text: #1C1917;
  --so-text-2: #57534E;
  --so-text-3: #A8A29E;
  --so-accent-deep: color-mix(in srgb, var(--c3) 68%, #1C1917 32%);
  --so-accent-soft: color-mix(in srgb, var(--c1) 10%, #FFFFFF 90%);
  /* Fond de SURVOL, plus soutenu que --so-accent-soft (fond au repos).
     Report à la main du jeton de couleurs.css, que cette page ne charge pas. */
  --so-accent-hover: color-mix(in srgb, var(--c1) 20%, #FFFFFF 80%);
  --text-muted: #78716C;
  --border: rgba(255,255,255,0.75);
  --r-lg: 24px;

  /* Liquid glass : recette exacte de theme-solaire.css */
  --so-glass-tint: #F1EADC;
  --so-glass: color-mix(in srgb, var(--so-glass-tint) 11%, transparent);
  --so-glass-strong: color-mix(in srgb, var(--so-glass-tint) 24%, transparent);
  --so-blur: blur(8px) saturate(150%);
  --so-specular:
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
    inset 2px 1px 0 -1px color-mix(in srgb, #fff 90%, transparent),
    inset -1.5px -1px 0 -1px color-mix(in srgb, #fff 80%, transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, #fff 60%, transparent);
  --so-specular-lg:
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, #fff 90%, transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, #fff 80%, transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent),
    inset -0.3px -1px 4px 0 color-mix(in srgb, #000 12%, transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, #000 20%, transparent),
    inset 0 3px 4px -2px color-mix(in srgb, #000 20%, transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 10%, transparent);
  --so-shadow-sm:
    0 0 0 1px color-mix(in srgb, var(--c1) 22%, transparent),
    0 3px 6px 0 color-mix(in srgb, #000 8%, transparent);
  --so-shadow-md: 0 12px 32px -10px color-mix(in srgb, var(--c1) 18%, transparent), 0 2px 6px rgba(87, 53, 21, 0.05);
  --so-shadow-lg: 0 18px 44px -10px color-mix(in srgb, var(--c1) 26%, transparent), 0 2px 8px rgba(87, 53, 21, 0.06);
  --so-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-xl: var(--so-shadow-lg);
  --hairline: rgba(28, 25, 23, 0.07);
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background-color: var(--so-bg); }
body {
  font-family: 'Poppins', sans-serif;
  color: var(--so-text);
  line-height: 1.6;
  overflow-x: hidden;
}
/* Fond fixe : sable + halos chauds (recette de l'app), statique au défilement */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--so-bg);
  background-image:
    radial-gradient(55% 38% at 82% -8%, color-mix(in srgb, var(--c1) 24%, transparent), transparent 65%),
    radial-gradient(45% 30% at 8% -4%, rgba(252, 211, 77, 0.20), transparent 60%),
    radial-gradient(40% 34% at 28% 52%, color-mix(in srgb, var(--c3) 12%, transparent), transparent 70%),
    radial-gradient(50% 40% at 78% 88%, color-mix(in srgb, var(--c1) 14%, transparent), transparent 62%),
    radial-gradient(32% 26% at 70% 18%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 70%),
    radial-gradient(26% 22% at 22% 36%, rgba(252, 211, 77, 0.12), transparent 70%),
    radial-gradient(30% 26% at 55% 80%, color-mix(in srgb, var(--c3) 10%, transparent), transparent 70%);
}
h1, h2, h3 { line-height: 1.15; font-weight: 700; }
a { text-decoration: none; }
[id] { scroll-margin-top: 90px; }

/* Accessibilité — respect du réglage système "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up { opacity: 1 !important; transform: none !important; }
}

/* Accessibilité — contour visible au clavier (touche Tab) */
:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 24%, transparent);
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Paragraphes de description : texte justifié, mais SANS césure —
   pas de mots coupés par un tiret en fin de ligne. */
.hero__desc, .benefit__desc, .feature__desc, .faq__a {
  text-align: justify;
  -webkit-hyphens: none;
  hyphens: none;
}

/* =========================================================
   BOUTONS (recette exacte des boutons de l'app)
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  /* Rectangle arrondi comme tout le site (jamais d'ovale). Seul le bouton
     logé dans la capsule du bandeau garde sa forme de pilule, plus bas. */
  border-radius: 14px;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  cursor: pointer; border: none;
  transition: transform 0.08s ease, background 0.15s, color 0.15s, box-shadow 0.22s var(--so-ease);
}

.btn--primary {
  position: relative;
  overflow: hidden;
  background-image: var(--gradient);
  background-size: 150% 150%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow:
    0 4px 16px -4px var(--glow-1),
    0 0 26px -6px var(--glow-1),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: background-position 0.4s var(--so-ease), transform 0.08s ease, box-shadow 0.22s var(--so-ease);
}
/* Reflet lumineux qui balaie le bouton au survol */
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover::before { animation: so-shine 0.65s var(--so-ease); }
  .btn--primary:hover {
    background-position: 90% 50%;
    box-shadow:
      0 6px 22px -4px var(--glow-2),
      0 0 34px -6px var(--glow-2),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
}
@keyframes so-shine {
  from { transform: translateX(0) skewX(-18deg); }
  to   { transform: translateX(320%) skewX(-18deg); }
}

.btn--ghost {
  background: var(--so-glass-strong);
  backdrop-filter: var(--so-blur);
  -webkit-backdrop-filter: var(--so-blur);
  color: var(--so-text-2);
  box-shadow: var(--so-shadow-sm), var(--so-specular);
}
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--so-accent-hover); color: var(--so-accent-deep); } }

.btn--sm { padding: 10px 22px; font-size: 0.9rem; white-space: nowrap; }
.nav .btn { border-radius: 50px; }
.btn--lg { padding: 16px 34px; font-size: 1.05rem; }

/* =========================================================
   NAV — capsule de verre flottante (comme la barre d'onglets
   de l'app sur iPhone, recette Apple verbatim)
   ========================================================= */
.nav {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  z-index: 200;
  width: min(1140px, calc(100% - 20px));
  border-radius: 99px;
  background-color: color-mix(in srgb, var(--so-glass-tint) 12%, transparent);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, #fff 90%, transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, #fff 80%, transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff 60%, transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, #000 12%, transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 20%, transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, #000 20%, transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 10%, transparent),
    0px 1px 5px 0px color-mix(in srgb, #000 10%, transparent),
    0px 6px 16px 0px color-mix(in srgb, #000 8%, transparent);
}
.nav__inner {
  padding: 0 10px 0 22px;
  height: 58px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav__logo {
  font-size: 1.65rem; font-weight: 900; letter-spacing: -1.5px;
  padding-right: 4px;
}
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__link {
  font-size: 0.9rem; font-weight: 500; color: var(--so-text-2);
  transition: color 0.15s;
}
@media (hover: hover) and (pointer: fine) { .nav__link:hover { color: var(--so-accent-deep); } }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__login {
  font-size: 0.9rem; font-weight: 500; color: var(--so-text-2);
  transition: color 0.15s;
}
@media (hover: hover) and (pointer: fine) { .nav__login:hover { color: var(--so-accent-deep); } }

/* =========================================================
   KICKER — remplace les pilules colorées au-dessus des titres
   ========================================================= */
.kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--so-accent-deep);
  margin-bottom: 16px;
}
.kicker::before {
  content: "";
  width: 26px; height: 2px; border-radius: 2px; flex-shrink: 0;
  background: var(--gradient);
}

/* =========================================================
   HERO
   ========================================================= */
.hero { padding: calc(58px + 10px + env(safe-area-inset-top, 0px) + 52px) 24px 88px; }
.hero__inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  /* Calées par le BAS : « Essayer un exercice » tombe à la hauteur du
     dernier point de gauche, quelle que soit la largeur. */
  align-items: end;
}
.hero__title {
  font-size: clamp(2.3rem, 3.95vw, 3.2rem);
  font-weight: 900; letter-spacing: -2.5px; line-height: 1.06;
  /* Le resserrement des lettres collait aussi les mots entre eux
     (« interactifspourles ») : on rend un peu d'air aux espaces. */
  word-spacing: 0.14em;
  margin-bottom: 22px;
}
.hero__title .accent { color: var(--c2); }
.hero__desc {
  font-size: 1.08rem; color: var(--so-text-2);
  max-width: 470px; margin-bottom: 34px; line-height: 1.75;
}
/* Les deux boutons et les quatre points forts sur la MÊME grille à deux
   colonnes : mêmes largeurs, mêmes bords, d'un bloc à l'autre. */
.hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero__actions .btn { justify-content: center; white-space: nowrap; padding-left: 10px; padding-right: 10px; }

/* Cadre navigateur des maquettes : plaque de verre solaire.
   Pas de backdrop-filter : le fond (halos) est FIXE et déjà flou par
   nature, un blanc translucide rend pareil et coûte bien moins cher
   en GPU (même choix que les .subject-item de l'app). */
.device__browser {
  background: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 24px;
  box-shadow: var(--so-shadow-md), var(--so-specular-lg);
}
.device__bar {
  background: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}
.device__url { background: rgba(255, 255, 255, 0.72); }

/* Aperçu d'app intégré (iframe vers une page de démo réelle : /eleve-demo.html).
   La hauteur définie ici n'est qu'un repli : elle est ajustée par postMessage
   une fois la démo chargée, pour coller pile au contenu, sans défilement. */
.device__embed {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
  background: transparent;
  /* La souris et le doigt traversent l'aperçu : sans ça, le défilement
     de la page se bloque dès que le curseur passe sur le cadre (c'est la
     page de démo qui reçoit la molette). C'est une image, pas un espace
     cliquable : rien à perdre. */
  pointer-events: none;
}
/* pointer-events:none ne suffit pas : les navigateurs continuent d'envoyer
   la molette au document de l'iframe, donc la page se fige dès que le
   curseur passe dessus. On pose par-dessus un film transparent (un simple
   div, qui lui laisse défiler la page normalement). */
.device__embedwrap { position: relative; }
.device__embedwrap::after {
  content: '';
  position: absolute; inset: 0;
  background: transparent;
}

/* =========================================================
   BENEFITS — une seule plaque de verre, 3 volets
   ========================================================= */
.benefits { padding: 8px 24px 96px; }
.benefits__sheet {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 24px;
  box-shadow: var(--so-shadow-md), var(--so-specular-lg);
  overflow: hidden;
}
.benefit { padding: 34px 32px; }
.benefit + .benefit { border-left: 1px solid var(--hairline); }
/* Pastille d'icône = celle des Réglages de l'app (dégradé du thème, glyphe blanc) */
.benefit__icon {
  width: 40px; height: 40px; border-radius: 11px;
  background-image: var(--gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px -2px var(--glow-1), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}
.benefit__icon svg { width: 21px; height: 21px; }
.benefit__title { font-size: 1.02rem; margin-bottom: 8px; }
.benefit__desc  { font-size: 0.9rem; color: var(--so-text-2); line-height: 1.65; }

/* =========================================================
   FEATURES
   ========================================================= */
.feature { padding: 88px 24px; }
.feature__inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px;
  /* Bas de l'illustration aligné sur le bas de la liste de détails
     (la carte de verre .flist termine toujours la colonne de texte).
     Sur téléphone la grille redevient une colonne : sans effet. */
  align-items: end;
}
/* Grand chiffre fantôme au-dessus du titre (01 à 05) */
.feature__num {
  font-size: clamp(3.6rem, 7vw, 6rem);
  font-weight: 900; line-height: 0.9; letter-spacing: -4px;
  color: color-mix(in srgb, var(--c1) 14%, transparent);
  margin-bottom: 10px;
}
.feature__title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 900; letter-spacing: -1.5px; margin-bottom: 16px;
}
.feature__desc {
  font-size: 0.98rem; color: var(--so-text-2);
  margin-bottom: 24px; line-height: 1.75;
}
/* Les liens dans un paragraphe de section doivent se voir : le `a` global
   est sans soulignement, il faut donc le rétablir ici. */
.feature__desc a { color: var(--so-accent-deep); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .feature__desc a:hover { text-decoration-thickness: 2px; } }

/* Liste façon « Réglages » : carte de verre, lignes séparées d'un filet */
.flist {
  list-style: none;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05), var(--so-specular-lg);
  padding: 6px 20px;
}
.flist li {
  padding: 12px 2px;
  font-size: 0.93rem; color: var(--so-text-2); line-height: 1.5;
}
.flist li + li { border-top: 1px solid var(--hairline); }

/* =========================================================
   FEATURE 5 — maquette « ce que vous écrivez / ce que la base enregistre »
   Les deux volets sont EMPILÉS, jamais côte à côte, à toutes les largeurs :
   côte à côte, les deux volets n'avaient ni la même hauteur ni les mêmes
   lignes en vis-à-vis (un libellé sur deux lignes décalait tout le volet),
   et la maquette restait deux fois trop basse pour sa colonne. Empilés et
   séparés par une flèche, le « avant → après » se lit dans le sens naturel
   de la page, et il n'y a plus rien à aligner.
   ========================================================= */
.priv {
  display: grid;
  /* Une seule colonne, calée EXACTEMENT sur la largeur du cadre — jamais sur
     la longueur du texte. Sans le minmax(0, …), la colonne « auto » d'une
     grille se dimensionne sur son plus long contenu insécable (ici la ligne
     « élève a7f3… » en chasse fixe), et le volet débordait l'écran du
     téléphone par la droite. */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  justify-items: stretch;
  padding: 26px;
}
.priv__pane {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05), var(--so-specular-lg);
  padding: 18px 20px 20px;
  /* Autorise le volet à devenir plus étroit que son texte insécable, pour
     que la coupure « … » des lignes chiffrées se déclenche vraiment au lieu
     de pousser toute la maquette hors de l'écran. */
  min-width: 0;
}
/* La flèche qui fait le lien entre les deux volets : c'est elle qui dit
   « et voilà ce que ça devient », sans une ligne de texte de plus. */
.priv__arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--so-text-3);
}
.priv__arrow svg { width: 20px; height: 20px; }
.priv__label {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--so-text-3);
  margin-bottom: 14px;
}
.priv__label svg { width: 13px; height: 13px; flex-shrink: 0; }
.priv__row { padding: 9px 0 0; }
.priv__who { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
/* L'identifiant : chasse fixe (c'est une donnée brute lue dans la base),
   mais en gras et plus sombre que le charabia — il occupe exactement la
   place du prénom du volet du dessus, et c'est CE remplacement qu'il
   faut voir. */
.priv__meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 36 caractères qui ne doivent JAMAIS être coupés : sur un écran de
     téléphone, la taille de bureau les amène pile au bord. */
  font-size: clamp(0.62rem, 2.4vw, 0.75rem);
  font-weight: 700; color: var(--so-text-2);
  margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.priv__note {
  font-size: 0.9rem; color: var(--so-text-2); line-height: 1.55;
}
/* Le charabia : chasse fixe pour qu'il se lise comme une donnée brute,
   sur une seule ligne (coupé proprement plutôt que replié sur trois
   lignes, qui alourdissaient la maquette sans rien dire de plus). */
.priv__cipher {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.66rem, 2.6vw, 0.8rem);
  color: var(--so-text-3);
  line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.priv__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700;
  color: var(--so-accent-deep);
  margin-top: 14px;
}
.priv__badge svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Les quatre points forts sous les boutons du haut : de petites plaques
   claires, alignées à gauche, un repère carré au dégradé du thème. Chaque
   texte sur UNE ligne (nowrap) : la colonne a été élargie pour ça. */
.hero__points {
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 10px;
}
.hero__points li {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), var(--so-specular-lg);
  font-size: 0.84rem; font-weight: 600; color: var(--so-text); line-height: 1.35;
  white-space: nowrap;
}
.hero__points li::before {
  content: ""; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--gradient);
}

/* =========================================================
   CARROUSEL DES TYPES D'EXERCICES (haut de page)
   Une piste qui défile de côté, arrêtée pile sur chaque capture :
   le doigt glisse sur téléphone, les flèches servent partout.
   ========================================================= */
.exo-car { min-width: 0; }
.exo-car__fenetre {
  overflow: hidden;
  aspect-ratio: 960 / 667;
  border-radius: 0 0 24px 24px;
  touch-action: pan-y;          /* le doigt glisse de côté, la page défile toujours */
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.exo-car__piste {
  display: flex; height: 100%;
  transition: transform 0.45s var(--so-ease);
  will-change: transform;
}
.exo-car__diapo { flex: 0 0 100%; margin: 0; }
.exo-car__diapo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.exo-car__pied {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px;
}
.exo-car__fleche {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--so-shadow-sm), var(--so-specular);
  color: var(--so-accent-deep);
  cursor: pointer;
  transition: background 0.15s, transform 0.08s ease;
}
.exo-car__fleche svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .exo-car__fleche:hover { background: var(--so-accent-hover); } }
.exo-car__legende {
  flex: 1; min-width: 0; text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.exo-car__legende strong { font-size: 1rem; font-weight: 800; color: var(--so-text); }
.exo-car__legende span { font-size: 0.84rem; color: var(--so-text-2); }
/* Le compteur « 1 / 12 » loge sous « Exemples d'exercices » : une ligne de
   moins, pour que « Essayer un exercice » tombe à la hauteur du dernier
   point de la colonne de gauche. */
.exo-car__legende .exo-car__compte { font-size: 0.75rem; font-weight: 600; color: var(--so-text-3); }
/* « Essayer un exercice », plein, centré sous les captures. */
.exo-car__essayer { display: flex; justify-content: center; margin-top: 14px; }

/* =========================================================
   TOUTES LES FONCTIONNALITÉS : une plaque de verre, 4 volets
   (même recette que la FAQ)
   ========================================================= */
.tout { padding: 88px 24px 0; }
.tout__head { max-width: 1180px; margin: 0 auto 34px; }
.tout__sheet {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 24px;
  box-shadow: var(--so-shadow-md), var(--so-specular-lg);
  overflow: hidden;
}
.tout__groupe { padding: 30px 36px; }
.tout__groupe:nth-child(even) { border-left: 1px solid var(--hairline); }
.tout__groupe:nth-child(n+3) { border-top: 1px solid var(--hairline); }
.tout__titre { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; }
.tout__liste { list-style: none; }
.tout__liste li {
  padding: 9px 0;
  font-size: 0.92rem; color: var(--so-text-2); line-height: 1.5;
}
.tout__liste li + li { border-top: 1px solid var(--hairline); }
.tout__liste strong { color: var(--so-text); font-weight: 700; }

/* =========================================================
   FAQ — une plaque de verre, 4 volets
   ========================================================= */
.faq { padding: 88px 24px; }
.faq__head { max-width: 1180px; margin: 0 auto 34px; }
.faq__title {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 900; letter-spacing: -1.5px;
}
.faq__sheet {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 24px;
  box-shadow: var(--so-shadow-md), var(--so-specular-lg);
  overflow: hidden;
}
.faq__item { padding: 30px 36px; }
.faq__item:nth-child(even) { border-left: 1px solid var(--hairline); }
.faq__item:nth-child(n+3) { border-top: 1px solid var(--hairline); }
.faq__q { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.faq__a { font-size: 0.93rem; color: var(--so-text-2); line-height: 1.7; }

/* =========================================================
   CTA FINAL — panneau de verre sur halo chaud
   ========================================================= */
.cta { padding: 40px 24px 110px; position: relative; }
.cta::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 90vw); height: 420px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 22%, transparent), transparent 72%);
  pointer-events: none;
}
.cta__panel {
  position: relative;
  max-width: 880px; margin: 0 auto;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 32px;
  box-shadow: var(--so-shadow-lg), var(--so-specular-lg);
  padding: 64px 48px;
  text-align: center;
}
.cta__title {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 900; letter-spacing: -2px; margin-bottom: 14px;
}
.cta__desc {
  font-size: 1.05rem; color: var(--so-text-2);
  max-width: 560px; margin: 0 auto 36px; line-height: 1.7;
}
.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   FOOTER — clair, sur le sable
   ========================================================= */
.footer {
  padding: 40px 24px calc(40px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(28, 25, 23, 0.08);
}
.footer__inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer__logo { font-size: 1.5rem; font-weight: 900; letter-spacing: -1px; }
.footer__tagline { font-size: 0.8rem; color: var(--so-text-3); margin-top: 4px; }
.footer__credit { font-size: 0.85rem; color: var(--so-text-2); }
.footer__credit strong { color: var(--so-text); }
.footer__credit a { color: var(--so-text-3); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .footer__credit a:hover { color: var(--so-accent-deep); } }
/* Les trois liens juridiques : flex + gap plutôt que margin-left, sinon le
   lien qui passe à la ligne garde sa marge gauche et paraît mal aligné. */
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px;
}
.footer__copy { margin-top: 12px; font-size: 0.78rem; color: var(--so-text-3); }

/* =========================================================
   SCROLL ANIMATIONS
   ========================================================= */
/* 0.42s + --so-ease (et non 0.55s + `ease`) : `ease` accélère au départ, donc
   le bloc hésite un instant avant de monter et semble traîner derrière le
   défilement. --so-ease part à pleine vitesse et ralentit en arrivant. */
/* ⚠️ Caché SEULEMENT quand js/vitrine.js a posé `fondus` sur <html> : si le
   script ne se charge pas (réseau, bloqueur, vieux navigateur), les blocs
   restent simplement visibles, sans fondu (R136). */
.fondus .fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.42s var(--so-ease), transform 0.42s var(--so-ease);
}
.fondus .fade-up.visible { opacity: 1; transform: translateY(0); }
.fondus .fade-up.delay-1 { transition-delay: 0.1s; }
.fondus .fade-up.delay-2 { transition-delay: 0.2s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 901px) {
  .feature--alt .feature__mockup { order: 2; }
  .feature--alt .feature__text   { order: 1; }
}
/* Ordinateur à écran étroit / iPad à l'horizontale : deux colonnes ne
   laissent plus la place aux textes sur une ligne, on empile. */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero__actions, .hero__points { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero { padding: calc(58px + 10px + env(safe-area-inset-top, 0px) + 24px) 20px 56px; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .benefits { padding-bottom: 64px; }
  .benefits__sheet { grid-template-columns: 1fr; }
  .benefit + .benefit { border-left: none; border-top: 1px solid var(--hairline); }
  .feature { padding: 56px 20px; }
  .feature__inner { display: flex; flex-direction: column; gap: 32px; }
  .feature__text   { order: 1; }
  .feature__mockup { order: 2; width: 100%; min-width: 0; }
  .app-teacher__body { overflow-x: auto; }
  .nav__links { display: none; }
  .tout { padding: 56px 20px 0; }
  .tout__sheet { grid-template-columns: 1fr; }
  .tout__groupe { padding: 24px 26px; }
  .tout__groupe:nth-child(even) { border-left: none; }
  .tout__groupe + .tout__groupe { border-top: 1px solid var(--hairline); }
  .faq { padding: 56px 20px; }
  .faq__sheet { grid-template-columns: 1fr; }
  .faq__item { padding: 24px 26px; }
  .faq__item:nth-child(even) { border-left: none; }
  .faq__item + .faq__item { border-top: 1px solid var(--hairline); }
  .cta__panel { padding: 48px 26px; }
  /* Pied de page téléphone : tout aligné à gauche, un lien juridique par
     ligne (assez haut pour être touché au doigt sans se tromper). */
  .footer { padding: 32px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .footer__legal { flex-direction: column; gap: 0; margin-top: 8px; }
  .footer__legal a { padding: 8px 0; }
}
/* Point de rupture propre à la barre d'onglets de la maquette « espace
   enseignant » : ses cinq onglets libellés réclament ~510 px dans le cadre,
   soit ~550 px de fenêtre. En dessous, seul l'onglet ouvert garde son
   libellé et les autres se réduisent à leur icône : sinon « Réglages » est
   tranché par le bord du cadre. Mesuré, pas estimé. */
@media (max-width: 560px) {
  .app-tab:not(.app-tab--on) .app-tab__lbl { display: none; }
  .app-tab { padding: 7px 9px; }
}
@media (max-width: 480px) {
  .hero__title { font-size: clamp(1.7rem, 8.2vw, 2.3rem); letter-spacing: -1.5px; }
  .hero__points { grid-template-columns: 1fr; }
  .nav__login { display: none; }
  .nav__actions .btn--sm { padding: 8px 14px; font-size: 0.82rem; }
  .nav__inner { padding: 0 8px 0 16px; height: 54px; }
  /* Sur téléphone, les boutons du haut prennent toute la largeur, comme les
     quatre points forts en dessous. */
  .hero__actions { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; justify-content: center; padding: 13px 16px; font-size: 0.92rem; }
  .cta__actions { flex-direction: column; align-items: center; }
  .app-actions-bar { flex-wrap: nowrap; }
  .app-select, .app-btn-sm { font-size: 0.52rem; padding: 3px 6px; }
}

/* =========================================================================
   AJOUTS DU DÉCOUPAGE EN 5 PAGES (04.10.2026)
   ========================================================================= */

/* ---- Barre du haut : 4 liens + lien de la page ouverte -------------------
   Chaque lien se TEINTE au survol (jamais un soulignage) ; la page ouverte
   garde le fond « au repos ». Rayon 10 px sur 36 px de haut : pas d'ovale. */
.nav__links { gap: 4px; }
.nav__link {
  padding: 8px 12px; border-radius: 10px;
  transition: color 0.15s, background 0.15s;
}
.nav__link[aria-current="page"] { color: var(--so-accent-deep); background: var(--so-accent-soft); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { background: var(--so-accent-hover); } }

/* Bouton burger : trois traits qui deviennent une croix quand le menu est
   ouvert. Caché sur ordinateur (les liens tiennent dans la capsule). */
.nav__burger {
  display: none;
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 40px; flex-shrink: 0;
  border: none; border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--so-shadow-sm), var(--so-specular);
  cursor: pointer; position: relative;
  transition: background 0.15s;
}
.nav__burger span {
  position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px;
  background: var(--so-text);
  transition: transform 0.25s var(--so-ease), opacity 0.15s;
}
.nav__burger span:nth-child(1) { top: 13px; }
.nav__burger span:nth-child(2) { top: 19px; }
.nav__burger span:nth-child(3) { top: 25px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .nav__burger:hover { background: var(--so-accent-hover); } }

/* Panneau du menu : plaque de verre sous la capsule, alignée à droite. Le
   contenu défile derrière : ici le flou se justifie (comme la capsule). */
.nav__panneau {
  position: fixed; z-index: 199;
  top: calc(10px + 58px + 8px + env(safe-area-inset-top, 0px));
  right: 10px;
  width: min(320px, calc(100% - 20px));
  padding: 8px;
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--so-bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--so-shadow-lg), var(--so-specular-lg);
}
.nav__panneau[hidden] { display: none; }
.nav__panneau nav { display: flex; flex-direction: column; gap: 2px; }
.nav__ligne {
  display: block;
  padding: 13px 14px; border-radius: 12px;
  font-size: 1rem; font-weight: 500; color: var(--so-text);
  transition: background 0.15s;
}
.nav__ligne[aria-current="page"] { background: var(--so-accent-soft); color: var(--so-accent-deep); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .nav__ligne:hover { background: var(--so-accent-hover); } }
.nav__panneau-btn { width: 100%; justify-content: center; margin-top: 8px; }

/* ---- En-tête des pages intérieures (h1 + phrase d'introduction) -------- */
.entete { padding: calc(58px + 10px + env(safe-area-inset-top, 0px) + 64px) 24px 24px; }
.entete__inner { max-width: 1180px; margin: 0 auto; }
.entete__titre {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  font-weight: 900; letter-spacing: -2px; line-height: 1.06;
  word-spacing: 0.14em;
  max-width: 820px; margin-bottom: 18px;
}
.entete__desc { font-size: 1.08rem; color: var(--so-text-2); max-width: 640px; line-height: 1.75; }
/* Une section .feature placée en tête de page (Sécurité) doit passer sous la capsule. */
.feature--tete { padding-top: calc(58px + 10px + env(safe-area-inset-top, 0px) + 64px); }
.feature + .feature--tete { padding-top: 88px; }

/* ---- Accueil : les 4 portes vers les autres pages ---------------------- */
.decouvrir { padding: 0 24px 96px; }
.decouvrir__sheet {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 24px;
  box-shadow: var(--so-shadow-md), var(--so-specular-lg);
  overflow: hidden;
}
.decouvrir__carte {
  display: flex; flex-direction: column;
  padding: 30px 28px;
  color: var(--so-text);
  transition: background 0.15s;
}
.decouvrir__carte + .decouvrir__carte { border-left: 1px solid var(--hairline); }
@media (hover: hover) and (pointer: fine) { .decouvrir__carte:hover { background: var(--so-accent-hover); } }
.decouvrir__titre { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; }
.decouvrir__texte { font-size: 0.9rem; color: var(--so-text-2); line-height: 1.65; flex: 1; }
.decouvrir__suite { margin-top: 14px; font-size: 0.88rem; font-weight: 700; color: var(--so-accent-deep); }

/* ---- Tarifs (page mise de côté : vitrine-en-attente/tarifs.html) : les deux versions côte à côte ---------------------------- */
.plans { padding: 32px 24px 72px; }
.plans__grille {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  align-items: stretch;
}
.plan {
  display: flex; flex-direction: column;
  padding: 36px 34px 32px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  box-shadow: var(--so-shadow-md), var(--so-specular-lg);
}
.plan--pro {
  background-color: rgba(255, 255, 255, 0.62);
  background-image: var(--gradient-soft);
  box-shadow: var(--so-shadow-lg), var(--so-specular-lg);
}
.plan__etiquette {
  align-self: flex-start;
  margin-bottom: 14px; padding: 5px 10px; border-radius: 8px;
  background-image: var(--gradient); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
/* Étiquette neutre de la version gratuite : les deux cartes commencent ainsi
   à la même hauteur. */
.plan__etiquette--neutre { background: var(--so-accent-soft); color: var(--so-accent-deep); }
.plan__nom { font-size: 1.7rem; font-weight: 900; letter-spacing: -1px; }
.plan__pour { font-size: 0.95rem; color: var(--so-text-2); margin-top: 4px; }
.plan__prix { font-size: 2.6rem; font-weight: 900; letter-spacing: -1.5px; line-height: 1; margin-top: 22px; }
.plan__duree { font-size: 0.85rem; color: var(--so-text-3); margin-top: 6px; }
.plan__plus { font-size: 0.9rem; font-weight: 700; margin-top: 24px; }
.plan__liste { list-style: none; margin: 14px 0 28px; flex: 1; }
.plan__liste li {
  position: relative;
  padding: 9px 0 9px 18px;
  font-size: 0.92rem; color: var(--so-text-2); line-height: 1.5;
}
.plan__liste li + li { border-top: 1px solid var(--hairline); }
/* Même repère carré que les points forts du haut de l'accueil (pas de coche). */
.plan__liste li::before {
  content: ""; position: absolute; left: 0; top: calc(9px + 0.5em);
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--gradient);
}
.plan__liste strong { color: var(--so-text); font-weight: 700; }
.plan__btn { justify-content: center; width: 100%; }

/* ---- Tarifs : bandeau « établissements » ------------------------------- */
.etab { padding: 0 24px 24px; }
.etab__panneau {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 32px 36px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 24px;
  box-shadow: var(--so-shadow-md), var(--so-specular-lg);
}
.etab__titre { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 6px; }
.etab__texte { font-size: 0.93rem; color: var(--so-text-2); line-height: 1.65; max-width: 680px; }
.etab .btn { flex-shrink: 0; }

/* ---- Sécurité : la liste des documents --------------------------------- */
.docs { padding: 24px 24px 72px; }
.docs__inner { max-width: 1180px; margin: 0 auto; }
.docs__liste { margin-top: 24px; max-width: 760px; padding: 6px 8px; }
.docs__liste li { padding: 0; }
.docs__liste a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 14px; border-radius: 12px;
  color: var(--so-text);
  transition: background 0.15s;
}
.docs__liste strong { font-weight: 700; }
.docs__liste span { font-size: 0.86rem; color: var(--so-text-2); }
@media (hover: hover) and (pointer: fine) { .docs__liste a:hover { background: var(--so-accent-hover); } }

/* ---- FAQ : liens dans les réponses, et page FAQ sans grand écart en haut */
.faq__a a { color: var(--so-accent-deep); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .faq__a a:hover { color: var(--so-text); } }
.faq--page { padding-top: 32px; }

/* ---- Pied de page : les pages du site ---------------------------------- */
.footer__site { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; }
.footer__site a { color: var(--so-text-2); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .footer__site a:hover { color: var(--so-accent-deep); } }

/* ---- Largeurs ----------------------------------------------------------- */
@media (max-width: 900px) {
  .nav__burger { display: block; }
  .entete { padding: calc(58px + 10px + env(safe-area-inset-top, 0px) + 32px) 20px 16px; }
  .feature--tete { padding-top: calc(58px + 10px + env(safe-area-inset-top, 0px) + 32px); }
  .decouvrir { padding: 0 20px 64px; }
  .plans { padding: 24px 20px 56px; }
  .plans__grille { grid-template-columns: 1fr; }
  .plan { padding: 30px 26px 26px; }
  .etab { padding: 0 20px 16px; }
  .etab__panneau { flex-direction: column; align-items: flex-start; padding: 28px 26px; }
  .docs { padding: 16px 20px 56px; }
  .faq--page { padding-top: 24px; }
  .footer__site { flex-direction: column; gap: 0; }
  .footer__site a { padding: 8px 0; }
}
@media (max-width: 900px) {
  .decouvrir__sheet { grid-template-columns: 1fr; }
  .decouvrir__carte + .decouvrir__carte { border-left: none; border-top: 1px solid var(--hairline); }
  .decouvrir__carte { padding: 24px 26px; }
}
@media (max-width: 480px) {
  .nav__panneau { top: calc(10px + 54px + 8px + env(safe-area-inset-top, 0px)); }
  .nav__burger { width: 38px; height: 38px; }
  .nav__burger span:nth-child(1) { top: 12px; }
  .nav__burger span:nth-child(2) { top: 18px; }
  .nav__burger span:nth-child(3) { top: 24px; }
}
/* Tarifs : les engagements sont plus longs que les avantages de l'accueil ;
   justifiés dans une colonne étroite, ils laissaient de grands trous. */
.benefits--engagements .benefit__desc { text-align: left; }
/* Sécurité : la section ouvre la page, son titre (h1) passe donc à GAUCHE,
   et l'illustration se cale en haut au lieu d'être alignée sur le bas. */
@media (min-width: 901px) {
  .feature--tete .feature__inner { align-items: start; }
  .feature--tete .feature__text { order: 1; }
  .feature--tete .feature__mockup { order: 2; margin-top: 40px; }
}

/* =========================================================
   CATALOGUE PUBLIC DES EXERCICES (/exercices…, lib/catalogue-public.js)
   Pages construites par le serveur depuis la base.
   ========================================================= */
.cat { padding: 16px 24px 72px; }
.cat__inner { max-width: 1180px; margin: 0 auto; }
.cat__fil {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin-bottom: 28px; font-size: 0.86rem; color: var(--so-text-3);
}
.cat__fil a { color: var(--so-text-2); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .cat__fil a:hover { color: var(--so-accent-deep); } }
.cat__fil [aria-current] { color: var(--so-text); font-weight: 600; }
.cat__titre {
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; letter-spacing: -1px;
  margin: 8px 0 18px;
}
.cat__titre + .cat__portes { margin-bottom: 48px; }
.cat__portes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.cat__porte {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 26px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  box-shadow: var(--so-shadow-md), var(--so-specular-lg);
  color: var(--so-text);
  transition: background 0.15s;
}
@media (hover: hover) and (pointer: fine) { .cat__porte:hover { background: var(--so-accent-hover); } }
.cat__porte-titre { font-size: 1.08rem; font-weight: 700; }
.cat__porte-compte { font-size: 0.86rem; font-weight: 700; color: var(--so-accent-deep); }
.cat__porte-texte { font-size: 0.88rem; color: var(--so-text-2); line-height: 1.6; }
.cat__sheet {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 24px;
  box-shadow: var(--so-shadow-md), var(--so-specular-lg);
  overflow: hidden;
}
.cat__bloc { padding: 28px 36px; scroll-margin-top: 90px; }
.cat__bloc + .cat__bloc { border-top: 1px solid var(--hairline); }
.cat__notion { font-size: 1.12rem; font-weight: 800; margin-bottom: 8px; }
.cat__exos { list-style: none; }
.cat__exos li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px;
  padding: 12px 0;
}
.cat__exos li + li { border-top: 1px solid var(--hairline); }
.cat__exo-nom { font-size: 0.95rem; font-weight: 700; }
.cat__exo-niveaux { font-size: 0.8rem; color: var(--so-text-3); text-align: right; white-space: nowrap; }
.cat__exo-desc { grid-column: 1 / -1; font-size: 0.88rem; color: var(--so-text-2); line-height: 1.6; }
.cat__voisins { margin-top: 24px; font-size: 0.92rem; color: var(--so-text-2); line-height: 1.8; }
.cat__voisins a { color: var(--so-accent-deep); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .cat__voisins a:hover { color: var(--so-text); } }
.cat__voisins + .cat__voisins { margin-top: 6px; }
.entete__desc a { color: var(--so-accent-deep); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .entete__desc a:hover { color: var(--so-text); } }
@media (max-width: 900px) {
  .cat { padding: 8px 20px 56px; }
  .cat__bloc { padding: 22px 22px; }
  .cat__portes { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cat__exos li { grid-template-columns: 1fr; }
  .cat__exo-niveaux { text-align: left; }
}