/* 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}
/* ⛔ HAUTEUR FIXE, ET SURTOUT PAS `auto` — mesure du 28/08/2026 sur sept fenetres.
   `height:auto` laissait l'image prendre sa hauteur NATURELLE, soit 0,8 x la largeur
   de la fenetre. Des que l'ecran est plus large que haut — donc sur TOUT ordinateur —
   cette hauteur depasse les 82svh voulus et le sommaire repasse sous la ligne de
   flottaison : -390 px sur un portable 1280x720, -560 px sur un ecran HD, -834 px sur
   un 2560. C'etait exactement le defaut que la fusion garde/sommaire du 27/08 devait
   supprimer, revenu par une porte neuve le lendemain, invisible sur le telephone ou
   il avait ete verifie.
   Avec une hauteur definie, `object-fit:cover` du .garde__img reprend son role et
   recadre au lieu de laisser l'image dicter la page. Mesure apres correction :
   la premiere entree est visible partout, de +43 px (1280x720) a +314 px. */
.page--garde .garde{height:82svh;min-height:480px;max-height:900px}
/* ⛔ LE <picture> DOIT ETRE SORTI DU FLUX, sinon `height:100%` ne resout pas.
   `<picture>` est un element INLINE de hauteur auto : un `height:100%` pose sur
   l'<img> qu'il contient se calcule contre lui, pas contre .garde, et retombe
   donc sur `auto` — l'image reprend sa hauteur naturelle et deborde de 414 px sur
   un MacBook. Mesure du 28/08/2026, apres la premiere correction : le sommaire
   etait bien revenu au-dessus de la ligne, mais le recadrage `object-fit:cover`
   ne s'appliquait toujours pas et l'image etait rognee par le BAS au lieu de
   l'etre autour de son `object-position:center 46%`. Deux defauts distincts, le
   second cache par le premier. */
.page--garde .garde>picture{position:absolute;inset:0;display:block}
/* ⛔ LE POINT DE RECADRAGE PASSE DE 46 % A 62 % — et c'est le recadrage qui l'exige.
   Tant que l'image dictait sa hauteur, elle etait montree ENTIERE et ce reglage ne
   servait a rien. Des qu'on la recadre, il decide de ce qu'on voit. A 46 % le cadre
   gardait le ciel et jetait le premier plan : les DEUX SILHOUETTES — le sujet de la
   photographie — tombaient exactement sous la ligne « Je photographie des instants
   ou l'on se retrouve face a plus grand que soi ». A 62 % on garde la lagune, sa
   courbe, les herbes hautes du premier plan et une vraie bande de ciel, et les
   silhouettes ressortent sur l'estran clair, au-dessus de la phrase.
   ⚠ Sans effet sur telephone : en portrait le cadre est plus haut que large, l'image
   est recadree en LARGEUR et sa hauteur est montree en entier. */
.page--garde .garde__img{object-position:center 62%}
.page--garde .garde__img{width:100%;height:100%}

/* ---------- 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}
/* La legende est un <h1> depuis le 28/08/2026 : les 67 pages photo n'avaient AUCUN
   element de titre, donc rien a quoi s'accrocher pour qui navigue de titre en titre
   au lecteur d'ecran. `font:inherit` annule les valeurs par defaut du navigateur —
   la page ne bouge pas d'un pixel. */
.photo__leg h1{font:inherit;margin:0;letter-spacing:inherit;color:inherit}
.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)}