/* <animate.css> */
/* ====================================================================
   animate.css : la mécanique du skill /animate, et rien d'autre.

   Aucune couleur, aucune forme de marque : la page hôte a sa charte. Les
   deux couleurs de la bascule passent par des propriétés que l'hôte pose
   (--anim-nappe, --anim-mot-survol). Toutes les classes sont préfixées
   `anim-` pour ne rien heurter.

   Rien ici ne cache quoi que ce soit : les états de départ sont posés par
   animate.js, seulement quand GSAP est là et que le mouvement est permis.
   Sans script, tout est lisible. Seule exception, voulue : le squelette
   d'`attente`, qui n'est pas du contenu, attend son délai avant de
   paraître.

   Les nombres de ce fichier sont des REPLIS : la valeur de référence est
   dans REGLAGES (animate.js), qui la publie sur <html> en propriété
   personnalisée au chargement. Le repli ne sert qu'à une page où le script
   ne s'exécute pas, et doit rester égal à REGLAGES.
   ==================================================================== */

/* -------------------------------------------------------- flip, revele */
/* `.anim-mot` est insécable : ce sont les espaces entre les mots, restées
   des nœuds de texte, qui portent les retours à la ligne. La coupure du
   titre découpé est celle du texte d'origine. `.anim-car` tourne autour de
   son bord inférieur : il sort de sous la ligne au lieu de pivoter sur son
   milieu. Le masque de la ligne (découpe, perspective) est posé en ligne
   par le moteur, d'après REGLAGES.

   Une ligne ne se recoupe jamais : ses mots sont ceux d'une ligne du texte
   d'origine, relevée par le moteur (`calerFlip`).

   `revele` ne prend que `.anim-mot`, sans ligne ni caractère : seule leur
   couleur change au défilement. Ses mots restent en ligne, sans
   inline-block ni nowrap, comme le texte d'origine : un paragraphe en
   `text-wrap: pretty` ne s'équilibre pas pareil sur des boîtes atomiques ou
   sur un mot à trait d'union rendu insécable (« peut-être »), et ses
   coupures changeaient dès la découpe (mesuré le 17/10/2026, Chromium et
   Firefox, 375 à 1440 px). */
