/* ═══════════════════════════════════════════════════════════════════════
   NIEL ARMENGAUD — PORTFOLIO 2026
   Feuille de style. Tout ce qui est réglable est regroupé dans le bloc
   « RÉGLAGES » ci-dessous : tu peux y toucher sans rien casser.
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   TYPOGRAPHIE — Neue Haas Grotesk Display, 2 graisses
   ───────────────────────────────────────────────────────────────────────
   Fichiers installés dans assets/fonts/ :
       NeueHaasDisplay-Roman.woff   → graisse normale (--graisse-normale)
       NeueHaasDisplay-Mediu.woff   → graisse forte   (--graisse-forte)
   Pour changer de graisse plus tard, remplace le fichier et son nom ici.
   ─────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("../assets/fonts/NeueHaasDisplay-Roman.woff") format("woff");
  font-weight: 400;               /* Roman */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("../assets/fonts/NeueHaasDisplay-Mediu.woff") format("woff");
  font-weight: 500;               /* Medium */
  font-style: normal;
  font-display: swap;
}

/* ───────────────────────────────────────────────────────────────────────
   RÉGLAGES  —  modifie les valeurs à droite des « : »
   ─────────────────────────────────────────────────────────────────────── */

:root {

  /* Couleurs */
  --noir:          #000000;
  --blanc:         #ffffff;
  --gris-attente:  #c8c8c8;   /* aplat gris affiché tant qu'il n'y a pas d'image */

  /* Grille — 12 colonnes, comme tes maquettes */
  --colonnes:      12;
  --marge:         clamp(8px, 1.5vw, 12px);    /* marge gauche/droite/haut/bas de la page */
  --gouttiere:     clamp(10px, 0.8vw, 18px);   /* espace entre deux colonnes */
  --gouttiere-v:   clamp(40px, 6.2vw, 126px);  /* espace vertical entre deux rangées d'images */

  /* Sur les gabarits « diptyque » et « pleine largeur », le texte est placé
     SOUS les images. Le grand blanc prévu entre deux rangées d'images est
     alors de trop : le titre part trop bas et se décroche de son image.
     Ce réglage rapproche le texte, à la même distance que l'espace entre
     deux colonnes. Augmente-le pour redescendre le texte. */
  --ecart-image-texte: var(--gouttiere);
  --espace-bloc:   clamp(48px, 5.3vw, 110px);  /* espace vertical entre deux projets */
  /* Le blanc entre la ligne de navigation et le début du contenu.
     Il sert aux pages Projets et Contact. */
  --haut-contenu:  clamp(90px, 7.7vw, 160px);

  /* Graisses — les 2 seules disponibles */
  --graisse-normale: 400;   /* Roman  — pied de page */
  --graisse-forte:   500;   /* Medium — navigation, titres, descriptions */

  /* ── LE LOGO ────────────────────────────────────────────────────────
     Sa taille tient dans UN SEUL chiffre : le nombre de colonnes qu'il
     occupe, sur les 12 de la grille. 6 = la moitié de la page, comme sur
     ta référence. 12 = pleine largeur, comme sur la page Contact.
     Sa hauteur suit toute seule : le dessin garde ses proportions. */
  --logo-colonnes:  3;

  /* Le blanc entre le bas du logo et les mots de la navigation. Il ne sert
     que là où les mots passent SOUS le logo : page Contact et téléphone.
     Ailleurs ils sont à côté de lui. */
  --logo-nav-ecart: clamp(4px, 0.45vw, 8px);

  /* À quelle hauteur les quatre mots se posent à côté du logo, compté
     depuis le haut du dessin : 0 = tout en haut, 1 = tout en bas.
     0.472 les cale sur le bas de la ligne « NIEL », comme sur ta
     référence. Monte le chiffre pour les descendre. */
  --nav-cale:       0;

  /* Corps de texte (minimum, idéal, maximum) */
  --t-nav:         clamp(10px,  1.20vw,  12px);
  --t-texte:       clamp(10px,  1.07vw,  12px);  /* titres de projet, année, descriptions */
  --t-pied:        clamp(10px,  1.09vw,  12px);

  /* Interlignes */
  --i-texte:       1.20;    /* interligne des descriptions — augmente si tu veux plus d'air */
  --i-pied:        1.30;

  /* Approche (tracking). 0 = kerning optique seul, sans ajout. */
  --approche:      0em;

  /* Largeur maximale d'un paragraphe de description, à l'intérieur de sa colonne */
  --largeur-texte: 22em;

  /* Décalage vertical entre le titre d'un projet et sa description */
  --ecart-titre-desc: clamp(16px, 6.0vw, 20px);

  /* ── Filtres de la page Projets ─────────────────────────────────────
     Les pastilles : gris clair au repos, noires quand elles sont actives. */
  --gris-pilule:       #d4d4d4;   /* fond d'une pastille au repos   */
  --gris-pilule-texte: #a8a8a8;   /* texte d'une pastille au repos  */
  --gris-pilule-active-survol: #3d3d3d;  /* fond d'une pastille DÉJÀ active
                                            que l'on survole : elle s'éclaircit
                                            un peu, pour dire qu'un second clic
                                            la désactivera */

  /* ── Le survol ───────────────────────────────────────────────────────
     Relevé sur ta vidéo de référence : ça réagit vite quand le curseur
     arrive, ça relâche lentement quand il repart. Rapport de 1 à 2,5.
     Ces deux durées servent aux pastilles ET au logo. */
  --survol-entree: 100ms;   /* le curseur arrive : temps pour foncer */
  --survol-sortie: 500ms;   /* le curseur repart : temps pour revenir */

  /* Opacité du logo au survol. Le logo est fondu en « difference » sur le
     fond : baisser son opacité l'éclaircit sans lui donner de couleur.
     0.4 donne un gris moyen (#999) sur fond blanc. Baisse vers 0.2 pour un
     gris plus clair, monte vers 0.6 pour un gris plus soutenu. */
  --logo-survol: 0.2;

  /* Opacité des quatre mots de la navigation au survol — même effet que le
     logo, réglable séparément. 0.2 = très clair, 0.5 = gris moyen, 1 =
     l'effet est désactivé. */
  --nav-survol: 0.2;

  /* Couleur du titre d'un projet quand le curseur passe dessus, sur la page
     Projets. Le titre est cliquable : il ouvre la fenêtre du projet, comme
     ses images. #999999 est le gris moyen du logo. Mets #000000 pour
     désactiver l'effet, ou un gris plus clair comme #bbbbbb. */
  --titre-survol: 0.2;

  --t-pilule:        clamp(10px, 1.07vw, 12px);  /* corps du texte d'une pastille
                                                    (un peu plus petit que la nav,
                                                     relevé sur ta maquette 5) */
  --pilule-hauteur:  clamp(14px, 1.80vw, 18px);  /* hauteur d'une pastille */
  --pilule-flanc:    clamp(7px,  0.60vw, 12px);  /* marge intérieure gauche/droite */
  --pilule-ecart:    clamp(6px,  0.62vw, 12px);  /* espace entre deux pastilles */
  --pilule-rangee:   clamp(8px,  1.39vw, 24px);  /* espace entre les 2 rangées */
  --filtres-ecart:   clamp(10px, 0.93vw, 18px);  /* entre le mot « Filtres » et la 1re rangée */

  /* Le panneau des filtres se déroule du haut vers le bas quand on survole
     « Filtres », et se replie quand le curseur quitte la zone.
     Mets 0ms sur --filtres-deroule pour revenir à l'apparition instantanée. */
  --filtres-deroule: 200ms;
  --filtres-repli:   var(--filtres-deroule);

  /* Flou du reste de la page pendant que le menu des filtres est ouvert.
     Plus la valeur est haute, plus la page derrière devient méconnaissable.
     Mets 0px pour supprimer complètement l'effet. */
  --flou-filtres: 2px;

  /* Flou de la page entière pendant qu'une fenêtre projet est ouverte.
     C'est ce qui donne l'impression que la fenêtre est posée en avant.
     Tout part en flou d'un seul bloc — la page, le logo, la navigation —
     pour qu'aucune démarcation n'apparaisse pendant que la fenêtre monte. */
  --flou-fenetre: 2px;

  /* Le voile flou du haut de la page Projets. Il n'existe que là.
     --voile-haut       jusqu'où descend la zone floue
     --voile-flou       force du flou tout en haut (il s'éteint en descendant)
     --voile-apparition sur combien de pixels de défilement il s'installe

     Ces trois valeurs doivent rester des pixels tout simples : le voile va
     les lire telles quelles. Mets --voile-flou à 0px pour le supprimer. */
  --voile-haut:       90px;
  --voile-flou:        6px;
  --voile-apparition: 200px;

  /* Hauteur libre au-dessus du 1er projet, page Projets uniquement.
     Elle est un peu plus grande que sur les autres pages, et c'est voulu :
     le panneau de filtres ouvert se pose par-dessus la page sans la
     décaler, et doit tenir dans ce blanc sans toucher la 1re image.
     Si tu ajoutes des filtres et qu'une rangée de pastilles passe à la
     ligne, monte cette valeur d'autant.
     Pour l'écart exact de ta référence, mets var(--haut-contenu) : les
     pastilles du bas viendront alors mordre sur la 1re image. */
  --haut-projets:    clamp(85px, 9.7vw, 125px);

  /* ── Fenêtre d'un projet ────────────────────────────────────────────
     Hauteur de la bande blanche laissée libre en haut de la fenêtre.
     C'est la zone dans laquelle on clique pour refermer, et la valeur est
     relevée sur ta maquette 7 (83 px pour un écran de 1440 px de large).
     L'en-tête, moins haut qu'elle, tient tout entier dans cette bande : on
     le voit en flou derrière la fenêtre, sans qu'il la déborde. */
  --haut-bandeau: clamp(50px, 5.75vw, 110px);

  /* Bande blanche FIXE en haut de la fenêtre, entre son bord et la première
     image. Les images défilent dessous : elles ne viennent donc jamais
     toucher la navigation, et l'on distingue toujours le premier plan du
     fond. C'est ta zone rouge. Augmente la valeur pour une bande plus
     épaisse (par exemple : calc(var(--marge) * 2)). */
  --fenetre-haut-blanc: var(--marge);

  /* Ombre portée de la fenêtre, relevée sur ta maquette 7 (43 px d'étalement
     pour une page de 5333 px, soit 0,81 % de la largeur, et 21 % de noir sur
     le bord même). Elle ne se voit qu'en haut : les trois autres côtés
     sortent de l'écran.
     Lecture : décalage horizontal, décalage vertical, flou, couleur.
     Pour une ombre plus douce, baisse le 0.42 ; plus étalée, monte le 1.62vw. */
  --fenetre-ombre: 0 0 clamp(14px, 1.62vw, 28px) rgba(0, 0, 0, 0.42);

  /* Durée de l'ouverture de la fenêtre projet : elle monte du bas de l'écran.
     Monte la valeur pour une arrivée plus lente, descends-la pour plus sec.
     Mets 0ms pour retrouver l'affichage instantané. */
  --fenetre-entree: 300ms;

  /* Durée de la fermeture : la fenêtre redescend par le bas. Elle suit la
     durée d'ouverture ci-dessus. Pour la régler à part, remplace
     var(--fenetre-entree) par une durée à toi, par exemple 150ms. */
  --fenetre-sortie: var(--fenetre-entree);

  /* ── Page Contact ───────────────────────────────────────────────────
     Tout ce bloc est relevé au pixel sur ta maquette Contact.png.
     Les pourcentages sont ceux de la maquette : ils suivent donc la
     largeur de l'écran, comme le reste du site. */

  /* Gris des trois intertitres « Contact : », « Collaborations : »,
     « Services : ». C'est un gris 50 %, mesuré sur la maquette. */
  --gris-intertitre: #7f7f7f;

  /* L'unité de base de la page. Elle vaut 1 % de la largeur de l'écran —
     c'est la proportion de ta maquette. Mais si la fenêtre n'est pas assez
     haute, elle se règle sur la hauteur : toute la page rapetisse alors
     juste ce qu'il faut pour tenir d'un seul coup d'œil, sans défilement.
     Le 10px est un plancher : en dessous le texte serait illisible, et
     mieux vaut alors une page qui défile qu'une page qu'on ne lit plus. */
  --contact-u: max(10px, min(1vw, 1.52vh));

  /* Deux corps de texte : ta maquette n'utilise pas le même pour les
     paragraphes et pour les listes (les listes sont 5 % plus grandes). */
  --t-contact:       calc(var(--contact-u) * 1.040);   /* paragraphes  */
  --t-contact-liste: calc(var(--contact-u) * 1.095);   /* liens, collaborations, services */

  /* Le pas des lignes : l'écart d'une ligne à la suivante. Toute la page
     est réglée dessus, y compris les espaces entre les blocs. */
  --contact-ligne:   calc(var(--contact-u) * 1.3126);

  /* Hauteur libre au-dessus de la première ligne de la présentation.
     Le texte de Contact étant calé sur le BAS de la page, cette valeur
     n'est qu'un minimum : elle ne se voit que si la fenêtre devient très
     courte. */
  --contact-haut:    var(--haut-contenu);

  /* Décalages verticaux, comptés en nombre de lignes. Relevés sur la
     maquette : ils ne tombent pas sur des nombres ronds. */
  --contact-decale-droite:  calc(var(--contact-ligne) * 5.98);   /* « Contact : » sous le début du texte */
  --contact-avant-collabs:  calc(var(--contact-ligne) * 3.38);   /* blanc avant « Collaborations : » */
  --contact-avant-services: calc(var(--contact-ligne) * 8.40);   /* blanc avant « Services : » */
}


