/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/instrument-serif-400-italic-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;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/instrument-serif-400-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/instrument-serif-400-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;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/instrument-serif-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/public-sans-400-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;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/public-sans-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/polices/public-sans-500-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;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/polices/public-sans-500-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;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/polices/public-sans-600-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;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/polices/public-sans-600-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/spectral-400-italic-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;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/spectral-400-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/polices/spectral-300-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;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/polices/spectral-300-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/spectral-400-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;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/spectral-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/polices/spectral-600-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;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/polices/spectral-600-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;
}
@charset "utf-8";
/* Josselin Thierry, site d'auteur. Feuille de style unique.
   Palette arrêtée, aucune couleur d'accent : les photographies sont en noir et blanc. */

:root{
  --nuit:#0e0f10;   /* fond */
  --nuit2:#16181a;  /* surface de carte, fond de repli d'image */
  --trait:#2a2e31;  /* filets */
  --jour:#e8eaeb;   /* texte principal */
  --demi:#a2a8ad;   /* texte secondaire, légendes */
  --tiers:#767c81;  /* texte tertiaire */
  --clair:#f3f5f6;  /* titres */

  --display:"Instrument Serif",Georgia,serif;
  --corps:"Spectral",Georgia,serif;
  --ui:"Public Sans",system-ui,-apple-system,sans-serif;

  --pad:clamp(18px,3.4cqw,60px);
  --large:76rem;
  --mesure:34rem;
}

*{box-sizing:border-box}
html,body{margin:0}
/* Réinitialisation des marges par défaut de figure à spécificité NULLE.
   Un reset en `.galerie figure{margin:0}` (0-1-1) l'emporterait sur les
   variantes en classe simple (0-1-0) et neutraliserait leur margin-left,
   ce qui casse le bord à bord. :where() ne compte pas dans la spécificité. */
:where(figure){margin:0}
body{
  background:var(--nuit);color:var(--jour);
  font-family:var(--corps);font-size:clamp(1.02rem,1.32cqw,1.135rem);line-height:1.76;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--jour);text-decoration:none}
a:hover{color:#fff}
::selection{background:#3a3f43;color:#fff}
img{background:var(--nuit2)}

/* Le conteneur de requête : toutes les mesures fluides sont exprimées en cqw,
   ce qui rend chaque page identique en 1280 px de large et en 390 px. */
.page{container-type:inline-size;background:var(--nuit);min-height:100%}

.bande{max-width:var(--large);margin:0 auto;padding:0 var(--pad)}

/* ---------- COUVERTURE ----------
   Une photographie en haut de chaque page, la navigation posée dessus,
   le titre en bas. Le voile est une contrainte de lisibilité, pas une décoration.
   La photographie se dissout dans le noir de la page par un masque dégradé :
   c'est la transition entre la couverture et le contenu. */
.couv{position:relative;background:var(--nuit)}
.couv__box{position:relative;height:clamp(480px,60cqw,780px);overflow:hidden}
.couv__img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.88) 62%,rgba(0,0,0,.52) 79%,rgba(0,0,0,.16) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.88) 62%,rgba(0,0,0,.52) 79%,rgba(0,0,0,.16) 92%,transparent 100%);
}
.couv__voile{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(5,6,7,.30) 0%,rgba(5,6,7,.10) 24%,rgba(5,6,7,0) 46%,
  rgba(14,15,16,.42) 80%,rgba(14,15,16,.92) 100%)}
.couv__sur{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:0 0 clamp(30px,4.4cqw,64px)}

/* Le voile de navigation est porté par la rangée elle-même : sa hauteur suit
   celle des liens, donc la protection tient quel que soit le nombre de rangées. */
.bandeau{background:linear-gradient(180deg,
  rgba(5,6,7,.88) 0%,rgba(5,6,7,.84) 52%,rgba(5,6,7,.74) 79%,rgba(5,6,7,.34) 92%,rgba(5,6,7,0) 100%)}
.bandeau__in{width:100%;max-width:var(--large);margin:0 auto;
  padding:clamp(2px,1.2cqw,20px) var(--pad) clamp(40px,3.4cqw,50px);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:clamp(4px,1.4cqw,20px)}
.nom{font-family:var(--corps);font-size:clamp(1.06rem,1.5cqw,1.3rem);letter-spacing:.01em;
  color:var(--jour);padding:9px 0}
