/* Studio Laurence Hébert — feuille unique. Généré par nouveau.mjs. */

/* Inter est servie PAR LE SITE, pas par Google.
   Trois raisons : une requête bloquante de moins au premier affichage, aucune
   adresse IP de visiteur envoyée chez Google (le site est français, et la
   politique de confidentialité ne déclare aucun transfert de ce genre), et
   une police qui ne peut pas disparaître si Google change ses adresses.
   C'est le fichier variable d'Inter : le même sert le 300 et le 400.
   Sur Mac c'est Helvetica Neue qui s'affiche et ces fichiers ne sont jamais
   demandés ; ailleurs (Windows, Android) c'est Inter. */
@font-face{
  font-family:Inter;font-style:normal;font-weight:300 400;font-display:swap;
  src:url(fonts/inter-latin.woff2) format("woff2");
  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;
}
@font-face{
  font-family:Inter;font-style:normal;font-weight:300 400;font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* La charte n'a que du noir, du blanc et les photos. Pas de couleur d'accent. */
  --encre:#000;
  --papier:#fff;
  --gris:#6f6f6f;      /* légendes, méta — 4.8:1 sur blanc */
  --filet:#e0e0e0;     /* filets de séparation */
  /* Le greige de la charte (#E8E4DE) éclairci : le sol du pied de page.
     C'est la seule surface teintée du site — tout le reste est blanc. */
  --greige:#F2EFEA;
  --filet-greige:#dcd6cc;
  --gris-fonce:#5e5a54;  /* gris sur greige — 5,9:1 */

  --page:1280px;
  --marge:40px;
  --mesure:66ch;

  --p1:8px;  --p2:16px; --p3:24px; --p4:40px;
  --p5:56px; --p6:80px; --p7:104px;

  --lent:.7s cubic-bezier(.22,.61,.36,1);
  --courbe:cubic-bezier(.19,1,.22,1);   /* départ franc, arrivée posée */
  --retard:0ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:"Helvetica Neue",Inter,Helvetica,Arial,sans-serif;
  font-weight:300;
  font-size:15px;
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}

/* ---------- le révélateur ---------- */
/* La seule animation non déclenchée du site : une photographie se dévoile du
   bas vers le haut, comme un tirage qui sort du bain. La classe est posée par
   le script : sans JavaScript, les images sont visibles tout de suite. */
.revele{
  clip-path:inset(100% 0% 0% 0%);
  /* courbe propre au volet : assez lente pour se voir, sans traîner */
  transition:clip-path .95s cubic-bezier(.25,.6,.35,1) var(--retard);
  will-change:clip-path;
}
.revele.vu{clip-path:inset(0% 0% 0% 0%)}
a{color:inherit}

:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.tete--photo :focus-visible{outline-color:#fff}

.saut{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--encre);color:#fff;padding:10px 18px;font-size:13px;
}
.saut:focus{left:0}

/* ---------- entête ---------- */

.tete{
  display:flex;flex-direction:column;align-items:center;
  padding:var(--p4) var(--marge) var(--p4);
  gap:var(--p3);
}
.marque{display:block;color:var(--encre)}
/* Un seul en-tête pour tout le site : même logo, même menu, même place sur
   l'accueil et sur les pages intérieures. Rien ne bouge quand on clique. */
.mono{width:clamp(84px,7vw,100px);height:auto;aspect-ratio:146/145;display:block}
.tete--photo{
  position:absolute;inset:0 0 auto;z-index:5;
  color:#fff;
  /* Un voile court : le logo et le menu sont blancs, il faut qu'ils tiennent
     sur la plus claire des quatre vues du diaporama. Un arret intermediaire
     a 55 % : sans lui le voile etait deja presque transparent a la hauteur du
     menu, et la quatrieme vue (plafond pale, placards blancs) tombait a 6,2
     de contraste contre 10 a 12 pour les trois autres. */
  background:linear-gradient(to bottom,rgba(0,0,0,.50),rgba(0,0,0,.34) 55%,rgba(0,0,0,0));
  padding:var(--p4) var(--marge) var(--p6);
}
.tete--photo .marque{color:#fff}
/* L'unique séquence de chargement : la photo est là, la marque arrive ensuite. */
.accueil .tete--photo .marque,.accueil .tete--photo .menu{
  animation:arrivee 1.1s var(--courbe) both;
}
.accueil .tete--photo .marque{animation-delay:.15s}
.accueil .tete--photo .menu{animation-delay:.35s}
@keyframes arrivee{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.menu{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(18px,2.7vw,40px);
  font-size:clamp(14px,1.15vw,16px);letter-spacing:.095em;text-transform:uppercase;
}
.menu a{
  position:relative;text-decoration:none;padding:4px 0;
}
/* Le filet se trace de la gauche vers la droite au survol. */
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--courbe);
}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}
.menu a[aria-current=page]::after{transform:scaleX(1);transition:none}

/* ---------- le tiroir : le menu en hamburger, TELEPHONE uniquement ----------
   <summary>/<details> : l'ouverture et la fermeture sont NATIVES. Ca marche
   donc sans une ligne de JavaScript, et il n'y a aucun clignotement au
   chargement (contrairement a un panneau qu'un script doit refermer).
   La grammaire est relevee sur oud-architecture.com, mesuree a 393 px le
   2026-09-19 : logo centre, bouton a droite, panneau blanc qui descend sous
   l'entete, un filet entre chaque ligne. C'est la reference que Leon cite.
   Cette seule ligne vit hors media query : elle cache un element NOUVEAU sur
   ordinateur. Aucune regle existante n'est touchee. */
.tiroir{display:none}

/* ---------- ossature ---------- */

.bande{padding:0 var(--marge)}
.page{max-width:var(--page);margin:0 auto}
.colonne{max-width:var(--mesure)}

.titre{
  font-size:clamp(30px,3.9vw,54px);
  font-weight:300;line-height:1.12;letter-spacing:-.015em;
  margin:0 0 var(--p4);
}
.sous-titre{
  font-size:clamp(20px,1.9vw,25px);
  font-weight:300;line-height:1.25;letter-spacing:-.01em;
  margin:var(--p6) 0 var(--p3);
}
.texte p{margin:0 0 1.3em}
.texte p:last-child{margin-bottom:0}
.texte a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.texte strong{font-weight:400}
.texte ul{margin:0 0 1.3em;padding-left:1.1em}
.texte li{margin-bottom:.4em}

.legende{
  font-size:11.5px;letter-spacing:.11em;color:var(--gris);
  line-height:1.6;margin:0;
}
.note{font-size:14px;color:var(--gris);margin:0}
.chapeau-gauche{display:flex;flex-direction:column;gap:var(--p4)}

/* ---------- accueil ---------- */

.accueil{display:flex;flex-direction:column;min-height:100svh}
.accueil main{flex:1 0 auto;display:flex}
.scene{position:relative;flex:1;min-height:100svh;overflow:hidden;background:#111}
.scene img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:fondu 24s infinite;
}
/* Quatre photos, comme le diaporama du site en ligne. Chacune tient 4,8 s et
   se fond dans la suivante en 1,2 s ; les deux opacites se croisent donc a
   somme constante et il n'y a aucun creux sombre.
   Les retards sont NEGATIFS : l'animation demarre deja engagee. Avec un retard
   positif la photo attendrait a l'opacite 0 puis sauterait a 1 d'un coup.
   La premiere est a 0 s et son image-cle 0 % vaut 1 : elle est la des le
   premier affichage, sans fondu d'arrivee. */
