/* ==========================================================
   TABLEAU DE BORD
   Toutes les valeurs réglables du site sont ici, et seulement ici.
   Change une valeur, enregistre, actualise la page.
   ========================================================== */

:root {

  /* Palette */
  --bleu:  #2AAAE2;
  --rouge: #E03426;
  --vert:  #2BA84A;
  --rose:  #F07CF0;
  --noir:  #111110;
  --blanc: #FFFFFF;

  /* Barre de navigation */
  --nav-hauteur: 48px;              /* hauteur totale de la barre */
  --nav-marge-cotes: 45px;          /* espace entre le bord de l'écran et le texte */
  --nav-taille-texte: 21px;         /* taille des trois liens */
  --nav-fond: var(--blanc);
  --nav-couleur-texte: var(--noir);
  --nav-couleur-projets: var(--rose);   /* « Projets » actif ou survolé */
  --nav-couleur-infos: var(--rouge);    /* « Infos » actif ou survolé */
  --nom-lettre-maintien: 0.3s;      /* temps pendant lequel une lettre du nom garde sa couleur */

  /* Pointillés */
  --filet-couleur: var(--noir);
  --filet-point: 1.8px;             /* diamètre d'un point du filet */
  --filet-espace: 4px;              /* distance d'un point au suivant */
  --formes-point: 3px;              /* diamètre d'un point des étoiles, cadres, badges */
  --formes-espace: 7px;             /* distance d'un point au suivant */

  /* Bandes latérales */
  --bande-largeur: 7px;
  --bande-1: var(--bleu);           /* de haut en bas */
  --bande-2: var(--rouge);
  --bande-3: var(--vert);
  --bande-4: var(--rose);

  /* Texte courant */
  --texte-taille: 18px;
  --texte-interligne: 1.35;
  --texte-couleur: var(--noir);

  /* Curseur */
  --curseur-taille: 14px;
  --curseur-couleur: var(--noir);   /* couleur au repos */
  --curseur-inertie: 0.22;          /* 1 = colle à la souris, 0.1 = très en retard */
  --curseur-sur-rose:  var(--vert); /* couleur du curseur selon l'élément survolé */
  --curseur-sur-bleu:  var(--rose);
  --curseur-sur-rouge: var(--bleu);
  --curseur-sur-vert:  var(--rouge);

  /* Rythme des animations */
  --transition-rapide: 0.35s;       /* réactions au survol, au clic */
  --transition-lente: 0.8s;         /* apparitions de panneaux */
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);   /* départ vif, arrivée tout en douceur */

  /* Page Infos (tailles en pixels de maquette) */
  --infos-texte-taille: 18;         /* texte « à propos » */
  --infos-titres-taille: 21;        /* « à propos », « formation »… */
  --infos-colonnes-taille: 16;      /* contenu des colonnes */
  --infos-badges-taille: 44;        /* taille par défaut du texte dans les badges */
  --flottement-amplitude: 1;        /* 1 = normal, 2 = flotte deux fois plus loin, 0 = immobile */
  --lien-survol-echelle: 1.05;      /* grossissement d'un badge-lien au survol */
  --copyright-taille: 13px;         /* « © 2026 Emma Roucher » */
  --retour-taille: 34px;            /* diamètre du rond « ← » de retour aux projets */
  --deriver-vitesse: 14;            /* vitesse de dérive des badges, en pixels par seconde (0 = immobiles) */
  --colonne-duree: 0.7s;            /* dépliage d'une colonne */
  --cascade-mot: 12ms;              /* écart entre l'apparition de deux mots du texte */
  --entree-duree: 0.9s;             /* apparition des formes à l'arrivée sur la page */
  --fleche-decalage: 6px;           /* glissement de la flèche au survol */

  /* Page Projets (tailles en pixels de maquette) */
  --projets-intro-largeur: 833;     /* espace vide avant le premier panneau */
  --projets-intro-petit: 38;        /* « Ici on explore des univers, » */
  --projets-intro-grand: 66;        /* la grande phrase */
  --projets-intro-interligne: 1.08;
  --panneau-largeur: 1120;          /* largeur des panneaux */
  --panneau-attente: #EDEDEA;       /* fond provisoire tant qu'il n'y a pas d'image */
  --panneau-couleur-duree: 0.5s;    /* apparition de la couleur au survol */
  --panneau-infos-decalage: 14px;   /* montée des informations au survol */
  --panneau-etoile-taille: 118;     /* étoile numérotée, en pixels de maquette */
  --panneau-numero-taille: 70;
  --panneau-titre-taille: 44;
  --panneau-categorie-taille: 28;
  --panneau-annee-taille: 22;
  --scroll-vitesse: 1;              /* multiplie la distance parcourue à chaque scroll */
  --scroll-douceur: 0.08;           /* 1 = sec, 0.05 = très glissé */

  /* Pages projet */
  --pied-hauteur: 48px;             /* hauteur de la barre du bas */
  --pied-taille-titre: 21px;        /* titre et flèches */
  --pied-taille-details: 18px;      /* client, année, projet, description */
  --pied-colonne-fiche: 40%;        /* largeur de la colonne Client / Année / Projet */
  --video-bouton-taille: 38px;      /* diamètre de la pastille du son sur les vidéos */

  /* Étoiles pointillées */
  --etoiles-rotation-duree: 40s;    /* durée d'un tour complet des étoiles */

  /* Version verticale (téléphone, tablette en portrait) */
  --m-nav-hauteur: 84px;
  --m-nav-marge: 11vw;
  --m-nav-taille-nom: clamp(22px, 7vw, 36px);
  --m-nav-taille-liens: clamp(16px, 4.9vw, 26px);
  --m-filet-point: 2.4px;
  --m-filet-espace: 5.5px;
  --m-bande-periode: 100svh;        /* hauteur d'un cycle bleu, rouge, vert, rose des bandes */
  --m-intro-haut: 7vw;              /* espace entre la barre et le texte d'introduction */
  --m-intro-espace: 52vw;           /* hauteur libre avant le premier panneau */
  --m-panneau-ratio: 4 / 5;         /* proportions des panneaux de la page Projets (largeur / hauteur) */
  --m-pied-hauteur: 84px;
  --m-pied-taille: clamp(15px, 4.6vw, 24px);
  --m-pied-details: clamp(14px, 3.9vw, 19px);
  --m-infos-texte-taille: 44;       /* texte « à propos » sur téléphone, en pixels de la maquette téléphone */
  --m-flottement-amplitude: 0.5;    /* flottement plus discret sur petit écran */         /* texte de présentation, en pixels de la maquette téléphone */

  /* Réglages des étapes suivantes (déjà prêts, pas encore utilisés) */
  --flottement-duree: 12s;          /* durée d'une oscillation des badges de la page Infos */
}