.anim-ligne { display: block; white-space: nowrap; }
.anim-mot { display: inline-block; white-space: nowrap; }
[data-anim~="revele"] .anim-mot { display: inline; white-space: inherit; }
.anim-car {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

/* ------------------------------------------------------ compte, rouleau */
/* Chiffres tabulaires en permanence, pas seulement pendant la course :
   sinon la largeur sauterait au moment où le texte d'origine revient. */
[data-anim~="compte"],
[data-anim~="rouleau"] { font-variant-numeric: tabular-nums; }

.anim-compte,
.anim-rouleau { white-space: nowrap; }

/* Le fantôme porte la valeur finale, invisible : il donne la largeur et la
   ligne de base. La valeur qui compte se cale dessus, par la droite. */
.anim-compte { display: inline-grid; }
.anim-compte > * { grid-area: 1 / 1; }
.anim-fantome { visibility: hidden; }
.anim-valeur { justify-self: end; }

/* Une roue par chiffre : la bande de chiffres est en absolu sur le
   fantôme, la découpe la réduit à une ligne. Une découpe plutôt qu'un
   débordement caché : `overflow` sur un inline-block déplacerait sa ligne
   de base sur son bord inférieur. */
.anim-roue {
  position: relative;
  display: inline-block;
  clip-path: inset(0);
}
.anim-bande {
  position: absolute;
  inset: 0 0 auto 0;
  text-align: center;
  will-change: transform;
}
.anim-bande > span { display: block; }

/* Pour les lecteurs d'écran seulement : la valeur finale, lue une fois. */
.anim-lecteur {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- zoom */
/* Le cadre rogne : l'image grandit dedans sans pousser la mise en page. */
[data-anim~="zoom"] { overflow: hidden; }

/* -------------------------------------------------------------- recul */
/* Le héros reste collé en haut, la page monte par-dessus. Les sections qui
   suivent doivent avoir un fond opaque : c'est à la page hôte de le poser. */
[data-anim~="recul"] {
  position: sticky;
  top: 0;
  z-index: 0;
}

/* ------------------------------------------------------------ bascule */
[data-anim~="bascule"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* La nappe part de la flèche et grandit jusqu'à couvrir le bouton. Le
   rayon de 140 % couvre le coin opposé quel que soit le libellé : à 100 %,
   la référence CSS vaut sqrt(l² + h²) / sqrt(2), moins que la diagonale
   réelle depuis un centre excentré. Sans couleur fournie par l'hôte, la
   nappe prend le texte du bouton à 14 % : un repli visible qui ne rend
   jamais le libellé illisible. */
.anim-nappe {
  position: absolute;
  inset: var(--anim-nappe-retrait, 0px);
  z-index: -1;
  border-radius: inherit;
  background: var(--anim-nappe, color-mix(in srgb, currentColor 14%, transparent));
  clip-path: circle(0 at var(--anim-nappe-origine, calc(100% - 1.5em) 50%));
  pointer-events: none;
}
[data-anim~="bascule"]:hover .anim-nappe,
[data-anim~="bascule"]:focus-visible .anim-nappe,
[data-anim~="bascule"].anim-actif .anim-nappe {
  clip-path: circle(140% at var(--anim-nappe-origine, calc(100% - 1.5em) 50%));
}

.anim-libelle { display: inline-flex; flex: 0 0 auto; white-space: nowrap; }
[data-anim~="bascule"]:hover .anim-libelle,
[data-anim~="bascule"]:focus-visible .anim-libelle,
[data-anim~="bascule"].anim-actif .anim-libelle { color: var(--anim-mot-survol, currentColor); }

/* Une lettre est une fenêtre d'une ligne sur une pile de deux copies : la
   pile monte d'une demi-hauteur et la seconde copie prend la place. La
   seconde copie est un ::after, jamais un doublon dans le document. Chaque
   copie porte un talon sous sa ligne : le jambage d'un « p » de la première
   copie, qui déborde de sa ligne dans les polices à grande descente,
   tombe dans ce talon au lieu de pointer dans la fenêtre de la seconde. */
.anim-lettre {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
}
.anim-pile { display: block; }
.anim-copie,
.anim-pile::after { display: block; padding-bottom: 0.3em; }
.anim-pile::after { content: attr(data-lettre); }

/* La flèche se décale en CSS, pas en GSAP : un CDN injoignable la
   laisserait sinon immobile. `translate` et non `transform`, pour ne jamais
   se battre avec une transformation posée par l'hôte. */
[data-anim~="bascule"]:hover .anim-fleche,
[data-anim~="bascule"]:focus-visible .anim-fleche,
[data-anim~="bascule"].anim-actif .anim-fleche {
  translate: var(--anim-fleche-x, 2px) var(--anim-fleche-y, -2px);
}

/* ------------------------------------------------------------ souleve */
/* `translate` et `scale`, propriétés individuelles : une carte qui porte
   aussi `montee` est déplacée par GSAP sur `transform`, et les deux ne se
   marchent pas dessus. Le survol n'existe que sur un appareil qui survole ;
   `.anim-actif` le déclenche à la main (démo, slide). */
@media (hover: hover) {
  [data-anim~="souleve"]:hover { translate: 0 var(--anim-souleve-y, -4px); }
  [data-anim~="souleve"]:hover img { scale: var(--anim-souleve-image, 1.03); }
}
[data-anim~="souleve"].anim-actif { translate: 0 var(--anim-souleve-y, -4px); }
[data-anim~="souleve"].anim-actif img { scale: var(--anim-souleve-image, 1.03); }

/* ----------------------------------------------------------- souligne */
/* Le trait est un dégradé de fond entre deux bords, `debut` et `fin`,
   transitionnés à part (animate.js explique le cas du retour). Un fond et
   non un ::after : sur un lien coupé en plusieurs lignes, le fond court
   sur toutes ses lignes à la suite, là où un pseudo-élément n'en
   couvrirait qu'une. C'est l'exception à la règle 4 : deux propriétés
   enregistrées qui repeignent le fond du lien, sans mise en page. Sans
   @property, le trait change d'état sans course.

   Hors d'un <nav>, un trait de repos reste sous le lien, en partie de la
   couleur du texte : un lien de paragraphe ne se distingue pas par sa
   seule couleur (WCAG 1.4.1). Le trait tracé le recouvre au survol. Un
   lien en bloc porte son trait au bas de sa boîte : c'est son
   `padding-bottom` qui règle l'écart. */
@property --anim-souligne-debut { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --anim-souligne-fin { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

[data-anim~="souligne"] {
  --anim-souligne-debut: 100%;
  --anim-souligne-fin: 0%;
  text-decoration: none;
  background-image:
    linear-gradient(to right, transparent var(--anim-souligne-debut), currentColor var(--anim-souligne-debut) var(--anim-souligne-fin), transparent var(--anim-souligne-fin)),
    linear-gradient(color-mix(in srgb, currentColor var(--anim-souligne-repos, 40%), transparent) 0 0);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% var(--anim-souligne-epaisseur, 1px);
}
nav [data-anim~="souligne"] { background-size: 100% var(--anim-souligne-epaisseur, 1px), 0 0; }

[data-anim~="souligne"]:focus-visible,
[data-anim~="souligne"].anim-actif { --anim-souligne-debut: 0%; --anim-souligne-fin: 100%; }
@media (hover: hover) {
  [data-anim~="souligne"]:hover { --anim-souligne-debut: 0%; --anim-souligne-fin: 100%; }
}

/* ------------------------------------------------------------ attente */
/* Le squelette de chargement d'une web app. Seul état caché posé par le
   CSS, et c'est voulu : il n'apparaît qu'après un délai, pour qu'une
   réponse rapide ne le fasse jamais clignoter ; passé ce délai, il est là
   même sans script. Les blocs prennent une part de la couleur du texte
   (ou de --anim-attente-encre), mêlée au fond par la transparence : aucun
   gris codé en dur, lisible en thème clair comme sombre.

   Un seul reflet traverse tout le squelette : chaque bloc porte une nappe
   aussi large que le squelette, qu'il rogne à sa forme. Le reflet glisse
   en `transform`, du même pas sur des blocs de toutes largeurs.

   Balisage : le conteneur qui attend porte aria-busy="true", le squelette
   aria-hidden="true", ses blocs la classe anim-bloc. La page leur donne
   taille et arrondi. */
[data-anim~="attente"] {
  position: relative;
  animation: anim-attente-apparition var(--anim-attente-apparition, 0.2s) ease-out var(--anim-attente-delai, 0.3s) both;
}
@keyframes anim-attente-apparition {
  from { opacity: 0; }
}
.anim-bloc {
  display: block;
  background: color-mix(in srgb, var(--anim-attente-encre, currentColor) var(--anim-attente-teinte, 8%), transparent);
  clip-path: border-box;
}
.anim-bloc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 35%, color-mix(in srgb, var(--anim-attente-encre, currentColor) var(--anim-attente-eclat, 6%), transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  pointer-events: none;
}
@keyframes anim-attente-reflet {
  to { transform: translateX(100%); }
}

/* ------------------------------------------------------------- relais */
/* L'élément qui voyage d'une page à l'autre. Son nom est posé par
   animate.js, sa course suit REGLAGES. Le navigateur anime le groupe
   (place et taille de l'instantané) dans sa couche de transition, hors
   de la mise en page du document. Sans View Transitions entre
   documents, la navigation reste normale. */
::view-transition-group(*.anim-relais) {
  animation-duration: var(--anim-relais-duree, 0.55s);
  animation-timing-function: var(--anim-relais-courbe, cubic-bezier(0.32, 0.72, 0, 1));
}

/* ------------------------------------------------------ transitions CSS */
/* Déclarées seulement quand le mouvement est permis : sous mouvement
   réduit, les survols changent d'état sans course. */
@media (prefers-reduced-motion: no-preference) {
  .anim-nappe {
    transition: clip-path var(--anim-nappe-duree, 0.42s) var(--anim-nappe-courbe, cubic-bezier(0.32, 0.72, 0, 1));
  }
  .anim-libelle {
    transition: color var(--anim-nappe-duree, 0.42s) var(--anim-nappe-courbe, cubic-bezier(0.32, 0.72, 0, 1));
  }
  .anim-fleche {
    transition: translate var(--anim-nappe-duree, 0.42s) var(--anim-nappe-courbe, cubic-bezier(0.32, 0.72, 0, 1));
  }
  [data-anim~="souleve"],
  [data-anim~="souleve"] img {
    transition:
      translate var(--anim-souleve-duree, 0.265s) var(--anim-souleve-courbe, cubic-bezier(0.24, 0.6, 0.28, 1)),
      scale var(--anim-souleve-duree, 0.265s) var(--anim-souleve-courbe, cubic-bezier(0.24, 0.6, 0.28, 1));
  }

  /* souligne, au repos : le début part vers la droite ; la fin attend la
     fin de sa course pour revenir, le trait déjà invisible. */
  [data-anim~="souligne"] {
    transition:
      --anim-souligne-debut var(--anim-souligne-duree, 0.3s) var(--anim-souligne-courbe, cubic-bezier(0.32, 0.72, 0, 1)),
      --anim-souligne-fin 0s var(--anim-souligne-duree, 0.3s);
  }
  /* Actif : la fin avance depuis la gauche ; le début y saute, le trait
     encore invisible. */
  [data-anim~="souligne"]:focus-visible,
  [data-anim~="souligne"].anim-actif {
    transition:
      --anim-souligne-fin var(--anim-souligne-duree, 0.3s) var(--anim-souligne-courbe, cubic-bezier(0.32, 0.72, 0, 1)),
      --anim-souligne-debut 0s;
  }
  /* Retour pendant la sortie : le début revient en glissant. */
  [data-anim~="souligne"].anim-retour:focus-visible,
  [data-anim~="souligne"].anim-retour.anim-actif {
    transition:
      --anim-souligne-fin var(--anim-souligne-duree, 0.3s) var(--anim-souligne-courbe, cubic-bezier(0.32, 0.72, 0, 1)),
      --anim-souligne-debut var(--anim-souligne-duree, 0.3s) var(--anim-souligne-courbe, cubic-bezier(0.32, 0.72, 0, 1));
  }
  @media (hover: hover) {
    [data-anim~="souligne"]:hover {
      transition:
        --anim-souligne-fin var(--anim-souligne-duree, 0.3s) var(--anim-souligne-courbe, cubic-bezier(0.32, 0.72, 0, 1)),
        --anim-souligne-debut 0s;
    }
    [data-anim~="souligne"].anim-retour:hover {
      transition:
        --anim-souligne-fin var(--anim-souligne-duree, 0.3s) var(--anim-souligne-courbe, cubic-bezier(0.32, 0.72, 0, 1)),
        --anim-souligne-debut var(--anim-souligne-duree, 0.3s) var(--anim-souligne-courbe, cubic-bezier(0.32, 0.72, 0, 1));
    }
  }

  .anim-bloc::after {
    animation: anim-attente-reflet var(--anim-attente-reflet, 1.6s) linear infinite;
    will-change: transform;
  }
}

/* ------------------------------------------------------------ passage */
/* Transition entre deux pages du même site : l'ancienne s'efface, la
   nouvelle monte. Actif dès que les deux pages chargent ce fichier. Les
   deux keyframes sont nommées pour qu'une page puisse les rejouer sur un
   groupe à elle (la démo le fait sur deux mini-pages). */
@view-transition { navigation: auto; }

@keyframes anim-passage-sortie {
  to { opacity: 0; }
}
@keyframes anim-passage-entree {
  from { opacity: 0; transform: translateY(var(--anim-passage-y, 12px)); }
}

::view-transition-old(root) {
  animation: anim-passage-sortie var(--anim-passage-sortie, 0.2s) var(--anim-passage-sortie-courbe, cubic-bezier(0.4, 0, 0.2, 1)) both;
}
::view-transition-new(root) {
  animation: anim-passage-entree var(--anim-passage-entree, 0.45s) var(--anim-passage-entree-courbe, cubic-bezier(0.23, 1, 0.32, 1)) both;
}

/* ------------------------------------------------- ceinture du mouvement réduit */
/* Sous mouvement réduit, le moteur n'arme rien. Cette ceinture couvre le
   cas restant : la préférence change après l'armement. Rien ne reste
   caché, découpé ou déformé, et les nombres montrent leur valeur finale. */
@media (prefers-reduced-motion: reduce) {
  /* `derive` est nommée en plus de la marque : sur un élément qui porte aussi
     `glisse`, c'est la glisse qui pose la marque et qui la retire en
     arrivant, alors que la dérive tient encore son `transform`. */
  [data-anim-arme],
  [data-anim~="derive"],
  .anim-car {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  /* Une forme SVG en cours de tracé : son tiret couvre toute la forme.
     Un attribut à part : `transform: none` écraserait l'attribut
     `transform` d'une forme SVG. */
  [data-anim-trait] { stroke-dashoffset: 0 !important; }
  /* Un mot de `revele` que le moteur a atténué reprend la couleur de son
     paragraphe. Un attribut à part, là encore : la ceinture ne touche pas à
     la couleur des autres éléments armés, qui ont la leur. */
  [data-anim-muet] { color: inherit !important; }
  /* Le squelette garde son délai, qui n'est pas un mouvement, mais
     paraît d'un coup et sans reflet. */
  [data-anim~="attente"] { animation-duration: 0.001s; }
  .anim-bloc::after { display: none; }
  .anim-ligne { clip-path: none !important; }
  [data-anim~="recul"] { position: static; }
  [data-anim~="souleve"],
  [data-anim~="souleve"] img,
  .anim-fleche { translate: none !important; scale: none !important; }
  .anim-compte,
  .anim-rouleau { display: none; }
  .anim-lecteur {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: inherit;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}
/* </animate.css> */
/* Nexinance, accueil V2, round 1 de la passe Stripe (23/09/2026).
   Grammaire relevée au navigateur sur stripe.com/fr à 1440 px : colonne 1232 px
   en 12 × 88 px, gouttière 16, cadre à filets verticaux, cartes bento à calques
   clip-path, graphe de 31 barres piloté par le défilement, ciel de chiffres.
   Round 6 : le verre Three.js (formes-verre.js, copie en ligne) remplace le
   ruban du héros et la tresse du process, trois formes au choix du client.
   Palette et polices de la charte Nexinance. */

@property --hover-progress { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  color-scheme: light;
  interpolate-size: allow-keywords;
  --bleu: #003399;
  --vert: #00cc66;
  --bleu-clair: #5b8def;
  --vert-clair: #86e8b8;
  --vert-texte: #00824a;
  --encre: #0a1a3d;
  --soft: #4a5878;
  --sourdine: #5f6e93; /* teinte 223°, 4,77:1 sur #f6f8fc, 5,07:1 sur blanc */
  --discret: #8391ad;
  --bande: #f6f8fc;
  --filet: #e3e9f3;
  --guide: #ebf0f7;
  --lavande: #bfcbe9;
  --nappe: #e8eefa;
  --nuit: #0b1f4d;
  --nuit-2: #0a1a42;
  --bleu-survol: #00297a;
  --bleu-texte-survol: #001d57;
  --nuit-sourdine: #8fa3cf;
  --nuit-texte: #aebfe3;
  --nuit-guide: rgba(255, 255, 255, .07);
  --gris: #f7f7f7; /* fond gris de drewl, mesuré */
  --gris-filet: #e4e6ea;
  --fond-heros: #fbfbfc; /* fond du héros de peakfast, mesuré */
  --trame: #d3dcee; /* points de trame, recette des cartes */
  --contenu: 1265px; /* largeur utile, round 6 */

  --f-titre: "Poppins", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Open Sans", "Segoe UI", system-ui, sans-serif;

  --ombre-xs: 0 2px 10px 0 rgba(0, 40, 110, .06), 0 1px 4px 0 rgba(0, 40, 110, .04);
  --ombre-sm: 0 5px 14px 0 rgba(0, 40, 110, .08), 0 2px 8px 0 rgba(0, 40, 110, .05);
  --ombre-md: 0 6px 22px 0 rgba(0, 40, 110, .10), 0 4px 8px 0 rgba(0, 40, 110, .02);
  --ombre-lg: 0 15px 40px -2px rgba(0, 40, 110, .10), 0 5px 20px -2px rgba(0, 40, 110, .04);
  --ombre-xl: 0 20px 80px -16px rgba(0, 40, 110, .14), 0 10px 60px -16px rgba(0, 40, 110, .06);

  --c-carte: cubic-bezier(.165, .84, .44, 1);
  --c-lueur: cubic-bezier(.16, 1, .3, 1);
  --c-bouton: cubic-bezier(.25, 1, .5, 1);
  --c-nav: cubic-bezier(.45, .05, .55, .95);
  --c-lazy: cubic-bezier(.33, 1, .68, 1);
  --c-ciel: cubic-bezier(.65, 0, .35, 1);
  --c-indic: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--encre); font: 400 16px/1.4 var(--f-texte); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid rgba(0, 51, 153, .55); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Cadre Stripe : la colonne utile passe à 1265 px au round 6, 16 px de
   marge et 2 filets autour. La nav s'aligne sur la même boîte. */
.cadre { position: relative; max-width: calc(var(--contenu) + 34px); margin-inline: auto; padding-inline: 16px; border-inline: 1px solid var(--guide); }
.sombre .cadre { border-color: var(--nuit-guide); }
.section__in { padding-block: 96px; }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }

/* La déclaration en deux tons : H2 et P à 32 px, sans écart. Pas de ligne
   1,22 (39 px) : Poppins a des jambages plus hauts que sohne, à 1,1 les lignes
   se touchaient presque. */
.decl { max-width: 816px; font: 400 32px/1.22 var(--f-titre); letter-spacing: -.015em; text-wrap: pretty; }
.decl h2, .decl p { font: inherit; letter-spacing: inherit; }
/* Titres équilibrés : aucun mot seul en fin de déclaration */
h2, .decl p { text-wrap: balance; }
.decl h2 { color: var(--encre); }
.decl p { color: var(--sourdine); }
.sombre .decl h2 { color: #fff; }
.sombre .decl p { color: var(--nuit-sourdine); }
.decl + * { margin-top: 64px; }
/* Un texte courant sous la déclaration en deux tons : le chapô des héros de page */
.decl .decl__texte { max-width: 60ch; margin-top: 24px; font: 400 17px/26px var(--f-texte); letter-spacing: 0; color: var(--soft); text-wrap: pretty; }

/* Boutons : relevé au survol sur stripe.com, 0,3 s cubic-bezier(.25,1,.5,1) */
.btn { display: inline-flex; align-items: center; height: 48px; padding: 15.5px 24px 16.5px; border: 0; border-radius: 4px; background: var(--bleu); color: #fff; font: 500 16px/16px var(--f-titre); text-decoration: none; white-space: nowrap; outline: 1px solid transparent; transition: background-color .3s var(--c-bouton), color .3s var(--c-bouton), outline-color .3s var(--c-bouton), border .3s var(--c-bouton); }
.btn:hover { background: var(--bleu-survol); }
.btn--fantome { padding: 14.5px 24px 15.5px; background: rgba(255, 255, 255, .65); color: var(--bleu); border: 1px solid var(--lavande); }
.btn--fantome:hover { background: rgba(255, 255, 255, .65); color: var(--bleu-texte-survol); border-color: var(--bleu-survol); }
/* Secondaire : même gabarit, contour --bleu sur blanc, --nappe au survol */
.btn--secondaire { padding: 14.5px 24px 15.5px; background: #fff; color: var(--bleu); border: 1px solid var(--bleu); }
.btn--secondaire:hover { background: var(--nappe); }
/* /animate, bascule : la nappe part de la flèche et porte la couleur de
   survol. Le fond reste celui du repos, sinon il virerait avant elle. */
.btn { --anim-nappe: var(--bleu-survol); }
.btn--secondaire { --anim-nappe: var(--nappe); }
.btn[data-anim~="bascule"]:hover { background: var(--bleu); }
.btn--secondaire[data-anim~="bascule"]:hover { background: #fff; }
.fleche { width: 10px; height: 10px; margin-left: 8px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s var(--c-bouton); }
.fleche__tige { opacity: 0; transition: opacity .3s var(--c-bouton); }
.fleche__pointe { transition: transform .3s var(--c-bouton); }
:is(.btn, .lien):hover .fleche__tige { opacity: 1; }
:is(.btn, .lien):hover .fleche__pointe { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* L'anneau vert du CTA, geste relevé sur drewl.com. Un conic sur un bouton
   large accélère dans les petits côtés : ici une comète suit le contour d'un
   rect SVG à pathLength 100, donc à vitesse constante. Traîne en couches
   empilées, tête courte plus claire, halo léger. Une seule tourne à la fois. */
.anneau { position: relative; }
.anneau__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.anneau__svg rect { fill: none; stroke-width: 1.5; }
.anneau__trace { stroke: var(--vert); opacity: .28; }
/* stroke-dashoffset s'hérite : une seule animation, sur le groupe, pour les
   quatorze couches. La lueur verte du groupe fait lire la comète sur le bleu. */
.anneau__comete { opacity: 0; filter: drop-shadow(0 0 3px rgba(0, 204, 102, .3)); transition: opacity .7s var(--c-lueur); animation: anneau 4.6s linear infinite paused; }
.anneau.est-tourne .anneau__comete { opacity: 1; animation-play-state: running; }
/* Round 7 : comète affinée, trait de 1,25 px et halo de 3 px à 35 % */
.anneau__svg .anneau__traine { stroke: var(--vert); stroke-width: 1.25; opacity: .13; }
.anneau__svg .anneau__halo { stroke: #8cf5c0; stroke-width: 3; opacity: .35; filter: blur(2px); }
.anneau__svg .anneau__tete { stroke: #8cf5c0; stroke-width: 1.5; }
@keyframes anneau { to { stroke-dashoffset: -100; } }

/* Navigation : transparente sur le ruban, voilée au défilement */
.nav { position: sticky; top: 0; z-index: 30; height: 76px; transition: background-color .3s var(--c-nav), box-shadow .3s var(--c-nav); }
.nav { box-shadow: 0 1px 0 var(--guide); }
.nav.est-defile { background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--filet); }
.nav__in { max-width: calc(var(--contenu) + 34px); height: 100%; margin-inline: auto; padding: 6px 17px; display: flex; align-items: center; gap: 36px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); text-decoration: none; }
.logo svg { width: 28px; height: 28px; display: block; }
.logo b { font: 500 20px/1 var(--f-titre); letter-spacing: -.2px; }
.nav__liens { display: flex; gap: 6px; }
.nav__liens > a, .nav__declencheur { display: inline-flex; align-items: center; height: 40px; padding: 12px 10px; border-radius: 4px; font: 500 14px/14px var(--f-titre); color: var(--encre); text-decoration: none; transition: color .24s var(--c-nav), background-color .24s var(--c-nav); }
.nav__liens > a:hover, .nav__declencheur:hover { color: var(--bleu); }
/* /animate, souligne : le trait sous le texte, pas au bas de la boîte de
   40 px ; la transition de repos du moteur redéclarée avec la couleur */
.nav .nav__liens a[data-anim~="souligne"] { background-position: 10px calc(100% - 10px); background-size: calc(100% - 20px) var(--anim-souligne-epaisseur, 1px), 0 0; transition: color .24s var(--c-nav), --anim-souligne-debut var(--anim-souligne-duree, .3s) var(--anim-souligne-courbe, cubic-bezier(.32, .72, 0, 1)), --anim-souligne-fin 0s var(--anim-souligne-duree, .3s); }
.nav__droite { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav .btn { height: 40px; padding: 12px 16px; font-size: 14px; line-height: 16px; }
.nav__menu { display: none; }

/* Héros centré, grammaire relevée sur peakfast.fr à 1840 px : fond #fbfbfc,
   titre centré sur deux lignes, micro-ligne sous le bouton, deux rangées de
   pastilles séparées par une bande de trame. Round 6 : exactement un écran,
   les chiffres commencent au pli. Le canevas du verre peint le fond ; le
   réseau passe au-dessus, le texte en haut de la pile. Sous le canevas, le
   même fond en CSS : trame de points basse, repli sans WebGL et relais
   pendant l'arrivée du canevas. */
/* Un écran au moins : sur un écran bas (1366 × 768, 375 × 667), le surtitre
   et le chapô des retours de Victor poussent les pastilles sous le bord, le
   héros s'allonge alors au lieu de les rogner. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; margin-top: -76px; padding-top: 76px; overflow: clip; isolation: isolate; background: var(--fond-heros); border-bottom: 1px solid var(--guide); }
.hero::before, .hero-page::before, .contact::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle, var(--trame) 1px, transparent 1.3px) 0 0 / 12px 12px; -webkit-mask-image: radial-gradient(72% 58% at 50% 100%, #000 0, rgba(0, 0, 0, .45) 50%, transparent 82%); mask-image: radial-gradient(72% 58% at 50% 100%, #000 0, rgba(0, 0, 0, .45) 50%, transparent 82%); }
.hero__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-block: calc(9vh + 43px) 48px; padding-block: calc(9svh + 43px) 48px; text-align: center; }
.hero__titre { max-width: 1120px; font: 400 clamp(36px, 3.2vw + 22px, 70px)/1.1 var(--f-titre); letter-spacing: -.03em; color: var(--encre); text-wrap: balance; }
/* La seconde ligne par sa classe : le flip de l'entrée découpe le titre en
   span de lettres, qu'un sélecteur « .hero__titre span » empilait en colonne */
.hero__titre .hero__l2 { display: block; color: var(--sourdine); }
/* Le surtitre du héros : la légende des pages intérieures, même écart au titre */
.hero__in > .legende { margin-bottom: 20px; }
.hero__chapo { max-width: 520px; margin-top: 24px; font: 400 17px/26px var(--f-texte); color: rgba(10, 26, 61, .73); text-wrap: pretty; }
.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 36px; }
.pastilles { display: flex; flex-direction: column; align-items: center; margin-top: 44px; }
.pastilles__rang { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pastilles__trame { display: block; width: min(760px, 100%); height: 14px; background: radial-gradient(circle, rgba(0, 51, 153, .2) .9px, transparent 1.25px) 50% 50% / 7px 7px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
/* Pastille relevée sur peakfast : 32 px, pilule, verre à 80 %, flou 5 px.
   Ni ombre ni bordure, un anneau de 1 px. Le ruban passe dessous, flouté. */
.pastille { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 6px 16px 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 0 0 1px rgba(0, 40, 110, .08); font: 500 14px/20px var(--f-titre); color: var(--encre); white-space: nowrap; }
.pastille svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--vert); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* Le canevas du verre : une scène Three.js par section, montée après le
   premier rendu. Il arrive en fondu sur un fond qui est déjà le sien. */
.verre { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .9s var(--c-lueur); }
.verre.est-pret { opacity: 1; }
.nx-gel .verre { transition: none; }

/* Réseau de fond : filets de grille qui ne vivent qu'autour des nœuds, arcs
   parcourus de comètes, libellés. Technique relevée sur peakfast : chaque
   arc est masqué par son propre tracé SVG, la comète est un dégradé qui le
   traverse en transform, 9 s ease-in, délais négatifs décalés. Round 6 : plus
   de pastilles rondes ni de points semés ; les traits passent au-dessus du
   canevas du verre. */
.reseau { position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: apparait 1.6s var(--c-lueur) .3s both; }
@keyframes apparait { from { opacity: 0; } }
.reseau__h, .reseau__v { position: absolute; background: rgba(10, 26, 61, .1); }
.reseau__h { left: 0; right: 0; height: 1px; }
.reseau__v { top: 0; bottom: 0; width: 1px; }
.reseau__arcs { position: absolute; left: 0; top: 0; overflow: visible; }
.reseau__arcs path { fill: none; stroke: rgba(10, 26, 61, .13); stroke-width: 1; }
.comete { position: absolute; overflow: hidden; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; --rgb: 0 51 153; }
.comete--v { --rgb: 0 204 102; }
.comete i { position: absolute; inset: 0; animation: 9s ease-in var(--dl, 0s) infinite both; }
.comete--d i { background: linear-gradient(90deg, rgb(var(--rgb) / 0) 42%, rgb(var(--rgb) / .85) 95%, rgb(var(--rgb) / 0)); animation-name: comete-d; }
.comete--g i { background: linear-gradient(270deg, rgb(var(--rgb) / 0) 42%, rgb(var(--rgb) / .85) 95%, rgb(var(--rgb) / 0)); animation-name: comete-g; }
.comete--b i { background: linear-gradient(180deg, rgb(var(--rgb) / 0) 42%, rgb(var(--rgb) / .85) 95%, rgb(var(--rgb) / 0)); animation-name: comete-b; }
.comete--h i { background: linear-gradient(0deg, rgb(var(--rgb) / 0) 42%, rgb(var(--rgb) / .85) 95%, rgb(var(--rgb) / 0)); animation-name: comete-h; }
@keyframes comete-d { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes comete-g { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@keyframes comete-b { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes comete-h { from { transform: translateY(100%); } to { transform: translateY(-100%); } }
/* Les libellés ont leur calque et portent un halo du fond du héros qui
   interrompt les filets, à l'écart des arcs de leur nœud. Givré plutôt que
   plein : sur le verre, un aplat ferait autocollant. */
.reseau--noeuds { z-index: 1; }
.noeud { position: absolute; width: 0; height: 0; }
.noeud span { position: absolute; left: 0; top: 13px; padding: 1px 5px; border-radius: 3px; background: rgba(251, 251, 252, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transform: translateX(-50%); font: 400 12px/16px var(--f-titre); color: rgba(10, 26, 61, .5); white-space: nowrap; }
.noeud--h span { top: auto; bottom: 13px; }
.noeud--d span { left: 13px; top: 0; transform: translateY(-50%); }
.noeud--g span { left: auto; right: 13px; top: 0; transform: translateY(-50%); }

/* Ciel de chiffres : section sombre, fonds croisés 1,2 s. Round 6 : sans les
   fibres, la section suit les chiffres, marges généreuses ; le halo clair du
   bas des fonds se resserre sous eux. */
.ciel { position: relative; overflow: clip; isolation: isolate; background: var(--nuit); color: #fff; }
.ciel__fonds i { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity 1.2s var(--c-ciel); }
.ciel__fonds i.est-actif { opacity: 1; }
.ciel__fonds i:nth-child(1) { background: radial-gradient(102.82% 106.44% at 50% 106.44%, #dbe7ff 1.11%, #6f98ef 18%, #2d5cc6 34%, #0f3a9c 50%, #0b2a74 68%, #0b1f4d 100%); }
.ciel__fonds i:nth-child(2) { background: radial-gradient(103.24% 102.63% at 50% 102.63%, #e2fff0 0, #6fe2a8 16%, #13a874 32%, #0a6b62 48%, #0b3a5e 68%, #0b1f4d 100%); }
.ciel__fonds i:nth-child(3) { background: radial-gradient(102.68% 99.11% at 50% 104.6%, #e4fbff 0, #8fe3f2 14%, #2fa8d0 28%, #1470a8 44%, #0d3f7a 62%, #0b2458 80%, #0b1f4d 100%); }
.ciel__in { padding-block: 128px; }
/* Trois chiffres au round 6, trois colonnes égales, l'indicateur suit la colonne */
.stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; border-block: 1px solid rgba(255, 255, 255, .12); }
.stats__indic { position: absolute; left: calc(var(--actif, 0) * ((100% - 32px) / 3 + 16px)); width: calc((100% - 32px) / 3); height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #fcfdfe 50%, rgba(0, 0, 0, 0) 100%); transition: left .4s var(--c-indic), background .4s var(--c-indic); }
.stats__indic--haut { top: -1px; }
.stats__indic--bas { bottom: -1px; }
.chiffre { padding: 36px 12px 34px; text-align: center; outline: 0; cursor: default; }
.chiffre strong { display: block; font: 400 34px/34px var(--f-titre); letter-spacing: -.015em; color: var(--nuit-sourdine); transition: color .3s var(--c-bouton); }
.chiffre strong small { font-size: 20px; letter-spacing: -.2px; }
.chiffre__legende { display: block; margin: 10px auto 0; max-width: 18ch; font: 400 16px/22.4px var(--f-texte); color: var(--nuit-sourdine); transition: color .3s var(--c-bouton); }
.chiffre.est-actif strong, .chiffre.est-actif .chiffre__legende { color: #fff; }
.chiffre:focus-visible strong { text-decoration: underline 1px; text-underline-offset: 6px; }

/* Compteurs à rouleaux : le défilement vertical du compteur du héros de Stripe */
.reels { display: inline-flex; vertical-align: top; height: 1lh; overflow: hidden; }
.reel { position: relative; display: block; height: 1lh; overflow: hidden; }
.reel::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; display: block; white-space: pre; text-align: center; transition: transform 1.6s var(--c-lueur) calc(var(--r, 0) * 110ms); }
.est-compte .reel::before { transform: translateY(calc(var(--d) * -1lh)); }

/* Bento : 816 + 400, 3 × 400, 1232, écart 16 px */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }

/* La carte Stripe, mesurée : le bord et le fond s'ouvrent de (gx, gy) en
   0,8 s, le titre suit le coin haut gauche, l'icône le coin haut droit,
   le dégradé du liseré rejoint le bord dans la direction du pointeur. */
.carte { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--encre); z-index: 0; transition: z-index .1s steps(1); -webkit-tap-highlight-color: transparent; }
.carte--8 { grid-column: span 8; aspect-ratio: 816 / 676; --gx: 4.828402366863905px; --gy: 4px; --s: 753px; }
.carte--4 { grid-column: span 4; aspect-ratio: 400 / 676; --gx: 3.550295857988166px; --gy: 6px; --s: 552px; }
.carte--12 { grid-column: span 12; aspect-ratio: 1232 / 450; --gx: 5.475555555555555px; --gy: 2px; --s: 647px; }
.carte:is(:hover, :focus-visible) { z-index: 1; }
.carte:focus-visible { outline: 0; }
.carte__bord { position: absolute; inset: calc(-1px - var(--gy)) calc(-1px - var(--gx)); border-radius: 6px; background: var(--filet); overflow: hidden; clip-path: inset(var(--gy) var(--gx) round 6px); transition: clip-path .8s var(--c-carte); }
.carte__lueur { position: absolute; left: calc(50% - var(--s) / 2); top: calc(50% - var(--s) / 2); width: var(--s); height: var(--s); opacity: 0; transition: opacity .25s linear; }
.carte__lueur i { position: absolute; inset: 0; background: radial-gradient(circle, var(--vert), var(--bleu) 33%, var(--filet) 66%); opacity: .5; transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform 1s var(--c-lueur); }
.carte__fond { position: absolute; inset: calc(-1 * var(--gy)) calc(-1 * var(--gx)); background: #fff; overflow: hidden; clip-path: inset(var(--gy) var(--gx) round 5px); transition: clip-path .8s var(--c-carte); }
.carte:is(:hover, :focus-visible) .carte__bord { clip-path: inset(0 round 6px); }
.carte:is(:hover, :focus-visible) .carte__lueur { opacity: 1; }
.carte:is(:hover, :focus-visible) .carte__fond { clip-path: inset(0 round 5px); }
.carte__zone { position: absolute; inset: var(--gy) var(--gx); }
.carte__tete { position: absolute; left: 24px; top: 24px; right: 78px; z-index: 3; transition: transform .8s var(--c-carte); }
.carte:is(:hover, :focus-visible) .carte__tete { transform: translate(calc(-1 * var(--gx)), calc(-1 * var(--gy))); }
.carte__titre { font: 400 26px/29.12px var(--f-titre); letter-spacing: -.26px; color: var(--encre); text-wrap: balance; }
.carte__ligne { display: block; margin-top: 12px; font: 400 16px/22.4px var(--f-texte); color: var(--soft); }
.carte__ouvrir { position: absolute; top: 16px; right: 16px; z-index: 3; width: 38px; height: 38px; border-radius: 4px; display: grid; place-items: center; background: var(--nappe); color: var(--bleu); transition: transform .8s var(--c-carte), background-color .3s var(--c-bouton), color .3s var(--c-bouton); }
.carte__ouvrir svg { width: 14px; height: 14px; }
.carte__ouvrir path { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--c-lueur); }
.carte:is(:hover, :focus-visible) .carte__ouvrir { transform: translate(var(--gx), calc(-1 * var(--gy))); background: var(--bleu); color: #fff; }
.carte:is(:hover, :focus-visible) .carte__ouvrir path:first-child { transform: translate(1.5px, -1.5px); }
.carte:is(:hover, :focus-visible) .carte__ouvrir path:last-child { transform: translate(-1.5px, 1.5px); }
.lazy { opacity: 0; transition: opacity .5s var(--c-lazy); }
.lazy.est-charge { opacity: 1; }

/* Éléments d'interface des graphiques */
.ui { position: absolute; background: #fff; border-radius: 8px; box-shadow: var(--ombre-lg), 0 0 0 1px rgba(0, 40, 110, .06); }
.ui__label { display: block; font: 500 12px/16px var(--f-titre); color: var(--soft); }
.coche { flex: none; width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--lavande); display: grid; place-items: center; background: #fff; transition: background-color .4s var(--c-carte) var(--dl, 0s), box-shadow .4s var(--c-carte) var(--dl, 0s); }
.coche svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .4s var(--c-carte) calc(var(--dl, 0s) + .15s); }
.est-fait .coche { background: var(--vert); box-shadow: inset 0 0 0 1px var(--vert); }
.est-fait .coche svg { stroke-dashoffset: 0; }

/* Carte 01 : le dossier d'ouverture et la fenêtre de l'extranet */
.dossier-fond { position: absolute; inset: 0; pointer-events: none; }
.dossier-fond svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 72%; }
.dossier { left: 24px; top: 164px; width: 276px; z-index: 2; padding-bottom: 6px; }
.dossier__tete { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 12px; }
.dossier__tete b { font: 500 13px/16px var(--f-titre); color: var(--encre); }
.compteur { display: inline-flex; align-items: baseline; gap: 4px; font: 500 13px/16px var(--f-titre); color: var(--bleu); font-variant-numeric: tabular-nums; }
.compteur__fen { display: inline-block; height: 16px; overflow: hidden; }
.compteur__rail { display: block; transition: transform .6s var(--c-carte); }
.compteur__rail span { display: block; height: 16px; }
.dossier__piste { display: block; height: 4px; margin: 0 18px 8px; border-radius: 2px; background: var(--nappe); overflow: hidden; }
.dossier__piste i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--bleu), var(--bleu-clair) 60%, var(--vert)); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--c-carte); }
.est-charge .dossier__piste i { transform: scaleX(.6667); }
.dossier .livre { border: 0; }
.dossier .livre li { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; border-top: 1px solid var(--filet); font: 400 13.5px/18px var(--f-texte); color: var(--encre); position: relative; }
.dossier .livre li::before { display: none; }
.dossier .livre li.est-courant { background: var(--bande); }
.dossier .livre li.est-courant::after { content: ""; position: absolute; right: 18px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 2px; background: var(--bleu); animation: pouls 1.4s var(--c-ciel) infinite; }
@keyframes pouls { 50% { opacity: .25; transform: scale(.7); } }
.fenetre { left: 316px; top: 136px; width: 568px; height: 600px; z-index: 1; overflow: hidden; }
.fenetre__barre { display: grid; grid-template-columns: 32px auto minmax(0, 1fr); gap: 14px; align-items: center; height: 40px; padding: 0 14px; background: var(--bande); border-bottom: 1px solid var(--filet); }
.fenetre__points { display: flex; gap: 5px; }
.fenetre__points i { width: 7px; height: 7px; border-radius: 50%; background: var(--lavande); }
.fenetre__url { justify-self: center; display: inline-flex; align-items: center; gap: 6px; width: 262px; height: 24px; padding: 0 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); font: 400 11px/1 var(--f-texte); color: var(--soft); }
.fenetre__url svg { width: 9px; height: 9px; fill: var(--discret); }
/* Les maquettes de l'extranet portent leur mention, après les trois points :
   la droite de la fenêtre de la carte 01 sort de la carte. L'adresse suit. */
.fenetre__mention { font: 400 10.5px/1 var(--f-texte); color: var(--discret); white-space: nowrap; }
.fenetre__mention + .fenetre__url { justify-self: start; }
.fenetre__corps { display: grid; grid-template-columns: 262px 1fr; gap: 0; height: calc(100% - 40px); }
.fenetre__col { display: block; padding: 20px; }
.fenetre__col + .fenetre__col { border-left: 1px solid var(--filet); }
.previ { display: block; margin-top: 14px; width: 222px; height: 190px; overflow: visible; }
.previ .barre-ca, .previ .barre-ch { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .9s var(--c-carte) var(--dl, 0s); }
.est-charge .previ .barre-ca, .est-charge .previ .barre-ch { transform: scaleY(1); }
.previ .resultat { fill: none; stroke: var(--vert); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1s var(--c-carte); }
.previ .point { fill: #fff; stroke: var(--vert); stroke-width: 2; opacity: 0; transition: opacity .3s .7s; }
.carte:is(:hover, :focus-visible) .previ .resultat { stroke-dashoffset: 0; }
.carte:is(:hover, :focus-visible) .previ .point { opacity: 1; }
.legende-mini { display: flex; gap: 14px; margin-top: 12px; font: 400 11px/14px var(--f-texte); color: var(--soft); }
.legende-mini i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.habil { margin-top: 12px; max-width: 196px; }
.habil li { display: flex; justify-content: space-between; align-items: center; height: 38px; border-bottom: 1px solid var(--filet); font: 500 13px/1 var(--f-titre); color: var(--encre); }
.inter { display: inline-block; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--filet); position: relative; transition: background-color .4s var(--c-carte) var(--dl, 0s); }
.inter::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 40, 110, .25); transition: transform .4s var(--c-carte) var(--dl, 0s); }
.est-on .inter { background: var(--vert); }
.est-on .inter::after { transform: translateX(12px); }
.carte:is(:hover, :focus-visible) .habil li .inter { background: var(--vert); }
.carte:is(:hover, :focus-visible) .habil li .inter::after { transform: translateX(12px); }
/* Transfert du portefeuille : trois jalons datés. Au survol, la piste se remplit
   puis le dernier jalon passe de « En cours » à « Fait », compteur 2 → 3. */
.transfert { display: block; max-width: 200px; margin-top: 22px; }
.transfert__tete { display: flex; justify-content: space-between; align-items: center; }
.transfert__compte { display: inline-flex; gap: 3px; font: 500 12px/16px var(--f-titre); color: var(--bleu); font-variant-numeric: tabular-nums; }
.roule { display: inline-block; height: 16px; overflow: hidden; vertical-align: top; }
.roule > span { display: block; transition: transform .6s var(--c-carte) var(--dl, 0s); }
.roule > span > span { display: block; height: 16px; }
.carte:is(:hover, :focus-visible) .roule > span { transform: translateY(-16px); }
.transfert__piste { display: block; margin-top: 10px; height: 6px; border-radius: 3px; background: var(--nappe); overflow: hidden; }
.transfert__piste i { display: block; height: 100%; background: linear-gradient(90deg, var(--bleu-clair), var(--vert)); transform: scaleX(.6667); transform-origin: left; transition: transform 1.1s var(--c-carte); }
.carte:is(:hover, :focus-visible) .transfert__piste i { transform: scaleX(1); }
.jalons { display: block; margin-top: 12px; }
.jalon { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 16px 14px; align-items: center; column-gap: 6px; row-gap: 2px; padding: 6px 0; border-top: 1px solid var(--filet); }
.jalon:last-child { border-bottom: 1px solid var(--filet); }
.jalon time { grid-area: 2 / 1; font: 500 10.5px/14px var(--f-titre); color: var(--discret); font-variant-numeric: tabular-nums; }
.jalon .statut { grid-area: 1 / 2 / 3 / 3; }
.jalon > span:not(.statut) { grid-area: 1 / 1; font: 400 12px/16px var(--f-texte); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statut { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 10px; font: 500 11px/20px var(--f-titre); color: var(--vert-texte); background: rgba(0, 204, 102, .12); transition: color .4s var(--c-carte) .55s, background-color .4s var(--c-carte) .55s; }
.statut::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.statut--cours { color: var(--bleu); background: var(--nappe); }
.statut--cours::before { animation: pouls 1.4s var(--c-ciel) infinite; }
/* La pastille qui change d'état ne roule pas : ses deux libellés partagent
   la même case et se relaient, 6 px de glissé. Le libellé caché est
   transparent, jamais seulement rogné : au roulis, « Fait » passait sous
   « En cours » dans la pastille, et à DPR 1,1 le rognage arrondi au pixel en
   laissait un filet sous la pastille. Relais sans recouvrement : celui qui
   sort s'efface en 0,16 s linéaire, celui qui entre attend ces 0,16 s. Chaque
   état porte les transitions qui y mènent. */
.statut .roule { display: inline-grid; height: 20px; }
.statut .roule > span { display: grid; }
.statut .roule > span > span { grid-area: 1 / 1; height: 20px; min-width: 46px; transition: opacity .22s var(--c-carte) calc(var(--dl, 0s) + .16s), transform .5s var(--c-carte) calc(var(--dl, 0s) + .16s); }
.statut .roule > span > span:last-child { opacity: 0; transform: translateY(6px); transition: opacity .16s linear var(--dl, 0s), transform .5s var(--c-carte) var(--dl, 0s); }
.carte:is(:hover, :focus-visible) .statut .roule > span { transform: none; }
.carte:is(:hover, :focus-visible) .statut .roule > span > span:first-child,
.fen .statut.est-fini .roule > span > span:first-child { opacity: 0; transform: translateY(-6px); transition: opacity .16s linear var(--dl, 0s), transform .5s var(--c-carte) var(--dl, 0s); }
.carte:is(:hover, :focus-visible) .statut .roule > span > span:last-child,
.fen .statut.est-fini .roule > span > span:last-child { opacity: 1; transform: none; transition: opacity .22s var(--c-carte) calc(var(--dl, 0s) + .16s), transform .5s var(--c-carte) calc(var(--dl, 0s) + .16s); }
.carte:is(:hover, :focus-visible) .statut--cours { color: var(--vert-texte); background: rgba(0, 204, 102, .12); }
.carte:is(:hover, :focus-visible) .statut--cours::before { animation: none; }

/* Carte 02 : veille, procédures en éventail, conventions */
.conf-fond { position: absolute; left: 0; right: 0; bottom: 0; height: 340px; background: radial-gradient(70% 70% at 20% 110%, rgba(0, 204, 102, .28), transparent 70%), radial-gradient(80% 80% at 85% 115%, rgba(91, 141, 239, .38), transparent 70%); pointer-events: none; }
.veille { left: 24px; right: 24px; top: 122px; height: 60px; padding: 11px 14px; }
.veille__fen { position: relative; display: block; height: 20px; margin-top: 3px; overflow: hidden; }
.veille__item { position: absolute; left: 0; top: 0; font: 500 14px/20px var(--f-titre); color: var(--encre); white-space: nowrap; transition: transform .6s var(--c-carte), opacity .6s var(--c-carte); }
.veille__item.entre { transform: translateY(18px); opacity: 0; }
.veille__item.sort { transform: translateY(-18px); opacity: 0; }
.veille__item b { font-weight: 500; color: var(--bleu); }
.proc__label { position: absolute; left: 24px; top: 198px; }
.feuilles { position: absolute; left: 0; right: 0; top: 222px; height: 250px; }
.feuille { position: absolute; left: 100px; top: 8px; width: 200px; height: 224px; padding: 16px; border-radius: 6px; background: #fff; box-shadow: var(--ombre-md), 0 0 0 1px rgba(0, 40, 110, .07); transform-origin: 50% 110%; transform: translate(calc(var(--i) * 5px), calc(var(--i) * -5px)); transition: transform .8s var(--c-carte); }
.carte:is(:hover, :focus-visible) .feuille { transform: translateX(calc((var(--i) - 1.5) * 46px)) rotate(calc((var(--i) - 1.5) * 7deg)); }
.feuille b { display: block; font: 500 12px/15px var(--f-titre); color: var(--encre); min-height: 30px; }
.feuille__meta { display: block; margin-top: 10px; }
.feuille__meta > span { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--filet); font: 400 11px/14px var(--f-texte); color: var(--soft); }
.feuille__meta em { font: 500 11px/14px var(--f-titre); font-style: normal; color: var(--encre); font-variant-numeric: tabular-nums; }
.feuille__etat { position: absolute; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--f-titre); color: var(--vert-texte); }
.feuille__etat .coche { width: 14px; height: 14px; }
.feuille__etat .coche svg { width: 9px; height: 9px; }
/* Conventions : six familles de partenaires et leur statut. La carte survolée
   éclaire les tuiles en cascade ; la tuile survolée se soulève et donne sa date. */
.conv { left: 24px; right: 24px; top: 474px; padding: 14px; }
.conv__tete { display: flex; justify-content: space-between; align-items: center; }
.conv__compte { font: 500 11px/16px var(--f-titre); color: var(--vert-texte); font-variant-numeric: tabular-nums; }
.conv__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.conv__item { position: relative; display: block; height: 42px; padding: 7px 10px; border-radius: 6px; background: var(--bande); box-shadow: inset 0 0 0 1px var(--filet); transition: background-color .5s var(--c-carte) var(--dl), box-shadow .5s var(--c-carte) var(--dl), transform .4s var(--c-carte); }
.conv__item b { display: block; font: 500 12px/14px var(--f-titre); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Fenêtre de 16 px pour des lignes de 14 : le jambage du g de « Signée »
   (et du p de « depuis ») passait sous le bord à DPR 1,25 et 1,5. Le texte
   ne bouge pas, les 2 px s'ajoutent sous la ligne. */
.conv__etat { display: block; height: 16px; margin-top: 3px; overflow: hidden; font: 400 11px/14px var(--f-texte); }
.conv__etat > span { display: block; transition: transform .45s var(--c-carte); }
.conv__etat > span > span { display: flex; align-items: center; gap: 5px; height: 16px; padding-bottom: 2px; white-space: nowrap; }
.conv__etat > span > span:first-child::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.conv__etat > span > span:last-child { color: var(--soft); }
.est-signe .conv__etat { color: var(--vert-texte); }
.est-cours .conv__etat { color: var(--bleu); }
.est-cours .conv__etat > span > span:first-child::before { animation: pouls 1.4s var(--c-ciel) infinite; }
.carte:is(:hover, :focus-visible) .conv__item { background: #fff; box-shadow: inset 0 0 0 1px var(--lavande); }
.carte .conv__item:hover { transform: translateY(-2px); background: #fff; box-shadow: inset 0 0 0 1px var(--bleu), var(--ombre-sm); transition-delay: 0s; }
.conv__item:hover .conv__etat > span { transform: translateY(-16px); }

/* Carte 03 : le schéma des outils, relié au cabinet */
.outils-fond { position: absolute; left: 380px; right: 0; top: 0; bottom: 0; background-image: radial-gradient(circle, #d3dcee 1px, transparent 1.3px); background-size: 12px 12px; -webkit-mask-image: radial-gradient(75% 85% at 55% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(75% 85% at 55% 50%, #000 30%, transparent 80%); opacity: .8; }
.outils-hachures { position: absolute; right: 0; top: 0; bottom: 0; width: 260px; background: repeating-linear-gradient(-58deg, rgba(91, 141, 239, .28) 0 1px, transparent 1px 7px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.carte--12 .livre { position: absolute; left: 24px; top: 104px; width: 300px; }
.schema { position: absolute; left: 372px; top: 20px; width: 830px; height: 410px; overflow: visible; }
.schema .lien-base { fill: none; stroke: #c9d5ec; stroke-width: 1.5; stroke-dasharray: 2 4; }
.schema .flux { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 13; animation: flux 1.6s linear infinite; transition: opacity .4s; }
.schema .flux--outil { stroke: var(--bleu-clair); }
.schema .flux--vie { stroke: var(--vert); animation-direction: reverse; }
.schema .flux--vite { opacity: 0; animation-duration: .55s; }
.carte:is(:hover, :focus-visible) .schema .flux--vite { opacity: 1; }
.carte:is(:hover, :focus-visible) .schema .flux--lent { opacity: 0; }
@keyframes flux { to { stroke-dashoffset: -32; } }
.schema .tuile > rect:first-child { fill: #fff; stroke: var(--filet); transition: stroke .4s var(--c-carte), transform .6s var(--c-carte); }
.schema .tuile { transition: transform .6s var(--c-carte) var(--dl, 0s); }
.carte:is(:hover, :focus-visible) .schema .tuile { transform: translateY(-3px); }
.carte:is(:hover, :focus-visible) .schema .tuile > rect:first-child { stroke: var(--lavande); }
.schema text { font: 500 13px var(--f-titre); fill: var(--encre); }
.schema .cabinet text { fill: #fff; font-size: 15px; }
.schema .halo { fill: none; stroke: var(--vert); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .4s, transform .8s var(--c-carte); transform: scale(.96); }
.carte:is(:hover, :focus-visible) .schema .halo { opacity: 1; transform: scale(1); }
.schema .impulsion { opacity: 0; transition: opacity .3s; }
.carte:is(:hover, :focus-visible) .schema .impulsion { opacity: 1; }

/* Raison 02 : le graphe à 31 barres de la carte « facturation », formules relevées */
.brume { position: absolute; left: 0; right: 0; top: 40px; height: 648px; transform: translateY(calc((1 - var(--progress, 0)) * 324px)); transition: transform .2s linear; pointer-events: none; }
.brume i { position: absolute; left: 50%; }
.brume i:nth-child(1) { width: 683px; height: 439px; margin-left: -341.5px; top: 351.25px; background: radial-gradient(50% 50%, rgba(0, 51, 153, .55) 62.5%, rgba(0, 51, 153, 0) 100%); }
.brume i:nth-child(2) { width: 698px; height: 415px; margin-left: -349px; top: 207.25px; background: radial-gradient(50% 50%, rgba(91, 141, 239, .62) 53.85%, rgba(91, 141, 239, 0) 100%); }
.brume i:nth-child(3) { width: 713px; height: 426px; margin-left: -356.5px; top: 95.25px; background: radial-gradient(50% 50%, rgba(190, 228, 225, .85) 41.35%, rgba(190, 228, 225, 0) 100%); }
.brume i:nth-child(4) { width: 692px; height: 314px; margin-left: -346px; top: 23.25px; background: linear-gradient(#fff 41.35%, rgba(255, 255, 255, 0)); }
.plan, .module { left: 16.81px; top: 184px; width: 366.38px; height: 455px; padding: 24px 30.19px; display: flex; flex-direction: column; gap: 14px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.plan { transition: --hover-progress .6s var(--c-ciel), transform .8s var(--c-carte), box-shadow .8s var(--c-carte); --combined-progress: calc(var(--progress, 0) * .95 + var(--hover-progress) * .05); }
/* Les trois modules de la rangée s'élèvent au survol de leur carte */
.raison:is(:hover, :focus-visible) .ui:is(.plan, .module) { transform: translateY(-4px); box-shadow: var(--ombre-xl), 0 0 0 1px rgba(0, 40, 110, .06); }
.carte:is(:hover, :focus-visible) .plan { --hover-progress: 1; }
.plan__tete { display: flex; gap: 12px; align-items: center; }
.plan__icone { flex: none; width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.plan__icone svg { width: 18px; height: 18px; }
.plan__tete > span:last-child { display: block; }
.plan__tete b { display: block; font: 500 15px/19px var(--f-titre); color: var(--encre); }
.plan__tete > span:last-child > span { display: block; font: 400 12px/16px var(--f-texte); color: var(--soft); }
.plan__usage { display: block; padding-top: 12px; border-top: 1px solid var(--filet); }
.plan__usage-texte { display: flex; justify-content: space-between; font: 400 12px/16px var(--f-texte); color: #26385e; }
.plan__piste { display: block; margin-top: 10px; width: 230px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--nappe); }
.plan__jauge { display: block; width: 230px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--bleu) 3.13%, var(--bleu-clair) 50%, var(--vert)); transform: translateX(calc((var(--combined-progress) - 1) * 230px)); }
.plan__reperes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--filet); }
.plan__reperes > span { display: block; }
.plan__reperes em { display: block; font: 400 12px/16px var(--f-texte); font-style: normal; color: var(--soft); }
.plan__reperes b { display: block; margin-top: 4px; font: 500 18px/22px var(--f-titre); letter-spacing: -.18px; color: var(--bleu); }
.plan__reperes > span:last-child b { color: var(--vert-texte); }
.plan__graphe { display: block; position: relative; margin-top: auto; padding-top: 22px; }
.plan__graphe .ui__label { position: absolute; top: 0; left: 0; }
.plan__barres { position: relative; display: flex; gap: 3.2px; align-items: flex-end; justify-content: center; width: 306px; height: 149px; }
.plan__barre { flex: none; width: 4.26562px; height: 149px; border-radius: 1px; background: var(--bleu); transform-origin: 2.13281px 149px; --start: calc(var(--i) / 31 * .7); --piw: clamp(0, calc((var(--progress, 0) * .9 + var(--hover-progress) * .1 - var(--start)) / .3), 1); transform: scaleY(calc(var(--t) * var(--piw))); }
.plan__barre:nth-child(n+25) { background: linear-gradient(var(--bleu-clair), var(--bleu)); }
/* La contribution suit la production, puis plafonne : une ligne qui monte
   et devient horizontale, tracée avec les barres. Aucun chiffre sur les
   axes (retours de Victor, 20/10/2026). */
.plan__contrib { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plan__contrib path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--combined-progress, 1)); }
.plan__contrib-fond { stroke: #fff; stroke-width: 6; }
.plan__contrib-trait { stroke: var(--vert); stroke-width: 2; }

/* Raisons 01 et 03 : deux modules d'interface pleins, sur le modèle de
   « Votre production ». Même cadre (366 × 455 à 184 px du haut), même brume
   qui monte au défilement, teinte propre à chaque carte. Au survol : le module
   s'élève, un point actif change d'état, une infobulle nomme ce qui se passe. */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #003399; }
.brume--vert i:nth-child(1) { margin-left: -420px; background: radial-gradient(50% 50%, rgba(0, 204, 102, .72) 62.5%, rgba(0, 204, 102, 0) 100%); }
.brume--vert i:nth-child(2) { margin-left: -250px; background: radial-gradient(50% 50%, rgba(91, 141, 239, .62) 53.85%, rgba(91, 141, 239, 0) 100%); }
.brume--vert i:nth-child(3) { background: radial-gradient(50% 50%, rgba(134, 232, 184, .85) 41.35%, rgba(134, 232, 184, 0) 100%); }
.brume--ciel i:nth-child(1) { margin-left: -262px; background: radial-gradient(50% 50%, rgba(91, 141, 239, .85) 62.5%, rgba(91, 141, 239, 0) 100%); }
.brume--ciel i:nth-child(2) { margin-left: -440px; background: radial-gradient(50% 50%, rgba(0, 204, 102, .6) 53.85%, rgba(0, 204, 102, 0) 100%); }
.brume--ciel i:nth-child(3) { background: radial-gradient(50% 50%, rgba(207, 224, 255, .9) 41.35%, rgba(207, 224, 255, 0) 100%); }
.module { --accent: #003399; transition: transform .8s var(--c-carte), box-shadow .8s var(--c-carte), --accent .6s var(--c-carte); }
.infobulle { --tx: -50%; --ty: 0px; position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 7px); padding: 5px 8px; border-radius: 4px; background: var(--encre); color: #fff; font: 500 11px/14px var(--f-titre); letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 4px)); pointer-events: none; transition: opacity .2s var(--c-bouton), transform .3s var(--c-bouton); }
.infobulle::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--encre); }
.infobulle--droite { --tx: 0%; left: auto; right: -6px; }
.infobulle--droite::after { left: auto; right: 12px; }
.infobulle--cote { --tx: 0%; --ty: -50%; left: calc(100% + 10px); bottom: auto; top: 50%; }
.infobulle--cote::after { top: 50%; left: -8px; margin: -4px 0 0; border-top-color: transparent; border-right-color: var(--encre); }

/* Trame de points au fond des trois raisons, même recette que .outils-fond :
   sur la brume (son voile blanc l'effacerait), derrière le module. */
.trame { position: absolute; inset: 0; background-image: radial-gradient(circle, #d3dcee 1px, transparent 1.3px); background-size: 12px 12px; -webkit-mask-image: radial-gradient(85% 62% at 50% 58%, #000 35%, transparent 82%); mask-image: radial-gradient(85% 62% at 50% 58%, #000 35%, transparent 82%); opacity: .8; pointer-events: none; }

/* Raison 01 : la carte de visite du cabinet, éditable, et les documents
   qu'elle habille. Au survol, votre couleur passe du bleu au vert : l'anneau
   glisse sur la pastille, la carte et chaque en-tête se recolorent. */
.raison:is(:hover, :focus-visible) .marque { --accent: #00cc66; --k: 1; }
.cv { position: relative; display: block; flex: none; height: 146px; padding: 18px 18px 14px; border-radius: 8px; background: linear-gradient(135deg, #fff 35%, #f2f6fd); box-shadow: var(--ombre-md), 0 0 0 1px rgba(0, 40, 110, .07); transition: transform .8s var(--c-carte), box-shadow .8s var(--c-carte); }
.raison:is(:hover, :focus-visible) .cv { transform: translateY(-5px); box-shadow: var(--ombre-lg), 0 0 0 1px rgba(0, 40, 110, .08); }
.cv__motif { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 86%); mask-image: linear-gradient(90deg, transparent 50%, #000 86%); }
.cv__rosace { fill: none; stroke: currentColor; stroke-width: .5; opacity: .5; }
.cv__mono { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--accent); }
.cv__mono svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cv__nom { position: relative; display: block; margin-top: 20px; }
.cv__champ { position: relative; display: inline-flex; align-items: center; margin-left: -5px; padding: 1px 5px; border-radius: 4px; font: 500 17px/22px var(--f-titre); letter-spacing: -.17px; color: var(--encre); box-shadow: 0 0 0 1px transparent; cursor: text; transition: box-shadow .3s var(--c-bouton); }
.cv__curseur { flex: none; width: 1.5px; height: 17px; margin-left: 2px; background: var(--accent); opacity: 0; }
.cv:hover .cv__champ { box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px rgba(0, 51, 153, .08); }
.cv:hover .cv__curseur { animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 0% { opacity: 1; } 50% { opacity: 0; } }
.cv__metier { position: relative; display: block; margin-top: 2px; font: 400 11.5px/16px var(--f-texte); color: var(--soft); }
.cv__pied { position: absolute; left: 18px; right: 18px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; padding-top: 9px; border-top: 1px solid var(--filet); font: 500 10px/12px var(--f-titre); letter-spacing: .02em; color: var(--discret); }
.cv__barre { width: 34px; height: 4px; border-radius: 2px; background: var(--accent); }
.teintes { display: flex; justify-content: space-between; align-items: center; flex: none; padding-top: 10px; border-top: 1px solid var(--filet); }
.teintes__rangee { position: relative; display: flex; gap: 8px; padding: 4px; }
.teintes__rangee > i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.teintes__anneau { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--accent); transform: translateX(calc(var(--k, 0) * 26px)); transition: transform .6s var(--c-carte); }
.supports { display: block; margin-top: auto; }
.support { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; margin: 0 -8px; padding: 0 8px; border-top: 1px solid var(--filet); border-radius: 4px; font: 400 12.5px/16px var(--f-texte); color: var(--encre); transition: background-color .3s var(--c-bouton); }
.support:hover { background: var(--bande); }
.doc { position: relative; flex: none; width: 17px; height: 22px; border-radius: 2px; background: #fff; box-shadow: inset 0 0 0 1px var(--lavande); overflow: hidden; }
.doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--accent); }
.doc::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 9px; background: repeating-linear-gradient(var(--lavande) 0 1px, transparent 1px 3px); }
.support__nom { flex: 1; min-width: 0; }
.puce { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 10px; font: 500 11px/20px var(--f-titre); color: var(--encre); background: color-mix(in srgb, var(--accent) 13%, #fff); }
.puce::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.support--nx { color: var(--soft); }
.support--nx > svg { flex: none; width: 17px; height: 17px; filter: grayscale(1); opacity: .45; }
.support--nx .puce { color: var(--soft); background: var(--bande); box-shadow: inset 0 0 0 1px var(--filet); }
.support--nx .puce::before { background: var(--discret); }
.support:hover .infobulle, .cv:hover .cv__champ > .infobulle,
.raison:is(:hover, :focus-visible) .marque:not(:has(.cv:hover, .support:hover)) .teintes__anneau > .infobulle { opacity: 1; transform: translate(var(--tx), var(--ty)); }

/* Raison 03 : l'annuaire des membres et l'agenda des journées d'étude. Au
   survol, votre ligne passe d'invité à membre et votre avatar rejoint la
   prochaine journée ; le point de la prochaine date passe au vert. */
.annuaire { display: block; flex: none; }
.membre { position: relative; display: flex; align-items: center; gap: 10px; height: 42px; margin: 0 -8px; padding: 0 8px; border-top: 1px solid var(--filet); border-radius: 4px; transition: background-color .3s var(--c-bouton); }
.membre:hover { background: var(--bande); }
.avatar { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; font: 500 12px/1 var(--f-titre); }
.avatar--masque { background: repeating-linear-gradient(-45deg, #dde5f3 0 2px, #f3f6fb 2px 5px); box-shadow: inset 0 0 0 1px var(--filet); }
.avatar--vous { background: #fff; border: 1.5px dashed var(--lavande); color: var(--discret); transition: background-color .5s var(--c-carte) .15s, border-color .5s var(--c-carte) .15s, color .5s var(--c-carte) .15s; }
.avatar svg { width: 13px; height: 13px; fill: currentColor; }
.raison:is(:hover, :focus-visible) .avatar--vous { background: var(--vert); border-color: var(--vert); color: #fff; }
.membre__id { display: block; flex: 1; min-width: 0; }
.membre__id b { display: block; font: 500 13px/16px var(--f-titre); color: var(--encre); }
.membre__id > span { display: block; font: 400 11px/14px var(--f-texte); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.membre--masque .membre__id b { color: var(--soft); }
.tag { position: relative; flex: none; height: 20px; padding: 0 7px; border-radius: 4px; background: var(--nappe); font: 500 10.5px/20px var(--f-titre); color: var(--bleu); }
.tag--gris { background: var(--bande); color: var(--soft); box-shadow: inset 0 0 0 1px var(--filet); }
.agenda { display: block; margin-top: auto; }
.agenda > .ui__label { margin-bottom: 8px; }
.rdv { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 -8px; padding: 5px 8px; border-top: 1px solid var(--filet); border-radius: 4px; transition: background-color .3s var(--c-bouton); }
.rdv:hover { background: var(--bande); }
.rdv__date { position: relative; flex: none; display: grid; place-content: center; width: 34px; height: 34px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); text-align: center; font: 500 8.5px/10px var(--f-titre); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); transition: background-color .5s var(--c-carte), color .5s var(--c-carte), box-shadow .5s var(--c-carte); }
.rdv__date svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rdv.est-prochain .rdv__date::after { content: ""; position: absolute; right: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 2px #fff; animation: pouls 1.4s var(--c-ciel) infinite; transition: background-color .5s var(--c-carte); }
.raison:is(:hover, :focus-visible) .rdv.est-prochain .rdv__date { background: var(--bleu); color: rgba(255, 255, 255, .78); box-shadow: none; }
.raison:is(:hover, :focus-visible) .rdv.est-prochain .rdv__date::after { background: var(--vert); animation: none; }
.rdv__id { display: block; flex: 1; min-width: 0; }
.rdv__id b { display: block; font: 500 12.5px/16px var(--f-titre); color: var(--encre); text-wrap: balance; }
.rdv__id > span { display: block; font: 400 11px/14px var(--f-texte); color: var(--soft); }
.pile { position: relative; flex: none; display: flex; }
.pile > i { display: grid; place-items: center; width: 20px; height: 20px; margin-left: -4px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; font: 500 9px/1 var(--f-titre); font-style: normal; }
.pile > i:first-child { margin-left: 0; }
.pile > i.avatar--masque { background: repeating-linear-gradient(-45deg, #dde5f3 0 2px, #f3f6fb 2px 5px); }
.pile > i.pile__vous { overflow: hidden; width: 0; margin-left: 0; opacity: 0; transform: scale(.4); transition: width .5s var(--c-carte) .1s, margin-left .5s var(--c-carte) .1s, opacity .3s var(--c-carte) .1s, transform .5s var(--c-carte) .1s; }
.pile__vous svg { width: 10px; height: 10px; fill: #fff; }
.raison:is(:hover, :focus-visible) .pile > i.pile__vous { width: 20px; margin-left: -4px; opacity: 1; transform: none; }
.membre:hover .infobulle, .rdv:hover .infobulle,
.raison:is(:hover, :focus-visible) .membres:not(:has(.membre:hover, .rdv:hover)) .rdv.est-prochain .infobulle { opacity: 1; transform: translate(var(--tx), var(--ty)); }

/* Avant, avec : chaque ligne bascule au passage */
.deux > .decl { grid-column: 1 / 6; align-self: start; position: sticky; top: 108px; }
.deux > .decl + * { grid-column: 7 / 13; margin-top: 0; }
.bascule { width: 100%; border-collapse: collapse; }
.bascule thead th { position: relative; text-align: left; padding: 0 0 16px; font: 500 12px/16px var(--f-titre); letter-spacing: .1em; text-transform: uppercase; color: var(--sourdine); border-bottom: 1px solid var(--encre); }
.bascule thead th:last-child { color: var(--bleu); padding-left: 20px; }
.bascule thead th:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--vert); transform: scaleX(var(--bascule, 0)); transform-origin: left; transition: transform .6s var(--c-carte); }
/* Le profil, en tête de ligne : il portera le lien de son article */
.bascule tbody th { padding: 26px 32px 26px 0; border-bottom: 1px solid var(--filet); vertical-align: top; width: 28%; text-align: left; font: 500 17px/24px var(--f-titre); letter-spacing: -.01em; color: var(--encre); transition: background-color .4s; }
.bascule__lien { color: inherit; text-decoration: underline 1px; text-underline-offset: 4px; text-decoration-color: var(--lavande); transition: color .3s var(--c-bouton), text-decoration-color .3s var(--c-bouton); }
.bascule__lien:hover { color: var(--bleu); text-decoration-color: currentColor; }
.bascule td { position: relative; padding: 26px 32px 26px 0; border-bottom: 1px solid var(--filet); vertical-align: top; width: 36%; font: 400 18px/25.2px var(--f-texte); color: var(--soft); transition: background-color .4s; }
.bascule td:first-of-type span { background: linear-gradient(currentColor, currentColor) 0 58% / 0% 1px no-repeat; transition: background-size .7s var(--c-carte), color .7s var(--c-carte); }
.bascule tr:is(.est-bascule, :hover) td:first-of-type span { background-size: 100% 1px; color: var(--sourdine); }
.bascule td:last-child { padding: 26px 0 26px 20px; color: var(--sourdine); transition: color .6s var(--c-carte); }
.bascule td:last-child::after { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 2px; background: var(--vert); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--c-carte); }
.bascule tr:is(.est-bascule, :hover) td:last-child { color: var(--encre); }
.bascule tr:is(.est-bascule, :hover) td:last-child::after { transform: scaleY(1); }
.bascule tbody tr:hover :is(th, td) { background: var(--bande); }

/* Étapes : section sombre, chiffres en dégradé. La bande du haut accueille
   la cousine du verre du héros, peinte par le canevas de la section. */
.sombre { background: var(--nuit); color: #fff; }
.comment { position: relative; overflow: clip; }
.comment > .cadre { position: relative; z-index: 1; }
.fils { position: relative; height: 300px; margin-top: 24px; }
.etapes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; margin-top: -40px; }
.etapes__piste { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .12); }
.etapes__indic { position: absolute; top: -1px; left: calc(var(--actif, 0) * (25% + 4px)); width: calc(25% - 12px); height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--vert), var(--bleu-clair)); transition: left .4s var(--c-indic); }
.etape { padding: 32px 16px 0 0; outline: 0; cursor: default; }
/* Numéros 400 et dégradés qui partent clairs : sur la marine, un départ sombre les effaçait */
.etape i { display: inline-block; font: 400 48px/49.44px var(--f-titre); font-style: normal; letter-spacing: -.015em; color: #fff; background-image: linear-gradient(68deg, #c9dbff .78%, #5fe0a0 42%, #8fb7ff 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .62; transition: opacity .4s var(--c-indic); }
.etape:nth-child(4) i { background-image: linear-gradient(73.3deg, #5fe0a0 9.85%, #b3cbff 61.94%); }
.etape:nth-child(5) i { background-image: linear-gradient(74.71deg, #dbe6ff 0%, #8fb7ff 40%, #3fd98c 96%); }
.etape h3 { margin-top: 18px; font: 400 22px/24.2px var(--f-titre); letter-spacing: -.22px; color: var(--nuit-sourdine); transition: color .4s var(--c-indic); }
.etape p { margin-top: 10px; font: 400 16px/22.4px var(--f-texte); color: var(--nuit-sourdine); max-width: 26ch; transition: color .4s var(--c-indic); }
.etape.est-active i { opacity: 1; }
.etape.est-active h3 { color: #fff; }
.etape.est-active p { color: var(--nuit-texte); }
/* Fond de la section : un fond fixe, une lueur verte qui suit l'étape active
   (même courbe que le ciel), la trame en blanc. Le canevas du verre en peint
   la copie exacte par-dessus. */
.comment { isolation: isolate; }
.comment::before, .comment::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.comment::before { background: radial-gradient(62% 40% at 50% 47%, rgba(91, 141, 239, .36) 0, rgba(45, 92, 198, .22) 36%, rgba(11, 31, 77, 0) 72%), radial-gradient(90% 60% at 50% 118%, rgba(0, 51, 153, .55), rgba(0, 51, 153, 0) 70%); }
.comment::after { background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 1px, transparent 1.3px); background-size: 12px 12px; -webkit-mask-image: radial-gradient(46% 42% at 50% 46%, #000 0, rgba(0, 0, 0, .45) 50%, transparent 82%); mask-image: radial-gradient(46% 42% at 50% 46%, #000 0, rgba(0, 0, 0, .45) 50%, transparent 82%); }
.comment__halo { position: absolute; z-index: -1; top: 24%; width: 44%; height: 46%; left: calc(var(--halo-x, 27.6%) - 22%); background: radial-gradient(50% 50% at 50% 50%, rgba(0, 204, 102, .26), rgba(0, 204, 102, .08) 45%, rgba(0, 204, 102, 0) 72%); transition: left 1.2s var(--c-ciel); pointer-events: none; }

/* Les deux champs clairs (services → avant/avec, puis la FAQ) : une surface
   qui vit. Dégradé mesh bleu / vert, trois foyers radiaux par section à 12-18 %
   au cœur, chaque foyer dérive sur 25 s ; les foyers d'une section débordent
   sur la voisine, le champ les coupe à ses bords sombres. Un grain feTurbulence
   à 4,5 % couvre le tout. Les foyers tombent dans les vides de la composition,
   jamais sous le petit texte en sourdine. */
.champ { position: relative; isolation: isolate; overflow: clip; }
.champ > .section { position: relative; }
.champ::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .045; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .12 0 0 0 0 .3 1.8 0 0 0 -.4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px; }
.foyer { position: absolute; z-index: -1; left: var(--x); top: var(--y); width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); pointer-events: none; background: radial-gradient(closest-side, rgb(var(--c) / var(--a)) 0, rgb(var(--c) / calc(var(--a) * .62)) 38%, rgb(var(--c) / calc(var(--a) * .2)) 72%, rgb(var(--c) / 0) 100%); animation: derive 25s ease-in-out var(--dl, 0s) infinite alternate; }
.foyer--bleu { --c: 0 51 153; }
.foyer--vert { --c: 0 204 102; }
@keyframes derive { from { transform: translate3d(calc(var(--dx) * -1), calc(var(--dy) * -1), 0); } to { transform: translate3d(var(--dx), var(--dy), 0); } }
/* #pourquoi passe sur le gris de drewl. Le fond est un calque à -2 dans le
   champ : les foyers (-1) et le grain restent au-dessus, les cartes blanches
   se détachent sur le gris. */
#pourquoi::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--gris); pointer-events: none; }
#pourquoi .cadre { border-color: var(--gris-filet); }

/* La fenêtre de l'extranet (preuve de moyens demandée au brief), reprise en
   cinq aperçus autour de l'appel final : une vue par fenêtre. */
.extranet { position: relative; display: block; overflow: hidden; }
.extranet__corps { display: grid; grid-template-columns: 148px minmax(0, 1fr); }
.extranet__menu { position: relative; display: block; padding: 12px 8px; border-right: 1px solid var(--filet); background: #fbfcfe; }
.extranet__menu i { position: relative; z-index: 1; display: block; padding: 8px 10px; font: 500 12px/16px var(--f-titre); font-style: normal; color: var(--soft); cursor: pointer; transition: color .3s var(--c-bouton); }
.extranet__menu i:hover { color: var(--encre); }
.extranet__menu i.est-actif { color: var(--bleu); }
.extranet__curseur { position: absolute; left: 8px; right: 8px; top: 12px; height: 32px; border-radius: 4px; background: var(--nappe); transform: translateY(calc(var(--m, 0) * 32px)); transition: transform .4s var(--c-indic); }
.extranet__main { display: block; min-width: 0; padding: 14px 18px 16px; }
.extranet__tete { display: flex; justify-content: space-between; align-items: center; height: 22px; }
.extranet__tete b { font: 500 14px/18px var(--f-titre); color: var(--encre); }
.extranet__meta { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--bande); box-shadow: inset 0 0 0 1px var(--filet); font: 500 11px/1 var(--f-titre); color: var(--soft); white-space: nowrap; }
.extranet__graphe { position: relative; display: block; margin-top: 12px; }
.extranet__serie { display: block; font: 400 11px/14px var(--f-texte); color: var(--discret); }
.extranet__courbe { display: block; width: 100%; height: 96px; margin-top: 6px; overflow: visible; clip-path: inset(-6px 100% -6px -6px); transition: clip-path 1.2s var(--c-carte) .15s; }
.extranet.est-charge .extranet__courbe { clip-path: inset(-6px -6px -6px -6px); }
.extranet__courbe path { transition: d .7s var(--c-carte); }
.extranet__courbe .trait { fill: none; stroke: var(--bleu); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.extranet__points { position: absolute; left: 0; right: 0; top: 20px; height: 96px; }
.pt { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; cursor: default; opacity: 0; transition: left .7s var(--c-carte), top .7s var(--c-carte), opacity .4s var(--c-carte) calc(.5s + var(--k, 0) * 90ms); }
.extranet.est-charge .pt { opacity: 1; }
.pt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--bleu); transition: transform .3s var(--c-bouton), box-shadow .3s var(--c-bouton); }
.pt:hover::before { transform: scale(1.3); box-shadow: 0 0 0 2px var(--bleu), 0 0 0 7px rgba(0, 51, 153, .12); }
.bulle { --bx: -50%; position: absolute; bottom: calc(100% - 2px); left: 50%; padding: 5px 8px; border-radius: 4px; background: var(--encre); color: #fff; font: 500 11px/14px var(--f-titre); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transform: translate(var(--bx), 4px); pointer-events: none; transition: opacity .2s var(--c-bouton), transform .3s var(--c-bouton); }
.pt:first-child .bulle { --bx: 0%; left: 0; }
.pt:last-child .bulle { --bx: 0%; left: auto; right: 0; }
.pt:hover .bulle, .extranet__points:not(:hover) .pt:last-child .bulle { opacity: 1; transform: translate(var(--bx), 0); }
.extranet__mois { position: relative; display: block; height: 14px; margin-top: 8px; font: 400 10.5px/14px var(--f-texte); color: var(--discret); }
.extranet__mois span { position: absolute; top: 0; transform: translateX(-50%); }
.extranet__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.kpi { display: block; min-width: 0; padding: 9px 10px 10px; border-radius: 6px; background: var(--bande); box-shadow: inset 0 0 0 1px var(--filet); cursor: default; transition: transform .4s var(--c-carte), box-shadow .4s var(--c-carte), background-color .4s var(--c-carte); }
.kpi:hover { transform: translateY(-3px); background: #fff; box-shadow: inset 0 0 0 1px var(--lavande), var(--ombre-sm); }
.kpi em { display: block; font: 400 10.5px/14px var(--f-texte); font-style: normal; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi b { display: block; margin-top: 3px; font: 500 17px/22px var(--f-titre); letter-spacing: -.17px; color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi small { display: flex; align-items: center; gap: 5px; margin-top: 2px; font: 400 10.5px/14px var(--f-texte); color: var(--soft); white-space: nowrap; }
.kpi small.ok { color: var(--vert-texte); }
.kpi small.att { color: var(--bleu); }
.kpi small:is(.ok, .att)::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* FAQ : ouverture animée, bouton carré lavande comme les récits clients de Stripe */
.faq details { border-top: 1px solid var(--filet); }
.faq details:last-child { border-bottom: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 0; font: 600 17px/24px var(--f-texte); color: var(--encre); transition: color .3s var(--c-bouton); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--bleu); }
.faq summary::after { content: ""; flex: none; width: 40px; height: 40px; border-radius: 4px; background: var(--nappe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23003399' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: background-color .3s var(--c-bouton); }
.faq summary:hover::after { background-color: #dbe4f7; }
.faq details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' stroke='%23003399' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq details p { padding: 0 64px 22px 0; font: 400 16px/24px var(--f-texte); color: var(--soft); max-width: 60ch; }

/* Appel final, relevé sur drewl.com : 148 px de marge verticale, titre centré,
   sous-titre sur 390 px, deux cartes de 360 × 458 à 16 px d'écart. Autour,
   cinq aperçus de l'extranet qui flottent derrière les cartes. */
.cta { position: relative; overflow: clip; isolation: isolate; background: var(--gris); border-top: 1px solid var(--guide); }
.cta .cadre { border-color: var(--gris-filet); }
/* Les aperçus passent devant les filets du cadre, derrière le titre et les cartes */
.cta__in { position: relative; padding-block: 148px; }
.cta__tete, .cta__cartes { position: relative; z-index: 2; }
/* Leurs boîtes courent sur toute la colonne : seuls le texte et les cartes
   prennent le pointeur, les aperçus de part et d'autre restent survolables */
.cta__tete, .cta__cartes { pointer-events: none; }
.cta__titre, .cta__carte { pointer-events: auto; }
.cta__titre { width: fit-content; margin-inline: auto; }
.cta__tete { text-align: center; }
.cta__titre { font: 400 44px/56px var(--f-titre); letter-spacing: -.02em; color: var(--encre); text-wrap: balance; }
.cta__tuile { display: inline-grid; place-items: center; width: 48px; height: 48px; margin: 0 .08em; vertical-align: -9px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 40, 110, .08); animation: flotte-tuile 5s ease-in-out 1.2s infinite; }
/* 1,2 s : le flip du titre (1,15 s) recrée la tuile au départ puis remet l'originale
   à la fin, et chaque insertion relance l'animation. Immobile jusque-là, elle ne saute pas. */
.cta__tuile svg { width: 26px; height: 26px; }
@keyframes flotte-tuile { 50% { transform: translateY(-5px) rotate(-4deg); } }
.cta__cartes { display: grid; grid-template-columns: repeat(2, 360px); justify-content: center; gap: 16px; margin-top: 56px; }
.cta__carte { position: relative; display: flex; flex-direction: column; min-height: 458px; padding: 32px; border-radius: 12px; }
.cta__carte--rdv { overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0, 40, 110, .08); }
.cta__carte h3 { font: 400 26px/31px var(--f-titre); letter-spacing: -.26px; color: var(--encre); text-wrap: balance; }
.cta__carte h3 em { font-style: normal; color: var(--bleu); }
.cta__phrase { margin-top: 12px; font: 400 16px/24px var(--f-texte); color: var(--soft); }
.cta__liste { margin-top: 22px; }
.cta__liste li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--filet); font: 400 15px/21px var(--f-texte); color: var(--encre); }
.cta__liste li:last-child { border-bottom: 1px solid var(--filet); }
.cta__carte--rdv .btn { z-index: 1; margin-top: auto; justify-content: center; }
/* Le dégradé pixelisé de drewl : un pixel de canevas pour 6 px CSS, peint à
   la taille de sa bande, agrandi sans lissage, sous une trame blanche calée
   sur la même grille de 6 px. Même recette dans la carte de rendez-vous et
   au pied des dialogues. */
.cta__halo, .voile__halo { position: absolute; left: 0; right: 0; bottom: 0; height: 168px; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 62%); mask-image: linear-gradient(transparent, #000 62%); }
:is(.cta__halo, .voile__halo) canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
:is(.cta__halo, .voile__halo)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .72) 1px, transparent 1px) 0 0 / 6px 6px, linear-gradient(rgba(255, 255, 255, .72) 1px, transparent 1px) 0 0 / 6px 6px; }
.cta__carte--form { border: 1px solid var(--filet); }
.saisie { display: block; }
.saisie + .saisie { margin-top: 14px; }
/* Prénom et Nom côte à côte : le formulaire garde sa hauteur */
.saisie--duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.saisie--duo > .saisie + .saisie { margin-top: 0; }
.saisie > span { display: block; margin-bottom: 6px; font: 500 13px/18px var(--f-titre); color: var(--encre); }
.saisie :is(input, textarea) { display: block; width: 100%; height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); font: 400 15px/21px var(--f-texte); color: var(--encre); transition: box-shadow .3s var(--c-bouton); }
.saisie textarea { height: 88px; padding: 11px 14px; resize: none; }
.saisie :is(input, textarea):hover { box-shadow: inset 0 0 0 1px var(--lavande); }
.saisie :is(input, textarea):focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--bleu), 0 0 0 3px rgba(0, 51, 153, .14); }
.cta__carte--form .btn { margin-top: 20px; justify-content: center; }
.cta__carte--form.est-envoye > :not(.cta__merci) { display: none; }
.cta__merci:empty { display: none; }
.cta__merci { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-block: auto; font: 400 20px/28px var(--f-titre); letter-spacing: -.2px; color: var(--encre); }
.cta__merci .coche { width: 36px; height: 36px; border-radius: 10px; background: var(--vert); box-shadow: none; }
.cta__merci .coche svg { width: 18px; height: 18px; stroke-dashoffset: 0; }
/* Envoi en cours : le bouton reste en place, inerte. Échec : l'adresse de
   contact sous le bouton, le message saisi reste en place (page.js). */
.cta__carte--form .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.cta__carte--form.est-echec .cta__merci { display: block; margin-block: 14px 0; font: 400 14px/20px var(--f-texte); letter-spacing: 0; color: var(--soft); }
.cta__carte--form.est-echec .cta__merci a { color: var(--bleu); }
.cta__liste .coche, .fen__ligne.est-fait .coche { background: var(--vert); box-shadow: inset 0 0 0 1px var(--vert); }
.cta__liste .coche svg, .fen__ligne.est-fait .coche svg { stroke-dashoffset: 0; }

/* Les cinq aperçus, esprit drewl. Round 7 : cinq tailles, plus petites,
   poussées contre les bords de l'écran qui les rognent ; le script garde
   140 à 220 px d'air avec les cartes et le titre, et allonge la section s'il
   le faut. Cadre blanc de 4 px et filet extérieur, rayon visible de 3 px. Au
   survol ou au focus, la fenêtre joue sa micro-animation tout de suite ; ses
   onglets changent la vue, ses points donnent leur valeur, ses tuiles se
   soulèvent (les survols de l'extranet du round 4). Flottement 0 → -10 px
   → 0, 6 à 10 s. */
.fenetres { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* La boîte de .fen garde la taille réelle de l'aperçu, bien plus grande que
   son image réduite : seule l'image reçoit le pointeur */
.fen { position: absolute; left: 0; top: 0; width: 520px; pointer-events: none; outline: 0; animation: flotte var(--d) ease-in-out var(--dl) infinite; }
.fen .extranet { pointer-events: auto; }
@keyframes flotte { 50% { transform: translateY(-10px); } }
.fen .extranet { transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rz)) scale(var(--s)); transform-origin: 0 0; box-shadow: 0 0 0 calc(4px / var(--s)) #fff, 0 0 0 calc(5px / var(--s)) rgba(0, 40, 110, .08); transition: box-shadow .3s var(--c-bouton); }
.fen .extranet { border-radius: calc(3px / var(--s)); }
.fen--d .extranet { transform-origin: 100% 0; }
.fen:focus-visible .extranet { box-shadow: 0 0 0 calc(4px / var(--s)) #fff, 0 0 0 calc(7px / var(--s)) rgba(0, 51, 153, .55); }
.fen--1 { --s: .784; --rx: 6deg; --ry: 10deg; --rz: -4deg; --d: 6s; --dl: 0s; }
.fen--2 { --s: .868; --rx: -4deg; --ry: 12deg; --rz: 5deg; --d: 7s; --dl: .5s; }
.fen--3 { --s: .7; --rx: 8deg; --ry: -6deg; --rz: -6deg; --d: 8s; --dl: 1s; }
.fen--4 { --s: .84; --rx: 5deg; --ry: -12deg; --rz: 7deg; --d: 9s; --dl: 1.5s; }
.fen--5 { --s: .756; --rx: -6deg; --ry: -9deg; --rz: -3deg; --d: 10s; --dl: 2s; }
/* Changer de vue : les textes s'effacent 0,18 s, la courbe et ses points glissent */
.fen [hidden] { display: none; }
.fen [data-x] { transition: opacity .18s linear; }
.fen .extranet.est-bascule [data-x] { opacity: 0; }
/* Le compteur d'un aperçu fait un tour complet et retombe sur sa valeur :
   il ne s'arrête jamais sur un autre chiffre que le sien. */
.fen .reel::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; }
.fen .est-tour .reel::before { transform: translateY(calc((var(--d) + 10) * -1lh)); }
.fen__liste { display: block; margin-top: 14px; }
.fen__ligne { display: flex; align-items: center; gap: 10px; height: 40px; border-top: 1px solid var(--filet); font: 400 12.5px/16px var(--f-texte); color: var(--encre); }
.fen__ligne:last-child { border-bottom: 1px solid var(--filet); }
.fen__ligne > span:not(.coche):not(.statut):not(.doc) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fen__ligne small { font: 500 11px/1 var(--f-titre); color: var(--vert-texte); opacity: 0; transition: opacity .4s var(--c-carte) .3s; }
.fen__ligne.est-fait small { opacity: 1; }
.fen .statut--cours.est-fini { color: var(--vert-texte); background: rgba(0, 204, 102, .12); }
.fen .statut--cours.est-fini::before { animation: none; }
.fen__msgs { display: block; height: 126px; margin-top: 14px; overflow: hidden; border-bottom: 1px solid var(--filet); }
.fen__msgs > span { display: block; transform: translateY(-42px); }
.fen__msgs.est-arrive > span { transform: none; transition: transform .8s var(--c-carte); }
.fen__msg { display: flex; align-items: center; gap: 10px; height: 42px; border-top: 1px solid var(--filet); }
.fen__msg .avatar { width: 26px; height: 26px; }
.fen__msg > span:nth-child(2) { flex: 1; min-width: 0; }
.fen__msg b { display: block; font: 500 12.5px/16px var(--f-titre); color: var(--encre); }
.fen__msg small { display: block; font: 400 11px/14px var(--f-texte); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fen__msg i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); }

/* Pied, relevé sur drewl.com : gris continu avec l'appel final, colonnes de
   liens en 16 px, deux règles graduées de part et d'autre du contenu, puis
   le mot-logo géant qui défile. Le flou fixe du bas d'écran floute le bas
   des lettres. */
.pied { position: relative; overflow: clip; background: var(--gris); }
.pied__in { position: relative; border-color: var(--gris-filet); }
.pied__regle { position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; color: rgba(10, 26, 61, .24); -webkit-mask-image: linear-gradient(#000 20%, transparent 96%); mask-image: linear-gradient(#000 20%, transparent 96%); }
.pied__regle--g { left: -1px; background: linear-gradient(rgba(10, 26, 61, .1) 0 1px, transparent 1px) 0 0 / 5px 16px repeat-y, linear-gradient(rgba(10, 26, 61, .2) 0 1px, transparent 1px) 0 0 / 10px 80px repeat-y; }
.pied__regle--d { right: -1px; background: linear-gradient(rgba(10, 26, 61, .1) 0 1px, transparent 1px) 100% 0 / 5px 16px repeat-y, linear-gradient(rgba(10, 26, 61, .2) 0 1px, transparent 1px) 100% 0 / 10px 80px repeat-y; }
.pied__regle b { position: absolute; font: 400 9px/1 var(--f-titre); letter-spacing: .06em; writing-mode: vertical-rl; font-variant-numeric: tabular-nums; }
.pied__regle--g b { left: 15px; }
.pied__regle--d b { right: 15px; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); column-gap: 32px; padding: 96px 56px 72px; }
.pied__marque p { margin-top: 18px; max-width: 32ch; font: 400 16px/24px var(--f-texte); color: var(--soft); }
.pied__marque > a:last-child { display: inline-block; margin-top: 14px; }
.pied__titre { font: 500 14px/20px var(--f-titre); color: var(--encre); }
.pied__col ul { margin-top: 16px; }
.pied__col li + li { margin-top: 10px; }
.pied a { font: 400 16px/22px var(--f-texte); color: var(--soft); text-decoration: none; transition: color .3s var(--c-bouton); }
.pied a:hover { color: var(--encre); }
.pied .logo { color: var(--encre); }
.pied__bas { padding: 22px 56px 26px; border-top: 1px solid var(--gris-filet); font: 400 14px/20px var(--f-texte); color: var(--soft); }
.defile { position: relative; display: flex; height: 266px; overflow: hidden; }
.defile::before, .defile::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 200px; pointer-events: none; }
.defile::before { left: 0; background: linear-gradient(90deg, var(--gris), rgba(247, 247, 247, 0)); }
.defile::after { right: 0; background: linear-gradient(270deg, var(--gris), rgba(247, 247, 247, 0)); }
.defile__piste { flex: none; display: flex; align-items: center; }
.defile__piste b { padding-inline: 44px; font: 500 240px/266px var(--f-titre); letter-spacing: -.04em; color: #e3e6ec; white-space: nowrap; }
.defile__piste svg { flex: none; width: 150px; height: 150px; --picto-bleu: #dde2ec; --picto-vert: #d9e9e1; }

/* Hors de l'écran, une section fige ses animations : pendant le défilement,
   seul ce qui se voit coûte une image. */
.hors-champ, .hors-champ *, .hors-champ *::before, .hors-champ *::after { animation-play-state: paused !important; }

/* Flou fixe du bas d'écran, relevé exact sur drewl.com : sept calques de
   backdrop-filter, de 1 à 20 px, chacun masqué sur sa tranche. */
.flou { position: fixed; left: 0; bottom: 0; z-index: 20; width: 100%; height: 166px; overflow: hidden; pointer-events: none; }
.flou i { position: absolute; inset: 0; }
.flou i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%); mask-image: linear-gradient(180deg, transparent 0%, #000 20%); }
.flou i:nth-child(2) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 30%); mask-image: linear-gradient(180deg, transparent 10%, #000 30%); }
.flou i:nth-child(3) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 40%); mask-image: linear-gradient(180deg, transparent 20%, #000 40%); }
.flou i:nth-child(4) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 50%); mask-image: linear-gradient(180deg, transparent 30%, #000 50%); }
.flou i:nth-child(5) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 60%); mask-image: linear-gradient(180deg, transparent 40%, #000 60%); }
.flou i:nth-child(6) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 80%); mask-image: linear-gradient(180deg, transparent 50%, #000 80%); }
.flou i:nth-child(7) { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); -webkit-mask-image: linear-gradient(180deg, transparent 60%, #000 100%); mask-image: linear-gradient(180deg, transparent 60%, #000 100%); }

/* Le grand livre, liste à filets des cartes et dialogues */
.livre { border-top: 1px solid var(--encre); }
.livre li { position: relative; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--filet); font: 400 15px/21px var(--f-texte); color: var(--soft); }
.livre li::before { content: ""; position: absolute; left: 0; top: 20px; width: 10px; height: 2px; background: var(--vert); }
.livre--bleu li::before { background: var(--bleu); }

/* Dialogue : le panneau Stripe, 16 px de rayon, 72 px de marge */
.voile { inset: 0; margin: auto; width: min(100% - 32px, 1184px); max-height: min(90svh, 960px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--encre); overflow: auto; overscroll-behavior: contain; box-shadow: var(--ombre-xl); opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .3s var(--c-lueur), transform .3s var(--c-lueur), overlay .3s allow-discrete, display .3s allow-discrete; }
.voile:popover-open { opacity: 1; transform: none; }
@starting-style { .voile:popover-open { opacity: 0; transform: translateY(16px) scale(.985); } }
.voile::backdrop { background: rgba(246, 248, 252, 0); transition: background .3s, overlay .3s allow-discrete, display .3s allow-discrete; }
.voile:popover-open::backdrop { background: rgba(246, 248, 252, .82); }
@starting-style { .voile:popover-open::backdrop { background: rgba(246, 248, 252, 0); } }
/* Le pied du dialogue reprend le halo pixelisé de la carte de rendez-vous,
   dans une marge basse à lui : il ne passe jamais sous un texte ni un bouton. */
.voile__in { position: relative; padding: 72px 72px 176px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 96px; }
.voile__halo { height: 150px; }
/* Au-dessus de .voile__in, positionné après lui : sans z-index, il recouvrait la croix */
.voile__fermer { position: absolute; z-index: 1; top: 24px; right: 24px; width: 40px; height: 40px; border-radius: 4px; background: var(--nappe); color: var(--bleu); display: grid; place-items: center; transition: background-color .3s var(--c-bouton); }
.voile__fermer:hover { background: #dbe4f7; }
.voile__fermer svg { width: 14px; height: 14px; }
.voile h3 { font: 400 40px/44px var(--f-titre); letter-spacing: -.015em; max-width: 20ch; }
.voile__probleme { margin-top: 24px; font: 400 18px/25.2px var(--f-texte); color: var(--soft); max-width: 54ch; }
.voile .actions { margin-top: 48px; }
.voile__droite { padding-top: 10px; }
.legende { font: 500 12px/1.4 var(--f-titre); letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); margin-bottom: 16px; }
.voile__droite .livre + .legende { margin-top: 48px; }

/* Menu mobile, même mécanique */
.menu { inset: auto 0 0 0; width: 100%; margin: 0; border: 0; border-top: 1px solid var(--filet); border-radius: 16px 16px 0 0; padding: 32px 16px calc(32px + env(safe-area-inset-bottom)); background: #fff; color: var(--encre); opacity: 0; transform: translateY(24px); transition: opacity .3s var(--c-lueur), transform .3s var(--c-lueur), overlay .3s allow-discrete, display .3s allow-discrete; }
.menu:popover-open { opacity: 1; transform: none; }
@starting-style { .menu:popover-open { opacity: 0; transform: translateY(24px); } }
.menu::backdrop { background: rgba(10, 26, 61, 0); transition: background .3s, overlay .3s allow-discrete, display .3s allow-discrete; }
.menu:popover-open::backdrop { background: rgba(10, 26, 61, .4); }
@starting-style { .menu:popover-open::backdrop { background: rgba(10, 26, 61, 0); } }
.menu li a { display: block; padding: 16px 0; border-bottom: 1px solid var(--filet); font: 400 1.5rem/1.2 var(--f-titre); text-decoration: none; }
.menu .actions { margin-top: 32px; }

.barre { display: none; }

/* Le mobile se traite dans une passe séparée : ces règles gardent l'empilement de la V2 */
@media (max-width: 1200px) {
  .bento > .carte { grid-column: span 12; aspect-ratio: auto; height: 676px; }
  .bento > .carte--12 { height: 450px; }
  .deux > .decl, .deux > .decl + * { grid-column: 1 / -1; position: static; }
  .deux > .decl + * { margin-top: 48px; }
  .voile__in { grid-template-columns: 1fr; gap: 48px; }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .etapes__indic { display: none; }
}
@media (max-width: 1200px) {
  .fenetres { display: none; }
}
@media (max-width: 760px) {
  .nav__liens, .nav .btn { display: none; }
  .nav { height: 64px; }
  .nav__menu { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--filet); font: 500 .9375rem/1 var(--f-titre); }
  .hero { margin-top: -64px; padding-top: 64px; }
  /* Premier écran entier, pastilles comprises, à 375x812 et 390x844 : les
     écarts du héros se resserrent, le H1 garde sa taille (21/10/2026) */
  .hero__in { padding-block: 24px 28px; }
  .hero__in > .legende { margin-bottom: 14px; }
  .hero__titre { line-height: 1.15; }
  .hero__chapo { margin-top: 18px; font-size: 16px; line-height: 24px; }
  .hero__actions { margin-top: 28px; }
  .pastilles { margin-top: 24px; }
  .pastilles__rang { gap: 8px; }
  .pastilles__trame { margin-block: 4px; }
  .reseau { display: none; }
  .decl { font-size: 26px; line-height: 29.12px; letter-spacing: -.52px; }
  .section__in { padding-block: 72px; }
  .ciel__in { padding-block: 88px; }
  .chiffre { padding: 28px 2px 26px; }
  .chiffre strong { font-size: 26px; line-height: 26px; }
  .chiffre strong small { font-size: 16px; }
  .chiffre__legende { font-size: 13px; line-height: 18px; }
  .etapes { grid-template-columns: 1fr; }
  .bascule thead th { display: none; }
  .bascule tbody th { display: block; width: auto; padding: 24px 0 0; border: 0; }
  .bascule td { display: block; width: auto; padding: 16px 0; border: 0; }
  .bascule td:first-of-type { padding-top: 12px; }
  .bascule td:last-child { padding: 0 0 24px; border-bottom: 1px solid var(--filet); }
  .bascule td:last-child::after { display: none; }
  .bascule td:last-child::before { content: "Avec Nexinance"; display: block; font: 500 .75rem/1.4 var(--f-titre); letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); margin-bottom: 6px; }
  .cta__in { padding-block: 96px; }
  .cta__titre { font-size: 30px; line-height: 44px; }
  .cta__tuile { width: 40px; height: 40px; vertical-align: -10px; }
  .cta__cartes { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .cta__carte { min-height: 0; padding: 28px 24px; }
  .cta__carte--rdv { min-height: 440px; }
  .pied__regle { display: none; }
  .pied__grille { grid-template-columns: 1fr; row-gap: 32px; padding: 64px 8px 48px; }
  .pied__bas { padding-inline: 8px; }
  .defile { height: 150px; }
  .defile::before, .defile::after { width: 72px; }
  .defile__piste b { padding-inline: 24px; font-size: 132px; line-height: 150px; }
  .defile__piste svg { width: 84px; height: 84px; }
  /* Le flou se pose au-dessus de la barre collante, jamais dessus */
  .flou { height: 96px; bottom: calc(73px + env(safe-area-inset-bottom)); }
  .flou i:nth-child(2n) { display: none; }
  .flou i:nth-child(1) { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%); mask-image: linear-gradient(180deg, transparent 0%, #000 25%); }
  .flou i:nth-child(3) { -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 50%); mask-image: linear-gradient(180deg, transparent 20%, #000 50%); }
  .flou i:nth-child(5) { -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 75%); mask-image: linear-gradient(180deg, transparent 45%, #000 75%); }
  .flou i:nth-child(7) { -webkit-mask-image: linear-gradient(180deg, transparent 70%, #000 100%); mask-image: linear-gradient(180deg, transparent 70%, #000 100%); }
  .voile__in { padding: 56px 24px 136px; }
  .voile__halo { height: 114px; }
  .voile__fermer { top: 12px; right: 12px; }
  body { padding-bottom: 80px; }
  .barre { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-top: 1px solid var(--filet); }
  .barre .btn { width: 100%; justify-content: center; }
  @supports (animation-timeline: scroll()) {
    .barre { animation: barre-entree linear both; animation-timeline: scroll(root); animation-range: 50vh 80vh; }
    @keyframes barre-entree { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
    .flou { animation: flou-barre linear both; animation-timeline: scroll(root); animation-range: 50vh 80vh; }
    @keyframes flou-barre { from { transform: translateY(calc(73px + env(safe-area-inset-bottom))); } to { transform: none; } }
  }
}
/* Bouton de la carte de rendez-vous : sous 420 px, le libellé ne tient plus
   sur une ligne dans la carte (285 px de contenu pour 238 à 308 px de
   bouton). Le libellé lettre à lettre de la bascule, qui ne sait pas passer
   à la ligne, cède la place au libellé entier (.sr), qui se replie entre
   deux mots ; le survol n'a pas d'objet au doigt (21/10/2026). */
@media (max-width: 420px) {
  .cta__carte--rdv .btn { height: auto; min-height: 48px; padding: 12px 20px; white-space: normal; text-align: center; }
  .cta__carte--rdv .btn .sr { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; line-height: 22px; }
  .cta__carte--rdv .btn .anim-libelle { display: none; }
  .cta__carte--rdv .cta__liste { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* Figés proprement : l'anneau garde sa trace, sans comète */
  .anneau__trace { opacity: .5; }
  .anneau__comete { display: none; }
}
/* Pages Services (site Astro, 29/09/2026). animate.css et nexinance.css
   sont les feuilles de la maquette validée, à l'identique ; ici seulement
   ce que les pages intérieures ajoutent, sur les mêmes jetons. */

/* Lien secondaire : texte bleu, la flèche des boutons au survol */
.lien { display: inline-flex; align-items: center; font: 500 16px/16px var(--f-titre); color: var(--bleu); text-decoration: none; transition: color .3s var(--c-bouton); }
.lien:hover { color: var(--bleu-texte-survol); }
.voile__detail { margin-top: 28px; }

/* Le champ clair du haut et son héros passent sous la nav, comme le héros
   de l'accueil : le canevas du verre commence au bord de l'écran */
.champ--haut { margin-top: -76px; }
.hero-page { padding-top: 76px; }

/* Héros de page : plus court que l'accueil. La trame de points est la règle
   .hero::before de l'accueil, partagée dans nexinance.css. */
.hero-page__in { display: flex; flex-direction: column; align-items: center; padding-block: 104px 88px; text-align: center; }
.hero-page .legende { margin-bottom: 20px; }
.hero-page__titre { max-width: 960px; font: 400 clamp(34px, 2.4vw + 20px, 56px)/1.12 var(--f-titre); letter-spacing: -.03em; color: var(--encre); text-wrap: balance; }
.hero-page__chapo { max-width: 600px; margin-top: 24px; font: 400 17px/26px var(--f-texte); color: var(--soft); text-wrap: pretty; }
/* L'illustration au trait d'un domaine sous l'appel (pages domaine) : la
   carte de l'accueil à sa taille, sans son titre. Le titre de la carte
   occupait le haut du dessin : le cadre en est rogné, le dessin remonte
   d'autant (le schéma des outils commence en haut, rien à rogner). */
.hero-page__illu { display: flex; justify-content: center; width: 100%; margin-top: 64px; }
.hero-page__carte { --rogne: 112px; width: 816px; max-width: 100%; aspect-ratio: 816 / 564; }
.hero-page__carte.carte--4 { width: 400px; aspect-ratio: 400 / 564; }
.hero-page__carte.carte--12 { --rogne: 0px; width: 1232px; aspect-ratio: 1232 / 450; }
.hero-page__carte .carte__zone { top: calc(var(--gy) - var(--rogne)); }

/* Le grand livre des fenêtres, posé dans la page en deux colonnes. Le
   balisage reste à plat (légende, liste, légende, liste) : la grille range
   chaque paire dans sa colonne. */
.double { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 32px; align-items: start; }

/* Carte texte, sur le modèle des cartes .raison de #pourquoi : liseré et
   ouverture de la carte illustrée, brume qui monte au défilement, trame en
   bas, texte dans un panneau .ui.module remis dans le flux. La brume est
   dessinée pour 676 px de haut : remontée, sa partie colorée tombe dans une
   carte de 300. Le panneau s'élève au survol (règle .raison). */
.carte--texte { display: flex; flex-direction: column; min-height: 300px; padding: 16px 16px 64px; text-decoration: none; --gx: 3.550295857988166px; --gy: 6px; --s: 760px; }
.carte--texte .brume { top: -120px; }
.carte--texte .trame { -webkit-mask-image: radial-gradient(100% 60% at 50% 100%, #000 30%, transparent 80%); mask-image: radial-gradient(100% 60% at 50% 100%, #000 30%, transparent 80%); }
.carte__panneau { position: relative; left: auto; top: auto; width: auto; height: auto; flex: 1; }
.carte--texte .carte__tete { position: relative; left: auto; top: auto; right: auto; }
.carte--texte:is(:hover, :focus-visible) .carte__tete { transform: none; }
.carte__numero { display: block; margin-bottom: 20px; font: 500 12px/1.4 var(--f-titre); letter-spacing: .1em; color: var(--bleu); }
.carte--texte .carte__ligne { text-wrap: pretty; }
.carte__lien { align-self: flex-start; margin-top: auto; padding-top: 32px; }
.carte:is(:hover, :focus-visible) .lien .fleche__tige { opacity: 1; }
.carte:is(:hover, :focus-visible) .lien .fleche__pointe { transform: translateX(3px); }
/* En dessous de 1200 px, les cartes s'empilent comme celles de l'accueil */
@media (min-width: 1201px) {
  .bento--3 > .carte--texte { grid-column: span 4; }
  .bento--2 > .carte--texte { grid-column: span 6; }
}

/* Trois étapes : même grille et même indicateur, en tiers */
.etapes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etapes--3 .etapes__indic { left: calc(var(--actif, 0) * ((100% - 32px) / 3 + 16px)); width: calc((100% - 32px) / 3); }
/* 26ch est calé sur quatre colonnes : en tiers, il laissait un mot seul en dernière ligne */
.etapes--3 .etape p { max-width: 36ch; text-wrap: pretty; }

/* Cinq ou six étapes (parcours des pages domaine) : une colonne par étape
   au-dessus de 1200 px, même indicateur ; en dessous, la grille commune */
@media (min-width: 1201px) {
  .etapes--n { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .etapes--n .etapes__indic { left: calc(var(--actif, 0) * ((100% - (var(--n) - 1) * 16px) / var(--n) + 16px)); width: calc((100% - (var(--n) - 1) * 16px) / var(--n)); }
}
.etapes--n .etape p { text-wrap: pretty; }
/* Le livrable de l'étape : sous un filet, libellé en petites capitales vert
   d'eau, texte qui s'éclaire avec l'étape active */
.etape .etape__livrable { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font: 400 14px/20px var(--f-texte); }
.etape__livrable span { display: block; margin-bottom: 4px; font: 500 11px/1.4 var(--f-titre); letter-spacing: .1em; text-transform: uppercase; color: #5fe0a0; opacity: .62; transition: opacity .4s var(--c-indic); }
.etape.est-active .etape__livrable span { opacity: 1; }

/* Pastille « Texte provisoire » à côté du titre d'un bloc encore à valider
   par Nexinance, sur le modèle du numéro des cartes compactes */
.titre-bloc { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 10px; }
.provisoire { flex: none; padding: 4px 9px; border-radius: 5px; background: rgba(0, 51, 153, .08); color: var(--bleu); font: 500 12px/1.4 var(--f-titre); letter-spacing: .02em; white-space: nowrap; }
.sombre .provisoire { background: rgba(255, 255, 255, .1); color: var(--nuit-texte); }

/* Gains : trois colonnes sur filet, l'icône au trait de l'accueil devant le
   titre, l'accent vert et bleu du cas type en tête de filet */
.gains { list-style: none; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; row-gap: 40px; }
.gain { position: relative; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: center; align-content: start; padding-top: 28px; border-top: 1px solid var(--filet); }
.gain::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 2px; background: linear-gradient(90deg, var(--vert), var(--bleu-clair)); }
.gain h3 { margin: 0; font: 400 24px/28px var(--f-titre); letter-spacing: -.24px; color: var(--encre); }
.gain p { grid-column: 1 / -1; max-width: 34ch; margin: 14px 0 0; font: 400 16px/24px var(--f-texte); color: var(--soft); text-wrap: pretty; }
.gain__icone svg { fill: none; stroke: var(--bleu); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gain__icone .accent { stroke: var(--vert); }
@media (max-width: 900px) { .gains { grid-template-columns: 1fr; } }

/* Cas type : l'encadré de l'exergue du Corner (corner.css), fond blanc vers
   la nappe, filet dégradé en tête, trame dans l'angle */
.cas { position: relative; max-width: 960px; padding: 52px 64px 50px 32px; border-radius: 12px; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #fff 30%, var(--nappe)); box-shadow: 0 0 0 1px rgba(0, 40, 110, .07); }
.cas::before { content: ""; position: absolute; left: 32px; top: 0; width: 56px; height: 3px; background: linear-gradient(90deg, var(--vert), var(--bleu-clair)); }
.cas__trame { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, var(--trame) 1px, transparent 1.3px) 0 0 / 12px 12px; -webkit-mask-image: radial-gradient(60% 90% at 100% 100%, #000 0, transparent 80%); mask-image: radial-gradient(60% 90% at 100% 100%, #000 0, transparent 80%); }
.cas p { max-width: 64ch; font: 400 18px/30px var(--f-texte); color: var(--encre); text-wrap: pretty; }

/* FAQ sans déclaration : la largeur d'une déclaration */
.faq__seule { max-width: 816px; }

@media (max-width: 1200px) {
  .bento > .carte--texte { height: auto; min-height: 0; }
}
/* En dessous de 1200 px, la carte du héros suit celles de l'accueil :
   pleine largeur, hauteur fixe, le dessin rogné à droite */
@media (max-width: 1200px) {
  .hero-page__carte, .hero-page__carte.carte--4 { width: 100%; aspect-ratio: auto; height: 564px; }
  .hero-page__carte.carte--12 { width: 100%; aspect-ratio: auto; height: 450px; }
}
@media (max-width: 760px) {
  .champ--haut { margin-top: -64px; }
  .hero-page { padding-top: 64px; }
  .hero-page__in { padding-block: 64px 56px; }
  .hero-page__titre { line-height: 1.15; }
  .hero-page__chapo { font-size: 16px; line-height: 24px; }
  .hero-page__illu { margin-top: 48px; }
  .double { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .double .livre + .legende { margin-top: 48px; }
  .etapes--3 { grid-template-columns: minmax(0, 1fr); }
  .cas { padding: 40px 24px 38px; }
  .cas::before { left: 24px; }
  .cas p { font-size: 17px; line-height: 28px; }
}

/* Page Contact : une section d'un écran au moins sous la nav, sur le ciel
   du bandeau des chiffres (balisage .ciel__fonds, fondu allongé à 2,5 s ici,
   page.js l'enchaîne). Titre de l'appel final en blanc, agenda et formulaire
   en 7/5 sur la grille de 12, cartes de l'appel final en blanc. */
.contact { position: relative; overflow: clip; isolation: isolate; margin-top: -76px; padding-top: 76px; --trame: rgba(255, 255, 255, .18); }
.contact .ciel__fonds i { transition-duration: 2.5s; }
.contact__in { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); padding-block: 40px; }
.contact .cta__titre { color: #fff; }
.contact__cartes { row-gap: 16px; margin-top: 40px; }
.contact__cartes > .agenda { grid-column: span 7; }
.contact__cartes > .cta__carte--form { grid-column: span 5; }
/* L'agenda zCal est plus haut que le formulaire : le formulaire garde sa
   hauteur et reste en vue sous la nav le long de l'agenda. */
@media (min-width: 761px) {
  .contact__cartes > .cta__carte--form { align-self: start; position: sticky; top: 96px; }
}
.contact .cta__carte { background: #fff; }
.contact .cta__carte h2 { font: 400 26px/31px var(--f-titre); letter-spacing: -.26px; color: var(--encre); text-wrap: balance; }
.contact .cta__carte h2 em { font-style: normal; color: var(--bleu); }
/* La section passe sous la nav, qui s'y fond tant qu'elle est dessus
   (page.js) : ni fond ni filet, texte et partie bleue du picto en blanc ;
   le bouton passe en blanc. La veille s'arrête à une hauteur de nav du
   bas de la section : quand la FAQ arrive sous la nav, elle reprend son état. */
.contact__veille { position: absolute; left: 0; top: 0; bottom: 76px; width: 1px; pointer-events: none; }
.nav.est-fondue { background: rgba(255, 255, 255, 0); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0); }
.nav.est-fondue .logo { color: #fff; --picto-bleu: #fff; }
.nav.est-fondue :is(.nav__liens > a, .nav__declencheur) { color: #fff; }
.nav.est-fondue .nav__menu { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.nav--contact .logo, .nav--contact .nav__menu { transition: color .3s var(--c-nav), box-shadow .3s var(--c-nav); }
/* Le bouton plein se perdait sur le marine : blanc, texte et flèche bleus ;
   au survol, la nappe bleue et le texte blanc, le bouton normal inversé */
.nav.est-fondue .btn { background: #fff; color: var(--bleu); --anim-nappe: var(--bleu); }
.nav.est-fondue .btn[data-anim~="bascule"]:is(:hover, :focus-visible) { background: #fff; color: #fff; }
/* La comète des boutons, en continu autour de la carte agenda (page.js) :
   même trait, même halo, posée hors de la carte, un tour en 14 s */
.agenda .anneau__comete { animation-duration: 14s; }
/* Sur ce grand contour, la traîne et le halo des boutons plus denses : à 15 % et 35 %, le reflet se perdait */
.agenda .anneau__svg .anneau__traine { opacity: .22; }
.agenda .anneau__svg .anneau__halo { opacity: .6; }
/* La trame du héros : son masque l'ouvrait en bas, sous les cartes. Ici
   autour du titre et sur les bandes latérales, les zones libres. */
.contact::before { -webkit-mask-image: radial-gradient(62% 34% at 50% 14%, #000 0, rgba(0, 0, 0, .45) 50%, transparent 82%), linear-gradient(90deg, #000 0, transparent 9%, transparent 91%, #000 100%); mask-image: radial-gradient(62% 34% at 50% 14%, #000 0, rgba(0, 0, 0, .45) 50%, transparent 82%), linear-gradient(90deg, #000 0, transparent 9%, transparent 91%, #000 100%); }

/* L'agenda : l'intégration zCal (Keystatic, page Contact), à la hauteur de
   son contenu mesuré au navigateur le 21/10/2026 : 853 à 886 px de 358 à
   667 px de large, 913 px à 325. Une date choisie sur un écran étroit pose les créneaux
   sous le calendrier : le cadre défile alors lui-même. Sous 761 px, il
   déborde de 16 px dans la marge de la carte, pour rester à 320 px au moins
   (la largeur minimale de zCal) sur un écran de 375. */
.agenda__zcal { display: block; width: 100%; height: 900px; margin-top: 22px; border: 0; border-top: 1px solid var(--filet); }
.agenda__ouvrir { align-self: flex-start; margin-top: 16px; font-size: 14px; line-height: 20px; }

/* Le formulaire (Formulaire.astro, appel final et Contact) : le profil en
   segment à deux options, le message qui prend la hauteur laissée dans la
   carte (quatre lignes au moins), le champ piège hors de l'écran mais rendu. */
.segment { min-width: 0; margin: 0; padding: 0; border: 0; }
.segment legend { padding: 0; font: 500 13px/18px var(--f-titre); color: var(--encre); }
.segment__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 6px; padding: 4px; border-radius: 10px; background: var(--bande); box-shadow: inset 0 0 0 1px var(--filet); }
.segment label { position: relative; display: grid; cursor: pointer; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment span { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 4px 10px; border-radius: 7px; font: 500 13px/16px var(--f-titre); color: var(--soft); text-align: center; transition: background-color .3s var(--c-bouton), color .3s var(--c-bouton), box-shadow .3s var(--c-bouton); }
.segment label:hover span { color: var(--encre); }
.segment input:checked + span { background: #fff; color: var(--bleu); box-shadow: 0 0 0 1px var(--lavande), var(--ombre-xs); }
.segment input:focus-visible + span { outline: 3px solid rgba(0, 51, 153, .55); outline-offset: 2px; }
.segment + .saisie { margin-top: 20px; }
.saisie--message { display: flex; flex-direction: column; flex: 1; }
.saisie--message textarea { flex: 1; min-height: 109px; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Le flou du bas d'écran se retire tant que la section est en vue (page.js) */
.flou { transition: opacity .4s var(--c-bouton), visibility .4s var(--c-bouton); }
.flou.est-retire { opacity: 0; visibility: hidden; }

@media (max-width: 760px) {
  .contact { margin-top: -64px; padding-top: 64px; }
  .contact__veille { bottom: 64px; }
  .contact__in { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); padding-block: 48px; }
  .contact__cartes { margin-top: 32px; }
  .contact__cartes > :is(.agenda, .cta__carte--form) { grid-column: 1 / -1; }
  .agenda__zcal { width: calc(100% + 32px); height: 920px; margin-inline: -16px; }
}

/* Nav : le mega menu Services (page.js). Le déclencheur a le style des
   liens, son chevron tourne au survol et à l'ouverture, sur la courbe de la
   nav. Le panneau, posé sous la nav sur la largeur du cadre, s'ouvre en
   fondu et descend de 6 px ; mouvement réduit : sans mouvement (règle
   globale). Ses cartes reprennent le gabarit des cartes texte de la page
   Services, épurées (voir plus bas). */
.chevron { width: 10px; height: 10px; margin-left: 5px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--c-nav); }
.nav__declencheur:hover .chevron, .nav__declencheur[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 6px; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .25s var(--c-nav), transform .3s var(--c-nav), visibility 0s linear .3s; }
.mega.est-ouvert { visibility: visible; opacity: 1; transform: none; transition: opacity .25s var(--c-nav), transform .3s var(--c-nav), visibility 0s; }
.mega__in { max-width: calc(var(--contenu) + 34px); margin-inline: auto; padding: 16px 16px 18px; border-radius: 12px; background: #fff; box-shadow: var(--ombre-xl), 0 0 0 1px rgba(0, 40, 110, .08); }
.mega__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.mega__tout { margin: 12px 0 0; padding: 13px 18px; border-radius: 8px; display: flex; justify-content: flex-end; font-size: 14px; line-height: 16px; background: linear-gradient(90deg, rgba(0, 204, 102, .07), rgba(91, 141, 239, .09) 55%, rgba(0, 51, 153, .07)); }
/* Cartes du mega menu : sobres et identiques. Ni brume, ni trame, ni panneau
   ombré. Chaque domaine porte sa teinte (lue sur sa brume) : fond léger,
   trame de points dans l'angle, numéro en pastille. Au survol, le fond se
   renforce, un trait de la teinte se pose en haut, le titre la prend. */
.carte--compacte { --t: 0, 51, 153; --tt: var(--bleu); min-height: 0; padding: 0; border-radius: 8px; --progress: 1; background-color: rgba(var(--t), .035); transition: background-color .3s var(--c-nav); }
.carte--compacte:has(.brume--vert) { --t: 0, 204, 102; --tt: var(--vert-texte); }
.carte--compacte:has(.brume--ciel) { --t: 91, 141, 239; --tt: #2f5fc4; }
.carte--compacte::after { content: ""; position: absolute; right: 0; top: 0; width: 150px; height: 110px; border-radius: 0 8px 0 0; pointer-events: none; background-image: radial-gradient(rgba(var(--t), .45) 1px, transparent 1.3px); background-size: 8px 8px; -webkit-mask-image: radial-gradient(100% 100% at 100% 0, #000, transparent 75%); mask-image: radial-gradient(100% 100% at 100% 0, #000, transparent 75%); opacity: .55; transition: opacity .3s var(--c-nav); }
.carte--compacte:is(:hover, :focus-visible)::after { opacity: 1; }
.mega__cartes { gap: 10px; }
.carte--compacte .carte__bord, .carte--compacte .carte__fond { display: none; }
.carte--compacte .carte__panneau { position: relative; height: 100%; padding: 20px 22px 18px; gap: 0; background: none; box-shadow: none; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.carte--compacte .carte__panneau::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 1px; background: rgb(var(--t)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--c-nav); }
.carte--compacte:is(:hover, :focus-visible) { background-color: rgba(var(--t), .08); }
.carte--compacte.raison:is(:hover, :focus-visible) .ui.carte__panneau { transform: none; box-shadow: none; }
.carte--compacte:is(:hover, :focus-visible) .carte__panneau::after { transform: scaleX(1); }
.carte--compacte .carte__numero { display: block; width: fit-content; margin-bottom: 12px; padding: 3px 7px; border-radius: 5px; background: rgba(var(--t), .12); color: var(--tt); font-variant-numeric: tabular-nums; }
.carte--compacte .carte__titre { font-size: 16px; line-height: 22px; letter-spacing: -.16px; transition: color .3s var(--c-nav); }
.carte--compacte:is(:hover, :focus-visible) .carte__titre { color: var(--tt); }
.carte--compacte .carte__ligne { margin-top: 6px; font-size: 13.5px; line-height: 19px; color: var(--discret); }
.carte--compacte .carte__lien { padding-top: 14px; font-size: 14px; line-height: 16px; }
.carte--compacte:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }

/* Nav de tablette : avec Qui sommes-nous et le Corner, la rangée ne tient
   plus. De 1024 à 1100 px, l'accès membre en sort (il reste dans le menu et
   le pied) et les liens se resserrent ; de 761 à 1023 px, les liens passent
   dans le menu, le bouton d'appel reste. */
.nav__liens > a, .nav__declencheur { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1100px) {
  .nav__liens > a[href^="https://extranet"] { display: none; }
  .nav__liens { gap: 0; }
  .nav__liens > a, .nav__declencheur { padding-inline: 8px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  .nav__liens { display: none; }
  .nav__menu { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--filet); font: 500 .9375rem/1 var(--f-titre); }
}

/* Parcours des pages domaine sans verre : la bande des anneaux (.fils, 300 px)
   portait l'écart entre le titre et la piste des étapes. */
.comment--sans-verre .etapes { margin-top: clamp(48px, 5vw, 72px); }