/* ==========================================================
   Feuille de styles du portfolio d'Anyssa Lecomte
   Sommaire :
   1. Variables (couleurs, polices, tailles, espacements)
   2. Remise à zéro
   3. Styles de base (corps, titres, textes, liens)
   4. Mise en page (conteneur, sections)
   5. Composants (boutons, étiquettes, vignettes, filtres)
   6. Accessibilité
   7. En-tête et menu
   8. Pied de page
   9. Section d'accueil (hero)
   10. Section Projets
   11. Lecteurs et bibliothèques (fenêtres projets)
   12. Fenêtres projets (accueil)
   13. Section À propos
   14. Boutons des fenêtres et icônes des réseaux
   15. Extraits vidéo animés sur les cartes
   16. Page de texte (mentions légales)
   17. Showreel dans la carte de l'accueil
   ========================================================== */


/* ----------------------------------------------------------
   1. VARIABLES
   Toutes les valeurs du design sont déclarées ici, une seule fois.
   Pour changer une couleur sur tout le site, on modifie une ligne.
   ---------------------------------------------------------- */
:root {
  /* Palette tirée du portfolio PDF */
  --vert-fonce: #242B1F;   /* couleur principale */
  --creme: #F2EFE9;        /* fond papier (valeur estimée) */
  --taupe: #CBC5B5;        /* détails : filets, séparateurs (valeur estimée) */

  /* Nuances pour les textes secondaires (contraste vérifié, supérieur à 4,5:1) */
  --vert-doux: #565C50;    /* texte secondaire sur fond crème */
  --creme-doux: #BDBAB0;   /* texte secondaire sur fond vert */

  /* Couleurs "actives" : elles changent selon le fond de la section.
     Par défaut, on est sur fond crème. */
  --fond: var(--creme);
  --texte: var(--vert-fonce);
  --texte-secondaire: var(--vert-doux);

  /* Polices */
  --police-titre: "Cormorant Garamond", Georgia, serif;
  --police-texte: "Inter", Arial, sans-serif;

  /* Tailles de titres : clamp(minimum, taille idéale, maximum).
     La taille grandit avec la largeur de l'écran, entre un mini et un maxi. */
  --taille-h1: clamp(3rem, 1.8rem + 5vw, 6rem);
  --taille-h2: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
  --taille-h3: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --taille-texte: 1rem;          /* 16 px */
  --taille-texte-grand: 1.125rem; /* 18 px, pour les introductions */
  --taille-petit: 0.8125rem;     /* 13 px, pour les étiquettes */

  /* Espacements : une échelle unique pour garder un rythme régulier */
  --espace-xs: 0.5rem;   /*   8 px */
  --espace-s: 1rem;      /*  16 px */
  --espace-m: 1.5rem;    /*  24 px */
  --espace-l: 2.5rem;    /*  40 px */
  --espace-xl: 4rem;     /*  64 px */
  --espace-section: clamp(5rem, 3rem + 8vw, 10rem); /* entre deux sections */

  /* Mise en page */
  --largeur-max: 80rem;  /* 1280 px : largeur maximale du contenu */
  --marge-laterale: clamp(1rem, 0.5rem + 3vw, 3rem);

  /* Arrondis */
  --arrondi: 1.5rem;     /* images et cartes */
  --arrondi-pilule: 999px; /* boutons et étiquettes en forme de pilule */

  /* Hauteur de l'en-tête fixe */
  --hauteur-en-tete: 5rem;

  /* Animation */
  --transition: 0.25s ease;
}


/* ----------------------------------------------------------
   2. REMISE À ZÉRO
   Les navigateurs ajoutent des marges par défaut, différentes
   de l'un à l'autre. On les retire pour partir d'une base propre.
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box; /* la largeur inclut les bordures et marges internes */
  margin: 0;
  padding: 0;
}

img,
video,
svg {
  display: block;
  max-width: 100%; /* une image ne dépasse jamais de son conteneur */
  height: auto;
}

/* Les champs de formulaire reprennent la police du site */
button,
input,
textarea,
select {
  font: inherit;
}


/* ----------------------------------------------------------
   3. STYLES DE BASE
   ---------------------------------------------------------- */
html {
  scroll-behavior: smooth; /* défilement doux quand on clique sur un lien du menu */
  /* Quand on arrive sur une section, on laisse la place de l'en-tête fixe
     pour que le titre ne soit pas caché dessous */
  scroll-padding-top: var(--hauteur-en-tete);
}

body {
  background-color: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* lissage des polices sur Mac */
}

/* Titres : Cormorant Garamond */
h1,
h2,
h3 {
  font-family: var(--police-titre);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance; /* équilibre la longueur des lignes : évite un mot seul en fin de titre */
}

h1 { font-size: var(--taille-h1); }
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); line-height: 1.15; }

/* Mot mis en valeur dans un titre : Cormorant en italique.
   Utilisation : <h2>Mes <em>projets</em> récents</h2> */
