/* =============================================================
   Célia Cerqueira : feuille de style unique
   1. Variables      5. Accueil
   2. Base           6. Projets
   3. Structure      7. Contact
   4. Composants     8. Responsive
                     9. Pages annexes
   ============================================================= */

/* ---------- 0. POLICE DE TITRAGE ----------
   Prata (SIL Open Font License, licence dans assets/fonts/LICENCES.txt), servie
   depuis le dossier du site : aucun appel extérieur. Elle remplace Orange Avenue
   le 2026-09-13 : cette dernière n'existait qu'en version de démonstration,
   réservée à un usage personnel. Une seule graisse existe (Regular) ; on la
   déclare sur toute la plage 400-700 pour que le navigateur n'invente pas de
   faux gras sur les titres. Il n'y a plus de version évidée. */
@font-face{
  font-family:"Prata";
  src:url("../fonts/prata-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}


/* ---------- 0 bis. POLICE DE TEXTE ----------
   Jost, servie depuis le dossier du site elle aussi : le site n'appelle plus
   Google Fonts, et l'adresse du visiteur ne part donc plus chez un tiers.
   Un seul fichier par alphabet couvre toutes les graisses (police variable) ;
   le navigateur ne telecharge que l'alphabet dont la page a besoin.
   Licence SIL Open Font, hebergement libre. */
@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-latin.woff2") format("woff2");
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* L'alphabet « latin étendu » (jost-latin-ext.woff2) n'est plus déclaré : le
   navigateur le téléchargeait à chaque page — 17 Ko, dernier maillon de la
   chaîne de chargement — sans jamais s'en servir. Contrôlé le 2026-09-16 :
   accueil, projets, contact et mentions légales sont identiques au pixel près
   sans lui (dev/verification, captures avec et sans). Le fichier reste dans
   assets/fonts/ : il suffit de remettre ce bloc si un texte du site venait à
   contenir une lettre qu'il est seul à dessiner (š, ł, ō, ș…) — sans lui,
   cette lettre serait tracée par la police de secours. */
@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-cyrillic.woff2") format("woff2");
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- 1. VARIABLES ---------- */
:root{
  --paper:      #F7F3EC;
  --paper-2:    #F1EAE0;
  --paper-3:    #E7DDCF;
  --ink:        #191411;
  --ink-2:      #2B231D;
  --muted:      #6E6055;
  --line:       #DDD2C3;
  --line-2:     #C6B8A4;
  --accent:     #9C4A31;
  --accent-2:   #C08A6E;
  --noir:       #14100E;
  --noir-2:     #0C0908;

  --serif:  "Prata", Didot, Georgia, "Times New Roman", serif;
  /* le verre dense du tiroir des catégories, repris par la barre d'en-tête
     quand elle s'y accroche : une seule teinte, un seul flou (lot 24) */
  --verre-dense: rgba(247,243,236,.8);
  --verre-flou:  blur(18px) saturate(170%);
  --sans:  "Jost", Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --max: 84rem;
  --gut: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  --ease: cubic-bezier(.22,.61,.36,1);
  --head-h: 4.4rem;
}

/* ---------- 1 bis. POLICES RÉGLABLES ----------
   Zone réservée à l'application de gestion : tout ce qui est entre les deux
   repères ci-dessous est réécrit à chaque enregistrement, une retouche faite
   ici à la main serait perdue. Le choix des deux polices se fait dans
   l'application, onglet Page d'accueil.
   Elle vient après le bloc :root ci-dessus, et l'emporte donc sur lui : à
   égalité de poids, c'est la dernière déclaration qui gagne. Les valeurs
   restées plus haut servent de filet si cette zone venait à être vidée.
   Les polices déjà déclarées plus haut (Prata, Jost) ne sont pas redéclarées
   ici : la feuille du site les découpe par alphabet, ce que l'application ne
   sait pas faire. Seule une police déposée depuis l'application s'y ajoute. */
/* @debut-polices */
:root{
  --serif:  "Prata", Didot, Georgia, "Times New Roman", serif;
  --sans:   "Jost", Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif;
}
/* @fin-polices */

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.015em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:var(--paper); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* grain imprimé, très discret */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. STRUCTURE ---------- */
.shell{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(4.5rem,10vw,9rem); }

.display{
  font-family:var(--serif); font-weight:400; line-height:.98; letter-spacing:-.02em;
  font-size:clamp(2.9rem,1.4rem + 6vw,6.4rem);
}
/* titres de section : en gras */
.h2{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2.1rem,1.2rem + 3.2vw,3.7rem); line-height:1.04; letter-spacing:-.025em;
}
.h3{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem); line-height:1.15; letter-spacing:-.02em;
}
.lead{ font-size:clamp(1.05rem,1rem + .45vw,1.3rem); line-height:1.62; color:var(--ink-2); }
.muted{ color:var(--muted); }
.it{ font-style:italic; }
.accent{ color:var(--accent); }
/* Textes mis en forme dans l'outil de gestion (classe « riche ») : les mots
   mis en valeur prennent l'accent — cuivre foncé sur le papier, cuivre clair
   sur le noir —, le gras s'épaissit sans changer de couleur, les liens se
   soulignent d'un filet d'accent. */
:root{ --valeur:var(--accent); }
:is(.studio,.foot,.rail,.carte-grande--sombre){ --valeur:var(--accent-2); }
.riche strong{ font-weight:500; color:var(--valeur); }
.riche b{ font-weight:600; }
.riche a{
  color:inherit; text-decoration:underline; text-decoration-color:var(--valeur);
  text-decoration-thickness:1px; text-underline-offset:.2em; transition:color .3s var(--ease);
}
.riche a:hover{ color:var(--valeur); }
.riche p{ margin:0; }
.riche p + p{ margin-top:1em; }
/* lettres évidées : à poser sur un titre entier ou sur un seul mot */

/* ---------- 4. COMPOSANTS ---------- */

/* en-tête */
/* Position du reflet, posée sur le verre par main.js et lue par ses calques :
   déclarées pour valoir 0 avant le premier mouvement de souris. */
@property --rx{ syntax:"<length>"; inherits:true; initial-value:0px; }
@property --ry{ syntax:"<length>"; inherits:true; initial-value:0px; }

.head{
  /* Toutes les couleurs de l'en-tête passent par ces variables. Au-dessus
     d'une zone sombre (carrousel, présentation, pied de page), le script pose
     .est-sombre : le verre et le texte basculent ensemble, clair sur clair,
     sombre sur sombre. */
  --h-texte:  var(--ink);
  --h-doux:   rgba(25,20,17,.74);
  --h-filet:  var(--line);
  --h-accent: var(--accent);
  --v-teinte: var(--v-plein);          /* la teinte dense du tiroir des catégories */
  --v-plein:  rgba(247,243,236,.78);
  --v-bord:   rgba(255,255,255,.78);
  --v-reflet: rgba(255,255,255,.85);
  --v-lueur:  rgba(255,255,255,.3);
  --v-ombre:  rgba(40,28,20,.22);
  --v-goutte: rgba(255,255,255,.52);
  position:sticky; top:0; z-index:900;
  color:var(--h-texte);
  /* à côté de la barre flottante, le clic passe à la page */
  pointer-events:none;
  transition:color .5s var(--ease);
}
.head.est-sombre{
  --h-texte:  var(--paper);
  --h-doux:   rgba(247,243,236,.72);
  --h-filet:  rgba(247,243,236,.14);
  --h-accent: var(--accent-2);
  --v-plein:  rgba(20,16,14,.8);
  --v-bord:   rgba(247,243,236,.26);
  --v-reflet: rgba(247,243,236,.72);
  --v-lueur:  rgba(247,243,236,.1);
  --v-ombre:  rgba(0,0,0,.55);
  --v-goutte: rgba(247,243,236,.14);
}
.head.est-sombre :focus-visible{ outline-color:var(--accent-2); }
.head.est-sombre ::selection{ background:var(--accent-2); color:var(--noir); }

/* Le verre : un calque posé sous le contenu. En haut de page il couvre toute
   la largeur ; dès qu'on défile il se rétracte, avec un léger rebond, en
   barre qui flotte. Lui seul change de taille : la hauteur de
   l'en-tête ne bouge jamais et la page ne saute pas. */
.head__verre{
  position:absolute; z-index:1; top:0; bottom:0; left:0; right:0;
  border-radius:0; overflow:hidden;
  background:var(--v-teinte);
  -webkit-backdrop-filter:var(--verre-flou); backdrop-filter:var(--verre-flou);
  box-shadow:inset 0 -1px 0 var(--h-filet);
  transition:top .75s var(--ressort), bottom .75s var(--ressort), left .75s var(--ressort), right .75s var(--ressort),
             border-radius .6s var(--ease), background-color .5s var(--ease), box-shadow .6s var(--ease),
             opacity .5s var(--ease);
}
/* Lueur intérieure et liseré de lumière, qui suivent la souris : deux calques
   posés dans le verre par main.js, et seulement là où il y a une souris —
   au doigt, il n'y a pas de curseur à suivre (choix du 2026-09-20). La tache de lumière y est peinte une fois,
   sur un calque plus grand que le verre, et c'est le calque qui glisse
   (translate) jusqu'à la position de la souris : la carte graphique s'en
   charge seule, sans repeindre le dégradé à chaque image. Le verre coupe la
   tache à ses bords, comme avant. */
.reflet{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity .6s var(--ease);
}
.head.is-stuck .reflet{ opacity:1; }
.reflet > i{
  position:absolute; left:0; top:0; width:40rem; height:24rem; margin:-12rem 0 0 -20rem;
  translate:var(--rx) var(--ry);
  transition:translate .35s var(--ease);
}
.reflet--lueur > i{ background:radial-gradient(9rem 5rem at 50% 50%, var(--v-lueur), transparent 70%); }
/* le liseré : la lumière n'apparaît que sur le trait d'un pixel du bord */
.reflet--liseret{
  padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.reflet--liseret > i{ background:radial-gradient(12rem 6rem at 50% 50%, var(--v-reflet), transparent 72%); }

/* Sur la barre claire, une lumière blanche sur du crème ne se voit pas :
   mesuré cinq fois plus faible que sur la barre sombre (0,35 contre 1,77
   d'écart moyen). Le verre s'y épaissit plutôt qu'il ne s'éclaire : un cœur
   blanc, un halo sombre très doux derrière. Intensité réglée par lui, en deux
   baisses, jusqu'à 0,99. La barre sombre garde sa lumière d'origine. */
.head:not(.est-sombre) .reflet--lueur > i{
  background:
    radial-gradient(6.5rem 3.8rem at 50% 50%, rgba(255,255,255,.62), transparent 72%),
    radial-gradient(13rem 7rem at 50% 50%, rgba(25,20,17,.076), transparent 70%);
}

/* barre flottante : décollée des bords, alignée sur le contenu */
.head.is-stuck .head__verre{
  top:.55rem; bottom:.55rem;
  left:max(.6rem, calc(var(--gut) - 1.4rem));
  right:max(.6rem, calc(var(--gut) - 1.6rem));
  border-radius:2rem;
  box-shadow:inset 0 1px 0 var(--v-bord), inset 0 -1px 0 rgba(255,255,255,.08),
             0 12px 32px -14px var(--v-ombre), 0 2px 8px -3px var(--v-ombre);
}
/* en haut de page, sur toutes les pages : pas de verre tant qu'on n'a pas défilé */
.head--over:not(.is-stuck) .head__verre{ opacity:0; }

.head__in{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.95rem; }
.head__in > *{ pointer-events:auto; }
.brand{
  font-family:var(--serif); font-size:1.2rem; text-decoration:none; white-space:nowrap; line-height:1.1; padding-block:.3rem;
  transition:translate .75s var(--ressort);
}
.brand span{
  display:block; font-family:var(--sans); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--h-doux); margin-top:.25rem;
  transition:color .5s var(--ease);
}
.nav{
  position:relative; display:flex; gap:clamp(.15rem,1.2vw,1rem);
  /* le dernier mot reste aligné sur le bord du contenu malgré son coussin */
  margin-right:-.85rem;
  transition:translate .75s var(--ressort);
}
.nav a{
  position:relative; z-index:1; text-decoration:none; border-radius:999px;
  /* à droite, l'espacement des lettres ajoute déjà un blanc : on le retire du coussin */
  padding:.45rem calc(.85rem - .2em) .45rem .85rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--h-doux);
  transition:color .35s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--h-texte); }
/* la goutte : un éclat de verre posé sous la page en cours, qui coule vers le mot survolé */
/* La goutte de verre qui glisse sous les liens du menu et sous les catégories :
   même dessin des deux côtés, seuls l'habillage et la hauteur changent. */
