/* ===========================================================================
   dakan-studios.com — feuille de style commune aux pages de contenu
   (prix, Abidjan, France, métiers, refonte, questions)

   La page d'accueil garde son CSS embarqué : elle est unique, très lourde en
   animations, et n'a rien à partager. Les pages de contenu, elles, sont huit
   variations du même gabarit — dupliquer 130 lignes huit fois était intenable.

   Conséquence pratique : ce fichier doit TOUJOURS être envoyé en même temps
   que les pages. Sans lui, elles s'affichent en texte brut.
   =========================================================================== */

/* --- 1. Jetons de couleur ------------------------------------------------ */
/* Les mêmes noms que la page d'accueil, pour que le thème choisi par le
   visiteur le suive d'une page à l'autre (même clé localStorage). */
:root,
:root[data-theme="sombre"] {
  --bg: #08090d;
  --bg2: #0b0d14;
  --panel: rgba(255, 255, 255, .035);
  --panel2: rgba(255, 255, 255, .06);
  --ink: #f5f7fc;
  --mut: #9aa4bd;
  --faint: #6a7288;
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .15);
  --grad: linear-gradient(115deg, #6366f1, #22d3ee);
  --sh: 0 20px 60px rgba(0, 0, 0, .5);
  --sur-grad: #05060a;
}

/* Le clair est beige, pas blanc : le blanc pur fait « gabarit gratuit ». */
:root[data-theme="clair"] {
  --bg: #f2ece1;
  --bg2: #e9e1d3;
  --panel: rgba(31, 26, 20, .04);
  --panel2: rgba(31, 26, 20, .075);
  --ink: #191512;
  --mut: #5b5349;
  --faint: #8b8175;
  --line: rgba(31, 26, 20, .13);
  --line2: rgba(31, 26, 20, .22);
  --grad: linear-gradient(115deg, #4f46e5, #0e7490);
  --sh: 0 20px 60px rgba(80, 60, 35, .16);
  --sur-grad: #fdfbf7;
}

:root {
  --i: #6366f1;
  --c: #22d3ee;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --disp: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --maxw: 860px;
}

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

/* `overflow-x: clip` et non `hidden`. `hidden` transforme l'élément en
   conteneur de défilement et casse silencieusement tous les `position:sticky`
   descendants — la barre de navigation cesse de coller. Piège vérifié. */
html { scroll-behavior: smooth; overflow-x: clip }
body {
  overflow-x: clip;
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
@supports not (overflow: clip) {
  html { overflow-x: hidden }
  body { overflow-x: visible }
}

img, svg { display: block; max-width: 100% }
a { color: inherit }
h1, h2, h3, h4 {
  font-family: var(--disp);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.03em;
}
::selection { background: var(--i); color: #fff }
:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 8px }

/* Les largeurs de lecture se posent sur le TEXTE, jamais sur le conteneur.
   L'unité `ch` se calcule sur la taille de police de l'élément lui-même :
   mise sur un conteneur, elle donne 176px au lieu de 700 et hache les titres
   à un mot par ligne. Erreur déjà commise, à ne pas refaire. */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px }
.g {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- 3. Barre du haut ---------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav .in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  font-size: 1rem;
}
.brand img { width: 27px; height: 27px; border-radius: 50% }
.nav .btn { margin-left: auto }
.theme {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mut);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color .3s, border-color .3s;
}
.theme:hover { color: var(--ink); border-color: var(--line2) }
.theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2 }
[data-theme="clair"] .theme .lune,
.theme .soleil { display: none }
[data-theme="clair"] .theme .soleil { display: block }

/* Sur très petit écran le bouton du haut mange tout : on raccourcit. */
@media (max-width: 460px) {
  .nav .btn { padding: 10px 14px; font-size: .86rem }
  .brand { font-size: .92rem }
}

