/* ==========================================================================
   PROJETS (pages de case study)
   Styles communs aux pages de projet individuelles. La structure interne
   (quels blocs apparaissent, dans quel ordre) reste propre à chaque page :
   ce fichier fournit des briques réutilisables, pas un template rigide.
   ========================================================================== */

/* -------------------- EN-TÊTE DE PROJET -------------------- */

.projet-header {
  padding-block-start: calc(var(--espace-xl) + 3rem);
  padding-block-end: var(--espace-l);
}

.projet-header__categorie {
  display: block;
  margin-block-end: var(--espace-s);
}

.projet-header__titre {
  font-size: var(--taille-nom-hero);
  line-height: 0.95;
  max-width: 24ch;
  margin-block-end: var(--espace-m);
}

.projet-header__intro {
  font-size: var(--taille-texte-l);
  max-width: 42rem;
  line-height: 1.6;
}

.projet-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s) var(--espace-m);
  margin-block-start: var(--espace-m);
}

.projet-header__image {
  aspect-ratio: 16 / 9;
  margin-block-start: var(--espace-l);
  overflow: hidden;
  background-color: var(--couleur-surface-douce);
}

.projet-header__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* -------------------- BLOCS DE TEXTE COURTS -------------------- */
/* Contexte, intention/problématique : texte resserré sur une portion de
   la grille, jamais étiré sur toute la largeur. */

.projet-bloc {
  max-width: 42rem;
}

/* Plusieurs paragraphes dans un même bloc : respiration entre eux, et liens
   soulignés pour se distinguer du texte. */
.projet-bloc p + p {
  margin-block-start: var(--espace-xs);
}

.projet-bloc a:not(.lien-fleche) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.projet-bloc__titre {
  font-size: var(--taille-titre-xl);
  margin-block-end: var(--espace-s);
}

/* Titre de section suivi directement d'une galerie ou d'une grille. */
.projet-bloc__titre--section {
  margin-block-end: var(--espace-m);
}

.projet-bloc__liste {
  margin-block-start: var(--espace-s);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.projet-bloc__liste li::before {
  content: "— ";
  opacity: 0.5;
}

/* -------------------- CADRAGE (objectif / problématique / rôle) -------------------- */

.projet-cadrage {
  display: grid;
  gap: var(--espace-m);
}

.projet-cadrage__item {
  border-block-start: 1px solid rgba(34, 24, 28, 0.15);
  padding-block-start: var(--espace-s);
}

.projet-cadrage__label {
  display: block;
  margin-block-end: 0.5rem;
}

.projet-cadrage__valeur {
  font-family: var(--police-titre);
  font-size: var(--taille-titre-m);
  margin-block-end: 0.5rem;
}

@media (min-width: 768px) {
  .projet-cadrage {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--grille-gouttiere);
  }
}

/* -------------------- DÉMARCHE / ÉTAPES NUMÉROTÉES -------------------- */

.projet-etapes {
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
  margin-block-start: var(--espace-l);
  padding: 0;
  list-style: none;
}

.projet-etape {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espace-s);
  max-width: 42rem;
}

.projet-etape > div {
  min-width: 0;
}

.projet-etape__numero {
  font-family: var(--police-titre);
  font-size: var(--taille-titre-l);
  opacity: 0.35;
  line-height: 1;
}

.projet-etape__titre {
  font-size: var(--taille-titre-m);
  margin-block-end: 0.35rem;
}

/* -------------------- GALERIE (réalisation) -------------------- */
/* Tailles volontairement inégales pour éviter une grille de vignettes
   uniforme, cohérent avec le reste du site. */

.projet-galerie {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grille-gouttiere);
  row-gap: var(--espace-m);
}

.projet-galerie__item {
  grid-column: span 12;
}

.projet-galerie__item--large { grid-column: span 12; }
.projet-galerie__item--demi  { grid-column: span 6; }

.projet-galerie__image {
  aspect-ratio: 4 / 3;
  margin-block-end: var(--espace-xxs);
  overflow: hidden;
  background-color: var(--couleur-surface-douce);
}

.projet-galerie__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Visuel vertical (plateau de jeu) : garde ses proportions au lieu du cadre
   4/3, largeur limitée pour ne pas occuper plusieurs écrans de haut. */
.projet-galerie__image--portrait {
  aspect-ratio: 1600 / 2263;
  max-width: 34rem;
}

/* Galerie en <figure> (Never Too Late) : pas de marge par défaut. */
figure.projet-galerie__item { margin: 0; }

/* Affiche de film : proportions A (8910 × 12600). */
.projet-galerie__image--affiche {
  aspect-ratio: 1131 / 1600;
  max-width: 30rem;
}

.projet-galerie__image--video { aspect-ratio: 16 / 9; }