h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 400;
}

p {
  max-width: 65ch; /* environ 65 caractères par ligne : confortable à lire */
}

/* Texte d'introduction, un peu plus grand */
.texte-intro {
  font-size: var(--taille-texte-grand);
  color: var(--texte-secondaire);
}

/* Texte secondaire (légendes, détails) */
.texte-secondaire {
  color: var(--texte-secondaire);
}

a {
  color: inherit;
  text-underline-offset: 0.2em; /* soulignement un peu décollé du texte */
}


/* ----------------------------------------------------------
   4. MISE EN PAGE
   ---------------------------------------------------------- */

/* Conteneur : centre le contenu et limite sa largeur */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;               /* centrage horizontal */
  padding-inline: var(--marge-laterale);
}

/* Section : grand espace vertical, comme chez YALP */
.section {
  padding-block: var(--espace-section);
  background-color: var(--fond);
  color: var(--texte);
}

/* Section sombre : on redéfinit simplement les couleurs "actives".
   Tous les éléments à l'intérieur s'adaptent automatiquement. */
.section--sombre {
  --fond: var(--vert-fonce);
  --texte: var(--creme);
  --texte-secondaire: var(--creme-doux);
  background-color: var(--fond);
  color: var(--texte);
}

/* Garde plusieurs éléments sur la même ligne (ex. : dernier mot + étoile) */
.sans-coupure {
  white-space: nowrap;
}

/* Filet de séparation décoratif, couleur taupe */
.filet {
  border: 0;
  border-top: 1px solid var(--taupe);
}


/* ----------------------------------------------------------
   5. COMPOSANTS
   ---------------------------------------------------------- */

/* Bouton en pilule : base commune.
   Fonctionne sur un <a> comme sur un <button>. */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--texte);
  border-radius: var(--arrondi-pilule);
  font-family: var(--police-texte);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

/* Bouton plein : fond de la couleur du texte, texte de la couleur du fond.
   Sur fond crème il est vert, sur fond vert il est crème. */
.bouton--plein {
  background-color: var(--texte);
  color: var(--fond);
}

.bouton--plein:hover {
  background-color: transparent;
  color: var(--texte);
}

/* Bouton contour : transparent avec une bordure fine */
.bouton--contour {
  background-color: transparent;
  color: var(--texte);
}

.bouton--contour:hover {
  background-color: var(--texte);
  color: var(--fond);
}

/* Étiquette : petit repère en majuscules au-dessus d'un titre */
.etiquette {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--texte);
  border-radius: var(--arrondi-pilule);
  font-size: var(--taille-petit);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* Vignette de projet (bandeau de l'accueil et grille des projets).
   Toute la vignette est un lien : image + nom.
   Au survol ou au clavier : contour, halo et léger soulèvement. */
.vignette {
  display: block;
  text-decoration: none;
}

/* Au clavier, le contour classique est remplacé par le contour et le halo ci-dessous */
.vignette:focus-visible {
  outline: none;
}

.vignette__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: var(--espace-s);
  border-radius: calc(var(--arrondi) * 0.6);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* L'image remplit le cadre sans être déformée */
.vignette__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contour + halo lumineux + léger soulèvement.
   La couleur est celle du texte : crème sur fond vert, vert sur fond crème
   (comme les boutons pleins). color-mix crée une version transparente. */
.vignette:hover .vignette__image,
.vignette:focus-visible .vignette__image {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 2px var(--texte),                                            /* contour net */
    0 0 1.5rem 0.25rem color-mix(in srgb, var(--texte) 35%, transparent); /* halo diffus */
}

/* Le nom prend la couleur du texte principal et se souligne */
.vignette__nom {
  transition: color var(--transition);
}

.vignette:hover .vignette__nom,
.vignette:focus-visible .vignette__nom {
  color: var(--texte);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Si les animations sont réduites : contour et halo, sans soulèvement */
@media (prefers-reduced-motion: reduce) {
  .vignette:hover .vignette__image,
  .vignette:focus-visible .vignette__image {
    transform: none;
  }
}

/* Filtre en pilule (section Projets).
   aria-pressed="true" indique le filtre actif : il devient plein. */
.filtre {
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--texte);
  border-radius: var(--arrondi-pilule);
  background-color: transparent;
  color: var(--texte);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.filtre:hover,
.filtre[aria-pressed="true"],
.filtre[aria-selected="true"] {
  background-color: var(--texte);
  color: var(--fond);
}

/* ----------------------------------------------------------
   6. ACCESSIBILITÉ
   ---------------------------------------------------------- */

/* Contour bien visible quand on navigue au clavier (touche Tab).
   :focus-visible ne s'affiche pas lors d'un clic à la souris. */
:focus-visible {
  outline: 2px solid var(--texte);
  outline-offset: 4px;
}

/* Lien d'évitement : caché au-dessus de l'écran,
   il descend quand il reçoit le focus avec la touche Tab */
.lien-evitement {
  position: absolute;
  top: var(--espace-s);
  left: var(--espace-s);
  z-index: 200;
  padding: var(--espace-xs) var(--espace-s);
  border-radius: var(--arrondi-pilule);
  background-color: var(--vert-fonce);
  color: var(--creme);
  transform: translateY(-200%);
}

.lien-evitement:focus {
  transform: translateY(0);
}

/* Texte lisible uniquement par les lecteurs d'écran */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Si la personne a demandé à son système de réduire les animations,
   on les désactive. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ----------------------------------------------------------
   7. EN-TÊTE ET MENU
   Principe : on écrit d'abord la version mobile,
   puis on adapte pour les grands écrans (à partir de 48rem = 768 px).
   ---------------------------------------------------------- */

/* L'en-tête est toujours vert foncé (comme chez YALP)
   et reste collé en haut de l'écran pendant le défilement */
.en-tete {
  --fond: var(--vert-fonce);
  --texte: var(--creme);
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--fond);
  color: var(--texte);
}

/* Le nom à gauche, le menu à droite */
.en-tete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hauteur-en-tete);
}