/* --- 4. Boutons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: .94rem;
  padding: 11px 22px;
  border-radius: 13px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .45s var(--out), box-shadow .3s var(--ease);
}
.btn:hover { transform: translateY(-2px) }
.btn-p {
  background: var(--grad);
  color: var(--sur-grad);
  box-shadow: 0 8px 26px rgba(56, 120, 220, .3);
}
.btn-p:hover { box-shadow: 0 14px 38px rgba(56, 120, 220, .42) }
.btn-o { border-color: var(--line2); color: var(--ink); background: var(--panel) }
.btn-o:hover { border-color: var(--c) }

/* --- 5. Fil d'Ariane et en-tête ------------------------------------------ */
.fil { padding: 26px 0 0; font-size: .85rem; color: var(--mut) }
.fil a { color: var(--mut); text-decoration: none }
.fil a:hover { color: var(--ink) }

header.tete { padding: 26px 0 44px }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); margin: 14px 0 18px; max-width: 20ch }
.chapo { font-size: clamp(1.06rem, 1.7vw, 1.24rem); color: var(--mut); max-width: 56ch }
.maj {
  margin-top: 20px;
  font-size: .82rem;
  color: var(--faint);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- 6. Corps ------------------------------------------------------------ */
main { padding-bottom: 60px }
section { margin-top: 56px }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.05rem); margin-bottom: 16px; max-width: 26ch }
h3 { font-size: 1.16rem; margin: 26px 0 8px }
h4 { font-size: 1rem; margin: 0 0 6px }
p { margin-bottom: 15px; color: var(--mut); max-width: 68ch }
p strong, li strong { color: var(--ink); font-weight: 600 }
ul, ol { margin: 0 0 16px 20px; color: var(--mut); max-width: 66ch }
li { margin-bottom: 7px }
em { font-style: italic }

/* Liens dans le texte : soulignés, parce qu'une couleur seule ne suffit pas
   à un daltonien pour distinguer un lien d'un mot en gras. */
main p a, main li a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--c);
  text-underline-offset: 3px;
  transition: color .25s;
}
main p a:hover, main li a:hover { color: var(--c) }

/* --- 7. Sommaire des pages longues -------------------------------------- */
.somm {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  background: var(--panel);
  margin: 30px 0 0;
}
.somm b {
  display: block;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.somm ol { margin: 0 0 0 18px; font-size: .95rem; max-width: none }
.somm li { margin-bottom: 4px }
.somm a { color: var(--mut); text-decoration: none }
.somm a:hover { color: var(--ink) }

/* --- 8. Les trois formules ---------------------------------------------- */
.formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 }
@media (max-width: 760px) { .formules { grid-template-columns: 1fr } }
.f { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--panel) }
.f.pop {
  border-color: transparent;
  background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad) border-box;
  border: 1px solid transparent;
  box-shadow: var(--sh);
}
.f h3 { margin: 0 0 4px; font-size: 1.1rem }
.f .eur {
  font-family: var(--disp);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
}
.f .cfa { font-size: .86rem; color: var(--mut); margin-bottom: 14px }
.f ul { margin: 0; list-style: none; font-size: .92rem; max-width: none }
.f li { display: flex; gap: 8px; align-items: flex-start }
.f li::before { content: "✓"; color: var(--c); font-weight: 700; flex: none }

/* --- 9. Grille de cartes (métiers, arguments, étapes) -------------------- */
.grille { display: grid; gap: 14px; margin: 24px 0 }
.grille.c2 { grid-template-columns: repeat(2, 1fr) }
.grille.c3 { grid-template-columns: repeat(3, 1fr) }
@media (max-width: 760px) { .grille.c2, .grille.c3 { grid-template-columns: 1fr } }

.carte {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  background: var(--panel);
  transition: border-color .35s var(--ease), transform .5s var(--out);
}
.carte:hover { border-color: var(--line2); transform: translateY(-3px) }
.carte h3 { margin: 0 0 7px; font-size: 1.06rem }
.carte p { font-size: .94rem; margin-bottom: 0; max-width: none }
.carte .ic {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--grad);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  font-size: 1rem;
}

/* Une carte cliquable en entier : le lien couvre la carte. */
a.carte { text-decoration: none; display: block }
a.carte::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  color: var(--c);
  transition: transform .4s var(--out);
}
a.carte:hover::after { transform: translateX(4px) }

/* --- 10. Métier : bloc de conseil par corps de métier -------------------- */
.metier {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
}
@media (max-width: 700px) { .metier { grid-template-columns: 1fr; gap: 8px } }
.metier h3 { margin: 0; font-size: 1.1rem }
.metier .quoi { font-size: .82rem; color: var(--faint); margin-top: 4px }
.metier p { margin-bottom: 0 }