/* ───────────────────────────────────────────────────────────────────────
   LES TROIS MESURES DÉDUITES DU LOGO — tu n'as pas à y toucher
   ───────────────────────────────────────────────────────────────────────
   Elles se calculent toutes seules à partir de --logo-colonnes et servent à
   deux choses : poser les mots de la navigation à la bonne hauteur à côté
   du logo, et poser le panneau des filtres juste sous l'en-tête. Sans
   elles il faudrait remesurer à la main à chaque changement de taille.

   Le 14.87 est la forme du dessin : le logo est 14,87 fois plus large que
   haut. Si tu remplaces un jour assets/logoniel.svg par un autre fichier,
   c'est le seul chiffre à corriger ici.
   ─────────────────────────────────────────────────────────────────────── */

/* La page Contact garde le grand logo pleine largeur. */
body[data-page="contact"] { --logo-colonnes: 12; }

body {
  --page-utile:     calc(100vw - var(--marge) * 2);
  --logo-hauteur:   calc((var(--logo-colonnes) * (var(--page-utile) + var(--gouttiere)) / 12
                          - var(--gouttiere)) / 14.87);
  --entete-hauteur: calc(var(--marge) + var(--logo-hauteur));
}


/* ───────────────────────────────────────────────────────────────────────
   BASE
   ─────────────────────────────────────────────────────────────────────── */

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

html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--blanc);
  color: var(--noir);

  /* La page est une colonne : l'en-tête, puis le contenu, qui prend tout
     ce qui reste jusqu'au bas de l'écran. C'est ce qui permet au texte de
     la page Contact de rester collé à la marge du bas, et à la page
     d'accueil de tenir pile dans l'écran. L'en-tête reste accroché en haut
     quand on descend, mais il garde sa place dans cette colonne : le
     contenu ne remonte donc jamais dessous. */
  display: flex;
  flex-direction: column;
  min-height: 100svh;

  font-family: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: var(--graisse-forte);
  font-size: var(--t-texte);
  line-height: var(--i-texte);
  letter-spacing: var(--approche);

  /* Équivalent web du crénage « Optical » d'InDesign */
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img, video { display: block; max-width: 100%; }

main { flex: 1 0 auto; }