/* Nom en guise de logo */
.en-tete__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  font-family: var(--police-titre);
  font-size: 1.625rem;
  font-weight: 500;
  text-decoration: none;
}

/* Petite étoile du PDF */
.etoile {
  width: 0.7em;
  height: 0.7em;
  fill: currentColor; /* prend la couleur du texte */
}

/* --- Bouton burger (mobile) : deux lignes qui forment une croix --- */
.menu-bouton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;  /* 44 px : taille minimale conseillée pour une zone tactile */
  height: 44px;
  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;
}

.menu-bouton__ligne {
  display: block;
  height: 1.5px;
  background-color: var(--texte);
  transition: transform var(--transition);
}

/* Menu ouvert : les deux lignes pivotent pour dessiner une croix */
/* nth-child(2) et (3) : le 1er enfant du bouton est le texte invisible « Ouvrir le menu » */
.menu-ouvert .menu-bouton__ligne:nth-child(2) {
  transform: translateY(4.25px) rotate(45deg);
}

.menu-ouvert .menu-bouton__ligne:nth-child(3) {
  transform: translateY(-4.25px) rotate(-45deg);
}

/* --- Menu mobile : plein écran, vert foncé --- */
.navigation {
  position: fixed;
  inset: 0;                  /* occupe tout l'écran */
  z-index: -1;               /* passe sous le nom et le bouton de l'en-tête */
  display: flex;
  align-items: center;
  padding: var(--hauteur-en-tete) var(--marge-laterale);
  background-color: var(--vert-fonce);
  /* Caché par défaut. "visibility" empêche aussi d'atteindre
     les liens au clavier quand le menu est fermé. */
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition), visibility var(--transition);
}

.menu-ouvert .navigation {
  visibility: visible;
  opacity: 1;
}

.navigation__liste {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-m);
  list-style: none;
}

/* Grands liens en Cormorant dans le menu mobile */
.navigation__lien {
  font-family: var(--police-titre);
  font-size: var(--taille-h2);
  line-height: 1.1;
  text-decoration: none;
}

.navigation__liste .bouton {
  margin-top: var(--espace-m);
}

/* Empêche la page de défiler derrière le menu ouvert */
body.defilement-bloque {
  overflow: hidden;
}

/* --- Grands écrans : menu classique en ligne --- */
@media (min-width: 48rem) {
  .menu-bouton {
    display: none; /* plus besoin du burger */
  }

  .navigation {
    position: static;
    z-index: auto;
    padding: 0;
    background: none;
    visibility: visible;
    opacity: 1;
    transition: none;
  }

  .navigation__liste {
    flex-direction: row;
    align-items: center;
    gap: var(--espace-l);
  }

  .navigation__lien {
    font-family: var(--police-texte);
    font-size: 0.9375rem;
    font-weight: 500;
  }

  /* Soulignement au survol */
  .navigation__lien:hover {
    text-decoration: underline;
  }

  .navigation__liste .bouton {
    margin-top: 0;
  }
}


/* ----------------------------------------------------------
   8. PIED DE PAGE
   ---------------------------------------------------------- */
.pied {
  padding-bottom: var(--espace-l); /* moins d'espace tout en bas */
}

/* Grande phrase d'accroche */
.pied__accroche {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-l);
  margin-bottom: var(--espace-xl);
}

.pied__accroche h2 {
  font-size: var(--taille-h1);
  max-width: 14ch; /* limite la longueur des lignes pour un bel effet de bloc */
}

/* Sur fond vert, le filet taupe serait trop visible : on l'adoucit */
.pied .filet {
  border-color: rgba(242, 239, 233, 0.2);
}

/* Colonnes : empilées sur mobile, côte à côte sur grand écran */
.pied__colonnes {
  display: grid;
  gap: var(--espace-l);
  padding-block: var(--espace-xl);
}