/* Lecteur vidéo natif dans un cadre 16/9 (en-tête ou galerie). */
.projet-video {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--couleur-texte);
}

/* -------------------- CRÉDITS EN EN-TÊTE (Never Too Late) -------------------- */
/* Entre deux filets, sous le titre : à gauche les deux noms à l'écran, à
   droite une grille d'encarts, un par poste (rôle en petites capitales,
   nom en dessous). Les autres membres d'abord, les postes d'Alvin à la fin. */

.credits-affiche {
  display: grid;
  gap: var(--espace-s) var(--espace-l);
  margin-block-start: var(--espace-m);
  padding-block: var(--espace-s);
  border-block: 1px solid rgba(34, 24, 28, 0.15);
}

.credits-affiche__avec,
.credits-affiche__production,
.credits-affiche__item dt {
  font-family: var(--police-texte);
  font-size: var(--taille-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.credits-affiche__avec { opacity: 0.6; }

.credits-affiche__vedettes {
  font-family: var(--police-titre);
  font-size: var(--taille-texte-l);
  line-height: 1.25;
  margin-block: var(--espace-xxs) var(--espace-xs);
}

.credits-affiche__production { opacity: 0.6; }

.credits-affiche__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--espace-s) var(--espace-m);
}

.credits-affiche__item {
  padding-inline-start: var(--espace-xs);
  border-inline-start: 2px solid var(--couleur-accent-fort-2);
}

.credits-affiche__item dt {
  opacity: 0.65;
  margin-block-end: 0.2rem;
}

.credits-affiche__item dd {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-texte);
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .credits-affiche {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
  }
  .credits-affiche__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------- STAGE : CAMPAGNES ET CARROUSELS -------------------- */
/* Chaque campagne : un texte, puis ses publications. Un carrousel Instagram
   devient une bande qui défile à l'horizontale, avec un arrêt par visuel
   (aucun JavaScript : défilement natif, au doigt ou au clavier). */

.stage-campagne + .stage-campagne {
  margin-block-start: var(--espace-xl);
}

.stage-campagne__titre {
  font-size: var(--taille-titre-m);
  margin-block-end: var(--espace-xs);
}

.stage-campagne__medias {
  display: grid;
  gap: var(--espace-m);
  margin-block-start: var(--espace-m);
}

.stage-carrousel {
  margin-block-start: var(--espace-m);
  min-width: 0;
}

.stage-campagne__medias .stage-carrousel {
  margin-block-start: 0;
}

.stage-carrousel__label {
  margin-block-end: var(--espace-xxs);
}

.stage-carrousel__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(15rem, 70vw);
  gap: var(--espace-xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--espace-xs);
}

.stage-carrousel__piste li {
  scroll-snap-align: start;
}

.stage-carrousel__piste img {
  display: block;
  width: 100%;
  height: auto;
}

/* Vidéo verticale (format Reels) : largeur limitée. */
.stage-video {
  margin: 0;
  max-width: 17rem;
}

.stage-video .projet-video {
  aspect-ratio: 9 / 16;
  height: auto;
}

@media (min-width: 1024px) {
  .stage-campagne .projet-bloc,
  .stage-carrousel { margin-inline-start: var(--colonne); }
  .stage-campagne:nth-of-type(2) .projet-bloc,
  .stage-campagne:nth-of-type(2) .stage-carrousel { margin-inline-start: calc(var(--colonne) * 3); }
  .stage-campagne__medias {
    grid-template-columns: 17rem minmax(0, 1fr);
    align-items: start;
    margin-inline-start: var(--colonne);
  }
  .stage-campagne__medias .stage-carrousel { margin-inline-start: 0; }
}

/* Résultat rédigé avant les trois apprentissages (Never Too Late). */
.projet-bloc + .projet-recul__grille {
  margin-block-start: var(--espace-l);
}

.projet-galerie__legende {
  font-size: var(--taille-meta);
  opacity: 0.7;
  max-width: 32rem;
}

@media (max-width: 767px) {
  .projet-galerie__item--demi {
    grid-column: span 12;
  }
}

/* -------------------- RÔLE PERSONNEL -------------------- */
/* Bloc volontairement distinct, sur fond doux, pour bien isoler ce qui
   revient à Alvin de ce qui revient au collectif sur un projet de groupe. */

.projet-role {
  background-color: var(--couleur-surface-douce);
  padding: var(--espace-m);
  max-width: 42rem;
}

.projet-role__note,
.projet-role p + p {
  margin-block-start: var(--espace-xs);
}

.projet-role__titre {
  font-size: var(--taille-titre-m);
  margin-block-end: var(--espace-xs);
}

/* -------------------- RÉSULTAT / RECUL -------------------- */