::selection { background: var(--noir); color: var(--blanc); }


/* ───────────────────────────────────────────────────────────────────────
   EN-TÊTE — le logo et la navigation, côte à côte
   ───────────────────────────────────────────────────────────────────────

   Accueil et Projets : le logo occupe la moitié gauche de la page
   (6 colonnes sur 12) et les quatre mots sont posés à sa droite, calés sur
   le bas de la ligne « NIEL » — Filtres en colonne 9, les deux liens en 10
   et 11, la langue sur la marge de droite.

   Contact : le logo prend toute la largeur et les mots passent dessous.
   Même chose sur téléphone, où quatre mots ne tiendraient pas à côté du
   logo.

   L'EN-TÊTE RESTE EN PLACE quand on descend dans la page. Le contenu
   défile derrière lui et le logo s'inverse au passage des images. Pour
   qu'il reparte vers le haut avec le reste de la page, supprime les deux
   lignes « position: sticky » et « top: 0 » ci-dessous.
   ─────────────────────────────────────────────────────────────────────── */

.entete {
  /* Les deux lignes qui le maintiennent en haut de l'écran. */
  position: sticky;
  top: 0;

  z-index: 100;
  flex: none;

  display: grid;
  /* minmax(0, 1fr) : les 12 colonnes gardent toutes exactement la même
     largeur, même si un mot est plus large que la sienne. Avec un simple
     « 1fr », une colonne s'élargirait pour faire tenir son mot et
     décalerait toutes les autres. */
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: var(--logo-nav-ecart);   /* ne sert que si les mots passent dessous */
  align-items: start;
  padding: var(--marge) var(--marge) 0;

  font-size: var(--t-nav);
  font-weight: var(--graisse-normale);
  line-height: 1;

  /* L'en-tête s'inverse d'un seul bloc sur ce qu'il y a derrière lui :
     noir sur un fond clair, blanc sur une photo sombre. Les mots sont
     écrits en blanc, le logo est retourné en blanc (filter: invert), puis
     l'ensemble est fondu en « difference » sur l'arrière-plan.
     Ce fondu doit être posé sur .entete elle-même, et le logo doit être
     dedans : le fondu ne traverse pas un conteneur collant. C'est pour
     cette raison que le logo et les mots sont réunis ici.
     Pour un logo et une navigation noirs en permanence, supprime les
     lignes « color » et « mix-blend-mode » ci-dessous, ainsi que la ligne
     « filter » de .logo img. */
  color: var(--blanc);
  mix-blend-mode: difference;

  pointer-events: none;   /* laisse passer les clics vers le diaporama */
}

.entete a,
.entete button { pointer-events: auto; }

/* LE LOGO — fichier vectoriel assets/logoniel.svg.
   Sa taille se règle avec --logo-colonnes, dans les RÉGLAGES : c'est le
   nombre de colonnes qu'il occupe. Sa hauteur suit toute seule. */
.logo {
  grid-column: 1 / span var(--logo-colonnes);
  grid-row: 1;
  display: block;
  opacity: 1;
  transition: opacity var(--survol-sortie) linear;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1);
}

/* Le nom écrit « [NIEL ARMENGAUD] ». Il ne sert que sur téléphone, page
   d'accueil, à la place du logo dessiné : il est donc masqué ici, et
   rallumé dans le bloc MOBILE tout en bas. Son texte se change dans
   content.js, à SITE.nom. */
.nom-tel { display: none; }

/* Les lignes de coordonnées du bas — « [CONTACT] », l'Instagram, le mail.
   Comme le nom écrit, elles ne servent que sur téléphone : masquées ici,
   rallumées dans le bloc MOBILE tout en bas. Leur texte et leurs adresses
   se changent dans content.js, à CONTACT_TELEPHONE. */
.contact-tel { display: none; }

/* Le logo s'éclaircit au passage du curseur : il est cliquable, il ramène à
   l'accueil. @media (hover: hover) = seulement sur les appareils qui ont un
   vrai curseur ; sur un écran tactile, un doigt qui effleure ne doit pas
   laisser le logo grisé derrière lui. */
@media (hover: hover) {
  .logo:hover {
    opacity: var(--logo-survol);
    transition-duration: var(--survol-entree);
  }
}

/* display: contents fait remonter les deux liens au niveau de la grille :
   ils prennent alors chacun leur colonne. Sans cette ligne, <nav> occuperait
   une seule case et les deux mots seraient collés l'un à l'autre dedans. */
.nav { display: contents; }

/* LES COLONNES DE LA NAVIGATION.
   Change un chiffre pour déplacer un mot : 1 = tout à gauche, 12 = tout à
   droite. Les liens sont pris dans l'ordre de content.js : le 1er, puis
   le 2e. « justify-self: end » colle la langue à la marge de droite au
   lieu de la laisser au début de sa colonne. */
.filtres__bouton    { grid-column:  9; }
.nav a:nth-child(1) { grid-column: 10; }
.nav a:nth-child(2) { grid-column: 11; }
.langue             { grid-column: 12; justify-self: end; }

/* LA HAUTEUR DES QUATRE MOTS.
   Ils sont sur la même ligne que le logo, descendus jusqu'au bas de la
   ligne « NIEL ». Le 0.78 est l'endroit où la lettre pose son pied dans sa
   ligne de texte : c'est lui qui fait que ce sont bien les lettres qui
   s'alignent, et non leur boîte invisible. Le « max(0px, …) » les empêche
   de remonter plus haut que le logo sur une fenêtre étroite.
   Pour monter ou descendre les quatre mots ensemble, touche à --nav-cale
   dans les RÉGLAGES, pas ici. */
.entete .filtres__bouton,
.entete .nav a,
.entete .langue {
  grid-row: 1;
  margin-top: max(0px, calc(var(--logo-hauteur) * var(--nav-cale)
                            - var(--t-nav) * 0.78));

  /* Un mot ne se coupe jamais en deux lignes : il déborde de sa colonne
     vers la droite s'il est trop long. Attention si tu allonges un mot
     dans content.js (des crochets, des majuscules) : sur une fenêtre
     étroite, deux mots voisins peuvent finir par se toucher. Dans ce cas,
     décale une colonne ci-dessus (10 → 9 par exemple), ou baisse --t-nav
     dans les RÉGLAGES. */
  white-space: nowrap;

  /* Le retour du survol, en douceur, comme pour le logo. */
  opacity: 1;
  transition: opacity var(--survol-sortie) linear;
}

/* Les quatre mots s'éclaircissent au passage du curseur, exactement comme le
   logo : même manière, même timing. Le réglage est --nav-survol, dans les
   RÉGLAGES. Pour supprimer l'effet, mets --nav-survol à 1 ; pour l'enlever
   pour de bon, efface ce bloc et les deux lignes « opacity / transition »
   juste au-dessus.
   @media (hover: hover) = seulement les appareils qui ont un vrai curseur ;
   sur un écran tactile, un doigt qui effleure ne doit pas laisser un mot
   grisé derrière lui. */
@media (hover: hover) {
  .entete .filtres__bouton:hover,
  .entete .nav a:hover,
  .entete .langue:hover {
    opacity: var(--nav-survol);
    transition-duration: var(--survol-entree);
  }
}

/* PAGE CONTACT — le grand logo pleine largeur, et les mots dessous.
   Le nombre de colonnes est repris dans le bloc « LOGO » plus haut. */
body[data-page="contact"] .nav a,
body[data-page="contact"] .langue {
  grid-row: 2;
  margin-top: 0;   /* c'est row-gap qui donne l'écart, plus haut */
}

/* Aucun état actif sur la navigation : conforme aux maquettes 2 et 3. */

/* Bascule de langue.
   Un seul mot visible : la langue en cours. On clique, il devient l'autre.
   Pas de séparateur : il a exactement l'aspect d'un lien de navigation,
   dont il hérite le corps, la graisse et la couleur. */
.langue button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}