.nav{display:flex;flex-wrap:wrap;column-gap:clamp(1.05rem,1.4cqw,1.35rem);row-gap:2px;
  font-family:var(--ui);font-size:.775rem;letter-spacing:.035em}
.nav a{color:#b6bcc1;padding:26px 0 3px;border-bottom:1px solid transparent}
.nav a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
.nav a[aria-current]{color:#fff;font-weight:600;border-bottom-color:rgba(255,255,255,.82)}

.couv__titre{width:100%;max-width:var(--large);margin:0 auto;padding:0 var(--pad)}
.sur{margin:0 0 clamp(10px,1.2cqw,15px);font-family:var(--ui);font-size:.695rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.24em;color:var(--demi)}
.couv__titre h1{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(2.35rem,11cqw,8.6rem);line-height:.94;letter-spacing:-.026em;
  color:var(--clair);max-width:24ch;text-wrap:balance}

/* ---------- PAGE DE GARDE ----------
   Un seuil, pas une page : la photographie occupe toute la fenêtre, il n'y a
   pas de navigation posée dessus, et les entrées sont le contenu de la page. */
.garde{position:relative;height:var(--garde-h,100svh);min-height:520px;max-height:1100px;overflow:hidden}
.garde__img{width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.9) 68%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.18) 93%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.9) 68%,rgba(0,0,0,.55) 82%,rgba(0,0,0,.18) 93%,transparent 100%)}
.garde__voile{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(5,6,7,.62) 0%,rgba(5,6,7,.26) 14%,rgba(5,6,7,.04) 30%,rgba(5,6,7,0) 44%,
  rgba(14,15,16,.5) 78%,rgba(14,15,16,.94) 100%)}
.garde__sur{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:0 0 clamp(26px,3.4cqw,50px)}
.garde__haut{background:linear-gradient(180deg,
  rgba(5,6,7,.84) 0%,rgba(5,6,7,.72) 54%,rgba(5,6,7,.4) 82%,rgba(5,6,7,0) 100%)}
.garde__haut > div{width:100%;max-width:var(--large);margin:0 auto;
  padding:clamp(2px,1.2cqw,20px) var(--pad) clamp(30px,2.8cqw,42px);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px clamp(16px,2.4cqw,32px)}
.garde__haut span{font-family:var(--ui);font-size:.685rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--demi);padding:14px 0}
.garde__haut span + span{color:var(--tiers)}
.garde__bas{width:100%;max-width:var(--large);margin:0 auto;padding:0 var(--pad)}
.garde__bas h1{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(2.9rem,12.5cqw,9.6rem);line-height:.9;letter-spacing:-.03em;color:var(--clair)}
.garde__phrase{margin:clamp(20px,2.4cqw,34px) 0 0;max-width:34ch;font-family:var(--corps);
  font-style:italic;font-weight:300;font-size:clamp(1.1rem,1.85cqw,1.6rem);
  line-height:1.5;color:#cdd2d5;text-wrap:pretty}
.garde__entrer{display:inline-flex;align-items:center;gap:clamp(10px,1.4cqw,18px);
  margin-top:clamp(24px,3cqw,44px);padding:15px 0;font-family:var(--ui);font-size:.7rem;
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--demi)}
.garde__entrer:hover{color:#fff}
.garde__entrer i{width:clamp(28px,4cqw,58px);height:1px;background:var(--tiers)}

/* Les entrées : une ligne par galerie, filet entre chaque. */
.seuil__nav{max-width:var(--large);margin:0 auto;padding:clamp(22px,2.6cqw,40px) var(--pad) 0}
.seuil__nav a{display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:clamp(14px,2.6cqw,44px);row-gap:6px;padding:clamp(22px,2.8cqw,42px) 0;
  border-top:1px solid var(--trait);color:var(--jour)}
.seuil__nav a:hover{background:#131517}
.seuil__num{flex:0 0 clamp(30px,3.4cqw,54px);font-family:var(--ui);font-size:.655rem;
  font-weight:600;letter-spacing:.2em;color:var(--tiers);font-variant-numeric:tabular-nums}
.seuil__nom{flex:1 1 min(100%,15rem);font-family:var(--display);font-weight:400;
  font-size:clamp(1.85rem,4.4cqw,3.05rem);line-height:1.04;letter-spacing:-.018em;color:var(--clair)}
.seuil__compte{flex:0 0 auto;font-family:var(--ui);font-size:.735rem;letter-spacing:.03em;color:var(--demi)}
.seuil__periode{flex:0 0 clamp(64px,8cqw,132px);font-family:var(--ui);font-size:.685rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tiers);text-align:right}
.seuil__fin{border-top:1px solid var(--trait)}

/* ---------- LIGNE DE SEUIL ---------- */
.seuil{max-width:var(--large);margin:0 auto;
  padding:clamp(22px,2.6cqw,44px) var(--pad) 0;
  display:flex;align-items:baseline;gap:clamp(12px,2cqw,26px);
  font-family:var(--ui);font-size:.695rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tiers)}