@media (min-width: 48rem) {
  .pied__colonnes {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Titre de colonne : petit, en majuscules */
.pied__titre {
  margin-bottom: var(--espace-s);
  font-family: var(--police-texte);
  font-size: var(--taille-petit);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

.pied__liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  list-style: none;
}

.pied__liste a {
  text-decoration: none;
}

.pied__liste a:hover {
  text-decoration: underline;
}

/* Ligne du bas : copyright et mentions légales */
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espace-s);
  font-size: var(--taille-petit);
}


/* ----------------------------------------------------------
   9. SECTION D'ACCUEIL (HERO)
   Composition inspirée de YALP : grand titre centré,
   puis une carte crème à gauche et le texte à droite,
   puis un bandeau de projets qui défile.
   ---------------------------------------------------------- */
.accueil {
  padding-top: var(--espace-l);
  padding-bottom: var(--espace-l);
  overflow: hidden; /* le bandeau qui défile ne dépasse pas de l'écran */
}

/* --- Titre centré --- */
.accueil__titre {
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--espace-xl);
  text-align: center;
}

/* Étoile en fin de titre, qui tourne lentement */
.etoile--titre {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-left: 0.15em;
  vertical-align: 0.05em;
  animation: rotation 12s linear infinite;
}

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

/* --- Grille : carte à gauche, texte à droite --- */
.accueil__grille {
  display: grid;
  gap: var(--espace-l);
  align-items: center;
}

@media (min-width: 60rem) {
  .accueil__grille {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--espace-xl);
  }
}

/* --- Carte crème --- */
.accueil__carte {
  /* La carte est claire : on remet les couleurs du fond crème */
  --fond: var(--creme);
  --texte: var(--vert-fonce);
  position: relative; /* repère pour placer la pastille */
  display: grid;
  gap: var(--espace-m);
  padding: var(--espace-l) var(--espace-m) var(--espace-m);
  border-radius: var(--arrondi);
  background-color: var(--fond);
  color: var(--texte);
}

@media (min-width: 36rem) {
  .accueil__carte {
    grid-template-columns: 1fr 13rem; /* phrase à gauche, image à droite */
    align-items: center;
    padding: var(--espace-m) var(--espace-m) var(--espace-m) var(--espace-xl);
  }
}

/* Pastille ronde taupe qui chevauche le bord de la carte */
.accueil__pastille {
  position: absolute;
  top: -1.75rem;
  left: var(--espace-m);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--taupe);
  color: var(--vert-fonce);
}

.accueil__pastille .etoile {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 36rem) {
  .accueil__pastille {
    top: var(--espace-l);
    left: -1.75rem;
  }
}

/* Phrase qui change : "Des identités visuelles", "Des vidéos…" */
.accueil__phrase {
  font-family: var(--police-titre);
  font-size: var(--taille-h3);
  font-weight: 500;
  line-height: 1.15;
  min-height: 2.3em; /* réserve la place de 2 lignes : la carte ne "saute" pas */
}

.accueil__phrase em {
  font-style: italic;
  font-weight: 400;
}

/* Mot qui change : fondu lors du changement (géré par le JavaScript) */
.accueil__mots {
  transition: opacity 0.4s ease;
}

.accueil__mots.est-cache {
  opacity: 0;
}

/* Image de la carte, verticale */
.accueil__image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: calc(var(--arrondi) * 0.6);
}

.accueil__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Texte et bouton à droite --- */
.accueil__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-m);
}

/* --- Bandeau de projets qui défile --- */
.bandeau {
  margin-top: var(--espace-l);
  /* Espace au-dessus et en dessous : sans lui, le masque ci-dessous
     couperait le halo lumineux des projets survolés */
  padding-block: var(--espace-m);
  /* Les bords gauche et droit s'estompent en douceur */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* La "piste" contient deux fois la liste des projets, côte à côte.
   Elle glisse vers la gauche de la moitié de sa largeur, puis recommence :
   comme la 2e moitié est identique à la 1re, la boucle est invisible. */
.bandeau__piste {
  display: flex;
  width: max-content;
  animation: defilement 40s linear infinite;
}

.bandeau__liste {
  display: flex;
  gap: var(--espace-m);
  padding-right: var(--espace-m); /* même écart entre les deux copies */
  list-style: none;
}

@keyframes defilement {
  to { transform: translateX(-50%); }
}

/* Pause quand la souris survole le bandeau,
   ou quand un projet est sélectionné au clavier (:focus-within) */
.bandeau:hover .bandeau__piste,
.bandeau:focus-within .bandeau__piste {
  animation-play-state: paused;
}

.bandeau__projet {
  width: clamp(13rem, 22vw, 18rem);
}


.bandeau__nom {
  font-size: 0.875rem;
  color: var(--texte-secondaire);
  transition: color var(--transition);
}

/* --- Bouton pause des animations --- */
.accueil__pause {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--espace-m);
}

