/* Words and Wires — feuille de style unique.
   Couleurs : uniquement via les tokens de :root, jamais en dur dans une règle.
   Titres en Schibsted Grotesk (les « wires »), texte courant en Source Serif 4 (les « words »).
   Points de rupture : 720 px et 1100 px. */

@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --papier:#f3f5f6;
  --surface:#ffffff;
  --encre:#16222e;
  --gris:#52606c;
  --filet:#d3d9dc;
  --fibre:#f0b400;
  --fibre-trait:#a97d00;   /* la fibre en plus foncé, pour les traits fins sur fond clair : 3,4:1 minimum */
  --sombre:#16222e;
  --sombre-texte:#e4e9ec;
  --sombre-gris:#9cabb6;
  --sombre-filet:#33434f;

  --grotesk:"Schibsted Grotesk",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --marge:20px;
  --largeur:1180px;
  --mesure:64ch;
}
@media (min-width:720px){:root{--marge:32px}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--papier);color:var(--encre);font:400 1.125rem/1.65 var(--serif);text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--grotesk);line-height:1.12;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2.3rem,1.4rem + 4vw,4.2rem);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);font-weight:700;letter-spacing:-.018em}
h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
p,ul,ol,table,address{margin:0 0 1.1em}
p{text-wrap:pretty}
address{font-style:normal}
a{color:var(--encre);text-decoration-color:var(--fibre-trait);text-decoration-thickness:2px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:2px}
strong{font-weight:600}

.evitement{position:absolute;left:var(--marge);top:-100px;background:var(--encre);color:var(--papier);padding:.6em 1em;z-index:10;font-family:var(--grotesk)}
.evitement:focus{top:.5rem}

.inner,.entete-inner,.pied-inner{max-width:var(--largeur);margin:0 auto;padding:0 var(--marge)}

/* Boutons */
.bouton{display:inline-block;font:600 1rem/1 var(--grotesk);padding:.95em 1.35em;border-radius:3px;text-decoration:none;background:var(--encre);color:var(--papier);border:2px solid var(--encre);transition:background-color .2s,color .2s,border-color .2s,transform .1s}
.bouton:hover{background:transparent;color:var(--encre)}
.bouton-fibre{background:var(--fibre);border-color:var(--fibre);color:var(--encre)}
.bouton-fibre:hover{background:transparent;color:var(--fibre)}
.bouton:active,.menu-bouton:active{transform:translateY(1px)}
.boutons{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:1.8rem}
/* Lien secondaire à côté d'un bouton : du texte, pas un second bouton */
.lien-texte{font:600 1rem/1 var(--grotesk);padding:.6em 0}