.projet-recul__grille {
  display: grid;
  gap: var(--espace-m);
}

@media (min-width: 768px) {
  .projet-recul__grille {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--grille-gouttiere);
  }
}

.projet-recul__item h3 {
  font-size: var(--taille-titre-m);
  margin-block-end: 0.5rem;
}

/* -------------------- PROJET SUIVANT -------------------- */

.projet-suivant {
  display: block;
  background-color: var(--couleur-texte);
  color: var(--couleur-fond);
  text-align: center;
  padding-block: var(--espace-xl);
}

.projet-suivant__label {
  display: block;
  opacity: 0.7;
  margin-block-end: var(--espace-xs);
}

.projet-suivant__titre {
  font-size: var(--taille-titre-xl);
}

/* Le bandeau sombre est déjà un moment fort : seule sa flèche avance. */
.projet-suivant__fleche {
  display: inline-block;
  transition: translate var(--duree-moyenne) var(--easing-doux);
}

.projet-suivant:hover .projet-suivant__fleche,
.projet-suivant:focus-visible .projet-suivant__fleche {
  translate: 0.2em 0;
}

/* ==========================================================================
   VUE D'ENSEMBLE (/projets/index.html)
   Page exhaustive listant l'ensemble de l'inventaire réel, organisée par
   catégorie. Volontairement différente de la sélection homepage : plus
   compacte, pas de grille uniforme, deux niveaux de présentation selon
   qu'un projet a une vraie étude de cas ou non.
   ========================================================================== */

.vue-projets__intro {
  max-width: 42rem;
  font-size: var(--taille-texte-l);
  line-height: 1.6;
}

.vue-projets__categorie {
  padding-block: var(--espace-l);
  border-block-start: 1px solid rgba(34, 24, 28, 0.15);
}

.vue-projets__categorie-titre {
  display: flex;
  align-items: baseline;
  gap: var(--espace-s);
  font-size: var(--taille-titre-xl);
  margin-block-end: var(--espace-m);
}

.vue-projets__categorie-numero {
  font-size: var(--taille-texte-petit);
  opacity: 0.5;
  font-family: var(--police-texte);
}

/* Projets avec une vraie étude de cas : bloc image + texte, réutilise la
   logique éditoriale de la homepage (côtés alternés). */
.vue-projets__carte {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grille-gouttiere);
  align-items: center;
  margin-block-end: var(--espace-l);
}

.vue-projets__carte-image {
  grid-column: 1 / span 5;
  aspect-ratio: 4 / 3;
  margin-block-end: 0;
  overflow: hidden;
  background-color: var(--couleur-surface-douce);
}

.vue-projets__carte-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vue-projets__carte-contenu { grid-column: 7 / span 6; }

/* Logo rond : cadre carré, sans fond, pour qu'il se détache seul. */
.vue-projets__carte--logo .vue-projets__carte-image {
  aspect-ratio: 1 / 1;
  background-color: transparent;
}

.vue-projets__carte--inverse .vue-projets__carte-image { grid-column: 8 / span 5; order: 2; }
.vue-projets__carte--inverse .vue-projets__carte-contenu { grid-column: 1 / span 6; order: 1; }

@media (max-width: 767px) {
  .vue-projets__carte,
  .vue-projets__carte--inverse {
    display: block;
  }
  .vue-projets__carte-image,
  .vue-projets__carte--inverse .vue-projets__carte-image {
    order: initial;
    margin-block-end: var(--espace-s);
  }
  .vue-projets__carte--logo .vue-projets__carte-image {
    max-width: 16rem;
  }
}


/* -------------------- BANDEAUX (vue d'ensemble) -------------------- */
/* Défilement continu sans commande : Photo perso, Gala de danse, Graphisme. */

.vue-projets__item-leger-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-titre-m);
}

.vue-projets__item-leger-texte {
  font-size: var(--taille-texte-petit);
  opacity: 0.75;
  max-width: 34rem;
}

.bandeau {
  --bandeau-hauteur: 24rem;
  padding-block: var(--espace-s);
  border-block-end: 1px solid rgba(34, 24, 28, 0.1);
  scroll-margin-top: 6rem;
}

/* Le graphisme est plus vertical : un bandeau un peu plus haut lui laisse sa présence. */
.bandeau--graphisme { --bandeau-hauteur: 26rem; }

.bandeau__entete {
  margin-block-end: var(--espace-s);
}

.bandeau__fenetre {
  overflow-x: auto;
}

