/* ============================================================================
   formation-claude.ch — feuille de style unique, écrite MOBILE FIRST.

   Les styles de base valent pour un écran de 360 px. Les media queries
   ÉLARGISSENT (min-width), elles ne rattrapent jamais. Rien n'est masqué
   sans être remplacé par un équivalent utilisable au doigt.

   Identité : ivoire et terracotta, inspirée de l'univers Claude sans l'imiter.
   Site indépendant : aucun logo Anthropic, mention d'indépendance sur chaque page.
   ========================================================================== */

:root {
  /* couleurs */
  --ivoire:        #FAF9F5;
  --ivoire-creux:  #F2F0E9;
  --creme:         #EDE9DF;
  --terracotta:    #C96442;
  --terracotta-fp: #A94F32;
  --terracotta-pale:#F6E7E0;
  --terracotta-clair:#E08B6B;  /* fin du dégradé du logo */
  --lien:          #96452B;    /* terracotta assombri, lisible en petit texte */
  --gris-inerte:   #DDD8CD;    /* pastilles décoratives de la fenêtre */
  --encre:         #1F1E1D;
  --encre-douce:   #4A4744;
  --encre-legere:  #605C57;
  --filet:         #E2DED4;
  --blanc:         #FFFFFF;

  /* typographie : serif chaleureux pour les titres, sans neutre pour le texte */
  --titre: 'Newsreader', Georgia, 'Times New Roman', serif;
  --texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* échelle : 8 paliers, rien en dehors. Le corps ne descend jamais sous 16 px. */
  --t-xs: 13px; --t-sm: 15px; --t-md: 16px; --t-lg: 20px;
  --t-xl: 26px; --t-2xl: 34px; --t-3xl: 44px; --t-4xl: 56px;

  /* espacement : trame de 8 */
  --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 32px;
  --e-5: 48px; --e-6: 64px; --e-7: 96px; --e-8: 128px;

  /* respiration verticale des sections : petite d'abord, elle grandit */
  --section-y: var(--e-5);

  /* grille de composition : 12 colonnes, tout se place sur ses lignes */
  --cols: 12;
  --gouttiere: 24px;
  --maxw: 1360px;
  --lecture: 68ch;            /* longueur de ligne confortable */

  --rayon: 14px;
  --rayon-sm: 8px;
  --tactile: 44px;            /* cible tactile minimale */
  --ombre: 0 1px 2px rgba(31,30,29,.04), 0 8px 24px rgba(31,30,29,.06);
  --ombre-forte: 0 2px 4px rgba(31,30,29,.06), 0 16px 48px rgba(31,30,29,.10);
  --transition: 200ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--texte);
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--encre-douce);
  background: var(--ivoire);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--titre); color: var(--encre); line-height: 1.15;
                 letter-spacing: -.02em; margin: 0 0 var(--e-2); font-weight: 500;
                 overflow-wrap: break-word; }
h1 { font-size: var(--t-2xl); letter-spacing: -.03em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
p  { margin: 0 0 var(--e-3); }
a  { color: var(--lien); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--terracotta);
                                        outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; height: auto; }

.contenu, .contenu-etroit { width: 100%; margin: 0 auto; padding: 0 var(--e-3); }

/* ---------------------------------------------------------------- navigation */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(250,249,245,.94);
       backdrop-filter: blur(12px); border-bottom: 1px solid var(--filet); }
.nav-inner { display: flex; align-items: center; justify-content: space-between;
             gap: var(--e-2); min-height: 64px; }
.marque { font-family: var(--titre); font-size: var(--t-lg); color: var(--encre);
          display: flex; align-items: center; gap: 10px; letter-spacing: -.02em;
          min-height: var(--tactile); }
.marque:hover { text-decoration: none; }
.marque-point { width: 22px; height: 22px; border-radius: 6px; flex: none;
                background: linear-gradient(135deg, var(--terracotta), var(--terracotta-clair)); }