.nav__goutte,.filters__goutte{
  position:absolute; z-index:0; left:0; top:50%; width:0;
  translate:var(--gx,0px) -50%;
  border-radius:999px; pointer-events:none;
  opacity:0; scale:.7;
}
.nav__goutte.est-visible,.filters__goutte.est-visible{ opacity:1; scale:1; }
.nav__goutte.fige,.filters__goutte.fige{ transition:none; }
.nav__goutte{
  height:2.2rem;
  background:var(--v-goutte);
  box-shadow:inset 0 1px 0 var(--v-bord), inset 0 -1px 1px rgba(40,28,20,.06), 0 4px 12px -6px var(--v-ombre);
  transition:translate .6s var(--ressort), opacity .35s var(--ease), scale .5s var(--ressort), background-color .5s var(--ease);
}

/* bouton Menu : seulement sur téléphone, où il remplace les trois mots */
.menu-btn{
  display:none; align-items:center; gap:.75rem; min-height:44px; padding:0;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--h-texte);
  transition:translate .75s var(--ressort);
}
.menu-btn__traits{ position:relative; width:1.4rem; height:.55rem; }
.menu-btn__traits i{
  position:absolute; left:0; right:0; top:0; height:1px; background:currentColor;
  transition:transform .5s var(--ease), top .5s var(--ease);
}
.menu-btn__traits i + i{ top:calc(100% - 1px); }
.head.est-ouvert .menu-btn__traits i{ top:50%; transform:rotate(45deg); }
.head.est-ouvert .menu-btn__traits i + i{ top:50%; transform:rotate(-45deg); }
html.menu-ouvert body{ overflow:hidden; }  /* sur body et non sur html : sinon body devient la zone qui défile et l’en-tête collant part avec la page */
/* le menu plein écran n'existe que sur téléphone (voir 8. Responsive) */
.plein{ display:none; }

/* les sections de l'accueil s'arrêtent sous l'en-tête, pas derrière */
.section[id],.rail[id]{ scroll-margin-top:calc(var(--head-h) - 1px); }
.studio__col[id]{ scroll-margin-top:calc(var(--head-h) + 2rem); }

/* boutons en verre (essai)
   Tous les boutons prennent le verre de l'en-tête : un calque dépoli posé
   derrière le texte (::before), une lueur et un liseré qui s'allument du
   côté de la souris (::after ; positions --bx et --by posées par main.js),
   et un rebond de goutte quand on arrive dessus. Sans réfraction des bords :
   multipliée sur la page, elle ralentirait le défilement. Posé sur une
   surface déjà unie ou déjà en verre (barre des filtres), le
   calque ne floute rien : on s'en passe. */
:root{ --ressort:cubic-bezier(.3,1.3,.45,1); }
:is(.btn,.rail__btn,.cats__fl,.lb__x,.lb__nav,.reseau){
  --b-teinte: rgba(247,243,236,.55);
  --b-bord:   rgba(255,255,255,.8);
  --b-reflet: rgba(255,255,255,.95);
  --b-lueur:  rgba(255,255,255,.4);
  --b-ombre:  rgba(40,28,20,.22);
  --b-texte:  var(--ink);
  --b-flou:   blur(14px) saturate(170%);
  position:relative; isolation:isolate;
  border:0; border-radius:999px; background:none; color:var(--b-texte);
  cursor:pointer;
}
:is(.btn,.rail__btn,.cats__fl,.lb__x,.lb__nav,.reseau)::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(7rem 4rem at var(--bx,50%) var(--by,0%), var(--b-lueur), transparent 70%), var(--b-teinte);
  -webkit-backdrop-filter:var(--b-flou); backdrop-filter:var(--b-flou);
  box-shadow:inset 0 1px 0 var(--b-bord), inset 0 -1px 0 rgba(255,255,255,.08),
             0 10px 26px -14px var(--b-ombre), 0 2px 8px -3px var(--b-ombre);
  transition:background-color .45s var(--ease), box-shadow .5s var(--ease);
}
:is(.btn,.rail__btn,.cats__fl,.lb__x,.lb__nav,.reseau)::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:radial-gradient(9rem 5rem at var(--bx,50%) var(--by,0%), var(--b-reflet), transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease);
}
:is(.btn,.rail__btn,.cats__fl,.lb__x,.lb__nav,.reseau):is(:hover,:focus-visible)::after{ opacity:1; }
:is(.btn,.cats__fl,.reseau):hover{ --b-teinte: rgba(255,255,255,.74); }
.cats__fl{ --b-flou: none; }
/* sur fond sombre : carrousel, visionneuse */
:is(.btn--light,.rail__btn,.lb__x,.lb__nav){
  --b-teinte: rgba(247,243,236,.08);
  --b-bord:   rgba(247,243,236,.26);
  --b-reflet: rgba(247,243,236,.75);
  --b-lueur:  rgba(247,243,236,.12);
  --b-ombre:  rgba(0,0,0,.55);
  --b-texte:  var(--paper);
}
:is(.btn--light,.rail__btn,.lb__x,.lb__nav):hover{ --b-teinte: rgba(247,243,236,.17); }
/* le bouton principal : le même verre, plus teinté, pour qu'on le voie d'abord */
.btn--solid{
  --b-teinte: rgba(25,20,17,.8);
  --b-bord:   rgba(247,243,236,.28);
  --b-reflet: rgba(247,243,236,.8);
  --b-lueur:  rgba(247,243,236,.16);
  --b-ombre:  rgba(25,20,17,.45);
  --b-texte:  var(--paper);
}
.btn--solid:hover{ --b-teinte: rgba(25,20,17,.9); }

.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.95rem 1.6rem;
  font-size:.71rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
}
.btn__arrow{ transition:transform .45s var(--ease); }

/* logos des réseaux et de la fiche IMDb (essai) : une pastille de verre ronde,
   le logo d'une seule couleur, le nom en bulle au survol ou au clavier. Le nom
   reste dans le lien : c'est lui que lisent les lecteurs d'écran. */
.reseau{
  display:inline-grid; place-items:center; flex:none;
  width:2.9rem; height:2.9rem; padding:0; vertical-align:middle;
  text-decoration:none;
}
.reseau--imdb{ width:4rem; }
.reseau__logo{ display:block; width:1.2rem; height:1.2rem; transition:scale .5s var(--ressort); }
.reseau--imdb .reseau__logo{ width:2.2rem; height:1.1rem; }
.reseau:hover .reseau__logo{ scale:1.08; }
.reseau__nom{
  position:absolute; left:50%; bottom:calc(100% + .5rem); z-index:5;
  translate:-50% .3rem; padding:.32rem .7rem; border-radius:999px; white-space:nowrap;
  font-family:var(--sans); font-size:.62rem; font-weight:400; line-height:1.2;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); background:rgba(25,20,17,.9);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), translate .5s var(--ressort);
}
.reseau:is(:hover,:focus-visible) .reseau__nom{ opacity:1; translate:-50% 0; }
/* dans le pied, sur le noir : le verre sombre des flèches du carrousel, la
   bulle claire */
.foot .reseau{
  --b-teinte: rgba(247,243,236,.08);
  --b-bord:   rgba(247,243,236,.26);
  --b-reflet: rgba(247,243,236,.75);
  --b-lueur:  rgba(247,243,236,.12);
  --b-ombre:  rgba(0,0,0,.55);
  --b-texte:  var(--paper);
  padding:0; color:var(--b-texte);
}
.foot .reseau:hover{ --b-teinte: rgba(247,243,236,.17); color:var(--b-texte); }
.foot .reseau__nom{ color:var(--noir); background:rgba(247,243,236,.92); }
/* deux rangées, comme sur la page Contact : les réseaux, puis les fiches
   professionnelles ; une famille entièrement masquée ne laisse pas de ligne vide */
.foot__reseaux{ display:grid; justify-items:start; gap:.55rem; padding-block:.35rem .15rem; }
.foot__famille{ display:flex; flex-wrap:wrap; gap:.55rem; }
.foot__famille:not(:has(> :not([hidden]))){ display:none; }
/* Crew United n'a pas de logo répandu : son nom, encadré comme le logo IMDb,
   dans la même pastille de verre. Le nom se lit : pas de bulle. */
