/* Lbee : thème unique, toujours sombre. Valeurs issues de docs/brand/tokens.json et des maquettes. */

@font-face { font-family: "Funnel Display"; src: url("/assets/fonts/funnel-display.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  --fond: #1F1F21;
  --surface: #29292C;
  --filet: #3B3B3F;
  --secondaire: #A3A3A8;
  --texte: #F3F3F0;
  --emphase: #FFF759;
  --emphase-survol: #FFFA8A;
  --survol-bouton: #2F2F33;
  --alveole-survol: color-mix(in srgb, var(--filet) 90%, var(--texte)); /* survol : toujours du plus foncé au plus clair */

  --titre: "Funnel Display", system-ui, sans-serif;
  --lecture: "Newsreader", Georgia, serif;

  --marge: 80px;
  --section: 120px;
  --hexagone: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --ease-fond: cubic-bezier(.4, 0, .2, 1);
  --ease-ui: cubic-bezier(.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { background: var(--fond); color: var(--texte); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--titre); font-synthesis: none; }
img, svg { display: block; max-width: 100%; }
.defs { position: absolute; width: 0; height: 0; }
h1, h2, h3, p { margin: 0; }
a { color: var(--texte); text-decoration: none; transition: opacity 200ms var(--ease-ui), background-color 200ms var(--ease-ui), color 200ms var(--ease-ui); }
:focus-visible { outline: 2px solid var(--emphase); outline-offset: 4px; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Mise en page ---------- */
.bande { background: var(--fond); }
.bande.surface { background: var(--surface); }
.conteneur { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--marge); }
.section { padding-block: var(--section); display: flex; flex-direction: column; gap: 56px; }
h2 { font-size: 56px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
.colonnes { display: flex; align-items: flex-start; }

/* ---------- Boutons, liens ---------- */
.bouton, .bouton-2 { display: inline-flex; align-items: center; font-family: var(--titre); font-weight: 600; cursor: pointer; }
.bouton { height: 56px; padding: 0 30px; border: 0; background: var(--emphase); color: var(--fond); font-size: 17px; }
.bouton:hover { background: var(--emphase-survol); color: var(--fond); }
.bouton-2 { height: 52px; padding: 0 24px; border: 1px solid var(--texte); background: transparent; font-size: 16px; }
.bouton-2:hover { background: var(--survol-bouton); }
.principale a, .coordonnees a, .lien-texte { color: var(--secondaire); }
.principale a:hover, .coordonnees a:hover, .lien-texte:hover { color: var(--texte); }
.lien-texte { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hex { display: inline-block; flex-shrink: 0; clip-path: var(--hexagone); }

/* ---------- En-tête ---------- */
.entete .conteneur { height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.logo { width: 86px; height: 30px; }
.principale { display: flex; align-items: center; gap: 36px; font-size: 16px; font-weight: 500; }
@keyframes danse-point { 0%, 84%, 100% { transform: rotate(0deg); } 87% { transform: rotate(-16deg); } 90% { transform: rotate(13deg); } 93% { transform: rotate(-8deg); } 96% { transform: rotate(4deg); } }
.point-logo { transform-box: fill-box; transform-origin: center; animation: danse-point 6s ease-in-out infinite; }
.bouton-menu { display: none; height: 44px; padding: 0 16px; align-items: center; gap: 10px; border: 1px solid var(--filet); background: transparent; font-size: 15px; font-weight: 500; cursor: pointer; }
.bouton-menu:hover { background: var(--surface); }
.bouton-menu .hex { width: 12px; height: 13.9px; background: var(--texte); }
#menu .bouton-menu { display: inline-flex; }
#menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: auto; background: var(--fond); color: var(--texte); }
#menu nav { display: flex; flex-direction: column; gap: 24px; padding: 48px 24px; font-size: 36px; font-weight: 600; letter-spacing: -.02em; }
html:has(#menu:popover-open) { overflow: hidden; }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--filet); }
.pied .conteneur { padding-top: 56px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 48px; }
.pied-ligne { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.pied .logo { width: 68.8px; height: 24px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 28px; font-size: 14px; color: var(--secondaire); }
.pied-liens a { color: var(--secondaire); }
.pied-liens a:hover { color: var(--texte); opacity: 1; }
.signature { font-size: 132px; line-height: .95; font-weight: 300; letter-spacing: -.04em; color: var(--secondaire); opacity: .1; }
/* Texte purement décoratif : posé en contenu généré pour ne pas être contrôlé comme du texte lisible (contraste volontairement faible). */
.signature::before { content: attr(data-texte); }

/* ---------- Contact ---------- */
.contact { gap: 80px; }
.formulaire { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; }
.formulaire .colonnes { gap: 20px; }
.formulaire .colonnes > * { flex: 1 1 0; }
.champ { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 500; }
.champ input, .champ textarea { width: 100%; padding: 0 16px; background: var(--surface); border: 1px solid var(--filet); font-family: var(--lecture); font-size: 18px; }
.champ input { height: 52px; }
.champ textarea { padding: 14px 16px; resize: vertical; }
.champ input:-webkit-autofill { box-shadow: 0 0 0 100px var(--surface) inset; -webkit-text-fill-color: var(--texte); }
.appel { flex: 0 0 400px; display: flex; flex-direction: column; gap: 24px; padding: 32px; background: var(--surface); }
.appel h3 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.appel p { font-family: var(--lecture); font-size: 18px; line-height: 1.5; color: var(--secondaire); }
.appel .bouton-2 { align-self: flex-start; }
.coordonnees { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid var(--filet); font-size: 16px; }

/* ---------- Hero ---------- */
.hero { overflow: clip; }
.hero .conteneur { position: relative; min-height: 804px; padding-bottom: 80px; display: flex; align-items: center; }
.hero-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: min(955px, calc(100% - 440px)); }
h1 { font-weight: 600; }
.hero h1 { font-size: 112px; line-height: .98; letter-spacing: -.04em; }
.fin { white-space: nowrap; }
.point-titre { display: inline-block; width: .15em; height: .17em; margin-left: .06em; background: var(--emphase); clip-path: var(--hexagone); }
.chapeau { max-width: 40rem; font-family: var(--lecture); font-size: 24px; line-height: 1.5; color: var(--secondaire); }
.danse { position: absolute; right: var(--marge); top: 120px; width: 400px; height: 560px; }

/* ---------- Projets : grappe d'alvéoles ---------- */
.projets { gap: 64px; }
.grappe { position: relative; width: 1150px; max-width: 100%; height: 1232px; margin: 0 auto; }
.alveole, .reseau-alveole { width: 320px; height: 369.5px; display: block; background: var(--surface); clip-path: var(--hexagone); }
.alveole { position: absolute; left: var(--x); top: var(--y); transition: background-color 200ms var(--ease-ui); }
.alveole:hover { background: var(--survol-bouton); }
.alveole:focus-visible { outline: none; }
/* Le contour de focus est coupé par la forme hexagonale : on le dessine à l'intérieur, en anneau de 2 px. */
.alveole:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--emphase); pointer-events: none;
  clip-path: polygon(evenodd, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%, 50% 2.31px, calc(100% - 2px) calc(25% + 1.15px), calc(100% - 2px) calc(75% - 1.15px), 50% calc(100% - 2.31px), 2px calc(75% - 1.15px), 2px calc(25% + 1.15px)); }
.couverture { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--filet); transition: background-color 200ms var(--ease-ui); }
.alveole:hover .couverture, .alveole:focus-visible .couverture { background: var(--alveole-survol); }
.alveole-info { position: absolute; left: 36px; right: 36px; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; opacity: 0; transition: opacity 200ms var(--ease-ui); }
.alveole:hover .alveole-info, .alveole:focus-visible .alveole-info { opacity: 1; }
.titre-a { padding: 6px 10px; background: var(--fond); font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.chemin { padding: 4px 8px; background: var(--fond); font-size: 14px; font-weight: 500; color: var(--secondaire); }
.etiquettes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.etiquette { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; background: var(--filet); font-size: 12px; font-weight: 500; }
/* Pollinisation : une ligne relie les points un à un et les allume, puis le réseau apparaît. */
.polle .cv-net { opacity: .06; transition: opacity .3s ease; }
.polle:hover .cv-net, .polle:focus-visible .cv-net { opacity: .24; transition: opacity .6s ease var(--d); }
.polle .cv-path { opacity: .7; }
.polle .seg { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s var(--ease-fond); }
.polle:hover .seg, .polle:focus-visible .seg { stroke-dashoffset: 0; transition: stroke-dashoffset .28s linear var(--d); }
.polle .cv-lit polygon { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity .25s ease, transform .25s ease; }
.polle:hover .cv-lit polygon, .polle:focus-visible .cv-lit polygon { opacity: 1; transform: scale(1); transition: opacity .3s var(--ease-ui) var(--d), transform .45s cubic-bezier(.2, 1.6, .4, 1) var(--d); }

/* ---------- Chiffres ---------- */
.chiffres-bloc { padding-block: 80px; }
.chiffres { display: flex; justify-content: center; align-items: flex-start; gap: 48px; margin: 0; padding: 0; list-style: none; }
.chiffres li { flex: 0 1 18rem; display: flex; flex-direction: column; gap: 12px; padding: 40px 0; }
.chiffre { font-size: 120px; line-height: .9; font-weight: 600; letter-spacing: -.04em; }
.libelle { max-width: 18rem; font-family: var(--lecture); font-size: 20px; line-height: 1.45; color: var(--secondaire); }

/* ---------- Méthode ---------- */
.methode { gap: 48px; }
.methode-corps { display: flex; align-items: flex-start; gap: 64px; }
.etapes { position: relative; flex: 1 1 0; margin: 0; padding: 0; list-style: none; }
.etape { --pt: 36px; position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 40px; padding: var(--pt) 0 96px; }
.etape:first-child { --pt: 32px; }
/* La ligne entre deux repères : un segment par étape, du repère de l'étape à celui de la suivante. */
.etape::before, .etape::after { content: ""; position: absolute; left: 15px; top: calc(var(--pt) + 16px); width: 2px; height: 100%; }
.etape:first-child::before, .etape:first-child::after { height: calc(100% + 4px); }
.etape:last-child::before, .etape:last-child::after { display: none; }
.etape::before { background: var(--filet); }
.etape::after { background: var(--emphase); transform-origin: top; }
.etape-hex { position: relative; width: 28px; height: 32px; margin-left: 2px; background: var(--filet); clip-path: var(--hexagone); }
.etape-allume { position: absolute; inset: 0; background: var(--emphase); }
.etape-texte { display: flex; flex-direction: column; gap: 10px; }
.etape-num { font-size: 15px; color: var(--secondaire); }
.etape h3 { font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.etape p { font-family: var(--lecture); font-size: 20px; line-height: 1.5; }
.etape .toi { color: var(--secondaire); text-align: right; }
.reseau { position: sticky; top: 120px; flex: 0 0 320px; width: 320px; }
.reseau-alveole { position: relative; }
.reseau .alveole-info { top: 43.3%; bottom: auto; justify-content: flex-start; opacity: 1; }
.reseau-alveole .couverture { background: var(--filet); }
.m-ar { stroke: var(--texte); stroke-width: 1.5; opacity: .6; stroke-dasharray: 1; }
.m-no { fill: rgba(163, 163, 168, .6); }
.m-al { fill: var(--emphase); }
.m-no, .m-al { transform-box: fill-box; transform-origin: center; }

/* Le réseau grandit au défilement (animations liées au défilement, Chrome). Chaque étape a sa propre ligne de lecture,
   au milieu de la fenêtre : quand le repère d'une étape l'atteint, la ligne jaune est arrivée, les points de l'étape
   s'allument ; entre deux repères, la ligne avance en même temps que les arêtes et les points de l'étape suivante
   se tracent dans l'alvéole. Sans ces animations, ou avec « réduire les animations », tout reste dans son état final. */
@keyframes allume { from { opacity: 0; transform: scale(.3); } }
@keyframes remplir { from { transform: scaleY(0); } }
@keyframes apparait { from { opacity: 0; } }
@keyframes trace { from { stroke-dashoffset: 1; } }
@keyframes nait { 0%, 55% { opacity: 0; transform: scale(.3); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .methode { timeline-scope: --e0, --e1, --e2, --e3, --e4; }
    .etape { view-timeline: var(--t) block; view-timeline-inset: 0 50%; }
    .etape:nth-child(1) { --t: --e0; }
    .etape:nth-child(2) { --t: --e1; }
    .etape:nth-child(3) { --t: --e2; }
    .etape:nth-child(4) { --t: --e3; }
    .etape:nth-child(5) { --t: --e4; }
    /* --s : position du repère dans l'étape (décalage de la ligne de lecture) ; 100% + 52px : repère de l'étape suivante */
    .etape-allume { animation: allume cubic-bezier(.2, 0, 0, 1) both; animation-timeline: var(--t); animation-range: entry calc(var(--pt) + 16px) entry calc(var(--pt) + 40px); }
    .etape::after { animation: remplir linear both; animation-timeline: var(--t); animation-range: entry calc(var(--pt) + 16px) entry calc(100% + 52px); }
    /* arête k sur n de l'étape : elle se trace pendant la k-ième tranche du trajet de la ligne vers son repère */
    .m-ar, .m-no { animation-timeline: var(--tl); animation-range: entry calc(var(--s) + (100% + 52px - var(--s)) * var(--k) / var(--n)) entry calc(var(--s) + (100% + 52px - var(--s)) * (var(--k) + 1) / var(--n)); }
    .m-ar { animation-name: trace; animation-timing-function: linear; animation-fill-mode: both; }
    .m-no { animation-name: nait; animation-timing-function: linear; animation-fill-mode: both; }
    .m-no0 { animation-range: entry calc(var(--s) - 70px) entry var(--s); }
    .m-al { animation: allume cubic-bezier(.2, 0, 0, 1) both; animation-timeline: var(--tl); animation-range: entry calc(var(--s) + var(--k) * 6px) entry calc(var(--s) + var(--k) * 6px + 26px); }
    .reseau .alveole-info { animation: apparait linear both; animation-timeline: --e4; animation-range: entry 90px entry 140px; }
  }
}

/* ---------- Lucas ---------- */
.lucas { gap: 64px; }
.portrait { flex: 0 0 440px; max-width: 100%; }
.portrait img { width: 100%; height: 550px; object-fit: cover; object-position: 50% 20%; }
.lucas-texte { flex: 1 1 0; display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.pourquoi { display: flex; flex-direction: column; gap: 1.5em; max-width: 40rem; font-family: var(--lecture); font-size: 26px; line-height: 1.5; }
.presentation { max-width: 40rem; font-family: var(--lecture); font-size: 20px; line-height: 1.5; color: var(--secondaire); }
.info-hote { text-decoration: underline dotted rgba(243, 243, 240, .5); text-decoration-thickness: 1px; text-underline-offset: 6px; cursor: help; }
/* Infobulle du texte : au survol, au focus clavier et au toucher (le toucher donne le focus), en CSS seulement. */
.infobulle { position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 4; width: min(340px, 80vw); padding: 16px 18px; background: var(--surface); border: 1px solid var(--filet); font-family: var(--titre); font-size: 15px; line-height: 1.45; font-style: normal; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 200ms var(--ease-ui), transform 200ms var(--ease-ui); }
.info { position: relative; }
.info:hover .infobulle, .info-hote:focus + .infobulle { opacity: 1; transform: none; }
/* Là où l'ancrage CSS existe, l'infobulle reste toujours dans l'écran (elle bascule à gauche ou en dessous si besoin). */
@supports (position-anchor: --x) {
  .info { anchor-scope: --info; }
  .info-hote { anchor-name: --info; }
  @position-try --info-gauche { position-area: top span-left; }
  .infobulle { position: fixed; left: auto; bottom: auto; margin-bottom: 12px; position-anchor: --info; position-area: top span-right; position-try-fallbacks: --info-gauche, flip-block, flip-block --info-gauche; width: min(340px, calc(100vw - 32px)); }
}

/* ---------- Questions ---------- */
.questions { gap: 48px; }
.faq { border-bottom: 1px solid var(--filet); }
.faq details { border-top: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; font-size: 26px; font-weight: 500; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .hex { width: 14px; height: 16px; background: var(--secondaire); transition: background-color 200ms var(--ease-ui); }
.faq summary:hover .hex { background: var(--texte); }
.faq details[open] .hex { background: var(--emphase); }
.faq p { max-width: 44rem; margin-bottom: 28px; font-family: var(--lecture); font-size: 20px; line-height: 1.55; color: var(--secondaire); }

/* ---------- Danse, vol du point, infobulle de la danse (le JavaScript les anime ; sans lui, rien n'apparaît) ---------- */
.danse-plan { position: absolute; inset: 0; transform-origin: 250px 150px; transition: transform 1.2s var(--ease-fond); }
.danse svg { position: absolute; left: 0; top: 0; overflow: visible; }
.danse path { fill: none; stroke: rgba(163, 163, 168, .5); stroke-width: 1.5; stroke-dasharray: 1; }
.danse-point { position: absolute; left: 0; top: 0; width: 20px; height: 23.1px; background: var(--emphase); clip-path: var(--hexagone); offset-rotate: 0deg; opacity: 0; }
.vol { display: none; position: absolute; left: 0; top: 0; width: 16.8px; height: 19px; background: var(--emphase); clip-path: var(--hexagone); transform-origin: 0 0; pointer-events: none; }
.infobulle-danse { position: absolute; z-index: 4; width: 300px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--filet); font-size: 15px; line-height: 1.45; opacity: 0; pointer-events: none; transition: opacity 150ms ease; }

/* ---------- Intro (accueil, une fois par visite) : affichée seulement si le script du head a posé la classe .intro ---------- */
.intro-calque { display: none; }
.intro .intro-calque { display: block; position: fixed; inset: 0; z-index: 100; cursor: pointer; animation: fondu .25s linear 2.25s both; }
.intro-calque svg { width: 100%; height: 100%; }
@keyframes fondu { to { opacity: 0; visibility: hidden; } }
@keyframes apparition { 0% { opacity: 0; transform: scale(.6); } 35%, 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes plongee { to { transform: scale(90); } }
@keyframes ouverture { to { opacity: 1; } }
.ic { transform-box: fill-box; transform-origin: center; animation: apparition 1.1s var(--ease-fond) both; }
.trou { opacity: 0; animation: ouverture .12s linear 1.45s both; } /* le « l » est plein (couleur du fond) jusqu'à la plongée, puis devient transparent */
.zoom { transform-box: view-box; transform-origin: 720px 450px; animation: plongee .95s cubic-bezier(.7, 0, .25, 1) 1.45s both; }

/* ---------- Réglages d'écran (accueil) ---------- */
@media (max-width: 1299px) { .grappe, .reseau { zoom: .85; } }
@media (max-width: 1199px) {
  .danse, .point-titre, .vol, .infobulle-danse { display: none !important; }
  .hero-texte { width: 100%; }
  .hero h1 { font-size: 88px; }
  .grappe, .reseau { zoom: .7; }
}
@media (max-width: 964px) { .grappe, .reseau { zoom: .6; } }
@media (max-width: 859px) {
  .hero .conteneur { min-height: 640px; padding-bottom: 48px; }
  .hero h1 { font-size: 52px; line-height: 1.02; }
  .chapeau { font-size: 20px; }
  .projets { gap: 36px; }
  .grappe { zoom: 1; width: 100%; height: auto; display: flex; flex-direction: column; gap: 12px; }
  .alveole { position: relative; left: auto; top: auto; width: 100%; height: auto; clip-path: none; display: flex; align-items: center; gap: 16px; padding: 12px; }
  .alveole:focus-visible { outline: 2px solid var(--emphase); outline-offset: 4px; }
  .alveole:focus-visible::after { display: none; }
  .couverture { position: relative; flex: 0 0 88px; width: 88px; height: 101.6px; clip-path: var(--hexagone); }
  .alveole-info { position: static; opacity: 1; align-items: flex-start; justify-content: flex-start; text-align: left; }
  .alveole-info > span { padding: 0; background: none; justify-content: flex-start; }
  .alveole .titre-a { font-size: 18px; }
  .polle .seg { stroke-dashoffset: 0; }
  .polle .cv-lit polygon { opacity: 1; transform: none; }
  .polle .cv-net { opacity: .2; }
  .chiffres { flex-direction: column; align-items: stretch; gap: 8px; }
  .chiffres li { flex: 0 0 auto; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 20px 0; }
  .chiffre { font-size: 64px; text-align: right; }
  .libelle { max-width: 12rem; font-size: 18px; }
  .reseau { display: none; }
  .etape { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding-bottom: 56px; }
  .etape h3 { font-size: 28px; }
  .etape .toi { text-align: left; }
  .portrait img { height: 420px; }
  .pourquoi { font-size: 21px; }
  .faq summary { font-size: 20px; }
}

/* ---------- Pages projets ---------- */
.projet-tete { padding-top: 64px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 32px; }
.chemin-page { font-size: 18px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.projet-tete h1 { font-size: 80px; line-height: 1; letter-spacing: -.035em; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.meta .etiquette { height: 28px; padding: 0 12px; font-size: 13px; }
.meta-texte { font-size: 15px; color: var(--secondaire); }
.recit { padding-top: 24px; padding-bottom: 120px; display: flex; justify-content: space-between; align-items: center; gap: 96px; }
.histoire { display: flex; flex-direction: column; gap: 24px; max-width: 44rem; }
.histoire p { font-family: var(--lecture); font-size: 20px; line-height: 1.55; }
.alveole-projet { flex: 0 0 auto; width: 356px; height: 411.1px; background: var(--filet); clip-path: var(--hexagone); }
.alveole-projet .couverture { position: static; }
.nav-projets { padding-block: 64px; }
.pn { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 32px; }
.pn-prec, .pn-suiv { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 18px; font-weight: 600; }
.pn-prec { justify-self: start; }
.pn-suiv { justify-self: end; text-align: right; }
.pn-nom { overflow-wrap: anywhere; }
.fleche { flex-shrink: 0; width: 10px; height: 16px; background: var(--texte); }
.fleche-g { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.fleche-d { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pn-milieu { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pn-points { display: flex; gap: 8px; }
.pn-point { position: relative; width: 18px; height: 20.8px; }
.pn-point::before { content: ""; position: absolute; inset: 0; background: var(--filet); clip-path: var(--hexagone); transition: background-color 200ms var(--ease-ui); }
.pn-point[aria-current] { pointer-events: none; }
.pn-point[aria-current]::before { background: var(--emphase); }
.pn-point:hover::before { background: var(--texte); }
.pn-position { font-size: 14px; color: var(--secondaire); }
.bande.filet-haut { border-top: 1px solid var(--filet); }
.filet-haut .section { gap: 56px; } /* comme la maquette des pages projets, y compris en mobile */
@media (max-width: 859px) {
  .projet-tete, .recit, .nav-projets { padding-block: 72px; }
  .projet-tete h1 { font-size: 40px; line-height: 1.05; }
  .chemin-page { font-size: 16px; }
  .recit { gap: 32px; align-items: flex-start; }
  .histoire p { font-size: 18px; }
  .alveole-projet { display: none; }
  .pn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "milieu milieu" "prec suiv"; gap: 24px 16px; }
  .pn-milieu { grid-area: milieu; }
  .pn-prec { grid-area: prec; font-size: 15px; }
  .pn-suiv { grid-area: suiv; font-size: 15px; }
}

/* ---------- Pages annexes et pages légales ---------- */
.annexe, .legal { padding-block: var(--section); display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.annexe { min-height: 60vh; justify-content: center; }
.annexe h1, .legal h1 { max-width: 20em; font-size: 56px; line-height: 1.05; letter-spacing: -.03em; }
.annexe p, .legal p, .legal dd { font-family: var(--lecture); font-size: 20px; line-height: 1.55; }
.annexe p:not(:last-child) { font-size: 24px; line-height: 1.5; color: var(--secondaire); }
.annexe p:last-child .lien-texte { font-family: var(--titre); font-size: 17px; font-weight: 600; }
.legal { max-width: 1440px; gap: 48px; }
.legal section { display: flex; flex-direction: column; gap: 16px; max-width: 44rem; }
.legal h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
.legal dl { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.legal dl div { display: flex; flex-direction: column; gap: 2px; }
.legal dt { font-size: 15px; font-weight: 500; color: var(--secondaire); }
.legal dd { margin: 0; }

/* ---------- Réglages d'écran ---------- */
@media (max-width: 859px) {
  :root { --marge: 24px; --section: 72px; }
  .section { gap: 36px; }
  h2 { font-size: 36px; }
  .principale { display: none; }
  .bouton-menu { display: inline-flex; }
  .colonnes { flex-direction: column; }
  .colonnes > * { flex: 0 0 auto; width: 100%; }
  .signature { font-size: 56px; }
  .annexe h1, .legal h1 { font-size: 36px; }
  .annexe p:not(:last-child) { font-size: 20px; }
}
@media (min-width: 860px) { #menu { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}