/* --- 11. Étude de cas --------------------------------------------------- */
.cas {
  border: 1px solid var(--line2);
  border-radius: 20px;
  overflow: hidden;
  margin: 28px 0;
  background: var(--panel);
}
.cas img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover }
.cas .corps { padding: 22px }
.cas .eti {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 600;
}
.cas h3 { margin: 6px 0 10px; font-size: 1.24rem }
.cas p:last-child { margin-bottom: 0 }

/* --- 12. Chiffres clés -------------------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 }
@media (max-width: 620px) { .chiffres { grid-template-columns: 1fr } }
.ch { border-left: 2px solid var(--c); padding: 4px 0 4px 16px }
.ch b {
  display: block;
  font-family: var(--disp);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1.1;
}
.ch span { font-size: .9rem; color: var(--mut) }

/* --- 13. Étapes numérotées ---------------------------------------------- */
.etapes { list-style: none; margin: 24px 0; counter-reset: e; max-width: none }
.etapes li {
  counter-increment: e;
  position: relative;
  padding: 0 0 20px 46px;
  border-left: 1px solid var(--line);
  margin: 0 0 0 14px;
}
.etapes li:last-child { border-left-color: transparent; padding-bottom: 0 }
.etapes li::before {
  content: counter(e);
  position: absolute;
  left: -14px;
  top: -2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line2);
  color: var(--ink);
  font-family: var(--disp);
  font-size: .82rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.etapes b { color: var(--ink); display: block; margin-bottom: 3px }

