/* C3E2D — le site dans le style de la maquette A2, retenue par Lionel le 20/10/2026 (« On part sur le A », « on garde
   a2 seulement avec la première section (image et titre) de la maquette a3 »). Les couleurs et les polices du site
   d'origine (turquoise du logo, orange des projets, bleu nuit du menu, bleu ardoise des textes ; Roboto, Poppins),
   les titres en bleu nuit (« le titre en vert, ça fait beaucoup de vert »), aucune séparation en trois barres (« je
   n'aime pas les séparations avec les 3 barres horizontales vertes »), le texte justifié, un seul rayon (16 px). */

@font-face { font-family: "Roboto"; src: url("../polices/roboto-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../polices/roboto-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../polices/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../polices/poppins-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../polices/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --turquoise: #199687;        /* le vert du logo : en accent seulement */
  --turquoise-fonce: #127a6e;  /* liens et étiquettes (contraste 5,2) */
  --turquoise-doux: #4a9a8b;
  --turquoise-pale: #eaf5f3;
  --orange: #df7b2e;           /* l'accent du site d'origine : les noms des projets, en grand */
  --orange-fonce: #b05a18;     /* le même en petit texte (contraste 5) */
  --marine: #1c244b;           /* le menu du site d'origine : les titres */
  --ardoise: #324a6d;          /* les textes du site d'origine */
  --ligne: #e2e8ee;
  --fond-doux: #f5f8f8;
  --rayon: 16px;
  --cadre: 1180px;
  --gouttiere: 24px;
  --police-titre: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-texte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ombre: 0 24px 48px -32px rgba(28, 36, 75, .5);
  --survol: 200ms cubic-bezier(.4, 0, .2, 1);
  --entree: cubic-bezier(.2, .7, .2, 1);
  --entete: 101px;             /* hauteur de l'en-tête (bande 4 px + 96 px + filet) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0; background: #fff; color: var(--ardoise); font-family: var(--police-texte); font-size: 1rem; line-height: 1.75; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--turquoise-fonce); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--marine); }
:focus-visible { outline: 2px solid var(--turquoise-fonce); outline-offset: 3px; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
figure { margin: 0; }
/* Justifié comme sur le site d'origine (Lionel, 20/10) ; la césure évite les trous entre les mots. */
.justifie { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cadre { width: 100%; max-width: calc(var(--cadre) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.evitement { position: absolute; left: 16px; top: -64px; z-index: 50; background: var(--turquoise-fonce); color: #fff; padding: 8px 16px; border-radius: 999px; }
.evitement:focus { top: 12px; color: #fff; }

/* ── Titres ─────────────────────────────────────────────────────────────── */
/* Lionel, 20/10 : « et si on mettait le titre en orange ? » — les grands titres en orange (comme les projets), les sous-titres en bleu nuit. */
.titre-page { font-family: var(--police-titre); font-weight: 500; font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -.01em; color: var(--orange); }
.titre-section { font-family: var(--police-titre); font-weight: 500; font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.15; color: var(--marine); }
.titre-projet { font-family: var(--police-titre); font-weight: 500; font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: .03em; color: var(--orange); }
.etiquette { display: block; margin: 0 0 4px; font-family: var(--police-texte); font-size: .6875rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--turquoise-fonce); }

/* ── En-tête : la bande turquoise en haut (Lionel : « pas assez marqué »), le logo dans de l'air ─────── */
.entete { position: sticky; top: 0; z-index: 30; background: #fff; border-top: 4px solid var(--turquoise); border-bottom: 1px solid var(--ligne); transition: box-shadow var(--survol); }
.entete.est-decolle { box-shadow: 0 16px 34px -22px rgba(28, 36, 75, .45); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; padding-block: 16px; }
.entete-logo img { width: 160px; }
.menu { display: flex; align-items: center; gap: 40px; }
.menu a { color: var(--marine); text-decoration: none; font-size: .96875rem; }
.menu > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; }
.menu > li > a:hover, .menu > li > .est-courant, .menu > li > a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.menu-deroulant { position: relative; }
.menu-parent .ico { transition: transform var(--survol); }
.sous-menu {
  position: absolute; top: 100%; left: -16px; min-width: 232px; padding: 8px; margin-top: 4px;
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--survol), transform var(--survol), visibility var(--survol);
}
.menu-deroulant:hover .sous-menu, .menu-deroulant:focus-within .sous-menu { opacity: 1; visibility: visible; transform: none; }
.menu-deroulant:hover .menu-parent .ico, .menu-deroulant:focus-within .menu-parent .ico { transform: rotate(180deg); }
.sous-menu a { display: block; padding: 10px 14px; border-radius: 8px; }
.sous-menu a:hover, .sous-menu a[aria-current="page"] { background: var(--turquoise-pale); color: var(--turquoise-fonce); }
.nav-petite { display: none; }

@media (max-width: 900px) {
  :root { --entete: 89px; }
  .entete-ligne { min-height: 84px; }
  .entete-logo img { width: 136px; }
  .nav-large { display: none; }
  .nav-petite { display: block; }
  .nav-bouton {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px;
    background: var(--fond-doux); color: var(--marine); font-weight: 500; cursor: pointer; list-style: none;
  }
  .nav-bouton::-webkit-details-marker { display: none; }
  .nav-bouton span { width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; }
  .nav-bouton span::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid currentColor; }
  .nav-petite[open] .nav-bouton { background: var(--turquoise-pale); color: var(--turquoise-fonce); }
  .nav-petite nav { position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--gouttiere) 20px; background: #fff; border-bottom: 1px solid var(--ligne); box-shadow: var(--ombre); }
  .nav-petite .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-petite .menu > li > a { display: flex; padding: 14px 0; font-size: 1.0625rem; border-bottom: 1px solid var(--ligne); }
  .nav-petite .menu-parent .ico { display: none; }
  .nav-petite .sous-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 4px 0 8px 12px; margin: 0; min-width: 0; background: none; }
  .nav-petite .sous-menu a { padding: 10px 12px; }
}

/* ── L'accueil ──────────────────────────────────────────────────────────── */
/* L'ouverture (de la maquette A3) : la halle et le titre dans une carte blanche, en bas de la photo.
   Lionel, 20/10 : « trop grand » → carte resserrée ; « que ça prenne toute la page » → la photo remplit presque tout le
   premier écran ; « non au-dessus ça ne va pas », « laisse un espace blanc en dessous pour dire s'il faut scroller,
   avec un truc bien qui indique qu'il faut scroller » → une bande blanche sous la photo (au téléphone, là où se pose la
   barre de Safari) et une pastille à flèche à cheval sur le bord, qui mène à la suite (fixe : pas d'animation en boucle). */
.ouverture { --reste: 96px; position: relative; height: calc(100vh - var(--entete) - var(--reste)); height: calc(100svh - var(--entete) - var(--reste)); min-height: 420px; max-height: 920px; }
@media (max-width: 640px) { .ouverture { --reste: 80px; } }
/* Sous la pastille, le sous-titre « C3E2D » à distance régulière (« adapte bien la hauteur visuellement sous la pastille ») :
   la moitié de la pastille (26 px) + le même espace qu'au-dessus d'elle. */
.ouverture + .centre { margin-top: calc(26px + clamp(28px, 2.8vw, 40px)); }
.bandeau { position: absolute; inset: 0; overflow: hidden; background: var(--fond-doux); }
.bandeau img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% 40%; animation: voile 400ms var(--entree) both; }
.carte-titre { position: absolute; left: 0; right: 0; bottom: clamp(44px, 4.5vw, 64px); z-index: 2; }
.carte-titre-boite { max-width: 680px; padding: clamp(20px, 2.4vw, 32px) clamp(22px, 2.8vw, 40px); background: #fff; border-radius: var(--rayon); box-shadow: 0 24px 48px -30px rgba(28, 36, 75, .45); animation: monter 350ms 150ms var(--entree) both; }
.defiler { position: absolute; left: 50%; bottom: 0; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--turquoise-fonce); box-shadow: 0 12px 26px -12px rgba(28, 36, 75, .55); transform: translate(-50%, 50%); transition: transform var(--survol), color var(--survol), box-shadow var(--survol); animation: arriver-defiler 350ms 550ms var(--entree) both; }
.defiler .ico { width: 22px; height: 22px; stroke-width: 2; }
.defiler:hover, .defiler:focus-visible { color: var(--marine); transform: translate(-50%, calc(50% + 3px)); box-shadow: 0 16px 30px -12px rgba(28, 36, 75, .6); }
@keyframes arriver-defiler { from { opacity: 0; transform: translate(-50%, 10%); } to { opacity: 1; transform: translate(-50%, 50%); } }
/* Le titre composé comme le texte du logo : trois lignes de sens, en capitales légèrement espacées ; la taille suit la
   largeur de l'écran pour que la plus longue ligne (« en Efficacité Énergétique ») tienne toujours sur une ligne. */
.carte-titre .titre-page { font-size: min(2.125rem, calc((100vw - 76px) / 17.5)); line-height: 1.22; letter-spacing: .035em; text-transform: uppercase; }
.carte-titre .titre-page span { display: block; white-space: nowrap; }

/* Lionel, 20/10 : « aligne la taille et disposition des sous-titres aussi » — toutes les sections sur la même grille :
   le sous-titre (même taille partout) dans la colonne de gauche, le contenu à droite, mêmes bords d'une section à l'autre. */
.centre { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 64px; align-items: start; margin-top: clamp(56px, 7vw, 88px); }
.centre p { margin: 0; font-size: 1.0625rem; }
@media (max-width: 860px) { .centre { grid-template-columns: minmax(0, 1fr); } }

/* L'ambition, en bandeau vert pâle */
.ambition { margin-top: clamp(64px, 8vw, 112px); padding: clamp(48px, 6vw, 80px) 0; background: var(--turquoise-pale); text-align: center; }
.ambition p { max-width: 34ch; margin: 0 auto; font-family: var(--police-titre); font-weight: 400; font-size: clamp(1.375rem, 1rem + 1.3vw, 2.125rem); line-height: 1.35; color: var(--marine); text-wrap: balance; }

/* Les projets : une liste de cartes larges, alignées comme un tableau (nom, coordinateur, partenaires) */
.projets { margin-top: clamp(72px, 9vw, 120px); }
.projets-tete { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 64px; align-items: start; margin-bottom: 40px; }
.projets-tete p { margin: 0; }
@media (max-width: 860px) { .projets-tete { grid-template-columns: minmax(0, 1fr); } }
.liste-projets { display: grid; gap: 12px; }
.carte-projet {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) 24px; align-items: center; gap: 28px;
  padding: 20px 28px 20px 20px; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon);
  color: var(--ardoise); text-decoration: none; transition: transform var(--survol), border-color var(--survol), box-shadow var(--survol), background-color var(--survol);
}
.pastille { display: grid; place-items: center; width: 80px; height: 80px; flex: none; border-radius: 50%; background: var(--turquoise-pale); transition: background-color var(--survol), transform var(--survol); }
.pastille img { width: 44px; height: 44px; object-fit: contain; opacity: .8; }
.carte-infos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 5fr); gap: 4px 32px; align-items: center; }
.carte-nom { font-family: var(--police-titre); font-weight: 500; font-size: 1.375rem; letter-spacing: .06em; color: var(--orange-fonce); }
.carte-meta { font-size: .9375rem; line-height: 1.5; }
.carte-projet > .ico { width: 22px; height: 22px; color: var(--turquoise); transition: transform var(--survol); }
.carte-projet:hover, .carte-projet:focus-visible { transform: translateX(4px); border-color: var(--turquoise); box-shadow: var(--ombre); color: var(--ardoise); }
.carte-projet:hover .pastille, .carte-projet:focus-visible .pastille { background: #d7eeea; transform: scale(1.05); }
.carte-projet:hover > .ico { transform: translateX(3px); }
.carte-projet.est-courant { background: var(--fond-doux); border-color: var(--turquoise-pale); }
@media (max-width: 960px) { .carte-infos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .carte-nom { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .carte-projet { grid-template-columns: 56px minmax(0, 1fr) 18px; gap: 16px; padding: 16px 16px 16px 14px; }
  .carte-projet:hover, .carte-projet:focus-visible { transform: none; }
  .pastille { width: 56px; height: 56px; }
  .pastille img { width: 32px; height: 32px; }
  .carte-infos { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .carte-nom { font-size: 1.1875rem; }
  .carte-meta { font-size: .875rem; }
  .carte-projet > .ico { width: 18px; height: 18px; }
}

/* Financement et partenaires, réunis dans une bande douce */
.soutiens { margin-top: clamp(72px, 9vw, 120px); padding: clamp(56px, 7vw, 88px) 0; background: var(--fond-doux); }
.soutiens-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 64px; }
@media (max-width: 960px) { .soutiens-grille { grid-template-columns: minmax(0, 1fr); } }
.financement-logo { width: 100%; max-width: 360px; margin-top: 28px; padding: 20px; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); }
.logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.logos a { display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; border-radius: var(--rayon); }
.financement-lien { display: inline-block; max-width: 360px; border-radius: var(--rayon); }
.financement-lien:hover .financement-logo { border-color: var(--turquoise-doux); box-shadow: var(--ombre); }
.financement-logo { transition: border-color var(--survol), box-shadow var(--survol); }
.logos li { display: grid; place-items: center; height: 120px; padding: 0; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); transition: border-color var(--survol), transform var(--survol), box-shadow var(--survol); }
.logos li:hover { border-color: var(--turquoise-doux); transform: translateY(-3px); box-shadow: var(--ombre); }
@media (max-width: 860px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .logos li { height: 100px; } }