.bandeau.is-ready .bandeau__fenetre {
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.bandeau.is-ready .bandeau__fenetre:active {
  cursor: grabbing;
}

.bandeau__piste {
  display: flex;
  gap: var(--espace-xs);
}

.bandeau__item {
  flex: 0 0 auto;
  min-width: 0;
}

.bandeau__item img {
  width: auto;
  max-width: none;
  height: var(--bandeau-hauteur);
  object-fit: contain;
  user-select: none;
}

@media (max-width: 767px) {
  .bandeau {
    --bandeau-hauteur: min(16rem, calc((100vw - 2 * var(--conteneur-marge) - var(--espace-xs)) / 1.5));
  }
  .bandeau--graphisme { --bandeau-hauteur: 18rem; }
}

/* -------------------- PAGE 404 -------------------- */
/* Seul le message d'erreur, centré verticalement sur tout l'écran. */

body[data-page="404"] main {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.page-404 {
  padding-block: var(--espace-xl);
}

/* Le « 404 » géant, animé par la coulée de couleur comme le nom du header. */
.page-404__code {
  font-family: var(--police-titre);
  font-size: clamp(6rem, 28vw, 20rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
}

.page-404__titre {
  font-size: var(--taille-titre-xl);
  margin-block: var(--espace-s) var(--espace-xs);
}

.page-404__texte {
  font-size: var(--taille-texte-l);
}

/* -------------------- PAGE CV -------------------- */
/* Le CV en page web, dans la DA du site : même contenu que le PDF.
   En-tête « affiche » sur fond foncé (moment fort), photo dans un disque
   cerclé de turquoise (écho au logo), puis sections calmes sur crème avec
   titre à gauche, contenu décalé d'une section à l'autre et trait cuivre
   devant chaque entrée (comme les crédits de Never Too Late). */

.cv-affiche {
  background-color: var(--couleur-texte);
  color: var(--couleur-fond);
}

.cv-affiche .meta {
  color: var(--couleur-fond);
}

.cv-affiche + .cv-section {
  border-block-start: 0;
}

.cv-entete {
  display: grid;
  gap: var(--espace-m);
  padding-block: calc(var(--espace-xl) + 3rem) var(--espace-l);
}

.cv-entete__nom {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.95;
  margin-block: var(--espace-xs) var(--espace-s);
}

/* Spécialités en gras comme sur le CV PDF, en sable : lisible sur le fond
   foncé (contraste 9,7), là où le cuivre serait trop faible en petit texte. */
.cv-entete__domaines {
  font-weight: 600;
  color: var(--couleur-accent-chaud);
  margin-block-end: var(--espace-xxs);
}

.cv-entete__accroche {
  font-size: var(--taille-texte-l);
}

.cv-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--espace-s);
  margin-block-start: var(--espace-s);
  font-size: var(--taille-texte-petit);
}

.cv-entete__photo {
  order: -1;
  width: 10rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
  border: 0.5rem solid var(--couleur-accent-fort-1);
}

.cv-contact a,
.cv-section a:not(.lien-fleche) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.cv-section {
  padding-block: var(--espace-m);
  border-block-start: 1px solid rgba(34, 24, 28, 0.15);
}

.cv-section__titre {
  font-size: var(--taille-titre-l);
  margin-block-end: var(--espace-s);
}

.cv-section__texte {
  font-size: var(--taille-texte-l);
  line-height: 1.6;
  max-width: 42rem;
}

.cv-entree {
  padding-inline-start: var(--espace-xs);
  border-inline-start: 2px solid var(--couleur-accent-fort-2);
}

.cv-entree + .cv-entree {
  margin-block-start: var(--espace-m);
}

.cv-entree__entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem var(--espace-s);
}

.cv-entree__titre {
  font-size: var(--taille-titre-m);
}

.cv-entree__lieu {
  margin-block-start: 0.35rem;
}

.cv-entree .projet-bloc__liste {
  margin-block-start: var(--espace-xs);
}

.cv-colonnes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-m);
}

.cv-colonnes__titre {
  margin-block-end: var(--espace-xxs);
}

.cv-liste li {
  font-size: var(--taille-texte-l);
  padding-block: 0.2rem;
}

/* Chaos maîtrisé à l'intérieur des sections : les entrées ne partent pas
   toutes du même bord (2e en retrait, 3e entre les deux). */
@media (max-width: 767px) {
  .cv-colonnes { grid-template-columns: 1fr; }
  .cv-section:nth-of-type(even) .cv-section__contenu { margin-inline-start: 8%; }
  .cv-entree:nth-of-type(2) { margin-inline-start: 10%; }
  .cv-entree:nth-of-type(3) { margin-inline-start: 5%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cv-entree:nth-of-type(2) { margin-inline-start: var(--colonne); }
}

@media (min-width: 1024px) {
  .cv-entree:nth-of-type(2) { margin-inline-start: calc(var(--colonne) * 2); }
  .cv-entree:nth-of-type(3) { margin-inline-start: var(--colonne); }
}

@media (min-width: 768px) {
  .cv-entete {
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grille-gouttiere);
    align-items: end;
  }
  .cv-entete__texte { grid-column: 1 / span 9; }
  .cv-entete__photo {
    order: initial;
    grid-column: 10 / span 3;
    justify-self: end;
    width: 100%;
    max-width: 14rem;
  }

  .cv-section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grille-gouttiere);
  }
  .cv-section__titre   { grid-column: 1 / span 4; }
  .cv-section__contenu { grid-column: 5 / span 8; }
}

