/* nfrancois.fr · mise en page propre au site. Complète assets/nf/ (design system), sans le modifier. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -80px; z-index: 100; background: var(--encre); color: var(--on-encre); padding: var(--space-3) var(--space-4); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--space-4); }

/* Marges sur les côtés, sur mobile : 20 px au lieu des 16 px du design system, plus confortables avec les grands titres
   et les photos pleine largeur. Le panneau du menu suit, pour rester aligné sur le tampon. */
@media (max-width: 759px) { .nf-page { padding-inline: 20px; } }

main { padding-bottom: var(--space-16); }
@media (min-width: 760px) { main { padding-bottom: var(--space-24); } }

/* En-têtes de section : partout le même titre (titre-2) puis le chapeau dessous, alignés à gauche */
/* Rythme vertical : 64 px sur mobile, 96 px dès la tablette, entre les blocs comme entre le filet et le titre */
.nf-section { margin-top: var(--space-16); padding-top: var(--space-16); }
@media (min-width: 760px) { .nf-section { margin-top: var(--space-24); padding-top: var(--space-24); } }
.nf-section__head { grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-12); }
.nf-section__name { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 36px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; }
.nf-section__lead { font-size: 20px; line-height: 1.45; max-width: 36em; }

/* Navigation : groupe de droite et menu mobile plein écran (fonctionne sans JavaScript) */
.nav__droite { display: flex; align-items: center; gap: var(--space-4); }
@media (max-width: 520px) { .nf-nav { gap: var(--space-3); } .nav__droite { gap: var(--space-2); } }
/* Tampon NF un peu plus présent que dans le design system : 34 px à côté du nom, 40 px quand il est seul,
   presque à la hauteur des boutons de la barre */
.nf-nav__id .tampon { width: 34px; }
/* Hauteur en pixels entiers (le dessin reste centré dedans) : centré dans la barre de 80 px, le tampon tombe sur un pixel
   entier. Avec sa hauteur naturelle (28,87 px), il était à 25,56 px, et l'iPhone le redessinait un pixel plus haut à
   l'ouverture du menu, quand la page passe au premier plan. Il garde aussi son propre plan d'affichage en permanence. */
@media (max-width: 860px) {
  .nf-nav__id .tampon { height: 30px; will-change: transform; }
}
/* En-tête compact (mobile, tablette) : le nom à côté du tampon en haut de la page ; quand la barre revient en glissant
   pendant la lecture, le tampon seul, un peu plus grand. Le nom reste lu par les lecteurs d'écran. */
@media (max-width: 860px) {
  .entete.est-epinglee .nav__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .entete.est-epinglee .nf-nav__id .tampon { width: 40px; height: 34px; }
}
/* Accueil sur mobile : le nom est déjà dans la barre juste au-dessus, on ne le répète pas devant le titre. Il reste dans
   le h1 (masqué à l'écran seulement), pour Google et les lecteurs d'écran. */