.reseau.reseau--texte{ width:auto; padding:0 .85rem; }
.reseau__mot{
  display:block; padding:.2rem .45rem .18rem; border:1.5px solid currentColor; border-radius:.3rem;
  font-family:var(--sans); font-size:.58rem; font-weight:600; line-height:1.2;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  transition:scale .5s var(--ressort);
}
.reseau:hover .reseau__mot{ scale:1.05; }
.btn:hover .btn__arrow{ transform:translateX(.3rem); }
.btns{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* lien souligné */
.ul{
  text-decoration:none; background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:.1em; transition:background-size .45s var(--ease);
}
.ul:hover{ background-size:0 1px; background-position:100% 100%; }

/* visuel provisoire : remplacé dès qu'une photo est fournie */
.media{ position:relative; overflow:hidden; background:var(--paper-2); }
.media > img,.media > .ph{
  width:100%; height:100%; transition:transform 1s var(--ease), filter 1s var(--ease);
}
/* La photo entre entière dans son cadre : rien n'est jamais rogné à l'affichage.
   Le fond du cadre prend le relais sur les côtés quand les proportions diffèrent.
   Chaque photo peut demander autre chose, depuis l'application de gestion. */
.media > img{ object-fit:contain; }
.media > img[data-ajust="remplir"]{ object-fit:cover; }
.media > img[data-ajust="etirer"]{ object-fit:fill; }
/* Fond flouté des cartes de projet : la même photo, agrandie, floutée et
   assombrie, glissée derrière la photo entière (main.js, option « fond »). Elle
   déborde du cadre d'un cinquième de chaque côté : un flou de 22 px pâlit sur
   près de 50 px au bord de l'image, et un débord plus court laissait voir le
   fond clair de la carte sur les pages claires. */
.media:has(> .media__fond){ isolation:isolate; }
.media > img.media__fond{
  position:absolute; inset:-20%; z-index:-1;
  /* max-width : la règle commune des images (img{ max-width:100% }) la
     ramenait à la largeur du cadre ; décalée à gauche, elle laissait un
     liseré clair à droite de chaque affiche */
  width:140%; height:140%; max-width:none; object-fit:cover;
  filter:blur(22px) saturate(1.15) brightness(.55);
  pointer-events:none;
}

/* Crédit du photographe, posé discrètement sur la photo. Il ne s'affiche que
   si le champ est rempli, et reste lisible sur un fond clair comme sur un fond
   sombre grâce à son voile. */
.cred{
  position:absolute; z-index:2; right:.5rem; bottom:.5rem;
  max-width:calc(100% - 1rem);
  padding:.2rem .5rem;
  font-family:var(--sans); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  /* hauteur de ligne écrite ici : la visionneuse pose la photo dans une boîte
     à hauteur de ligne nulle, qui écrasait le voile en un trait de 6 px */
  line-height:1.65;
  color:rgba(247,243,236,.96);
  /* Le voile est assez dense pour rester lisible même sur une photo très
     claire : au pire des cas le texte garde un contraste de 5:1. */
  background:rgba(12,9,8,.62);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
  transition:opacity .5s var(--ease);
}
.ph{
  display:grid; place-items:center; text-align:center;
  background:
    repeating-linear-gradient(-45deg, rgba(25,20,17,.05) 0 1px, transparent 1px 10px),
    linear-gradient(155deg, var(--paper-3), var(--paper-2) 55%, var(--paper-3));
}
.ph__mark{
  font-family:var(--serif); font-style:italic; color:#B6A791;
  font-size:clamp(1rem,.9rem + .5vw,1.4rem); padding:1rem; line-height:1.25;
}
.ph__mark small{
  display:block; font-family:var(--sans); font-style:normal; color:#BCAD98;
  font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; margin-top:.55rem;
}
.ph--dark,.studio .ph{
  background:
    repeating-linear-gradient(-45deg, rgba(247,243,236,.055) 0 1px, transparent 1px 10px),
    linear-gradient(155deg,#241d19,#191411 55%,#241d19);
}
.ph--dark .ph__mark,.ph--dark .ph__mark small,.studio .ph__mark,.studio .ph__mark small{ color:rgba(247,243,236,.34); }

/* pied de page */
/* position:relative + z-index : le pied ouvre son propre plan d'empilement,
   dont dépend le nom qui apparaît au survol d'une pastille (.reseau__nom).
   (Il servait aussi, avant le lot 21, à passer sous le panneau déplié.) */
.foot{ position:relative; z-index:40; background:var(--noir); color:var(--paper); padding:clamp(3.5rem,7vw,6rem) 0 1.8rem; }
.foot__top{ display:grid; gap:clamp(2.2rem,5vw,4rem); grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); }
.foot__word{ font-family:var(--serif); font-size:clamp(1.9rem,1.2rem + 3vw,3.2rem); line-height:1.05; max-width:14ch; }
/* l'italique ne change que la forme des lettres : la couleur est réservée aux mots
   mis en valeur (strong), sinon les deux se confondaient (2026-09-28) */
.foot__word :is(.it,em){ font-style:italic; }
/* tailles réglées dans l'outil (Pied de page, « Taille de la phrase ») ; sans classe,
   la grande, d'origine. Plus petite, la phrase prend toute sa colonne : 14ch se
   mesurent dans la taille du texte, et la garderaient sur autant de lignes. */
.foot__word--moyenne{ font-size:clamp(1.55rem,1.05rem + 1.9vw,2.35rem); line-height:1.12; max-width:none; }
.foot__word--petite{ font-size:clamp(1.3rem,1rem + 1vw,1.7rem); line-height:1.22; max-width:none; }
.foot h2{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  color:rgba(247,243,236,.55); margin-bottom:1.1rem;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
/* padding-block : une zone de toucher d'au moins 24 px sans bouger la ligne */
.foot a{ text-decoration:none; color:rgba(247,243,236,.82); transition:color .35s var(--ease); padding-block:.3rem; }
.foot a:hover{ color:var(--accent-2); }
.foot__bottom{
  margin-top:clamp(2.8rem,6vw,4.5rem); padding-top:1.5rem;
  border-top:1px solid rgba(247,243,236,.14);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,243,236,.55);
}

/* apparitions au défilement (essai GSAP)
   Les anciennes apparitions (classes reveal et reveal-img) sont remplacées
   par assets/js/animations.js. Ces blocs restent cachés jusqu'à ce que GSAP
   les prenne en main, au lieu de se montrer une fraction de seconde puis de
   disparaître pour être animés : un clignotement. C'est cette feuille qui les
   cache, et non plus un script lu dans l'en-tête des pages — le premier
   affichage n'attend ainsi qu'un seul fichier.
   La classe « animations-pretes », posée par animations.js dès que GSAP a posé
   ses états de départ, lève la règle. Si rien n'arrive, le filet ci-dessous
   affiche tout au bout de 3 s ; sans JavaScript, les pages ramènent ce délai à
   zéro (balise noscript) ; quand le visiteur a demandé moins d'animations, la
   règle ne s'applique pas du tout. Même liste que dans animations.js.
   Durée d'une milliseconde plutôt que zéro : invisible, mais une animation de
   durée nulle ne peut pas être confiée à la carte graphique. */
@media (prefers-reduced-motion: no-preference){
  html:not(.animations-pretes) :is(
    .rail__head, .rail__track, .rail__foot,
    .folio__head, #galerie .folio__item,
    .studio__intro, .studio__cols, .insta__tete, .insta__carte,
    .phead__in, #grille .proj, #grille .year,
    .demande .cgrid > *, .annexe__bloc, .introuvable > *
  ){ opacity:0; animation:filet-apparition 1ms var(--filet-apparition, 3s) forwards; }
}
@keyframes filet-apparition{ to{ opacity:1; } }

/* haut de l'accueil : fondu écrit ici plutôt que confié à GSAP
   Le portrait est la plus grande image de la page : tant que son fondu
   attendait le chargement de la bibliothèque d'animation, le navigateur
   considérait la page affichée près d'une seconde plus tard. Ce fondu-ci part
   dès le premier affichage. Durées, décalages et courbe repris à l'identique
   de la séquence d'avant (power2.out, soit une sortie en cubique). */
@media (prefers-reduced-motion: no-preference){
  .hero__title{ animation:hero-titre .8s cubic-bezier(.215,.61,.355,1) both; }
  .hero__figure{ animation:hero-bloc .7s cubic-bezier(.215,.61,.355,1) both; }
  .hero__role{ animation:hero-bloc .7s .3s cubic-bezier(.215,.61,.355,1) both; }
}
@keyframes hero-titre{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes hero-bloc{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }

/* lien d'évitement (accessibilité clavier) */
.skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:var(--paper); padding:.8rem 1.2rem; text-decoration:none;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
}
.skip:focus{ left:.6rem; top:.6rem; }

/* ---------- 5. ACCUEIL ---------- */

/* ouverture : pleine page claire, texte à gauche, photo encadrée à droite.
   Verre derrière (essai) : la photo arrondie dans un passe-partout clair, une
   plaque de verre décalée derrière elle. Rien n'est flouté sur la photo : le
   premier affichage, dont elle est la plus grande image, ne perd rien. */
.hero{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100svh;
  margin-top:calc(var(--head-h) * -1);
  display:flex; align-items:center;
  padding-block:calc(var(--head-h) + 2.5rem) clamp(2.5rem,7vh,5rem);
  background:var(--paper); color:var(--ink);
}
.hero__in{
  width:100%; display:grid; align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,6vw,5rem);
}
.hero__title{
  font-size:clamp(2.9rem,1rem + 7.4vw,6.6rem);
  line-height:.92; letter-spacing:-.03em; margin:0;
}
/* Le « C » de la police de titrage porte un blanc à sa gauche : sans ce
   retrait, le nom commence 5 px plus loin que le métier et que le nom de
   l'en-tête, posés sur la même ligne (mesuré à 1280 et 1440 px). Seulement
   quand le texte est aligné à gauche. */
@media (min-width:1025px){
  .hero__title{ margin-left:-.047em; }
}
/* Le masque ne doit rogner que par le bas, d'où le texte monte à l'ouverture.
   Les capitales et les accents de la police de titrage dépassent la boîte de ligne :
   on ouvre le masque vers le haut, et on annule ce décalage en marge. */
.hero__mot{
  display:block; overflow:hidden;
  padding-top:.18em; margin-top:-.18em;
  padding-bottom:.08em;
}
/* essai GSAP : les mots ne montent plus un à un, le titre entier apparaît
   en fondu depuis animations.js */
.hero__glisse{ display:block; }
.hero__role{
  margin:1.6rem 0 0; font-size:clamp(.72rem,.66rem + .3vw,.86rem);
  letter-spacing:.32em; text-transform:uppercase; color:var(--muted);
}
/* centré (tablette, téléphone) : l'espacement ajouté après la dernière lettre
   décale le mot vers la gauche d'une demi-lettre ; le même blanc à gauche le
   remet au milieu */
@media (max-width:1024px){
  .hero__role{ padding-left:.32em; }
  /* le blanc du « C » et l'approche serrée poussent le nom centré vers la
     droite (2 px sur téléphone, 4 px sur tablette) : on le ramène */
  .hero__title{ translate:-.035em 0; }
}
/* --photo-h : hauteur maximale de la photo ; --photo-l : sa largeur réelle
   (4/5 de cette hauteur, au plus la colonne) ; --photo-marge : l'espace qui
   reste de chaque côté, la photo étant centrée. La plaque se cale dessus. */
.hero__figure{
  position:relative; margin:0;
  --photo-h:72svh;
  --photo-l:min(100%, calc(var(--photo-h) * .8));
  --photo-marge:calc((100% - var(--photo-l)) / 2);
}
.hero__figure .media{
  aspect-ratio:4/5; max-height:var(--photo-h); margin-inline:auto; background:var(--paper-2);
  border-radius:1.6rem; isolation:isolate;   /* le bord de la photo de présentation */
  /* l'ombre posée sur le papier, sans passe-partout (choix du 2026-09-20) */
  box-shadow:0 40px 70px -40px rgba(40,28,20,.5), 0 6px 18px -10px rgba(40,28,20,.2);
}
.hero__figure .media > img{ object-position:50% 50%; }
/* un liseré de lumière sur la photo, posé par-dessus l'image */
.hero__figure .media::after{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(25,20,17,.06), inset 0 1px 0 rgba(255,255,255,.28);
}
/* la plaque de verre, décalée derrière la photo */
.hero__figure::before{
  content:""; position:absolute; z-index:0;
  top:-2.4rem; right:calc(var(--photo-marge) - 2.4rem);
  width:calc(var(--photo-l) * .7); height:55%;
  border-radius:2.6rem;
  background:linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.24) 60%, rgba(255,255,255,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(25,20,17,.05),
             0 24px 50px -30px rgba(40,28,20,.3);
}

/* coups de cœur (carrousel sombre) */
.rail{ background:var(--noir); color:var(--paper); padding-block:clamp(4.5rem,10vw,8rem); overflow:hidden; }
.rail__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem 3rem; }
.rail__head h2{ color:var(--paper); max-width:14ch; }
.rail__note{ max-width:36ch; color:rgba(247,243,236,.6); font-size:.92rem; }
.rail__ctrl{ display:flex; gap:.6rem; }
/* Les boutons posés dans un bloc apparaissent avec lui : animations.js fait
   monter --apparition de 0 à 1. Leur opacité propre (une flèche en butée est
   pâle) reste décidée ici, au moment même où l'on regarde, et non relevée une
   fois pour toutes au chargement — sinon une flèche devenue active pendant que
   l'on était ailleurs apparaissait pâle puis s'éclairait. */
.btn{ opacity:var(--apparition,1); }
.rail__btn{
  width:3rem; height:3rem; display:grid; place-items:center;
  opacity:var(--apparition,1);
  transition:opacity .4s var(--ease);
}
.rail__btn[disabled]{ opacity:calc(.28 * var(--apparition,1)); cursor:default; }
.rail__btn[disabled]::after{ opacity:0; }
.rail__track{
  display:flex; gap:clamp(1rem,2.5vw,2rem);
  /* de la place au-dessus et au-dessous des cartes : elles se soulèvent au
     survol et portent une ombre, que la piste rognerait */
  margin-top:calc(clamp(2.5rem,5vw,4rem) - .9rem); margin-bottom:-2.2rem; padding-block:.9rem 2.2rem;
  padding-inline:var(--gut); scroll-padding-inline:var(--gut);
  /* Pas d'aimantation du navigateur : elle cale la carte d'un coup sec et ne
     sait pas le faire autrement. C'est accueil.js qui pose la piste sur la
     carte la plus proche, en glissant, une fois le geste fini. La marge de
     départ ci-dessus (scroll-padding-inline) lui dit où une carte est cadrée. */
  overflow-x:auto;
  scrollbar-width:none; cursor:grab;
}
.rail__track::-webkit-scrollbar{ display:none; }
.rail__track.is-drag{ cursor:grabbing; }
/* chaque projet dans une carte de verre sombre (voir « verre sombre » plus bas) ;
   la carte n'est pas un lien : seule l'affiche s'ouvre, le reste sert à saisir */
