/* 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}

/* ---------- 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}

/* 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)}