/* ============================================================
   RESSOURCES — le hub /ressources/ et ses pages (inc/ressources.php)
   V3 (03/10/2026) : intégration fidèle de la maquette « 24 runes »
   (pack_assets_24_runes, dessinée à 1024 px). Ses proportions sont
   reprises en pourcentages de la largeur : visuel de l'en-tête à 46 %,
   colonne d'ætt jusqu'à 39 %, titres à 15 %, runes de 39 à 95 %.
   Aucune image en contenu ; deux fonds déjà présents dans le thème (la
   trame de l'en-tête, la roche du Parcours Runique) ; aucune animation.
   ============================================================ */

/* Le tiroir marque la section courante sur une ressource (menu-defaut.php),
   le jour où l'entrée Ressources sera affichée. */
.dr-a.est-courant{color:var(--or-texte)}

.ressource-page,.ressources-page{
  --res-pad:clamp(1.25rem,5vw,3.5rem);          /* marge latérale de .wrap et .bande__in */
  --res-cuivre:#A8642F;
  --res-degrade:linear-gradient(170deg,#CF8A52 4%,#AE6631 48%,#82451F 98%);
  --res-degrade-nuit:linear-gradient(168deg,#E6C08A 6%,#CF9C61 55%,#B07B45 96%);
  --res-papier:url("assets/images/menu-papier.webp");
  --res-roche:url("assets/images/parcours-roche-nuit-600.webp");
  --res-arc:rgba(184,134,78,.32);
  --res-filet-cuivre:rgba(184,134,78,.55);
  padding-top:0}

/* Les signes en cuivre. Grands glyphes, frise et tablette de l'en-tête :
   Noto Sans Runic pur, d'un cuivre plein, sans ombre ni relief ; leur
   présence vient de la taille, de l'espace et de la normalisation optique
   (bloc @glyphes). La tablette sombre du hub garde son dégradé. */
.rune__glyphe,.res-frise a span,.res-tablette span span{color:var(--res-cuivre)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .res-mineral--liste .res-tablette span span{background:var(--res-degrade-nuit);-webkit-background-clip:text;background-clip:text;color:transparent}
}
/* Hub seulement : la tablette sur fond sombre, épaissie d'une ombre nette. */
.res-mineral--liste .res-tablette{filter:drop-shadow(1px 0 0 #C08A50) drop-shadow(-1px 0 0 #C08A50)}

/* Les surtitres de la maquette portent leur filet après le texte. */
.ressource-page .res-hero .eyebrow,.res-suite .eyebrow,.res-histoire .eyebrow{flex-direction:row-reverse;justify-content:flex-end}
.ressource-page .res-hero .eyebrow::before,.res-suite .eyebrow::before,.res-histoire .eyebrow::before{width:2.25rem}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.res-hero{position:relative;overflow:hidden;container-type:inline-size;border-bottom:1px solid var(--acc-bord);
  background:var(--res-papier),linear-gradient(180deg,#FBF9F4 0%,#F6F0E6 100%)}
.res-hero__in{--res-haut:clamp(3.25rem,7vw,6rem);--res-bas:clamp(3rem,6vw,5rem);
  position:relative;display:grid;row-gap:2.75rem;padding-block:var(--res-haut) var(--res-bas)}
.res-hero__texte{position:relative;z-index:1;align-self:center}
.res-hero .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.res-hero .eyebrow a:hover,.res-hero .eyebrow a:focus-visible{border-bottom-color:currentColor}
.res-hero .eyebrow + h1{margin-top:clamp(1.75rem,3vw,2.6rem)}
.res-hero h1{font-size:clamp(3rem,5.7vw,5.75rem);font-weight:500;line-height:.98;letter-spacing:-.018em}
.res-hero h1 > span{display:block}
.res-hero h1 > span + span{font-size:.7em;font-weight:400;line-height:1.08;margin-top:.12em;letter-spacing:-.008em}
/* le petit filet cuivre entre le titre et l'introduction */
.res-hero h1::after{content:"";display:block;width:3.5rem;height:1px;background:var(--or);margin-top:clamp(1.6rem,2.6vw,2.25rem)}
.res-hero .accroche{font-family:var(--serif);font-size:clamp(1.3rem,1.8vw,1.56rem);font-weight:500;line-height:1.45;color:var(--nuit);max-width:27rem;text-wrap:pretty}
.res-hero h1 + .accroche{margin-top:clamp(1.35rem,2.2vw,1.8rem)}
.res-hero__suite{display:inline-grid;place-items:center;width:3.1rem;height:3.1rem;margin-top:clamp(2rem,3.4vw,2.9rem);
  border:1px solid var(--or);border-radius:50%;color:var(--or-texte);transition:background .3s,color .3s,transform .4s var(--ease)}
.res-hero__suite svg{width:1.15rem;height:1.15rem}
.res-hero__suite:hover,.res-hero__suite:focus-visible{background:var(--or-action);border-color:var(--or-action);color:#fff;transform:translateY(2px)}

/* La composition minérale : un mur clair éclairé en biais, l'ombre portée
   d'un angle, deux arcs, une pierre sombre (la roche du Parcours Runique,
   teintée nuit) et, à sa droite, l'annonce des trois ættir. La pierre et
   les arcs sont du décor ; l'annonce est un vrai contenu (liens). */
.res-mineral{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size}
.res-mineral--hero{display:flex;flex-direction:column;justify-content:center;min-height:clamp(21.5rem,92vw,26rem);margin-inline:calc(-1 * var(--res-pad));
  background:
    radial-gradient(48% 62% at 100% 0%,rgba(112,82,52,.24),transparent 70%),
    linear-gradient(116deg,transparent 46%,rgba(255,251,243,.62) 58%,transparent 72%),
    linear-gradient(90deg,rgba(246,240,230,0) 0%,#EFE6D8 26%,#E7DAC6 100%)}
.res-mineral--hero::before,.res-mineral--hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.res-mineral--hero::before{left:-14%;top:46%;width:max(98%,26rem);aspect-ratio:1;transform:translateY(-50%);border:1px solid var(--res-arc)}
.res-mineral--hero::after{left:1%;top:52%;width:39%;aspect-ratio:1;transform:translateY(-50%);border:1px dotted rgba(184,134,78,.55)}
/* La pierre : une photographie détourée (fournie par Kevin, 04/10/2026,
   bin/preparer-pierre-hero.py), à ses proportions exactes. Sa hauteur est
   celle de la composition ; partie de 11 % sous son haut, elle sort du
   cadre par le bas. */
.res-mineral__pierre{position:absolute;left:8%;top:11%;height:100%;aspect-ratio:420/1427;
  background:url("assets/images/ressources-pierre-260.webp") 0 0/100% 100% no-repeat;
  background-image:image-set(url("assets/images/ressources-pierre-260.webp") 1x,url("assets/images/ressources-pierre-420.webp") 2x);
  filter:drop-shadow(-14px 18px 22px rgba(52,36,22,.2))}
.res-tablette{margin:0;display:grid;font-family:var(--runic);line-height:1}
.res-tablette > span{display:flex;justify-content:space-between}
/* Boîte fixe : le passage de la police de repli à Noto Sans Runic ne
   déplace rien (CLS). Même règle pour les glyphes des runes et de la frise. */
.res-tablette span span{display:block;width:1em;height:1em;text-align:center}
/* Normalisation optique (bloc @glyphes en fin de feuille) : chaque signe
   reçoit dans sa boîte fixe une échelle uniforme et un centrage mesurés.
   translate et scale sont des propriétés à part : le transform du survol
   de la frise s'y ajoute sans les effacer. */
.rune__glyphe,.res-frise a span,.res-tablette span span,.res-aettir__signes span{translate:var(--g-x,0) var(--g-y,0);scale:var(--g-s,1)}
.res-mineral--hero .res-tablette{position:absolute;left:44%;right:7%;top:50%;transform:translateY(-50%);
  gap:clamp(.9rem,3.4cqi,1.75rem);font-size:1.5rem;font-size:clamp(1.3rem,6.2cqi,3.1rem)}

/* L'annonce des trois ættir : un titre, puis trois rangées numérotées,
   nommées et reliées à leur section, les huit signes de chacune dessous.
   Mêmes numéros 01 · 02 · 03 que les sections. */
.res-mineral--hero .res-aettir{position:relative;margin:clamp(1.75rem,5cqi,2.5rem) 8% clamp(1.75rem,5cqi,2.5rem) 38%}
.res-aettir__titre{display:flex;align-items:center;gap:.85rem;margin:0 0 clamp(.8rem,2.2cqi,1.15rem);font-size:.66rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--or-texte)}
.res-aettir__titre::after{content:"";width:2.25rem;height:1px;background:var(--or)}
.res-aettir__liste{list-style:none;margin:0;padding:0;border-bottom:1px solid rgba(184,134,78,.4)}
.res-aettir__liste li{margin:0;border-top:1px solid rgba(184,134,78,.4)}
.res-aettir a{display:grid;grid-template-columns:2.1rem minmax(0,1fr);grid-template-areas:"num tete" ". signes";column-gap:.45rem;row-gap:clamp(.5rem,1.6cqi,.8rem);
  padding:clamp(.75rem,2.2cqi,1.1rem) 0;color:inherit;text-decoration:none;border:0}
.res-aettir__num{grid-area:num;font-family:var(--serif);font-size:1.15rem;line-height:1.25;color:var(--or-texte);font-variant-numeric:lining-nums}
/* le nom, puis l'étendue toujours dessous : une ligne qui se couperait ou
   non selon l'arrivée de la police déplacerait l'en-tête (CLS) */
.res-aettir__tete{grid-area:tete;display:flex;flex-direction:column;align-items:flex-start;row-gap:.2rem}
.res-aettir__nom{font-family:var(--serif);font-size:clamp(1.12rem,3cqi,1.38rem);font-weight:500;line-height:1.25;color:var(--nuit);transition:color .3s}
.res-aettir__etendue{font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--txt3)}
.res-aettir__signes{grid-area:signes;display:flex;justify-content:space-between;font-family:var(--runic);font-size:1.3rem;font-size:clamp(1.2rem,5.4cqi,2.5rem);line-height:1;color:var(--res-cuivre)}
.res-aettir__signes span{display:block;width:1em;height:1em;text-align:center}
.res-aettir a:hover .res-aettir__nom,.res-aettir a:focus-visible .res-aettir__nom{color:var(--or-texte)}
.res-aettir a:focus-visible{outline:2px solid var(--or);outline-offset:4px}
/* Sur téléphone : la pierre s'affine, l'annonce prend la largeur. */
@media(max-width:759px){
  .res-mineral__pierre{left:3%;top:30%;height:76%}
  .res-mineral--hero::after{left:-3%;width:31%}
  .res-mineral--hero .res-aettir{margin-left:29%;margin-right:5%}
  .res-aettir__titre{letter-spacing:.22em}
  .res-aettir__signes{font-size:clamp(1.2rem,6.6cqi,1.75rem)}
}

@media(min-width:1000px){
  /* Le texte occupe 46 % de la largeur, la composition le reste, jusqu'au
     bord droit et sur toute la hauteur de l'en-tête. */
  .res-hero--mineral .res-hero__in{--res-gauche:calc(max(0px,(100cqw - 76rem) / 2) + var(--res-pad));
    grid-template-columns:calc(46cqw - var(--res-gauche)) minmax(0,1fr);column-gap:0;align-items:stretch;min-height:clamp(36rem,44vw,44rem)}
  .res-hero--mineral .res-hero__texte{padding-right:clamp(1.5rem,3vw,3rem)}
  .res-mineral--hero{min-height:0;margin:calc(-1 * var(--res-haut)) calc(-1 * var(--res-gauche)) calc(-1 * var(--res-bas)) 0}
}

/* Le hub : un en-tête simple, deux arcs pour tenir la droite. */
.res-hero--hub::before,.res-hero--hub::after{content:"";position:absolute;top:50%;border-radius:50%;pointer-events:none}
.res-hero--hub::before{right:-14rem;width:36rem;aspect-ratio:1;transform:translateY(-50%);border:1px solid var(--res-arc)}
.res-hero--hub::after{right:-4rem;width:19rem;aspect-ratio:1;transform:translateY(-44%);border:1px dotted rgba(184,134,78,.42)}
@media(max-width:699px){.res-hero--hub::before{right:-24rem}.res-hero--hub::after{display:none}}
.ressources-page .res-hero h1{font-weight:400}
.ressources-page .res-hero h1::after{width:3.25rem}

/* ============================================================
   CONTENU — réglages communs
   ============================================================ */
.res-entry{padding-top:clamp(3rem,6vw,4.75rem)}
.ressource-page .res-entry{padding-top:0}
.res-entry ol,.res-entry ul{list-style:none;margin:0;padding:0}
.res-entry li + li{margin-top:0}
.res-entry .res-intro > * + *{margin-top:var(--air-para)}
.res-entry .res-intro p{font-size:1.06rem}
.res-entry .res-ouverture .res-intro .res-intro__note{margin-top:1.6rem;padding:.15rem 0 .15rem 1.2rem;border-left:1px solid var(--or);font-family:var(--sans);font-size:.9rem;line-height:1.65;color:var(--txt3)}

/* ---------- Introduction et accès rapide : une vraie section, deux
   colonnes séparées d'un filet cuivre ---------- */
.res-entry > .res-ouverture{max-width:none;display:grid;row-gap:2.75rem;padding-block:clamp(3.75rem,7vw,6rem)}
.res-ouverture .res-intro p{font-family:var(--serif);font-size:clamp(1.2rem,1.45vw,1.32rem);line-height:1.6;color:var(--txt)}
.res-ouverture .res-intro p + p{margin-top:1.1rem}
.res-entry .res-sommaire{border-top:1px solid var(--res-filet-cuivre);padding-top:2.25rem}
.res-sommaire__titre{font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--or-texte)}
.res-sommaire > ol{margin-top:1.1rem}
.res-sommaire > ol > li{padding:.75rem 0 .8rem}
.res-sommaire > ol > li + li{border-top:1px solid var(--acc-bord)}
.res-entry .res-sommaire a{border-bottom:0;transition:color .3s}
.res-entry .res-sommaire__aett{display:inline-block;padding-block:.2rem;font-family:var(--serif);font-size:1.22rem;color:var(--or-texte)}
.res-sommaire__num{margin-right:.2rem;color:var(--or);font-variant-numeric:lining-nums}
.res-sommaire ol ol{display:flex;flex-wrap:wrap;align-items:center;column-gap:.45rem}
.res-sommaire ol ol li{display:flex;align-items:center}
.res-sommaire ol ol li:not(:last-child)::after{content:"·" / "";margin-left:.45rem;color:var(--or)}
.res-entry .res-sommaire ol ol a{display:inline-flex;align-items:center;min-height:2.3rem;font-family:var(--serif);font-size:1.17rem;color:var(--nuit)}
.res-entry .res-sommaire a:hover,.res-entry .res-sommaire a:focus-visible{color:var(--or-texte)}
@media(min-width:760px){
  .res-entry > .res-ouverture{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0;align-items:center}
  .res-ouverture .res-intro{padding-right:clamp(2.5rem,5vw,4.5rem)}
  .res-entry .res-sommaire{border-top:0;border-left:1px solid var(--res-filet-cuivre);padding:.35rem 0 .35rem clamp(2.5rem,5vw,4.5rem)}
  .res-sommaire > ol > li{display:grid;grid-template-columns:9.75rem minmax(0,1fr);column-gap:1rem;align-items:baseline}
  .res-entry .res-sommaire ol ol a{min-height:2rem}
}

/* ============================================================
   LES TROIS ÆTTIR — mobile et tablette d'abord
   ============================================================ */
.res-entry > .res-aett{margin-top:0}
.res-aett{--res-glyphe:5rem;--res-haut:clamp(4.5rem,9vw,7.5rem);--res-bas:var(--res-haut);padding-block:var(--res-haut) var(--res-bas);overflow:hidden;overflow:clip}
/* Seconde moitié de la page (passe de finition du 04/10) : les frontières
   2ᵉ → 3ᵉ ætt → repère historique → suite → pied additionnaient deux
   paddings pleins (240 à 270 px à 1440). Chaque transition est ramenée
   vers 170-190 px, sans toucher au haut du 1er ni à l'intérieur du 2ᵉ. */
.res-aett--2{--res-bas:clamp(4rem,7vw,6rem)}
.res-aett--3{--res-haut:clamp(4rem,7vw,6rem);--res-bas:clamp(3.5rem,5vw,4.75rem)}
.res-aett__in{display:grid;row-gap:clamp(2.5rem,4.5vw,3.25rem)}
.res-aett__corps{display:contents}
.res-aett--1{background:var(--res-papier),linear-gradient(100deg,#EFE5D6 0%,#F4ECE1 38%,#F6F0E7 100%);border-top:1px solid var(--acc-bord)}
.res-aett--2{background:var(--res-papier),#ECE9E3}
.res-aett--3{background:var(--res-papier),linear-gradient(180deg,#F8F4EC,#F6F1E8);
  /* le pendant clair de la colonne nuit : un sable minéral, la roche
     claire du Parcours Runique fondue en multiplication au pied */
  --res-clair:
    radial-gradient(70% 40% at 30% 12%,rgba(255,252,245,.65),transparent 70%),
    linear-gradient(rgba(237,228,214,.45),rgba(237,228,214,.45)),
    url("assets/images/parcours-faq-roche-720.webp") 0 100%/min(100%,34rem) auto no-repeat,
    linear-gradient(180deg,#EEE5D7,#E7DBC8)}

/* L'en-tête d'ætt : le grand numéro fantôme, le titre, l'étendue, un filet */
/* Sur petit écran, le numéro fantôme se lève au-dessus du titre, qui en
   recouvre le bas. */
.res-aett__tete{position:relative;padding-top:clamp(4rem,11vw,5.5rem)}
.res-aett__num{position:absolute;z-index:-1;top:0;left:-.06em;
  font-family:var(--serif);font-weight:300;font-size:clamp(8rem,22vw,12rem);line-height:1;letter-spacing:-.03em;
  color:rgba(184,134,78,.17);pointer-events:none;user-select:none}
.res-aett__tete h2{position:relative;font-size:clamp(2.4rem,3.2vw,3.15rem);font-weight:500;line-height:1.02;letter-spacing:-.012em;text-wrap:balance}
.res-aett h2 span{display:block;margin-top:1.05rem;font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--or-texte)}
.res-aett h2::after{content:"";display:block;width:3rem;height:1px;background:var(--or);margin-top:1.6rem}
.bande .res-aett__note{margin-top:1.5rem;max-width:22rem;font-family:var(--serif);font-size:1.2rem;line-height:1.55;color:var(--txt)}

/* La frise : les huit signes, leurs noms dessous, un filet */
.res-frise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.75rem;padding-bottom:1.9rem;border-bottom:1px solid var(--acc-bord)}
.res-entry .res-frise a{display:flex;flex-direction:column;align-items:center;gap:.75rem;border-bottom:0;
  font-family:var(--serif);font-size:1.05rem;line-height:1.2;color:var(--nuit);transition:color .3s}
.res-frise a span{display:block;width:1em;height:1em;font-family:var(--runic);font-size:2.5rem;line-height:1;text-align:center;transition:transform .4s var(--ease)}
.res-entry .res-frise a:hover{color:var(--or-texte)}
@media(hover:hover) and (pointer:fine){
  /* le signe se lève à peine, un filet cuivre se trace sous son nom */
  .res-frise a{position:relative}
  .res-frise a::after{content:"";position:absolute;left:50%;bottom:-.45rem;width:1.5rem;height:1px;margin-left:-.75rem;background:var(--or);
    transform:scaleX(0);transition:transform .5s var(--ease)}
  .res-frise a:hover span,.res-frise a:focus-visible span{transform:translateY(-4px)}
  .res-frise a:hover::after,.res-frise a:focus-visible::after{transform:none}
}
@media(min-width:600px){
  .res-frise{grid-template-columns:repeat(8,minmax(0,1fr))}
  .res-frise a span{font-size:clamp(2.4rem,3.4vw,3.4rem)}
}

/* Les runes : une grille éditoriale, sans cartes. Le glyphe est l'élément
   principal ; numéro, glyphe et texte sur une ligne, comme la maquette. */
.res-runes{display:grid}
.rune{display:grid;grid-template-columns:calc(var(--res-glyphe) * .7) minmax(0,1fr);grid-template-areas:"num corps" "glyphe corps";grid-template-rows:auto 1fr;
  column-gap:1.1rem;padding:clamp(2rem,3vw,2.75rem) 0;border-bottom:1px solid var(--acc-bord)}
.rune__num{grid-area:num;font-family:var(--serif);font-size:1rem;line-height:1;color:var(--or-texte);font-variant-numeric:lining-nums tabular-nums}
.rune__glyphe{grid-area:glyphe;align-self:start;height:1em;margin-top:.12em;font-family:var(--runic);font-size:var(--res-glyphe);line-height:1;text-align:center}
.rune__corps{grid-area:corps;min-width:0;max-width:36rem}
.rune__tete{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.65rem}
.res-entry .rune__nom{margin:0;font-size:clamp(1.65rem,1.9vw,1.8rem);font-weight:500;line-height:1.05}
.res-entry .rune__son{margin:0;font-family:var(--serif);font-size:1.4rem;line-height:1.2;color:var(--or-texte)}
.rune__son small{font-family:var(--sans);font-style:normal;font-size:.78rem;letter-spacing:.02em;color:var(--txt3)}
.rune dl{margin:.7rem 0 0}
.rune dt{margin-top:1rem;font-size:.68rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--or-texte)}
.rune dt:first-child{margin-top:.5rem}
.rune dd{margin:.32rem 0 0;font-family:var(--serif);font-size:clamp(1.1rem,1.22vw,1.17rem);line-height:1.5}
.rune__origine{color:var(--txt2)}
.rune__origine i{color:var(--txt)}
.rune__lecture{color:var(--nuit)}
@media(min-width:600px){
  .res-aett{--res-glyphe:5.6rem}
  .rune{grid-template-columns:1.6rem calc(var(--res-glyphe) * .68) minmax(0,1fr);grid-template-areas:"num glyphe corps";grid-template-rows:auto;column-gap:1rem}
  .rune__num{padding-top:.45rem}
  .rune__glyphe{margin-top:-.04em}
}
@media(min-width:760px){
  /* deux colonnes de quatre, lues de haut en bas, séparées d'un filet */
  .res-runes{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:clamp(2.25rem,3.4vw,3.25rem);
    background:linear-gradient(var(--acc-bord),var(--acc-bord)) 50% 0/1px 100% no-repeat}
  .res-aett{--res-glyphe:4.9rem}
}
.res-entry .res-retour{font-size:.8rem;letter-spacing:.06em}
.res-entry .res-retour a{color:var(--or-texte);border-bottom:0}
.res-entry .res-retour a:hover,.res-entry .res-retour a:focus-visible{text-decoration:underline}

/* ---------- Le deuxième ætt sur petit écran : l'en-tête en bandeau de
   pierre nuit sur toute la largeur ---------- */
.res-aett--2{--res-nuit:
    radial-gradient(55% 30% at 12% 100%,rgba(150,160,175,.12),transparent 72%),
    radial-gradient(60% 40% at 30% 14%,rgba(212,164,106,.07),transparent 70%),
    linear-gradient(180deg,rgba(40,52,74,.9),rgba(31,41,60,.93)),
    var(--res-roche) 30% 70%/cover #1B1E2B}
.res-aett--2 .res-aett__tete{padding-bottom:3rem}
.res-aett--2 .res-aett__tete::before{content:"";position:absolute;z-index:-2;top:calc(-1 * var(--res-haut));bottom:0;left:-50vw;right:-50vw;background:var(--res-nuit)}
.res-aett--3 .res-aett__tete{padding-bottom:3rem}
.res-aett--3 .res-aett__tete::before{content:"";position:absolute;z-index:-2;top:calc(-1 * var(--res-haut));bottom:0;left:-50vw;right:-50vw;
  background:var(--res-clair);background-blend-mode:normal,normal,multiply,normal}
.res-aett--2 h2{color:#fff}
.res-aett--2 h2 span{color:var(--or2)}
.res-aett--2 h2::after{background:var(--or2)}
/* le « 02 » taillé dans la même roche, éclaircie */
.res-aett--2 .res-aett__num{color:rgba(226,214,194,.2)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .res-aett--2 .res-aett__num{background:linear-gradient(rgba(214,203,186,.5),rgba(190,180,165,.3)),var(--res-roche) 40% 50%/cover;
    -webkit-background-clip:text;background-clip:text;color:transparent}
}

/* ============================================================
   LES TROIS ÆTTIR — bureau : la composition de la maquette.
   Grille en pourcentages de la largeur (plafonnée à 100 rem) :
   marge 15 % (le numéro fantôme y vit), en-tête 21 %, 3 %, runes 56 %, 5 %.
   ============================================================ */
@media(min-width:1000px){
  .res-aett{--res-glyphe:clamp(5.4rem,7.8vw,7.75rem);--res-haut:clamp(6rem,8.5vw,8.5rem)}
  .res-aett--2{--res-bas:clamp(4.75rem,6.5vw,6.25rem)}
  .res-aett--3{--res-haut:clamp(4.75rem,6.5vw,6.25rem);--res-bas:clamp(3.75rem,5vw,4.75rem)}
  .res-aett .res-aett__in{max-width:100rem;padding-inline:0;column-gap:0;row-gap:clamp(2.75rem,3.5vw,3.5rem);
    grid-template-columns:15% minmax(0,21%) 3% minmax(0,56%) 5%;
    grid-template-areas:". tete . frise ." ". tete . runes ." ". tete . retour ."}
  .res-aett .res-frise{grid-area:frise}.res-aett .res-runes{grid-area:runes}.res-aett .res-retour{grid-area:retour}
  .res-aett__tete{grid-area:tete;align-self:start;position:sticky;top:calc(var(--hauteur-entete) + 4rem);padding-top:clamp(1.5rem,3.5vw,3.25rem)}
  /* le numéro fantôme dans la marge, à 2 % du bord, à gauche du titre */
  .res-aett__num{left:-61.9%;top:calc(clamp(1.5rem,3.5vw,3.25rem) - .12em);font-size:clamp(8.5rem,12.4vw,12.75rem)}
  .rune{grid-template-columns:1.6rem calc(var(--res-glyphe) * .66) minmax(0,1fr);column-gap:clamp(.7rem,1vw,1.1rem);padding:clamp(2.25rem,3vw,3rem) 0}
  .rune__corps{max-width:none}

  /* Premier ætt : un arc fin qui traverse la marge */
  .res-aett--1::before{content:"";position:absolute;z-index:0;left:-24rem;bottom:-12rem;width:44rem;aspect-ratio:1;border-radius:50%;border:1px solid rgba(184,134,78,.24);pointer-events:none}

  /* Deuxième ætt : la colonne de pierre nuit couvre 39 % de la largeur,
     sur toute la hauteur, et se fond sur son dernier pas vers le clair */
  .res-aett--2 .res-aett__tete{padding-bottom:0}
  .res-aett--2 .res-aett__tete::before{display:none}
  .res-aett--2::before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;
    width:calc((100% - min(100%,100rem)) / 2 + min(100%,100rem) * .39);background:var(--res-nuit);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 3.5rem),transparent)}
  .res-aett--2::after{content:"";position:absolute;z-index:1;left:-14rem;bottom:-18rem;width:44rem;aspect-ratio:1;border-radius:50%;border:1px solid rgba(212,164,106,.26);pointer-events:none}
  .res-aett--2 .res-aett__num{color:rgba(226,214,194,.2)}

  /* Troisième ætt : le même mécanisme que les deux premiers (en-tête
     latéral qui accompagne la lecture, colonne dédiée de 39 %), en clair.
     La colonne est le pendant de la colonne nuit : sable minéral, roche
     claire au pied, deux arcs concentriques autour du « 03 ». */
  .res-aett--3 .res-aett__tete{padding-bottom:0}
  .res-aett--3 .res-aett__tete::before{display:none}
  .res-aett--3::before{content:"";position:absolute;z-index:1;top:0;bottom:0;left:0;
    width:calc((100% - min(100%,100rem)) / 2 + min(100%,100rem) * .39);background:var(--res-clair);background-blend-mode:normal,normal,multiply,normal;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3.5rem),transparent),linear-gradient(180deg,#000 calc(100% - 7rem),transparent);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 calc(100% - 3.5rem),transparent),linear-gradient(180deg,#000 calc(100% - 7rem),transparent);mask-composite:intersect}
  .res-aett--3::after{content:"";position:absolute;z-index:1;pointer-events:none;border-radius:50%;
    left:calc((100% - min(100%,100rem)) / 2 + min(100%,100rem) * .085);top:clamp(9.5rem,13vw,13rem);width:clamp(26rem,34vw,34rem);aspect-ratio:1;transform:translate(-50%,-50%);
    border:1px solid rgba(184,134,78,.3);outline:1px dotted rgba(184,134,78,.4);outline-offset:clamp(3.5rem,4.5vw,4.5rem)}
  .res-aett--3 .res-aett__num{color:rgba(160,112,60,.2)}
}
/* Entre 1000 et 1199 px, l'en-tête est moins haut : la pierre, dont la
   largeur suit la hauteur, se décale pour ne pas toucher l'annonce. */
@media(min-width:1000px) and (max-width:1199px){.res-mineral__pierre{left:3%}}
/* Entre 1000 et 1199 px, la colonne des runes est étroite : le numéro
   passe au-dessus du glyphe pour laisser sa largeur au texte ; la
   conclusion prend un peu plus de place pour garder un titre ferme. */
@media(min-width:1000px) and (max-width:1199px){
  .res-suite__in{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .rune{grid-template-columns:calc(var(--res-glyphe) * .66) minmax(0,1fr);grid-template-areas:"num corps" "glyphe corps";grid-template-rows:auto 1fr}
  .rune__num{padding-top:0}
  .rune__glyphe{margin-top:.08em}
}
@media(min-width:1000px) and (max-height:46rem){
  .res-aett__tete{position:relative;top:auto}
}

/* ============================================================
   REPÈRE HISTORIQUE — la bractéate de Vadstena, entre les trois ættir et
   « Pour aller plus loin » : après les vingt-quatre signes, l'objet qui
   les porte. Photographie de musée (Ulf Bruxe / SHM, CC BY 4.0), recadrée
   au carré sans retouche (bin/preparer-image-bracteate.py). Elle reprend
   la note sur les noms reconstruits. Sur téléphone : surtitre et titre,
   photographie, texte, légende.
   ============================================================ */
.res-entry > .res-histoire{margin-top:0}
.res-histoire{padding-block:clamp(3.5rem,6.5vw,5.75rem) clamp(3.5rem,6vw,5.25rem);background:var(--res-papier),linear-gradient(180deg,#F6F1E8,#F7F2EA)}
/* le 3ᵉ ætt se poursuit dans le repère historique : même papier, pas de filet */
.res-entry > .bande.res-aett--3 + .bande.res-histoire{border-top:0}
.res-histoire__in{display:grid;row-gap:clamp(2rem,4.5vw,2.75rem);grid-template-areas:"tete" "objet" "texte" "legende"}
.res-histoire__tete{grid-area:tete}
.res-histoire h2{font-size:clamp(2.2rem,3.3vw,3rem);font-weight:500;line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
.bande .res-histoire h2{margin-bottom:0}
.res-histoire h2::after{content:"";display:block;width:3rem;height:1px;background:var(--or);margin-top:1.5rem}
/* la photographie, cadrée d'un filet cuivre décollé, comme un passe-partout */
.res-entry .res-histoire__objet{grid-area:objet;margin:clamp(.6rem,1vw,.8rem);max-width:30rem;outline:1px solid rgba(184,134,78,.42);outline-offset:clamp(.6rem,1vw,.8rem)}
.res-entry .res-histoire__objet img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:0}
.res-histoire__texte{grid-area:texte;max-width:36rem}
.bande .res-histoire__texte p{max-width:none;font-family:var(--serif);font-size:clamp(1.18rem,1.4vw,1.3rem);line-height:1.6;color:var(--txt)}
.bande .res-histoire__texte p + p{margin-top:1.1rem}
.bande .res-histoire__texte .res-histoire__note{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--acc-bord);font-family:var(--sans);font-size:.92rem;line-height:1.7;color:var(--txt3)}
.res-histoire__note i{font-family:var(--serif);font-size:1.08em}
.bande .res-histoire__legende{grid-area:legende;max-width:31.5rem;font-size:.8rem;line-height:1.6;color:var(--txt3)}
.res-entry .res-histoire__legende a{color:var(--or-texte);border-bottom:1px solid rgba(184,134,78,.35)}
.res-entry .res-histoire__legende a:hover,.res-entry .res-histoire__legende a:focus-visible{border-bottom-color:var(--or-texte)}
@media(min-width:1000px){
  /* la photographie de 15 à 49 % (la ligne des titres d'ætt), le texte de
     56 à 92 % ; titre en haut de la photographie, légende juste dessous */
  .res-histoire .res-histoire__in{max-width:100rem;padding-inline:0;column-gap:0;row-gap:0;align-items:start;
    grid-template-columns:15% minmax(0,34%) 7% minmax(0,36%) 8%;grid-template-rows:auto auto 1fr;
    grid-template-areas:". objet . tete ." ". objet . texte ." ". legende . texte ."}
  .res-entry .res-histoire__objet{margin:0;max-width:none}
  .res-histoire__tete{padding-bottom:clamp(1.75rem,2.6vw,2.4rem)}
  .bande .res-histoire__legende{max-width:none;margin-top:clamp(1.6rem,2.2vw,2rem)}
}

/* ============================================================
   POUR ALLER PLUS LOIN — la frontière entre découvrir et apprendre.
   Trois colonnes : la conclusion, le livre, les ateliers.
   ============================================================ */
.res-entry > .res-suite{margin-top:0}
.res-suite{background:var(--res-papier),linear-gradient(180deg,#F6F0E6,#F3ECE0);border-top:1px solid var(--acc-bord);padding-block:clamp(3.5rem,6vw,5.25rem) clamp(3.5rem,5.5vw,5rem)}
.res-suite .bande__in{max-width:88rem}
.res-suite__in{display:grid;row-gap:clamp(2.75rem,5vw,3.5rem)}
.res-suite__tete{container-type:inline-size}
.res-suite .eyebrow + h2{margin-top:clamp(1.5rem,2.4vw,2rem)}
.res-suite h2{font-size:clamp(1.85rem,6.4cqi,2.4rem);font-weight:500;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.res-suite h2 span{display:block}
.bande .res-suite__tete > p:not(.eyebrow){max-width:34rem;font-family:var(--serif);font-size:1.22rem;line-height:1.55;color:var(--txt)}
.res-suite__tete h2 + p{margin-top:clamp(1.25rem,2vw,1.6rem)}
.res-suite__tete h2 + p::after{content:"";display:block;width:3rem;height:1px;background:var(--or);margin-top:1.75rem}
.bande .res-suite__retour{margin-top:1.5rem}
.res-entry .res-suite .lien a,.res-entry .res-suite__retour a{font-family:var(--serif);font-size:1.15rem;color:var(--or-action);border-bottom:0}
.res-suite .fl{display:inline-block;transition:transform .35s var(--ease)}
.res-suite a:hover .fl,.res-suite a:focus-visible .fl{transform:translateX(4px)}
.res-suite__pistes{display:grid}
.res-suite__piste{display:grid;grid-template-columns:5.5rem minmax(0,1fr);column-gap:1.4rem;align-items:start;padding-block:1.9rem;border-top:1px solid var(--acc-bord)}
.res-entry .res-suite__piste img{width:100%;height:auto;aspect-ratio:240/336;border-radius:2px;box-shadow:0 16px 26px -14px rgba(27,30,43,.5)}
.res-suite__signe{width:5.5rem;height:5.5rem;padding:.9rem;border:1px solid rgba(184,134,78,.5);border-radius:50%;color:var(--or);stroke-width:1.6}
.res-entry .res-suite__piste h3{margin:0;font-size:1.55rem;font-weight:500;line-height:1.15}
.bande .res-suite__piste p{margin-top:.6rem;font-family:var(--serif);font-size:1.12rem;line-height:1.5;color:var(--txt2)}
.bande .res-suite .lien{margin-top:1rem}
@media(min-width:700px){
  .res-suite__pistes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .res-suite__piste{border-top:0;border-left:1px solid var(--acc-bord);padding:.25rem 0 .25rem clamp(1.25rem,2.4vw,2rem)}
  .res-suite__piste + .res-suite__piste{margin-left:clamp(1rem,2vw,1.75rem)}
}
@media(min-width:1000px){
  .res-suite__in{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:clamp(2rem,3.5vw,3.5rem);align-items:center}
  /* une phrase par ligne, comme la maquette : la taille suit la colonne
     (la première phrase mesure 16,7 em) */
  .res-suite h2{font-size:5.6cqi}
  .res-suite h2 span{white-space:nowrap}
  .res-suite__piste{grid-template-columns:minmax(0,1fr);row-gap:1.1rem}
  .res-entry .res-suite__piste img,.res-suite__signe{width:5rem}
  .res-suite__signe{height:5rem}
}
@media(min-width:1280px){
  .res-suite__piste{grid-template-columns:5rem minmax(0,1fr);column-gap:1.25rem}
}
/* La page finit sur cette bande : pas de marge ivoire avant le pied */
.ressource-page .res-entry{padding-bottom:0}

/* ============================================================
   HUB
   ============================================================ */
.res-entry > .res-rubrique{margin-top:clamp(3rem,6vw,4.5rem);padding-block:0;max-width:none}
.res-rubrique h2{margin-top:0;font-size:clamp(2rem,3.4vw,2.7rem)}
.res-entry .res-liste{margin-top:var(--air-titre)}
.res-liste__entree{position:relative;display:grid;overflow:hidden;border:1px solid var(--acc-bord);border-radius:var(--r-bloc);
  background:var(--res-papier),#FBF9F5;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.res-liste__entree:hover,.res-liste__entree:focus-within{border-color:var(--or);box-shadow:var(--ombre-carte)}
/* le même minéral que l'en-tête de la ressource, en bloc sombre */
.res-mineral--liste{display:grid;place-items:center;min-height:13rem;padding:2rem clamp(1.5rem,6cqi,3rem);
  background:
    radial-gradient(70% 50% at 70% 10%,rgba(212,164,106,.12),transparent 70%),
    linear-gradient(180deg,rgba(27,30,43,.8),rgba(19,21,30,.9)),
    var(--res-roche) 40% 50%/cover #1B1E2B}
.res-mineral--liste::before{content:"";position:absolute;z-index:-1;left:-30%;top:50%;width:120%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;border:1px solid rgba(212,164,106,.28)}
.res-mineral--liste .res-tablette{width:100%;max-width:22rem;gap:1.05rem;font-size:clamp(1.3rem,7cqi,2rem)}
.res-mineral--liste .res-tablette span span{color:#D9AE76}
.res-liste__texte{padding:clamp(1.75rem,3.5vw,2.75rem);align-self:center}
.res-liste__texte h3{margin:0;font-size:clamp(1.8rem,2.7vw,2.35rem);line-height:1.1}
.res-entry .res-liste__texte h3 a{color:var(--nuit);border-bottom:0}
.res-liste__texte h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.res-liste__texte h3 a:focus-visible{outline:none}
.res-liste__entree:has(h3 a:focus-visible){outline:2px solid var(--or);outline-offset:3px}
.res-liste__texte p{margin-top:.85rem;max-width:32rem}
.res-liste__texte .lien{margin-top:1.2rem;font-size:.8rem;font-weight:500;letter-spacing:.08em;color:var(--or-action)}
.res-liste__texte .fl{display:inline-block;transition:transform .35s var(--ease)}
.res-liste__entree:hover .fl{transform:translateX(4px)}
@media(min-width:768px){
  .res-liste__entree{grid-template-columns:minmax(0,23rem) minmax(0,1fr)}
  .res-mineral--liste{min-height:17rem}
}

.res-entry > .res-ailleurs{max-width:none;margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--acc-bord)}
.res-ailleurs ul{margin-top:1.1rem;display:grid;gap:0 var(--gouttiere)}
.res-entry .res-ailleurs li{margin:0;padding:1rem 0;border-bottom:1px solid var(--acc-bord)}
.res-entry .res-ailleurs a{font-family:var(--serif);font-size:1.45rem;line-height:1.25;color:var(--txt);border-bottom:0;transition:color .3s}
.res-entry .res-ailleurs a:hover,.res-entry .res-ailleurs a:focus-visible{color:var(--or-texte)}
.res-ailleurs a .fl{font-family:var(--sans);font-size:.9rem;color:var(--or)}
.res-ailleurs span:not(.fl){display:block;margin-top:.3rem;font-size:.95rem;line-height:1.55;color:var(--txt2)}
@media(min-width:900px){
  .res-ailleurs ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* @glyphes — produit par bin/normaliser-glyphes.cjs (ne pas modifier à la main).
   Par rune : échelle uniforme --g-s (cible : encre de 0.74 em de haut,
   exposant 0.6 pour les formes basses, 0.62 em de large au plus) et
   décalage --g-x/--g-y qui centre l'encre dans sa boîte. Lu par les grands
   glyphes, la frise, la tablette et l'annonce des ættir (attribut data-g). */
#fehu,.res-frise a[href="#fehu"],[data-g="ᚠ"]{--g-s:1.022;--g-x:-0.042em;--g-y:-0.032em}
#uruz,.res-frise a[href="#uruz"],[data-g="ᚢ"]{--g-s:1.022;--g-x:-0.005em;--g-y:-0.032em}
#thurisaz,.res-frise a[href="#thurisaz"],[data-g="ᚦ"]{--g-s:1.022;--g-x:-0.024em;--g-y:-0.032em}
#ansuz,.res-frise a[href="#ansuz"],[data-g="ᚨ"]{--g-s:1.022;--g-x:-0.029em;--g-y:-0.032em}
#raidho,.res-frise a[href="#raidho"],[data-g="ᚱ"]{--g-s:1.022;--g-x:-0.032em;--g-y:-0.032em}
#kenaz,.res-frise a[href="#kenaz"],[data-g="ᚲ"]{--g-s:1.501;--g-x:0.001em;--g-y:-0.021em}
#gebo,.res-frise a[href="#gebo"],[data-g="ᚷ"]{--g-s:1.022;--g-x:0em;--g-y:-0.032em}
#wunjo,.res-frise a[href="#wunjo"],[data-g="ᚹ"]{--g-s:1.022;--g-x:-0.032em;--g-y:-0.032em}
#hagalaz,.res-frise a[href="#hagalaz"],[data-g="ᚺ"]{--g-s:1.022;--g-x:0.001em;--g-y:-0.032em}
#nauthiz,.res-frise a[href="#nauthiz"],[data-g="ᚾ"]{--g-s:1.022;--g-x:0.001em;--g-y:-0.032em}
#isa,.res-frise a[href="#isa"],[data-g="ᛁ"]{--g-s:1.022;--g-x:0.001em;--g-y:-0.032em}
#jera,.res-frise a[href="#jera"],[data-g="ᛃ"]{--g-s:1.293;--g-x:0.003em;--g-y:0.124em}
#eihwaz,.res-frise a[href="#eihwaz"],[data-g="ᛇ"]{--g-s:1.022;--g-x:0.001em;--g-y:-0.032em}
#perthro,.res-frise a[href="#perthro"],[data-g="ᛈ"]{--g-s:1.022;--g-x:-0.044em;--g-y:-0.032em}
#algiz,.res-frise a[href="#algiz"],[data-g="ᛉ"]{--g-s:1.022;--g-x:0.001em;--g-y:-0.032em}
#sowilo,.res-frise a[href="#sowilo"],[data-g="ᛊ"]{--g-s:1.022;--g-x:-0.001em;--g-y:-0.032em}
#tiwaz,.res-frise a[href="#tiwaz"],[data-g="ᛏ"]{--g-s:1.022;--g-x:0.001em;--g-y:-0.032em}
#berkana,.res-frise a[href="#berkana"],[data-g="ᛒ"]{--g-s:1.022;--g-x:-0.027em;--g-y:-0.032em}
#ehwaz,.res-frise a[href="#ehwaz"],[data-g="ᛖ"]{--g-s:1.022;--g-x:0.001em;--g-y:-0.032em}
#mannaz,.res-frise a[href="#mannaz"],[data-g="ᛗ"]{--g-s:1.022;--g-x:-0.005em;--g-y:-0.032em}
#laguz,.res-frise a[href="#laguz"],[data-g="ᛚ"]{--g-s:1.022;--g-x:-0.029em;--g-y:-0.032em}
#ingwaz,.res-frise a[href="#ingwaz"],[data-g="ᛜ"]{--g-s:1.615;--g-x:0.001em;--g-y:-0.02em}
#dagaz,.res-frise a[href="#dagaz"],[data-g="ᛞ"]{--g-s:1.022;--g-x:0.001em;--g-y:-0.032em}
#othala,.res-frise a[href="#othala"],[data-g="ᛟ"]{--g-s:1.022;--g-x:0em;--g-y:-0.032em}
/* @glyphes-fin */

/* ============================================================
   MOUVEMENT — passe de finition du 04/10/2026
   Tout repose sur le système .rv du thème (main.js : un bloc reçoit
   .rv-pending à l'approche, puis .in) : aucun script ajouté. Lent,
   discret, une seule fois ; rien sous prefers-reduced-motion (main.js
   n'y pose pas .rv-pending, et la dérive ci-dessous en est exclue).
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  /* le grand numéro se grave de haut en bas, puis le titre, puis le texte */
  :where(.js-animations-ready) .res-aett__num.rv.rv-pending{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
  :where(.js-animations-ready) .res-aett__num.rv.rv-pending.in{clip-path:inset(-.2em -.2em -.2em -.2em)}
  /* le filet cuivre sous le titre se trace après lui */
  :where(.js-animations-ready) .res-aett h2.rv.rv-pending::after,
  :where(.js-animations-ready) .res-histoire__tete.rv.rv-pending h2::after{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .45s}
  :where(.js-animations-ready) .res-aett h2.rv.rv-pending.in::after,
  :where(.js-animations-ready) .res-histoire__tete.rv.rv-pending.in h2::after{transform:none}
  /* la frise : la rangée reste en place, ses huit signes se posent un à un */
  :where(.js-animations-ready) .res-frise.rv.rv-pending{opacity:1;transform:none}
  :where(.js-animations-ready) .res-frise.rv.rv-pending li{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  :where(.js-animations-ready) .res-frise.rv.rv-pending.rv-preparing li{transition:none}
  :where(.js-animations-ready) .res-frise.rv.rv-pending.in li{opacity:1;transform:none}
  .res-frise li:nth-child(2){transition-delay:.06s}.res-frise li:nth-child(3){transition-delay:.12s}.res-frise li:nth-child(4){transition-delay:.18s}
  .res-frise li:nth-child(5){transition-delay:.24s}.res-frise li:nth-child(6){transition-delay:.3s}.res-frise li:nth-child(7){transition-delay:.36s}.res-frise li:nth-child(8){transition-delay:.42s}
  /* les fiches et la photographie : un peu plus lentes que le reste du site */
  :where(.js-animations-ready) .rune.rv.rv-pending{transition-duration:.75s}
  :where(.js-animations-ready) .res-histoire__objet.rv.rv-pending{transform:translateY(18px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
  :where(.js-animations-ready) .res-histoire__objet.rv.rv-pending.in{transform:none}
  :where(.js-animations-ready) .res-histoire__texte.rv.rv-pending{transition-duration:.8s;transition-delay:.22s}

  /* Profondeur : les grands numéros dérivent de quelques pixels pendant
     la traversée de leur section (animation liée au défilement, sans
     script ; ignorée par les navigateurs qui ne la connaissent pas). */
  @supports (animation-timeline:view()){
    .res-aett__num{animation:res-derive linear both;animation-timeline:view(block);animation-range:cover}
    @keyframes res-derive{from{translate:0 1.1rem}to{translate:0 -1.1rem}}
  }
}