/* =============================================================================
   Clippit — composants de contenu de la page d'accueil
   =============================================================================
   Cette feuille prolonge clippit.css : elle ne redéfinit aucun jeton et
   n'introduit ni couleur, ni graisse, ni rayon qui ne vienne de la charte. Elle
   porte les composants propres au discours de la page d'accueil — les
   convictions, la citation, la bascule hier / aujourd'hui, le schéma de la
   chaîne d'industrialisation, le panneau des outils — et quelques variantes de
   composants déjà définis dans la feuille principale.

   Elle est chargée après les trois autres : sur les rares propriétés qu'elle
   reprend, c'est elle qui doit gagner.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Surtitre du hero
   -----------------------------------------------------------------------------
   Il remplace la pastille « Solutions Partner », qui redisait ce que la bande
   de désignations affiche juste en dessous et ouvrait la page sur un label
   Microsoft plutôt que sur le propos. Un filet vert et quatre mots : le hero
   s'ouvre sur la promesse, pas sur un badge.
   -------------------------------------------------------------------------- */
.surtitre {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vert);
}
.filet {
    display: block;
    flex: 0 0 auto;
    width: 42px;
    height: 3px;
    background: var(--vert);
    border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   Logo du bandeau : réaction au survol
   -----------------------------------------------------------------------------
   Un logo est un lien : rien ne le disait. Il se soulève de deux pixels et un
   filet vert se déroule sous lui. Le mouvement est court et la courbe part
   vite pour ralentir à l'arrivée, ce qui donne un objet posé plutôt qu'un
   objet qui glisse. Le même état répond au clavier : la règle vaut aussi pour
   `:focus-visible`, sans quoi seule la souris obtiendrait le retour.
   -------------------------------------------------------------------------- */
.nav__logo {
    position: relative;
    display: inline-flex;
}
.nav__logo img { transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1); }
.nav__logo::after {
    content: '';
    position: absolute;
    inset: auto 0 -6px;
    height: 2px;
    background: var(--vert);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__logo:hover img,
.nav__logo:focus-visible img { transform: translateY(-2px) scale(1.035); }
.nav__logo:hover::after,
.nav__logo:focus-visible::after { transform: scaleX(1); }

/* -----------------------------------------------------------------------------
   Le trombone
   -----------------------------------------------------------------------------
   Il entre en tombant, dépasse légèrement, puis se stabilise. Ensuite il
   oscille, très lentement, autour d'un point haut : un trombone accroché à la
   page, pas une image qui flotte. Le pivot est calé au douzième supérieur de
   la forme, c'est-à-dire là où un vrai trombone tiendrait la feuille.

   L'amplitude est délibérément faible, deux degrés et demi, et la période
   longue. Un mouvement plus large deviendrait un objet qui bouge à l'écran
   pendant qu'on lit le titre à côté, ce que la charte de ce site évite
   partout ailleurs. Le mouvement disparaît entièrement en mouvement réduit.
   -------------------------------------------------------------------------- */
.hero__visuel img {
    transform-origin: 50% 12%;
    animation:
        trombone-arrivee 1100ms cubic-bezier(0.18, 0.9, 0.28, 1) 260ms both,
        trombone-balance 8s ease-in-out 1400ms infinite;
}
@keyframes trombone-arrivee {
    from { opacity: 0; transform: translateY(-30px) rotate(-10deg) scale(0.93); }
    58%  { opacity: 1; transform: translateY(0) rotate(4deg) scale(1); }
    80%  { transform: rotate(-1.6deg); }
    to   { opacity: 1; transform: none; }
}
@keyframes trombone-balance {
    0%, 100% { transform: rotate(-2.5deg); }
    50%      { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__visuel img { animation: none; }
    .nav__logo img,
    .nav__logo::after { transition: none; }
}

/* -----------------------------------------------------------------------------
   Section sur fond gris
   -------------------------------------------------------------------------- */
.section--gris { background: var(--gris); }
.section--gris .bloc { background: var(--blanc); }

/* -----------------------------------------------------------------------------
   Convictions
   -----------------------------------------------------------------------------
   Trois affirmations courtes, sans carte : la boîte donnerait à des phrases de
   deux lignes le poids de fiches produit. Un filet vert en tête suffit à les
   séparer, et le bandeau reste léger, ce qu'il doit être juste après le hero.
   -------------------------------------------------------------------------- */
.credos {
    display: grid;
    gap: var(--e-5) var(--e-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.credos li { border-top: 3px solid var(--vert); padding-top: var(--e-3); }
.credos h3 {
    margin-bottom: var(--e-2);
    font-size: var(--t-base);
    font-weight: 900;
    color: var(--bleu);
    text-wrap: balance;
}
.credos p { font-size: var(--t-sm); color: var(--texte-doux); }

/* -----------------------------------------------------------------------------
   Citation
   -----------------------------------------------------------------------------
   La version précédente enfermait la phrase dans un pavé bleu posé à côté du
   texte : deux blocs qui se disputaient l'attention, et un aplat qui écrasait
   la page. Ici la citation ne porte aucun fond. Elle est composée grande, en
   italique, adossée à un filet vert, et signée. Ce qui la met en valeur, c'est
   l'échelle et le blanc autour, pas une boîte.
   -------------------------------------------------------------------------- */
.citation {
    max-width: 30ch;
    margin: 0 0 var(--e-7);
    padding-left: var(--e-5);
    border-left: 4px solid var(--vert);
}
.citation blockquote p {
    font-size: var(--t-xl);
    font-style: italic;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--bleu);
    text-wrap: balance;
}
/* La traduction sous la citation. Sélecteur volontairement long : la règle
   « .citation blockquote p » ci-dessus est plus spécifique qu'une simple
   classe, et la traduction hériterait sinon du grand corps italique. */
.citation blockquote .citation__traduction {
    margin-top: var(--e-3);
    font-size: var(--t-sm);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--texte-doux);
}
.citation figcaption {
    margin-top: var(--e-3);
    font-size: var(--t-sm);
}
.citation figcaption b { color: var(--texte); }
.citation figcaption span { display: block; color: var(--texte-doux); }

/* -----------------------------------------------------------------------------
   Témoignage : la citation et ses mesures
   -----------------------------------------------------------------------------
   La version précédente posait deux fiches chiffrées grises à côté d'une
   citation flottante : trois boîtes de poids différents, mal alignées, et
   beaucoup de vide dans les fiches parce que le composant est dessiné pour des
   sections sombres et des libellés courts.

   Ici, aucune boîte. La citation porte le bloc, les deux mesures se lisent en
   colonne à droite, chacune coiffée du filet vert de la charte. Trois éléments,
   une seule grille, un seul alignement.
   -------------------------------------------------------------------------- */
/* La citation est plus courte que la colonne des mesures : alignées par le
   haut, elles laissaient un vide sous la citation de la hauteur d'une mesure,
   et le filet vert vertical de la citation formait avec le premier filet
   horizontal des mesures un angle qui se lisait comme un cadre cassé. La
   citation se centre donc sur la hauteur du bloc : le vide se répartit de part
   et d'autre, et les deux accents verts cessent de se répondre par accident. */
.temoignage {
    display: grid;
    gap: var(--e-6) var(--e-8);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    /* Le rythme était inversé : 48 px séparaient le chapô du bloc, mais 32 px
       seulement le bloc du titre suivant. Le titre se lisait donc comme la
       légende des mesures plutôt que comme l'ouverture de la bascule. La marge
       haute négative remonte le bloc contre la marge que possède le composant
       d'en-tête, et la marge basse éloigne le titre. Mesuré après coup :
       32 px au-dessus, 48 px en dessous, soit une ligne de plus. */
    margin-top: calc(-1 * var(--e-4));
    margin-bottom: var(--e-7);
}
.mesures { display: grid; gap: var(--e-7); align-content: start; }
.mesures--rangee {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--e-6);
    max-width: 820px;
    margin-bottom: var(--e-7);
}
.mesures li { border-top: 3px solid var(--vert); padding-top: var(--e-3); }
.mesures__valeur {
    font-size: var(--t-2xl);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--bleu);
    font-variant-numeric: tabular-nums;
}
.mesures__libelle {
    margin-top: var(--e-3);
    font-size: var(--t-sm);
    color: var(--texte-doux);
    text-wrap: pretty;
}