@media (max-width: 759px) { .hero__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } }
.nav__menu summary { list-style: none; }
.nav__menu summary::-webkit-details-marker { display: none; }
/* Bouton rond à icône, de la même hauteur que « Contact » : trois points pour ouvrir, une croix pour fermer */
.nav__bouton { box-sizing: border-box; width: 43px; height: 43px; min-height: 0; padding: 0; }
.nav__ouvrir, .nav__fermer { display: inline-flex; }
.nav__fermer, .nav__menu[open] .nav__ouvrir { display: none; }
.nav__menu[open] .nav__fermer { display: inline-flex; }
.nav__picto { width: 22px; height: 22px; fill: currentColor; }
.nav__picto--trait { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (min-width: 861px) { .nav__menu { display: none; } }
/* En-tête, sur mobile comme sur ordinateur : au départ il reste dans la page et part normalement avec le défilement.
   Quand on remonte, il revient en glissant depuis le haut de l'écran (« est-epinglee ») ; si on redescend, il repart ;
   revenu tout en haut, il reprend simplement sa place (site.js). Il est hors du conteneur de la page pour rester
   disponible jusqu'en bas, pied de page compris. « sticky » garde sa place dans la page : rien ne saute. */
.entete { position: relative; z-index: 60; background: var(--papier); }
.entete.est-epinglee { position: sticky; top: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.entete.est-epinglee.is-cachee { transform: translateY(-100%); }
.entete.sans-transition { transition: none; }
@media (prefers-reduced-motion: reduce) { .entete.est-epinglee { transition: none; } }
/* Le panneau du menu est dans l'en-tête : le tampon et la croix passent devant lui. Réglé en permanence, et pas
   seulement menu ouvert : sur iPhone, ce changement de plan à l'ouverture faisait remonter le tampon d'un pixel. */
.nf-nav__id, .nav__menu summary { position: relative; z-index: 51; }
/* En-tête compact (tampon et menu) : pas de bouton « Contact », il est déjà dans le menu et dans les pages */
@media (max-width: 860px) { .nf-nav__links { display: none; } }
/* Le filet épais du menu se pose exactement sur le filet fin de la barre (80 px du haut) : à l'ouverture, le filet
   semble s'épaissir */
.nav__panneau { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--papier); padding: 80px var(--space-4) var(--space-12); }
@media (max-width: 759px) { .nav__panneau { padding-inline: 20px; } }
.nav__panneau ul { list-style: none; margin: 0; padding: 0; border-top: var(--rule-strong) solid var(--encre); }
.nav__panneau a { display: block; padding: var(--space-4) 0; border-bottom: var(--rule-thin) solid var(--gris-clair); color: var(--encre); text-decoration: none; font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
/* Sous les rubriques, en petit et soulignés comme dans le pied de page : mentions légales, autre langue, LinkedIn */
.nav__panneau .nav__secondaire { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-8); border-top: 0; }
.nav__panneau .nav__secondaire a { display: inline; padding: 0; border-bottom: 0; font-size: 16px; line-height: 1.5; font-weight: 500; letter-spacing: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Page active : surlignée en jaune, comme le titre de l'accueil ; la bande se trace une fois le menu ouvert.
   Le surlignage déborde un peu du mot : on le compense pour garder le texte aligné à gauche. */
.nav__panneau a[aria-current="page"] span { background: linear-gradient(transparent 56%, var(--jaune) 56%, var(--jaune) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; padding: 0 .06em; margin-left: -.06em; }
html:has(.nav__menu[open]) { overflow: hidden; }
/* Le panneau glisse de la droite vers la gauche à l'ouverture, et repart vers la droite à la fermeture (site.js) */
@media (prefers-reduced-motion: no-preference) {
  .nav__menu[open] .nav__panneau { animation: menu-entree .4s cubic-bezier(.2, .8, .2, 1); }
  .nav__menu[open] .nav__panneau a[aria-current="page"] span { animation: menu-surlignage var(--duree-moyenne) var(--sortie-douce) .3s backwards; }
  .nav__menu.is-fermeture .nav__panneau { animation: menu-sortie .3s cubic-bezier(.5, 0, .75, 0) forwards; }
}
@keyframes menu-entree { from { transform: translateX(100%); } to { transform: none; } }
@keyframes menu-surlignage { from { background-size: 0% 100%; } }
@keyframes menu-sortie { from { transform: none; } to { transform: translateX(100%); } }

/* En-tête des pages intérieures (style titre-1, Hanken Grotesk comme tous les titres à partir de 28 px) */
.page-head { padding-block: var(--space-16) 0; }
/* Sur mobile, 64 px entre le filet de l'en-tête et le surtitre, comme sur l'accueil */
@media (max-width: 759px) { .page-head .nf-label:first-child { margin-top: 0; } }
/* Surtitres (accueil, Interventions, À propos, mentions, 404) : ils portent le nom ou le sujet de la page, donc un cran
   au-dessus des petites étiquettes (14 px) ; la taille du texte courant sur ordinateur, toujours en gris sous le titre */
.nf-hero__title .nf-hero__label, .page-head .nf-label { font-size: 15px; }
@media (min-width: 760px) { .nf-hero__title .nf-hero__label, .page-head .nf-label { font-size: 18px; } }
.page-title { font-family: var(--font-display); font-size: clamp(36px, 5.2vw, 56px); line-height: 1; letter-spacing: -.03em; font-weight: 800; margin: var(--space-4) 0 0; max-width: 16em; text-wrap: balance; }
/* Le surlignage du titre reste d'un seul tenant (« réalité du terrain », « real-world practice ») ; sous 360 px, il peut
   passer sur deux lignes pour ne pas déborder */
@media (min-width: 360px) { .page-title .nf-hl { white-space: nowrap; } }
.page-lead { font-size: 22px; line-height: 1.4; margin: var(--space-6) 0 0; max-width: 34em; }
/* Introductions : lignes équilibrées sur grand écran ; sur mobile, l'équilibrage raccourcissait trop les lignes */
@media (min-width: 760px) { .page-lead, .nf-section__lead { text-wrap: balance; } }
/* Pas de mot seul sur la dernière ligne d'un paragraphe (navigateurs récents ; les autres l'ignorent) */
p { text-wrap: pretty; }

/* Texte courant */
.texte { max-width: var(--measure); }
.texte p { margin: 0 0 var(--space-4); }
.texte p:last-child { margin-bottom: 0; }
/* Mentions légales : une ligne par rubrique, séparées par des filets fins comme les listes d'interventions ;
   dès la tablette, le titre à gauche et le texte à droite */
.legal__ligne { display: grid; gap: var(--space-3); padding-block: var(--space-8); border-bottom: var(--rule-thin) solid var(--gris-clair); }
.legal__ligne:first-child { padding-top: 0; }
.legal__ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.legal__titre { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
@media (min-width: 760px) { .legal__ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-12); } }
/* Identité de l'éditeur : libellé gris, valeur en encre, une information par ligne */
.legal__infos { margin: var(--space-4) 0 0; }
.legal__infos div { display: grid; gap: 0 var(--space-6); padding-block: var(--space-2); }
.legal__infos dt { font-size: 15px; color: var(--gris); }
.legal__infos dd { margin: 0; }
@media (min-width: 560px) { .legal__infos div { grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; } }
.nf-col__texte { font-size: 16px; line-height: 1.5; margin: var(--space-3) 0 0; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-12); }
/* Bouton sous un texte en colonne (À propos, vers le parcours complet sur LinkedIn) : rattaché au texte qu'il prolonge */
.texte .actions { margin-top: var(--space-8); }
.bloc { margin-top: var(--space-12); }

/* Liste en prose : plus petite que le titre de section qui la précède */
.nf-prose { font-size: clamp(22px, 2.6vw, 30px); }

/* Liste en prose sur petit écran : un nom long peut passer à la ligne, la pastille reste collée au premier mot */
@media (max-width: 600px) {
  .nf-prose__item { white-space: normal; }
  .nf-prose__item::before { display: none; }
  .prose__tete { white-space: nowrap; }
  .prose__tete::before { content: ""; display: inline-block; width: .38em; height: .38em; border-radius: 50%; background: var(--encre); margin-right: .26em; vertical-align: .12em; }
}

/* Listes de lignes (interventions, publications) : sous un titre de section, un filet fin suffit */
.nf-fiches { border-top: var(--rule-thin) solid var(--gris-clair); }
.nf-fiche--statique:hover { background: none; }

/* Bande sombre pleine largeur, pour un moment fort (sans débordement horizontal) */
/* Bande encre (IA, Tech & Travel Café) : 96 px d'air en haut et en bas à l'intérieur, sur mobile comme sur ordinateur */
.bande { background: var(--encre); box-shadow: 0 0 0 100vmax var(--encre); clip-path: inset(0 -100vmax); margin-top: var(--space-16); padding-block: var(--space-24); }
@media (min-width: 760px) { .bande { margin-top: var(--space-24); } }
.bande .nf-section { margin-top: 0; padding-top: 0; border-top: 0; }
.nf-dark .nf-btn--primaire .nf-btn__fleche, .nf-dark .nf-btn--primaire:hover .nf-btn__fleche { stroke: var(--on-jaune); }
/* Flèche vers le bas (lien vers une section de la même page, téléchargement) : au survol, elle descend au lieu d'avancer */
.nf-btn:hover .nf-btn__fleche.nf-btn__fleche--bas { transform: translateY(3px); }
.nf-dark .nf-btn--secondaire:hover { background: var(--on-encre); color: var(--encre); }

/* Photo et texte côte à côte */
.duo { display: grid; gap: var(--space-8); }
@media (min-width: 760px) { .duo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; } }
@media (min-width: 760px) { .duo--centre { align-items: center; } }
/* Variante inversée (bloc e-mail de l'accueil) : la photo à gauche, le texte à droite ; sur mobile, le texte reste en premier */
@media (min-width: 760px) {
  .duo--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .duo--inverse > figure { order: -1; justify-self: start; }
}
.duo .nf-section__head { margin-bottom: var(--space-8); }
.duo__photo { margin: 0; justify-self: end; width: 100%; max-width: 440px; }
.duo__photo img { display: block; width: 100%; height: auto; background: var(--gris-clair); }
figure .nf-label { display: block; margin-top: var(--space-2); }
/* Portrait légèrement recadré (15:16), calé sur le haut pour garder la tête */
.duo__photo--haut img { aspect-ratio: 15 / 16; object-fit: cover; object-position: 50% 0%; }
/* Accueil : portrait légèrement recadré (15:16 au lieu de 8:9), calé sur le bas pour garder le micro et le badge ;
   on retire la moitié du fond noir au-dessus de la tête (le fichier reste entier pour À propos) */