/* ── L'en-tête des autres pages : une bande douce, le fil, le titre ─────────── */
.tete-page { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); background: var(--fond-doux); border-bottom: 1px solid var(--ligne); }
.fil { margin: 0 0 12px; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.fil a { color: var(--turquoise-fonce); text-decoration: none; }
.fil a:hover { color: var(--marine); text-decoration: underline; }

/* ── Les fiches des projets : la description à gauche, la fiche (coordinateur, partenaires) à droite ── */
.fiche-corps { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px 64px; align-items: start; margin-top: clamp(40px, 6vw, 72px); }
.fiche-description .titre-section { margin-bottom: 24px; }
.fiche-description p { font-size: 1.0625rem; }
.fiche-description .chapeau { font-size: 1.1875rem; line-height: 1.7; color: var(--marine); }
.intertitre { margin: 1.8em 0 .6em; font-family: var(--police-titre); font-weight: 500; font-size: 1.25rem; color: var(--marine); }
/* Les longs textes aérés (« ça fait long tout ce texte ») : paragraphes plus courts, lignes moins longues. */
.fiche-description > p:not(.intertitre) { max-width: 70ch; margin-bottom: .95em; }
/* Les sous-projets (STOCC : ses deux axes) en tableau : le nom de l'axe à gauche, son explication à droite (texte
   d'origine). Lionel, 20/10 : « améliore aussi chaque table explicatif des sous-projets ». */
.axes { margin: 8px 0 1.4em; border-top: 1px solid var(--ligne); }
.axe { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--ligne); }
.fiche-description .axe-titre { margin: 0; font-family: var(--police-titre); font-weight: 500; font-size: 1.125rem; line-height: 1.4; color: var(--marine); }
.fiche-description .axe-texte p { margin: 0 0 .85em; font-size: 1rem; }
.fiche-description .axe-texte p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .axe { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.fiche-infos { position: sticky; top: 128px; padding: 28px; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.fiche-infos .pastille { width: 104px; height: 104px; margin-bottom: 24px; }
.fiche-infos .pastille img { width: 60px; height: 60px; opacity: .85; }
.fiche-infos section + section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ligne); }
.fiche-infos p { margin: 0; color: var(--marine); font-weight: 500; }
@media (max-width: 960px) { .fiche-corps { grid-template-columns: minmax(0, 1fr); } .fiche-infos { position: static; } }
.autres-projets { margin-top: clamp(72px, 9vw, 112px); }
.autres-projets .titre-section { margin-bottom: 28px; }