.temoignage .citation { max-width: none; margin-bottom: 0; }

@media (max-width: 900px) {
    .temoignage { grid-template-columns: 1fr; }
    .temoignage .citation { max-width: 30ch; }
}

/* -----------------------------------------------------------------------------
   Bascule hier / aujourd'hui
   -----------------------------------------------------------------------------
   L'argument tenait en trois paragraphes. Il tient en deux colonnes de cinq
   lignes, et il se lit d'un coup d'œil. La colonne « hier » est en retrait,
   grise et barrée d'aucun trait ; la colonne « aujourd'hui » porte l'encre et
   les marqueurs verts. Aucune couleur d'alerte : la charte n'en a pas, et
   l'opposition n'en a pas besoin.
   -------------------------------------------------------------------------- */
.bascule {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}
.bascule__colonne {
    padding: var(--e-5);
    border-radius: var(--r-lg);
}
.bascule__colonne--avant {
    background: var(--gris);
    color: var(--texte-doux);
}
.bascule__colonne--apres {
    background: var(--bleu);
    color: rgba(255, 255, 255, 0.88);
}
.section--gris .bascule__colonne--avant { background: var(--blanc); }
.bascule__titre {
    margin-bottom: var(--e-4);
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.bascule__colonne--avant .bascule__titre { color: rgba(0, 0, 0, 0.42); }
.bascule__colonne--apres .bascule__titre { color: var(--vert); }
.bascule ul { display: grid; gap: var(--e-3); }
.bascule li {
    position: relative;
    padding-left: 1.3rem;
    font-size: var(--t-sm);
    text-wrap: pretty;
}
.bascule li::before {
    content: '';
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.bascule__colonne--avant li::before {
    background: none;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28);
}
.bascule__colonne--apres li::before { background: var(--vert); }
.bascule__fleche {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vert);
    color: #000;
}
.bascule__fleche svg { width: 22px; height: 22px; }