.bouton--petit {
  padding: 0.5rem 1rem;
  font-size: var(--taille-petit);
}

/* Quand on clique sur "Pause", toutes les animations du hero s'arrêtent */
.accueil.animations-en-pause .bandeau__piste,
.accueil.animations-en-pause .etoile--titre {
  animation-play-state: paused;
}

/* --- Bloc de couleur provisoire, en attendant les images --- */
.provisoire {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--espace-xs);
  background-color: var(--taupe);
  color: var(--vert-fonce);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

/* Si les animations sont réduites par le système :
   le bandeau devient une simple liste qu'on fait défiler à la main,
   et le bouton pause, inutile, disparaît */
@media (prefers-reduced-motion: reduce) {
  .bandeau {
    overflow-x: auto;
  }

  .accueil__pause {
    display: none;
  }
}


/* ----------------------------------------------------------
   10. SECTION PROJETS
   Titre, filtres en pilule, puis grille de vignettes :
   1 colonne sur mobile, 2 sur tablette, 3 sur ordinateur.
   ---------------------------------------------------------- */
.projets__entete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-m);
  margin-bottom: var(--espace-l);
}

.projets__filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-l);
}

.projets__grille {
  display: grid;
  gap: var(--espace-l) var(--espace-m); /* écart vertical, puis horizontal */
  list-style: none;
}

@media (min-width: 36rem) {
  .projets__grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  .projets__grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Nom du projet, en Cormorant */
.projets__nom {
  font-size: 1.625rem;
  line-height: 1.2;
}

/* Disciplines sous le nom */
.projets__categories {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--texte-secondaire);
}

/* Carte masquée par un filtre */
.projets__carte[hidden] {
  display: none;
}


/* ----------------------------------------------------------
   11. LECTEURS ET BIBLIOTHÈQUES (FENÊTRES PROJETS)
   Le grand lecteur (image ou vidéo) et sa bibliothèque (slider),
   utilisés dans les fenêtres projets de l'accueil.
   ---------------------------------------------------------- */

/* --- Lecteur vidéo --- */
.lecteur {
  margin-bottom: var(--espace-l);
}

/* L'écran garde toujours la proportion 16/9, quel que soit son contenu
   (bloc provisoire, miniature YouTube ou vidéo) */
.lecteur__ecran {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: var(--espace-s);
  border-radius: var(--arrondi);
  background-color: var(--vert-fonce);
}

/* Une image affichée dans le lecteur : visible en entier (sans recadrage) */
.lecteur__ecran > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* La vidéo (YouTube ou du site) et son aperçu remplissent tout l'écran */
.lecteur__ecran iframe,
.lecteur__ecran video,
.lecteur__lancer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Vidéo du site : visible en entier, sur fond noir (formats carré ou vertical) */
.lecteur__ecran video {
  object-fit: contain;
  background-color: #000;
}

/* Miniature cliquable avant le lancement de la vidéo */
.lecteur__lancer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  cursor: pointer;
}

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

/* Lien sous une galerie (ex. : « Voir plus sur TikTok ») */
.galerie__lien {
  margin-top: var(--espace-xs);
}

/* Vidéo TikTok : lecteur vertical (9/16), centré dans l'écran */
.lecteur__ecran .lecteur__tiktok {
  right: auto;
  left: 50%;
  width: auto;
  aspect-ratio: 9 / 16;
  transform: translateX(-50%);
}

/* Aperçu vertical (TikTok) : affiché en entier, pas recadré */
.lecteur__lancer--vertical img {
  object-fit: contain;
}

/* Emplacement vidéo provisoire : bloc vert avec un bouton lecture */
.video-provisoire {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--vert-fonce);
}

/* Rond crème, avec un triangle "lecture" dessiné en CSS (::after) */
.video-provisoire__lecture {
  position: relative; /* au-dessus de la miniature */
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--creme);
}

.video-provisoire__lecture::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.15rem; /* triangle fait avec des bordures */
  border-color: transparent transparent transparent var(--vert-fonce);
}

/* Grand lecteur : bouton lecture plus grand */
.video-provisoire--grande .video-provisoire__lecture,
.lecteur__lancer .video-provisoire__lecture {
  width: 5.5rem;
  height: 5.5rem;
}

.video-provisoire--grande .video-provisoire__lecture::after,
.lecteur__lancer .video-provisoire__lecture::after {
  border-width: 0.95rem 0 0.95rem 1.55rem;
}

/* Vignettes de la bibliothèque : petit bouton lecture */
.video-provisoire--petite .video-provisoire__lecture {
  width: 2.5rem;
  height: 2.5rem;
}

.video-provisoire--petite .video-provisoire__lecture::after {
  border-width: 0.45rem 0 0.45rem 0.75rem;
}

.videos__legende {
  font-family: var(--police-titre);
  font-size: 1.5rem;
}