/* La PREMIERE vue part a opacite 1, pas 0. Rien ne change a l'ecran
   (l'image-cle 0 % vaut deja 1), mais si l'animation ne part pas — navigateur
   ancien, CSS charge a moitie — la page d'accueil reste une photo au lieu
   d'un rectangle noir.
   A savoir, sans rapport : Chrome ne remonte AUCUN LCP pour l'accueil, parce
   qu'une image qui couvre EXACTEMENT 100 % de la fenetre est classee comme
   fond d'ecran, pas comme contenu. Mesure : a 98svh elle est comptee, a
   100svh non. Ce n'est pas un defaut du site et on ne casse pas le plein
   ecran pour ca ; la vitesse reelle se lit sur le FCP (320 ms). */
/* Chaque photo est dans un <picture> (decoupe verticale sur telephone), donc
   le rang se compte sur le <picture>, pas sur l'<img>. « display:contents »
   efface la boite du <picture> : la mise en page ne change pas d'un pixel.
   JAMAIS d'accent grave dans un commentaire CSS : la feuille est un template
   literal, un accent grave la ferme. C'est la 4e fois que ca tombe. */
.scene picture{display:contents}
.scene>:first-child img{opacity:1}
.scene>:nth-child(2) img{animation-delay:-18s}
.scene>:nth-child(3) img{animation-delay:-12s}
.scene>:nth-child(4) img{animation-delay:-6s}
@keyframes fondu{
  0%,20%{opacity:1}
  25%,95%{opacity:0}
  100%{opacity:1}
}

/* ---------- réalisations ---------- */

/* Chapeau de page : le titre tient la colonne de gauche, le texte celle de
   droite. Le site actuel laissait la moitié droite vide sur toutes ces pages. */
.chapeau{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--p4) var(--p6);align-items:start;
  padding:var(--p2) 0 var(--p6);
}
.chapeau .titre{margin:0}
.chapeau .texte{max-width:62ch}

/* Les questions frequentes, en bas de la page contact. Deux colonnes, un filet
   par question : la meme langue que le reste du site, rien de plus. */
.questions{margin-top:var(--p7);border-top:1px solid var(--filet);padding-top:var(--p5)}
.questions dl{
  display:grid;grid-template-columns:1fr 1fr;gap:0 var(--p6);
  margin:var(--p4) 0 0;
}
.questions dl>div{border-top:1px solid var(--filet);padding:var(--p3) 0}
.questions dl>div:nth-child(-n+2){border-top:0;padding-top:0}
.questions dt{font-size:15px;margin:0 0 8px}
.questions dd{margin:0;font-size:14px;line-height:1.75;color:var(--gris);max-width:48ch}
@media (max-width:840px){
  .questions dl{grid-template-columns:1fr;gap:0}
  .questions dl>div:nth-child(2){border-top:1px solid var(--filet);padding-top:var(--p3)}
}

.rubrique{
  display:flex;align-items:center;gap:var(--p4);
  margin:0 0 var(--p4);
}
.rubrique::before,.rubrique::after{
  content:"";flex:1;height:1px;background:var(--filet);
}
.rubrique h1,.rubrique h2{
  font-size:15px;font-weight:300;letter-spacing:.22em;
  text-transform:uppercase;margin:0;white-space:nowrap;
}

.filtres{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--p1) var(--p4);
  margin:0 0 var(--p5);
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;
}
.filtres a{
  position:relative;text-decoration:none;color:var(--gris);padding:4px 0;
  transition:color .45s var(--courbe);
}
.filtres a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--courbe);
}
.filtres a:hover{color:var(--encre)}
.filtres a:hover::after,.filtres a:focus-visible::after{transform:scaleX(1)}
.filtres a[aria-current=page]{color:var(--encre)}
.filtres a[aria-current=page]::after{transform:scaleX(1);transition:none}

/* La grille reste rangée : deux colonnes de carrés alignés, comme sur le site
   actuel. Le nom revient EN BAS de la vignette (Leon, tour 10) : au centre il
   coupait la photo en deux. Le voile sombre reste, il porte le nom et unifie
   seize photos très différentes. */
.grille{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--p4) var(--p3);
  align-items:start;            /* sinon les figures s'étirent : bandes grises */
  max-width:1160px;margin:0 auto var(--p6);padding:0;list-style:none;
}
.vignette{margin:0}
.vignette a{
  display:block;text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  aspect-ratio:1/1;background:var(--papier);
}
.vignette img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--courbe), clip-path .95s cubic-bezier(.25,.6,.35,1) var(--retard);
}
.vignette a:hover img,.vignette a:focus-visible img{transform:scale(1.045)}
/* Au survol l'image avance, le voile s'éclaircit et le nom se relève : un seul
   mouvement, pas trois effets indépendants. */
.vignette-nom{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--p4) var(--p3);
  color:#fff;text-align:center;
  /* Le voile est dense au milieu, la ou se pose le nom, et s'allege en haut et
     en bas pour ne pas eteindre la photo. Les deux etats ont les memes arrets
     aux memes positions, sinon la transition saute.
     Tour 24 : Leon veut mieux lire le nom. C'est le MILIEU qu'on fonce (.42 ->
     .62), pas les bords (+.02 a +.04) : mesure faite, on gagne presque autant
     de contraste qu'en fonçant tout, sans eteindre la photo (piege du tour 9). */
  background:linear-gradient(to top,rgba(0,0,0,.32),rgba(0,0,0,.30) 22%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.30) 78%,rgba(0,0,0,.24));
  transition:background .8s var(--courbe),clip-path .95s cubic-bezier(.25,.6,.35,1);
}
/* Le voile monte AVEC la photo. Sans ca il se posait sur le carre encore vide :
   du noir a 30 % sur du blanc, c'est une case grise qui glisse — c'est ce que
   Leon voyait. Le passage de none a inset() n'est pas interpolable : le voile
   se ferme d'un coup a la pose de la classe, puis s'ouvre avec le volet. */