.seuil .filet{flex:1;height:1px;background:var(--trait);transform:translateY(-4px)}

/* ---------- GALERIE ----------
   Le rythme suit l'orientation du tirage. Aucun recadrage : une photographie
   n'atteint le bord que si sa proportion le permet, la largeur seule fait la mesure. */
.galerie{padding:clamp(44px,5.4cqw,96px) 0 clamp(76px,8cqw,136px)}
.galerie__col{max-width:var(--large);margin:0 auto;padding:0 var(--pad);
  display:flex;flex-direction:column;gap:clamp(78px,9cqw,152px)}
.galerie img{display:block;width:100%;height:auto}

.v--pleine{margin:clamp(14px,2.6cqw,54px) 0;width:100cqw;margin-left:calc(50% - 50cqw)}
.v--pleine .legende{max-width:var(--large);margin:0 auto;padding:0 var(--pad)}
.v--l1{align-self:center;width:min(100%,calc(66.8cqw + 143px))}
.v--p3{align-self:center;width:min(100%,410px)}

/* Images décalées : la légende passe dans la marge opposée, calée au bas du tirage.
   Sur téléphone elle repasse sous l'image (row-gap). */
.duo{display:flex;flex-wrap:wrap;align-items:flex-end;
  column-gap:clamp(18px,2.6cqw,44px);row-gap:clamp(13px,1.2cqw,18px)}
.duo--droite{flex-direction:row-reverse}
.duo figure{flex:0 0 auto}
.duo__marge{flex:1 1 min(100%,9rem);padding-bottom:clamp(2px,.6cqw,10px)}
.w--p1{width:min(100%,calc(18.7cqw + 350px))}
.w--p2{width:min(100%,calc(6.6cqw + 402px))}
.w--p4{width:min(100%,calc(27.8cqw + 310px))}

/* Respiration : un écran presque nu, une phrase seule. Le vide devient composition. */
.silence{min-height:clamp(280px,30cqw,480px);display:flex;align-items:center;
  padding:clamp(16px,2.4cqw,40px) 0}
.silence p{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.55rem,3.5cqw,3rem);line-height:1.16;letter-spacing:-.012em;
  color:#9aa1a6;max-width:26ch;text-wrap:pretty}

/* ---------- LÉGENDES ---------- */
.legende{display:flex;align-items:baseline;gap:clamp(9px,1.1cqw,15px);
  margin-top:clamp(12px,1.2cqw,18px);font-family:var(--ui)}
.legende .num{font-size:.655rem;font-weight:600;letter-spacing:.2em;color:var(--tiers);
  flex:0 0 auto;font-variant-numeric:tabular-nums}
.legende .tiret{flex:0 0 auto;width:clamp(14px,2.2cqw,32px);height:1px;
  background:var(--trait);transform:translateY(-5px)}
.legende .txt{font-size:.775rem;letter-spacing:.02em;color:var(--demi);line-height:1.5}
.legende--marge{flex-direction:column;align-items:flex-start;gap:9px;margin-top:0;max-width:20ch}
.legende--marge .tiret{width:clamp(20px,2.6cqw,38px);transform:none}

/* ---------- PIED DE LIGNE DES GALERIES ---------- */
.tirages{max-width:var(--large);margin:0 auto;padding:0 var(--pad) clamp(70px,8cqw,120px)}
.tirages__in{border-top:1px solid var(--trait);padding-top:clamp(14px,1.8cqw,24px);
  display:flex;flex-wrap:wrap;gap:0 clamp(20px,3cqw,40px);justify-content:space-between;
  align-items:baseline;font-family:var(--ui);font-size:.755rem;letter-spacing:.03em;color:var(--tiers)}