/* Entête */
.entete{position:sticky;top:0;z-index:5;background:var(--papier);border-bottom:1px solid var(--filet)}
.entete-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:4.25rem}
.marque{display:flex;align-items:center;gap:.6rem;color:var(--encre);text-decoration:none;font:800 1.2rem/1 var(--grotesk);letter-spacing:-.02em}
.marque-signe{width:32px;height:32px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.marque-signe rect{stroke:var(--encre)}
.marque-signe path{stroke:var(--fibre)}
.menu-bouton{font:600 1rem/1 var(--grotesk);color:var(--encre);background:none;border:2px solid var(--encre);border-radius:3px;padding:.55em .9em;cursor:pointer}
.menu ul{list-style:none;margin:0;padding:0}
.menu a{font:600 1rem/1.2 var(--grotesk);color:var(--encre);text-decoration:none}

@media (max-width:1099.98px){
  /* Ouverture et fermeture animées : @starting-style pour l'entrée, allow-discrete pour garder
     le panneau affiché pendant la sortie. Sans support, il apparaît et disparaît d'un coup. */
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--papier);border-bottom:1px solid var(--filet);padding:.5rem var(--marge) 1.5rem;
    opacity:0;transform:translateY(-10px);transition:opacity .22s ease-out,transform .22s ease-out,display .22s;transition-behavior:allow-discrete}
  .entete[data-ouvert] .menu{display:block;opacity:1;transform:none}
  @starting-style{.entete[data-ouvert] .menu{opacity:0;transform:translateY(-10px)}}
  .menu li{border-top:1px solid var(--filet)}
  .menu li:first-child{border-top:0}
  .menu a{display:block;padding:.95rem 0;font-size:1.15rem}
  .menu a[aria-current="page"]{box-shadow:inset 4px 0 var(--fibre-trait);padding-left:.9rem}
  .menu .menu-contact{margin-top:.75rem;text-align:center;background:var(--encre);color:var(--papier);border-radius:3px}
}
@media (min-width:1100px){
  .menu-bouton{display:none}
  .menu ul{display:flex;align-items:center;gap:clamp(1.1rem,4.44vw - 1.96rem,1.6rem)}
  .menu a{display:block;padding:.4rem 0;font-size:.98rem;position:relative}
  /* Fil jaune qui se tire sous le lien survolé ; il reste tiré sous la page en cours */
  .menu a:not(.menu-contact)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--fibre-trait);transform:scaleX(0);transform-origin:left center;transition:transform .25s cubic-bezier(.6,0,.2,1)}
  .menu a:hover::after,.menu a[aria-current="page"]::after{transform:none}
  .menu .menu-contact{padding:.65rem 1rem;border:2px solid var(--encre);border-radius:3px}
  .menu .menu-contact:hover,.menu .menu-contact[aria-current="page"]{background:var(--encre);color:var(--papier);box-shadow:none}
}

/* Sections */
.section{padding:4.5rem 0}
.section + .section{border-top:1px solid var(--filet)}
.section-blanche{background:var(--surface)}
.intro{max-width:var(--mesure);color:var(--gris);font-size:1.2rem}
.prose{max-width:var(--mesure)}
/* Plusieurs blocs dans une même bande (pages courtes) */
.bloc + .bloc{margin-top:3.5rem}
@media (min-width:1100px){.bloc + .bloc{margin-top:5rem}}
@media (min-width:1100px){.section{padding:6.5rem 0}}

/* Accueil : hero */
.hero{padding:3.5rem 0 4rem}
.hero-grille{display:grid;gap:3rem;align-items:center}
.hero h1{max-width:13ch}
.hero-texte p{max-width:36em;font-size:1.25rem;color:var(--gris)}
.hero-note{font-family:var(--grotesk);font-weight:600;font-size:1rem;color:var(--encre);margin-top:1.8rem}
@media (min-width:1100px){
  .hero{padding:5.5rem 0 6rem}
  .hero-grille{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:4rem}
}