.card{
  flex:0 0 clamp(16rem,32vw,23rem);
  color:var(--paper);
  /* en colonne : le trait et les crédits se posent en bas de la carte, et
     s'alignent d'une carte à l'autre (toutes ont la hauteur de la plus haute) */
  display:flex; flex-direction:column;
  padding:.5rem .5rem 1.15rem; border-radius:1.6rem;
  transition:translate .75s var(--ressort), --fx .35s var(--ease), --fy .35s var(--ease);
}
.card .media{ flex:none; aspect-ratio:4/5; background:#1d1714; border-radius:1.15rem; isolation:isolate; }
.card:hover .media > *{ transform:scale(1.05); }
/* le bouton qui ouvre les photos du projet couvre toute l'affiche */
/* toute la fiche ouvre le projet, pas seulement l'affiche (accueil.js) */
.rail__track .card{ cursor:pointer; }
.card__voir{ position:absolute; inset:0; z-index:3; border-radius:inherit; cursor:pointer; }
.card__voir:focus-visible{ outline:none; }
.card:has(.card__voir:focus-visible){ outline:2px solid var(--accent); outline-offset:3px; }
/* les années au-dessus du titre, qui prend toute la largeur */
.card__body{
  display:flex; flex-direction:column-reverse; align-items:flex-start; justify-content:flex-end;
  gap:.45rem; margin-top:1.1rem; margin-bottom:1rem;
}
.card__body .card__cat{ color:var(--accent-2); }
.card :is(.card__body,.card__line,.card__sous){ margin-inline:.7rem; }
.card__sous{ margin-top:.8rem; min-height:3.3em; }   /* deux lignes réservées : les traits restent alignés */
.card__body h3{ font-family:var(--serif); font-weight:500; font-size:1.45rem; line-height:1.15; }
.card__cat{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(247,243,236,.55); }
.card__line{ margin-top:auto; height:1px; background:rgba(247,243,236,.18); position:relative; overflow:hidden; }
.card__line::after{
  content:""; position:absolute; inset:0; background:var(--accent-2);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.card:hover .card__line::after{ transform:scaleX(1); }
.rail__foot{ display:flex; align-items:center; gap:2rem; margin-top:2.6rem; }
/* la jauge, en pilule de verre */
.rail__bar{
  flex:1; height:6px; border-radius:999px; position:relative;
  background:rgba(247,243,236,.07);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.4), inset 0 0 0 1px rgba(247,243,236,.08);
}
/* La pilule claire occupe toute la jauge : sa part et sa position se règlent
   par découpe (accueil.js). La découpe garde ses bouts arrondis, qu'une
   réduction par transformation aplatirait, et ne refait jamais la mise en
   page. (Essayé le 2026-09-17 : une pilule qui glisse par translation serait
   confiée à la carte graphique, mais ses bouts arrondis tombent sur d'autres
   pixels. Laissé ainsi : rien de mesurable à gagner.) */
.rail__bar b{
  position:absolute; inset:1px; border-radius:999px;
  background:linear-gradient(rgba(247,243,236,.96), rgba(247,243,236,.72));
  clip-path:inset(0 var(--jauge-fin,80%) 0 var(--jauge-debut,0%) round 999px);
  transition:clip-path .2s linear;
}

/* portfolio : mosaïque de photos de maquillage */
.folio__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1.5rem clamp(2rem,6vw,5rem); align-items:end;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.folio__head h2{ max-width:12ch; }
.folio__note{ color:var(--muted); max-width:46ch; font-size:.98rem; margin:0; }
/* Rangées justifiées (essai) : chaque rangée remplit toute la largeur et
   chaque photo garde ses vraies proportions (--r, tableau PROPORTIONS de
   variantes.js), donc ni trou, ni bande, ni rognage, quel que soit le nombre
   de photos. La coupe en rangées et la largeur de chaque photo (--l) sont
   calculées par accueil.js, rangerGalerie(). Sans script, trois par rangée. */
.folio__grid{
  --folio-gap:clamp(.7rem,1.5vw,1.2rem);
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--folio-gap);
}
.folio__item{
  position:relative; display:block; flex:none; padding:0; text-align:left;
  width:var(--l, calc((100% - 2 * var(--folio-gap)) / 3));
  border-radius:1.3rem; background:none; cursor:zoom-in;
}
.folio__item .media{ aspect-ratio:var(--r, .8); border-radius:1.3rem; isolation:isolate; }
/* un liseré de lumière sur la photo */
.folio__item .media::after{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(25,20,17,.06), inset 0 1px 0 rgba(255,255,255,.3);
}
/* la légende, sur une plaque claire posée dans la photo, au survol */
.folio__leg{
  position:absolute; inset:auto .6rem .6rem .6rem; z-index:3; padding:.6rem .85rem; border-radius:.9rem;
  font-size:.6rem; letter-spacing:.16em; line-height:1.5; text-transform:uppercase; color:var(--ink-2);
  background:rgba(247,243,236,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(25,20,17,.06), 0 10px 24px -14px rgba(40,28,20,.45);
  opacity:0; transform:translateY(.5rem); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
/* Au doigt il n'y a pas de survol : toucher une photo faisait apparaître sa
   légende le temps que la visionneuse s'ouvre. Le survol ne vaut donc que là
   où il y a une souris ; la légende reste lue par la visionneuse, et le
   clavier la montre toujours. (Choix du 2026-09-20.) */
@media (hover:hover) and (pointer:fine){
  .folio__item:hover .media > *{ transform:scale(1.05); }
  .folio__item:hover .folio__leg{ opacity:1; transform:none; }
  .folio__item[data-vide]:hover .media > *{ transform:none; }
}
.folio__item:focus-visible .folio__leg{ opacity:1; transform:none; }
.folio__item[data-vide]{ cursor:default; }
/* emplacement en attente : même traitement encadré que les fiches projet */
.folio__item[data-vide]{ border:1px solid var(--line); background:var(--paper); }
.folio__item[data-vide] .media{ border-radius:.9rem; }
/* l'emplacement en attente garde son liseré : la marge se prend sur la hauteur */
.folio__item[data-vide] .media{ margin:.5rem; height:calc(100% - 1rem); }
.folio__vide{
  margin-top:clamp(1.5rem,3vw,2.2rem); text-align:center;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* présentation, savoir-faire et interventions : même fond que « Quelques projets » */
.studio{ background:var(--noir); color:var(--paper); }
.studio .h2,.studio .h3{ color:var(--paper); }
.studio__photo .media{ background:#1d1714; border-radius:1.6rem; isolation:isolate; }

.studio__intro{
  display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.studio__photo{ margin:0; }
.studio__photo .media{ aspect-ratio:4/5; }
/* la carte du repère prend la largeur de son texte : la colonne ne doit pas
   s'élargir avec elle sur un écran étroit */
.studio__mot{ min-width:0; }
.studio__mot h2{ max-width:14ch; }
/* « À propos » : un court filet sous le titre, puis des paragraphes courts et
   aérés. Les mots mis en valeur (**mot** dans l'outil) prennent le cuivre, la
   phrase en italique (*phrase*) aussi. */
.studio__mot h2::after{
  content:""; display:block; width:3.5rem; height:1px; margin-top:clamp(1.1rem,2vw,1.5rem);
  background:var(--accent-2); opacity:.7;
}
.studio__texte{
  font-size:clamp(1rem,.96rem + .2vw,1.08rem); line-height:1.75; font-weight:300;
  max-width:60ch; margin-top:1.1em; color:rgba(247,243,236,.78);
}
.studio__mot h2 + .studio__texte{ margin-top:clamp(1.6rem,3vw,2.2rem); }
.studio__texte p{ margin:0; }
.studio__texte p + p{ margin-top:1.1em; }
.studio__texte strong{ font-weight:500; color:var(--accent-2); }
.studio__texte em{ font-style:italic; }
/* Repères (formation…) sous la photo, à sa largeur : les deux colonnes de la
   présentation finissent ensemble (choix du 2026-09-27). Une barre de verre
   par repère, le chiffre à gauche, le libellé à droite ; plusieurs repères
   s'empilent. */
.reperes{ display:grid; gap:.6rem; margin-top:1rem; }
.reperes div{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.05rem 1.4rem; border-radius:1.15rem;
}
.reperes b{ flex:none; display:block; font-family:var(--serif); font-weight:700; font-size:clamp(1.35rem,1.15rem + .6vw,1.55rem); line-height:1; }
.reperes b:empty{ display:none; }            /* repère sans chiffre : seul le libellé s'affiche */
/* le libellé revient à la ligne dans sa moitié plutôt que de passer sous le chiffre */
.reperes span{ display:block; min-width:0; text-align:right; font-size:.66rem; line-height:1.5; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,243,236,.55); }
.reperes b:empty + span{ text-align:left; }

/* savoir-faire et interventions : deux panneaux de verre, de même hauteur.
   Les interventions, plus longues, prennent la plus large et se rangent sur
   deux colonnes : le panneau des savoir-faire n'a plus de vide en bas
   (choix du 2026-09-27). */
.studio__cols{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(3.5rem,8vw,6rem);
}
.studio__col{
  display:flex; flex-direction:column;
  padding:clamp(1.6rem,3vw,2.6rem); border-radius:1.8rem;
  transition:--fx .35s var(--ease), --fy .35s var(--ease);
}
.studio__sous{ margin-bottom:.4rem; }

.skills{ list-style:none; margin:1.2rem 0 0; padding:0; }
.skills li{
  display:flex; gap:.85rem; align-items:flex-start;
  padding:.8rem 0; border-bottom:1px solid rgba(247,243,236,.1);
  font-size:.95rem; color:rgba(247,243,236,.82);
}
/* puce ronde cuivre, cerclée d'un halo */
.skills li::before{
  content:""; flex:none; width:.4rem; height:.4rem; margin-top:.55rem; border-radius:50%;
  background:var(--accent-2); box-shadow:0 0 0 3px rgba(192,138,110,.16);
}

/* les rangées se répartissent sur toute la hauteur du panneau, un filet
   au-dessus de chacune sauf la première de chaque colonne */
.serv{
  flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2.4rem;
  align-content:space-between; margin-top:1.2rem;
}
.serv__row{ padding:1rem 0; border-top:1px solid rgba(247,243,236,.1); }
.serv__row:nth-child(-n+2){ border-top:0; padding-top:.4rem; }
/* le panneau fait office de cadre : pas de filet sous la dernière ligne */
.skills li:last-child{ border-bottom:0; padding-bottom:0; }
.serv__ttl{ display:block; font-family:var(--serif); font-weight:700; font-size:1.06rem; line-height:1.25; }
.serv__txt{ display:block; color:rgba(247,243,236,.6); font-size:.89rem; line-height:1.6; margin-top:.3rem; }

/* verre sombre (essai) : cartes du carrousel, panneaux et repères de la
   présentation. Le verre des fiches projets, teinté pour le noir : un calque
   éclairé du côté de la souris (::before) et un liseré de lumière au survol
   (::after), positions --fx et --fy posées par main.js, cartesVerre() —
   sauf les repères, qui prennent le verre mais pas le suivi de la souris. Sur
   le noir uni il n'y a rien à flouter : pas de flou. */
:is(.card,.studio__col,.reperes > div){
  --f-teinte: rgba(247,243,236,.045);
  --f-bord:   rgba(247,243,236,.2);
  --f-filet:  rgba(247,243,236,.075);
  --f-reflet: rgba(247,243,236,.6);
  --f-lueur:  rgba(247,243,236,.08);
  --f-ombre:  rgba(0,0,0,.9);
  position:relative; isolation:isolate;
}
:is(.card,.studio__col,.reperes > div)::before{
  --fx:inherit; --fy:inherit;
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(18rem 13rem at var(--fx) var(--fy), var(--f-lueur), transparent 70%), var(--f-teinte);
  box-shadow:inset 0 1px 0 var(--f-bord), inset 0 0 0 1px var(--f-filet), 0 26px 50px -30px var(--f-ombre);
  transition:background-color .5s var(--ease), box-shadow .6s var(--ease);
}
/* Le liseré de lumière au survol, identique pour les cartes sombres et pour
   les fiches projets : le dégradé vient des variables --f-*, que chaque
   famille pose de son côté. Allumé plus bas, par état. */
:is(.card,.studio__col)::after,
.proj__box::after{
  --fx:inherit; --fy:inherit;
  content:""; position:absolute; inset:0; z-index:4; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:radial-gradient(20rem 14rem at var(--fx) var(--fy), var(--f-reflet), transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s var(--ease);
}
.card:has(.card__voir:focus-visible)::after{ opacity:.7; }
/* un liseré de lumière sur les photos arrondies, posé par-dessus l'image */
:is(.card,.studio__photo) .media::after{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(247,243,236,.1), inset 0 1px 0 rgba(247,243,236,.16);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{ translate:0 -6px; --f-teinte: rgba(247,243,236,.07); }
  :is(.card,.studio__col):hover::after{ opacity:1; }
}

/* Instagram : une respiration claire entre la présentation et le pied de page,
   puis la carte du compte telle qu'Instagram la montre (instagram.js). */
.insta{ background:var(--paper); }
.insta__tete{ text-align:center; }
.insta__sur{ margin:0 0 1rem; font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); }
.insta__titre a{ text-decoration:none; }
.insta__titre::after{
  content:""; display:block; width:3.5rem; height:1px; margin:clamp(1.1rem,2vw,1.5rem) auto 0;
  background:var(--accent-2);
}
.insta__carte{
  max-width:44rem; margin:clamp(2.4rem,5vw,3.6rem) auto 0; overflow:hidden;
  background:#FFFDF9; border:1px solid var(--line); border-radius:1.6rem;
  box-shadow:0 30px 60px -42px rgba(25,20,17,.4);
}
.insta__profil{
  display:flex; align-items:center; gap:clamp(1.2rem,4vw,2.4rem);
  padding:clamp(1.4rem,4vw,2.1rem) clamp(1.2rem,5vw,2.8rem);
}
/* anneau cuivré autour de la photo de profil, à la manière des stories */
.insta__avatar{
  /* hauteur écrite, pas déduite : empilée sur téléphone, la carte laissait
     le portrait (plus haut que large) étirer le rond en ovale */
  --rond:clamp(4.8rem,14vw,6rem);
  flex:none; display:block; width:var(--rond); height:var(--rond); padding:3px; border-radius:50%;
  background:linear-gradient(140deg,var(--accent-2),var(--accent));
}
.insta__avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; border:3px solid #FFFDF9; }
.insta__infos{ min-width:0; }
.insta__compte{ margin:0; font-size:1.06rem; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.insta__chiffres{ margin:.45rem 0 0; display:flex; flex-wrap:wrap; gap:.2rem 1.4rem; font-size:.9rem; color:var(--muted); }
.insta__chiffres b{ font-weight:600; color:var(--ink); }
.insta__bio{ margin:.55rem 0 0; font-size:.92rem; line-height:1.55; color:var(--ink-2); white-space:pre-line; }
.insta__grille{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; }
.insta__case{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2); }
.insta__case img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .9s var(--ease); }
.insta__case:is(:hover,:focus-visible) img{ transform:scale(1.05); filter:brightness(.86); }
.insta__case:focus-visible{ outline-offset:-4px; }
/* carrousel ou vidéo : le petit signe d'Instagram, en haut à droite */
.insta__type{ position:absolute; top:.6rem; right:.6rem; width:1.1rem; height:1.1rem; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.insta__type svg{ display:block; width:100%; height:100%; fill:currentColor; }
.est-attente .insta__case{ animation:insta-attente 1.2s var(--ease) infinite alternate; }
@keyframes insta-attente{ from{ opacity:.5; } to{ opacity:1; } }
.insta__plus{
  display:flex; justify-content:center; align-items:center; gap:.65rem; padding:1.15rem 1rem;
  font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--ink-2);
  transition:color .3s var(--ease), background-color .3s var(--ease);
}
.insta__profil + .insta__plus{ border-top:1px solid var(--line); }
.insta__plus:hover{ color:var(--accent); background:var(--paper); }
.insta__plus svg{ flex:none; width:1.15rem; height:1.15rem; }
@media (prefers-reduced-motion:reduce){ .est-attente .insta__case{ animation:none; } }
@media (max-width:520px){
  .insta__profil{ flex-direction:column; text-align:center; }
  .insta__chiffres{ justify-content:center; }
}

/* ---------- 6. PROJETS ---------- */
.phead{ padding-block:clamp(3rem,7vw,5.5rem) clamp(1.5rem,3vw,2.5rem); }
.phead__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.6fr); gap:clamp(1.5rem,4vw,4rem); align-items:end; }
.phead p{ color:var(--muted); max-width:38ch; }
/* La barre se colle sous l'en-tête, jamais à une hauteur devinée : le script
   mesure l'en-tête réel et le pose dans --head-h. Une police plus haute
   choisie depuis l'outil de gestion déplace l'en-tête, et la barre suit.
   Tiroir de l'en-tête (essai) : en haut de page, rien derrière les
   catégories, comme l'en-tête lui-même. Collée, elle s'accroche sous la
   barre flottante, à la même largeur et sans jour entre les deux, et son
   verre se forme avec le même rebond. L'en-tête perd alors ses coins du bas
   et son ombre : les deux ne font plus qu'un seul verre. La classe
   barre-accrochee est posée sur <html> par projets.js. */
.bar{
  position:sticky; top:calc(var(--head-h) - .85rem); z-index:800;
}
.bar::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:0; bottom:0; left:0; right:0; border-radius:0; opacity:0;
  /* plus dense que l'en-tête seul : il porte une rangée de petits mots */
  background:var(--verre-dense);
  -webkit-backdrop-filter:var(--verre-flou); backdrop-filter:var(--verre-flou);
  box-shadow:inset 0 1px 0 rgba(25,20,17,.07), inset 0 -1px 0 rgba(255,255,255,.08),
             0 16px 36px -16px rgba(40,28,20,.26), 0 2px 8px -3px rgba(40,28,20,.2);
  transition:top .75s var(--ressort), bottom .75s var(--ressort), left .75s var(--ressort), right .75s var(--ressort),
             border-radius .6s var(--ease), opacity .5s var(--ease);
}
.barre-accrochee .bar::before{
  top:.3rem; bottom:.3rem;
  left:max(.6rem, calc(var(--gut) - 1.4rem));
  right:max(.6rem, calc(var(--gut) - 1.6rem));
  border-radius:0 0 2rem 2rem; opacity:1;
}
/* l'en-tête au-dessus : coins du bas droits, sans ombre, et le même verre que
   la barre (même teinte, même flou, sans la réfraction des bords) */