/* ── Contacts et page introuvable ───────────────────────────────────────── */
.page-contenu { margin-top: clamp(40px, 6vw, 72px); }
.contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 880px; }
@media (max-width: 640px) { .contacts { grid-template-columns: minmax(0, 1fr); } }
.contact-carte { padding: 28px; background: #fff; border: 1px solid var(--ligne); border-radius: var(--rayon); transition: border-color var(--survol), box-shadow var(--survol); }
.contact-carte:hover { border-color: var(--turquoise); box-shadow: var(--ombre); }
.contact-nom { margin: 0 0 2px; font-family: var(--police-titre); font-weight: 500; font-size: 1.375rem; color: var(--marine); }
.contact-organisme { margin: 0 0 16px; }
.contact-courriel { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; overflow-wrap: anywhere; }
.bouton { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--turquoise-fonce); color: #fff; font-weight: 500; text-decoration: none; transition: background-color var(--survol); }
.bouton:hover { background: var(--marine); color: #fff; }

/* ── Pied — Lionel, 20/10 : « j'aime pas encore le footer, améliore » : fond blanc (il se détache du bandeau des
   partenaires), une rangée à l'ordinateur — le logo, les projets et les contacts en pastilles —, étiquettes en petites
   capitales, le nom complet pas répété (il est dans le logo). ─────────────────────────────────────────────────── */
.pied { margin-top: clamp(64px, 8vw, 104px); padding: 40px 0 20px; background: #fff; border-top: 1px solid var(--ligne); font-size: .9375rem; }
.pied.apres-bande { margin-top: 0; }
.pied-grille { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 24px 56px; }
.pied-logo img { width: 140px; }
.pied-bloc .etiquette { margin-bottom: 10px; }
.pied-bloc .etiquette a { color: inherit; text-decoration: none; }
.pied-bloc .etiquette a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.pied-liens a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--ligne); border-radius: 999px; color: var(--marine); font-size: .875rem; line-height: 1.3; text-decoration: none; transition: border-color var(--survol), color var(--survol), background-color var(--survol); }
.pied-liens a:hover { border-color: var(--turquoise); color: var(--turquoise-fonce); background: var(--turquoise-pale); }
.pied-droits { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--ligne); font-size: .8125rem; }
@media (max-width: 960px) { .pied-grille { grid-template-columns: minmax(0, 1fr); gap: 22px; } .pied-logo img { width: 124px; } }