/* Le schéma : le seul élément fort de la page */
.schema{width:100%;max-width:600px;margin:0 auto}
.schema text{font-family:var(--grotesk);font-weight:600;font-size:20px;fill:var(--encre)}
.schema .s-legende{font-weight:500;fill:var(--gris);font-size:17px}
.schema .s-trait{fill:none;stroke:var(--encre);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.schema .s-mur{fill:var(--surface);stroke:var(--encre);stroke-width:3}
.schema .s-baie{fill:var(--encre)}
.schema .s-unite{stroke:var(--sombre-gris);stroke-width:2}
.schema .s-led{fill:var(--fibre)}
.schema .s-fibre{fill:none;stroke:var(--fibre);stroke-width:6;stroke-linecap:round}
.schema .s-sauvegarde{fill:none;stroke:var(--encre);stroke-width:2.5;stroke-dasharray:3 9;stroke-linecap:round}
.schema .s-appareil{fill:var(--surface);stroke:var(--encre);stroke-width:2.5;stroke-linejoin:round}
.schema .s-paquet{display:none;fill:var(--surface);stroke:var(--encre);stroke-width:2}
.schema .s-paquet.p4{fill:var(--encre);stroke:none}
/* Schémas des pages de services : même dessin que le hero, calés à gauche, sans animation propre
   (ils apparaissent comme les autres blocs, au défilement). */
.figure-schema{margin:2.5rem 0}
.figure-schema .schema{margin:0}
.colonnes + .figure-schema{margin-top:3.5rem}
/* Petit écran (< 520 px, où le schéma rétrécit le plus) : il mord sur les marges et ses
   légendes grossissent (à 390 px : 14 et 13 px au lieu de 11,7 et 9,9). Positions
   vérifiées pour qu'aucun texte ne touche le mur du bureau, un autre texte ou le cadre. */
@media (max-width:519.98px){
  .schema,.figure-schema .schema{width:calc(100% + var(--marge));max-width:none;margin-inline:calc(var(--marge) / -2)}
  .schema text{font-size:23px}
  .schema .s-legende{font-size:21px}
}

/* Mise en scène au chargement : le bureau apparaît, la fibre se tire jusqu'aux appareils,
   qui s'allument ; puis des paquets de données circulent du serveur vers l'équipe et vers
   les sauvegardes, et les voyants de la baie clignotent.
   Les paquets suivent la fibre par offset-path (coordonnées du viewBox, vérifié dans Chromium
   et Firefox) : les tracés ci-dessous sont un MIROIR des chemins .s-fibre et .s-sauvegarde
   du HTML. Hors écran, site.js pose data-pause et tout s'arrête. */
@media (prefers-reduced-motion:no-preference){
  .schema-hero{animation:allumer .6s ease-out .1s both}
  .schema-hero .s-fibre{stroke-dasharray:1;stroke-dashoffset:1;animation:tirer-fibre 1.1s cubic-bezier(.6,0,.2,1) .5s forwards}
  .schema-hero .s-fibre.f2{animation-delay:.9s}
  .schema-hero .s-fibre.f3{animation-delay:1.1s}
  .schema-hero .s-fibre.f4{animation-delay:1.3s}
  .schema-hero .s-appareil,.schema-hero .s-apparait{opacity:0;animation:allumer .4s ease-out 1.7s forwards}

  .schema-hero .s-led circle{animation:clignoter 2.3s steps(1,end) infinite}
  .schema-hero .s-led circle:nth-child(2){animation-duration:1.4s;animation-delay:-.6s}
  .schema-hero .s-led circle:nth-child(3){animation-duration:3.1s;animation-delay:-1.2s}
  .schema-hero .s-led circle:nth-child(4){animation-duration:1.9s;animation-delay:-.3s}
  .schema-hero .s-led circle:nth-child(5){animation-duration:2.7s;animation-delay:-2s}

  .schema-hero .s-paquet{display:inline;opacity:0;offset-rotate:0deg;animation:paquet 3.6s cubic-bezier(.45,0,.55,1) infinite}
  .schema-hero .p1{offset-path:path("M180 215H380C432 215 430 110 482 110");animation-delay:2.4s}
  .schema-hero .p2{offset-path:path("M180 215H482");animation-delay:3.6s}
  .schema-hero .p3{offset-path:path("M180 215H380C432 215 430 316 482 316");animation-delay:4.8s}
  .schema-hero .p4{offset-path:path("M125 300V428H150");animation-duration:7.2s;animation-delay:3s}

  .schema-hero[data-pause],.schema-hero[data-pause] *{animation-play-state:paused}
}
@keyframes tirer-fibre{to{stroke-dashoffset:0}}
@keyframes allumer{from{opacity:0}to{opacity:1}}
@keyframes clignoter{0%{opacity:1}50%{opacity:.35}}
@keyframes paquet{
  0%{offset-distance:0%;opacity:0}
  5%{opacity:1}
  36%{opacity:1}
  40%,100%{offset-distance:100%;opacity:0}
}

/* Accueil : liste des services */
.services{list-style:none;padding:0;margin:2.5rem 0 0;border-top:2px solid var(--encre)}
.services li{position:relative;display:grid;gap:.4rem;padding:1.6rem 0;border-bottom:1px solid var(--filet)}
.services h3{margin:0;font-size:1.45rem}
.services h3 a{color:var(--encre);text-decoration:none}
/* Toute la ligne est cliquable (le ::before du lien la couvre) ; au survol, un fil jaune la souligne.
   Ne jamais poser de transform ni de position sur h3 ou a : ils deviendraient le bloc
   conteneur du ::before, qui ne couvrirait plus la ligne. */
.services h3 a::before{content:"";position:absolute;inset:0}
.services li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--fibre);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.services li:hover::after,.services li:focus-within::after{transform:none}
.services p{margin:0;color:var(--gris);max-width:44em}
@media (min-width:720px){
  .services li{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:2rem;align-items:baseline}
}