/* --- Bibliothèque des motions (slider) --- */
/* Titre "Bibliothèque" à gauche, flèches à droite */
.bibliotheque__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espace-m);
}

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

/* Flèche ronde, comme les carrousels de YALP */
.fleche {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--texte);
  border-radius: 50%;
  background: none;
  color: var(--texte);
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), opacity var(--transition);
}

.fleche:hover {
  background-color: var(--texte);
  color: var(--fond);
}

/* Flèche désactivée quand on est au début ou à la fin du slider */
.fleche:disabled {
  opacity: 0.3;
  cursor: default;
  background: none;
  color: var(--texte);
}

/* La piste : une rangée de vignettes qui défile horizontalement.
   scroll-snap : le défilement s'arrête toujours pile sur une vignette. */
.bibliotheque__piste {
  display: flex;
  gap: var(--espace-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px var(--espace-xs); /* place pour le contour des vignettes */
  list-style: none;
  scrollbar-width: none; /* cache la barre de défilement (Firefox) */
}

.bibliotheque__piste::-webkit-scrollbar {
  display: none; /* cache la barre de défilement (Chrome, Safari) */
}

.bibliotheque__piste li {
  flex: 0 0 clamp(12rem, 22vw, 16rem); /* largeur fixe de chaque vignette */
  scroll-snap-align: start;
}

/* Chaque motion est un bouton : on retire son apparence par défaut */
.bibliotheque__motion {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bibliotheque__vignette {
  display: block;
  position: relative; /* repère pour placer la miniature */
  aspect-ratio: 16 / 9;
  height: auto;
  margin-bottom: var(--espace-xs);
  overflow: hidden;
  border-radius: calc(var(--arrondi) * 0.6);
  transition: box-shadow var(--transition);
}

/* Image, miniature YouTube ou bloc provisoire : remplit toute la vignette */
.bibliotheque__vignette img,
.bibliotheque__vignette .video-provisoire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Survol, ou motion en cours de lecture : contour de la couleur du texte */
.bibliotheque__motion:hover .bibliotheque__vignette,
.bibliotheque__motion[aria-pressed="true"] .bibliotheque__vignette {
  box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--texte);
}

.bibliotheque__type {
  display: block;
  font-size: var(--taille-petit);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

.bibliotheque__nom {
  font-family: var(--police-titre);
  font-size: 1.25rem;
}

/* Mention "En lecture" après le nom du motion affiché */
.bibliotheque__motion[aria-pressed="true"] .bibliotheque__type::after {
  content: " · En lecture";
  color: var(--texte);
}


/* Si les animations sont réduites : défilement instantané du slider */
@media (prefers-reduced-motion: reduce) {
  .bibliotheque__piste {
    scroll-behavior: auto;
  }
}

/* --- Galeries : disposition compacte ---
   Tout doit tenir dans l'écran sans défiler : la largeur est limitée pour que
   la hauteur de l'image (16/9) ne dépasse pas 72 % de la hauteur de l'écran.
   La classe .galerie--compacte est ajoutée par le JavaScript : la bibliothèque
   devient une rangée de petites vignettes, toujours sous l'image. */
.galerie {
  max-width: calc(72vh * 16 / 9);
  margin-inline: auto;
}

/* Cadre = l'écran + la bibliothèque (créé par le JavaScript) */
.lecteur__cadre {
  position: relative;
  margin-bottom: var(--espace-s);
}

.galerie--compacte .lecteur__ecran {
  margin-bottom: 0;
}

/* Bibliothèque compacte : flèches de chaque côté, petites vignettes au milieu */
.galerie--compacte .bibliotheque {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  margin-top: var(--espace-xs);
}

/* On "ouvre" l'en-tête pour que les flèches deviennent voisines des vignettes */
.galerie--compacte .bibliotheque__entete,
.galerie--compacte .bibliotheque__fleches {
  display: contents;
}

/* Le mot "Bibliothèque" est inutile ici */
.galerie--compacte .bibliotheque__entete .etiquette {
  display: none;
}

/* Flèche "suivant" à droite des vignettes */
.galerie--compacte .fleche[data-direction="1"] {
  order: 2;
}

.galerie--compacte .fleche {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.9375rem;
}

.galerie--compacte .bibliotheque__piste {
  flex: 1;
  min-width: 0; /* permet à la piste de rétrécir et de défiler */
  gap: var(--espace-xs);
  padding: 4px;
}

/* Petites vignettes, sans texte (le titre s'affiche sous l'image) */
.galerie--compacte .bibliotheque__piste li {
  flex: 0 0 4.5rem;
}

.galerie--compacte .bibliotheque__vignette {
  aspect-ratio: 1;
  margin-bottom: 0;
  border-radius: 0.5rem;
}

.galerie--compacte .bibliotheque__type,
.galerie--compacte .bibliotheque__nom {
  display: none;
}

/* Grand écran : vignettes un peu plus grandes.
   La bibliothèque reste toujours sous l'image (choix d'Anyssa). */
@media (min-width: 48rem) {
  .galerie--compacte .bibliotheque__piste li {
    flex-basis: 5rem;
  }
}


/* ----------------------------------------------------------
   12. FENÊTRES PROJETS (ACCUEIL)
   Fenêtre (balise <dialog>) au centre de l'écran, par-dessus la page
   assombrie. Texte à gauche, lecteur à droite.
   ---------------------------------------------------------- */

/* La fenêtre (fond vert foncé grâce à la classe .section--sombre) */
.fenetre-projet {
  width: min(72rem, 100% - 2 * var(--marge-laterale));
  max-height: calc(100dvh - 2rem); /* jamais plus haute que l'écran */
  margin: auto;                    /* centrée */
  padding: 0;
  border: 1px solid rgba(242, 239, 233, 0.15); /* fin contour crème pour qu'elle se détache */
  border-radius: var(--arrondi);
  overflow-y: auto;                /* si le contenu est trop haut, il défile */
}

/* Le fond assombri derrière la fenêtre */
.fenetre-projet::backdrop {
  background-color: rgba(20, 24, 17, 0.75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Apparition en douceur */
.fenetre-projet[open] {
  animation: apparition 0.3s ease;
}

@keyframes apparition {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

/* Contenu : empilé sur mobile, texte à gauche et lecteur à droite sur grand écran */
.fenetre-projet__contenu {
  position: relative; /* repère pour placer le bouton ✕ */
  display: grid;
  gap: var(--espace-l);
  padding: var(--espace-xl) var(--espace-m) var(--espace-m);
}

@media (min-width: 60rem) {
  .fenetre-projet__contenu {
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: var(--espace-xl);
    padding: var(--espace-xl);
  }
}

/* Bouton ✕ rond, en haut à droite */
.fenetre-projet__fermer {
  position: absolute;
  top: var(--espace-s);
  right: var(--espace-s);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--texte);
  border-radius: 50%;
  background: none;
  color: var(--texte);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.fenetre-projet__fermer:hover {
  background-color: var(--texte);
  color: var(--fond);
}

/* Colonne de texte */
.fenetre-projet__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-m);
}

.fenetre-projet__titre {
  font-size: var(--taille-h2);
}

/* Le lecteur prend toute la largeur de sa colonne */
.fenetre-projet .galerie {
  width: 100%;
}

/* Colonne des médias (projets à plusieurs typologies) : onglets + galeries */
.fenetre-projet__medias {
  min-width: 0;
}

.fenetre-projet__onglets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-s);
}

/* Écran un peu plus sombre que la fenêtre, pour qu'il se détache */
.fenetre-projet .lecteur__ecran,
.fenetre-projet .video-provisoire {
  background-color: #1a1f16;
}

/* Liste à coches : une coche crème dans un rond avant chaque ligne */
.liste-coches {
  display: grid;
  gap: var(--espace-xs);
  list-style: none;
}

.liste-coches li {
  position: relative;
  padding-left: 2rem;
}

.liste-coches li::before {
  content: "✓";
  position: absolute;
  top: 0.15em;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--texte);
  color: var(--fond);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Lecteur plus petit dans la fenêtre : vignettes et bouton lecture réduits */
.fenetre-projet .galerie--compacte .bibliotheque__piste li {
  flex-basis: 4rem;
}

.fenetre-projet .video-provisoire--grande .video-provisoire__lecture,
.fenetre-projet .lecteur__lancer .video-provisoire__lecture {
  width: 4rem;
  height: 4rem;
}



/* ----------------------------------------------------------
   13. SECTION À PROPOS
   Portrait à gauche, présentation à droite, puis trois colonnes :
   expertises, logiciels, expérience.
   ---------------------------------------------------------- */

/* La section suit la section Projets, elle aussi crème :
   on les sépare par un filet plutôt que par un grand espace */
.a-propos-section {
  --filet: var(--taupe); /* couleur des filets et bordures de la section */
  padding-top: 0;
}

.a-propos-section > .conteneur {
  padding-top: var(--espace-section);
  border-top: 1px solid var(--filet);
}

/* --- Portrait + texte --- */
.a-propos {
  display: grid;
  gap: var(--espace-l);
  align-items: center;
  margin-bottom: var(--espace-xl);
}

@media (min-width: 60rem) {
  .a-propos {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--espace-xl);
  }
}