.tirages__in span{padding:14px 0}
.tirages__in a{color:var(--demi);border-bottom:1px solid var(--trait);padding:27px 0 2px}
.tirages__in a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}

/* ---------- ARTICLE ---------- */
.chapo{max-width:var(--mesure);margin:0 auto;padding:clamp(30px,3.6cqw,58px) var(--pad) 0}
.chapo p{margin:0;font-family:var(--corps);font-style:italic;font-weight:300;
  font-size:clamp(1.18rem,1.75cqw,1.5rem);line-height:1.54;color:#cdd2d5;text-wrap:pretty}
.regle{display:flex;align-items:baseline;gap:clamp(12px,2cqw,22px);
  margin:clamp(26px,3.2cqw,46px) 0 clamp(30px,3.6cqw,52px);
  font-family:var(--ui);font-size:.685rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tiers)}
.regle .filet{flex:1;height:1px;background:var(--trait);transform:translateY(-4px)}
.texte{max-width:var(--mesure);margin:0 auto;padding:0 var(--pad)}
.texte p{margin:0 0 1.5em;text-wrap:pretty}
.texte .amorce{font-size:1.075em;color:#f0f2f3}
.fin{margin:clamp(30px,3.4cqw,48px) 0 0;padding-top:clamp(16px,1.8cqw,24px);
  border-top:1px solid var(--trait);font-family:var(--ui);font-size:.775rem;
  line-height:1.62;letter-spacing:.02em;color:var(--tiers)}
.art__pleine{margin:clamp(52px,6cqw,104px) 0;width:100cqw;margin-left:calc(50% - 50cqw)}
.art__pleine img{display:block;width:100%;height:auto}
.art__pleine .legende{max-width:var(--large);margin:0 auto;padding:0 var(--pad)}
.art__droite{max-width:var(--large);margin:clamp(48px,5.6cqw,96px) auto;padding:0 var(--pad)}
.art__droite figure{margin:0 0 0 auto;width:min(100%,calc(22cqw + 300px))}
.art__droite img{display:block;width:100%;height:auto}

/* ---------- ABONNEMENT ---------- */
.abo{max-width:var(--mesure);margin:clamp(56px,6.4cqw,104px) auto clamp(70px,8cqw,124px);
  padding:0 var(--pad)}
.abo__in{background:var(--nuit2);border:1px solid var(--trait);padding:clamp(24px,2.8cqw,40px)}
.abo h2{margin:0 0 .55rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,2.2cqw,1.9rem);line-height:1.1;letter-spacing:-.01em;color:var(--clair)}
.abo p{margin:0 0 clamp(18px,2cqw,26px);font-size:.99rem;line-height:1.66;
  color:var(--demi);max-width:44ch;text-wrap:pretty}
.champ{display:flex;flex-wrap:wrap;gap:8px}
.champ input{flex:1 1 min(100%,11rem);font-family:var(--ui);font-size:.88rem;
  letter-spacing:.02em;padding:.86rem .8rem;border:1px solid var(--trait);
  background:var(--nuit);color:var(--jour);outline:none}
.champ input:focus{border-color:var(--tiers)}
button{font-family:var(--ui);font-size:.855rem;font-weight:600;letter-spacing:.05em;
  padding:.88rem 1.3rem;border:1px solid var(--jour);background:var(--jour);
  color:var(--nuit);cursor:pointer}
button:hover{background:#fff;border-color:#fff}
.mini{margin:.85rem 0 0;font-family:var(--ui);font-size:.715rem;line-height:1.6;
  letter-spacing:.02em;color:var(--tiers)}

/* ---------- INDEX DU JOURNAL, version B, les affiches ---------- */
.index{padding:clamp(34px,4cqw,66px) 0 clamp(64px,7cqw,110px)}
.index__col{max-width:var(--large);margin:0 auto;padding:0 var(--pad);
  display:flex;flex-direction:column;gap:clamp(80px,9.5cqw,168px)}
.note{display:flex;flex-direction:column}
.note__meta{display:flex;align-items:baseline;gap:clamp(12px,2cqw,24px);
  margin-bottom:clamp(14px,1.8cqw,26px);font-family:var(--ui);font-size:.685rem;
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--tiers);
  font-variant-numeric:tabular-nums}
.note__meta .filet{flex:1;height:1px;background:var(--trait);transform:translateY(-4px)}
.note__titre{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(2.5rem,8.2cqw,5.4rem);line-height:.97;letter-spacing:-.022em;
  color:var(--clair);max-width:24ch;padding:4px 0;text-wrap:balance}