/* Principes (accueil) et colonnes génériques */
.colonnes{display:grid;gap:2.5rem;margin-top:2.5rem}
.colonnes h3{padding-top:1rem;border-top:3px solid var(--fibre)}
.colonnes p{color:var(--gris)}
@media (min-width:900px){
  .colonnes{grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem}
  .colonnes-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Équipe */
.equipe{display:grid;gap:3rem;margin-top:2.5rem}
.personne{display:grid;grid-template-columns:96px minmax(0,1fr);gap:1.25rem;align-items:start}
.personne img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.personne h3{margin:0 0 .15rem}
.personne .role{font-family:var(--grotesk);font-weight:500;font-size:1rem;color:var(--gris);margin-bottom:.7rem}
.personne p{margin-bottom:.8rem}
.liens-sociaux{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1.2rem;font-family:var(--grotesk);font-weight:600;font-size:1rem}
@media (min-width:720px){
  .personne{grid-template-columns:140px minmax(0,1fr);gap:1.75rem}
  .personne img{width:140px;height:140px}
}
@media (min-width:1100px){.equipe{grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem}}

/* Pages intérieures */
.page-titre{padding:3.5rem 0 3rem;border-bottom:1px solid var(--filet)}
.page-titre h1{max-width:18ch;font-size:clamp(2.1rem,1.3rem + 3.4vw,3.6rem)}
.page-titre .intro{font-size:1.3rem;margin-bottom:0}
@media (min-width:1100px){.page-titre{padding:5rem 0 4rem}}

.bloc{display:grid;gap:1rem 4rem}
.bloc h2{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.1rem)}
@media (min-width:1100px){
  .bloc{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .bloc > h2{position:sticky;top:6.5rem;align-self:start}
}

.liste-points{padding-left:1.2em}
.liste-points li{margin-bottom:.45em}
.liste-points li::marker{color:var(--fibre);font-size:1.2em}

/* Tableaux techniques */
.tableau-conteneur{overflow-x:auto;margin:1.5rem 0 0}
table{width:100%;border-collapse:collapse;font-size:1rem}
th,td{text-align:left;vertical-align:top;padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--filet)}
thead th{font:700 .95rem/1.3 var(--grotesk);border-bottom:2px solid var(--encre)}
tbody th{font:600 1rem/1.4 var(--grotesk);white-space:nowrap}
td:last-child{color:var(--gris)}

/* Encadré */
.encadre{background:var(--surface);border-left:4px solid var(--fibre);padding:1.4rem 1.6rem;margin:2rem 0;max-width:var(--mesure)}
.encadre p:last-child{margin-bottom:0}