.duo__photo--carre img { aspect-ratio: 15 / 16; object-fit: cover; object-position: 50% 100%; }

/* Lignes : la date et le type, en texte, dans la première colonne (même style, le type en encre) */
.fiche__quand { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.fiche__type { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--encre); }
@media (min-width: 760px) {
  .nf-fiche { grid-template-columns: 152px minmax(0, 1fr) 24px; }
  .fiche__quand { flex-direction: column; }
}

/* Bloc e-mail en bas de l'accueil (#contact) */
.contact__mail { display: inline-block; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: var(--encre); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; overflow-wrap: anywhere; }
.contact__mail:hover { background: linear-gradient(transparent 56%, var(--jaune) 56%, var(--jaune) 92%, transparent 92%); }
.contact__mail:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }
.contact__aide { margin: var(--space-8) 0 0; font-size: 20px; line-height: 1.45; max-width: 36em; }
/* Deux informations côte à côte sous la phrase, sans encart */
.contact__infos { margin: var(--space-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); }
.contact__infos dd { margin: var(--space-1) 0 0; }

/* Grille à deux colonnes de même largeur */
@media (min-width: 760px) { .nf-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); } }
.nf-cols--2 .nf-col { border-top: 0; padding-top: 0; }

/* Bandeau de preuve à trois chiffres (sous le titre d'À propos) */
@media (min-width: 760px) { .nf-preuve--3 { grid-template-columns: repeat(3, 1fr); } }
/* Chiffres clés d'À propos centrés entre leur filet et celui de la section suivante, comme le bandeau de l'accueil */
.preuve-page { margin-top: var(--space-12); padding-block: var(--space-12); }
.preuve-page + .nf-section { margin-top: 0; }
/* Groupe de mots à ne pas couper (fin de légende des chiffres) : la ligne se coupe juste avant */
.sans-coupure { white-space: nowrap; }

/* Note en pied de section */
.note { margin: var(--space-8) 0 0; max-width: var(--measure); font-size: 15px; line-height: 1.45; color: var(--gris); }

/* Accueil : références sous le hero */
.nf-hero { padding-block: var(--space-16); }
.nf-hero__title { font-size: clamp(40px, 6.2vw, 76px); }
/* Le petit libellé « Nicolas François · … » fait partie du h1 (le nom y reste pour les moteurs) mais garde son allure de libellé */
.nf-hero__title .nf-hero__label { display: block; font-family: var(--font-sans); }
/* Dès la tablette : « J’aide les pros du tourisme » en première ligne, le surlignage d’un seul tenant en deuxième */
@media (min-width: 760px) { .hero__ligne { display: block; white-space: nowrap; } }
/* Ouverture de l'accueil : le hero et le bandeau remplissent le premier écran (sous la navigation de 81 px),
   le filet de la section suivante n'apparaît qu'au défilement ; l'espace en trop se répartit autour du hero */
.ouverture { display: flex; flex-direction: column; min-height: calc(100vh - 81px); min-height: calc(100svh - 81px); }
.ouverture .nf-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ouverture + .nf-section { margin-top: 0; }
/* Bandeau centré entre son filet et celui de la section suivante ; 4 px de moins au-dessus pour compenser
   optiquement le petit libellé gris, qui donne l'impression de plus d'air en haut */