.vignette img.revele+.vignette-nom{clip-path:inset(100% 0% 0% 0%)}
.vignette img.revele.vu+.vignette-nom{clip-path:inset(0% 0% 0% 0%)}
/* Le nom arrive une fois le volet ouvert : il n'est jamais coupe en deux. */
.vignette img.revele:not(.vu)+.vignette-nom b,
.vignette img.revele:not(.vu)+.vignette-nom .vignette-lieu{opacity:0;transition:none}
.vignette a:hover .vignette-nom,.vignette a:focus-visible .vignette-nom{
  background:linear-gradient(to top,rgba(0,0,0,.22),rgba(0,0,0,.20) 22%,rgba(0,0,0,.40) 50%,rgba(0,0,0,.20) 78%,rgba(0,0,0,.14));
}
.vignette-nom b,.vignette-lieu{transition:transform .8s var(--courbe),opacity .5s var(--courbe) .78s}
.vignette a:hover .vignette-nom b,.vignette a:focus-visible .vignette-nom b,
.vignette a:hover .vignette-lieu,.vignette a:focus-visible .vignette-lieu{
  transform:translateY(-5px);
}
.vignette-nom b{
  display:block;font-weight:300;font-size:clamp(17px,1.75vw,24px);
  letter-spacing:.12em;text-transform:uppercase;line-height:1.25;
  text-wrap:balance;
}
.vignette-lieu{
  display:block;margin-top:7px;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;opacity:.92;
}
.vignette figcaption{
  margin-top:var(--p2);text-align:center;
  font-size:11.5px;letter-spacing:.11em;color:var(--gris);
}
.vignette--muet a{cursor:default;pointer-events:none}
/* Au changement de filtre, les vignettes retenues se reposent une à une. */
@keyframes repose{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vignette.repose,.produits li.repose{animation:repose .55s var(--courbe) both}

/* ---------- page projet ---------- */

/* Le geste de la page projet : l'ouverture prend tout l'écran et porte le nom.
   Le fond est noir pour que le nom se lise pendant que le volet s'ouvre. */
.ouverture-projet{position:relative;margin:0 0 var(--p6);background:#000}
.ouverture-projet img{
  display:block;width:100%;height:clamp(300px,76svh,860px);
  object-fit:cover;object-position:center var(--cadre,50%);
}
.ouverture-projet figcaption{
  position:absolute;inset:auto 0 0;z-index:2;
  padding:var(--p7) var(--marge) var(--p5);
  color:#fff;
  /* Le voile du nom de projet. Ce n'est pas la DENSITE qui manquait, c'est
     sa FORME : l'ancien degrade valait .62 tout en bas puis .22 a 44 %, et
     il s'eteignait donc avant meme d'atteindre le titre — qui est haut
     (jusqu'a 88 px) et pose au-dessus de 104 px de rembourrage. Mesure sur
     les 16 bandeaux : le titre tombait a 1,47 de contraste sur ordinateur
     et 1,37 sur telephone, tres loin du seuil de 3. « Hotel Particulier »
     disparaissait sur le meuble clair, « ROUEN » sur le parquet.
     Le voile TIENT maintenant sa densite sur toute la bande du texte et ne
     s'eteint que dans les 14 % du haut. Il n'est presque pas plus noir en
     bas (.68 contre .62) : c'est la tenue qui fait tout le travail.
     Apres : titre 4,42 sur ordinateur et 3,85 sur telephone (seuil 3),
     ville 6,58 et 6,36 (seuil 4,5). Et la MOITIE HAUTE du bandeau garde
     exactement la meme luminosite qu'avant (0,212) : la photo n'est pas
     eteinte, ce que les tours 9 et 24 avaient appris a ne jamais faire. */
  background:linear-gradient(to top,
    rgba(0,0,0,.68),rgba(0,0,0,.62) 40%,rgba(0,0,0,.48) 68%,
    rgba(0,0,0,.20) 86%,rgba(0,0,0,0));
}
/* Une lettre ne commence pas au bord de sa boite : elle a un blanc a sa gauche,
   proportionnel au corps. A 88 px ce blanc fait 6,3 px, a 14 px il fait 1 px —
   la ville paraissait donc decalee vers la gauche de 5,3 px (mesure).
   On retire ce blanc des deux cotes : les deux textes tombent au meme endroit,
   quelle que soit la taille d'ecran. */
.ouverture-projet h1{
  margin:0 0 0 -.072em;font-weight:300;font-size:clamp(34px,6.2vw,88px);
  line-height:.98;letter-spacing:-.03em;
}
.ouverture-projet .lieu{
  display:block;margin:var(--p2) 0 0 -.072em;
  font-size:clamp(12px,1.05vw,14px);letter-spacing:.22em;
  text-transform:uppercase;opacity:.92;
}

.fiche{
  display:grid;grid-template-columns:minmax(0,1fr) 200px;
  gap:var(--p6);align-items:start;
  padding:0 0 var(--p5);
}
.fiche .texte{max-width:66ch}
.fiche .en{color:var(--gris);font-style:italic}
.fiche-meta{
  font-size:12px;letter-spacing:.08em;line-height:2.1;
  color:var(--gris);border-top:1px solid var(--filet);padding-top:var(--p2);
}
.fiche-meta dt,.hors-ecran{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.fiche-meta dd{margin:0}

/* La mosaique est UN seul cadre : toutes les photos ont les memes bords, a
   gauche et a droite, et le meme ecart partout. Deux formats, pas plus :
   une photo seule sur toute la largeur, ou deux photos cote a cote a hauteur
   egale. Des largeurs qui changent d'un bloc a l'autre, ca ne lit pas comme un
   rythme : ca lit comme une page mal rangee. */
.mosaique{
  max-width:var(--page);margin:0 auto var(--p6);
  display:flex;flex-direction:column;gap:var(--p3);
}
/* le navigateur pose margin:1em 40px sur un <figure> */
.mosaique figure{margin:0}

/* Une photo seule prend toute la largeur, sans recadrage et sans deformation.
   width:100% reserve la place avant le chargement (les attributs width/height
   donnent le rapport) : avec width:auto la boite vaut 0 tant que l'image n'est
   pas chargee et la page saute au defilement. Pas de max-height ici : un
   paysage fait au pire du 4/3, soit 960 px, ca tient a l'ecran. */
.mosaique img{display:block;width:100%;height:auto}

/* Une paire ou un trio : chaque colonne recoit une fraction egale au rapport
   largeur/hauteur de sa photo (--cols, pose par le generateur). Les deux ou
   trois photos tombent alors exactement a la meme hauteur, le bord est net en
   haut comme en bas, et **aucune photo n'est recadree**. */
.bloc-paire{display:grid;gap:var(--p3);grid-template-columns:var(--cols)}
.bloc-paire img{width:100%;height:auto}
/* La video du showroom se comporte exactement comme une photo dans la rangee :
   meme largeur, meme hauteur, meme bord. */
.mosaique-film{display:block;width:100%;height:auto;background:#111}

/* Un portrait qui n'a trouve personne : centre, assez etroit pour tenir dans
   l'ecran. C'est rare et c'est volontaire, pas un trou. */
.bloc-portrait img{width:46%;margin-inline:auto;max-height:84svh;object-fit:contain}
/* la bande traverse toute la fenêtre et cadre la photo */

.suite{
  display:flex;justify-content:space-between;gap:var(--p3);
  border-top:1px solid var(--filet);padding:var(--p3) 0 var(--p7);
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
}
.suite a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color var(--lent)}
.suite a:hover{border-bottom-color:var(--encre)}
.suite span{color:var(--gris)}
.suite .droite{text-align:right}

/* ---------- mosaïques showroom / collections ---------- */

.showroom-horaires{margin:0 0 var(--p5)}

/* ---------- showroom : le salon qui s'ouvre ---------- */
/* Le seul effet lie au defilement du site. En descendant, la photo du salon
   s'ouvre jusqu'a se montrer entiere, puis la suite de la page remonte et la
   recouvre. Sans JavaScript et en mouvement reduit, la classe --anime n'est
   jamais posee : la photo s'affiche simplement en entier, sans defilement en
   trop. --ouvre vaut alors 1 par defaut. */
.grandit{position:relative;margin:0 0 var(--p6)}
.grandit-scene{display:grid;place-items:center}
.grandit-cadre{
  margin:0;
  /* jamais plus haute que l'ecran : sur un portable on voit quand meme tout */
  width:min(100%, calc(94svh * var(--r,1.7)));
  transform:scale(calc(1 + .2 * (1 - var(--ouvre,1))));
  clip-path:inset(
    calc(22% * (1 - var(--ouvre,1)))
    calc(20% * (1 - var(--ouvre,1)))
    calc(22% * (1 - var(--ouvre,1)))
    calc(20% * (1 - var(--ouvre,1)))
  );
}
.grandit-cadre img{display:block;width:100%;height:auto}

.grandit--anime{height:240svh;margin:0;z-index:0}
.grandit--anime .grandit-scene{
  position:sticky;top:0;height:100svh;overflow:hidden;background:var(--papier);
}
.grandit--anime .grandit-cadre{will-change:transform,clip-path}
/* la suite passe par-dessus la photo restee en place */
.grandit--anime + .apres{
  position:relative;z-index:1;background:var(--papier);
  margin-top:-75svh;padding-top:var(--p7);
}
/* Le mur de collections n'est plus une grille de rectangles identiques.
   Chaque photo garde ses proportions, donc les colonnes se decalent d'elles-
   memes : c'est la grille decalee de humbertpoyet.com, la reference la plus
   proche de ce metier (scrape/refs/REFERENCES.md).
   On utilise columns (multi-colonnes CSS) et non une grille : le filtre masque
   des elements et les colonnes se reequilibrent seules, sans JS et sans trou. */
.produits{
  columns:4;column-gap:var(--p3);
  margin:0 0 var(--p6);padding:0;list-style:none;
}
.produits li{break-inside:avoid;margin:0 0 var(--p3)}
.produits img{
  display:block;width:100%;height:auto;background:#f2f2f2;
  transition:transform 1.5s var(--courbe) var(--retard),
             clip-path .95s cubic-bezier(.25,.6,.35,1) var(--retard);
}
/* la photo arrive un peu plus grande et se pose en meme temps que le volet */
.produits img.revele:not(.vu){transform:scale(1.045)}

/* ---------- press ---------- */

/* Trois couvertures et un passage a la television : peu de matiere.
   Ce qui a ete essaye et retire :
   - le film en ouverture plein ecran : son affiche ne fait que 1280 px de
     large, elle etait agrandie donc floue, et une abbatiale n'annonce pas une
     page presse ;
   - un sol greige sous les couvertures. Leon : « on retire le fond vraiment
     beige beige beige, ca ressemble a rien » ;
   - l'annee de chaque parution. Leon : « j'ai pas envie d'avoir des dates de
     publication ».

   Ce qui reste : les couvertures sur le blanc du site, sous un filet pleine
   largeur comme toutes les sections du site, larges et tres espacees. Le nom
   du magazine et le numero dessous, rien d'autre.

   Les colonnes sont proportionnelles aux rapports des trois couvertures
   (--cols, technique du tour 12) : leurs hauteurs tombent alors exactement
   egales, donc les legendes s'alignent. A largeurs egales elles auraient
   15 px d'ecart — invisible a decrire, evident a l'oeil.

   357 px de large : les fichiers font 640 px, soit 1,8 fois la taille
   affichee. Plus large, elles redeviendraient floues sur ecran retina. */

.parutions{
  display:grid;grid-template-columns:var(--cols,repeat(3,minmax(0,1fr)));
  gap:var(--p7);align-items:start;
  margin:0 0 var(--p7);padding:var(--p5) 0 0;list-style:none;
  border-top:1px solid var(--encre);
}
.parutions li{margin:0}
.parutions figure{margin:0}
.parutions img{width:100%}
.parutions figcaption{padding-top:var(--p3)}
.parutions figcaption b{
  display:block;font-weight:300;
  font-size:clamp(16px,1.4vw,20px);letter-spacing:-.01em;line-height:1.3;
}
.parutions figcaption span{
  display:block;margin-top:4px;font-size:13px;color:var(--gris);
}

/* Le film. Sa source fait 1280 px : a 696 px il reste net sur ecran retina
   (1,84 fois la taille affichee). En pleine fenetre il etait agrandi. */
.film{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:var(--p4) var(--p6);align-items:start;
  border-top:1px solid var(--encre);padding:var(--p5) 0 0;margin:0 0 var(--p7);
}
.film-titre{
  margin:0 0 var(--p3) -.072em;
  font-size:clamp(24px,2.6vw,34px);font-weight:300;
  letter-spacing:-.02em;line-height:1.15;
}
/* Le fond noir est sur l'ECRAN, pas sur la figure : sinon la legende, qui est
   dans la figure, se retrouve en gris sur du noir — illisible. */
.film-affiche{margin:0}
.film-ecran{position:relative;background:#000}
.film-affiche img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 42%}
/* Le bouton couvre toute l'affiche : on clique n'importe ou pour lancer. */
.film-declencheur{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:#fff;
}
.film-lire{
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.75);
  transition:background var(--lent),transform .6s var(--courbe);
}
.film-declencheur:hover .film-lire,.film-declencheur:focus-visible .film-lire{
  background:rgba(0,0,0,.7);transform:scale(1.06);
}
.film-lire svg{width:24px;height:24px;margin-left:3px}
.film-affiche figcaption{padding-top:var(--p2)}
.film-cadre{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.logo-chaine{margin:var(--p4) 0 0}
.logo-chaine img{width:clamp(104px,9vw,128px)}

/* ---------- about ---------- */

.duo-texte{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--p6);align-items:start;
}
.portrait{margin:0}
.portrait img{width:100%}

/* ---------- bande pleine largeur ---------- */
/* Posée hors de .bande : pas de 100vw, donc pas de barre de défilement en trop. */

.bande-pleine{margin:0 0 var(--p7);position:relative}
.bande-pleine img{width:100%;height:clamp(300px,58svh,620px);object-fit:cover}
.bande-pleine--adresse figcaption{
  position:absolute;inset:auto 0 0;padding:var(--p6) var(--marge) var(--p3);
  color:#fff;font-size:clamp(13px,1.15vw,16px);letter-spacing:.16em;
  text-transform:uppercase;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
}

/* ---------- about ---------- */

/* L'ouverture : le nom en grand, le portrait qui le traverse.
   C'est le seul endroit du site où la typo passe à cette échelle. */
.ouverture{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(210px,24vw,330px);
  column-gap:var(--p6);align-items:start;
  padding:var(--p3) 0 var(--p4);
}
.ouverture-nom{
  grid-column:1/-1;grid-row:1;
  font-size:clamp(40px,9.6vw,138px);
  font-weight:300;line-height:.95;letter-spacing:-.035em;
  margin:0;white-space:nowrap;
}
/* Le portrait monte et glisse sur la fin du nom : il en couvre le tiers bas.
   C'est le seul chevauchement du site. translateX ne bouge pas la grille,
   donc la photo garde sa largeur. */
.ouverture-portrait{
  grid-column:2;grid-row:2;z-index:2;margin:0;
  width:clamp(210px,24vw,330px);justify-self:end;
  margin-top:calc(-1 * clamp(24px,3.2vw,46px));
  transform:translateX(calc(-1 * clamp(20px,4.8vw,70px)));
}
/* Le texte d'ouverture occupe la colonne de gauche sur toute la hauteur du
   portrait. Avant, seules trois lignes y tenaient et il restait un trou de
   300 px sous elles. */
.ouverture-texte{grid-column:1;grid-row:2;max-width:46ch;margin-top:var(--p4)}
.ouverture-role{
  margin:0 0 var(--p3);max-width:36ch;
  font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--gris);
}
.ouverture-texte p+p{margin:0}

/* Les deux moments du recit, cote a cote : on lit le passe a gauche et le
   present a droite. En colonne l'un sous l'autre, le tiers droit de la page
   restait vide — c'est exactement le blanc que Leon reproche. */
.reperes{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--p6);align-items:start;
  margin:var(--p6) 0 0;padding:var(--p4) 0 0;list-style:none;
  border-top:1px solid var(--encre);
}
.reperes li{margin:0;max-width:52ch}
.repere-date{
  margin:0 0 2px;font-size:clamp(19px,1.9vw,26px);font-weight:300;
  letter-spacing:-.01em;line-height:1.2;
}
.repere-nom{
  margin:0 0 var(--p3);font-weight:300;
  font-size:clamp(15px,1.25vw,17px);letter-spacing:.01em;color:var(--gris);
}
.repere-corps p{margin:0 0 var(--p2)}
.repere-corps p:last-child{margin-bottom:0}