.a-propos__portrait {
  position: relative; /* repère pour placer la pastille */
  max-width: 28rem;
}

.a-propos__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--arrondi);
}

/* Pastille taupe avec l'étoile, qui chevauche le coin du portrait */
.a-propos__pastille {
  position: absolute;
  right: -1.25rem;
  bottom: var(--espace-l);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--taupe);
  color: var(--vert-fonce);
}

.a-propos__pastille .etoile {
  width: 1.6rem;
  height: 1.6rem;
}

.a-propos__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-m);
}

/* --- Trois colonnes (empilées sur mobile) --- */
.a-propos__colonnes {
  display: grid;
  gap: var(--espace-l);
  padding-top: var(--espace-l);
  border-top: 1px solid var(--filet);
}

@media (min-width: 48rem) {
  .a-propos__colonnes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Grand écran : les 4 colonnes côte à côte */
@media (min-width: 60rem) {
  .a-propos__colonnes {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Titre de colonne : petit, en majuscules (comme dans le pied de page) */
.a-propos__titre-colonne {
  margin-bottom: var(--espace-s);
  font-family: var(--police-texte);
  font-size: var(--taille-petit);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

.a-propos__liste {
  display: grid;
  gap: var(--espace-xs);
  list-style: none;
}

/* Logiciels : petites pilules à bordure fine */
.a-propos__logiciels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  list-style: none;
}

.a-propos__logiciels li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--filet);
  border-radius: var(--arrondi-pilule);
  font-size: 0.875rem;
}

/* Expérience : frise verticale, un point par poste */
.frise {
  display: grid;
  gap: var(--espace-m);
  list-style: none;
  border-left: 1px solid var(--filet);
}

.frise li {
  position: relative;
  display: grid;
  padding-left: var(--espace-m);
}

/* Le point sur la ligne de la frise */
.frise li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: -0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--texte);
}