/* ───────────────────────────────────────────────────────────────────────
   PIED DE PAGE — centré, en bas (page d'accueil)
   ─────────────────────────────────────────────────────────────────────── */

/* Même traitement que la navigation : le pied de page s'inverse selon
   l'image qui défile derrière lui. */
.pied {
  position: fixed;
  left: 0; right: 0; bottom: var(--marge);
  z-index: 100;
  text-align: center;
  font-weight: var(--graisse-normale);
  font-size: var(--t-pied);
  line-height: var(--i-pied);
  color: var(--blanc);
  mix-blend-mode: difference;
  pointer-events: none;
}

.pied a { pointer-events: auto; }


/* ───────────────────────────────────────────────────────────────────────
   PAGE D'ACCUEIL — diaporama plein écran
   ─────────────────────────────────────────────────────────────────────── */

/* La page d'accueil ne défile pas : le diaporama est fixe et occupe tout
   l'écran. « flex: 1 » lui fait prendre exactement la place qui reste sous
   l'en-tête — ni plus, sinon une barre de défilement apparaîtrait pour
   rien. */
.accueil { overflow: hidden; }

.diapos {
  position: fixed;
  inset: 0;
  cursor: pointer;
  background: var(--blanc);
}

.diapo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fondu, 400ms) linear;
}

.diapo.est-active { opacity: 1; }

.diapo img,
.diapo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diapo--vide { background: var(--gris-attente); }

/* La toile de la transition « pellicule ». Elle n'est allumée que pendant
   la transition elle-même : le reste du temps ce sont tes vraies images et
   tes vraies vidéos que l'on voit. Réglages dans content.js. */
.diapos__toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;   /* le clic passe au travers, vers le diaporama */
}

.diapos.est-en-transition .diapos__toile { display: block; }

/* Pendant que la toile est allumée, les diapos changent instantanément
   dessous : le fondu classique n'aurait plus lieu d'être, et on ne le
   verrait de toute façon pas. */
.diapos.est-en-transition .diapo { transition: none; }


/* ───────────────────────────────────────────────────────────────────────
   LE VOILE FLOU DU HAUT  (page Projets)
   ───────────────────────────────────────────────────────────────────────
   Une bande fixe en haut de l'écran, qui floute les images passant
   dessous. Elle apparaît peu à peu quand on descend dans la page.

   Pourquoi quatre couches empilées plutôt qu'une seule ?
   Parce qu'un flou uniforme s'arrêterait net et dessinerait un trait en
   travers de l'écran. Ici chaque couche floute un peu plus que la
   précédente et couvre une bande un peu plus courte : tout en haut les
   quatre se cumulent, plus bas il n'en reste qu'une, puis plus rien. Le
   flou s'éteint donc en dégradé, sans aucune limite visible.

   Le voile passe SOUS le logo, la navigation et les filtres (z-index 98
   contre 100, 101 et 102) : eux restent nets. Il ne reçoit aucun clic.
   ─────────────────────────────────────────────────────────────────────── */

.voile {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--voile-haut);
  z-index: 98;
  pointer-events: none;

  /* --voile-force va de 0 (en haut de page) à 1. C'est elle qui fait
     grandir le flou : le voile est TOUJOURS affiché, seule sa force change.

     Il a d'abord été fait autrement — le voile restait à pleine puissance
     et c'était son opacité qui montait de 0 à 1. Ça ne marchait pas : un
     élément posé à opacité 0 n'est pas dessiné du tout, et Chrome ne lui
     rendait jamais son flou quand l'opacité remontait. Le flou n'apparaissait
     qu'après un rechargement de la page. Ici il n'y a plus rien à réveiller :
     le voile est là dès le départ, avec un flou de 0 pixel. */
  --voile-force: 0;
}

/* Le voile ne dépend QUE du défilement. Il ne s'éteint pas parce qu'un
   panneau ou une fenêtre s'ouvre : au-delà de --voile-apparition il est
   là, point. C'est aussi pour ça que les règles de flou de page, plus
   bas, l'écartent avec :not(.voile) — sinon elles lui poseraient un flou
   par-dessus le sien, ce qui l'empêcherait de fonctionner. */

.voile__couche { position: absolute; inset: 0; }

.voile__couche:nth-child(1) {
  -webkit-backdrop-filter: blur(calc(var(--voile-flou) * var(--voile-force) / 8));
          backdrop-filter: blur(calc(var(--voile-flou) * var(--voile-force) / 8));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
}

.voile__couche:nth-child(2) {
  -webkit-backdrop-filter: blur(calc(var(--voile-flou) * var(--voile-force) / 4));
          backdrop-filter: blur(calc(var(--voile-flou) * var(--voile-force) / 4));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 75%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 75%);
}

.voile__couche:nth-child(3) {
  -webkit-backdrop-filter: blur(calc(var(--voile-flou) * var(--voile-force) / 2));
          backdrop-filter: blur(calc(var(--voile-flou) * var(--voile-force) / 2));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 50%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 50%);
}

.voile__couche:nth-child(4) {
  -webkit-backdrop-filter: blur(calc(var(--voile-flou) * var(--voile-force)));
          backdrop-filter: blur(calc(var(--voile-flou) * var(--voile-force)));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 25%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 25%);
}


/* ───────────────────────────────────────────────────────────────────────
   PAGE PROJETS
   ─────────────────────────────────────────────────────────────────────── */

/* La page Projets démarre plus bas que les autres : il faut la place pour
   le panneau de filtres déplié, qui se pose par-dessus la page sans la
   décaler. La valeur est relevée de tes maquettes 4 et 6. */
.projets {
  padding: var(--haut-projets) var(--marge) var(--espace-bloc);
}

.bloc {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), 1fr);
  column-gap: var(--gouttiere);
  row-gap: var(--gouttiere-v);
  align-items: start;
}

.bloc + .bloc { margin-top: var(--espace-bloc); }

/* — le média —————————————————————————————————————————————————————————— */

.media { position: relative; }

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

/* aplat gris tant qu'aucun fichier n'est renseigné dans content.js */
.media--vide {
  background: var(--gris-attente);
  aspect-ratio: var(--ratio, 3 / 2);
}

/* — le texte ——————————————————————————————————————————————————————————— */

/* La colonne de texte se déroule de haut en bas et occupe toute la hauteur
   de sa rangée : c'est ce qui permet aux pastilles de se coller en bas. */
.texte {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.texte__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
}

.texte__titre,
.texte__annee { font-weight: var(--graisse-forte); margin: 0; font-size: var(--t-texte); }

/* Les pastilles de filtre d'un projet : son année, puis ses catégories.
   Elles se collent en bas à droite de la colonne de texte, sur la page
   Projets comme dans la fenêtre. Un clic renvoie à la page Projets avec ce
   seul filtre actif.
   Pour les remettre juste sous la description au lieu du bas du bloc,
   remplace « margin-top: auto » par « margin-top: var(--pilule-rangee) ». */
.texte__filtres {
  margin-top: auto;
  padding-top: var(--pilule-rangee);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--pilule-ecart);
}

.texte__desc {
  margin: var(--ecart-titre-desc) 0 0;
  max-width: var(--largeur-texte);
  font-weight: var(--graisse-normale);
  white-space: pre-line; /* respecte les retours à la ligne tapés dans content.js */
}

/* Un passage entouré de deux étoiles dans content.js — **comme ceci** —
   s'affiche en graisse forte. On l'écrit ici explicitement : sans cela le
   navigateur demanderait un « gras » à 700, que la Neue Haas n'a pas, et
   l'épaissirait lui-même de travers. */
.texte__desc strong { font-weight: var(--graisse-forte); }

/* Un mot cliquable dans une description — [un mot](https://…) dans
   content.js. Il prend la même graisse forte, et se souligne au survol
   pour confirmer qu'on peut cliquer. */
.texte__desc a {
  font-weight: var(--graisse-forte);
  text-decoration: none;
}

@media (hover: hover) {
  .texte__desc a:hover { text-decoration: underline; }
}