.deux-colonnes{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--p4) var(--p6);align-items:start;
  padding:var(--p4) 0 0;
}
.deux-colonnes>div{max-width:52ch}

.declaration{
  max-width:26ch;margin:var(--p7) 0 var(--p7);
  font-size:clamp(22px,2.7vw,36px);font-weight:300;
  line-height:1.32;letter-spacing:-.015em;
}

/* La phrase qui suit l'ouverture du salon. C'est le plus gros texte du site
   apres les bandeaux : elle arrive juste apres la photo pleine page, il lui
   faut ce poids-la pour ne pas retomber. Interlignage serre et approche
   negative — la phrase se lit comme un bloc, pas comme un paragraphe. */
.manifeste{
  max-width:26ch;margin:0 0 var(--p7);
  font-size:clamp(24px,3.6vw,48px);font-weight:300;
  line-height:1.08;letter-spacing:-.022em;
  text-wrap:pretty;
}
/* Les mots s'allument un a un pendant qu'on descend. La variable --p (0 vers 1)
   est posee par le script MOTS ; --s est le seuil de chaque mot. Sans
   JavaScript et en mouvement reduit, --p vaut 1 : toute la phrase est noire
   d'emblee.
   DEUX phrases le portent : celle du showroom (.manifeste, tour 21) et celle
   des matieres sur About (.declaration, tour 36 sur telephone, tour 38 sur
   ordinateur aussi). Ce sont les deux seuls textes animes du site.
   (Jamais de guillemet oblique dans ce commentaire : la feuille de style est
   un template literal, il fermerait la chaine.) */