/* ==========================================================
   POLICE : BBB ReadMe
   ========================================================== */

@font-face { font-family: "BBB ReadMe"; src: url("../fonts/bbbreadme-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BBB ReadMe"; src: url("../fonts/bbbreadme-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "BBB ReadMe"; src: url("../fonts/bbbreadme-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "BBB ReadMe"; src: url("../fonts/bbbreadme-semibolditalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "BBB ReadMe"; src: url("../fonts/bbbreadme-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "BBB ReadMe"; src: url("../fonts/bbbreadme-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "BBB ReadMe"; src: url("../fonts/bbbreadme-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "BBB ReadMe"; src: url("../fonts/bbbreadme-blackitalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }


/* ==========================================================
   BASE
   ========================================================== */

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

html, body { margin: 0; padding: 0; height: 100%; }

/* Empêche le geste « page précédente » du trackpad quand on fait glisser les projets */
html, body { overscroll-behavior-x: none; }

body {
  font-family: "BBB ReadMe", Georgia, serif;
  font-size: var(--texte-taille);
  line-height: var(--texte-interligne);
  color: var(--texte-couleur);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

a:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 4px;
}


/* ==========================================================
   BARRE DE NAVIGATION
   ========================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-hauteur);
  padding: 0 var(--nav-marge-cotes);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nav-fond);
  color: var(--nav-couleur-texte);
  font-size: var(--nav-taille-texte);
  font-style: italic;
  font-weight: 400;
}

/* Filet pointillé sous la barre */
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--filet-point);
  background-image: radial-gradient(circle, var(--filet-couleur) calc(var(--filet-point) / 2), transparent calc(var(--filet-point) / 2 + 0.5px));
  background-size: var(--filet-espace) var(--filet-point);
  background-repeat: repeat-x;
}

.nav a {
  transition: color var(--transition-rapide) var(--courbe);
}

.nav-nom { font-weight: 700; }

/* Chaque lettre du nom prend une couleur au hasard au passage de la souris */
.nav-nom .lettre {
  transition: color var(--transition-lente) var(--courbe);   /* retour au noir tout en douceur */
}
.nav-nom .lettre.allumee {
  color: var(--c);
  transition-duration: 0.12s;                                /* allumage presque immédiat */
}

/* « Projets » reste centré quelle que soit la longueur du nom */
.nav-projets {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Page active : gras et couleur */
.nav-projets.actif { font-weight: 700; }
.nav-infos.actif   { font-weight: 700; }

/* Couleur au survol et sur la page active */
.nav-projets.actif, .nav-projets:hover { color: var(--nav-couleur-projets); }
.nav-infos.actif,   .nav-infos:hover   { color: var(--nav-couleur-infos); }


/* ==========================================================
   BANDES LATÉRALES
   ========================================================== */

.bande {
  position: fixed;
  top: var(--nav-hauteur);
  bottom: 0;
  width: var(--bande-largeur);
  z-index: 90;
  background: linear-gradient(
    to bottom,
    var(--bande-1) 0 25%,
    var(--bande-2) 25% 50%,
    var(--bande-3) 50% 75%,
    var(--bande-4) 75% 100%
  );
}

.bande-gauche { left: 0; }
.bande-droite { right: 0; }


/* ==========================================================
   ZONE DE CONTENU
   ========================================================== */

.contenu {
  position: fixed;
  top: var(--nav-hauteur);
  bottom: 0;
  left: var(--bande-largeur);
  right: var(--bande-largeur);
}


/* ==========================================================
   FORMES POINTILLÉES (étoiles, cadres, badges)
   Tout tracé SVG portant la classe « pointille »
   devient une ligne de points ronds.
   ========================================================== */

.pointille {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--formes-point);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0 var(--formes-espace);
  vector-effect: non-scaling-stroke;   /* garde la même taille de points quelle que soit la taille de la forme */
}


/* ==========================================================
   CURSEUR PERSONNALISÉ
   Actif uniquement avec une souris ou un trackpad.
   ========================================================== */

.curseur {
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  width: var(--curseur-taille);
  height: var(--curseur-taille);
  margin: calc(var(--curseur-taille) / -2) 0 0 calc(var(--curseur-taille) / -2);
  border-radius: 50%;
  background: var(--curseur-couleur);
  pointer-events: none;
  opacity: 0;
  transition:
    background-color var(--transition-rapide) var(--courbe),
    opacity var(--transition-rapide) var(--courbe);
}

.curseur.visible { opacity: 1; }

.curseur-actif,
.curseur-actif * { cursor: none !important; }


/* ==========================================================
   PAGE INFOS
   Une « scène » aux proportions de la maquette (1426 × 872),
   posée en bas de l'écran et redimensionnée selon la fenêtre.
   À gauche le texte, à droite les badges et le portrait.
   ========================================================== */

.page-infos {
  container-type: size;
  overflow-x: hidden;
  overflow-y: auto;   /* si les colonnes dépliées dépassent, la page défile */
}

.infos-scene {
  --u: min(calc(100cqw / 1426), calc(100cqh / 872));   /* 1 pixel de maquette */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* Sur ordinateur, ces deux groupes ne sont que des rangements :
   leurs éléments se placent directement dans la scène */
.infos-haut, .infos-bas { position: static; }

/* ---------- Badges, cadres, formes ---------- */

/* Les formes se placent depuis le bord droit et le bas de l'écran,
   le texte depuis le bord gauche : l'espace libre se répartit au milieu */
.infos-el {
  position: absolute;
  display: block;
  left: calc(100% - (1426 - var(--x)) * var(--u));
  top: calc(100% - (872 - var(--y)) * var(--u));
  width: calc(var(--w) * var(--u));
  user-select: none;
  -webkit-user-select: none;
  animation: forme-apparait var(--entree-duree) cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(0.25s + var(--ordre, 0) * 0.11s);
}

@keyframes forme-apparait {
  from { opacity: 0; transform: scale(0.55) rotate(-10deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.infos-el[data-couleur="rose"]  { color: var(--rose); }
.infos-el[data-couleur="bleu"]  { color: var(--bleu); }
.infos-el[data-couleur="rouge"] { color: var(--rouge); }
.infos-el[data-couleur="vert"]  { color: var(--vert); }

.parallaxe { will-change: transform; }

.forme {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Flottement lent, chaque élément avec son propre décalage */
.flotte {
  animation: flotter var(--flottement-duree) ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}

@keyframes flotter {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(calc(var(--fx) * var(--flottement-amplitude)), calc(var(--fy) * 0.4 * var(--flottement-amplitude))) rotate(var(--fr)); }
  66%  { transform: translate(calc(var(--fx) * 0.3 * var(--flottement-amplitude)), calc(var(--fy) * var(--flottement-amplitude))) rotate(calc(var(--fr) * -0.5)); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* L'étoile rouge tourne sur elle-même */
.etoile-tourne .forme {
  animation: tourner var(--etoiles-rotation-duree) linear infinite;
}

@keyframes tourner {
  to { transform: rotate(360deg); }
}

.survol {
  position: relative;
  transition: transform var(--transition-rapide) var(--courbe);
}

.badge-texte {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  white-space: nowrap;
  font-size: calc(var(--taille, var(--infos-badges-taille)) * var(--u));
  font-style: italic;
  font-weight: 700;
  line-height: 1.12;
  transform: rotate(var(--rot, 0deg));
}

.badge-email { font-weight: 600; }

.fleche {
  display: inline-block;
  margin-left: 0.2em;
  font-style: normal;
  transition: transform var(--transition-rapide) var(--courbe);
}

.lien:hover .survol,
.lien:focus-visible .survol { transform: scale(var(--lien-survol-echelle)); }

.lien:hover .fleche,
.lien:focus-visible .fleche { transform: translateX(var(--fleche-decalage)); }

/* Pile de photos : chaque clic pose une nouvelle photo par-dessus */
.infos-pile {
  position: absolute;
  bottom: 0;
  left: calc(100% - (1426 - var(--x)) * var(--u));
  width: calc(var(--w) * var(--u));
  aspect-ratio: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  animation: portrait-apparait 1.1s var(--courbe) 0.15s backwards;
}

.pile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg));
  -webkit-user-drag: none;
}

.pile-photo.nouvelle {
  animation: photo-pose 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes photo-pose {
  from { opacity: 0; transform: translate(var(--dx, 0), calc(var(--dy, 0px) - 30px)) rotate(calc(var(--r, 0deg) * 2)) scale(1.12); }
  to   { opacity: 1; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg)) scale(1); }
}

.infos-pile:focus-visible { outline: 2px dotted var(--rose); outline-offset: 6px; }

@keyframes portrait-apparait {
  from { opacity: 0; transform: translateY(12%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Badges qui dérivent et qu'on attrape à la souris */
.physique .flotte { animation: none; }
.physique .infos-el { cursor: grab; }
.physique .infos-el.tire { cursor: grabbing; z-index: 5; }
.physique .infos-el.tire .survol { transform: scale(1.08); }

/* ---------- Texte ---------- */

.infos-texte {
  position: relative;
  flex: none;
  margin-left: calc(var(--nav-marge-cotes) - var(--bande-largeur));
  margin-top: max(24px, calc(100cqh - 792 * var(--u)));
  width: calc(720 * var(--u));
}

/* Mention en bas de page : toujours sous le texte, et en bas de l'écran quand il y a la place */
.infos-copyright {
  flex: none;
  margin: auto 0 0;
  padding: calc(40 * var(--u)) 0 18px calc(var(--nav-marge-cotes) - var(--bande-largeur));
  font-size: var(--copyright-taille);
  color: #6B6B68;
}

.infos-titre {
  margin: 0 0 0.85em;
  font-size: max(15px, calc(var(--infos-titres-taille) * var(--u)));
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c);
}

.apropos {
  max-width: calc(700 * var(--u));
  font-size: max(14px, calc(var(--infos-texte-taille) * var(--u)));
  line-height: 1.5;
}

.apropos p { margin: 0 0 0.8em; }
.apropos p:last-child { margin-bottom: 0; }

/* Chaque mot apparaît à son tour, comme s'il s'écrivait */
.apparait {
  display: inline-block;
  animation: mot-apparait 0.7s var(--courbe) backwards;
  animation-delay: calc(0.35s + var(--i) * var(--cascade-mot));
}

@keyframes mot-apparait {
  from { opacity: 0; transform: translateY(0.45em); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Mots-clés : soulignés de points, ils s'allument au survol */
.mot-cle {
  cursor: default;
  background-image: radial-gradient(circle, currentColor 0.7px, transparent 1.1px);
  background-size: 4px 2px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 0.08em;
  transition: color var(--transition-rapide) var(--courbe);
}
.mot-cle:hover, .mot-cle.allume { color: var(--c); }

/* Filet pointillé qui se dessine de gauche à droite */
.infos-filet {
  height: var(--filet-point);
  margin: calc(40 * var(--u)) 0 calc(34 * var(--u));
  max-width: calc(700 * var(--u));
  background-image: radial-gradient(circle, var(--filet-couleur) calc(var(--filet-point) / 2), transparent calc(var(--filet-point) / 2 + 0.5px));
  background-size: var(--filet-espace) var(--filet-point);
  background-repeat: repeat-x;
  animation: filet-dessine 1.2s var(--courbe) 1.1s backwards;
}

@keyframes filet-dessine {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---------- Colonnes qui se déplient ---------- */

.colonnes {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 0.85fr 0.85fr;
  gap: calc(24 * var(--u));
  align-items: start;
}

.colonne {
  animation: colonne-apparait 0.7s var(--courbe) backwards;
  animation-delay: calc(1.5s + var(--n) * 0.12s);
}

@keyframes colonne-apparait {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.colonne-titre {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: max(15px, calc(var(--infos-titres-taille) * var(--u)));
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c);
  text-align: left;
}

.colonne-titre:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 4px;
}

/* Petit signe « + » dans un cercle pointillé, qui devient « × » */
.colonne-signe {
  position: relative;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--colonne-duree) var(--courbe);
}

.colonne-signe svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.colonne-signe .pointille {
  stroke-width: 1.6px;
  stroke-dasharray: 0 3.6px;
}

.colonne-signe i {
  font-style: normal;
  font-weight: 400;
  font-size: 0.8em;
  line-height: 1;
}

.colonne.ouverte .colonne-signe { transform: rotate(135deg); }

/* Le contenu se déroule : sa hauteur passe de 0 à sa taille réelle */
.colonne-contenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--colonne-duree) var(--courbe);
}

.colonne.ouverte .colonne-contenu { grid-template-rows: 1fr; }

.colonne-liste {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: max(13px, calc(var(--infos-colonnes-taille) * var(--u)));
  line-height: 1.35;
}

.colonne-liste li {
  display: flex;
  flex-direction: column;
  padding-top: 0.55em;
  opacity: 0;
  transform: translateY(-0.6em);
  transition:
    opacity 0.35s var(--courbe),
    transform 0.35s var(--courbe);
}

.colonne-liste li:first-child { padding-top: 1em; }

/* Les lignes arrivent l'une après l'autre */
.colonne.ouverte .colonne-liste li {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 0.5s;
  transition-delay: calc(0.08s + var(--i) * 0.06s);
}

.ligne-detail {
  font-style: italic;
  color: #6B6B68;
}

/* Si la personne a demandé à réduire les animations */
@media (prefers-reduced-motion: reduce) {
  .flotte, .etoile-tourne .forme,
  .infos-el, .infos-pile, .pile-photo.nouvelle, .apparait, .infos-filet, .colonne { animation: none; }
}


/* ==========================================================
   PAGE PROJETS
   Deux couches : le texte fixe derrière,
   les panneaux qui glissent par-dessus.
   ========================================================== */

.page-projets {
  container-type: size;
  overflow: hidden;
}

.intro, .rail {
  --u: calc(100cqh / 1118);   /* 1 pixel de maquette, calé sur la hauteur */
}

/* Couche arrière */
.intro {
  position: absolute;
  z-index: 1;
  left: calc(78 * var(--u));
  bottom: calc(50 * var(--u));
}

.intro p { margin: 0; }

.intro-petit {
  font-size: calc(var(--projets-intro-petit) * var(--u));
  line-height: 1.2;
  margin-bottom: calc(24 * var(--u)) !important;
}

.intro-grand {
  font-size: calc(var(--projets-intro-grand) * var(--u));
  line-height: var(--projets-intro-interligne);
  font-style: italic;
  font-weight: 700;
}

/* Chaque mot prend sa couleur au survol */
.mot {
  transition: color var(--transition-rapide) var(--courbe);
}
.mot:hover { color: var(--c); }

/* Couche avant */
.piste {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;   /* laisse la souris atteindre le texte là où il n'y a pas de panneau */
}

.rail {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.rail-espace {
  flex: none;
  width: calc(var(--projets-intro-largeur) * var(--u));
}

.panneau {
  flex: none;
  position: relative;
  display: block;
  width: calc(var(--panneau-largeur) * var(--u));
  height: 100%;
  margin-right: -1px;     /* chevauchement d'un pixel : évite qu'un fil de texte apparaisse entre deux panneaux */
  pointer-events: auto;
  background: var(--panneau-attente);
  overflow: hidden;
}

.panneau-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Repère provisoire tant qu'il n'y a pas d'image */
.panneau-attente {
  position: absolute;
  left: calc(40 * var(--u));
  right: calc(40 * var(--u));
  bottom: calc(40 * var(--u));
  margin: 0;
  font-size: calc(30 * var(--u));
  line-height: 1.2;
  opacity: 0.45;
}

/* Survol : la couleur arrive en fondu par-dessus l'image */
.panneau-couleur {
  position: absolute;
  inset: 0;
  background: var(--c);
  opacity: 0;
  transition: opacity var(--panneau-couleur-duree) var(--courbe);
}

/* Numéro dans l'étoile, en haut à gauche */
.panneau-numero {
  position: absolute;
  left: calc(60 * var(--u));
  top: calc(80 * var(--u));
  width: calc(var(--panneau-etoile-taille) * var(--u));
  height: calc(var(--panneau-etoile-taille) * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--noir);
}

.panneau-etoile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: tourner var(--etoiles-rotation-duree) linear infinite;
}

.panneau-numero span {
  position: relative;
  font-size: calc(var(--panneau-numero-taille) * var(--u));
  font-style: italic;
  font-weight: 900;
  line-height: 1;
}

/* Titre et catégorie, en bas à gauche */
.panneau-infos {
  position: absolute;
  left: calc(60 * var(--u));
  right: calc(60 * var(--u));
  bottom: calc(56 * var(--u));
  color: var(--noir);
}

.panneau-infos p { margin: 0; }

.panneau-titre {
  font-size: calc(var(--panneau-titre-taille) * var(--u));
  font-style: italic;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 0.25em !important;
}

.panneau-categorie {
  font-size: calc(var(--panneau-categorie-taille) * var(--u));
  line-height: 1.2;
}

.panneau-annee {
  font-size: calc(var(--panneau-annee-taille) * var(--u));
  line-height: 1.2;
  margin-top: 0.3em !important;
}

/* Numéro et informations : fondu et légère montée */
.panneau-numero,
.panneau-infos {
  opacity: 0;
  transform: translateY(var(--panneau-infos-decalage));
  transition:
    opacity var(--transition-rapide) var(--courbe),
    transform var(--transition-rapide) var(--courbe);
}

.panneau.survole .panneau-couleur,
.panneau:focus-visible .panneau-couleur { opacity: 1; }

.panneau.survole .panneau-numero,
.panneau.survole .panneau-infos,
.panneau:focus-visible .panneau-numero,
.panneau:focus-visible .panneau-infos {
  opacity: 1;
  transform: translateY(0);
}

/* Les informations arrivent juste après le numéro */
.panneau.survole .panneau-infos { transition-delay: 0.06s; }

.panneau:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .panneau-etoile { animation: none; }
}

/* Un filet blanc discret entre deux panneaux gris, provisoire aussi */
.panneau + .panneau { box-shadow: inset 1px 0 0 var(--blanc); }


/* ==========================================================
   PAGES PROJET
   ========================================================== */

.page-projet { overflow: hidden; }

/* Zone des images : de la barre du haut à la barre du bas */
.page-projet .piste { bottom: var(--pied-hauteur); }

.media {
  flex: none;
  display: block;
  height: 100%;
  width: auto;
}

.media-attente {
  flex: none;
  width: calc(100vw - 2 * var(--bande-largeur));
  height: 100%;
  background: var(--panneau-attente);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pied-taille-details);
  opacity: 0.6;
}

/* Vidéos : un cadre qui porte les boutons du son et de lecture */
.video-cadre {
  position: relative;
  flex: none;
  height: 100%;
}

.video-cadre .media { height: 100%; width: auto; }

.video-son,
.video-lire {
  position: absolute;
  pointer-events: auto;   /* la couche des images laisse passer la souris, pas les boutons */
  color: var(--noir);
  background: var(--blanc);
  border: 0;
  outline: 2px dotted var(--noir);
  outline-offset: -4px;
  border-radius: 50%;
  transition:
    background-color var(--transition-rapide) var(--courbe),
    transform var(--transition-rapide) var(--courbe),
    opacity var(--transition-rapide) var(--courbe);
}

/* Bouton du son : une petite pastille avec un haut-parleur */
.video-son {
  right: 14px;
  bottom: 14px;
  width: var(--video-bouton-taille);
  height: var(--video-bouton-taille);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.video-son svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.video-son .hp { fill: currentColor; }
.video-son .ondes { display: none; }
.video-cadre.sonore .video-son .coupe { display: none; }
.video-cadre.sonore .video-son .ondes { display: inline; }

.video-son:hover { opacity: 1; transform: scale(1.08); }
.video-cadre.sonore .video-son { background: var(--c, var(--rose)); opacity: 1; }

/* Bouton de lecture, visible seulement si la lecture automatique est refusée */
.video-lire {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  font: inherit;
  font-style: italic;
  font-size: 16px;
  padding: 0.7em 1.2em;
  border-radius: 2em;
}
.video-cadre.bloquee .video-lire { display: block; }

.video-son:focus-visible,
.video-lire:focus-visible { outline-style: solid; }

/* Barre du bas. Au repos, seule la barre dépasse ;
   ouverte, tout le panneau monte et prend la couleur du projet. */
.pied {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background-color: var(--blanc);
  transform: translateY(calc(100% - var(--pied-hauteur)));
  transition:
    transform var(--transition-lente) var(--courbe),
    background-color var(--transition-lente) var(--courbe);
}

/* Filet pointillé au-dessus */
.pied::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--filet-point);
  background-image: radial-gradient(circle, var(--filet-couleur) calc(var(--filet-point) / 2), transparent calc(var(--filet-point) / 2 + 0.5px));
  background-size: var(--filet-espace) var(--filet-point);
  background-repeat: repeat-x;
}

.pied.ouvert {
  transform: translateY(0);
  background-color: var(--c);
}

.pied-barre {
  height: var(--pied-hauteur);
  padding: 0 var(--nav-marge-cotes);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--pied-taille-titre);
}

.pied-titre {
  font: inherit;
  font-style: italic;
  color: inherit;
  background: none;
  border: 0;
  padding: 0.2em 0.4em;
}

.pied-titre:focus-visible,
.pied-fleche:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}

/* Flèches : glissent vers leur direction au survol */
.pied-fleche {
  display: inline-block;
  padding: 0.2em 0.3em;
  transition: opacity var(--transition-rapide) var(--courbe);
}

.pied-fleche span {
  display: inline-block;
  transition: transform var(--transition-rapide) var(--courbe);
}

.pied-precedent:hover span { transform: translateX(calc(-1 * var(--fleche-decalage))); }
.pied-suivant:hover span   { transform: translateX(var(--fleche-decalage)); }

/* Premier ou dernier projet : la flèche s'efface */
.pied-fleche.inactive {
  opacity: 0.2;
  pointer-events: none;
}

/* Informations du projet */
.pied-details {
  display: grid;
  grid-template-columns: var(--pied-colonne-fiche) 1fr;
  gap: 2em;
  padding: 1.2em var(--nav-marge-cotes) 1.6em;
  font-size: var(--pied-taille-details);
  line-height: 1.3;
  opacity: 0;
  transition: opacity var(--transition-rapide) var(--courbe);
}

.pied.ouvert .pied-details {
  opacity: 1;
  transition-delay: 0.12s;
}

.pied-fiche {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.2em;
  margin: 0;
}

.pied-fiche dt, .pied-fiche dd { margin: 0; }

.pied-description { max-width: 62em; }
.pied-description p { margin: 0 0 0.9em; }
.pied-description p:last-child { margin-bottom: 0; }


/* ==========================================================
   MESSAGES D'ERREUR (pour toi, pendant que tu ajoutes des projets)
   ========================================================== */

.fichier-introuvable {
  color: var(--rouge);
  opacity: 1;
}

.page-projet .fichier-introuvable {
  width: 60vh;
  padding: 2em;
  text-align: center;
}

.alerte-donnees {
  position: absolute;
  z-index: 50;
  left: var(--nav-marge-cotes);
  top: 2em;
  max-width: 34em;
  padding: 1.2em 1.4em;
  background: var(--blanc);
  color: var(--rouge);
  outline: 2px dotted var(--rouge);
}

.alerte-donnees p { margin: 0 0 0.6em; }
.alerte-donnees p:last-child { margin: 0; }


/* ==========================================================
   VERSION VERTICALE
   S'applique dès que l'écran est plus haut que large :
   téléphone, tablette tenue debout, fenêtre étroite.
   Tout défile verticalement, les bandes suivent la page.
   ========================================================== */

@media (max-aspect-ratio: 1/1) {

  :root {
    --nav-hauteur: var(--m-nav-hauteur);
    --nav-marge-cotes: var(--m-nav-marge);
    --nav-taille-texte: var(--m-nav-taille-liens);
    --filet-point: var(--m-filet-point);
    --filet-espace: var(--m-filet-espace);
    --pied-hauteur: var(--m-pied-hauteur);
    --pied-taille-titre: var(--m-pied-taille);
    --pied-taille-details: var(--m-pied-details);
    --flottement-amplitude: var(--m-flottement-amplitude);
  }

  html, body { height: auto; }
  body { position: relative; min-height: 100svh; }

  /* Barre du haut : le nom sur deux lignes, les liens alignés en bas */
  .nav {
    align-items: flex-end;
    padding-bottom: 14px;
  }
  .nav a { line-height: 1; }
  .nav-nom {
    width: min-content;
    font-size: var(--m-nav-taille-nom);
    line-height: 0.95;
  }
  .nav-projets {
    position: static;
    transform: none;
  }

  /* Bandes : elles suivent la page et répètent leurs quatre couleurs */
  .bande {
    position: absolute;
    top: var(--nav-hauteur);
    bottom: 0;
    background: repeating-linear-gradient(
      to bottom,
      var(--bande-1) 0 calc(var(--m-bande-periode) * 0.25),
      var(--bande-2) calc(var(--m-bande-periode) * 0.25) calc(var(--m-bande-periode) * 0.5),
      var(--bande-3) calc(var(--m-bande-periode) * 0.5) calc(var(--m-bande-periode) * 0.75),
      var(--bande-4) calc(var(--m-bande-periode) * 0.75) var(--m-bande-periode)
    );
  }

  /* Le contenu redevient une page qui défile normalement */
  .contenu {
    position: relative;
    inset: auto;
    margin: 0 var(--bande-largeur);
    padding-top: var(--nav-hauteur);
  }

  /* ---------- Page Projets ---------- */

  .page-projets {
    container-type: normal;
    overflow: visible;
  }

  .intro {
    --u: calc(100vw / 815);
    position: fixed;
    left: 8vw;
    top: calc(var(--nav-hauteur) + var(--m-intro-haut));
    bottom: auto;
  }

  .page-projets .piste {
    position: relative;
    inset: auto;
  }

  .page-projets .rail {
    --u: calc(100vw / 800);
    flex-direction: column;
    width: auto;
  }

  .rail-espace {
    width: auto;
    height: var(--m-intro-espace);
  }

  .panneau {
    width: 100%;
    height: auto;
    aspect-ratio: var(--m-panneau-ratio);
    margin-right: 0;
    margin-bottom: -1px;
  }

  .panneau + .panneau { box-shadow: none; }

  /* ---------- Pages projet ---------- */

  .page-projet {
    overflow: visible;
    padding-bottom: var(--pied-hauteur);
  }

  .page-projet .piste {
    position: relative;
    inset: auto;
  }

  .page-projet .rail {
    flex-direction: column;
    width: auto;
  }

  .media,
  .video-cadre .media {
    width: 100%;
    height: auto;
  }

  .video-cadre {
    width: 100%;
    height: auto;
  }

  .media-attente,
  .page-projet .fichier-introuvable {
    width: 100%;
    height: 60svh;
  }

  .pied {
    position: fixed;
    left: var(--bande-largeur);
    right: var(--bande-largeur);
  }

  .pied-titre {
    max-width: 62vw;
    line-height: 1.15;
    text-align: center;
  }

  .pied-details {
    grid-template-columns: 1fr;
    gap: 1.2em;
    max-height: 62svh;
    overflow-y: auto;
  }

  /* ---------- Page Infos ---------- */

  .page-infos {
    container-type: normal;
    overflow: visible;
    overflow-x: clip;
  }

  /* La scène devient une colonne : badges, texte, puis portrait */
  .infos-scene {
    --u: calc((100vw - 2 * var(--bande-largeur)) / 1105);   /* 1 pixel de la maquette téléphone */
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .infos-haut { position: relative; height: calc(1000 * var(--u)); }
  .infos-bas  { position: relative; height: calc(620 * var(--u)); }

  .infos-el {
    left: calc(var(--mx) * var(--u));
    top: calc(var(--my) * var(--u));
    width: calc(var(--mw) * var(--u));
  }

  .infos-scene { inset: auto; }

  /* Le texte des badges garde la même proportion que sur ordinateur */
  .badge-texte {
    font-size: calc(var(--taille, var(--infos-badges-taille)) * var(--u) * var(--mw) / var(--w));
  }

  .infos-pile {
    left: calc(var(--mx) * var(--u));
    width: calc(var(--mw) * var(--u));
  }

  .infos-sup { display: none; }

  .infos-texte {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    width: auto;
    padding: calc(30 * var(--u)) calc(90 * var(--u)) calc(40 * var(--u));
  }

  .infos-copyright {
    margin: 0;
    padding: calc(40 * var(--u)) calc(90 * var(--u)) calc(50 * var(--u));
    text-align: center;
  }

  .infos-titre,
  .colonne-titre { font-size: max(17px, calc(54 * var(--u))); }

  .apropos {
    max-width: none;
    font-size: max(15px, calc(var(--m-infos-texte-taille) * var(--u)));
  }

  .infos-filet {
    max-width: none;
    margin: calc(70 * var(--u)) 0 calc(40 * var(--u));
  }

  /* Colonnes empilées, qui se déplient au toucher */
  .colonnes {
    grid-template-columns: 1fr;
    gap: calc(34 * var(--u));
  }

  .colonne-titre { width: 100%; justify-content: space-between; }

  .colonne-liste { font-size: max(14px, calc(40 * var(--u))); }
}



/* ==========================================================
   AIDES À LA NAVIGATION
   ========================================================== */

/* Fin de la page Projets : revenir au premier projet */
.rail-fin {
  flex: none;
  width: calc(520 * var(--u));
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.retour-debut {
  position: relative;
  width: calc(230 * var(--u));
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: max(14px, calc(26 * var(--u)));
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rose);
  text-align: center;
}

.retour-debut svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: tourner var(--etoiles-rotation-duree) linear infinite;
}

.retour-debut span { position: relative; transition: transform var(--transition-rapide) var(--courbe); }
.retour-debut:hover span { transform: translateX(calc(-1 * var(--fleche-decalage))); }
.retour-debut:focus-visible { outline: 2px dotted var(--rose); outline-offset: 6px; }

/* Pages projet : petite flèche de retour en haut à gauche */
.retour-projets {
  position: fixed;
  z-index: 60;
  top: calc(var(--nav-hauteur) + 12px);
  left: calc(var(--bande-largeur) + 12px);
  width: var(--retour-taille);
  height: var(--retour-taille);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blanc);
  outline: 2px dotted var(--noir);
  outline-offset: -4px;
  font-size: calc(var(--retour-taille) * 0.5);
  color: var(--noir);
  transition: background-color var(--transition-rapide) var(--courbe);
}

.retour-projets .fleche { margin: 0; }
.retour-projets:hover { background: var(--c, var(--rose)); }
.retour-projets:hover .fleche { transform: translateX(calc(-1 * var(--fleche-decalage) / 2)); }

/* Le petit rond pointillé à côté du titre du projet : « + » fermé, « × » ouvert */
.pied-titre {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.pied-titre .colonne-signe { font-size: 0.85em; font-style: normal; }
.pied.ouvert .pied-titre .colonne-signe { transform: rotate(135deg); }

@media (max-aspect-ratio: 1/1) {
  .rail-fin { width: auto; height: 60svh; }
  .retour-debut { width: 46vw; font-size: max(16px, 5vw); }
}