@media (max-width: 820px) {
    .bascule { grid-template-columns: 1fr; justify-items: center; }
    .bascule__colonne { width: 100%; }
    .bascule__fleche { transform: rotate(90deg); }
}

/* -----------------------------------------------------------------------------
   Phrase de chute
   -------------------------------------------------------------------------- */
.chute {
    max-width: 62ch;
    margin-top: var(--e-6);
    font-size: var(--t-base);
    color: var(--texte-doux);
}
.chute--sombre {
    margin-inline: auto;
    text-align: center;
    font-style: italic;
    color: var(--texte-sombre-fond);
}

/* -----------------------------------------------------------------------------
   Liste d'actions illustrées
   -------------------------------------------------------------------------- */
.actions {
    display: grid;
    gap: var(--e-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    align-content: start;
}
.actions li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e-4);
    align-items: start;
}
.actions__icone {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--gris);
    color: var(--bleu);
}
.section--gris .actions__icone { background: var(--blanc); }
.actions__icone svg { width: 21px; height: 21px; }
.actions p { font-size: var(--t-sm); color: var(--texte-doux); text-wrap: pretty; }
.actions b { color: var(--texte); }

@media (max-width: 900px) {
    
    
}

/* L'unité d'un multiplicateur n'est pas un chiffre : elle descend d'un cran
   pour ne pas peser autant que la valeur. */
.chiffre__unite { font-size: 0.55em; margin-left: 0.08em; vertical-align: 0.16em; }

/* -----------------------------------------------------------------------------
   Familles à quatre cartes
   -----------------------------------------------------------------------------
   La grille des métiers place trois cartes par rangée. Les quatre axes du
   conseil et les quatre services managés laissaient la quatrième seule sur une
   rangée vide aux deux tiers, ce qui se lit comme un oubli. Deux colonnes les
   répartissent en carré. La règle se déclenche sur le nombre d'enfants, elle
   vaut donc pour toute famille à quatre cartes.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    .famille .grille:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* -----------------------------------------------------------------------------
   Séries de trois chiffres
   -----------------------------------------------------------------------------
   Les fiches passent à deux colonnes sur téléphone, ce qui convient aux quatre
   chiffres des références. Les séries de trois laissaient la dernière seule à
   gauche, à côté d'un vide de même taille. Elle prend la largeur.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .chiffres:has(> :nth-child(3)):not(:has(> :nth-child(4))) > :last-child {
        grid-column: 1 / -1;
    }
}

/* -----------------------------------------------------------------------------
   Cibles des compteurs animés
   -----------------------------------------------------------------------------
   mouvement.css associe une cible à chaque valeur comptée, une règle par
   nombre : une animation CSS ne peut pas lire un attribut, la valeur doit être
   déclarée dans la feuille. Les nouveaux chiffres ont donc besoin de leurs
   propres lignes, sans quoi le compteur s'arrête à zéro. À reporter dans
   mouvement.css si le contenu est retenu.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
    .chiffre__valeur[data-compte='66'] { --cible: 66; }
}

/* -----------------------------------------------------------------------------
   Compteurs à virgule
   -----------------------------------------------------------------------------
   Le compteur de mouvement.css anime un entier : les deux multiplicateurs de la
   section « le revers » restaient donc figés pendant que le pourcentage voisin
   défilait. Une animation CSS ne sait pas interpoler un nombre décimal affiché,
   mais elle sait animer deux entiers en parallèle. La partie entière et les
   décimales avancent ensemble, et le compteur les recolle avec la virgule.

   Les valeurs intermédiaires ne sont pas exactes au centième, les deux entiers
   progressant chacun linéairement de leur côté. C'est sans importance : ce qui
   est lu, c'est le mouvement, et la valeur d'arrivée est juste.
   -------------------------------------------------------------------------- */