.manifeste .mot,
.declaration .mot{
  opacity:clamp(.28, calc((var(--p,1) - var(--s)) * 7), 1);
}
@media (prefers-reduced-motion:reduce){
  .manifeste .mot,
  .declaration .mot{opacity:1}
}

.expos{list-style:none;margin:0 0 var(--p7);padding:0;border-top:1px solid var(--filet)}
.expos li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:var(--p3) var(--p6);align-items:start;
  padding:var(--p4) 0;border-bottom:1px solid var(--filet);
}
.expos h3{
  grid-row:span 2;margin:0;
  font-size:clamp(24px,3vw,42px);font-weight:300;
  line-height:1.05;letter-spacing:-.02em;
}
.expo-matiere{margin:0;color:var(--gris)}
.expo-texte{margin:0;max-width:46ch}

.cloture{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--p6);align-items:start;padding:0 0 var(--p7);
}
.cloture .texte{max-width:56ch}
.cloture-image{margin:0}
.cloture-image img{width:100%;margin-bottom:var(--p2)}

/* ---------- rse ---------- */
/* Deux versions rejetees avant celle-ci.
   1. La structure du site Wix remise au propre : « copier-coller, pas belle ».
      C'etait range et sans idee, tout au meme corps.
   2. Trois convictions en tres gros + les deux photos en pleine largeur :
      « les deux grosses photos, c'est horrible, en plus elles sont de mauvaise
      qualite ».

   Il a raison sur la qualite, et c'est mesurable : la photo de l'equipe du XXI
   ne fait que **1139 px de large**. A 1280 px on l'agrandissait — un instantane
   de vingt personnes, etire, en haut d'une page de studio haut de gamme.

   La regle de cette page : **le texte est le sujet, la photo est une piece
   justificative.** Trois colonnes — la conviction, l'explication, la photo.
   La photo tient dans 327 px : la photo du XXI y est reduite 3,5 fois, les
   echantillons 7,8 fois. A cette taille elles sont nettes, et aucune n'est
   recadree (regle du tour 12).

   La troisieme conviction n'a pas de photo : elle ferme la page en noir. */

.rse-bandeau img{height:clamp(200px,30svh,320px)}
.rse-bandeau figcaption{padding:var(--p6) var(--marge) var(--p4)}
.rse-bandeau h1{font-size:clamp(30px,3.9vw,54px)}

.rse-ouverture{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--p4) var(--p6);align-items:start;
  padding:0 0 var(--p6);
}
.rse-these{
  /* meme correction optique que les convictions : a 34 px le blanc a gauche
     du « L » fait 2,4 px, et la phrase ne tomberait pas sur la meme verticale */
  margin:0 0 0 -.072em;max-width:24ch;
  font-size:clamp(21px,2.6vw,34px);font-weight:300;
  line-height:1.3;letter-spacing:-.015em;
}
.rse-ouverture .texte{max-width:46ch}

.conviction{border-top:1px solid var(--encre);padding:var(--p4) 0 0;margin:0 0 var(--p6)}
.conviction-tete{
  display:grid;
  grid-template-columns:minmax(0,.40fr) minmax(0,.32fr) minmax(0,.28fr);
  gap:var(--p4) var(--p5);align-items:start;
}
/* Correction optique du tour 14 : a 52 px le blanc a gauche du « L » fait
   3,7 px. Sans elle la phrase ne tombe pas sur le filet au-dessus d'elle. */
.conviction h2{
  margin:0 0 0 -.072em;
  font-size:clamp(26px,3.6vw,52px);font-weight:300;
  line-height:1.08;letter-spacing:-.028em;
}
.conviction .texte{max-width:48ch}

.conviction-image{margin:0}
.conviction-image img{width:100%}
.conviction-image figcaption{padding-top:var(--p2)}

.conviction--noir{
  background:var(--encre);color:#fff;border-top:0;
  margin:0;padding:var(--p7) var(--marge);
}
.conviction--noir .conviction-tete{max-width:var(--page);margin:0 auto}
.conviction--noir .texte{color:rgba(255,255,255,.78)}

/* ---------- contact ---------- */

.contact{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:var(--p6);align-items:start;padding:0 0 var(--p7);
}
.bloc-contact{margin:0 0 var(--p5)}
.bloc-contact h2{
  font-size:19px;font-weight:300;letter-spacing:-.01em;margin:0 0 var(--p2);
}
.bloc-contact p{margin:0 0 var(--p2);line-height:1.95}
.bloc-contact p:last-child{margin-bottom:0}
.bloc-contact a{text-decoration:underline;text-underline-offset:3px}
.coordonnees{padding-top:var(--p5)}

/* ---------- formulaire ---------- */

.formulaire{max-width:34rem}
.formulaire .sous-titre{margin:0 0 var(--p4)}
.champ{display:flex;flex-direction:column;gap:7px;margin:0 0 var(--p3)}
.champ label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.facultatif{text-transform:none;letter-spacing:.02em}
.champ input,.champ select,.champ textarea{
  font:inherit;color:var(--encre);background:transparent;
  border:0;border-bottom:1px solid var(--encre);border-radius:0;
  padding:9px 2px;width:100%;
  transition:border-color var(--lent);
}
.champ textarea{resize:vertical;min-height:140px;border:1px solid var(--encre);padding:12px}
.champ select{appearance:none;cursor:pointer;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);
  background-position:right 10px center,right 5px center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.champ input:hover,.champ textarea:hover,.champ select:hover{border-color:var(--gris)}
.champ [aria-invalid=true]{border-color:#9b1c1c}
.erreur{font-size:13px;color:#9b1c1c}
/* champ appât : invisible pour l'humain, rempli par les robots */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.bouton{
  font:inherit;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--encre);border:1px solid var(--encre);
  padding:15px 34px;margin-top:var(--p2);cursor:pointer;
  transition:color var(--lent),background-color var(--lent);
}
.bouton:hover{background:#fff;color:var(--encre)}
.bouton:active{transform:translateY(1px)}
.formulaire-note{margin-top:var(--p3);min-height:1.4em}

/* ---------- pied ---------- */
/* Tout le site est centre : monogramme centre, menu centre dessous. Le pied
   etait la seule piece alignee a gauche, et ses quatre colonnes etalees sur
   1280 px se lisaient comme quatre ilots poses au hasard. Il est maintenant
   construit comme l'entete : la marque au centre, les renseignements en
   dessous, serres. Un fond greige (#E8E4DE de la charte, eclairci) detache la
   zone du reste de la page — sans ca le pied se confond avec le blanc. */

.pied{background:var(--greige);margin-top:auto;padding:0 var(--marge)}

.pied-dedans{
  max-width:var(--page);margin:0 auto;
  padding:var(--p5) 0 var(--p4);
  text-align:center;
}

.pied-marque{display:inline-block;border:0;width:240px}
.pied-marque img{width:100%;height:auto}

/* Trois colonnes serrees, centrees comme un bloc, chacune alignee a gauche. */
.pied-cols{
  margin-top:var(--p5);
  display:grid;grid-template-columns:repeat(3,220px);
  justify-content:center;align-items:start;
  gap:var(--p4) var(--p6);
  font-size:13px;line-height:1.95;
}

.pied a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--lent)}
.pied a:hover{border-bottom-color:currentColor}
.pied-bloc{font-style:normal;color:var(--gris-fonce)}
.pied-bloc a{color:var(--encre)}