/* Au clavier, le lien se souligne aussi quand la tabulation l'atteint. */
.texte__desc a:focus-visible { text-decoration: underline; }


/* ───────────────────────────────────────────────────────────────────────
   LES 6 GABARITS — placement sur la grille de 12 colonnes
   (reproduit à l'identique la géométrie de tes maquettes 2 et 3)
   ─────────────────────────────────────────────────────────────────────── */

/* 1 — image à gauche (2/3), texte à droite (1/3)  → maquette 2, bloc du haut */
.bloc--image-gauche .media-1 { grid-column: 1 / span 8; grid-row: 1; --ratio: 17 / 10; }
.bloc--image-gauche .texte   { grid-column: 9 / span 4; grid-row: 1; }

/* 2 — texte à gauche (1/3), image à droite (2/3)  → maquette 2, bloc du bas */
.bloc--image-droite .texte   { grid-column: 1 / span 4; grid-row: 1; }
.bloc--image-droite .media-1 { grid-column: 5 / span 8; grid-row: 1; --ratio: 17 / 10; }

/* 3 — grille de 4 médias décalés + texte              → maquette 3 */
.bloc--grille-4 .media-1 { grid-column:  5 / span 3; grid-row: 1; --ratio:  9 / 10; }
.bloc--grille-4 .media-2 { grid-column:  8 / span 5; grid-row: 1; --ratio:  3 /  2; }
.bloc--grille-4 .media-3 { grid-column:  1 / span 4; grid-row: 2; --ratio: 19 / 20; }
.bloc--grille-4 .media-4 { grid-column:  5 / span 4; grid-row: 2; --ratio: 19 / 20; }
.bloc--grille-4 .texte   { grid-column:  9 / span 4; grid-row: 2; }

/* 4 — diptyque : 2 médias côte à côte, texte dessous à gauche.
       Le texte remonte juste sous les images (voir --ecart-image-texte). */
.bloc--diptyque { row-gap: var(--ecart-image-texte); }
.bloc--diptyque .media-1 { grid-column:  1 / span 6; grid-row: 1; --ratio: 3 / 2; }
.bloc--diptyque .media-2 { grid-column:  7 / span 6; grid-row: 1; --ratio: 3 / 2; }
.bloc--diptyque .texte   { grid-column:  1 / span 4; grid-row: 2; }

/* 5 — média pleine largeur, texte dessous à droite.
       Même resserrement que le diptyque. */
.bloc--pleine-largeur { row-gap: var(--ecart-image-texte); }
.bloc--pleine-largeur .media-1 { grid-column: 1 / span 12; grid-row: 1; --ratio: 12 / 5; }
.bloc--pleine-largeur .texte   { grid-column: 9 / span 4;  grid-row: 2; }

/* 6 — flyer : 1 média au format portrait 3/4 (format affiche) à gauche,
       texte juste à côté. Le média n'occupe qu'un tiers de la largeur :
       c'est ce qu'il faut pour qu'une image 3/4 tienne dans la hauteur de
       l'écran. Le texte commence à la colonne qui suit, comme sur le
       gabarit image-gauche. */
.bloc--flyer .media-1 { grid-column: 1 / span 4; grid-row: 1; --ratio: 3 / 4; }
.bloc--flyer .texte   { grid-column: 5 / span 4; grid-row: 1; }


/* Message affiché quand aucun projet ne passe les filtres. */
.projets__vide {
  margin: 0;
  font-weight: var(--graisse-forte);
}


/* ───────────────────────────────────────────────────────────────────────
   FILTRES — page Projets  (maquettes 4 et 5)
   ───────────────────────────────────────────────────────────────────────
   Le mot « Filtres » est posé sur la 1re colonne de la grille, sur la même
   ligne que la navigation — il fait partie de .entete, avec les autres
   mots. Le panneau se déplie juste en dessous.
   Il n'a volontairement pas de fond blanc : il se pose directement sur la
   page, comme sur ta maquette 5. Si en faisant défiler la page une image
   passe derrière les pastilles et gêne la lecture, dis-le-moi : on ajoute
   un aplat blanc derrière le panneau.
   ─────────────────────────────────────────────────────────────────────── */

/* LE CALQUE DU PANNEAU.
   Il est posé dans la page juste sous l'en-tête, mais il ne fait AUCUNE
   hauteur : le panneau déborde par-dessus les projets au lieu de les
   pousser vers le bas. C'est ce qui lui permet de se déplier et de se
   replier sans que la page bouge d'un pixel.

   Comme l'en-tête, il reste accroché en haut de l'écran quand on descend :
   le mot « Filtres » y étant, son panneau doit le suivre. La hauteur à
   laquelle il s'accroche, c'est --entete-hauteur, calculée plus haut.

   Pourquoi le mot « Filtres » n'est-il pas ici avec lui ? Parce que le mot
   s'inverse sur ce qu'il y a derrière lui, comme le logo et la navigation,
   alors que le panneau ne doit surtout PAS s'inverser — ses pastilles
   grises deviendraient noires. Le mot vit donc dans .entete, qui porte ce
   fondu, et le panneau reste à part. */
.filtres {
  position: sticky;
  top: var(--entete-hauteur);
  z-index: 102;
  flex: none;
  height: 0;                /* voir la note ci-dessus */
  display: grid;
  grid-template-columns: repeat(var(--colonnes), 1fr);
  column-gap: var(--gouttiere);
  padding: 0 var(--marge);
  pointer-events: none;   /* seul le contenu capte les clics */
}

/* Le panneau s'ouvre sous le mot « Filtres », dans la moitié droite de la
   page : 6 colonnes, de la 7e à la marge de droite. La zone reste
   transparente aux clics — seules les pastilles en captent. Sans ça, elle
   avalerait les clics destinés à la bande de fermeture de la fenêtre
   projet, juste derrière. */
.filtres__zone { grid-column: 7 / span 6; }

.pilule { pointer-events: auto; }

/* Le mot « Filtres + » : exactement l'aspect d'un lien de navigation.
   Corps, graisse et couleur lui viennent de .entete, qui le fond sur
   l'arrière-plan en même temps que les autres mots. */