@media (min-width: 1024px) {
  .cv-entete__texte { grid-column: 1 / span 8; }
  .cv-entete__photo { max-width: 16rem; }

  .cv-section__titre { grid-column: 1 / span 3; }
  .cv-section:nth-of-type(3n + 1) .cv-section__contenu { grid-column: 5 / span 7; }
  .cv-section:nth-of-type(3n + 2) .cv-section__contenu { grid-column: 6 / span 7; }
  .cv-section:nth-of-type(3n)     .cv-section__contenu { grid-column: 4 / span 8; }
}

/* -------------------- CONTENUS EN ATTENTE -------------------- */
/* Pages en préparation : un encart sobre signale les contenus à venir. */

.page-en-attente,
.vue-projets__attente {
  display: grid;
  place-items: center;
  padding: var(--espace-m);
  background-color: var(--couleur-surface-douce);
  font-family: var(--police-texte);
  font-size: var(--taille-texte-petit);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-en-attente {
  margin-block-start: var(--espace-s);
}

.vue-projets__attente {
  height: 100%;
}

/* -------------------- PAGE UNIVERS (manifeste) -------------------- */
/* Un texte fort par section, numéroté ; titres et textes partent de
   colonnes différentes d'une section à l'autre. */

.univers-entete {
  padding-block: calc(var(--espace-xl) + 3rem) var(--espace-l);
}

.univers-entete__titre {
  font-size: var(--taille-nom-hero);
  line-height: 0.95;
  margin-block: var(--espace-xs) var(--espace-s);
}

.univers-entete__sous-titre {
  font-size: var(--taille-titre-m);
}

.univers-entete__intro {
  max-width: 34rem;
  margin-block-start: var(--espace-m);
  font-size: var(--taille-texte-l);
}

.univers-section {
  padding-block: var(--espace-l);
  border-block-start: 1px solid rgba(34, 24, 28, 0.15);
}

.univers-section__numero {
  display: block;
  font-family: var(--police-titre);
  font-size: var(--taille-titre-l);
  opacity: 0.35;
}

.univers-section__titre {
  font-size: var(--taille-titre-xl);
  margin-block: var(--espace-xxs) var(--espace-s);
}

.univers-section__texte {
  max-width: 40rem;
  font-family: var(--police-titre);
  font-size: var(--taille-titre-m);
  line-height: 1.4;
}

/* Développement sous la phrase forte : texte de lecture, plus étroit. */
.univers-section__corps {
  max-width: 34rem;
  margin-block-start: var(--espace-s);
}

.univers-section__corps p + p {
  margin-block-start: var(--espace-xs);
}

/* Le chaos à gauche, la maîtrise à l'opposé, au bord droit. */
.univers-duo {
  display: flex;
  justify-content: space-between;
  gap: var(--espace-s);
  margin-block-start: var(--espace-m);
}

.univers-duo > div {
  max-width: 16rem;
}

.univers-duo > div + div {
  text-align: end;
}

.univers-duo .meta {
  margin-block-end: var(--espace-xxs);
}

/* La maîtrise répond au chaos : seul accent de la section. */
.univers-duo > div + div .meta {
  color: var(--couleur-accent-fort-2);
}

.univers-palette {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espace-s);
  margin-block-start: var(--espace-m);
}

.univers-palette__couleur {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transform: translateY(var(--vague-decalage));
}

/* Vague : chaque couleur a son décalage vertical, et la vague se propage
   lentement de gauche à droite (sans mouvement, elle reste figée). */
.univers-palette { padding-block: var(--espace-s); }
.univers-palette__couleur:nth-child(1) { --vague-decalage: 0.5rem;   --vague-phase: 0s; }
.univers-palette__couleur:nth-child(2) { --vague-decalage: -0.25rem; --vague-phase: -1.6s; }
.univers-palette__couleur:nth-child(3) { --vague-decalage: -0.75rem; --vague-phase: -3.2s; }
.univers-palette__couleur:nth-child(4) { --vague-decalage: -0.25rem; --vague-phase: -4.8s; }
.univers-palette__couleur:nth-child(5) { --vague-decalage: 0.5rem;   --vague-phase: -6.4s; }
.univers-palette__couleur:nth-child(6) { --vague-decalage: 0.75rem;  --vague-phase: -8s; }