/* Au survol la boite se remplit et le signe passe en blanc : le meme
   renversement que le bouton du formulaire. */
.pied-social{list-style:none;margin:0;padding:0;justify-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pied-social a{display:inline-flex;align-items:center;gap:12px;border:0}
.pied-social span{border-bottom:1px solid transparent;transition:border-color var(--lent)}
.pied-social a:hover span{border-bottom-color:var(--encre)}

.ic{width:30px;height:30px;flex:none;display:block}
.ic-boite,.ic-trait{fill:none;stroke:currentColor;stroke-width:1.8}
.ic-plein{fill:currentColor}
.ic-boite{transition:fill var(--lent)}
.ic-trait{transition:stroke var(--lent)}
.ic-plein{transition:fill var(--lent)}
.pied-social a:hover .ic-boite{fill:currentColor}
.pied-social a:hover .ic-trait{stroke:var(--greige)}
.pied-social a:hover .ic-plein{fill:var(--greige)}

.pied-bas{
  max-width:var(--page);margin:0 auto;
  border-top:1px solid var(--filet-greige);
  padding:var(--p3) 0 var(--p4);
  display:flex;justify-content:center;align-items:baseline;
  gap:var(--p1) var(--p5);flex-wrap:wrap;
  font-size:12px;color:var(--gris-fonce);
}
.pied-bas p{margin:0}
.pied-legal{display:flex;flex-wrap:wrap;gap:var(--p1) var(--p4)}
.pied-bas a{border-bottom-color:rgba(0,0,0,.18)}

/* ---------- petits écrans ---------- */

@media (max-width:1000px){
  :root{--marge:28px;--p6:64px;--p7:88px}
  .chapeau{grid-template-columns:1fr;gap:var(--p3)}
  .produits{columns:3}
  .cloture{grid-template-columns:1fr;gap:var(--p4)}
  .formulaire{max-width:none}
  .fiche,.film{grid-template-columns:1fr;gap:var(--p4)}
  .duo-texte,.contact{grid-template-columns:1fr;gap:var(--p5)}
  .reperes{grid-template-columns:1fr;gap:var(--p5)}
  .rse-ouverture{grid-template-columns:1fr;gap:var(--p3)}
  /* deux colonnes de texte, la photo dessous a droite */
  .conviction-tete{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:var(--p4)}
  .conviction-image{grid-column:2}
  .pied-cols{gap:var(--p4) var(--p5)}
}
@media (max-width:640px){
  :root{
    /* Les ecarts de section, resserres pour le telephone : un blanc pense
       pour un ecran de 1440 px se lit comme un trou sur 393. */
    --marge:20px;--p5:38px;--p6:46px;--p7:58px;
    /* Le bandeau du telephone : une seule paire de valeurs pour les 33
       pages. Elles commandent le remplissage de l'entete, la taille du
       monogramme, la hauteur du bouton du tiroir ET la marge des ancres. */
    --tete-marge:15px;--tete-logo:64px;
    /* Sans ca, « Aller au contenu » et la mise au point d'un champ de
       formulaire amenaient la cible SOUS l'entete collante : elle etait
       invisible. Mesure : 31 pages sur 32 touchees. */
    scroll-padding-top:calc(var(--tete-marge) * 2 + var(--tete-logo) + 14px);
  }
  body{font-size:15px}
  .mono{width:var(--tete-logo)}

  /* ------------------------------------------------------------------
     Le doigt, pas la souris.
     Apple et Google demandent 44 px de haut pour tout ce qui se touche.
     Les liens du menu faisaient 31 px, ceux des filtres 29 px sur 25 px de
     large, ceux du pied 17 px. On agrandit la ZONE, jamais le texte : le
     rembourrage grandit, le filet de soulignement suit (il est pose sur le
     bas de la boite), et l'ecart exterieur diminue d'autant. Resultat a
     l'oeil : identique. Au doigt : on ne rate plus.
     ------------------------------------------------------------------ */
  .saut{padding:12px 18px}

  .tete{gap:14px}
  /* sur telephone le menu tient en deux lignes : au-dela de 13 px il passe a trois */
  /* Le menu en clair laisse la place au tiroir. Les trois reglages qui
     suivent ne servent plus sur telephone, mais on les garde : ils
     redeviennent utiles si ACCUEIL_TEL ou le tiroir sont retires. */
  /* Le texte courant. On ne touche NI au corps (15 px est deja le plancher
     confortable sur telephone, et descendre en dessous nuit a la lecture)
     NI au nombre de mots : ce sont ceux du studio, et Google indexe d'abord
     la version telephone. On resserre l'INTERLIGNAGE, qui etait a 1,75 —
     genereux sur un ecran large, mais il allonge chaque paragraphe d'un
     bon dixieme sur un telephone ou une phrase tient en 47 signes.
     1,62 reste au-dessus du confort de lecture courant.
     On vise le TEXTE COURANT, pas le document entier : pose sur « body »,
     le reglage rognait 2 px sur toutes les zones tactiles dont la hauteur
     depend de la ligne — les filtres tombaient de 45 a 43 px et les liens
     legaux de 44 a 42, sous le minimum de 44. */
  main p,main li,main dd,main dt,.texte,.questions dd{line-height:1.62}
  .texte p,.texte ul{margin-bottom:1.15em}
  .bloc-contact p{line-height:1.75}

  .menu{display:none;gap:0 18px;font-size:13px;letter-spacing:.06em}
  .menu a{padding:11px 0}
  .menu a::after{bottom:11px}

  /* Le tiroir ne prend AUCUNE place dans la colonne de l'entete : il est
     absolu. Le logo reste donc exactement au milieu, comme avant. */
  /* :not(.tete--photo) est OBLIGATOIRE. Sur l'accueil l'entete est
     « position:absolute » (elle flotte sur la photo) ; un simple « .tete » ici
     l'emporterait — meme poids, plus loin dans la feuille — et remettrait
     l'entete dans le flux : la photo etait pousssee de 165 px vers le bas et
     le logo blanc se retrouvait sur du blanc. */
  /* L'entete COLLE en haut. Sans ca, le bouton du menu part avec le
     defilement : sur realisations (8710 px) ou collections (9861 px), il
     fallait remonter toute la page pour atteindre le menu. Mesure : le
     bouton etait INATTEIGNABLE des le milieu de ces quatre pages.
     C'est aussi ce que fait oud-architecture.com, mesure sur telephone :
     son bouton reste a 0 -> 55 quel que soit le defilement.
     Effet de bord bienvenu : le panneau, qui est pose DANS l'entete, ne
     disparait plus non plus quand on defile en l'ayant laisse ouvert. */
  .tete:not(.tete--photo){
    position:sticky;top:0;z-index:20;
    background:var(--papier);
    border-bottom:1px solid var(--filet);
  }
  .tiroir{display:block;position:absolute;inset:0;pointer-events:none}
  /* Le bouton se cale sur le logo grace a deux variables, pour que le
     bandeau reste reglable d'un seul endroit. */
  /* Un seul bandeau, le meme sur les 33 pages : 15 + 64 + 15 = 95 px. Les
     pages interieures restaient a 145 px (remplissage --p4 = 40) pendant que
     l'accueil etait deja a 95 : l'entete changeait de taille en cliquant,
     exactement ce que Leon avait fait corriger au debut du projet. */
  .tete{padding-block:var(--tete-marge)}
  .tiroir-bouton{
    position:absolute;top:var(--tete-marge);right:calc(var(--marge) - 11px);
    width:48px;height:var(--tete-logo);
    display:grid;place-items:center;
    pointer-events:auto;cursor:pointer;list-style:none;
  }
  .tiroir-bouton::-webkit-details-marker{display:none}
  /* Trois traits de 1,5 px, comme les filets du site. Ils deviennent une
     croix a l'ouverture : le meme geste, pas une deuxieme icone. */
  /* L'epaisseur des traits n'est pas choisie au hasard : les barres du
     monogramme font 9 % de sa largeur (13 sur 146). A 24 px de large, 9 %
     font 2,2 px. Le bouton est donc dessine avec la meme graisse que le
     logo, et les deux se tiennent. A 1,5 px il avait l'air timide et
     etranger a la marque. */
  .tiroir-icone{position:relative;display:block;width:24px;height:2.2px;
    background:currentColor;transition:background .2s}
  .tiroir-icone::before,.tiroir-icone::after{
    content:"";position:absolute;left:0;width:24px;height:2.2px;
    background:currentColor;transition:transform .32s var(--courbe);
  }
  .tiroir-icone::before{top:-7.2px}
  .tiroir-icone::after{top:7.2px}
  .tiroir[open] .tiroir-icone{background:transparent}
  .tiroir[open] .tiroir-icone::before{transform:translateY(7.2px) rotate(45deg)}
  .tiroir[open] .tiroir-icone::after{transform:translateY(-7.2px) rotate(-45deg)}

  /* Ferme, le panneau doit DISPARAITRE de la page. Sans cette ligne il
     restait un rectangle blanc de 393x358 en opacite 0, invisible mais
     cliquable, pose sur la photo : le navigateur ne cache pas tout seul un
     enfant de <details> qu'on a sorti du flux. */
  .tiroir:not([open]) .tiroir-menu{display:none}
  .tiroir-menu{
    position:absolute;top:100%;left:0;right:0;pointer-events:auto;
    background:var(--papier);border-top:1px solid var(--filet);
    animation:arrivee .3s var(--courbe) both;
  }
  .tiroir-menu a{
    display:block;padding:17px var(--marge);
    border-bottom:1px solid var(--filet);
    color:var(--encre);text-decoration:none;
    font-size:14px;letter-spacing:.095em;text-transform:uppercase;
  }
  /* La page ou l'on est deja : un filet sous le mot, comme dans le menu en
     clair. Sous le MOT, pas sous la ligne entiere. */
  .tiroir-menu a[aria-current=page] span{
    border-bottom:1px solid currentColor;padding-bottom:3px;
  }
  /* Sur l'accueil le bouton arrive avec le menu : meme sequence, 0,35 s. */
  .accueil .tete--photo .tiroir-bouton{
    animation:arrivee 1.1s var(--courbe) both;animation-delay:.35s;
  }

  /* ---- le haut de l'accueil : « bandeau » (voir ACCUEIL_TEL_HAUT) ----
     Un bandeau blanc en haut, logo et bouton noirs, la photo commence
     dessous. C'est la grammaire de oud-architecture.com sur telephone.
     L'entete revient DANS LE FLUX : la photo n'est donc plus derriere
     elle, et le voile sombre n'a plus lieu d'etre. */
  .accueil--bandeau .tete--photo{
    /* RELATIVE, jamais STATIC. Le tiroir est en « position:absolute »
       avec « inset:0 » : il se raccroche au premier ancetre POSITIONNE. En
       static, l'entete n'en est pas un — le tiroir se collait alors a la
       fenetre entiere, et son panneau, pose en « top:100% », s'ouvrait a
       852 px, soit juste sous le bord bas de l'ecran. Le bouton, lui,
       tombait au bon endroit par coincidence, donc rien ne se voyait : le
       menu ne s'ouvrait jamais.
       « relative » garde l'entete dans le flux ET retablit le repere. */
    position:relative;color:var(--encre);
    background:var(--papier);
    border-bottom:1px solid var(--filet);
    /* Les dimensions viennent de .tete : le meme bandeau que partout. */
    padding-top:var(--tete-marge);
    padding-bottom:var(--tete-marge);
  }
  .accueil--bandeau .mono{width:var(--tete-logo)}
  .accueil--bandeau .tete--photo .marque{color:var(--encre)}
  /* La photo ne reclame plus un ecran entier : elle prend ce qui reste,
     bandeau et pied deduits. Tout tient donc sur un seul ecran.
     Le minimum de 300 px est la pour les petits telephones : sur un
     320 x 568, bandeau et pied mangent 62 % de l'ecran et il ne restait
     que 214 px de photo. Mieux vaut defiler de 85 px qu'une photo mince. */
  .accueil--bandeau .scene{min-height:300px}

  /* ---- le pied de l'accueil (voir PIED_ACCUEIL_TEL) ----
     Il faisait 736 px, soit 46 % de la page. Sur une page de couverture
     c'est la couverture qui passe au second plan.
     « court » retire le logotype (il est deja en grand en haut de la MEME
     page) et les coordonnees. Celles-ci restent visibles sur les 32 autres
     pages, et sur celle-ci elles restent dans le JSON-LD LocalBusiness :
     le referencement local ne les perd pas. */
  .pied--court .pied-marque{display:none}
  .pied--court .pied-cols .pied-bloc{display:none}
  .pied--court .pied-cols{margin-top:0}
  .pied--court .pied-social{
    flex-direction:row;justify-content:center;align-items:center;gap:var(--p5);
  }
  .pied--court .pied-dedans{padding:var(--p3) 0 var(--p2)}
  .pied--court .pied-bas{padding:var(--p2) 0 var(--p3)}
  .pied--aucun .pied{display:none}

  .filtres{gap:0 20px;margin:0 0 32px}
  .filtres a{padding:12px 10px}
  .filtres a::after{left:10px;right:10px;bottom:12px}

  /* La famille sous une vignette passait a 11,5 px : trop petit a bout de bras. */
  .vignette figcaption{font-size:12.5px}

  /* ------------------------------------------------------------------
     iOS ZOOME tout seul sur un champ de moins de 16 px, et ne dezoome pas
     apres. Le visiteur se retrouve coince dans une page agrandie. 16 px est
     donc un minimum technique, pas un choix de graisse.
     ------------------------------------------------------------------ */
  .champ input,.champ select,.champ textarea,.piege input{font-size:16px}
  /* Un bouton d'envoi pleine largeur : c'est le geste attendu sur telephone,
     et il n'y a plus a viser. */
  .formulaire .bouton{width:100%;padding-inline:0}

  .grille{grid-template-columns:1fr;gap:var(--p4)}
  .ouverture{grid-template-columns:1fr}
  .ouverture-nom{white-space:normal;font-size:clamp(34px,11vw,52px)}
  .ouverture-portrait{grid-column:1;grid-row:auto;width:100%;margin-top:var(--p3);transform:none}
  .ouverture-role{grid-column:1;grid-row:auto;max-width:none}
  .deux-colonnes{grid-template-columns:1fr;gap:0;padding-top:var(--p4)}
  .declaration{max-width:none;margin:var(--p5) 0}
  .expos li{grid-template-columns:1fr;gap:var(--p2)}
  .expos h3{grid-row:auto}
  /* sur téléphone un diptyque se déplie : deux portraits côte à côte sur 393 px
     ne montrent plus rien. Le décalage n'a plus de sens non plus. */
  /* sur telephone une paire se deplie : deux photos cote a cote sur 393 px
     ne montrent plus rien. Chacune reprend alors ses proportions. */
  .bloc-paire{grid-template-columns:1fr}
  .bloc-paire img{height:auto;object-fit:contain}
  .bloc-portrait img{width:100%}
  /* Pas d'ouverture sur telephone. Une photo en 1,7 ne fait que 230 px de haut
     sur 393 px de large : centree dans un ecran de 850 px, elle est minuscule
     et noyee dans le vide. La photo s'affiche donc simplement, en entier. */
  .grandit--anime{height:auto;margin:0 0 var(--p6)}
  .grandit--anime .grandit-scene{position:static;height:auto;overflow:visible}
  .grandit--anime .grandit-cadre{transform:none;clip-path:none;width:100%}
  .grandit--anime + .apres{margin-top:0;padding-top:0}
  /* sur telephone l'en-tete prend deux lignes : la banniere raccourcit pour
     que le nom du projet reste visible sans defiler. */
  .ouverture-projet img{height:clamp(280px,56svh,520px)}
  .ouverture-projet figcaption{padding:var(--p6) var(--marge) var(--p4)}
  .produits{columns:2;column-gap:var(--p2)}
  .produits li{margin-bottom:var(--p2)}
  /* --cols est une VARIABLE et non grid-template-columns en ligne : sinon
     un style en ligne battrait cette regle et les trois couvertures
     resteraient sur trois colonnes a 393 px (piege du tour 12). */
  .parutions{grid-template-columns:1fr;gap:var(--p5)}
  .conviction--noir{padding:var(--p6) var(--marge)}
  .conviction-tete{grid-template-columns:1fr;gap:var(--p3)}
  /* A 300 px la photo s'arretait 53 px avant le bord droit du texte : ca se
     lit comme un alignement rate. Elle prend donc la largeur de la colonne.
     Elle reste nette : le fichier fait 1139 px, la boite 353 px (706 px sur un
     ecran retina, 1059 px en 3x). */
  .conviction-image{grid-column:1;max-width:none}
  /* la devanture fait 2580 x 287 : la regle des pages projet la montait a
     477 px sur telephone, soit 9 % de la largeur de la photo etiree 1,7 fois. */
  .rse-bandeau img{height:clamp(150px,23svh,210px)}
  /* la devanture fait 2580 x 287 : la regle des pages projet la montait a
     477 px sur telephone, soit 9 % de la largeur de la photo etiree 1,7 fois.
     On la redescend : a 200 px on en voit 562 px, et c'est net. */
  .rse-bandeau img{height:clamp(150px,23svh,210px)}
  .rubrique{gap:var(--p3)}
  /* Sur telephone le bloc de questions demarrait 277 px sous la derniere
     coordonnee : un ecran de blanc avant de lire quoi que ce soit. Le rythme
     du bureau ne change pas, seulement celui du telephone. */
  /* Le dernier bloc de coordonnees gardait sa marge basse (44 px) et .contact
     ajoutait 68 px de rembourrage : 112 px de vide avant meme le filet. */
  .coordonnees .bloc-contact:last-child{margin-bottom:0}
  .contact{padding-bottom:var(--p6)}
  .questions{margin-top:var(--p5);padding-top:var(--p4)}
  .questions h2{margin-top:0}
  .questions dl{margin-top:var(--p3)}
  /* La ligne de reponse du formulaire est vide tant qu'on n'a pas envoye :
     elle prenait 20 px de vide sous le bouton. */
  .formulaire-note:empty{display:none}

  .pied-dedans{padding:var(--p5) 0 var(--p4)}
  .pied-marque{width:205px}
  .pied-cols{grid-template-columns:1fr;gap:var(--p3)}
  .pied-bas{padding:var(--p3) 0 var(--p4);gap:var(--p1) var(--p3)}
  /* Une adresse e-mail de 17 px de haut ne se touche pas. Le lien passe en
     inline-block et son rembourrage agrandit la ligne tout seul : pas besoin
     de toucher a l'interlignage, donc l'adresse postale (qui n'a pas de lien)
     ne bouge pas et le pied ne gonfle pas. */
  .pied-bloc a{display:inline-block;padding:10px 0}
  .pied-social a{padding:7px 0}
  /* Mentions legales et confidentialite : leur soulignement est une bordure
     basse. Avec du rembourrage il se decrochait de 19 px sous le mot — ca se
     lit comme un bug. On le redessine donc en fond, pose a 11 px du bas,
     c'est-a-dire exactement sous le texte. */
  .pied-legal a{
    display:inline-block;padding:11px 0;border-bottom-color:transparent;
    background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)) 0 calc(100% - 11px)/100% 1px no-repeat;
  }
  .pied-legal a:hover,.pied-legal a:focus-visible{
    background-image:linear-gradient(currentColor,currentColor);
  }
}