/* le bouton de menu existe d'abord ; il disparaît quand l'écran s'élargit */
.burger { display: flex; width: var(--tactile); height: var(--tactile); flex: none;
          align-items: center; justify-content: center; background: none;
          border: 1px solid var(--filet); border-radius: var(--rayon-sm);
          cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 2px; background: var(--encre);
               position: relative; border-radius: 2px; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0;
               width: 18px; height: 2px; background: var(--encre); border-radius: 2px; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

/* panneau de navigation : replié par défaut, jamais supprimé */
.nav-liens { position: absolute; left: 0; right: 0; top: 100%;
             display: flex; flex-direction: column; align-items: stretch;
             background: var(--ivoire); border-bottom: 1px solid var(--filet);
             padding: var(--e-1) var(--e-3) var(--e-3); box-shadow: var(--ombre);
             transform: translateY(-8px); opacity: 0; pointer-events: none;
             transition: var(--transition); }
.nav[data-ouvert="oui"] .nav-liens { transform: none; opacity: 1; pointer-events: auto; }
.nav-liens a { display: flex; align-items: center; min-height: 48px;
               color: var(--encre-douce); font-size: var(--t-md); font-weight: 500;
               border-bottom: 1px solid var(--filet); }
.nav-liens a:hover { color: var(--terracotta-fp); text-decoration: none; }
.nav-liens a.bouton { justify-content: center; margin-top: var(--e-2); border-bottom: none;
                      color: var(--blanc); }

/* -------------------------------------------------------------------- boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1);
          min-height: var(--tactile); padding: 12px var(--e-3); border-radius: var(--rayon-sm);
          font-family: var(--texte); font-size: var(--t-sm); font-weight: 600;
          background: var(--terracotta-fp); color: var(--blanc); border: 1px solid var(--terracotta-fp);
          transition: var(--transition); cursor: pointer; }
.bouton:hover { background: var(--terracotta); border-color: var(--terracotta);
                text-decoration: none; }
.bouton-clair { background: transparent; color: var(--encre); border-color: var(--filet); }
.bouton-clair:hover { background: var(--creme); color: var(--encre); border-color: var(--encre-legere); }
.actions { display: flex; flex-direction: column; gap: var(--e-2); }

/* ---------------------------------------------------------------------- hero */
.hero { padding: var(--e-5) 0; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 340px at 80% -10%, var(--terracotta-pale) 0%, transparent 62%);
  pointer-events: none; }
.hero-grille { display: grid; grid-template-columns: 1fr; gap: var(--e-4);
               align-items: center; position: relative; }
.kicker { display: inline-flex; align-items: center; gap: var(--e-1);
          font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em;
          text-transform: uppercase; color: var(--terracotta-fp);
          background: var(--terracotta-pale); padding: 6px 14px; border-radius: 99px;
          margin-bottom: var(--e-3); }
.chapo { font-size: var(--t-lg); line-height: 1.55; color: var(--encre-douce);
         max-width: 46ch; margin-bottom: var(--e-4); }

/* fenêtre de conversation, en CSS pur */
.fenetre { background: var(--blanc); border: 1px solid var(--filet);
           border-radius: var(--rayon); box-shadow: var(--ombre-forte); overflow: hidden; }
.fenetre-barre { display: flex; align-items: center; gap: 6px; padding: 12px var(--e-2);
                 border-bottom: 1px solid var(--filet); background: var(--ivoire-creux); }
.pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--gris-inerte); }
.fenetre-corps { padding: var(--e-2); display: flex; flex-direction: column; gap: var(--e-2); }
.bulle { padding: 12px 14px; border-radius: 12px; font-size: var(--t-md); line-height: 1.5; }
.bulle-humain { background: var(--ivoire-creux); color: var(--encre-douce); align-self: flex-end;
                max-width: 88%; border-bottom-right-radius: 3px; }
.bulle-claude { background: var(--terracotta-pale); color: var(--encre); align-self: flex-start;
                max-width: 94%; border-bottom-left-radius: 3px; }
.bulle-claude strong { color: var(--terracotta-fp); }

/* -------------------------------------------------------------------- sections */
.section { padding: var(--section-y) 0; }
.section-creme { background: var(--creme); border-block: 1px solid var(--filet); }
.section-titre { max-width: 640px; margin-bottom: var(--e-4); }
.section-titre p { color: var(--encre-legere); margin: 0; }

.grille-2, .grille-3 { display: grid; grid-template-columns: 1fr; gap: var(--e-3); }

.carte { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
         padding: var(--e-3); transition: var(--transition); }