.note__titre:hover{color:#fff}
.note p{margin:clamp(20px,2.4cqw,34px) 0 0;font-size:clamp(1.02rem,1.25cqw,1.12rem);
  line-height:1.68;color:var(--demi);max-width:40ch;text-wrap:pretty}
.note figure img{display:block;width:100%;height:auto}
/* Chaque variante porte sa marge complète : aucune raccourcie de reset
   ne vient plus écraser margin-left ou margin-right. */
.note__f--pleine{margin:clamp(30px,3.6cqw,58px) 0 0;width:100cqw;margin-left:calc(50% - 50cqw)}
.note__f--droite{margin:clamp(30px,3.6cqw,58px) 0 0 auto;width:min(100%,calc(20cqw + 300px))}
.note__f--gauche{margin:clamp(30px,3.6cqw,58px) auto 0 0;width:min(100%,calc(26cqw + 300px))}

/* ---------- À PROPOS ---------- */
.reserve{max-width:var(--mesure);margin:clamp(44px,5cqw,82px) auto 0;padding:0 var(--pad)}
.reserve__in{border:1px dashed var(--trait);padding:clamp(22px,2.6cqw,36px);
  display:flex;flex-direction:column;gap:clamp(12px,1.4cqw,18px)}
.reserve p{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.755rem;line-height:1.7;color:var(--tiers)}
.formulaire{max-width:var(--mesure);margin:clamp(50px,5.8cqw,94px) auto clamp(70px,8cqw,124px);
  padding:0 var(--pad)}
.formulaire h2{margin:0 0 clamp(18px,2cqw,28px);font-family:var(--display);font-weight:400;
  font-size:clamp(1.85rem,3.4cqw,2.6rem);line-height:1.06;letter-spacing:-.014em;
  color:var(--clair);max-width:22ch}
.formulaire label{display:flex;flex-direction:column;gap:7px;margin-bottom:clamp(14px,1.6cqw,20px)}
.formulaire label span{font-family:var(--ui);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--demi)}
.formulaire input,.formulaire textarea{font-family:var(--ui);font-size:.9rem;line-height:1.62;
  letter-spacing:.02em;padding:.86rem .8rem;border:1px solid var(--trait);
  background:var(--nuit2);color:var(--jour);outline:none;width:100%}
.formulaire textarea{resize:vertical}
.formulaire input:focus,.formulaire textarea:focus{border-color:var(--tiers)}

/* ---------- PIED DE PAGE ---------- */
footer{background:var(--nuit);border-top:1px solid var(--trait)}
.pied{max-width:var(--large);margin:0 auto;
  padding:clamp(40px,4.6cqw,80px) var(--pad) clamp(26px,3cqw,48px);
  display:flex;flex-wrap:wrap;column-gap:clamp(28px,4cqw,72px);
  row-gap:clamp(34px,4cqw,60px);justify-content:space-between}
.pied__nom{flex:1 1 min(100%,17rem)}
.pied__nom p:first-child{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,4.4cqw,3.5rem);line-height:1;letter-spacing:-.02em;color:var(--clair)}
.pied__lieux{margin:clamp(12px,1.4cqw,20px) 0 0;font-family:var(--ui);font-size:.7rem;
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--tiers)}
.pied__cols{display:flex;flex-wrap:wrap;column-gap:clamp(28px,3.6cqw,64px);
  row-gap:clamp(26px,3cqw,40px)}
.pied__cols nav{display:flex;flex-direction:column;align-items:flex-start;min-width:8rem}
.pied__cols nav:first-child{min-width:9.5rem}
.pied__cols p{margin:0 0 6px;font-family:var(--ui);font-size:.655rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tiers)}
.pied__cols a{font-family:var(--ui);font-size:.8rem;letter-spacing:.02em;
  color:var(--demi);padding:15px 0}