/* ------------------------------------------------------------------
   Telephone couche (paysage).
   Aucune des regles ci-dessus ne s'applique : un iPhone couche fait 852 px de
   LARGE, donc il recoit la mise en page du bureau — avec une entete de 220 px
   sur un ecran qui n'en fait que 393. Plus de la moitie de l'ecran pour un
   logo et un menu.
   La requete porte sur la HAUTEUR, pas sur la largeur : elle ne peut donc pas
   toucher le site tel qu'il a ete valide sur ordinateur (1440 x 900 et
   1024 x 800). Seule une fenetre de moins de 480 px de haut la declenche.
   ------------------------------------------------------------------ */
@media (max-height:480px) and (orientation:landscape){
  .tete{padding:14px var(--marge);gap:10px}
  .mono{width:52px}
  .menu{font-size:13px}
  /* Une banniere de projet de 520 px sur un ecran de 393 : on ne voit ni le
     nom ni la photo sans defiler. */
  .ouverture-projet img{height:clamp(200px,72svh,300px)}
  .rse-bandeau img{height:clamp(120px,34svh,180px)}
}

/* ------------------------------------------------------------------
   La page d'accueil sur telephone : ou se pose le texte.
   Voir ACCUEIL_TEL en haut de nouveau.mjs. Tout est sous 640 px : le site
   sur ordinateur ne voit rien de ce bloc.
   ------------------------------------------------------------------ */