.carte:hover { box-shadow: var(--ombre); }
.carte h3 { margin-bottom: var(--e-1); }
.carte p { color: var(--encre-legere); font-size: var(--t-md); margin: 0; }
.carte-num { font-family: var(--titre); font-size: var(--t-2xl); color: var(--terracotta);
             opacity: .32; line-height: 1; display: block; margin-bottom: var(--e-1); }

.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.chiffre { text-align: center; padding: var(--e-2); background: var(--blanc);
           border: 1px solid var(--filet); border-radius: var(--rayon-sm); }
.chiffre .v { font-family: var(--titre); font-size: var(--t-xl); color: var(--encre);
              line-height: 1; display: block; }
.chiffre .l { font-size: var(--t-xs); color: var(--encre-legere); margin-top: var(--e-1);
              display: block; }

.liste-filet { list-style: none; padding: 0; margin: 0; }
.liste-filet li { padding: var(--e-2) 0; border-bottom: 1px solid var(--filet);
                  display: grid; grid-template-columns: 24px 1fr; gap: var(--e-2); }
.liste-filet li:last-child { border-bottom: none; }
.liste-filet .puce { color: var(--lien); font-weight: 700; }

.exergue { font-family: var(--titre); font-size: var(--t-lg); line-height: 1.4;
           color: var(--encre); border-left: 3px solid var(--terracotta);
           padding-left: var(--e-2); margin: var(--e-4) 0; }

.bandeau { background: var(--encre); color: var(--ivoire); border-radius: var(--rayon);
           padding: var(--e-4) var(--e-3); text-align: center; }
.bandeau h2 { color: var(--ivoire); }
.bandeau p { color: rgba(250,249,245,.74); max-width: 52ch; margin: 0 auto var(--e-3); }

/* ---------------------------------------------------------------------- pied */
.pied { background: var(--ivoire-creux); border-top: 1px solid var(--filet);
        padding: var(--e-5) 0 var(--e-3); margin-top: 0; }
.pied-grille { display: grid; grid-template-columns: 1fr; gap: var(--e-4); }
.pied-titre { font-family: var(--texte); font-size: var(--t-xs); letter-spacing: .1em;
           text-transform: uppercase; color: var(--encre-legere); margin-bottom: var(--e-1); }
.pied a { display: flex; align-items: center; min-height: var(--tactile);
          color: var(--encre-douce); font-size: var(--t-sm); }
.pied-bas { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--filet);
            display: flex; flex-direction: column; gap: var(--e-1);
            font-size: var(--t-xs); color: var(--encre-legere); }
.avis-independance { font-size: var(--t-md); color: var(--encre-legere); line-height: 1.5;
                     max-width: 42ch; }

/* ============================================================================
   À partir d'ici, on ÉLARGIT. Rien n'est rattrapé, tout est déjà utilisable.
   ========================================================================== */