.filtres__bouton {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.filtres__signe { display: inline-block; margin-left: 0.15em; }

/* ── Le flou de la page pendant que les filtres sont ouverts ───────────

   Tout ce que porte la page se floute — les projets, le logo — SAUF le
   panneau des filtres et la ligne de navigation, qui restent nets au
   premier plan. La navigation est épargnée parce que le mot « Filtres »
   y vit : il doit rester lisible pendant qu'on choisit dans le panneau
   qu'il vient d'ouvrir, et on ne peut pas flouter ses voisins sans le
   flouter lui.
   Le flou arrive et repart au même rythme que le panneau : les deux
   mouvements sont perçus comme un seul.                                */

body > *:not(.filtres):not(.voile) {
  transition: filter var(--filtres-repli) linear;
}

body.filtres-flou > *:not(.filtres):not(.entete):not(.voile) {
  filter: blur(var(--flou-filtres));
  transition-duration: var(--filtres-deroule);
}

/* ── Le flou de la page pendant qu'une fenêtre projet est ouverte ──────

   Ici TOUT se floute — les projets, le logo, la navigation — sauf la
   fenêtre elle-même et sa bande de fermeture.
   Le flou se pose au clic, en même temps que la fenêtre monte, et repart
   pendant qu'elle redescend : on ne voit jamais de frontière entre une
   zone floue et une zone nette.

   La première règle ne sert qu'à donner la durée du RETOUR au net : la
   classe fenetre-ouverte reste posée pendant toute la descente, alors que
   fenetre-flou est retirée dès le premier instant.                     */

body.fenetre-ouverte > *:not(.fenetre):not(.bandeau-fermeture):not(.voile) {
  transition-duration: var(--fenetre-sortie);
}

body.fenetre-flou > *:not(.fenetre):not(.bandeau-fermeture):not(.voile) {
  filter: blur(var(--flou-fenetre));
  transition-duration: var(--fenetre-entree);
}

.filtres__panneau { padding-top: var(--filtres-ecart); }

/* Le déroulé : le panneau est masqué par le bas, et le cache remonte
   jusqu'à le découvrir en entier. Il ne bouge pas — c'est le cache qui
   glisse — donc les pastilles ne dérivent pas pendant l'ouverture.
   Le panneau flotte au-dessus de la page : rien n'est poussé vers le bas. */
@keyframes filtres-deroule {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

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

/* À l'aller, le mouvement part vite et freine ; au retour il part doucement
   et accélère. Les mêmes courbes que la fenêtre d'un projet. */
.filtres__panneau--deroule {
  animation: filtres-deroule var(--filtres-deroule) cubic-bezier(0.33, 1, 0.68, 1) backwards;
}

.filtres__panneau--repli {
  animation: filtres-repli var(--filtres-repli) cubic-bezier(0.32, 0, 0.67, 0) forwards;
}

/* Pendant qu'il se replie, on ne peut plus cliquer une pastille qu'on ne
   voit déjà presque plus. */
.filtres__panneau--repli,
.filtres__panneau--repli .pilule { pointer-events: none; }

.filtres__rangee {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pilule-ecart);
}

.filtres__rangee + .filtres__rangee { margin-top: var(--pilule-rangee); }

/* Une pastille de filtre */
.pilule {
  display: inline-flex;
  align-items: center;
  height: var(--pilule-hauteur);
  padding: 0 var(--pilule-flanc);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: var(--t-pilule);
  font-weight: var(--graisse-normale);
  line-height: 1;
  letter-spacing: inherit;
  background: var(--gris-pilule);
  color: var(--gris-pilule-texte);
  cursor: pointer;
  transition: background-color var(--survol-sortie) linear,
              color            var(--survol-sortie) linear;
}

/* Pastille active */
.pilule[aria-pressed="true"] {
  background: var(--noir);
  color: var(--blanc);
}

/* Le survol. Une pastille au repos va vers le noir, comme si elle était déjà
   choisie : on voit ce que le clic va donner. Une pastille DÉJÀ active fait
   l'inverse, elle s'éclaircit — un second clic la désactivera.
   Les deux passages sont volontairement dissymétriques : 200 ms pour foncer,
   500 ms pour revenir. */
@media (hover: hover) {
  .pilule:hover {
    background: var(--noir);
    color: var(--blanc);
    transition-duration: var(--survol-entree);
  }

  .pilule[aria-pressed="true"]:hover {
    background: var(--gris-pilule-active-survol);
    color: var(--blanc);
    transition-duration: var(--survol-entree);
  }
}


/* ───────────────────────────────────────────────────────────────────────
   FENÊTRE D'UN PROJET — s'ouvre en cliquant sur une image  (maquette 7)
   ───────────────────────────────────────────────────────────────────────
   Deux colonnes, sur la même grille que la page Projets :
     • à gauche (colonnes 1 à 8)  : les images — SEULE zone qui défile ;
     • à droite (colonnes 9 à 12) : le texte — fixe, il ne défile pas.
   Le rose et le vert de ta maquette sont des repères de zone : le fond
   réel est blanc, comme partout ailleurs.
   ─────────────────────────────────────────────────────────────────────── */

/* Sur la page Projets, une image annonce qu'elle est cliquable. */
.projets .media--cliquable { cursor: pointer; }

/* Le titre du projet ouvre la même fenêtre que ses images : il prend donc
   le même curseur « main ». Pour l'annuler, supprime cette ligne (et le
   bloc « if » du titre dans site.js). */
.projets .texte__titre--cliquable { cursor: pointer; }

/* Et il passe au gris moyen au survol, comme le logo, avec les mêmes durées :
   il fonce vite quand le curseur arrive, il revient lentement quand il
   repart. @media (hover: hover) = seulement là où il y a un vrai curseur ;
   sur un écran tactile, un doigt ne doit pas laisser un titre grisé derrière
   lui. Pour supprimer l'effet, mets --titre-survol à #000000 plus haut. */
.projets .texte__titre--cliquable {
  transition: color var(--survol-sortie) linear;
}

@media (hover: hover) {
  .projets .texte__titre--cliquable:hover {
    opacity: var(--titre-survol);
    transition-duration: var(--survol-entree);
  }
}

/* La page derrière ne défile plus tant que la fenêtre est ouverte. */
body.fenetre-ouverte { overflow: hidden; }

/* Pendant qu'une fenêtre projet est ouverte, le logo et la navigation sont
   flous, à l'arrière-plan : ils ne doivent plus capter les clics. Sans ces
   lignes, le logo avalerait les clics destinés à la bande de fermeture,
   juste derrière lui, et ramènerait à l'accueil au lieu de refermer la
   fenêtre. */
body.fenetre-ouverte .entete,
body.fenetre-ouverte .entete a,
body.fenetre-ouverte .entete button { pointer-events: none; }

/* La bande laissée libre en haut : on clique dedans pour refermer.
   Elle est transparente et passe SOUS le logo et la navigation, qui
   restent donc cliquables normalement. */
.bandeau-fermeture {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--haut-bandeau);
  z-index: 99;
  cursor: pointer;

  /* Le flou n'est PAS posé ici. Il l'a été un temps, et c'était une
     erreur : seule la hauteur de cette bande devenait floue, et la fenêtre
     en montant découvrait la page nette juste dessous — une démarcation
     qui traversait l'écran. C'est maintenant la page entière qui se
     floute : voir body.fenetre-flou, plus bas. */
}

/* L'ouverture : la fenêtre monte du bas de l'écran jusqu'à sa place.
   Elle est recréée à chaque clic, l'animation se rejoue donc toute seule.

   La courbe part vite et freine à l'arrivée : le mouvement se lit, mais la
   fenêtre se pose sans rebond. Si tu la veux autrement, remplace la ligne
   cubic-bezier ci-dessous par :
     linear                        → vitesse constante, plus mécanique
     cubic-bezier(0.16, 1, 0.3, 1) → très sec, presque arrivé à mi-parcours */
@keyframes fenetre-entree {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.fenetre {
  animation: fenetre-entree var(--fenetre-entree) cubic-bezier(0.33, 1, 0.68, 1) backwards;

  position: fixed;
  top: var(--haut-bandeau);
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: var(--blanc);

  display: grid;
  grid-template-columns: repeat(var(--colonnes), 1fr);
  column-gap: var(--gouttiere);

  /* La bande blanche est portée par la fenêtre, pas par la colonne d'images :
     c'est ce qui l'empêche de défiler avec les images. */
  padding: var(--fenetre-haut-blanc) var(--marge) 0;

  box-shadow: var(--fenetre-ombre);
}

/* La fermeture : le trajet inverse. La courbe est retournée elle aussi —
   départ posé, puis accélération vers le bas — pour que la fenêtre ait
   l'air de retomber plutôt que de se faire arracher. Le site attend la fin
   du mouvement avant d'effacer la fenêtre. */
@keyframes fenetre-sortie {
  from { transform: none; }
  to   { transform: translateY(100%); }
}

.fenetre--sortie {
  animation: fenetre-sortie var(--fenetre-sortie) cubic-bezier(0.32, 0, 0.67, 0) forwards;
  /* Plus rien n'est cliquable pendant qu'elle s'en va. */
  pointer-events: none;
}

/* — colonne gauche : les images, elles défilent ——————————————————————— */
.fenetre__images {
  grid-column: 1 / span 8;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 var(--espace-bloc);

  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--gouttiere);
  align-content: start;
  align-items: start;
}

.fenetre__images:focus { outline: none; }

/* Rythme des images : deux côte à côte, puis une pleine largeur,
   puis deux, puis une… Pour un autre rythme, dis-le-moi. */
.fenetre__images .media { --ratio: 16 / 9; }
.fenetre__images .media:nth-child(3n) {
  grid-column: 1 / -1;
  --ratio: 3 / 2;
}