.references { list-style: none; margin: 0; padding: calc(var(--space-12) - var(--space-1)) 0 var(--space-12); border-top: var(--rule-strong) solid var(--encre); display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .references { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.references li { display: grid; gap: var(--space-1); align-content: start; }
.references__titre { font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.references__texte { font-size: 15px; line-height: 1.45; color: var(--gris); }

/* Accueil : newsletter */
/* Colonne de droite (photos, logo) : même largeur et même axe sur toute la page, calée sur le bord droit */
.newsletter__marque { display: grid; gap: var(--space-8); justify-self: end; width: 100%; max-width: 440px; }
/* Sur grand écran : le bloc logo + chiffre est centré verticalement sur tout le contenu de la bande,
   du titre jusqu'à la ligne LinkedIn (la grille de la section remplace celle du duo) */
@media (min-width: 760px) {
  .bande .nf-section { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--space-12); }
  .duo.newsletter { display: contents; }
  .newsletter > div:first-child { grid-column: 1; grid-row: 1; }
  .newsletter__marque { grid-column: 2; grid-row: 1 / span 2; align-self: center; gap: var(--space-12); }
  .bande__pied { grid-column: 1; grid-row: 2; }
}
/* Sur mobile : le logo d'abord, puis le titre et le texte, le chiffre, et les boutons */
@media (max-width: 759px) {
  .newsletter > div:first-child, .newsletter__marque { display: contents; }
  /* le logo tient lieu de titre : son texte vient juste dessous (16 px au lieu des 32 px entre les autres blocs) */
  .newsletter .newsletter__logo { order: 1; max-width: 200px; margin-bottom: calc(var(--space-4) - var(--space-8)); }
  .newsletter .nf-section__head { order: 2; margin-bottom: 0; }
  .newsletter__chiffre { order: 3; }
  .newsletter .actions { order: 4; margin-top: 0; }
}
.newsletter__logo { display: block; color: var(--on-encre); max-width: 280px; }
.newsletter__logo:focus-visible { outline-offset: 6px; }
.logo-iattc { display: block; width: 100%; height: auto; }
/* Le chiffre posé sous un filet fin, comme dans le bandeau de preuve de la charte */
.newsletter__chiffre { margin: 0; border-top: var(--rule-thin) solid var(--gris); padding-top: var(--space-6); }
.nf-dark .nf-preuve__l { color: var(--gris-sur-encre); }
.bande__pied { margin: var(--space-16) 0 0; font-size: 16px; line-height: 1.5; color: var(--gris-sur-encre); }

/* Photo de section avec légende */
.photo { margin: 0 0 var(--space-12); }
.photo .nf-section__media { margin-bottom: var(--space-3); }
/* Bandeau de la salle de Pau (accueil) : cadré haut, pour garder les deux écrans où l'on voit Nicolas */
.photo .nf-section__media img { object-position: 50% 15%; }

/* Ce que je crois */
.credo__n { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--gris); margin: 0 0 var(--space-3); }



/* Photos : pas de fondu propre à l'arrivée (celui du design system pour les images chargées tard). Le changement de
   page fait déjà apparaître la page en fondu, et les deux à la suite faisaient clignoter les photos sur mobile. */
.nf-motion img[loading="lazy"] { opacity: 1; transition: none; }

/* Interventions : petite galerie de photos sur scène, sous l'introduction */
.galerie-bloc { margin-top: var(--space-16); }
.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
@media (min-width: 760px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } }
/* Sur mobile, trois photos sur deux colonnes : la première prend toute la largeur */
@media (max-width: 759px) { .galerie li:first-child { grid-column: 1 / -1; } }
.galerie figure { margin: 0; }
.galerie img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gris-clair); }

/* Ancre « Me contacter » : défilement doux vers le bloc e-mail (désactivé si l'utilisateur réduit les animations) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#contact { scroll-margin-top: var(--space-6); }

/* Pied de page : le jaune occupe toute la largeur, mais son contenu s'aligne sur la colonne du site (même bord gauche
   que le tampon de l'en-tête et les textes) */
.nf-footer { padding-inline: 0; }
/* Le tampon signe la page, en encre sur le jaune comme l'icône du site (le jaune ton sur ton paraissait délavé). Il se
   trace quand il arrive à l'écran (classes posées par site.js) ; sans JavaScript, il est simplement affiché. Sur mobile,
   il vient sous les liens, avec en dessous la même marge qu'en haut du pied de page. */
.nf-footer__cadre { padding-bottom: var(--space-12); }
/* Mobile : 72 px de haut, seul sur sa ligne sous les liens (environ deux fois le tampon de la barre du haut) */
.nf-footer .tampon--pied { width: 85px; margin-top: var(--space-16); color: var(--on-jaune); }
/* Dès la tablette, une seule bande : les liens à gauche, les mentions à droite, et le tampon tout au bout, comme une
   signature au bas d'une lettre (sans tampon, comme sur la page 404, la ligne de liens reste seule) */
@media (min-width: 760px) {
  .nf-footer__cadre:has(.tampon--pied) { display: flex; align-items: center; gap: var(--space-12); }
  /* 56 px de haut, une fois et demie le tampon de la barre du haut : une signature, pas un second logo */
  .nf-footer .tampon--pied { flex: none; width: 66px; margin: 0; }
  .nf-footer__cadre:has(.tampon--pied) .nf-footer__top { flex: 1; align-items: center; }
}