.barre-accrochee .head.is-stuck:not(.est-sombre) .head__verre{
  --v-teinte: var(--verre-dense);
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  box-shadow:inset 0 1px 0 var(--v-bord);
}
@media (max-width:760px){
  .bar{ top:calc(var(--head-h) - .75rem); }
  .barre-accrochee .bar::before{ left:.6rem; right:.6rem; border-radius:0 0 1.5rem 1.5rem; }
}
/* Une seule ligne, toujours : la barre reste basse et le regard n'a qu'une
   rangée à balayer. Le rail défile latéralement — au doigt sur mobile, à la
   molette ou par les deux flèches sur ordinateur, où rien n'indiquait
   autrefois qu'il continuait. */
.bar__in{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
  gap:.6rem 1.5rem; padding-block:.7rem;
  position:relative; z-index:1;
}
.cats{ display:flex; align-items:center; gap:.2rem; min-width:0; flex:1 1 auto; }
/* la flèche de gauche garde sa place même cachée : on la rapproche du bord du
   verre, pour que « Tous » ne flotte pas loin de lui */
@media (hover:hover){
  .cats{ margin-left:-.8rem; }
}
.cats__fl{
  flex:none; display:grid; place-items:center; width:1.6rem; height:1.6rem;
  color:var(--muted);
  transition:color .35s var(--ease), opacity .25s var(--ease);
}
.cats__fl:hover{ color:var(--ink); }
/* Une flèche sans rien à montrer disparaît, mais garde sa place : sans cela
   le rail sauterait de deux centimètres à chaque bout de course. */