@property --ent { syntax: '<integer>'; initial-value: 0; inherits: false; }
@property --dec { syntax: '<integer>'; initial-value: 0; inherits: false; }

@supports (animation-timeline: view()) {
    .chiffre__anime--virgule {
        counter-reset: ent var(--ent) dec var(--dec);
        animation: compte-virgule linear both;
        animation-timeline: view();
        animation-range: entry 20% cover 40%;
    }
    .chiffre__anime--virgule::after { content: counter(ent) ',' counter(dec); }
    .chiffre__valeur[data-compte='2,74'] { --cible-ent: 2; --cible-dec: 74; }
    .chiffre__valeur[data-compte='1,7'] { --cible-ent: 1; --cible-dec: 7; }
}
@keyframes compte-virgule {
    from { --ent: 0; --dec: 0; }
    to { --ent: var(--cible-ent); --dec: var(--cible-dec); }
}

/* -----------------------------------------------------------------------------
   Sous-titres de section
   -------------------------------------------------------------------------- */
.sous-titre { margin-bottom: var(--e-4); opacity: 0.75; }
.sous-titre--clair { opacity: 1; color: var(--bleu); }

/* -----------------------------------------------------------------------------
   Panneau des outils
   -----------------------------------------------------------------------------
   Il porte une information qui n'est ni un chiffre ni une opposition : ce que
   nous déployons concrètement. Un aplat gris et un filet vert suffisent à le
   détacher du texte courant sans en faire une carte de plus.
   -------------------------------------------------------------------------- */
.outils {
    margin-top: var(--e-6);
    padding: var(--e-5) var(--e-6);
    background: var(--gris);
    border-left: 4px solid var(--vert);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.section--gris .outils { background: var(--blanc); }
.outils h3 {
    margin-bottom: var(--e-2);
    font-size: var(--t-base);
    font-weight: 900;
    color: var(--bleu);
}
.outils p { max-width: 66ch; color: var(--texte-doux); }
/* Les outils passent en tuiles plutôt qu'en pastilles : une tuile blanche a la
   place et le fond qu'il faut pour accueillir un logo officiel, ce qui est
   l'étape suivante. En attendant, elle porte le nom, centré, à une taille qui
   se lit. Le contenant ne changera pas quand les logos arriveront. */
.outils__tuiles {
    display: grid;
    gap: var(--e-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    margin-top: var(--e-5);
}
.outils__tuiles li {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--e-2);
    min-height: 96px;
    padding: var(--e-4);
    background: var(--blanc);
    border: 1px solid rgba(2, 8, 115, 0.1);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
    font-weight: 700;
    text-align: center;
    text-wrap: balance;
    color: var(--bleu);
}
.section--gris .outils__tuiles li { background: var(--gris); }
/* Les marques sont les fichiers officiels de chaque éditeur, servis par leurs
   propres domaines. Elles gardent leurs couleurs : un logo redressé dans la
   palette de la charte n'est plus le logo. La quatrième tuile ne porte pas de
   marque, c'est la nôtre : un pictogramme du site, à l'encre du site. */
.outils__logo { width: 26px; height: 26px; flex: 0 0 auto; }
.outils__logo--maison { color: var(--bleu); }

/* -----------------------------------------------------------------------------
   Schéma : la chaîne d'industrialisation
   -----------------------------------------------------------------------------
   Six maillons enfilés sur une colonne verticale. Le choix de la verticale
   n'est pas un repli : les six maillons ne sont pas des étapes qui se suivent
   dans le temps, ce sont six dimensions qu'il faut toutes tenir. Une frise
   horizontale numérotée aurait affirmé un ordre qui n'existe pas. La colonne,
   bornée en haut par ce qui entre et en bas par ce qui sort, dit ce qu'elle
   doit dire : rien ne passe sans traverser les six.

   Chaque maillon oppose deux lignes, « sans cadre » et « avec nous ».
   L'opposition ne passe pas par la couleur, la charte n'ayant ni rouge ni
   orange, mais par la typographie : la première en italique et en retrait, la
   seconde en romain avec le marqueur vert.
   -------------------------------------------------------------------------- */
.chaine { --voie: 2px; }

.chaine__borne {
    position: relative;
    max-width: 62ch;
    padding: var(--e-4) var(--e-5);
    background: var(--blanc);
    border: 1px solid rgba(2, 8, 115, 0.12);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    color: var(--texte-doux);
}
.chaine__borne__label {
    display: block;
    margin-bottom: var(--e-1);
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bleu);
}
/* La voie était dessinée en trois morceaux : un raccord sous la borne d'entrée,
   le trait des maillons, un raccord au-dessus de la borne de sortie. Bout à
   bout au pixel près, mais trois boîtes distinctes à des abscisses
   fractionnaires : sur un écran à forte densité, l'arrondi laissait une
   couture blanche visible à chaque jonction. C'est le défaut de la capture.

   Le trait est maintenant unique. Il déborde de douze pixels au-dessus et en
   dessous de la colonne des maillons, donc à l'intérieur des deux bornes, qui
   sont opaques et passent par-dessus. Aucune jonction, donc aucune couture. */