/* Flèche inclinée des liens externes du pied de page : collée au mot, hors du soulignement, elle monte d'un cran au survol */
.lien-ext { display: inline-block; width: .75em; height: .75em; margin-left: .3em; vertical-align: -.04em; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
a:hover > .lien-ext { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .lien-ext { transition: none; } }

/* ── Pages d'événement (/cotesdarmor/) : les ressources d'une conférence, données en salle par QR code ─────────── */
/* Page d'attente : ce que la page contiendra après la conférence */
/* Photo d'ouverture (phare de Ploumanac'h) : la bande 21/9 de l'accueil, cadrée assez haut pour garder le phare entier */
.evenement-photo { margin: var(--space-12) 0 0; }
.evenement-photo .nf-section__media img { object-position: 50% 20%; }
/* Sur mobile, la bande 21/9 serait trop mince : la photo entière, en 3/2 */
@media (max-width: 759px) { .evenement-photo .nf-section__media { aspect-ratio: 3 / 2; } }
.evenement-attente__liste { margin: var(--space-6) 0 0; padding-left: 1.2em; display: grid; gap: var(--space-2); font-size: 20px; line-height: 1.45; max-width: 36em; }
/* Les trois actions : le numéro sur son pavé jaune (nf-numero), puis le titre et le texte, séparées d'un filet fin */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; }
.etape { display: grid; gap: var(--space-2) var(--space-8); padding-block: var(--space-8); border-top: var(--rule-thin) solid var(--gris-clair); }
.etape:first-child { border-top: 0; padding-top: 0; }
.etape { gap: var(--space-4) var(--space-8); }
@media (min-width: 760px) { .etape { grid-template-columns: 112px minmax(0, 1fr); align-items: start; } }
.etape__corps { display: grid; gap: var(--space-4); max-width: 40em; min-width: 0; }
.etape__corps .nf-col__title { margin: 0; }
.etape__corps > p, .etape__liste { margin: 0; font-size: 18px; line-height: 1.55; }
.etape__liste { padding-left: 1.2em; display: grid; gap: var(--space-1); }
.etape__corps > .etape__astuce { font-size: 15px; line-height: 1.45; color: var(--gris); }
/* Exemple à copier ou à reprendre : un encart clair, comme un champ de saisie */
.exemple { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6); background: var(--papier-clair); border: var(--rule-thin) solid var(--gris-clair); }
.exemple .nf-label, .exemple__texte { margin: 0; }
.exemple__texte { font-size: 20px; line-height: 1.4; font-weight: 500; }
/* Les sources : le chiffre, ce qu'il dit, d'où il vient */
.chiffres { list-style: none; margin: 0; padding: 0; }
.chiffre { display: grid; gap: var(--space-2) var(--space-8); padding-block: var(--space-6); border-bottom: var(--rule-thin) solid var(--gris-clair); }
.chiffre:first-child { padding-top: 0; }
@media (min-width: 760px) { .chiffre { grid-template-columns: 200px minmax(0, 1fr); align-items: baseline; } .chiffre__source { grid-column: 2; } }
.chiffre__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4vw, 44px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chiffre__texte { margin: 0; font-size: 18px; line-height: 1.5; max-width: 40em; }
.chiffre__source { margin: 0; font-size: 15px; line-height: 1.45; color: var(--gris); }
/* Pour aller plus loin : chaque colonne est un lien externe, avec la flèche inclinée */
.lectures { list-style: none; margin: 0; padding: 0; }
.lecture { display: grid; gap: var(--space-2); color: var(--encre); text-decoration: none; }
.lecture .nf-col__title { margin: 0; }
.lecture:hover .nf-col__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lecture:hover .lien-ext { transform: translate(2px, -2px); }
.lecture:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }
/* Votre avis : la note en cinq cases (jaune une fois choisie, chiffre et contour encre), puis les champs du design system ;
   chaque erreur s'affiche sous son champ, et le remerciement remplace le formulaire */
.avis { display: grid; gap: var(--space-8); max-width: 560px; }
.avis__notes { border: 0; margin: 0; padding: 0; min-width: 0; }
.avis__notes legend { padding: 0; margin-bottom: var(--space-3); }
.avis__echelle { display: flex; gap: var(--space-2); }
.avis__echelle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* 52 px contour compris, pour que « Très utile » tombe pile sous le bord droit de la case 5 */
.avis__echelle label { box-sizing: border-box; display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid var(--trait-champ); background: var(--papier-clair); font: 800 20px/1 var(--font-display); cursor: pointer; }
.avis__echelle label:hover { border-color: var(--encre); }
.avis__echelle input:checked + label { background: var(--jaune); border-color: var(--encre); color: var(--on-jaune); }
.avis__echelle input:focus-visible + label { outline: 2px solid var(--encre); outline-offset: 3px; }
.avis__notes--erreur .avis__echelle label { border-color: var(--erreur); box-shadow: inset 0 0 0 1px var(--erreur); }
.avis__notes .nf-field__error { margin-top: var(--space-2); }
.avis__bornes { display: flex; justify-content: space-between; width: calc(5 * 52px + 4 * var(--space-2)); max-width: 100%; margin: var(--space-2) 0 0; font-size: 14px; color: var(--gris); }
.avis__facultatif { font-weight: 400; color: var(--gris); }
/* Chaque case sous ce qu'elle concerne : commentaire et citation, e-mail et newsletter. La signature n'apparaît qu'une
   fois la citation autorisée */
.avis__groupe { display: grid; gap: var(--space-4); }
/* La case « citer » et sa signature : visibles une fois le commentaire commencé (script de la page), la signature
   une fois la citation autorisée */