/* Une image plus haute que large — un flyer, une affiche — serait immense
   si on l'étirait sur toute la largeur de la fenêtre. Le site la reconnaît
   tout seul (tu n'as rien à indiquer dans content.js) : elle est alors
   réduite à la hauteur disponible et centrée sur sa rangée, pour se voir
   d'un seul coup d'œil. */
.fenetre__images .media--portrait {
  display: flex;
  justify-content: center;
}

.fenetre__images .media--portrait img,
.fenetre__images .media--portrait video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - var(--haut-bandeau) - var(--marge) * 2);
}

/* — colonne droite : le texte, il ne défile pas —————————————————————— */
.fenetre__texte {
  grid-column: 9 / span 4;
  padding: 0 0 var(--espace-bloc);
  overflow: hidden;

  /* comme la colonne de texte de la page Projets : les pastilles en bas */
  display: flex;
  flex-direction: column;
}


/* ───────────────────────────────────────────────────────────────────────
   PAGE CONTACT
   ───────────────────────────────────────────────────────────────────────
   Quatre colonnes, dont deux vides : elles servent à caler les deux
   blocs de texte exactement là où ils sont sur ta maquette.

       colonne 1  vide          | colonne 2  présentation, collaborations
       colonne 3  vide          | colonne 4  contact, services

   Les largeurs sont les tiennes, relevées sur Contact.png. La colonne 2
   fait précisément la largeur qu'il faut pour que les paragraphes se
   coupent aux mêmes mots que sur la maquette : si tu la changes, les
   retours à la ligne changent aussi.
   ─────────────────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  /* La 4e colonne fait exactement la largeur de son texte : ni plus, ni
     moins. C'est ce qui colle « Services : » à la marge de droite, à la
     même distance du bord que les images de la page Projets. La 3e
     colonne, vide, absorbe tout ce qui reste. */
  grid-template-columns: 54.654% 25.310% 1fr max-content;
  padding: var(--contact-haut) var(--marge) var(--marge) 0;

  /* Le texte se pose au FOND de la page. Le bloc prend toute la hauteur
     qui reste sous l'en-tête (voir « main » plus haut) : sur une fenêtre
     plus haute que large, le texte finit toujours à la marge du bas,
     comme il finit à la marge de droite. */
  align-content: end;
}

.contact__gauche { grid-column: 2; }

.contact__droite {
  grid-column: 4;
  margin-top: var(--contact-decale-droite);
}

/* Les blancs entre les blocs */
.contact__bloc--collaborations { margin-top: var(--contact-avant-collabs); }
.contact__bloc--services       { margin-top: var(--contact-avant-services); }

/* Les paragraphes de présentation, séparés par une ligne blanche */
.contact__para {
  margin: 0;
  font-size: var(--t-contact);
  font-weight: var(--graisse-normale);
  line-height: var(--contact-ligne);

  /* Largeur exprimée en « em », donc liée au corps du texte : les
     paragraphes se coupent aux mêmes mots que sur ta maquette, y compris
     sur un très grand écran où le corps du texte cesse de grandir. */
  max-width: 23.97em;
}

.contact__para + .contact__para { margin-top: var(--contact-ligne); }

/* Les trois intertitres gris */
.contact__titre {
  margin: 0;
  font-size: var(--t-contact-liste);
  font-weight: var(--graisse-forte);
  line-height: var(--contact-ligne);
  color: var(--gris-intertitre);
}

/* Les listes : liens, collaborations, services */
.contact__liste {
  margin: var(--contact-ligne) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-contact-liste);
  line-height: var(--contact-ligne);
}

.contact__liste li { white-space: nowrap; }

/* Un lien renseigné se souligne au survol ; sans adresse, le mot reste
   affiché mais n'est pas cliquable. */
.contact__liste a:hover { text-decoration: underline; }