.chaine__borne { z-index: 1; }

.chaine__maillons {
    position: relative;
    display: grid;
    gap: 0;
    margin-block: var(--e-5);
    padding-left: calc(var(--e-5) + 10px);
}
/* La voie : un filet continu qui traverse les six maillons. */
.chaine__maillons::before {
    content: '';
    position: absolute;
    top: calc(-1 * (var(--e-5) + 12px));
    bottom: calc(-1 * (var(--e-5) + 12px));
    left: calc(var(--e-5) + 9px);
    width: var(--voie);
    background: var(--vert);
}

.maillon {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 0.6fr) minmax(0, 1.7fr);
    gap: var(--e-2) var(--e-5);
    align-items: baseline;
    padding: var(--e-5) 0 var(--e-5) var(--e-5);
}
.maillon + .maillon { border-top: 1px solid rgba(2, 8, 115, 0.1); }
/* La pastille posée sur la voie. */
/* La pastille est posée sur la voie, elle doit donc partager son axe.
   La voie est tracée à « --e-5 + 9px » sur 2 px : son axe est à « --e-5 + 10 ».
   Le maillon commence lui aussi à « --e-5 + 10 », le rembourrage gauche de la
   colonne. Une pastille de 12 px décalée de -11 px avait donc son axe à
   « --e-5 + 5 », soit cinq pixels trop à gauche. C'est le décentrage visible
   sur la capture. -6 px la remet sur l'axe. */
.maillon::before {
    content: '';
    position: absolute;
    top: calc(var(--e-5) + 0.6em);
    left: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--vert);
    box-shadow: 0 0 0 4px var(--gris);
}
.maillon__tete {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    grid-row: span 2;
}
.maillon__icone {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    background: var(--blanc);
    color: var(--bleu);
}
.maillon__icone svg { width: 20px; height: 20px; }
.maillon__tete h3 {
    font-size: var(--t-base);
    font-weight: 900;
    color: var(--bleu);
    text-wrap: balance;
}
.maillon__sans,
.maillon__avec { font-size: var(--t-sm); text-wrap: pretty; }
.maillon__sans { font-style: italic; color: var(--texte-doux); }
.maillon__avec { color: var(--texte); }
.maillon__sans span,
.maillon__avec span {
    display: block;
    margin-bottom: 0.15rem;
    font-size: var(--t-xs);
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.maillon__sans span { color: rgba(0, 0, 0, 0.38); }
.maillon__avec span { color: var(--bleu); }
/* Le marqueur vert n'accompagne que la réponse. */
.maillon__avec span::before {
    content: '';
    display: inline-block;
    width: 0.7rem;
    height: 2px;
    margin-right: 0.45rem;
    vertical-align: 0.28em;
    background: var(--vert);
}

/* La couche continue : elle n'est pas un maillon, elle porte les six. */
.chaine__socle {
    margin-top: var(--e-6);
    padding: var(--e-5);
    background: var(--bleu);
    color: rgba(255, 255, 255, 0.82);
    border-radius: var(--r-lg);
}
.chaine__socle__label {
    margin-bottom: var(--e-4);
    font-size: var(--t-xs);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vert);
}
.chaine__socle ul {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.chaine__socle li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e-3);
    align-items: start;
    font-size: var(--t-sm);
}
.chaine__socle__icone {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.12);
    color: var(--vert);
}
.chaine__socle__icone svg { width: 19px; height: 19px; }
.chaine__socle b { color: var(--blanc); }