/* --- 14. Tableaux ------------------------------------------------------- */
.tab { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem }
.tab th, .tab td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line) }
.tab th {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.tab td:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: var(--ink) }
/* Variante comparaison : la dernière colonne reste du texte, pas un prix. */
.tab.comp td:last-child { text-align: left; white-space: normal; font-weight: 400; color: var(--mut) }
.tab-enrobe { overflow-x: auto; -webkit-overflow-scrolling: touch }
.oui { color: #34d399; font-weight: 700 }
.non { color: #f87171; font-weight: 700 }

/* --- 15. Encadré -------------------------------------------------------- */
.note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--c);
  border-radius: 0 14px 14px 0;
  padding: 16px 18px;
  background: var(--panel);
  margin: 22px 0;
}
.note p:last-child { margin-bottom: 0 }
.note.att { border-left-color: #fbbf24 }

/* --- 16. Questions dépliables ------------------------------------------- */
details {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
  margin-bottom: 10px;
  background: var(--panel);
}
details[open] { background: var(--panel2) }
summary { cursor: pointer; font-weight: 600; list-style: none; color: var(--ink) }
summary::-webkit-details-marker { display: none }
summary::after { content: "+"; float: right; color: var(--mut); font-weight: 400 }
details[open] summary::after { content: "−" }
details p { margin: 12px 0 0 }
details p:last-child { margin-bottom: 0 }

/* --- 17. Appel final ---------------------------------------------------- */
.fin {
  margin-top: 60px;
  padding: 38px 26px;
  border: 1px solid var(--line2);
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(160deg, rgba(99, 102, 241, .12), transparent);
}
.fin h2 { margin: 0 auto 10px; max-width: none }
.fin p { margin-left: auto; margin-right: auto }
.fin .actions { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; margin-top: 22px }

/* --- 18. Pied de page ---------------------------------------------------- */
/* Il porte le maillage interne. Une page qui n'est liée que depuis le
   sitemap est une page orpheline : Google la trouve, mais ne lui accorde
   presque aucun poids. C'est ce pied de page qui fait circuler l'autorité. */
footer { border-top: 1px solid var(--line); padding: 40px 0 44px; margin-top: 20px }
.pied {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 30px;
}
@media (max-width: 700px) { .pied { grid-template-columns: 1fr; gap: 20px } }
.pied b {
  display: block;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.pied ul { list-style: none; margin: 0; font-size: .92rem; max-width: none }
.pied li { margin-bottom: 6px }
.pied a { color: var(--mut); text-decoration: none; transition: color .25s }
.pied a:hover { color: var(--ink) }
.copy { text-align: center; color: var(--faint); font-size: .88rem; padding-top: 22px;
  border-top: 1px solid var(--line) }
.copy a { color: var(--mut) }

/* --- 19. Apparition au défilement --------------------------------------- */
/* Le contenu est visible PAR DÉFAUT, et c'est vital : le masquage dépend de
   la classe `.anim`, que SEUL page.js pose, et seulement une fois qu'il a
   vérifié pouvoir la retirer. La classe `.js` du <head> ne convenait pas —
   elle est posée avant le chargement de page.js, si bien qu'un script
   manquant ou bloqué laissait la page définitivement vide.
   Voir la cascade au §32. */

/* --- 19 bis. Zones tactiles --------------------------------------------- */
/* Mesuré sur un écran de 375 px : les liens du sommaire et du pied faisaient
   19 px de haut. Au doigt, une cible de moins de 24 px se rate régulièrement —
   et le visiteur croit que le site ne répond pas.
   On n'élargit que sur écran tactile : sur ordinateur, la souris est précise
   et l'espacement serré reste plus élégant.
   Les liens en pleine phrase sont volontairement exclus — les agrandir
   déchirerait l'interlignage du paragraphe pour un gain nul, le doigt visant
   naturellement le mot. */
@media (pointer: coarse) {
  .somm li a, .pied li a, .fil a { display: inline-block; padding: 7px 0 }
  .somm li, .pied li { margin-bottom: 1px }
  summary { padding: 4px 0 }
}

/* ==========================================================================
   COUCHE PREMIUM
   Ce qui suit ne sert pas à décorer : chaque élément répond à un manque
   mesuré sur ces pages longues. L'aurore et le grain reprennent la signature
   de la page d'accueil pour qu'on ne change pas de site en cliquant ; le rail
   et la jauge répondent au « où suis-je » sur 2 500 mots ; le spotlight et
   l'onde donnent la sensation de matière qui manquait au survol plat.
   ========================================================================== */

/* --- 22. L'aurore ------------------------------------------------------- */
/* Trois halos très flous qui dérivent lentement. C'est ce qui remplace le
   fond plat par une profondeur — le même procédé que l'accueil, en plus
   sobre puisqu'ici c'est le texte qui doit primer. */
.aurore {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.aurore i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .42;
  will-change: transform;
}
.aurore i:nth-child(1) {
  width: 46vw; height: 46vw; left: -13vw; top: -14vw;
  background: radial-gradient(circle, #6366f1, transparent 68%);
  animation: derive1 34s var(--ease) infinite alternate;
}
.aurore i:nth-child(2) {
  width: 40vw; height: 40vw; right: -12vw; top: 22vh;
  background: radial-gradient(circle, #22d3ee, transparent 68%);
  animation: derive2 41s var(--ease) infinite alternate;
}
.aurore i:nth-child(3) {
  width: 34vw; height: 34vw; left: 26vw; bottom: -18vh;
  background: radial-gradient(circle, #8b5cf6, transparent 70%);
  animation: derive3 47s var(--ease) infinite alternate;
}
/* En thème clair les halos doivent être beaucoup plus discrets : sur un beige
   pâle, la même opacité donnerait une bouillie colorée illisible. */
[data-theme="clair"] .aurore i { opacity: .2; filter: blur(105px) }

@keyframes derive1 { to { transform: translate3d(7vw, 5vh, 0) scale(1.14) } }
@keyframes derive2 { to { transform: translate3d(-6vw, -7vh, 0) scale(1.1) } }
@keyframes derive3 { to { transform: translate3d(5vw, -5vh, 0) scale(1.18) } }

/* --- 23. Le grain ------------------------------------------------------- */
/* Une texture imperceptible, mais c'est elle qui empêche les grands aplats de
   dégradé de « baver » en bandes visibles sur les écrans 8 bits. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="clair"] .grain { opacity: .03 }

/* --- 24. La jauge de lecture -------------------------------------------- */
.jauge {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: 0;
  z-index: 60;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(99, 102, 241, .7);
  transition: width .12s linear;
}

/* --- 25. Le rail de sections -------------------------------------------- */
/* Sur 2 500 mots, la question du lecteur est « il m'en reste combien ? ».
   Le rail y répond en permanence, sans occuper une ligne de la mise en page.
   Réservé aux écrans assez larges : sous 1 180 px il chevaucherait le texte. */
.rail { display: none }
@media (min-width: 1180px) {
  .rail {
    display: grid;
    gap: 14px;
    position: fixed;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
  }
  .rail a {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--faint);
    font-size: .78rem;
    line-height: 1.25;
  }
  .rail .pt {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--line2);
    flex: none;
    transition: background .4s var(--ease), transform .5s var(--out), box-shadow .4s;
  }
  /* Le libellé n'apparaît qu'au survol : au repos, seuls les points sont
     visibles — on donne le repère sans encombrer la marge. */
  .rail .lb {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .5s var(--out), opacity .35s var(--ease);
  }
  .rail:hover .lb { max-width: 190px; opacity: 1 }
  .rail a:hover .pt { background: var(--ink); transform: scale(1.3) }
  .rail a:hover { color: var(--ink) }
  .rail a.on .pt {
    background: var(--c);
    transform: scale(1.5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent);
  }
  .rail a.on { color: var(--ink) }
}

/* --- 26. Retour en haut -------------------------------------------------- */
.haut {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  z-index: 40;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--line2);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.85);
  transition: opacity .4s var(--ease), transform .55s var(--out), visibility 0s linear .4s;
}
.haut.vu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .4s var(--ease), transform .55s var(--out), visibility 0s;
}
.haut:hover { border-color: var(--c); transform: translateY(-3px) }
.haut:active { transform: scale(.9); transition: transform .07s cubic-bezier(.3,0,.35,1) }
.haut svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round }