.frise__dates {
  font-size: var(--taille-petit);
  color: var(--texte-secondaire);
}

.frise__poste {
  font-weight: 500;
}

.frise__entreprise {
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}



/* ----------------------------------------------------------
   14. BOUTONS DES FENÊTRES ET ICÔNES DES RÉSEAUX
   ---------------------------------------------------------- */

/* Fenêtres projets : « Me contacter » et « Découvrir le projet » côte à côte */
.fenetre-projet__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
}

/* Pied de page : le bouton « Me contacter » suivi des icônes des réseaux */
.pied__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-s);
}

/* Icône ronde, à bordure fine (comme les flèches du slider) */
.icone-reseau {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--texte);
  border-radius: 50%;
  color: var(--texte);
  transition: background-color var(--transition), color var(--transition);
}

.icone-reseau:hover {
  background-color: var(--texte);
  color: var(--fond);
}

.icone-reseau svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Bouton optionnel sous le lecteur (data-lien), ex. « Voir l'interview complète » */
.lecteur__lien {
  margin-top: var(--espace-xs);
}

.lecteur__lien[hidden] {
  display: none;
}


/* ----------------------------------------------------------
   15. EXTRAITS VIDÉO ANIMÉS SUR LES CARTES
   La vidéo (ajoutée par main.js, partie 6) est posée sur l'image
   et n'apparaît, en fondu, que lorsqu'elle joue.
   ---------------------------------------------------------- */
.vignette__extrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none; /* le clic passe à la carte */
}

.extrait-actif .vignette__extrait {
  opacity: 1;
}


/* ----------------------------------------------------------
   16. PAGE DE TEXTE (MENTIONS LÉGALES)
   ---------------------------------------------------------- */
.page-texte {
  max-width: 48rem;
}

.page-texte h1 {
  margin-bottom: var(--espace-l);
}

.page-texte h2 {
  margin: var(--espace-l) 0 var(--espace-s);
  font-size: var(--taille-h3);
}

.page-texte p + p {
  margin-top: var(--espace-s);
}

.lien-retour {
  display: inline-block;
  margin-bottom: var(--espace-m);
  font-size: 0.875rem;
  color: var(--texte-secondaire);
}


/* ----------------------------------------------------------
   17. SHOWREEL DANS LA CARTE DE L'ACCUEIL
   La vidéo est horizontale : on l'affiche en entier (16/9) et la
   carte donne plus de place à la vidéo qu'à la phrase animée.
   ---------------------------------------------------------- */
.accueil__image--video {
  position: relative; /* repère pour le bouton du son */
  aspect-ratio: 16 / 9;
  background-color: var(--vert-fonce);
}

.accueil__showreel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 36rem) {
  .accueil__carte:has(.accueil__image--video) {
    grid-template-columns: 0.8fr 1.6fr; /* phrase à gauche, vidéo plus large à droite */
  }
}

/* Bouton rond pour le son, en bas à droite de la vidéo */
.accueil__son {
  position: absolute;
  right: var(--espace-xs);
  bottom: var(--espace-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background-color: rgba(36, 43, 31, 0.7); /* vert foncé transparent */
  color: var(--creme);
  cursor: pointer;
  transition: background-color var(--transition);
}

.accueil__son:hover {
  background-color: var(--vert-fonce);
}

.accueil__son-icone {
  width: 1.25rem;
  height: 1.25rem;
}

/* Son coupé : on montre la croix ; son activé : on montre les ondes */
.accueil__son-on,
.accueil__son[aria-pressed="true"] .accueil__son-off {
  display: none;
}

.accueil__son[aria-pressed="true"] .accueil__son-on {
  display: inline;
}