@media (max-width: 760px) {
    .maillon {
        grid-template-columns: 1fr;
        gap: var(--e-3);
        padding-left: var(--e-4);
    }
    .maillon__tete { grid-row: auto; }
    .chaine__maillons { padding-left: calc(var(--e-4) + 10px); }
    .chaine__maillons::before { left: calc(var(--e-4) + 9px); }
    .chaine__borne { padding-inline: var(--e-4); }
    .chaine__borne--entree::after,
    .chaine__borne--sortie::before { left: calc(var(--e-4) + 9px); }
}

/* -----------------------------------------------------------------------------
   Révélations au défilement
   -----------------------------------------------------------------------------
   Les titres se révélaient mot à mot et les quatre chiffres des références
   comptaient, mais tout le reste apparaissait d'un bloc : les convictions, les
   maillons, les indicateurs, les listes d'actions, les tuiles d'outils, le
   socle, les bornes, les badges, les colonnes de la bascule, la citation. La
   page était déjà là avant d'être lue.

   Chaque élément d'une liste monte de quinze pixels en apparaissant, décalé de
   son voisin. Le décalage se fait en décalant la plage de la chronologie, pas
   par un délai : sur une chronologie de défilement, un délai n'a pas de sens,
   la progression ne dépendant pas du temps.

   Deux gardes, et elles comptent :

   - tout est enfermé dans un `@supports` : là où `animation-timeline` n'existe
     pas, rien n'est masqué, donc rien ne peut rester invisible ;
   - les convictions et les maillons deviennent des carrousels horizontaux sous
     640 px. Dans un défilement horizontal, une chronologie `view()` sur l'axe
     de bloc n'a pas de portée : elle resterait inactive, l'animation figée sur
     son état de départ, et le panneau resterait invisible. Ces deux-là ne sont
     donc révélés qu'au-dessus de ce seuil.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
    .mesures li,
    .actions li,
    .outils__tuiles li,
    .chaine__socle li,
    .chaine__borne,
    .bascule__colonne,
    .citation,
    .grille > .bloc {
        animation: apparaitre-doux linear both;
        animation-timeline: view();
        animation-range: entry 6% cover 22%;
    }
    /* Décalage d'un élément à l'autre, plafonné au quatrième : au-delà,
       l'attente devient plus longue que la lecture. */
    .mesures li:nth-child(2),
    .actions li:nth-child(2),
    .outils__tuiles li:nth-child(2),
    .chaine__socle li:nth-child(2),
    .grille > .bloc:nth-child(2) { animation-range: entry 10% cover 26%; }
    .mesures li:nth-child(3),
    .actions li:nth-child(3),
    .outils__tuiles li:nth-child(3),
    .chaine__socle li:nth-child(3),
    .grille > .bloc:nth-child(3) { animation-range: entry 14% cover 30%; }
    .mesures li:nth-child(n+4),
    .outils__tuiles li:nth-child(n+4),
    .grille > .bloc:nth-child(n+4) { animation-range: entry 18% cover 34%; }
    /* La colonne « aujourd'hui » de la bascule arrive après « hier » : c'est le
       sens de lecture de l'argument. */
    .bascule__colonne--apres { animation-range: entry 12% cover 28%; }

    @media (min-width: 641px) {
        .credos li,
        .maillon,
        .confiance__badges img {
            animation: apparaitre-doux linear both;
            animation-timeline: view();
            animation-range: entry 6% cover 22%;
        }
        .credos li:nth-child(2),
        .maillon:nth-child(2),
        .confiance__badges img:nth-child(2) { animation-range: entry 10% cover 26%; }
        .credos li:nth-child(3),
        .maillon:nth-child(3),
        .confiance__badges img:nth-child(3) { animation-range: entry 14% cover 30%; }
        .maillon:nth-child(n+4) { animation-range: entry 18% cover 34%; }
    }
}
/* Quinze pixels et rien de plus : au-delà, la page tangue au lieu de se poser. */
@keyframes apparaitre-doux {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   La voie de la chaîne se remplit
   -----------------------------------------------------------------------------
   Le filet vert qui traverse les six maillons était tracé d'un coup. Il se
   remplit maintenant à mesure qu'on descend, et chaque pastille s'allume au
   passage : la métaphore de la chaîne devient littérale sur la section qui
   porte l'argument central.

   La chronologie est nommée sur la liste et lue par son propre pseudo-élément.
   Sous 640 px, la liste est un carrousel horizontal : la voie y est masquée, il
   n'y a donc rien à remplir. */
@supports (animation-timeline: view()) {
    @media (min-width: 641px) {
        .chaine__maillons {
            view-timeline-name: --voie;
            view-timeline-axis: block;
        }
        .chaine__maillons::before {
            transform-origin: top;
            animation: voie-avance linear both;
            animation-timeline: --voie;
            /* La voie se remplit pendant que la liste traverse l'écran, et elle
               est pleine avant que le dernier maillon ne sorte par le haut. */
            animation-range: entry 90% exit 10%;
        }
        .maillon::before {
            animation: pastille-allume linear both;
            animation-timeline: view();
            animation-range: entry 55% cover 15%;
        }
    }
}
@keyframes voie-avance {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes pastille-allume {
    from { transform: scale(0.35); opacity: 0.3; }
    to { transform: none; opacity: 1; }
}

/* -----------------------------------------------------------------------------
   Halo des cartes sous le pointeur
   -----------------------------------------------------------------------------
   Une carte survolée se soulève déjà. S'y ajoute un halo très léger qui suit le
   curseur : c'est ce qui donne l'impression que la surface répond, plutôt que de
   simplement changer d'état.

   Réservé aux pointeurs qui savent survoler, et retiré en mouvement réduit :
   c'est du mouvement, même s'il ne déplace rien. Le halo est blanc, à six pour
   cent : aucune couleur n'est introduite, et sur les cartes bleues comme sur les
   blanches il reste dans la charte. Les deux coordonnées viennent du script, qui
   n'écrit que deux variables et jamais de style de présentation.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .grille > .bloc { position: relative; }
    .grille > .bloc::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background: radial-gradient(240px circle at var(--halo-x, 50%) var(--halo-y, 0%),
                                    rgba(255, 255, 255, 0.55), transparent 62%);
        opacity: 0;
        transition: opacity var(--duree);
        pointer-events: none;
    }
    /* Sur fond blanc, un halo blanc ne se verrait pas : c'est le bleu de la
       charte, très dilué, qui joue ce rôle. */
    .section--gris .grille > .bloc::before,
    .section .grille > .bloc::before {
        background: radial-gradient(240px circle at var(--halo-x, 50%) var(--halo-y, 0%),
                                    color-mix(in srgb, var(--bleu) 8%, transparent), transparent 62%);
    }
    .grille > .bloc:hover::before { opacity: 1; }
    /* Le contenu de la carte passe devant le halo. */
    .grille > .bloc > * { position: relative; z-index: 1; }
}

/* -----------------------------------------------------------------------------
   Carrousels de téléphone
   -----------------------------------------------------------------------------
   Deux listes empilées prenaient à elles seules quatre écrans de téléphone : les
   trois convictions, et les six maillons de la chaîne. Sur téléphone, elles
   défilent horizontalement, un panneau à la fois, aimantées.

   Le balisage ne change pas : ce sont les mêmes listes, avec un attribut qui dit
   « ceci peut devenir un carrousel ». Au-delà du téléphone, et sans JavaScript,
   elles restent les listes d'avant — la mise en page verticale est intacte, et
   rien n'est caché.

   Les pastilles de position sont posées par le script, qui seul sait combien il
   y a de panneaux et lequel est en vue.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    [data-carrousel] {
        display: flex;
        gap: var(--e-4);
        /* La grille des convictions doit être défaite pour que le flex prenne. */
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Sans cela, un glissement horizontal un peu appuyé entraîne la page. */
        overscroll-behavior-x: contain;
        /* Le carrousel déborde jusqu'aux bords de l'écran, le rembourrage rendant
           la marge : le panneau suivant est alors visiblement amorcé au bord. */
        margin-inline: calc(-1 * var(--e-5));
        padding-inline: var(--e-5);
        scroll-padding-inline: var(--e-5);
        scrollbar-width: none;
    }
    [data-carrousel]::-webkit-scrollbar { display: none; }
    [data-carrousel] > li {
        flex: 0 0 min(84%, 330px);
        scroll-snap-align: start;
    }
    /* La région défilante est focalisable : au clavier, les flèches la parcourent
       comme n'importe quelle zone de défilement. L'anneau ne doit donc pas être
       collé au contenu. */
    [data-carrousel]:focus-visible { outline-offset: 6px; }

    .carrousel__points {
        display: flex;
        justify-content: center;
        gap: var(--e-1);
        margin-top: var(--e-4);
    }
    .carrousel__points button {
        display: grid;
        place-items: center;
        /* 32 px de cible pour une pastille de 9 px : le critère 2.5.8 demande
           24 px, et deux pastilles voisines ne doivent pas se toucher. */
        width: 32px;
        height: 32px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .carrousel__points button::before {
        content: '';
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(2, 8, 115, 0.22);
        transition: background-color var(--duree), transform var(--duree) var(--courbe);
    }
    .carrousel__points button[aria-current='true']::before {
        background: var(--vert);
        transform: scale(1.25);
    }
    .section--sombre .carrousel__points button::before { background: rgba(255, 255, 255, 0.28); }

    /* --- Convictions ------------------------------------------------------- */
    /* En panneaux, le filet vert seul ne suffit plus à séparer : chaque
       conviction devient une carte, et toutes prennent la hauteur de la plus
       haute, ce que le flex donne sans hauteur imposée. */
    .credos li {
        padding: var(--e-4);
        background: var(--blanc);
        border: 1px solid var(--gris);
        border-top: 3px solid var(--vert);
        border-radius: var(--r-md);
    }

    /* --- Chaîne ------------------------------------------------------------ */
    /* La voie verticale et ses pastilles n'ont plus de sens à l'horizontale :
       ce sont les pastilles de position qui disent où l'on en est. */
    /* Le décalage qui laissait la place à la voie n'a plus lieu d'être, mais le
       rembourrage du carrousel doit rester : c'est lui qui aligne le premier
       panneau sur les bornes. */
    .chaine__maillons { margin-block: var(--e-5); }
    .chaine__maillons::before { display: none; }
    .maillon::before { display: none; }
    .maillon + .maillon { border-top: 0; }
    .maillon {
        padding: var(--e-4);
        background: var(--blanc);
        border: 1px solid rgba(2, 8, 115, 0.1);
        border-radius: var(--r-md);
    }
    /* Les deux bornes gardent leur place, au-dessus et au-dessous, mais leurs
       amorces de voie ne relient plus rien. */
    .chaine__borne--entree::after,
    .chaine__borne--sortie::before { display: none; }
}