/* ───────────────────────────────────────────────────────────────────────
   MOBILE & TABLETTE — tout passe en pleine largeur, empilé
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 800px) {

  :root {
    --t-nav:   clamp(8px, 3.2vw, 10px);
    --t-texte: clamp(13px, 3.2vw, 16px);
    --t-pied:  clamp(8px, 3.0vw, 10px);
    --ecart-titre-desc: 16px;
    --gouttiere-v: 12px;
    --espace-bloc: 64px;
    --haut-contenu: 90px;

    /* Le blanc au-dessus du premier projet, compté depuis le HAUT DE
       L'ÉCRAN — l'en-tête ne prend plus de place dans la page sur
       téléphone. Réglé pour que le premier projet reste exactement où il
       était avant. Baisse ce chiffre pour le rapprocher de ton nom. */
    --haut-projets: 184px;
  }

  /* ═══════════════════════════════════════════════════════════════════
     L'EN-TÊTE SUR TÉLÉPHONE — une seule page
     ═══════════════════════════════════════════════════════════════════

     Sur téléphone, le site tient en une seule page : l'accueil. Les
     images défilent en plein écran, et par-dessus il n'y a que deux
     choses :

       • ton nom écrit, en haut à gauche — pas de logo dessiné ;
       • tes coordonnées, en bas à gauche.

     Plus de mots [PROJETS] / [À PROPOS], plus de bouton de langue, plus
     de filtres. Ils existent toujours dans la page, simplement cachés ;
     les pages Projets et Contact, elles, renvoient à l'accueil (voir la
     note en bas de site.js).

     L'en-tête ne coiffe plus la page : il la recouvre entièrement, comme
     une vitre posée par-dessus. Le nom se colle en haut, les coordonnées
     en bas, et la rangée vide du milieu (le « 1fr ») pousse les deux
     l'une loin de l'autre. La vitre laisse passer les doigts — c'est la
     règle « pointer-events: none » de .entete, plus haut — sauf sur les
     lignes cliquables.
     ═══════════════════════════════════════════════════════════════════ */

  /* LA TAILLE DES MOTS sur téléphone — le nom en haut comme les lignes du
     bas. 18px est la taille de ta maquette ; le 15 les rétrécit un peu sur
     les très petits téléphones pour que « [NIEL ARMENGAUD] » et l'adresse
     mail ne se coupent jamais en deux lignes. Un seul chiffre à changer :
     le 18. */
  :root {
    --t-nav: clamp(15px, 4.6vw, 14px);

    /* L'AIR ENTRE LES LIGNES DE COORDONNÉES. 1.2 = un interligne serré,
       comme sur ta maquette. Monte à 1.4 pour les aérer, descends à 1.05
       pour les coller. */
    --contact-tel-interligne: 1.2;

    /* La place que les trois lignes occupent en bas de l'écran. Elle se
       calcule toute seule ; si tu ajoutes une quatrième ligne dans
       content.js, remplace le 3 par un 4. */
    --nav-bas: calc(var(--marge) * 2
                    + var(--t-nav) * var(--contact-tel-interligne) * 3);
  }

  /* Le logo dessiné s'efface, le nom écrit prend sa place. Pour faire
     l'inverse — garder le logo sur téléphone —, échange les deux
     « display » ci-dessous. */
  .logo    { display: none; }
  .nom-tel { display: block; }

  /* PLUS DE FILTRES SUR TÉLÉPHONE : ni le mot « Filtres » dans l'en-tête,
     ni le panneau de pastilles qu'il dépliait. Tous les projets sont
     affichés à la suite, sans tri possible. Les deux existent toujours
     dans la page, simplement cachés : supprime ces deux lignes et ils
     reviennent tels quels. Sur ordinateur, rien ne change. */
  .filtres,
  .entete .filtres__bouton { display: none; }

  /* LES MOTS [PROJETS] / [À PROPOS] ET LE BOUTON DE LANGUE DISPARAISSENT.
     Sur téléphone il n'y a plus qu'une page, donc plus rien à quoi aller ;
     et la langue se choisit sur ordinateur. Les deux existent toujours
     dans la page : supprime ces deux lignes et ils reviennent en bas de
     l'écran — pense alors à leur redonner une rangée dans la grille
     ci-dessous. */
  .entete .nav,
  .entete .langue { display: none; }

  /* Tes coordonnées prennent leur place, en bas à gauche. */
  .contact-tel { display: block; }

  .entete {
    position: fixed;
    inset: 0;
    padding: var(--marge);

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    row-gap: 0;
    align-items: start;
  }

  /* La place de chacun : rangée 1 le nom, rangée 2 le vide qui les écarte,
     rangée 3 les coordonnées. Échange les deux chiffres 1 et 3 pour mettre
     le nom en bas et les coordonnées en haut. */
  body .entete .nom-tel     { grid-row: 1; }
  body .entete .contact-tel { grid-row: 3; }

  /* Le nom ne longe plus le logo : on annule son calage vertical. */
  .entete .nom-tel { margin-top: 0; }

  /* LES LIGNES DE COORDONNÉES. Elles s'empilent dans l'ordre écrit dans
     content.js. « pointer-events: auto » leur rend le doigt, que la vitre
     de l'en-tête bloque partout ailleurs ; le titre [CONTACT], lui, n'a
     pas d'adresse et n'est donc pas cliquable. Le soulignement est retiré
     pour que les trois lignes se ressemblent — enlève la ligne
     « text-decoration » pour souligner les deux liens. */
  .contact-tel a,
  .contact-tel span {
    display: block;
    line-height: var(--contact-tel-interligne);
    white-space: nowrap;
  }

  .contact-tel a {
    pointer-events: auto;
    color: inherit;
    text-decoration: none;
  }

  /* Le pied de page — ton adresse et le copyright — n'a plus de place :
     les mots occupent le bas de l'écran. Supprime cette ligne pour le
     faire réapparaître, mais il se posera alors par-dessus eux. */
  .pied { display: none; }

  /* LA PLACE RÉSERVÉE EN BAS DE CHAQUE PAGE.
     Sans elle, le dernier projet et la dernière ligne de la page Contact
     passeraient sous les mots. Le haut, lui, se règle avec
     --haut-projets et --contact-haut, plus loin. */
  .projets { padding-bottom: calc(var(--espace-bloc) + var(--nav-bas)); }
  .contact { padding-bottom: var(--nav-bas); }

  /* Les petites pastilles grises posées en bas à droite de chaque projet —
     son année et ses catégories — disparaissent sur téléphone. Elles
     servaient à relancer un filtre, et il n'y a plus de filtres ici.
     Supprime cette ligne pour les faire revenir. Celles de la fenêtre d'un
     projet, elles, sont toujours là. */
  .projets .texte__filtres { display: none; }


  /* ── LE DIAPORAMA ──────────────────────────────────────────────────

     Une image à la fois, en plein écran, changée toutes les deux
     secondes ou au doigt. La durée se règle dans content.js, à
     SITE.accueilTelephone.duree — pas ici.

     Le blanc est le fond sur lequel les images se posent : c'est lui
     qu'on voit au-dessus et en dessous d'une image moins haute que
     l'écran. Pour un fond noir, remplace var(--blanc) par var(--noir). */
  .diapo-tel {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--blanc);
  }

  /* UNE IMAGE. La ligne qui compte est « object-fit: contain » : elle fait
     tenir l'image entière dans l'écran sans jamais la couper. L'image
     touche donc les deux bords, gauche et droit, et sa hauteur suit son
     propre format — une 16:9 est basse, une image plus haute prend plus
     de place. Elle est centrée : autant de blanc au-dessus qu'en dessous.

     Pour qu'elle remplisse au contraire tout l'écran quitte à être rognée
     en haut et en bas, remplace « contain » par « cover ». Pour la coller
     en haut au lieu de la centrer, ajoute « object-position: 50% 0; ». */
  .diapo-tel__vue {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* L'image du moment. LE CHANGEMENT EST NET : il n'y a volontairement
     aucune ligne de transition ici, donc aucun fondu. */
  .diapo-tel__vue.est-visible { display: block; }


  .bloc { grid-template-columns: 1fr; }

  .bloc .media,
  .bloc .texte { grid-column: 1 / -1 !important; grid-row: auto !important; }

  .bloc .texte { order: 99; }   /* le texte passe systématiquement sous les images */

  /* Sur mobile tout s'empile dans une seule colonne : le resserrement des
     gabarits diptyque et pleine largeur collerait aussi les images entre
     elles. On leur rend donc l'espacement commun. */
  .bloc--diptyque,
  .bloc--pleine-largeur { row-gap: var(--gouttiere-v); }

  .texte__desc { max-width: none; }

  /* Le panneau des filtres prend toute la largeur de l'écran. */
  .filtres__zone { grid-column: 1 / -1; }

  /* La fenêtre d'un projet passe sur une seule colonne : les images, puis
     le texte dessous — comme sur la page Projets. L'ensemble défile, le
     texte ne peut pas rester fixe sur un écran de cette taille. */
  .fenetre {
    grid-template-columns: 1fr;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .fenetre__images {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    padding-bottom: 0;
  }

  .fenetre__images .media:nth-child(3n) { grid-column: 1 / -1; }

  .fenetre__texte {
    grid-column: 1 / -1;
    padding-top: var(--espace-bloc);
  }
  /* La page Contact passe sur une seule colonne. Les quatre blocs se
     suivent dans l'ordre où on les lit sur la maquette : présentation,
     contact, collaborations, services. */
  :root {
    --t-contact:       clamp(12px, 3.2vw, 16px);
    --t-contact-liste: clamp(12px, 3.2vw, 16px);
    --contact-ligne:   clamp(15px, 4.0vw, 20px);
    /* Même chose pour la page Contact : compté depuis le haut de l'écran,
       réglé pour que le texte reste où il était. */
    --contact-haut:    136px;
    --contact-avant-collabs:  calc(var(--contact-ligne) * 2);
    --contact-avant-services: calc(var(--contact-ligne) * 2);
  }

  .contact {
    display: flex;
    flex-direction: column;
    padding-left: var(--marge);
  }

  /* display: contents fait remonter les quatre blocs au niveau de la
     page : c'est ce qui permet de les remettre dans l'ordre ci-dessous. */
  .contact__gauche,
  .contact__droite { display: contents; }

  .contact__droite { margin-top: 0; }

  .contact__bloc--presentation   { order: 1; }
  .contact__bloc--liens          { order: 2; margin-top: var(--contact-avant-collabs); }
  .contact__bloc--collaborations { order: 3; }
  .contact__bloc--services       { order: 4; }

  .contact__liste li { white-space: normal; }

  /* En pleine largeur, les paragraphes reprennent toute la colonne. */
  .contact__para { max-width: none; }
}


/* ───────────────────────────────────────────────────────────────────────
   ANIMATIONS RÉDUITES
   ───────────────────────────────────────────────────────────────────────

   Certains visiteurs demandent, dans les réglages de leur système, que les
   sites bougent le moins possible — mal des transports, sensibilité,
   fatigue. Pour eux, tout devient instantané : le diaporama, les survols,
   l'ouverture et la fermeture de la fenêtre projet. Rien d'autre ne change.

   Ce bloc est volontairement le DERNIER du fichier : en CSS, à force égale,
   c'est la dernière règle écrite qui gagne. Placé plus haut, il se ferait
   contredire par les règles qui suivent. Si tu ajoutes une animation,
   ajoute-la ici aussi, tout en bas.
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .diapo,
  .pilule,
  .logo    { transition: none; }

  .fenetre,
  .fenetre--sortie,
  .filtres__panneau--deroule,
  .filtres__panneau--repli { animation: none; }

  /* Le flou reste — ce n'est pas un mouvement — mais il n'est plus
     progressif. Les deux lignes sont nécessaires : la seconde doit peser
     aussi lourd que la règle du survol pour pouvoir l'emporter. */
  body > *:not(.filtres):not(.voile),
  body.filtres-flou > *:not(.filtres):not(.entete):not(.voile),
  body.fenetre-ouverte > *:not(.fenetre):not(.bandeau-fermeture):not(.voile),
  body.fenetre-flou > *:not(.fenetre):not(.bandeau-fermeture):not(.voile) { transition: none; }
}