.avis__citation { display: grid; gap: var(--space-4); }
.avis[hidden], .avis__citation[hidden], .avis__merci[hidden] { display: none; }
.avis__citation:not(:has(#avis-citation:checked)) .avis__signature { display: none; }
/* Rester en contact : la partie facultative, sous un filet fin et un intertitre */
.avis__contact { border-top: var(--rule-thin) solid var(--gris-clair); padding-top: var(--space-6); }
.avis__intertitre { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; }
.avis__merci { max-width: 560px; }
.avis__merci:focus { outline: none; }
.avis__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.avis .note { margin: 0; }
.avis .nf-msg { max-width: none; }
/* Résultats du questionnaire (version « avec ») : le bandeau de chiffres, sans second filet sous le titre */
.nf-section .resultats { border-top: 0; padding-top: 0; }
.resultats__base { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: 12px; color: var(--gris); }
/* Tableau de bord privé des avis (/dashboard/) : une carte par événement, puis le détail de ses avis */
.tdb .nf-msg, .tdb .acces { margin-top: 0; }
.tdb__outils { margin: 0 0 var(--space-8); font-size: 15px; color: var(--gris); }
.tdb__retour { margin: 0 0 var(--space-6); font-size: 15px; }
.tdb .nf-section__name { margin: 0 0 var(--space-8); }
.tdb__evenements, .tdb__repartition, .tdb__liste { list-style: none; margin: 0; padding: 0; }
.tdb__evenements { display: grid; gap: var(--space-8); }
.tdb__evenement { display: grid; gap: var(--space-3); padding-top: var(--space-6); border-top: var(--rule-thin) solid var(--gris-clair); }
.tdb__evenement:first-child { border-top: 0; padding-top: 0; }
.tdb__evenement .nf-col__title, .tdb__evenement .nf-label { margin: 0; }
.tdb__lien { color: var(--encre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tdb__chiffres { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 760px) { .tdb__chiffres { grid-template-columns: auto minmax(0, 320px) minmax(0, 300px); justify-content: start; align-items: center; column-gap: var(--space-12); } }
.tdb__moyenne { margin: 0; display: flex; align-items: baseline; gap: var(--space-1); }
.tdb__sur { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--gris); }
.tdb__repartition { display: grid; gap: 6px; }
.tdb__repartition li { display: grid; grid-template-columns: 16px minmax(0, 1fr) 32px; align-items: center; gap: var(--space-3); font-size: 14px; }
.tdb__barre-note { font-weight: 700; }
.tdb__barre { height: 10px; background: var(--survol); }
.tdb__barre span { display: block; height: 100%; background: var(--jaune); }
.tdb__barre-n { color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; }
/* Avis, commentaires, citations, abonnés : une ligne chacun, chiffre aligné à droite puis libellé, filet entre les lignes */
.tdb__stats { list-style: none; margin: 0; padding: 0; display: grid; }
.tdb__stats li { display: flex; align-items: baseline; gap: var(--space-3); padding-block: var(--space-2); border-top: var(--rule-thin) solid var(--gris-clair); }
.tdb__stats li:last-child { padding-bottom: 0; }
@media (min-width: 760px) { .tdb__stats li:first-child { border-top: 0; padding-top: 0; } }
.tdb__stat-n { flex: 0 0 auto; min-width: 1.3em; text-align: right; font: 800 24px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tdb__stat-l { font-size: 15px; line-height: 1.3; color: var(--gris); }
.tdb__vide { margin: 0; color: var(--gris); }
.tdb__liste { display: grid; }
.tdb__avis-ligne { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-6); border-top: var(--rule-thin) solid var(--gris-clair); }
.tdb__note { box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--encre); color: var(--encre); font: 900 22px/1 var(--font-display); }
.tdb__commentaire { margin: 0 0 var(--space-2); font-size: 18px; line-height: 1.5; max-width: 40em; }
.tdb__infos { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gris); }
.tdb__infos strong { color: var(--encre); font-weight: 600; }
/* Tableau de bord : indicateurs de tête, blocs (mots, citations, temps), fiche de l'événement */
/* Moins d'air entre le titre et le contenu que sur les pages du site : c'est un outil */
.nf-section.tdb { margin-top: var(--space-12); padding-top: var(--space-8); }
.tdb__outils--pied { margin: var(--space-12) 0 0; }
/* Vue d'ensemble : pas de marge en plus sous la dernière carte, avant l'export */
.tdb__evenement .tdb__chiffres { margin-bottom: 0; }
.tdb__bloc:has(+ .tdb__outils--pied) { margin-bottom: 0; }
/* Indicateurs : trois cartes, le pictogramme sur un carré jaune (comme les numéros d'étape) */
.tdb__indicateurs { list-style: none; margin: 0 0 var(--space-16); padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .tdb__indicateurs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tdb__indicateur { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); background: var(--papier-clair); border: var(--rule-thin) solid var(--gris-clair); }
.tdb__picto { display: grid; place-items: center; width: 44px; height: 44px; background: var(--jaune); }
.tdb__picto svg { width: 24px; height: 24px; fill: none; stroke: var(--on-jaune); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tdb__indicateur-l { font-size: 15px; line-height: 1.4; color: var(--gris); }
@media (max-width: 759px) {
  .tdb__indicateur { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); align-items: center; padding: var(--space-4); }
  .tdb__picto { grid-row: span 2; width: 64px; height: 64px; }
  .tdb__picto svg { width: 30px; height: 30px; stroke-width: 1.6; }
  .tdb__indicateur .nf-preuve__n { font-size: 40px; }
}
.tdb__valeur { display: flex; align-items: baseline; gap: var(--space-1); }
/* Nuage de mots : la taille suit la fréquence (--poids de 0 à 1), le plus fréquent surligné */
.tdb__nuage { list-style: none; margin: 0; padding: var(--space-8) var(--space-6); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--space-2) var(--space-6); background: var(--papier-clair); border: var(--rule-thin) solid var(--gris-clair); }
.tdb__nuage-mot { font-family: var(--font-display); font-size: calc(17px + var(--poids) * 31px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: color-mix(in srgb, var(--encre) calc(55% + var(--poids) * 45%), var(--papier)); }
@media (max-width: 759px) { .tdb__nuage { padding: var(--space-6) var(--space-4); gap: var(--space-1) var(--space-4); } .tdb__nuage-mot { font-size: calc(15px + var(--poids) * 19px); } }
.tdb__bloc { margin: 0 0 var(--space-16); }
.tdb__bloc-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.tdb__bloc-tete .tdb__titre { margin: 0; }
.tdb__titre { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 var(--space-2); }
.tdb__aide { margin: 0 0 var(--space-4); font-size: 14px; color: var(--gris); }
/* Page d'une conférence : fil d'Ariane compact, puis le nom et sa fiche dans un encadré clair */
.tdb--conference { margin-top: var(--space-8); }
.tdb--conference .tdb__chiffres { margin-bottom: var(--space-12); }
/* Fil d'Ariane sur une ligne : le nom de la conférence, repris en entier juste en dessous, se coupe au besoin */
.tdb__fil { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-6); font-size: 14px; color: var(--gris); white-space: nowrap; }
.tdb__fil a { flex-shrink: 0; }
.tdb__fil [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--encre); font-weight: 500; }
.tdb__nom { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 var(--space-4); max-width: 22em; }
.tdb__fiche { display: grid; gap: var(--space-2); justify-items: start; margin: 0 0 var(--space-12); padding: var(--space-6); background: var(--papier-clair); border: var(--rule-thin) solid var(--gris-clair); }
.tdb__fiche p { margin: 0; }
.tdb__titre-intervention { font-size: 20px; line-height: 1.35; font-weight: 600; max-width: 34em; }
.tdb__lien-page { font-size: 15px; }
.tdb__export { font-size: 15px; }
/* Carrousel des citations : défilement horizontal aimanté, une citation par vue sur mobile */
.tdb__fleches { display: flex; align-items: center; gap: var(--space-3); }
.tdb__fleche { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--encre); border-radius: var(--radius-full); background: transparent; color: var(--encre); font: 600 18px/1 var(--font-sans); cursor: pointer; }
.tdb__fleche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .16s cubic-bezier(.2, .7, .2, 1); }
.tdb__fleche:hover { background: var(--encre); color: var(--on-encre); }
.tdb__fleche[data-sens="-1"]:hover svg { transform: translateX(-2px); }
.tdb__fleche[data-sens="1"]:hover svg { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .tdb__fleche svg { transition: none; } }
.tdb__fleche:focus-visible, .tdb__citations:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.tdb__compteur { min-width: 3.5em; text-align: center; font-size: 15px; color: var(--gris); font-variant-numeric: tabular-nums; }
.tdb__citations { list-style: none; margin: 0; padding: 0 0 var(--space-2); display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 520px); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.tdb__citation { scroll-snap-align: start; display: grid; align-content: start; gap: var(--space-4); justify-items: start; padding: var(--space-6); background: var(--papier-clair); border: var(--rule-thin) solid var(--gris-clair); }
.tdb__citation blockquote { margin: 0; }
.tdb__citation blockquote p { margin: 0; font-size: 20px; line-height: 1.45; font-weight: 500; }
.tdb__citation blockquote p::before { content: "« "; }
.tdb__citation blockquote p::after { content: " »"; }
.tdb__citation-signature { margin: 0; font-size: 15px; font-weight: 600; }
/* Avis dans le temps : colonnes jaunes sur un axe fin, chiffre au-dessus, moyenne dessous */
.tdb__colonnes { list-style: none; margin: 0; padding: 0 0 22px; display: flex; gap: 2px; overflow-x: auto; }
.tdb__col { position: relative; flex: 1 1 0; min-width: 36px; display: grid; grid-template-rows: 150px auto auto; justify-items: center; font-size: 13px; }
.tdb__col--vide { flex: 0 0 28px; min-width: 28px; }
.tdb__col-zone { align-self: stretch; justify-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: var(--rule-thin) solid var(--trait-champ); }
.tdb__col--vide .tdb__col-zone { border-bottom-style: dashed; }
.tdb__col-n { font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.tdb__col-barre { display: block; width: 100%; max-width: 40px; background: var(--jaune); }
.tdb__col-h { margin-top: 6px; color: var(--encre); white-space: nowrap; }
.tdb__col-moy { color: var(--gris); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.tdb__col-jour { position: absolute; left: 0; top: 100%; color: var(--gris); white-space: nowrap; font-size: 12px; }
@media (max-width: 759px) { .tdb__titre { font-size: 22px; } .tdb__citation blockquote p { font-size: 18px; } .tdb__indicateurs { margin-bottom: var(--space-12); } }
/* Accès aux résultats complets : le code, en capitales et bien espacé, puis le bouton */
.acces { display: grid; gap: var(--space-6); max-width: 420px; margin-top: var(--space-12); }
.acces__code { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }

/* Flèche des lignes d'interventions : un peu plus grande et plus marquée que celle du design system */
.nf-fiche__arrow { width: 24px; height: 24px; stroke-width: 2.25; }

/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media (max-width: 759px) {
  /* Rythme vertical : 32 px entre un titre et son contenu, entre deux blocs d'une section et avant un bouton ;
     48 px avant une photo, pour qu'un bouton reste rattaché à son texte et non à l'image qui suit */
  .nf-section__head, .duo:not(.newsletter) .nf-section__head { margin-bottom: var(--space-8); }
  .actions, .bloc { margin-top: var(--space-8); }
  .photo { margin-bottom: var(--space-8); }
  .duo:not(.newsletter) { row-gap: var(--space-12); }
  .bande__pied { margin-top: var(--space-8); }
  /* Légendes des photos (crédits, lieux) plus discrètes sur petit écran */
  figcaption.nf-label { font-size: 12px; }
  /* « Ce que je crois » : chaque conviction sous un filet fin, son numéro collé au titre, pour bien les grouper */
  .nf-cols--2 { gap: var(--space-8); }
  .nf-cols--2 .nf-col { border-top: var(--rule-thin) solid var(--gris-clair); padding-top: var(--space-6); }
  .credo__n { margin-bottom: var(--space-1); }
  /* Titre de l'accueil : une idée par ligne (les <br class="hero__br"> ne servent que sur mobile) */
  .nf-hero__title { font-size: min(40px, 11.5vw); text-wrap: wrap; }
  /* Le surlignage commence une ligne : on compense son petit débord pour que le texte reste aligné à gauche */
  .nf-hero__title .nf-hl, .page-title .nf-hl { margin-left: -.06em; }
  /* Bande newsletter : le logo juste au-dessus dit déjà le nom ; le titre reste pour les lecteurs d'écran */
  .newsletter .nf-section__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  /* Listes d'interventions : la flèche monte en haut à droite, sur la ligne de la date, au lieu d'occuper une ligne */
  .nf-fiche { position: relative; }
  .nf-fiche .fiche__quand { padding-right: var(--space-8); }
  .nf-fiche > .nf-fiche__arrow { position: absolute; top: calc(var(--space-6) - 4px); right: var(--space-2); }
  .nf-fiche--statique > span:last-child { display: none; }
  /* Chiffres d'À propos : une ligne par chiffre, le libellé à droite, séparés par des filets fins */
  .nf-preuve--3 { grid-template-columns: 1fr; gap: 0; }
  .nf-preuve--3 > div { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr); align-items: center; gap: var(--space-4); padding-block: var(--space-6); border-bottom: var(--rule-thin) solid var(--gris-clair); }
  .nf-preuve--3 > div:first-child { padding-top: 0; }
  .nf-preuve--3 > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .nf-preuve--3 .nf-preuve__l { margin-top: 0; }
  /* Pied de page : les trois liens en colonne, puis une ligne discrète pour les mentions, la langue et l'année */
  .nf-footer__top { flex-direction: column; gap: var(--space-8); }
  .nf-footer__top > .nf-footer__cols:first-child { flex-direction: column; align-items: flex-start; gap: var(--space-4); font-size: 18px; }
  .nf-footer__top > .nf-footer__cols:last-child { gap: var(--space-2) var(--space-6); padding-top: var(--space-6); border-top: var(--rule-thin) solid rgba(26, 26, 26, .25); font-size: 14px; }
}
@media (min-width: 760px) { .hero__br { display: none; } }

/* ── Changement de page ─────────────────────────────────────────────────────── */
/* Comme dans une app : la page quittée s'efface, la suivante apparaît en montant de quelques pixels ; l'en-tête reste
   en place. Navigateurs récents (Chrome, Edge, Safari 18.2+) ; ailleurs, la page change normalement. */
@view-transition { navigation: auto; }
.entete { view-transition-name: entete; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: .2s ease-in both page-sortie; }
  ::view-transition-new(root) { animation: .45s cubic-bezier(.2, .8, .2, 1) both page-entree; }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@keyframes page-sortie { to { opacity: 0; } }
@keyframes page-entree { from { opacity: 0; transform: translateY(16px); } }


/* ── Tampon NF dessiné ──────────────────────────────────────────────────────── */
/* Le tampon est un seul trait continu (le N, puis la barre du F) et un point : on le trace comme une ligne d'encre.
   En-tête : il se dessine en 0,75 s à chaque page. Page 404 : « tampon--lent », en grand, comme une signature.
   Pied de page : « tampon--pied », tracé en 1,4 s quand il arrive à l'écran.
   « tampon--chargement » : en boucle, comme indicateur de chargement (aussi en fichier autonome : assets/nf-chargement.svg). */
.tampon { display: block; width: 34px; height: auto; overflow: visible; color: var(--encre); }
.tampon__trait { fill: none; stroke: currentColor; stroke-width: 65.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.tampon__point { fill: currentColor; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .tampon__trait { animation: tampon-trace .75s cubic-bezier(.65, 0, .35, 1) .15s backwards; }
  .tampon__point { animation: tampon-point .38s cubic-bezier(.2, .8, .2, 1) .84s backwards; }
  .tampon--lent .tampon__trait { animation-duration: 1.9s; animation-delay: .3s; }
  .tampon--lent .tampon__point { animation-delay: 2.14s; }
  .tampon--pied .tampon__trait, .tampon--pied .tampon__point { animation: none; }
  /* en attente, il est masqué en entier (un trait effacé laisserait voir son bout arrondi) */
  .tampon--pied.est-en-attente { visibility: hidden; }
  .tampon--pied.est-trace .tampon__trait { animation: tampon-trace 1.4s cubic-bezier(.65, 0, .35, 1) backwards; }
  .tampon--pied.est-trace .tampon__point { animation: tampon-point .38s cubic-bezier(.2, .8, .2, 1) 1.34s backwards; }
  .tampon--chargement .tampon__trait { animation: tampon-boucle 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
  .tampon--chargement .tampon__point { animation: tampon-battement 2.2s ease-in-out infinite; }
}
/* Mouvement réduit : le chargement reste signalé, par une simple pulsation du tampon entier */
@media (prefers-reduced-motion: reduce) { .tampon--chargement { animation: tampon-pulsation 1.2s ease-in-out infinite alternate; } }
@keyframes tampon-trace { from { stroke-dashoffset: 1; } }
@keyframes tampon-point { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/* Boucle : le trait se dessine, reste un instant, puis s'efface par son début ; le point bat quand le trait est complet */
@keyframes tampon-boucle { 0% { stroke-dashoffset: 1; } 45%, 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes tampon-battement { 0%, 38% { transform: scale(0); opacity: 0; } 48% { transform: scale(1.2); opacity: 1; } 56%, 66% { transform: scale(1); opacity: 1; } 80%, 100% { transform: scale(0); opacity: 0; } }
@keyframes tampon-pulsation { to { opacity: .3; } }
/* Changement de page : la barre du haut apparaît telle quelle, pour que son tampon se dessine sans fondu par-dessus */
::view-transition-old(entete) { display: none; }
::view-transition-new(entete) { animation: none; }
/* Page 404 : le message à gauche, le tampon tracé à droite (ordinateur seulement) */
.page-head--404 { display: grid; gap: var(--space-8); }
/* Sur mobile, le grand tampon n'apporte rien sous le texte : la page garde la signature du pied, comme les autres */
@media (max-width: 759px) { .page-head--404 .tampon { display: none; } }
@media (min-width: 760px) {
  .page-head--404 { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-16); }
  .page-head--404 .tampon { width: clamp(160px, 20vw, 260px); }
  /* Le grand tampon signe déjà la page : pas de second dans le pied */
  body:has(.page-head--404) .tampon--pied { display: none; }
}