.cats__fl[disabled]{ opacity:0; pointer-events:none; }
.filters{
  display:flex; flex-wrap:nowrap; gap:.4rem;
  min-width:0; flex:1 1 auto; overflow-x:auto; overscroll-behavior-x:contain;
  /* Pas d'accrochage à la souris : il reprenait la main à la fin de chaque
     glissade et cassait le mouvement. Au doigt il reste utile, la course
     s'arrête alors franchement sur une catégorie plutôt qu'entre deux. */
  scroll-snap-type:none; scroll-padding-inline:.4rem;
  scrollbar-width:none; -ms-overflow-style:none;
  position:relative;
  padding-block:.3rem;   /* la goutte et son ombre ne sont pas rognées par le défilement */
}
.filters::-webkit-scrollbar{ display:none; }
/* fondu du côté où il reste des catégories hors champ */
.filters.a-droite{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 2rem),transparent);
}
.filters.a-gauche{
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 2rem),transparent);
          mask-image:linear-gradient(to left,#000 calc(100% - 2rem),transparent);
}
.filters.a-gauche.a-droite{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 2rem,#000 calc(100% - 2rem),transparent);
          mask-image:linear-gradient(to right,transparent,#000 2rem,#000 calc(100% - 2rem),transparent);
}
.chip{ scroll-snap-align:start; }
/* au doigt, les flèches ne servent à rien : le rail se pousse directement */
@media (hover:none){
  .cats__fl{ display:none; }
  .filters{ scroll-snap-type:x proximity; }
}

.bar__fin{ display:flex; align-items:center; gap:1rem 1.2rem; flex:none; flex-wrap:wrap; }
.rech{ display:block; }
.rech input{
  width:11rem; max-width:100%; font:inherit; font-size:.75rem;
  padding:.45rem .9rem; border:0; border-radius:999px;
  background:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(25,20,17,.1);
  color:var(--ink); transition:background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.rech input:hover,.rech input:focus{ background:rgba(255,255,255,.8); }
.rech input::placeholder{ color:var(--muted); }
.rech input:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
/* Sur un écran étroit, le champ de recherche et le rail se disputaient la
   même ligne : le rail tombait à trois centimètres, on n'y lisait qu'un bout
   de catégorie. La recherche passe donc au-dessus, sur toute la largeur, et
   les catégories gardent la ligne entière en dessous. Ce réglage vient après
   les règles communes de la barre : placé avant, il était écrasé par elles et
   le champ restait à 11 rem (corrigé le 2026-09-16). */
@media (max-width:760px){
  .bar__in{ flex-wrap:wrap; }   /* l'écart vient de la règle du bas de page */
  .bar__fin{ order:-1; width:100%; flex-wrap:nowrap; justify-content:space-between; gap:1rem; }
  .rech{ flex:1 1 auto; min-width:0; }
  .rech input{ width:100%; }
  .cats{ width:100%; flex:1 1 100%; }
}
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
/* toutes les catégories à l'encre, pour la lisibilité : la goutte de verre
   est le repère de celle qui est choisie (et suit celle qu'on survole) */
.chip{
  flex:none; white-space:nowrap; position:relative; z-index:1;
  padding:.5rem .8rem; border:0; border-radius:999px; background:none; color:var(--ink);
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
}
/* la goutte : un éclat de verre sous la catégorie choisie, qui coule vers
   celle qu'on survole (posée par projets.js) */
.filters__goutte{                 /* le dessin commun est avec celui du menu */
  height:2rem;
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 1px rgba(40,28,20,.06),
             0 0 0 1px rgba(25,20,17,.06), 0 4px 12px -6px rgba(40,28,20,.28);
  transition:translate .6s var(--ressort), width .6s var(--ressort), opacity .35s var(--ease), scale .5s var(--ressort);
}
.count{ flex:none; white-space:nowrap; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

.grid{
  position:relative;   /* les fiches qui s'effacent pendant un filtre s'y posent (projets.js) */
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.1rem,2.2vw,1.9rem); padding-bottom:2rem;
}
.year{
  position:relative;   /* il glisse par sa position pendant un filtre (projets.js) */
  grid-column:1/-1; display:flex; align-items:center; gap:1.2rem; margin-top:clamp(1rem,3vw,2rem);
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.year::after{ content:""; flex:1; height:1px; background:var(--line); }
.year:first-child{ margin-top:0; }

/* --fiche-h : hauteur du bandeau titre sous la photo. Nommée à part de
   --head-h, qui porte la hauteur de l'en-tête du site.
   --fiche-marge : la photo est posée dans le verre avec une petite marge ;
   la place réservée la déduit, la photo gardant ses proportions 4/5. */
.proj{ --fiche-h:8.2rem; --fiche-marge:.45rem; --fiche-rayon:1.5rem; position:relative; }
.proj::before{ content:""; display:block; padding-top:calc(125% - var(--fiche-marge) * 1.5 + var(--fiche-h) + 4px); }

/* fiches en verre (essai)
   Le verre de la barre et des boutons, à l'échelle d'une fiche : un calque
   dépoli derrière le contenu (::before), éclairé du côté de la souris, et un
   liseré de lumière qui s'allume au survol (::after). Posé sur le papier uni,
   le verre n'a rien à flouter. Positions --fx et --fy posées par projets.js.
   Toute la fiche, photo comprise, ouvre la carte du projet en grand (carte.js). */
/* non héritées : un mouvement de souris ne recalcule que les deux calques de
   verre qui les reprennent (--fx:inherit), pas tout le contenu de la carte */
@property --fx{ syntax:"<length-percentage>"; inherits:false; initial-value:50%; }
@property --fy{ syntax:"<length-percentage>"; inherits:false; initial-value:0%; }
.proj__box{
  --f-teinte: rgba(255,255,255,.42);
  --f-bord:   rgba(255,255,255,.92);
  --f-filet:  rgba(25,20,17,.075);
  --f-reflet: rgba(255,255,255,.98);
  --f-lueur:  rgba(255,255,255,.5);
  --f-ombre:  rgba(40,28,20,.16);
  --f-flou:   none;                  /* mort : le verre des fiches ne floute rien (gardé : le retirer change le style calculé) */
  position:absolute; inset:0 0 auto 0; isolation:isolate;
  border-radius:var(--fiche-rayon);
  transition:translate .75s var(--ressort), --fx .35s var(--ease), --fy .35s var(--ease);
}
.proj__box::before{
  --fx:inherit; --fy:inherit;
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(18rem 13rem at var(--fx) var(--fy), var(--f-lueur), transparent 70%), var(--f-teinte);
  -webkit-backdrop-filter:var(--f-flou); backdrop-filter:var(--f-flou);
  box-shadow:inset 0 1px 0 var(--f-bord), inset 0 0 0 1px var(--f-filet),
             0 16px 34px -22px var(--f-ombre), 0 2px 7px -3px var(--f-ombre);
  transition:background-color .5s var(--ease), box-shadow .6s var(--ease),
             -webkit-backdrop-filter 0s linear .65s, backdrop-filter 0s linear .65s;
}
/* (le liseré .proj__box::after est dessiné plus haut, avec celui des cartes) */
/* la photo, arrondie dans le verre ; au survol elle se décale à peine du côté
   de la souris (--photo-x et --photo-y, posées par projets.js) */
.proj{ cursor:pointer; }
.proj__media{
  aspect-ratio:4/5; isolation:isolate;
  margin:var(--fiche-marge) var(--fiche-marge) 0;
  border-radius:calc(var(--fiche-rayon) - var(--fiche-marge));
}
.proj__media > img,.proj__media > .ph{
  translate:var(--photo-x,0px) var(--photo-y,0px);
  transition:transform 1s var(--ease), filter 1s var(--ease), translate .9s var(--ease);
}
/* Le bandeau porte la mise en page ; le bouton n'est qu'un calque transparent
   posé dessus. C'est ce qui permet au titre d'être un vrai <h3> : un bouton ne
   peut pas contenir de titre, et son contenu est de toute façon ignoré par les
   lecteurs d'écran. */
.proj__bandeau{
  position:relative; height:var(--fiche-h); width:100%; padding:1.1rem;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  text-align:left;
}
.proj__head{ position:absolute; inset:0; width:100%; }
/* le liseré de focus reste dans la carte, il n'a pas à mordre sur la voisine */
.proj__head:focus-visible{ outline-offset:-3px; }
.proj__meta{
  display:flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:center;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.proj__meta i{ width:4px; height:4px; border-radius:50%; background:var(--line-2); }
/* chaque point voyage avec le mot qui le suit : une ligne trop longue passe à la
   ligne avant le point, jamais après (« 2022 • Spectacle vivant • » restait seul) */
.proj__meta > span{ display:inline-flex; align-items:center; gap:.5rem; }
.proj__title{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.15rem,.95rem + .5vw,1.5rem); line-height:1.12; margin:.45rem 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Survolée à la souris, ou atteinte au clavier : la fiche se soulève sur un
   petit ressort, son verre s'épaissit, le liseré s'allume et la photo
   s'approche à peine. Elle ne se déplie plus : tout le détail est dans la
   carte en grand. */
.proj:focus-within{ z-index:30; }
.proj:focus-within .proj__box,
.proj.est-grande .proj__box{
  translate:0 -6px;
  --f-teinte: rgba(250,247,242,.8);
  --f-ombre:  rgba(25,20,17,.34);
}
.proj:focus-within .proj__box::before{
  box-shadow:inset 0 1px 0 var(--f-bord), inset 0 0 0 1px var(--f-filet),
             0 34px 60px -30px var(--f-ombre), 0 4px 12px -6px var(--f-ombre);
}
.proj:focus-within .proj__box::after{ opacity:.7; }
.proj:focus-within .media > *{ transform:scale(1.04); }
@media (hover:hover) and (pointer:fine){
  .proj:hover{ z-index:30; }
  .proj:hover .proj__box{
    translate:0 -6px;
    --f-teinte: rgba(250,247,242,.8);
    --f-ombre:  rgba(25,20,17,.34);
  }
  .proj:hover .proj__box::before{
    box-shadow:inset 0 1px 0 var(--f-bord), inset 0 0 0 1px var(--f-filet),
               0 34px 60px -30px var(--f-ombre), 0 4px 12px -6px var(--f-ombre);
  }
  .proj:hover .proj__box::after{ opacity:1; }
  .proj:hover .media > *{ transform:scale(1.04); }
}
/* la fiche ouverte en grand garde un filet cuivré tant que la carte est là */
.proj.est-grande .proj__box::before{
  box-shadow:inset 0 0 0 1.5px var(--accent-2), 0 34px 60px -30px var(--f-ombre), 0 4px 12px -6px var(--f-ombre);
}
/* arrivée par un lien direct : la fiche visée porte un filet de couleur */
.proj.is-hit .proj__box::before{
  box-shadow:inset 0 1px 0 var(--f-bord), inset 0 0 0 1.5px var(--accent),
             0 34px 60px -30px var(--f-ombre), 0 4px 12px -6px var(--f-ombre);
}

.empty{ padding:4rem 0; text-align:center; color:var(--muted); grid-column:1/-1; }

/* ---------- carte du projet en grand (page Projets et accueil) ----------
   Un panneau de verre au milieu de l'écran, la page floutée derrière (carte.js) ;
   plein écran sur téléphone. Sous la visionneuse, au-dessus de tout le reste. */
html.carte-ouverte{ overflow:hidden; scrollbar-gutter:stable; }
.carte-grande{ position:fixed; inset:0; z-index:940; display:grid; }
.carte-grande__voile{
  position:absolute; inset:0; background:rgba(25,20,17,.34);
  -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%);
}
.carte-grande__cadre{ position:relative; min-height:0; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem); }
.carte-grande__panneau{
  position:relative; width:min(66rem,100%); max-height:100%; overflow:hidden;
  display:grid; grid-template-rows:minmax(0,1fr);   /* la zone qui défile se plie à la hauteur du panneau */
  border-radius:2rem; color:var(--ink);
  background:rgba(250,247,242,.9);
  -webkit-backdrop-filter:blur(26px) saturate(160%); backdrop-filter:blur(26px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(25,20,17,.06),
             0 44px 90px -40px rgba(25,20,17,.55), 0 8px 24px -12px rgba(25,20,17,.28);
}
.carte-grande__panneau:focus{ outline:none; }
/* La croix est posée sur le panneau, pas dans le contenu : c'est cette zone-ci
   qui défile, dessous, et la croix ne quitte donc jamais le coin de la carte
   (sa demande du 2026-09-20). C'est aussi elle qui prend le focus à
   l'ouverture, pour que les flèches du clavier fassent défiler la carte. */
.carte-grande__defile{
  min-height:0; overflow:auto; overscroll-behavior:contain;
  padding:clamp(1.1rem,2.4vw,2.1rem);
  scrollbar-width:thin; scrollbar-color:rgba(25,20,17,.25) transparent;
}
.carte-grande__defile:focus{ outline:none; }
.carte-grande__x{
  position:absolute; top:clamp(.8rem,1.6vw,1.2rem); right:clamp(.8rem,1.6vw,1.2rem); z-index:3;
  width:2.9rem; height:2.9rem; display:grid; place-items:center; border:0; border-radius:50%;
  font-size:1.5rem; line-height:1; color:var(--ink); cursor:pointer;
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(25,20,17,.08), 0 6px 16px -8px rgba(25,20,17,.35);
  transition:transform .5s var(--ressort), background-color .3s var(--ease);
}
.carte-grande__x:hover{ background:rgba(255,255,255,.9); transform:rotate(90deg); }
.carte-grande__corps{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.2rem,3vw,2.6rem); align-items:start; }
.carte-grande__photo{
  position:relative; display:block; width:100%; aspect-ratio:4/5; padding:0; border:0; overflow:hidden;
  border-radius:1.35rem; background:#e9e2d8; cursor:zoom-in; isolation:isolate;
  box-shadow:0 26px 50px -30px rgba(25,20,17,.45);
}
.carte-grande__photo img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.carte-grande__photo:hover img{ transform:scale(1.03); }
.carte-grande__texte{ padding-top:clamp(.2rem,1vw,.8rem); }
.carte-grande__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem; margin:0 3.4rem .9rem 0;
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}
.carte-grande__meta i{ width:4px; height:4px; border-radius:50%; background:var(--line-2); }
.carte-grande__meta > span{ display:inline-flex; align-items:center; gap:.6rem; }
.carte-grande__titre{
  margin:0 3.4rem 1.2rem 0; font-family:var(--serif); font-weight:500;
  font-size:clamp(2rem,1.3rem + 2.2vw,3.2rem); line-height:1.04;
}
.carte-grande__desc{ margin:0 0 1.5rem; max-width:54ch; font-size:1rem; line-height:1.7; color:var(--ink-2); }
.carte-grande__faits{ display:grid; gap:.6rem; margin:0; padding-top:1.1rem; border-top:1px solid rgba(25,20,17,.1); }
.carte-grande__faits div{ display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1rem; }
.carte-grande__faits dt{ padding-top:.18rem; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.carte-grande__faits dd{ margin:0; font-size:.93rem; color:var(--ink-2); }
.carte-grande__photos{ margin-top:clamp(1.5rem,3vw,2.3rem); }
.carte-grande__intertitre{ margin:0 0 .85rem; font-size:.64rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.carte-grande__planche{ display:grid; grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.6rem; }
.carte-grande__vignette{
  position:relative; display:block; aspect-ratio:4/5; padding:0; border:0; overflow:hidden;
  border-radius:.95rem; background:#e9e2d8; cursor:zoom-in;
}
.carte-grande__vignette img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.carte-grande__vignette:hover img{ transform:scale(1.05); }
/* trop petite pour porter un crédit lisible : il reste sur la photo agrandie */
.carte-grande__vignette .cred{ display:none; }
/* Vidéos du projet, après les photos (depuis le 2026-09-26) : un écran 16:9 par
   vidéo. Avant la lecture, la couverture assombrie et un bouton rond de verre ;
   le lecteur du service ne se pose qu'au clic (carte.js). */
.carte-grande__videos{ margin-top:clamp(1.5rem,3vw,2.3rem); }
.carte-grande__films{ display:grid; gap:1rem; }
.carte-grande__films.est-multiple{ grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); }
.film{ margin:0; display:grid; gap:.6rem; align-content:start; }
.film__ecran{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:1.35rem; background:#1d1714;
  box-shadow:0 26px 50px -30px rgba(25,20,17,.45); isolation:isolate;
}
.film__ecran iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.film__lancer{
  position:absolute; inset:0; display:grid; place-items:center; width:100%; padding:0; border:0;
  background:none; color:#fff; cursor:pointer;
}
.film__lancer img{
  /* calée vers le haut : une affiche couchée dans un écran large y garde les visages */
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  filter:brightness(.5) saturate(.85); transform:scale(1.04);
  transition:filter .6s var(--ease), transform 1s var(--ease);
}
.film__lancer .cred{ display:none; }
.film__lancer:hover img{ filter:brightness(.62) saturate(.95); transform:scale(1.07); }
.film__lancer:focus-visible{ outline-offset:-5px; border-radius:1.35rem; }
.film__rond{
  position:relative; width:4.4rem; height:4.4rem; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.26), 0 14px 30px -12px rgba(0,0,0,.6);
  transition:transform .5s var(--ressort), background-color .3s var(--ease);
}
.film__rond svg{ width:1.5rem; height:1.5rem; margin-left:.18rem; fill:currentColor; }
.film__lancer:hover .film__rond{ transform:scale(1.08); background:rgba(255,255,255,.28); }
.film__legende{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .75rem; }
.film__titre{ font-family:var(--serif); font-weight:500; font-size:1.08rem; }
.film__note{ font-size:.72rem; color:var(--muted); }
/* un lien vers un service que la carte ne sait pas lire : une pastille, comme
   les boutons des projets voisins */
.film--lien{
  align-self:start;   /* à côté d'un écran, la pastille garde sa hauteur */
  display:grid; gap:.3rem; padding:.95rem 1.15rem; border-radius:1.2rem; color:var(--ink); text-decoration:none;
  background:rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(25,20,17,.06);
  transition:background-color .3s var(--ease), transform .5s var(--ressort);
}
.film--lien:hover{ background:rgba(255,255,255,.8); transform:translateY(-2px); }
.carte-grande__nav{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-top:clamp(1.5rem,3vw,2.3rem); padding-top:1.2rem; border-top:1px solid rgba(25,20,17,.1);
}
.carte-grande__voisin{
  display:grid; gap:.3rem; justify-items:start; min-width:0; padding:.85rem 1.1rem; border:0; border-radius:1.2rem;
  text-align:left; color:var(--ink); cursor:pointer; background:rgba(255,255,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(25,20,17,.06);
  transition:background-color .3s var(--ease), transform .5s var(--ressort);
}
.carte-grande__voisin:hover{ background:rgba(255,255,255,.8); transform:translateY(-2px); }
.carte-grande__voisin--suiv{ justify-items:end; text-align:right; }
.carte-grande__voisin.est-vide{ visibility:hidden; }
.carte-grande__sens{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.carte-grande__voisin b{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--serif); font-weight:500; font-size:1.12rem;
}
.carte-grande__voisin small{ font-size:.72rem; color:var(--muted); }
@media (max-width:760px){
  .carte-grande__cadre{ padding:0; place-items:stretch; }
  .carte-grande__panneau{ width:100%; height:100%; max-height:none; border-radius:0; }
  .carte-grande__defile{ padding:1rem 1rem 1.6rem; }
  .carte-grande__corps{ grid-template-columns:1fr; gap:1.1rem; }
  .carte-grande__photo{ width:min(100%,22rem); justify-self:center; }
  .carte-grande__titre,.carte-grande__meta{ margin-right:3.2rem; }
  .carte-grande__planche{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; }
  .carte-grande__faits div{ grid-template-columns:5.6rem minmax(0,1fr); }
  .carte-grande__voisin{ padding:.7rem .8rem; }
  .carte-grande__voisin b{ font-size:1rem; }
}

/* La carte ouverte depuis le carrousel prend le verre sombre de ses cartes :
   le carrousel est une section noire, un panneau crème y tranchait (choix du
   2026-09-20). La classe est posée par accueil.js ; la page Projets, claire,
   garde la carte crème. */
.carte-grande--sombre{
  --ink:    var(--paper);
  --ink-2:  rgba(247,243,236,.78);
  --muted:  rgba(247,243,236,.55);
  --accent: var(--accent-2);
  --line-2: rgba(247,243,236,.3);
}
.carte-grande--sombre .carte-grande__voile{ background:rgba(10,8,7,.5); }
.carte-grande--sombre .carte-grande__panneau{
  background:rgba(22,17,15,.82);
  box-shadow:inset 0 1px 0 rgba(247,243,236,.16), inset 0 0 0 1px rgba(247,243,236,.08),
             0 44px 90px -40px rgba(0,0,0,.8), 0 8px 24px -12px rgba(0,0,0,.6);
}
.carte-grande--sombre .carte-grande__defile{ scrollbar-color:rgba(247,243,236,.3) transparent; }
.carte-grande--sombre .carte-grande__x{
  background:rgba(247,243,236,.14);
  box-shadow:inset 0 1px 0 rgba(247,243,236,.18), inset 0 0 0 1px rgba(247,243,236,.12),
             0 6px 16px -8px rgba(0,0,0,.6);
}
.carte-grande--sombre .carte-grande__x:hover{ background:rgba(247,243,236,.26); }
.carte-grande--sombre :is(.carte-grande__photo,.carte-grande__vignette){ background:#1d1714; }
.carte-grande--sombre :is(.carte-grande__faits,.carte-grande__nav){ border-top-color:rgba(247,243,236,.14); }
.carte-grande--sombre .carte-grande__voisin{
  background:rgba(247,243,236,.06);
  box-shadow:inset 0 1px 0 rgba(247,243,236,.12), inset 0 0 0 1px rgba(247,243,236,.08);
}
.carte-grande--sombre .carte-grande__voisin:hover{ background:rgba(247,243,236,.14); }
.carte-grande--sombre .film--lien{
  background:rgba(247,243,236,.06);
  box-shadow:inset 0 1px 0 rgba(247,243,236,.12), inset 0 0 0 1px rgba(247,243,236,.08);
}
.carte-grande--sombre .film--lien:hover{ background:rgba(247,243,236,.14); }
.carte-grande--sombre .film__ecran{ box-shadow:0 26px 50px -30px rgba(0,0,0,.8); }

/* ---------- page d'un projet (projet/<adresse>.html, depuis le 2026-09-28) ----------
   La carte en grand posée dans une page : mêmes blocs, sans panneau ni croix.
   Écrite par l'outil de gestion (gestion-v2/js/pages-projets.js), lue surtout
   par Google et par qui suit un lien partagé. */
.phead--projet .phead__in{ grid-template-columns:minmax(0,1fr); gap:0; }
.phead--projet .display{ margin-top:1rem; font-size:clamp(2.4rem,1.3rem + 4.2vw,4.9rem); line-height:1.02; overflow-wrap:break-word; }
.phead--projet .carte-grande__meta{ margin:1.1rem 0 0; max-width:none; }
.fil{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem;
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
}
.fil a{ color:var(--muted); text-decoration:none; transition:color .3s var(--ease); }
.fil a:hover{ color:var(--accent); }
.fil i{ width:4px; height:4px; border-radius:50%; background:var(--line-2); }
.fiche-projet{ padding-block:clamp(.5rem,1.5vw,1rem) clamp(4.5rem,9vw,8rem); }
.fiche-projet .carte-grande__texte{ padding-top:0; }
.fiche-projet .carte-grande__desc{ font-size:1.04rem; }
.page-projet .carte-grande__meta{ margin-right:0; }
/* dans la carte ce sont des boutons ; ici de vrais liens, sans soulignement */
a.carte-grande__voisin{ text-decoration:none; }

/* ---------- VISIONNEUSE ----------
   Le fond se lève, la photo grandit depuis la vignette d'origine, et la
   molette la fait glisser en zoom continu. Les commandes ne se montrent
   qu'au moment utile pour laisser la photo seule à l'écran. */
.lb{
  position:fixed; inset:0; z-index:9999;
  display:grid; grid-template-rows:minmax(0,1fr);
  visibility:hidden; pointer-events:none;
  padding:clamp(1rem,4vw,3rem) clamp(1rem,4vw,3rem) clamp(1rem,3vw,2rem);
}
.lb.is-open{ visibility:visible; pointer-events:auto; }

.lb__voile{
  position:absolute; inset:0; z-index:0;
  background:rgba(11,9,8,.94);
  backdrop-filter:blur(14px) saturate(.9); -webkit-backdrop-filter:blur(14px) saturate(.9);
  opacity:0; transition:opacity .42s var(--ease);
}
.lb.is-open .lb__voile{ opacity:1; }
.lb.est-fermeture .lb__voile,
.lb.est-fermeture .lb__cap,
.lb.est-fermeture .lb__x,
.lb.est-fermeture .lb__nav,
.lb.est-fermeture .lb__zoom{ opacity:0; }

.lb__fig{
  position:relative; z-index:1; margin:0; min-height:0; width:100%;
  display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center;
}
.lb__stage{
  position:relative; display:grid; place-items:center;
  width:100%; min-height:0; overflow:hidden;
  touch-action:none;
}
/* Toutes les photos de la pellicule se posent dans la même case, au centre ;
   la visionneuse les décale de côté (visionneuse.js). */
.lb__vue{
  grid-area:1/1;
  position:relative; display:inline-grid; line-height:0;
  will-change:transform, translate, scale, opacity;
}
.lb__vue img{
  display:block; width:auto; height:auto;
  max-width:min(92vw,72rem); max-height:min(74svh,54rem);
  object-fit:contain; background:#151110;
  box-shadow:0 2.4rem 5rem rgba(0,0,0,.55);
  -webkit-user-drag:none; user-select:none;
}
.lb__vue .ph{ width:min(70vw,26rem); aspect-ratio:4/5; }
.lb__vue .cred{ right:.75rem; bottom:.75rem; }
.lb__stage:is(.est-pellicule,.est-zoome){ cursor:grab; }
.lb__stage.est-prise{ cursor:grabbing; }

.lb__cap{
  position:relative; z-index:1; width:100%;
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  margin-top:1.1rem; color:rgba(247,243,236,.72);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translateY(.5rem);
  transition:opacity .5s .12s var(--ease), transform .5s .12s var(--ease);
}
.lb.is-open .lb__cap{ opacity:1; transform:none; }
.lb__cap b{ font-weight:400; color:var(--paper); }
.lb__cap b:empty{ display:none; }      /* photo de la mosaïque : pas de titre de projet */
.lb__cap-g{ display:flex; flex-wrap:wrap; gap:.2rem 1rem; min-width:0; }
.lb__cred{ color:rgba(247,243,236,.5); }

.lb__x,.lb__nav{
  position:absolute; z-index:3; width:3.2rem; height:3.2rem;
  display:grid; place-items:center;
  opacity:0;
  transition:opacity .4s var(--ease), transform .55s var(--ressort);
}
.lb.is-open .lb__x,.lb.is-open .lb__nav{ opacity:1; }
.lb__x:focus-visible,.lb__nav:focus-visible{ outline:2px solid var(--paper); outline-offset:3px; }
.lb__x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); transform:scale(.9); }
.lb.is-open .lb__x{ transform:none; }
.lb__nav{ top:50%; }
.lb__nav--prev{ left:clamp(.5rem,2vw,2rem); transform:translate(-.6rem,-50%); }
.lb__nav--next{ right:clamp(.5rem,2vw,2rem); transform:translate(.6rem,-50%); }
.lb.is-open .lb__nav--prev,.lb.is-open .lb__nav--next{ transform:translateY(-50%); }
.lb__nav[hidden]{ display:none; }

/* Repère de zoom : n'apparaît que lorsqu'on zoome réellement. */
.lb__zoom{
  position:absolute; z-index:3; left:50%; bottom:clamp(4rem,9vw,6rem);
  transform:translateX(-50%) translateY(.4rem);
  padding:.35rem .8rem; border:1px solid rgba(247,243,236,.2);
  background:rgba(11,9,8,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:rgba(247,243,236,.8); font-size:.62rem; letter-spacing:.18em;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.lb__zoom.est-visible{ opacity:1; transform:translateX(-50%); }


/* ---------- 7. CONTACT ---------- */
.cgrid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(2.5rem,6vw,5.5rem); align-items:start; }
.form{ display:grid; gap:1.9rem; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.9rem; }
/* Champs en cases de verre (essai) : un intitulé plus grand et plus foncé,
   une case claire aux coins arrondis, le texte tapé en encre et plus appuyé
   que l'exemple de saisie, une lueur cuivre autour du champ où l'on écrit. */
.field label{
  display:block; font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:.6rem;
}
.field input,.field textarea{
  width:100%; border:0; border-radius:1rem; padding:.9rem 1.1rem;
  font:inherit; font-weight:400; color:var(--ink);
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(25,20,17,.13),
             0 8px 20px -16px rgba(40,28,20,.35);
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.field textarea{ resize:vertical; min-height:9rem; line-height:1.6; }
.field input:hover,.field textarea:hover{ background:rgba(255,255,255,.72); }
.field input:focus,.field textarea:focus{
  outline:none; background:rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1.5px var(--accent-2),
             0 0 0 4px rgba(192,138,110,.2), 0 10px 24px -16px rgba(40,28,20,.35);
}
/* l'exemple de saisie : plus léger que le texte tapé, mais lisible (plus de 4,5:1) */
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); font-weight:300; opacity:1; }
/* La liste des objets : un volet de verre sous le champ. La liste native du
   navigateur arrivait en blanc système, avec sa police à lui — seule pièce du
   site à ne pas être dessinée. Le champ reste un champ : on choisit dedans ou
   on écrit. (Choix du 2026-09-20.) */
.combo{ position:relative; }
.combo input{ padding-right:3rem; }
.combo__fl{
  position:absolute; top:0; right:0; width:2.8rem; height:100%;
  display:grid; place-items:center; padding:0; border:0; background:none;
  color:var(--muted); font-size:.95rem; line-height:1; cursor:pointer;
  transition:color .3s var(--ease), rotate .45s var(--ressort);
}
.combo__fl:hover{ color:var(--accent); }
.combo.est-ouvert .combo__fl{ color:var(--accent); rotate:180deg; }
.combo__liste{
  position:absolute; z-index:60; top:calc(100% + .45rem); left:0; right:0;
  margin:0; padding:.35rem; list-style:none; border-radius:1.1rem;
  max-height:15rem; overflow:auto; overscroll-behavior:contain;
  background:rgba(250,247,242,.88);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(25,20,17,.08),
             0 26px 50px -28px rgba(40,28,20,.5), 0 6px 16px -10px rgba(40,28,20,.25);
  opacity:0; translate:0 -.4rem;
  transition:opacity .25s var(--ease), translate .35s var(--ressort);
}
.combo.est-ouvert .combo__liste{ opacity:1; translate:0 0; }
.combo__liste li{
  display:flex; align-items:center; min-height:2.75rem;   /* 44 px au doigt */
  padding:.55rem .85rem; border-radius:.8rem;
  font-size:.68rem; letter-spacing:.16em; line-height:1.4; text-transform:uppercase;
  color:var(--ink-2); cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.combo__liste li:is(:hover,[aria-selected="true"]){ background:rgba(255,255,255,.85); color:var(--accent); }
.combo__liste li[aria-selected="true"]{ box-shadow:inset 0 0 0 1px rgba(192,138,110,.45); }
@media (prefers-reduced-motion:reduce){
  .combo__liste{ transition:opacity .25s var(--ease); translate:none; }
  .combo__fl{ transition:color .3s var(--ease); }
}
.check{ display:flex; gap:.8rem; align-items:flex-start; font-size:.88rem; color:var(--ink-2); }
.check input{ flex:none; width:1.1rem; height:1.1rem; margin-top:.2rem; accent-color:var(--accent); }
.form__note{ font-size:.76rem; color:var(--muted); max-width:42ch; }
/* piège à robots : hors de l'écran, hors du parcours au clavier, jamais lu
   par un lecteur d'écran (aria-hidden dans la page) */
.form__piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__msg{ font-size:.85rem; color:var(--accent); min-height:1.2em; }
/* le message repris à copier quand la messagerie ne s'est pas ouverte */
.form__copie{
  width:100%; margin-top:.6rem; padding:.8rem 1rem; font:inherit; font-size:.85rem;
  color:var(--ink); resize:vertical; border:0; border-radius:1rem;
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(25,20,17,.13);
}
/* Les intitulés en petites capitales du site : sur-titres de section, date de
   mise à jour, code d'erreur, titres des rubriques légales. */
.sous,.maj,.code-erreur,.annexe__bloc h2{
  font-size:.66rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}
.sous{ margin-bottom:1.6rem; }

.info{ border-top:1px solid var(--line); }
.info__row{ padding-block:1.4rem; border-bottom:1px solid var(--line); }
.info__row h2{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem; }
.info__row p,.info__row a{ font-family:var(--serif); font-size:clamp(1.15rem,1rem + .6vw,1.5rem); text-decoration:none; }
.info__row a{ background-image:linear-gradient(currentColor,currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .45s var(--ease); }
.info__row a:hover{ background-size:100% 1px; }
.info__row small{ display:block; font-family:var(--sans); font-size:.82rem; color:var(--muted); margin-top:.4rem; }
/* plusieurs fiches professionnelles dans une même case */
.info__liens{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.4rem; margin:0; }
/* une rangée de pastilles : serrées, sans le soulignement des liens écrits */
.info__liens:has(.reseau){ gap:.6rem 1.2rem; }
.info__row .reseau{ background-image:none; font-size:1rem; }
.info__liens span:has(.reseau) + span:has(.reseau){ margin-left:-.6rem; }

/* ---------- 8. RESPONSIVE ---------- */
/* trois fiches par ligne dès que quatre deviennent trop serrées */
@media (max-width:1200px){
  .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:1024px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cgrid{ grid-template-columns:1fr; }
  .phead__in{ grid-template-columns:1fr; align-items:start; }
  .folio__head{ grid-template-columns:1fr; align-items:start; }
  .studio__intro{ grid-template-columns:1fr; gap:2.2rem; }
  .studio__photo{ max-width:24rem; }
  .studio__cols{ grid-template-columns:1fr; gap:1rem; }

  /* ouverture : la photo passe au-dessus du nom */
  .hero__in{ grid-template-columns:1fr; gap:2.2rem; justify-items:center; text-align:center; }
  .hero__figure{ order:-1; width:min(22rem,78%); }
  .hero__figure{ --photo-h:46svh; }
}
@media (max-width:760px){
  .head__in{ padding-block:.75rem; }
  .brand span{ display:none; }
  /* téléphone : les trois mots cèdent la place au bouton Menu, qui ouvre un
     menu en verre plein écran. Il s'ouvre en cercle depuis le bouton. */
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .head.is-stuck .head__verre{ top:.45rem; bottom:.45rem; left:.6rem; right:.6rem; }
  .plein{
    position:fixed; inset:0; z-index:0; display:flex; align-items:center;
    padding:calc(var(--head-h) + 1.5rem) var(--pad) 3rem;
    pointer-events:auto; overflow-y:auto; overscroll-behavior:contain;
    /* Fond plein et ouverture en fondu (choix du 2026-09-20) : le cercle qui
       grandissait obligeait le téléphone à reflouter le fond à chaque image,
       et l'affichage clignotait le temps de l'animation. */
    background:rgba(247,243,236,.98);
    visibility:hidden; opacity:0;
    transition:opacity .35s var(--ease), visibility 0s linear .35s, background-color .5s var(--ease);
  }
  .head.est-sombre .plein{ background:rgba(20,16,14,.98); }
  .head.est-ouvert .plein{
    visibility:visible; opacity:1;
    transition:opacity .35s var(--ease), visibility 0s, background-color .5s var(--ease);
  }
  .plein__liste{ list-style:none; margin:0; padding:0; width:100%; }
  .plein__liste li{
    border-bottom:1px solid var(--h-filet);
    opacity:0; translate:0 1rem;
    transition:opacity .3s var(--ease), translate .3s var(--ease), border-color .5s var(--ease);
  }
  .plein__liste li:first-child{ border-top:1px solid var(--h-filet); }
  .head.est-ouvert .plein__liste li{
    opacity:1; translate:0 0;
    transition:opacity .7s var(--ease) var(--d,0s), translate .9s var(--ressort) var(--d,0s), border-color .5s var(--ease);
  }
  .plein__liste li:nth-child(1){ --d:.12s; }
  .plein__liste li:nth-child(2){ --d:.19s; }
  .plein__liste li:nth-child(3){ --d:.26s; }
  .plein__liste a{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding-block:1.1rem; text-decoration:none; color:var(--h-texte);
    font-family:var(--serif); font-size:clamp(2.6rem,12vw,3.6rem); line-height:1.05; letter-spacing:-.02em;
    transition:color .35s var(--ease);
  }
  .plein__liste a:hover{ color:var(--h-accent); }
  .plein__liste a[aria-current="page"]::after{
    content:""; flex:none; width:.55rem; height:.55rem; border-radius:50%; background:var(--h-accent);
  }
  .foot__top{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; }
  .bar__in{ gap:.5rem 1rem; }
  .grid{ grid-template-columns:1fr; gap:1.6rem; }
  .skills{ margin-top:1rem; }
  .serv{ grid-template-columns:1fr; }
  .serv__row:nth-child(2){ border-top:1px solid rgba(247,243,236,.1); padding-top:1rem; }

  /* ouverture mobile : photo encadrée, puis le nom, puis le métier */
  .hero__title{ font-size:clamp(2.9rem,11.5vw,4.2rem); }
  .hero__role{ margin-top:1.1rem; letter-spacing:.26em; padding-left:.26em; font-size:.72rem; }
  .hero__figure{ width:min(20rem,84%); }
  .hero__figure{ --photo-h:42svh; }

  .rail__head h2{ max-width:none; }

  /* sur mobile : la fiche prend sa hauteur, sans place réservée */
  .proj::before{ display:none; }
  .proj__box{ position:static; }
  .proj__bandeau{ height:auto; }
  /* pas de soulèvement sur écran étroit, même avec une souris branchée */
  .proj:is(:hover,:focus-within) .proj__box{ translate:none; }
  .proj__title{ -webkit-line-clamp:3; }
}
/* petits écrans : le nom et le bouton Menu doivent tenir sur une ligne */
@media (max-width:430px){
  .brand{ font-size:1.02rem; }
}
/* -------------------------------------------------------------
   Cibles tactiles.
   Au doigt, 44 px est le minimum utilisable. Plutôt que d'épaissir les
   contrôles — ce qui ferait grossir la barre collante et le pied — on étend
   la zone sensible avec un pseudo-élément : la surface tapable atteint 44 px,
   le dessin ne bouge pas d'un pixel.
   ------------------------------------------------------------- */
@media (pointer:coarse){
  .chip,.nav a,.foot a,.foot__bottom a,.brand{ position:relative; }
  .chip::before,.nav a::before,
  .foot a:not(.reseau)::before,.foot__bottom a::before{
    content:""; position:absolute; left:0; right:0;
    top:50%; height:44px; transform:translateY(-50%);
  }
  /* Les liens du pied sont empilés : on écarte la pile AVANT d'élargir la
     cible, sinon deux zones voisines se chevaucheraient et le doigt
     activerait la mauvaise. */
  .foot ul{ gap:1.5rem; }
  .foot__bottom{ gap:1.5rem 2rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- 9. PAGES ANNEXES ----------
   Mentions légales, confidentialité, page introuvable. Elles reprennent la
   grammaire de la page Contact : un intitulé en petites capitales, le texte
   à côté, un filet entre chaque bloc. */
/* intitulés (essai) : date de mise à jour, code d'erreur. Un filet cuivre,
   puis des petites capitales espacées : ni fond, ni cadre. */
/* Le filet est posé dans la ligne : la date, faite de deux morceaux, ne se
   coupe pas en colonnes. Sur deux lignes, la seconde s’aligne sur le texte et
   non sous le filet, et la date elle-même reste d’un seul tenant. */
.maj,.code-erreur{
  padding-left:2.65rem; text-indent:-2.65rem; line-height:1.6;
}
.maj time{ white-space:nowrap; }
.maj::before,.code-erreur::before{
  content:""; display:inline-block; vertical-align:middle;
  width:1.8rem; height:1px; margin:-.15em .85rem 0 0; background:var(--accent-2);
}
.maj{ margin-top:1.2rem; }

/* rubriques et cartes de la page introuvable, en verre (essai)
   Le verre des fiches projets : un calque dépoli derrière le texte, éclairé
   du côté de la souris, et un liseré de lumière au survol (positions --fx et
   --fy posées par main.js, cartesVerre()). Sur le papier uni il n'y a rien à
   flouter : pas de flou. */
:is(.annexe__bloc,.introuvable__liste a){
  --f-teinte: rgba(255,255,255,.42);
  --f-bord:   rgba(255,255,255,.92);
  --f-filet:  rgba(25,20,17,.075);
  --f-reflet: rgba(255,255,255,.98);
  --f-lueur:  rgba(255,255,255,.5);
  --f-ombre:  rgba(40,28,20,.14);
  position:relative; isolation:isolate;
}
:is(.annexe__bloc,.introuvable__liste a)::before{
  --fx:inherit; --fy:inherit;
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(22rem 14rem at var(--fx) var(--fy), var(--f-lueur), transparent 70%), var(--f-teinte);
  box-shadow:inset 0 1px 0 var(--f-bord), inset 0 0 0 1px var(--f-filet),
             0 16px 34px -24px var(--f-ombre), 0 2px 7px -3px var(--f-ombre);
  transition:background-color .5s var(--ease), box-shadow .6s var(--ease);
}
:is(.annexe__bloc,.introuvable__liste a)::after{
  --fx:inherit; --fy:inherit;
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:radial-gradient(24rem 15rem at var(--fx) var(--fy), var(--f-reflet), transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s var(--ease);
}
.annexe{ padding-top:clamp(1.2rem,3vw,2.2rem); display:grid; gap:clamp(.7rem,1.4vw,1rem); }
.annexe__bloc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);
  gap:.7rem clamp(1.5rem,4vw,4rem);
  padding:clamp(1.5rem,3vw,2.3rem) clamp(1.3rem,3.2vw,2.6rem);
  border-radius:1.5rem;
  /* un lien direct vers une rubrique la pose sous l'en-tête, pas derrière */
  scroll-margin-top:calc(var(--head-h) + 1.5rem);
  transition:--fx .35s var(--ease), --fy .35s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .annexe__bloc:hover::after{ opacity:.8; }
}
.annexe__bloc h2{ padding-top:.45rem; }
.annexe__texte{ max-width:64ch; }
.annexe__texte ul{ margin:0 0 1.1em; padding-left:1.1rem; }
.annexe__texte li{ margin-bottom:.45em; }
.annexe__texte li::marker{ color:var(--accent-2); }
.annexe__texte strong{ font-weight:500; }
.annexe__texte a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor); background-size:100% 1px;
  background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .45s var(--ease), color .35s var(--ease);
}
.annexe__texte a:hover{ color:var(--accent); background-size:0 1px; background-position:100% 100%; }
/* identité de l'éditrice et de l'hébergeur : intitulé au-dessus, valeur en titrage */
.annexe__fiche{ margin:0 0 1.1em; display:grid; gap:1rem; }
.annexe__fiche dt{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.annexe__fiche dd{ margin:.2rem 0 0; font-family:var(--serif); font-size:clamp(1.1rem,1rem + .5vw,1.35rem); line-height:1.3; }
.annexe__fiche dd small{ display:block; font-family:var(--sans); font-size:.85rem; color:var(--muted); margin-top:.2rem; }

/* page introuvable */
.code-erreur{ margin-bottom:1.2rem; }
.introuvable{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start;
  gap:clamp(2.5rem,6vw,6rem); padding-block:clamp(1.5rem,4vw,3rem) clamp(4.5rem,10vw,8rem);
}
.introuvable__liste{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
/* chaque lien est une carte en verre : elle se soulève au survol, sa flèche avance */
.introuvable__liste a{
  display:block; padding:1.2rem 3.8rem 1.3rem 1.5rem; border-radius:1.4rem; text-decoration:none;
  font-family:var(--serif); font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem); line-height:1.05;
  transition:color .35s var(--ease), translate .6s var(--ressort), --fx .35s var(--ease), --fy .35s var(--ease);
}
.introuvable__liste a:hover{
  color:var(--accent); translate:0 -3px;
  --f-teinte: rgba(255,255,255,.66);
  --f-ombre:  rgba(40,28,20,.24);
}
.introuvable__liste a:is(:hover,:focus-visible)::after{ opacity:1; }
.introuvable__liste small{
  display:block; margin-top:.4rem; font-family:var(--sans); font-size:.82rem; line-height:1.5;
  letter-spacing:0; color:var(--muted);
}
.introuvable__liste small::after{
  content:"\2192"; content:"\2192" / "";
  position:absolute; right:1.4rem; top:50%; translate:0 -50%;
  font-size:1.05rem; color:var(--muted);
  transition:translate .45s var(--ease), color .35s var(--ease);
}
.introuvable__liste a:hover small::after{ translate:.3rem -50%; color:var(--accent); }
.introuvable__liste--fine a{ font-size:clamp(1.15rem,1rem + .6vw,1.5rem); padding-block:.95rem 1.05rem; border-radius:1.2rem; }

@media (max-width:1024px){
  .introuvable{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .annexe__bloc{ grid-template-columns:1fr; }
  .annexe__bloc h2{ padding-top:0; }
}
@media (prefers-reduced-motion:reduce){
  .introuvable__liste a:hover{ translate:none; }
}