@media (prefers-reduced-motion: no-preference) {
  .univers-palette__couleur {
    animation: univers-vague 8s ease-in-out var(--vague-phase) infinite alternate;
  }
}

@keyframes univers-vague {
  from { transform: translateY(-0.75rem); }
  to   { transform: translateY(0.75rem); }
}

.univers-palette__pastille {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(34, 24, 28, 0.15);
  margin-block-end: var(--espace-xxs);
}

.univers-palette__pastille--fond          { background-color: var(--couleur-fond); }
.univers-palette__pastille--texte         { background-color: var(--couleur-texte); }
.univers-palette__pastille--surface-douce { background-color: var(--couleur-surface-douce); }
.univers-palette__pastille--accent-chaud  { background-color: var(--couleur-accent-chaud); }
.univers-palette__pastille--accent-fort-1 { background-color: var(--couleur-accent-fort-1); }
.univers-palette__pastille--accent-fort-2 { background-color: var(--couleur-accent-fort-2); }

.univers-palette__nom {
  font-family: var(--police-titre);
  font-size: var(--taille-texte-l);
}

.univers-palette__role {
  font-size: var(--taille-texte-petit);
  line-height: 1.4;
}

.univers-logo {
  width: min(18rem, 70%);
}

/* Deux paragraphes presque carrés côte à côte, le logo à leur droite. */
.univers-logo-bloc {
  display: grid;
  gap: var(--espace-m);
  margin-block-start: var(--espace-m);
}

@media (min-width: 768px) {
  .univers-logo-bloc {
    grid-template-columns: repeat(2, minmax(0, 15rem)) minmax(0, 15rem);
    align-items: start;
    gap: var(--espace-m) var(--espace-l);
  }
  .univers-logo-bloc .univers-logo {
    width: 100%;
  }
}

.univers-traces {
  display: grid;
  gap: var(--espace-m);
  align-items: start;
  margin-block-start: var(--espace-l);
}

.univers-trace {
  max-width: 16rem;
}

.univers-trace img {
  width: 100%;
  height: auto;
}

.univers-trace figcaption {
  margin-block-start: var(--espace-xxs);
  font-size: var(--taille-texte-petit);
}

.univers-etapes,
.univers-criteres,
.univers-details {
  margin-block-start: var(--espace-m);
}

.univers-details {
  max-width: 40rem;
}

.univers-inspirations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--espace-m);
  margin-block-start: var(--espace-m);
}

.univers-inspirations .meta {
  margin-block-end: var(--espace-xxs);
}

.univers-liste li {
  font-size: var(--taille-texte-l);
  padding-block: 0.2rem;
}

.univers-liste li + li {
  margin-block-start: var(--espace-xxs);
}

/* Pourquoi cette référence : en petit sous le nom. */
.univers-liste__pourquoi {
  display: block;
  font-size: var(--taille-texte-petit);
  line-height: 1.4;
  opacity: 0.75;
}

/* Méthode en cascade : chaque étape commence au bout de la flèche de la
   précédente, une ligne plus bas. Mots et flèches sont des éléments à part
   entière : la coulée de couleur (js/methode-coulee.js) les traverse tous. */
.univers-methode {
  display: flex;
  align-items: flex-start;
  max-width: none;
  font-family: var(--police-titre);
  font-size: var(--taille-titre-l);
  line-height: 1.15;
  --marche: 1.15em;
}

.univers-methode__mot { white-space: nowrap; }

/* La traînée passe vite : fondu plus court que celui du nom, pour que
   chaque lettre et chaque flèche atteigne vraiment la couleur. */
.univers-methode .lettre-coulee { transition-duration: var(--duree-courte); }

.univers-methode__fleche {
  display: inline-block;
  margin-inline: 0.2em 0.1em;
  color: var(--couleur-accent-fort-2);
  transform: translateY(0.3em) rotate(35deg) scale(var(--fleche-echelle, 1));
  transition-property: color, transform;
}

/* Coulée cuivre sur une flèche déjà cuivre : la couleur ne change pas, la
   flèche grossit le temps du passage pour qu'on le voie quand même. */
.univers-methode[data-coulee-cuivre] .univers-methode__fleche.is-coulee { --fleche-echelle: 1.35; }

/* Le mot n et la flèche qui le suit descendent de n - 1 marches. */
.univers-methode > :nth-child(3), .univers-methode > :nth-child(4) { margin-block-start: calc(var(--marche) * 1); }
.univers-methode > :nth-child(5), .univers-methode > :nth-child(6) { margin-block-start: calc(var(--marche) * 2); }
.univers-methode > :nth-child(7), .univers-methode > :nth-child(8) { margin-block-start: calc(var(--marche) * 3); }
.univers-methode > :nth-child(9) { margin-block-start: calc(var(--marche) * 4); }