.signature{display:none}
@media (max-width:640px){
  /* « centre » : le bloc logo + menu glisse au milieu de l'ecran. Le voile
     doit alors etre dense AU MILIEU et leger aux bords, sinon il eteint la
     photo — c'est la lecon du voile des vignettes (tour 24). */
  .accueil--centre .tete--photo{
    inset:0;justify-content:center;padding-block:0;
    background:linear-gradient(to bottom,
      rgba(0,0,0,.20),rgba(0,0,0,.28) 26%,rgba(0,0,0,.46) 50%,
      rgba(0,0,0,.28) 74%,rgba(0,0,0,.18));
  }
  /* « signature » : le bloc du haut ne bouge pas, une ligne arrive au milieu.
     Son voile est LOCAL (une tache douce derriere le texte) : la photo reste
     lumineuse partout ailleurs. */
  .signature{
    display:grid;place-content:center;
    position:absolute;inset:0;z-index:4;margin:0;
    color:#fff;text-align:center;
    font-size:clamp(25px,7.2vw,33px);font-weight:300;letter-spacing:.005em;
    line-height:1.2;text-wrap:balance;
    background:radial-gradient(60% 26% at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0) 72%);
    pointer-events:none;
  }
  /* Elle arrive apres la marque (.15 s) et le menu (.35 s) : la meme et
     unique sequence de chargement du site. */
  .accueil .signature{animation:arrivee 1.1s var(--courbe) both;animation-delay:.55s}
}

/* Le cadrage telephone de l'accueil etait pose ici en object-position. Il est
   maintenant CUIT dans la decoupe verticale servie par <picture> : on ne jette
   plus 70 % de la photo, et elle n'est plus agrandie 3,3 fois. Voir
   photos-tel.mjs. */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .scene img{opacity:1}
  .scene>:nth-child(n+2){display:none}
  .revele{clip-path:none}
  .vignette-nom{clip-path:none}
}