@media (max-width: 520px) {
  :root { --gouttiere: 16px; }
  .centre p, .fiche-description p, .fiche-description .chapeau { font-size: 1rem; }
  .fiche-infos, .contact-carte { padding: 22px 18px; }
}

/* ── Mouvement : entrées de 350 ms décalées de 50 ms, rien ne boucle ; coupé si le visiteur demande moins de
   mouvement ; sans JavaScript, rien n'est caché (la classe .js est posée par site.js). ─────────────────────── */
@keyframes monter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes voile { from { opacity: .35; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.tete-page .titre-page, .tete-page .titre-projet { animation: monter 350ms var(--entree) both; }
.js [data-apparition] { opacity: 0; transform: translateY(18px); transition: opacity 350ms var(--entree), transform 350ms var(--entree); }
.js [data-apparition].est-visible { opacity: 1; transform: none; }
.echelonne > :nth-child(2) { transition-delay: 50ms; }
.echelonne > :nth-child(3) { transition-delay: 100ms; }
.echelonne > :nth-child(4) { transition-delay: 150ms; }
.echelonne > :nth-child(5) { transition-delay: 200ms; }
.echelonne > :nth-child(n+6) { transition-delay: 250ms; }
/* Une fois arrivé, l'élément reprend ses transitions ordinaires, sans le décalage de l'entrée. */
.js [data-apparition].est-arrive { transition: transform var(--survol), box-shadow var(--survol), background-color var(--survol), border-color var(--survol); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-apparition] { opacity: 1; transform: none; }
}

/* Le lien « Cookies » du pied (21/10) : le point de séparation vient d'ici, le texte d'origine reste intact */
.pied-cookies::before { content: "·"; display: inline-block; margin: 0 .5em; color: var(--ardoise); text-decoration: none; }

/* La page des cookies (21/10) : une colonne de lecture */
.page-legale { max-width: 760px; }
.page-legale h2 { margin: 2em 0 .6em; }
.page-legale p + p { margin-top: .9em; }