@media (min-width: 640px) {
  :root { --section-y: var(--e-5); }
  h1 { font-size: var(--t-3xl); }
  h2 { font-size: var(--t-2xl); }
  .contenu, .contenu-etroit { padding: 0 var(--e-4); }
  .grille-2, .grille-3 { grid-template-columns: 1fr 1fr; gap: var(--e-3); }
  .chiffres { grid-template-columns: repeat(4, 1fr); }
  .actions { flex-direction: row; flex-wrap: wrap; }
  .carte { padding: var(--e-4); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-bas { flex-direction: row; justify-content: space-between; gap: var(--e-3); }
  .bandeau { padding: var(--e-6) var(--e-5); }
  .exergue { font-size: var(--t-xl); padding-left: var(--e-3); }
}

@media (min-width: 1024px) {
  :root { --section-y: var(--e-6); }
  h1 { font-size: var(--t-4xl); }
  h2 { font-size: var(--t-3xl); }
  .contenu { max-width: var(--maxw); }
  .contenu-etroit { max-width: 720px; }
  .hero { padding: var(--e-6) 0; }
  .hero-grille { grid-template-columns: 1.1fr .9fr; gap: var(--e-5); }
  .grille-3 { grid-template-columns: repeat(3, 1fr); }
  .grille-2 { gap: var(--e-4); }
  .pied-grille { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .fenetre-corps { padding: var(--e-3); }
  .carte:hover { transform: translateY(-2px); }
  .bouton:hover { transform: translateY(-1px); }

  /* la navigation se déplie : le bouton n'a plus lieu d'être */
  .burger { display: none; }
  .nav-liens { position: static; flex-direction: row; align-items: center;
               gap: var(--e-4); background: none; border: none; padding: 0;
               box-shadow: none; transform: none; opacity: 1; pointer-events: auto; }
  .nav-liens a { min-height: auto; border-bottom: none; font-size: var(--t-sm); }
  .nav-liens a.bouton { margin-top: 0; min-height: var(--tactile); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ utilitaires
   Ces classes existent pour qu'aucune taille et aucune couleur ne soit écrite
   dans une page. Une valeur en dur dans un fichier de contenu échappe au
   système et finit par diverger. */
.hero-texte   { max-width: 720px; position: relative; }
/* Page dont le corps occupe toute la largeur : le titre s'aligne sur son bord
   gauche, sinon il flotte 200 px à droite des titres qui le suivent. */
.hero-texte-large { position: relative; }
.hero-texte-large > * { max-width: 820px; }
.hero-texte-court { max-width: 720px; position: relative; }
.note         { font-size: var(--t-md); color: var(--encre-legere); }
.note-large   { font-size: var(--t-md); color: var(--encre-legere); max-width: 70ch; }
.espace-2     { margin-top: var(--e-2); }
.espace-3     { margin-top: var(--e-3); }
.espace-4     { margin-top: var(--e-4); }
.sous-titre   { font-size: var(--t-md); }
/* bouton posé sur un fond sombre : le contour reprend l'ivoire en transparence */
.bouton-fantome { background: transparent; color: var(--ivoire);
                  border-color: rgba(250, 249, 245, .28); }
.bouton-fantome:hover { background: rgba(250, 249, 245, .10); color: var(--ivoire);
                        border-color: rgba(250, 249, 245, .45); }

/* mise en page fine, pour que les fichiers de contenu ne portent aucun style */
.hero-serre    { padding-bottom: var(--e-4); }
.section-collee{ padding-top: 0; }
.haut-aligne   { align-items: start; }
.centre-tout   { align-items: center; justify-content: center; }
.centre        { align-items: center; }
.texte-centre  { text-align: center; }
.texte-douce   { color: var(--encre-douce); }
.texte-legere  { color: var(--encre-legere); }
.serre-bas     { margin-bottom: var(--e-2); }

/* portrait de l'auteur : la photo passe au-dessus du texte sur mobile,
   à gauche dès que la place existe */
.portrait-bloc { display: grid; grid-template-columns: 1fr; gap: var(--e-3);
                 align-items: center; position: relative; max-width: 820px; }
.portrait { width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
            border: 4px solid var(--blanc); box-shadow: var(--ombre-forte); }

@media (min-width: 640px) {
  .portrait-bloc { grid-template-columns: auto 1fr; gap: var(--e-4); }
  .portrait { width: 176px; height: 176px; }
}

/* L'écran s'élargit : le texte secondaire peut redescendre d'un cran.
   En dessous de 640 px il reste à 16 px, seuil de confort de lecture. */
@media (min-width: 640px) {
  .carte p, .bulle, .note, .note-large { font-size: var(--t-sm); }
  .avis-independance { font-size: var(--t-xs); }
}

/* fil d'Ariane : discret, mais présent dès le mobile */
.ariane { border-bottom: 1px solid var(--filet); background: var(--ivoire); }
/* Un fil d'Ariane est une phrase, pas une barre de boutons : ses liens
   restent en ligne, comme un lien dans un texte. */
.ariane .contenu { padding-block: var(--e-2); font-size: var(--t-sm);
                   color: var(--encre-legere); line-height: 2.2; }
.ariane a { display: inline; color: var(--encre-legere); min-height: auto;
            padding-block: var(--e-1); }
.ariane a:hover { color: var(--terracotta-fp); }
.ariane-sep { color: var(--encre-legere); margin-inline: var(--e-1); }
.ariane [aria-current="page"] { color: var(--encre-douce); }

/* ============================================================================
   COMPOSITION SUR GRAND ÉCRAN

   « Mobile d'abord » veut dire que la petite largeur est le point de départ,
   PAS que l'ordinateur reçoit une page mobile étirée avec du vide autour.
   À partir de 1024 px la page se compose sur une grille de 12 colonnes :
   le titre de section tient la marge gauche pendant que son contenu défile
   en regard, sur neuf colonnes. Rien n'est centré par défaut.
   ========================================================================== */

@media (min-width: 1024px) {

  /* --- la bande : titre en marge, contenu en regard ------------------------ */
  .contenu:has(> .section-titre) {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gouttiere);
    align-items: start;
  }
  .contenu:has(> .section-titre) > * { grid-column: 5 / -1; }
  .contenu:has(> .section-titre) > .section-titre {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(64px + var(--e-4));
    max-width: none;
    margin-bottom: 0;
  }
  /* un filet accompagne le titre en marge : il matérialise la colonne */
  .contenu:has(> .section-titre) > .section-titre::after {
    content: ""; display: block; width: 40px; height: 2px;
    background: var(--terracotta); margin-top: var(--e-3);
  }

  /* --- la colonne de lecture n'est plus centrée, elle est posée sur la grille */
  .contenu-etroit {
    max-width: var(--maxw);
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gouttiere);
  }
  .contenu-etroit > * { grid-column: 4 / 11; }
  /* les titres de niveau 2 débordent d'une colonne vers la marge : le lecteur
     repère la structure sans avoir à lire */
  .contenu-etroit > h2 { grid-column: 3 / 11; }

  /* --- le hero occupe la largeur, il ne flotte plus au centre -------------- */
  /* le conteneur du hero devient la grille, SAUF s'il porte déjà sa propre
     grille en deux parts (texte à gauche, démonstration à droite) */
  .hero > .contenu:not(.hero-grille),
  .hero > .contenu-etroit:not(.hero-grille) {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    column-gap: var(--gouttiere);
  }
  /* Le conteneur du hero EST la grille : ce sont ses enfants qui se placent,
     sur huit colonnes, empilés les uns sous les autres. */
  .hero-texte, .hero-texte-court, .hero-texte-large { max-width: none; }
  .hero-texte > *, .hero-texte-court > *, .hero-texte-large > * {
    grid-column: 1 / 9; max-width: 62ch;
  }
  /* la pastille de rubrique ne s'étire pas sur huit colonnes */
  .hero-texte > .kicker, .hero-texte-court > .kicker, .hero-texte-large > .kicker {
    justify-self: start;
  }
  .hero-grille { grid-template-columns: 7fr 5fr; gap: var(--e-5); align-items: center; }

  /* --- trame de fond : la grille du site, à peine visible ------------------ */
  .hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(90deg, var(--filet) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%;
    opacity: .5;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%);
  }
  .hero > * { position: relative; z-index: 1; }

  /* --- densité : deux sections de même fond ne cumulent plus leurs marges -- */
  .section + .section:not(.section-creme) { padding-top: 0; }
  .hero + .section:not(.section-creme) { padding-top: 0; }
  .hero { padding-bottom: var(--e-5); }
  .section-creme + .section { padding-top: var(--section-y); }

  /* --- le bandeau final occupe la largeur, sans caisson centré ------------- */
  .bandeau { padding: var(--e-6) var(--e-6); text-align: left; }
  .bandeau p { margin-left: 0; max-width: 58ch; }
  .bandeau .actions { justify-content: flex-start; }
}

/* 1440 px et au-delà : la grille cesse de s'étirer, les marges prennent le reste */
@media (min-width: 1440px) {
  :root { --gouttiere: 32px; }
}

/* ============================================================================
   MOUVEMENT

   Un seul moment orchestré, à l'ouverture : la page se compose, puis la
   conversation se joue, bulle après bulle. C'est le sujet du site qui se
   montre lui-même, pas un effet posé par-dessus.
   Ensuite, plus rien d'automatique : seulement des blocs qui se posent à
   l'arrivée dans l'écran, et des réactions au survol.

   Tout est neutralisé si le système demande moins d'animation (bloc plus bas).
   ========================================================================== */

@keyframes monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entre-bulle {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes trait {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- ouverture : la page se compose de haut en bas ------------------------ */
.hero .kicker,
.hero h1,
.hero .chapo,
.hero .actions,
.hero .note,
.hero .fenetre {
  animation: monte 620ms cubic-bezier(.16,1,.3,1) backwards;
}
.hero .kicker  { animation-delay:  40ms; }
.hero h1       { animation-delay: 120ms; }
.hero .chapo   { animation-delay: 220ms; }
.hero .actions { animation-delay: 300ms; }
.hero .note    { animation-delay: 360ms; }
.hero .fenetre { animation-delay: 260ms; }

/* --- la conversation se joue, dans l'ordre où elle a eu lieu -------------- */
.hero .fenetre .bulle { animation: entre-bulle 460ms cubic-bezier(.16,1,.3,1) backwards; }
.hero .fenetre .bulle:nth-child(1) { animation-delay:  680ms; }
.hero .fenetre .bulle:nth-child(2) { animation-delay: 1120ms; }
.hero .fenetre .bulle:nth-child(3) { animation-delay: 1680ms; }
.hero .fenetre .bulle:nth-child(4) { animation-delay: 2100ms; }

/* --- arrivée dans l'écran : posé, jamais spectaculaire -------------------- */
[data-revele] { opacity: 0; transform: translateY(14px);
                transition: opacity 560ms cubic-bezier(.16,1,.3,1),
                            transform 560ms cubic-bezier(.16,1,.3,1); }
[data-revele="vu"] { opacity: 1; transform: none; }
/* dans une série, chaque élément suit le précédent d'un souffle */
[data-revele][style*="--rang"] { transition-delay: calc(var(--rang) * 80ms); }

/* le filet du titre en marge se déploie quand la section arrive */
.section-titre[data-revele="vu"]::after { animation: trait 520ms cubic-bezier(.16,1,.3,1) 160ms backwards;
                                          transform-origin: left; }

/* --- réactions au survol -------------------------------------------------- */
.carte { transition: transform var(--transition), box-shadow var(--transition),
                     border-color var(--transition); }
.carte:hover { border-color: var(--terracotta-pale); }
/* les liens qui finissent par une flèche : elle avance */
a:hover .fleche { transform: translateX(3px); }
.fleche { display: inline-block; transition: transform var(--transition); }
/* un lien de texte se souligne en se déployant, il ne clignote pas */
@media (hover: hover) {
  .contenu a:not(.bouton):not(.marque):not(.pied a),
  .contenu-etroit a:not(.bouton):not(.marque) {
    background-image: linear-gradient(var(--lien), var(--lien));
    background-size: 0% 1px; background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 260ms cubic-bezier(.16,1,.3,1);
  }
  .contenu a:not(.bouton):not(.marque):hover,
  .contenu-etroit a:not(.bouton):not(.marque):hover {
    background-size: 100% 1px; text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-revele] { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------- sommaire des pages longues
   Il vit dans la marge gauche, hors du flux : la page reste identique s'il
   n'apparaît pas. Deux états selon la place réellement disponible, calculée
   depuis la largeur maximale du contenu : des repères muets quand la marge est
   courte, le texte des sections quand elle est large. */
.sommaire { display: none; }

/* la marge vaut (100vw - maxw)/2 : à 1560 px elle atteint 100 px, de quoi
   poser des repères mais pas du texte */
@media (min-width: 1560px) {
  .sommaire {
    display: block; position: fixed; top: 50%; left: var(--e-3);
    transform: translateY(-50%); z-index: 20; width: 56px; max-height: 64vh;
  }
  .sommaire ol { list-style: none; margin: 0; padding: 0;
                 border-left: 1px solid var(--filet); }
  .sommaire li { margin: 0; }
  .sommaire a {
    display: block; height: 20px; margin-left: -1px; font-size: 0;
    border-left: 2px solid transparent;
    transition: border-color var(--transition);
  }
  .sommaire a:hover { border-left-color: var(--encre-legere); background: none; }
  .sommaire a[aria-current="true"] { border-left-color: var(--terracotta); }
}

/* à 1800 px la marge dépasse 220 px : le sommaire peut porter ses intitulés */
@media (min-width: 1800px) {
  .sommaire { width: 190px; }
  .sommaire a {
    height: auto; font-size: var(--t-xs); line-height: 1.35;
    padding: 6px 0 6px var(--e-2); color: var(--encre-legere);
    transition: color var(--transition), border-color var(--transition);
  }
  .sommaire a:hover { color: var(--encre); text-decoration: none; }
  .sommaire a[aria-current="true"] { color: var(--encre); }
}