/* Mobile : la cascade ne tient pas en largeur. Une étape par ligne ; la
   flèche, placée sous le début du mot précédent, pointe sur le suivant. */
@media (max-width: 767px) {
  .univers-methode {
    display: grid;
    grid-template-columns: repeat(4, var(--pas)) auto;
    justify-content: start;
    --pas: 1.4em;
  }
  .univers-methode > :nth-child(n) { margin: 0; }
  .univers-methode__fleche { transform: rotate(35deg) scale(var(--fleche-echelle, 1)); justify-self: start; }
  .univers-methode > :nth-child(1) { grid-area: 1 / 1 / 2 / -1; }
  .univers-methode > :nth-child(2) { grid-area: 2 / 1; }
  .univers-methode > :nth-child(3) { grid-area: 2 / 2 / 3 / -1; }
  .univers-methode > :nth-child(4) { grid-area: 3 / 2; }
  .univers-methode > :nth-child(5) { grid-area: 3 / 3 / 4 / -1; }
  .univers-methode > :nth-child(6) { grid-area: 4 / 3; }
  .univers-methode > :nth-child(7) { grid-area: 4 / 4 / 5 / -1; }
  .univers-methode > :nth-child(8) { grid-area: 5 / 4; }
  .univers-methode > :nth-child(9) { grid-area: 5 / 5 / 6 / -1; }
}