/* -----------------------------------------------------------------------------
   Ligne de sources
   -------------------------------------------------------------------------- */
.sources {
    max-width: 76ch;
    margin: var(--e-6) 0 0;
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.55);
}
.sources--clair { color: var(--texte-doux); opacity: 0.75; }
.entete-section--centre ~ .sources { margin-inline: auto; text-align: center; }

/* -----------------------------------------------------------------------------
   Retour à la ligne des actions du hero
   -----------------------------------------------------------------------------
   Trois boutons ne tiennent pas sur la largeur de la colonne : 738 px de
   boutons pour 626 px disponibles. Laissés libres, ils se répartissaient en
   deux plus un, avec l'appel principal collé à un bouton secondaire et le
   troisième seul en dessous. Cet élément vide force la coupure après l'appel
   principal : il reste seul sur sa ligne, les deux liens secondaires se
   rangent sous lui, et la hiérarchie se lit. Sous 640 px les boutons prennent
   déjà toute la largeur, la coupure n'a plus d'objet.
   -------------------------------------------------------------------------- */
.saut { flex-basis: 100%; height: 0; }

@media (max-width: 640px) {
    .saut { display: none; }
}

/* -----------------------------------------------------------------------------
   Mouvement réduit
   -----------------------------------------------------------------------------
   Tout ce que cette feuille anime est remis à plat. `animation: none` ne suffit
   pas seul : une animation liée au défilement continue sinon de piloter la
   propriété et écrase la valeur posée ici, d'où les `!important` sur l'opacité
   et la transformation. Le contenu doit rester visible, quoi qu'il arrive.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mesures li,
    .actions li,
    .outils__tuiles li,
    .chaine__socle li,
    .chaine__borne,
    .bascule__colonne,
    .citation,
    .grille > .bloc,
    .credos li,
    .maillon,
    .confiance__badges img,
    .chaine__maillons::before,
    .maillon::before {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}