/* Portfolio */
.portfolio{display:grid;gap:3rem;margin-top:2.5rem}
.projet img{border:1px solid var(--filet);border-radius:4px;background:var(--surface)}
.projet h3{margin:1.2rem 0 .4rem}
.projet p{color:var(--gris);margin-bottom:.6rem}
.projet a{font-family:var(--grotesk);font-weight:600;font-size:1rem}
@media (min-width:900px){.portfolio{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Contact */
.contact-grille{display:grid;gap:2.5rem}
.contact-grille h2{font-size:1.3rem;margin-bottom:.5rem}
.contact-grille ul{list-style:none;padding:0}
.contact-grille p,.contact-grille address,.contact-grille li{font-size:1.2rem}
@media (min-width:900px){.contact-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Pied de page : compact. Appel et bouton sur une ligne, puis adresse, téléphones et liens
   en colonnes serrées (adresse et téléphones côte à côte même sur mobile). */
.pied{background:var(--sombre);color:var(--sombre-texte);padding:2.5rem 0 1.5rem}
.pied a{color:var(--sombre-texte);text-decoration-color:var(--fibre)}
.pied :focus-visible{outline-color:var(--fibre)}
.pied-appel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem}
.pied-appel h2{color:var(--sombre-texte);font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);margin:0 0 .25rem}
.pied-appel p{margin:0;color:var(--sombre-gris);font-size:1rem}
.pied-appel .bouton{color:var(--encre)}
.pied-appel .bouton:hover{color:var(--fibre)}
.pied-infos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--sombre-filet);font-size:.95rem;line-height:1.55}
.pied-infos address,.pied-infos ul{margin:0}
.pied-infos ul{list-style:none;padding:0}
.pied-tel a{white-space:nowrap}
.pied-infos li{padding:.15rem 0}
.pied-tel,.contact-grille ul{font-variant-numeric:tabular-nums}
.pied-liens{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.pied-mention{margin:1.25rem 0 0;font-size:.85rem;color:var(--sombre-gris)}
@media (min-width:900px){
  .pied-infos{grid-template-columns:auto auto minmax(0,1fr);gap:1rem 4.5rem}
  .pied-liens{grid-column:auto;flex-direction:column;align-items:flex-end;gap:0}
}
@media (min-width:1100px){.pied{padding-top:3rem}}
/* Pied court (page Contact) : ni appel ni coordonnées, déjà dans la page */
.pied-court{padding-top:1.5rem}
.pied-court .pied-infos{margin-top:0;padding-top:0;border-top:0}
.pied-court .pied-liens{grid-column:1 / -1;flex-direction:row;justify-content:flex-start;gap:.25rem 1.5rem}

/* ==========================================================================
   ANIMATIONS
   Règles :
   - n'animer que opacity et transform (exceptions : le tracé SVG de la fibre en
     stroke-dashoffset et les paquets en offset-distance, dans le schéma du hero) ;
   - tout mouvement est sous prefers-reduced-motion:no-preference ;
   - sans JS et sans support, tout le contenu reste visible : l'effet est un
     enrichissement, jamais une condition d'affichage.
   Classes posées dans le HTML :
     .reveler          le bloc monte en fondu à son entrée dans l'écran
     .reveler-suite    idem pour chacun de ses enfants directs, l'un après l'autre
     data-dec="1|2|3"  décalage pour les blocs côte à côte
     .fil              la bordure de l'élément se tire comme un câble (voir « Fils »)
   ========================================================================== */

/* --- Chargement : titres de page et hero ---------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .hero-texte > *,.page-titre h1,.page-titre .intro{animation:monter .8s cubic-bezier(.2,.7,.2,1) both}
  .hero-texte > :nth-child(2),.page-titre .intro{animation-delay:.12s}
  .hero-texte > :nth-child(3){animation-delay:.24s}
  .hero-texte > :nth-child(4){animation-delay:.36s}
}
@keyframes monter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* --- Fils ------------------------------------------------------------------
   La bordure réelle devient transparente et un ::before prend sa place, pour
   pouvoir la tirer en transform. Au repos (sans animation), le ::before est
   entier : le trait reste visible. */
@media (prefers-reduced-motion:no-preference){
  .fil{position:relative}
  .fil::before{content:"";position:absolute;transform-origin:left center}
  .services.fil{border-top-color:transparent}
  .services.fil::before{left:0;right:0;top:-2px;height:2px;background:var(--encre)}
  .services li.fil{border-bottom-color:transparent}
  .services li.fil::before{left:0;right:0;bottom:-1px;height:1px;background:var(--filet)}
  .colonnes h3.fil{border-top-color:transparent}
  .colonnes h3.fil::before{left:0;right:0;top:-3px;height:3px;background:var(--fibre)}
  .encadre.fil{border-left-color:transparent}
  .encadre.fil::before{top:0;bottom:0;left:-4px;width:4px;background:var(--fibre);transform-origin:center top}
}
@keyframes tirer-fil{from{transform:scaleX(0)}to{transform:none}}
@keyframes tirer-fil-v{from{transform:scaleY(0)}to{transform:none}}

/* --- Voie native : animations pilotées par le défilement (Chrome, Edge, Safari 26+)
   Plages en longueur (« cover 0px cover 25vh ») : l'animation est finie quand le
   haut du bloc atteint les trois quarts de l'écran, quelle que soit sa hauteur.
   En pourcentage, un bloc haut restait translucide longtemps, et le dernier bloc
   d'une page courte pouvait ne jamais finir. */
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    .reveler,.reveler-suite > *{
      animation:reveler-monter linear both;
      animation-timeline:view();
      animation-range:cover 0px cover 25vh;
    }
    .reveler[data-dec="1"]{animation-range:cover 3vh cover 28vh}
    .reveler[data-dec="2"]{animation-range:cover 6vh cover 31vh}
    .reveler[data-dec="3"]{animation-range:cover 9vh cover 34vh}

    .fil::before{
      animation:tirer-fil linear both;
      animation-timeline:view();
      animation-range:cover 4vh cover 34vh;
    }
    .encadre.fil::before{animation-name:tirer-fil-v}
  }
}
@keyframes reveler-monter{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* --- Voie de repli : IntersectionObserver + transition (Firefox) -------------
   html.repli-reveler n'est posée par site.js que si le navigateur n'a pas la voie
   native ; .vu est ajoutée une fois le bloc entré dans l'écran. */
@media (prefers-reduced-motion:no-preference){
  html.repli-reveler .reveler,html.repli-reveler .reveler-suite > *{
    opacity:0;transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.22,.68,.28,1),transform .7s cubic-bezier(.22,.68,.28,1);
  }
  html.repli-reveler .reveler[data-dec="1"]{transition-delay:.09s}
  html.repli-reveler .reveler[data-dec="2"]{transition-delay:.18s}
  html.repli-reveler .reveler[data-dec="3"]{transition-delay:.27s}
  html.repli-reveler .fil::before{transform:scaleX(0);transition:transform .9s cubic-bezier(.6,0,.2,1) .15s}
  html.repli-reveler .encadre.fil::before{transform:scaleY(0)}
  html.repli-reveler .vu{opacity:1;transform:none}
  html.repli-reveler .fil.vu::before{transform:none}
}

/* --- Fil de lecture : la fibre se tire sous l'entête à mesure qu'on descend --
   Voie native seulement ; ailleurs il n'existe pas. Sur une page sans défilement,
   la chronologie est inactive et le fil reste à zéro. */
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:scroll()) and (animation-range:0% 100%)){
    .entete::after{
      content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
      background:var(--fibre);transform:scaleX(0);transform-origin:left center;
      animation:tirer-fil linear both;
      animation-timeline:scroll(root);
    }
  }
}

/* --- Transitions entre les pages (Chrome, Edge, Safari 18.2+) -------------
   L'entête reste en place ; le reste de la page passe en fondu, et les titres
   de la nouvelle page montent (voir « Chargement »). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .entete{view-transition-name:entete}
  ::view-transition-old(root){animation:vt-sortir .18s ease-in both}
  ::view-transition-new(root){animation:vt-entrer .32s ease-out both}
}
@keyframes vt-sortir{to{opacity:0}}
@keyframes vt-entrer{from{opacity:0}}

/* --- Mouvement réduit : filet de sécurité pour les transitions de survol ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}