/* --- 27. La signature typographique ------------------------------------- */
/* L'italique serif du mot mis en avant, exactement comme sur l'accueil
   (« Des sites qui séduisent »). C'est le détail qui fait reconnaître la
   même main d'une page à l'autre. */
h1 .g {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  /* Le dégradé s'anime très lentement : perceptible sans jamais distraire. */
  background-size: 200% 100%;
  animation: coule 9s ease-in-out infinite alternate;
}
@keyframes coule { to { background-position: 100% 0 } }

/* Les ancres ne doivent pas se glisser SOUS la barre collante — sinon on
   clique sur une entrée du sommaire et le titre visé reste caché. */
main section, h2[id], h3[id] { scroll-margin-top: 84px }

/* Une numérotation discrète des sections : repère de lecture, et cadence
   éditoriale. */
main { counter-reset: sect }
main section > h2 { counter-increment: sect; position: relative }
@media (min-width: 700px) {
  main section > h2::before {
    content: counter(sect, decimal-leading-zero);
    position: absolute;
    left: -54px;
    top: .35em;
    font-family: var(--body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--faint);
  }
}

/* --- 28. Le spotlight des cartes ---------------------------------------- */
/* Une lueur qui suit le curseur à l'intérieur de la carte. C'est ce qui
   donne l'impression de matière : la carte réagit à l'approche, elle n'est
   plus un rectangle inerte. */
.carte, .f, .cas, .note, .somm { position: relative; isolation: isolate }
.carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .45s var(--ease);
  background: radial-gradient(340px circle at var(--sx, 50%) var(--sy, 50%),
              color-mix(in srgb, var(--i) 16%, transparent), transparent 62%);
}
.carte:hover::before { opacity: 1 }

/* Le liseré supérieur qui se déploie au survol — repris des cartes de
   l'accueil, pour la même raison de continuité. */
.carte::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: inherit;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--out);
}
.carte:hover::after { transform: scaleX(1) }
/* La flèche des cartes-liens était portée par ::after — on la remet sur le
   titre, puisque ::after sert désormais au liseré. */
a.carte::after { content: "" }
a.carte h3 { padding-right: 22px }
a.carte h3::after {
  content: "→";
  color: var(--c);
  margin-left: 7px;
  display: inline-block;
  transition: transform .4s var(--out);
}
a.carte:hover h3::after { transform: translateX(5px) }