.pied__cols a:hover{color:#fff}
.pied__bas{max-width:var(--large);margin:0 auto;padding:0 var(--pad) clamp(38px,4.4cqw,68px)}
.pied__bas div{border-top:1px solid var(--trait);display:flex;flex-wrap:wrap;
  gap:0 clamp(20px,3cqw,40px);justify-content:space-between;align-items:baseline;
  font-family:var(--ui);font-size:.735rem;letter-spacing:.03em;color:var(--tiers)}
.pied__bas span,.pied__bas a{padding:16px 0;color:var(--tiers)}
.pied__bas a:hover{color:#fff}


/* ---------- AJOUTS DU SITE STATIQUE, 24/08/2026 ---------- */
/* <picture> enveloppe chaque image : sans display:block il reste en ligne
   et laisse un liseré sous la photographie. */
picture{display:block;width:100%}
picture img{display:block;width:100%;height:auto}
/* ⛔ LA COUVERTURE. .couv__box fait une hauteur fixe et coupe ce qui depasse ;
   .couv__img porte height:100% + object-fit:cover pour s'y ajuster. Le <picture>
   intercale casse la chaine : height:100% se calcule alors sur un parent en
   hauteur auto, donc vaut auto, et l'image sort a sa taille naturelle. Mesure du
   24/08 : boite 768px, image 1925px, 1157px coupes. NE PAS RETIRER CES DEUX LIGNES. */
.couv__box picture{display:block;width:100%;height:100%}
.couv__box picture img{height:100%;object-fit:cover}

/* ---------- LA GARDE, 27/08/2026 : UNE SEULE PAGE ----------
   ⛔ IL Y A EU DEUX PAGES, DU 25 AU 27/08/2026. Une garde plein ecran, un bouton
   « Entrer », puis un sommaire. Thierry y tenait, il l'avait corrige deux fois.
   La mesure de neuf jours l'a defait : 113 personnes arrivent sur la garde,
   5 appuient sur « Entrer ». Le jour ou une story a amene 33 visiteurs, UN SEUL
   est alle plus loin. Ce n'etait pas un bug — le lien etait contraste (8,7:1) et
   sa zone tactile suffisante — mais il faisait 11,2 px, en gris, a 88-96 % de la
   hauteur d'ecran, et 70 % des visiteurs sont sur telephone. Il se lisait comme
   un pied de page, pas comme une porte.

   ⛔ LA COUVERTURE NE FAIT PLUS UNE FENETRE ENTIERE, ET C'EST TOUT LE POINT.
   A 82svh, la premiere entree du sommaire depasse sous la ligne de flottaison.
   C'est ce depassement qui remplace le bouton : on ne demande plus un clic, on
   montre qu'il y a une suite. Repasser a 100svh recreerait le probleme a
   l'identique — la page redeviendrait un cul-de-sac. */
.page--garde{min-height:100svh;display:flex;flex-direction:column}
.page--garde .garde{max-height:none;height:auto;min-height:82svh}

/* ---------- CE QUI VIENT APRES, 28/08/2026 ----------
   Trois blocs neufs, tous parce que le site ne menait nulle part : la galerie
   suivante, les notes voisines, et ou suivre le travail. Ils reprennent le
   vocabulaire deja en place — filet au-dessus, petites capitales en Public Sans,
   texte tertiaire — pour ne rien ajouter de neuf a l'oeil. */

/* La galerie suivante : une bande pleine largeur, l'image lisible mais assombrie,
   les mots par-dessus. C'est le seul endroit du site ou une photographie sert de
   bouton — d'ou l'alt vide : elle ne dit rien, elle invite. */
.suite{position:relative;display:block;overflow:hidden;
  height:clamp(240px,26cqw,380px);background:var(--nuit2)}
.suite img{width:100%;height:100%;object-fit:cover;object-position:center 45%;
  display:block;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.suite:hover img{transform:scale(1.03)}
.suite__voile{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(5,6,7,.55) 0%,rgba(5,6,7,.42) 45%,rgba(5,6,7,.78) 100%)}
.suite__mots{position:absolute;inset:0;max-width:var(--large);margin:0 auto;
  padding:0 var(--pad) clamp(24px,3cqw,44px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.suite__sur{font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--demi)}
.suite__titre{font-family:var(--display);font-weight:400;line-height:1;
  font-size:clamp(2rem,5.4cqw,3.6rem);color:var(--clair)}
.suite__compte{font-family:var(--ui);font-size:.755rem;letter-spacing:.03em;color:var(--tiers)}

/* Les notes voisines : une ou deux cartes, jamais plus. */
.voisines{max-width:var(--large);margin:0 auto;padding:0 var(--pad) clamp(50px,6cqw,90px)}
.voisines__in{display:grid;gap:1px;background:var(--trait);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.voisines__in a{display:flex;flex-direction:column;gap:8px;background:var(--nuit);
  padding:clamp(22px,2.6cqw,36px) clamp(18px,2.2cqw,30px)}
.voisines__in a:hover{background:#131517}
.voisine__sur{font-family:var(--ui);font-size:.68rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tiers)}
.voisine__titre{font-family:var(--display);font-weight:400;line-height:1.06;
  font-size:clamp(1.4rem,2.4cqw,2rem);color:var(--clair)}
.voisine__date{font-family:var(--ui);font-size:.72rem;letter-spacing:.03em;color:var(--tiers)}

/* Ou suivre. Il n'y avait de lien vers Instagram QUE dans le pied de page, en petit,
   a cote de la politique de confidentialite — alors que le goulot mesure du compte
   n'est pas l'attention mais la conversion. */
.suivre{max-width:var(--large);margin:0 auto;padding:0 var(--pad) clamp(60px,7cqw,100px)}
.suivre__in{border-top:1px solid var(--trait);padding-top:clamp(16px,2cqw,26px);
  display:flex;flex-wrap:wrap;gap:10px clamp(20px,3cqw,40px);
  align-items:baseline;justify-content:space-between}
.suivre__mot{margin:0;font-family:var(--corps);font-style:italic;font-weight:300;
  font-size:clamp(1rem,1.5cqw,1.2rem);color:var(--demi)}
.suivre__liens{display:flex;gap:clamp(16px,2.4cqw,30px)}
.suivre__liens a{font-family:var(--ui);font-size:.755rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--jour);
  border-bottom:1px solid var(--trait);padding:6px 0 3px}
.suivre__liens a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.55)}

/* ---------- LA PAGE D'UNE PHOTOGRAPHIE ----------
   Pas de banniere : l'image EST la page. Le bandeau seul en haut, sur le fond. */
.photo__haut{max-width:var(--large);margin:0 auto;padding:0 var(--pad)}
.photo{max-width:var(--large);margin:0 auto;padding:clamp(10px,1.6cqw,26px) var(--pad) 0}
/* ⛔ La figure se retracte a la LARGEUR DE L'IMAGE (`width:fit-content`), elle ne
   s'etale pas sur toute la colonne. Sans ca, une verticale laissait deux bandes grises
   de part et d'autre — le fond du <img> qui transparait sous object-fit:contain — et la
   legende se retrouvait a trente centimetres de la photographie qu'elle nomme. */
.photo__fig{margin:0 auto;width:fit-content;max-width:100%}
.photo__fig img{display:block;max-width:100%;max-height:82svh;width:auto;height:auto}
.photo__leg{display:flex;align-items:baseline;gap:clamp(10px,1.4cqw,16px);
  padding:clamp(14px,1.8cqw,22px) 0 0;font-family:var(--ui);font-size:.755rem;
  letter-spacing:.03em;color:var(--demi)}
.photo__num{color:var(--tiers);font-weight:600;letter-spacing:.1em}
.photo__leg .tiret{flex:0 0 clamp(18px,3cqw,40px);height:1px;background:var(--trait)}
.photo__nav{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px clamp(16px,2.4cqw,32px);margin-top:clamp(26px,3.4cqw,48px);
  padding:clamp(14px,1.8cqw,22px) 0 clamp(60px,7cqw,100px);
  border-top:1px solid var(--trait);font-family:var(--ui);font-size:.72rem;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.photo__nav a{color:var(--demi);padding:14px 0}  /* 44 px de haut au doigt : mesure
  a 375 px de large, la zone tombait a 36 px, sous le minimum tactile recommande */
.photo__nav a:hover{color:#fff}
.photo__serie{text-align:center;letter-spacing:.06em;text-transform:none;
  font-weight:400;font-size:.755rem;color:var(--tiers)}
.photo__prec::before{content:"90";margin-right:.6em;color:var(--tiers)}
.photo__suiv::after{content:"92";margin-left:.6em;color:var(--tiers)}

/* Une figure cliquable ne doit rien changer a l'oeil : pas de soulignement herite,
   pas de bleu, et un liseré net au clavier — la seule facon de savoir ou l'on est
   quand on ne se sert pas d'une souris. */
.fig__lien{display:block;color:inherit}
.fig__lien img{transition:opacity .35s ease}
.fig__lien:hover img{opacity:.86}
.fig__lien:focus-visible{outline:2px solid var(--clair);outline-offset:4px}

/* etiquette lue par les lecteurs d'ecran, invisible a l'oeil */
.sr,.cache{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Champs de formulaire : 16px PILE. En dessous, Safari iOS agrandit toute la
   page au focus et n'y revient jamais. Ne pas repasser en rem. */
.champ input,.contact input,.contact textarea{font-size:16px}
.champ input::placeholder{color:#8a8a8a}
.champ input{border-color:#6b6b6b}
/* La bordure au repos etant passee a #6b6b6b, le focus d'origine ne se distinguait
   plus qu'a 1,26:1 : l'indicateur avait disparu. Un vrai anneau, qui ne depend
   d'aucune bordure. */
.champ input:focus,.contact input:focus,.contact textarea:focus{
  outline:2px solid var(--jour);outline-offset:2px;border-color:var(--jour)}

/* Pages de texte : A propos et politique de confidentialite */
/* Pas de rembourrage horizontal ici : .texte porte deja padding:0 var(--pad).
   Le cumuler etranglait la colonne a 370px la ou un article en fait 457. */
.page-texte{max-width:var(--mesure);margin:0 auto;padding:clamp(38px,4.4cqw,72px) 0 clamp(20px,2cqw,34px)}
.page-texte .texte{max-width:none}
.page-texte h2{margin:clamp(34px,3.6cqw,54px) 0 .7rem;font-family:var(--display);
  font-weight:400;font-size:clamp(1.5rem,2.4cqw,2rem);line-height:1.14;
  letter-spacing:-.01em;color:var(--clair)}
.page-texte h2:first-child{margin-top:0}
.page-texte h3,.art__h3{max-width:var(--mesure);margin:clamp(30px,3.2cqw,46px) auto .5rem;
  padding:0 var(--pad);font-family:var(--ui);font-size:.79rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tiers)}
.page-texte h3{padding:0}
.page-texte ul{margin:0 0 1.15rem;padding-left:1.1rem;color:var(--demi)}
.page-texte li{margin:0 0 .55rem;line-height:1.68}
.page-texte .date-maj{color:var(--tiers);font-style:italic;font-size:.92rem}
.page-texte a{color:inherit;border-bottom:1px solid var(--trait)}
.page-texte a:hover{border-bottom-color:rgba(255,255,255,.45)}
.page-texte code{font-family:ui-monospace,Menlo,monospace;font-size:.84em;color:var(--tiers)}

/* Formulaire de contact */
.contact{display:flex;flex-direction:column;gap:.4rem}
.contact label{font-family:var(--ui);font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tiers);margin-top:.7rem}
.contact input,.contact textarea{font-family:var(--ui);padding:.8rem;
  border:1px solid #6b6b6b;background:var(--nuit);color:var(--jour);outline:none}
.contact input:focus,.contact textarea:focus{border-color:var(--jour)}
.contact textarea{resize:vertical;line-height:1.6}
.contact button{margin-top:1.1rem;align-self:flex-start}

/* Le lien de la mention doit rester lisible */
.mini a{color:inherit;border-bottom:1px solid var(--trait)}

/* ⛔ INDEX DU JOURNAL : le titre etait cliquable sans le montrer. Il ne portait
   qu'un changement de couleur AU SURVOL, donc rien au repos, et rien du tout sur
   un ecran tactile. Signale par Thierry le 24/08 : « on ne comprend pas forcement
   qu'en cliquant sur le titre on ouvre un article. » Deux reponses : un lien
   explicite sous l'amorce, dans le meme vocabulaire que « Ecrire a l'auteur » en
   bas des galeries, et un soulignement du titre au survol et au clavier. */
.note__lire{margin:clamp(16px,1.8cqw,24px) 0 0}
.note__lire a{position:relative;display:inline-block;font-family:var(--ui);font-size:.75rem;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--demi);
  border-bottom:1px solid var(--trait);padding-bottom:4px}
/* Le lien ne fait que 25px de haut, sous les 44px que la maquette impose aux cibles
   tactiles. On agrandit la zone touchable par un pseudo-element, sans deplacer le
   soulignement ni bouger la mise en page. */
.note__lire a::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}
.note__lire a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.note__lire a:focus-visible,.note__titre a:focus-visible{
  outline:2px solid var(--jour);outline-offset:4px}
.note__titre a:hover{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.1em;text-decoration-color:rgba(255,255,255,.4)}