@media (min-width: 768px) {
  .univers-palette { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .univers-traces {
    grid-template-columns: minmax(0, 16rem) minmax(0, 34rem);
    gap: var(--espace-l);
  }
}

@media (max-width: 1023px) {
  .univers-section--chaos > .univers-section__corps { margin-inline-start: 15%; }
}

@media (max-width: 767px) {
  .univers-section:nth-of-type(even) .univers-section__texte,
  .univers-section:nth-of-type(even) .univers-section__titre { margin-inline-start: 8%; }
}

@media (min-width: 1024px) {
  .univers-section:nth-of-type(3n + 1) > * { margin-inline-start: var(--colonne); }
  .univers-section:nth-of-type(3n + 2) > * { margin-inline-start: calc(var(--colonne) * 4); }
  .univers-section:nth-of-type(3n)     > * { margin-inline-start: calc(var(--colonne) * 2); }
  .univers-palette {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: calc(var(--colonne) * 9);
  }
  /* 01 : le développement part plus à droite que la phrase forte ; les
     deux colonnes s'écartent jusqu'au bord droit. */
  .univers-section--chaos > .univers-section__corps { margin-inline-start: calc(var(--colonne) * 4); }
}

/* Les étapes partent déjà du décalage de leur section : on ne cumule pas
   avec celui des études de cas, on alterne seulement d'une colonne. */
.univers-section .univers-etapes .projet-etape { margin-inline-start: 0; }

@media (min-width: 768px) {
  .univers-section .univers-etapes .projet-etape:nth-child(even) { margin-inline-start: var(--colonne); }
}

/* -------------------- CHAOS MAÎTRISÉ (desktop) -------------------- */
/* Départs et largeurs variés sur la grille de 12 colonnes, pour les études
   de cas, la vue d'ensemble et les en-têtes des disciplines. Les titres de
   section restent calés en colonne 1 : ils servent d'ancrage au reste. */

@media (min-width: 1024px) {
  /* En-têtes : titre au bord, introduction et image décalées. */
  .projet-header__intro,
  .vue-projets__intro,
  .projet-header__meta { margin-inline-start: calc(var(--colonne) * 2); }
  .projet-header__image { margin-inline-start: var(--colonne); }

  /* Blocs de texte : chaque section repart d'une colonne différente. */
  .projet-bloc { margin-inline-start: var(--colonne); }
  main > section:nth-of-type(2n) .projet-bloc { margin-inline-start: calc(var(--colonne) * 5); }
  main > section:nth-of-type(3n) .projet-bloc { margin-inline-start: calc(var(--colonne) * 3); }

  /* Étapes en escalier. */
  .projet-etape:nth-child(3n + 1) { margin-inline-start: calc(var(--colonne) * 2); }
  .projet-etape:nth-child(3n + 2) { margin-inline-start: calc(var(--colonne) * 5); }
  .projet-etape:nth-child(3n)     { margin-inline-start: calc(var(--colonne) * 3); }

  /* Cadrage et recul : grilles de trois colonnes décalées et étagées. */
  .projet-cadrage { margin-inline-start: var(--colonne); }
  .projet-recul__grille { margin-inline-start: calc(var(--colonne) * 2); }
  .projet-cadrage__item:nth-child(2),
  .projet-recul__item:nth-child(2) { margin-block-start: var(--espace-l); }
  .projet-cadrage__item:nth-child(3),
  .projet-recul__item:nth-child(3) { margin-block-start: var(--espace-m); }

  .projet-role { margin-inline-start: calc(var(--colonne) * 6); }

  /* Galerie : grandes images en retrait, images moitié étagées. */
  .projet-galerie__item--large { grid-column: 2 / span 10; }
  .projet-galerie__item--demi:nth-child(even) { margin-block-start: var(--espace-l); }

  /* Vue d'ensemble : titres de catégorie et en-têtes de bandeau décalés. */
  .vue-projets__categorie:nth-of-type(even) .vue-projets__categorie-titre { padding-inline-start: calc(var(--colonne) * 2); }
  .bandeau:nth-of-type(even) .bandeau__entete { margin-inline-start: calc(var(--colonne) * 5); }
  .bandeau--graphisme .bandeau__entete { margin-inline-start: calc(var(--colonne) * 7); }

  .vue-projets__carte:nth-of-type(1) .vue-projets__carte-image   { grid-column: 2 / span 4; }
  .vue-projets__carte:nth-of-type(1) .vue-projets__carte-contenu { grid-column: 7 / span 5; }
  .vue-projets__carte:nth-of-type(2) .vue-projets__carte-contenu { grid-column: 1 / span 5; }
  .vue-projets__carte:nth-of-type(2) .vue-projets__carte-image   { grid-column: 7 / span 5; }
  .vue-projets__carte:nth-of-type(3) .vue-projets__carte-image   { grid-column: 3 / span 5; }
  .vue-projets__carte:nth-of-type(3) .vue-projets__carte-contenu { grid-column: 9 / span 4; }
}

/* -------------------- CHAOS MAÎTRISÉ (mobile) -------------------- */
/* Même logique que l'accueil : largeurs et bords variés d'un bloc à
   l'autre, retraits ponctuels, texte toujours confortable. */

@media (max-width: 767px) {
  /* Études de cas : blocs de texte et étapes en retrait une fois sur deux. */
  main > section:nth-of-type(2n) .projet-bloc { margin-inline-start: 12%; }
  .projet-etape:nth-child(even) { margin-inline-start: 8%; }
  .projet-role { margin-inline-start: 8%; }

  /* Galerie : images moitié alternées à gauche et à droite, à 85 %. */
  .projet-galerie__item--demi { width: 85%; }
  .projet-galerie__item--demi:nth-child(even) { justify-self: end; }

  /* Vue d'ensemble : en-têtes de bandeau et cartes décalés. */
  .bandeau:nth-of-type(even) .bandeau__entete { margin-inline-start: 15%; }

  .vue-projets__carte:nth-of-type(1) .vue-projets__carte-image { width: 88%; }
  .vue-projets__carte:nth-of-type(2) .vue-projets__carte-image { width: 82%; margin-inline-start: auto; }
  .vue-projets__carte:nth-of-type(2) .vue-projets__carte-contenu { padding-inline-start: 18%; }
  .vue-projets__carte:nth-of-type(3) .vue-projets__carte-image { width: 75%; margin-inline-start: 10%; }
  .vue-projets__carte:nth-of-type(3) .vue-projets__carte-contenu { padding-inline-start: 10%; }

  .vue-projets__carte--logo .vue-projets__carte-image { margin-inline-start: 20%; }
}

/* -------------------- CHAOS MAÎTRISÉ (tablette) -------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .projet-header__intro,
  .vue-projets__intro,
  .projet-header__meta { margin-inline-start: var(--colonne); }

  main > section:nth-of-type(2n) .projet-bloc { margin-inline-start: calc(var(--colonne) * 2); }
  main > section:nth-of-type(3n) .projet-bloc { margin-inline-start: var(--colonne); }
  .projet-etape:nth-child(3n + 2) { margin-inline-start: calc(var(--colonne) * 2); }
  .projet-etape:nth-child(3n)     { margin-inline-start: var(--colonne); }
  .projet-role { margin-inline-start: calc(var(--colonne) * 3); }

  .projet-galerie__item--large { grid-column: 2 / span 11; }
  .projet-galerie__item--demi:nth-child(even) { margin-block-start: var(--espace-m); }

  .bandeau:nth-of-type(even) .bandeau__entete { margin-inline-start: calc(var(--colonne) * 3); }

  .vue-projets__carte:nth-of-type(2) .vue-projets__carte-contenu { grid-column: 2 / span 5; }
  .vue-projets__carte:nth-of-type(3) .vue-projets__carte-image   { grid-column: 2 / span 5; }
  .vue-projets__carte:nth-of-type(3) .vue-projets__carte-contenu { grid-column: 8 / span 5; }
}