/* --- 29. Les boutons magnétiques et l'onde ------------------------------ */
/* Mêmes gestes que sur l'accueil : le bouton se décale légèrement vers le
   curseur, s'enfonce au clic, et une onde part du point exact touché. */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --onde: rgba(255, 255, 255, .34);
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift, 0px)), 0);
}
[data-theme="clair"] .btn { --onde: rgba(31, 26, 20, .15) }
.btn-p, [data-theme="clair"] .btn-p { --onde: rgba(255, 255, 255, .5) }
.btn:hover { --lift: -2px }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(60% 130% at var(--gx, 50%) 50%, rgba(255,255,255,.24), transparent 70%);
}
.btn:hover::before { opacity: 1 }
.btn:active {
  --lift: 0px;
  transform: translate3d(var(--mx,0px), var(--my,0px), 0) scale(.967);
  transition: transform .08s cubic-bezier(.3,0,.35,1);
}
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  left: var(--ox, 50%); top: var(--oy, 50%);
  width: var(--od, 120px); height: var(--od, 120px);
  margin-left: calc(var(--od, 120px) / -2);
  margin-top: calc(var(--od, 120px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, var(--onde) 0%, transparent 70%);
}
.btn.onde::after { animation: onde .62s cubic-bezier(.16, 1, .3, 1) }
@keyframes onde { from { opacity: 1; transform: scale(0) } to { opacity: 0; transform: scale(1) } }

.theme:active { transform: rotate(-18deg) scale(.9); transition: transform .07s cubic-bezier(.3,0,.35,1) }
.dopt:active, .at-jour:active, details summary:active { transform: scale(.985) }

/* --- 30. Les questions, dépliage fluide --------------------------------- */
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color .3s var(--ease);
}
summary:hover { color: var(--c) }
summary::after {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  border-right: 2px solid var(--mut);
  border-bottom: 2px solid var(--mut);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .45s var(--out), border-color .3s;
}
details[open] summary::after { transform: rotate(-135deg) translateY(-2px); border-color: var(--c) }
details { transition: background .35s var(--ease), border-color .35s var(--ease) }
details:hover { border-color: var(--line2) }
details[open] > *:not(summary) { animation: deplie .45s var(--out) both }
@keyframes deplie { from { opacity: 0; transform: translateY(-7px) } to { opacity: 1; transform: none } }

/* --- 31. Tableaux et chiffres ------------------------------------------- */
.tab tbody tr { transition: background .3s var(--ease) }
.tab tbody tr:hover { background: var(--panel) }
.ch { position: relative; overflow: hidden }
.ch::before {
  content: "";
  position: absolute;
  left: -2px; top: 0;
  width: 2px; height: 100%;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .8s var(--out);
}
.rev.vu .ch::before { transform: scaleY(1) }

/* --- 32. Révélation en cascade ------------------------------------------ */
/* Les enfants directs d'une section se découvrent l'un après l'autre plutôt
   que d'un bloc : le regard suit la lecture au lieu de tout recevoir d'un
   coup. Le décalage reste court — au-delà, ça devient une attente. */
.anim .rev > * { opacity: 0; transform: translateY(14px) }
.anim .rev.vu > * {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease) calc(var(--d, 0) * 70ms),
              transform .8s var(--out) calc(var(--d, 0) * 70ms);
}
/* La section elle-même ne bouge plus : ce sont ses enfants qui entrent. */
.anim .rev { opacity: 1; transform: none }

/* --- 20. Mouvement réduit ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .btn, .carte, .haut { transition: none }
  .btn:hover, .carte:hover, .haut:hover { transform: none }
  .anim .rev, .anim .rev > * { opacity: 1; transform: none }
  .js .rev.vu, .anim .rev.vu > * { transition: none }
  .aurore i { animation: none }
  h1 .g { animation: none }
  .btn.onde::after { animation: none }
  .btn:active { transform: none; filter: brightness(.93) }
  details[open] > *:not(summary) { animation: none }
  .rev.vu .ch::before { transition: none }
  .jauge { transition: none }
}

/* --- 21. Impression ----------------------------------------------------- */
@media print {
  .nav, .fin .actions, .pied { display: none }
  body { background: #fff; color: #000 }
  a { text-decoration: underline }
  details { border: none; padding: 0 }
  details[open] summary::after, summary::after { content: "" }
}