/*
Theme Name: Évasion en Plein Air
Description: Magazine du jardin et de l’extérieur. Langage « carnet de terrain » : typographie d’abord, angles vifs, filets fins, photographies en pleine largeur.
Author: Florian ROGER
Version: 4.2.3
Text Domain: evasion-plein-air
*/

/* =========================================================
   LECTURE DE COMMANDE
   Magazine editorial jardin, lecteurs proprietaires francais.
   Langage : carnet de terrain. Cadrans VARIANCE 7, MOTION 3,
   DENSITY 5.

   Le parc de sites doit rester structurellement distinct : ce
   theme n a en commun avec les autres ni ses formes, ni ses
   familles de sections, ni ses noms de classe.
     formes ....... angle vif partout, aucun rayon, aucune ombre
     hero ......... manifeste typographique, puis planche photo
     index ........ registre d entrees reglees, pas de cartes
     en-tete ...... bloc-titre centre sous filet
     typo ......... sans en titre, serif en lecture, mono en label
   ========================================================= */

:root {

  /* ===== FONDATION =====
     Contrastes calcules avant ecriture :
       ink #12140F sur paper #FBFBF9 ....... 17,9:1
       ink-soft #4A4F44 sur paper ..........  8,06:1
       accent #1F4D2E sur paper ............  9,34:1
       paper sur accent ....................  9,75:1
     L accent est assez sombre pour porter du texte courant :
     inutile de doubler la palette pour rester lisible. */
  --paper:     #FBFBF9;
  --wash:      #F1F1EC;
  --sand:      #E4E4DC;
  --ink:       #12140F;
  --ink-soft:  #4A4F44;
  --rule:      #CFCFC5;
  --rule-fine: #E2E2DA;
  --accent:    #1F4D2E;
  --accent-lit:#A7D8B6;

  /* ===== TYPOGRAPHIE =====
     Trois familles, trois roles nets. Serif en lecture et sans en
     titre : l inverse de l usage courant, et du reste du parc. */
  --sans:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Gamme de onze pas, aucune taille hors gamme */
  --t-mast:   clamp(1.5rem, 2.6vw, 2.05rem);
  --t-poster: clamp(2rem, 3.6vw, 3.05rem);
  --t-h1:     clamp(2.1rem, 4.6vw, 3.4rem);
  --t-h2:     clamp(1.55rem, 2.7vw, 2.15rem);
  --t-h3:     clamp(1.16rem, 1.5vw, 1.36rem);
  --t-lede:   clamp(1.1rem, 1.35vw, 1.28rem);
  --t-prose:  1.115rem;
  --t-body:   1.0325rem;
  --t-small:  .935rem;
  --t-label:  .775rem;
  --t-micro:  .705rem;

  --gut:  clamp(18px, 4.6vw, 60px);
  --span: 1240px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: var(--t-body); line-height: 1.66;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }

/* Grain de papier : voile fixe, non cliquable, tres faible. Un aplat
   parfaitement lisse sonne numerique ; le carnet a du grain. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }
a { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -.02em;
                 text-wrap: balance; }
/* Les dates et les durees s alignent en colonnes : chiffres a chasse fixe. */
.entry-m, .foot-copy, .almanac-m { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--span); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 999; background: var(--ink);
              color: var(--paper); padding: 10px 16px; font-family: var(--mono); }

/* Etiquette mono : seul systeme de label du site */
.tick { font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
        letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* =========================================================
   BLOC-TITRE : centre, sous filet, nav en mono.
   Ni logo a gauche ni bouton pilule a droite.
   ========================================================= */
.mast { position: sticky; top: 0; z-index: 60; background: var(--paper);
        border-bottom: 1px solid var(--rule); }
.mast-top { display: flex; align-items: center; justify-content: center;
            position: relative; padding: 20px 0 14px;
            transition: padding .25s var(--ease); }
.mast.tight .mast-top { padding: 10px 0 8px; }

.title { display: inline-flex; align-items: center; gap: 11px;
         text-decoration: none; color: var(--ink); }
.title svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--accent); }
.title b { font-family: var(--sans); font-weight: 700; font-size: var(--t-mast);
           letter-spacing: -.035em; line-height: 1;
           transition: font-size .25s var(--ease); }
.mast.tight .title b { font-size: 1.24rem; }

/* Rangee de navigation : petites capitales mono separees par des filets */
.mast-nav { display: flex; align-items: stretch; justify-content: center;
            border-top: 1px solid var(--rule-fine); }
.mast-nav a {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); padding: 11px 22px; border-left: 1px solid var(--rule-fine);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.mast-nav a:last-child { border-right: 1px solid var(--rule-fine); }
.mast-nav a:hover { background: var(--wash); color: var(--accent); }
.mast-nav a[aria-current] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

.mast-burger { display: none; position: absolute; right: var(--gut); top: 50%;
               transform: translateY(-50%); background: none; border: 0;
               padding: 8px; cursor: pointer; color: var(--ink); }
.mast-burger span { display: block; width: 22px; height: 2px; background: currentColor;
                    margin: 4px 0; }
.mast-shut { display: none; }

/* =========================================================
   MANIFESTE : premier ecran sans photographie.
   La planche arrive juste apres, en pleine largeur.
   ========================================================= */
.manifest { padding-top: clamp(48px, 7vw, 94px); padding-bottom: clamp(40px, 5.5vw, 72px); }
.manifest-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
               gap: clamp(24px, 4vw, 64px); align-items: end; }
.manifest .tick { display: block; margin-bottom: 18px; }
.poster { font-family: var(--sans); font-weight: 700; font-size: var(--t-poster);
          line-height: 1.06; letter-spacing: -.02em; margin: 0; max-width: 26ch;
          text-wrap: balance; }
.poster em { font-style: normal; display: block; font-weight: 400;
             font-size: .52em; line-height: 1.16; letter-spacing: -.015em;
             color: var(--accent); margin-top: .45em; max-width: 40ch;
             text-wrap: nowrap; }
.manifest-side { border-top: 2px solid var(--ink); padding-top: 18px; }
.manifest-side p { font-size: var(--t-lede); line-height: 1.6; margin: 0 0 20px;
                   color: var(--ink-soft); }

.pill { display: inline-block; font-family: var(--mono); font-size: var(--t-label);
        font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
        text-decoration: none; padding: 11px 20px; border: 1px solid var(--ink);
        color: var(--ink); background: none; cursor: pointer;
        transition: background .2s var(--ease), color .2s var(--ease); }
.pill:hover { background: var(--ink); color: var(--paper); }
.pill:active { transform: translateY(1px); }
.entry:active { background: rgba(31, 77, 46, .09); }
.mast-nav a:active { background: var(--sand); }
.pill-fill { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.pill-fill:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* =========================================================
   PLANCHE : photographie pleine largeur, bord a bord, legende
   en bande mono. Aucun arrondi, aucune ombre.
   ========================================================= */
.plate { margin: 0; position: relative; }
/* Resserrement du manifeste et de la planche. Papier sur papier, il n y a
   pas de profondeur a simuler : la mise en page reste franchement plate,
   c est le parti pris du carnet. */
.manifest + .plate { margin-top: clamp(-30px, -2.4vw, -14px); }
.manifest { position: relative; z-index: 1; }
.plate img { display: block; width: 100%; height: clamp(280px, 46vw, 560px); object-fit: cover; }

/* =========================================================
   SIGNATURE : la regle de la maison, en citation sur papier.
   Ni bande sombre ni encadre.
   ========================================================= */
.sign { padding-top: clamp(36px, 4.4vw, 58px); padding-bottom: clamp(56px, 7vw, 94px); }
.sign-in { max-width: 46rem; }
.sign blockquote { margin: 0; font-family: var(--serif); font-weight: 400;
                   font-size: var(--t-h2); line-height: 1.34; letter-spacing: -.01em; }
.sign blockquote::before { content: '\00ab\00a0'; color: var(--accent); }
.sign blockquote::after  { content: '\00a0\00bb'; color: var(--accent); }
.sign cite { display: block; margin-top: 14px; font-style: normal;
             font-size: var(--t-body); color: var(--ink-soft); }

/* =========================================================
   REGISTRE : les articles en entrees reglees, pas en cartes.
   Numero en chiffres tabulaires, vignette carree, filet.
   ========================================================= */
.ledger { padding-top: clamp(44px, 5.5vw, 76px); padding-bottom: clamp(52px, 6.5vw, 92px);
          background: var(--wash); border-block: 1px solid var(--rule); }
.ledger-head { display: flex; align-items: baseline; justify-content: space-between;
               gap: 20px; flex-wrap: wrap; border-bottom: 2px solid var(--ink);
               padding-bottom: 12px; margin-bottom: 4px; }
.ledger-head h2 { font-size: var(--t-h2); margin: 0; letter-spacing: -.03em; }

.ledger-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               column-gap: clamp(28px, 4vw, 60px); }
.entry {
  display: grid; grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 16px; align-items: start; padding: 18px 0;
  border-bottom: 1px solid var(--rule-fine); text-decoration: none; color: inherit;
  transition: background .2s var(--ease);
}
.entry:hover { background: rgba(31, 77, 46, .05); }
.entry-art { display: block; width: 5.4rem; height: 5.4rem; background: var(--sand);
             overflow: hidden; }
.entry-art img { width: 100%; height: 100%; object-fit: cover; display: block;
                 transition: transform .5s var(--ease); }
.entry:hover .entry-art img { transform: scale(1.05); }
.entry-h { font-family: var(--sans); font-weight: 600; font-size: var(--t-h3);
           line-height: 1.24; letter-spacing: -.02em; margin: 0 0 7px; }
.entry:hover .entry-h { color: var(--accent); }
.entry-x { font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); margin: 0 0 8px; }
.entry-m { font-size: var(--t-small); color: var(--ink-soft); }

/* Premiere entree : tete d affiche sur les deux colonnes */
.entry-open { grid-column: 1 / -1; grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
              gap: clamp(18px, 3vw, 40px); padding: 26px 0 30px;
              border-bottom: 2px solid var(--ink); }
.entry-open .entry-art { width: 100%; height: clamp(190px, 24vw, 280px); }
.entry-open .entry-h { font-size: var(--t-h2); letter-spacing: -.03em; margin-bottom: 12px; }
.entry-open .entry-x { font-size: var(--t-body); }

.void { padding-top: clamp(40px, 5vw, 66px); padding-bottom: clamp(34px, 4.2vw, 54px); }
.void h2 { font-size: var(--t-h2); margin: 0 0 12px; letter-spacing: -.03em; }
.void p { color: var(--ink-soft); max-width: 46ch; margin: 0 0 24px; }

/* =========================================================
   ALMANACH : rail horizontal des douze mois, le mois courant
   marque. Famille de mise en page unique sur la page.
   ========================================================= */
.almanac { padding-top: clamp(40px, 5vw, 68px); padding-bottom: clamp(40px, 5vw, 64px); }
.almanac-head { border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 0; }
.almanac-head h2 { font-size: var(--t-h2); margin: 0; letter-spacing: -.03em; }
.almanac-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.almanac-cell {
  scroll-snap-align: start; padding: 18px 22px 20px 0; margin-right: 22px;
  border-right: 1px solid var(--rule-fine); min-height: 8rem;
}
.almanac-cell:last-child { border-right: 0; margin-right: 0; }
.almanac-m { display: block; font-family: var(--mono); font-size: var(--t-label);
             font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
             color: var(--ink-soft); margin-bottom: 10px; }
.almanac-cell p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }
.almanac-now { border-top: 3px solid var(--accent); padding-top: 17px; }
.almanac-now .almanac-m { color: var(--accent); }
.almanac-now p { color: var(--ink); }

/* =========================================================
   QUESTIONS : deux colonnes, question en sans, reponse en
   serif. Ni accordeon, ni encadre.
   ========================================================= */
.asks { background: var(--wash); border-block: 1px solid var(--rule);
        padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 94px); }
.asks h2 { font-size: var(--t-h2); margin: 0 0 4px; padding-bottom: 12px;
           border-bottom: 2px solid var(--ink); letter-spacing: -.03em; }
.ask { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
       gap: clamp(20px, 3.4vw, 52px); padding: 22px 0;
       border-bottom: 1px solid var(--rule-fine); }
.ask:last-child { border-bottom: 0; }
.ask h3 { font-size: var(--t-h3); margin: 0; line-height: 1.28; }
.ask p { margin: 0; color: var(--ink-soft); line-height: 1.66; }

/* =========================================================
   POSITION : ce que le magazine ne fait pas. Aplat plus dense
   de la meme famille, jamais un saut vers le noir.
   ========================================================= */
.stance { background: var(--sand); padding-top: clamp(52px, 6.5vw, 88px);
          padding-bottom: clamp(60px, 7.5vw, 100px); }
.stance-in { max-width: 52rem; }
.stance h2 { font-size: var(--t-h2); margin: 0 0 30px; letter-spacing: -.03em; }
.stance-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.stance-l li { font-family: var(--serif); font-size: var(--t-lede); line-height: 1.5;
               padding-left: 26px; position: relative; }
.stance-l li::before { content: ''; position: absolute; left: 0; top: .74em;
                       width: 15px; height: 2px; background: var(--accent); }

/* =========================================================
   NOTE : qui ecrit. Portrait carre, colonne mesuree.
   Ni rond, ni centrage force.
   ========================================================= */
.note { padding-top: clamp(52px, 6.5vw, 90px); padding-bottom: clamp(62px, 7.6vw, 106px); }
.note-in { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
           gap: clamp(24px, 4vw, 56px); align-items: start;
           border-top: 2px solid var(--ink); padding-top: 30px; }
.note-fig { margin: 0; }
.note-fig img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.note-name { font-size: var(--t-h2); margin: 0 0 4px; letter-spacing: -.03em; }
.note-role { margin: 0 0 20px; font-size: var(--t-body); color: var(--ink-soft); }
.note-bio { max-width: 60ch; font-size: var(--t-prose); line-height: 1.72; }
.note-bio p { margin: 0 0 .85rem; }
.note-bio ul { margin: 0 0 1rem; padding: 0; list-style: none; }
.note-bio li { padding-left: 20px; position: relative; margin-bottom: .4rem; }
.note-bio li::before { content: ''; position: absolute; left: 0; top: .78em;
                       width: 11px; height: 1px; background: var(--accent); }
.note .pill { margin-top: 8px; }

/* =========================================================
   BANDEAU DE RUBRIQUE ET D ARTICLE
   Photo en fond, voile encre, texte blanc. Angle vif.
   ========================================================= */
.cover { position: relative; overflow: hidden; background: var(--wash);
         border-bottom: 1px solid var(--rule);
         padding-top: clamp(48px, 6vw, 82px); padding-bottom: clamp(40px, 5vw, 64px); }
.cover.shot { background: var(--ink); border-bottom: 0;
              padding-top: clamp(72px, 9vw, 132px); padding-bottom: clamp(48px, 6vw, 82px); }
.cover-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cover-veil { position: absolute; inset: 0;
  background: linear-gradient(92deg, rgba(18,20,15,.86) 0%, rgba(18,20,15,.56) 58%, rgba(18,20,15,.44) 100%),
              linear-gradient(0deg, rgba(18,20,15,.56) 0%, rgba(18,20,15,.10) 74%); }
.cover .wrap { position: relative; z-index: 1; }
.cover-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
              gap: clamp(20px, 3vw, 46px); align-items: end; }
.cover h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.035em; margin: 0; }
.cover-d { font-size: var(--t-body); line-height: 1.6; color: var(--ink-soft); }
.cover-d p { margin: 0; }
.cover-d p + p { margin-top: .7rem; }
.cover.shot h1 { color: #fff; }
.cover.shot .cover-d, .cover.shot .cover-d p { color: rgba(255,255,255,.90); }
.cover.shot .tick, .cover.shot .trail, .cover.shot .trail a,
.cover.shot .trail i, .cover.shot .trail span { color: rgba(255,255,255,.84); }
.cover.shot .trail a:hover { color: #fff; }

/* Metadonnees d article : sous le titre, alignees a gauche comme le fil
   d ariane. Les etoiles de notation suivent la meme ligne de base. */
.cover-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
              margin-top: 18px; }
.cover-meta p { margin: 0; }
.cover.shot .cover-meta p { color: rgba(255,255,255,.86); }
.cover-meta .kk-star-ratings { margin: 0 !important; padding: 0 !important; }
.cover-meta .kksr-stars { margin: 0 !important; }
.cover-meta .kksr-legend { display: none; }

/* Fil d ariane */
.trail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
         font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
         letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
         margin-bottom: 16px; }
.trail a { color: inherit; text-decoration: none; }
.trail a:hover { color: var(--accent); }
.trail i { font-style: normal; opacity: .5; }

/* =========================================================
   ARTICLE
   ========================================================= */
.lede-fig { margin: clamp(32px, 4vw, 52px) 0 0; }
.lede-fig img { width: 100%; max-height: 560px; object-fit: cover; display: block; }

.read { padding-top: clamp(30px, 4vw, 48px); padding-bottom: clamp(48px, 6vw, 80px); }
/* Le corps d article fait la largeur du conteneur, sans exception :
   texte courant compris. Aucun plafond de mesure, sinon les paragraphes
   se retrouvent plus etroits que les blocs et que la photo. */
.read-in { max-width: none; }
.prose { font-size: var(--t-prose); line-height: 1.78; text-wrap: pretty; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: var(--t-h2); line-height: 1.14; letter-spacing: -.03em;
            margin-top: 2.6rem; padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.prose h3 { font-size: var(--t-h3); margin-top: 1.9rem; }
.prose a { text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .35rem; }
.prose img { display: block; }
.prose blockquote { margin: 1.8rem 0; padding-left: 20px; border-left: 2px solid var(--accent);
                    font-size: var(--t-lede); line-height: 1.55; color: var(--ink-soft); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.prose th, .prose td { border: 1px solid var(--rule); padding: 9px 12px; text-align: left; }
.prose th { background: var(--wash); font-family: var(--sans); font-weight: 600; }

/* Bloc « À lire aussi » : filet et retrait, jamais d encadre */
.alire { display: block; margin: 1.9rem 0; padding: 12px 0 12px 18px;
         border-left: 2px solid var(--accent); }
.alire-k { display: block; font-family: var(--mono); font-size: var(--t-micro);
           font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
           color: var(--accent); margin-bottom: 5px; }
.alire-l { font-family: var(--sans); font-weight: 600; font-size: var(--t-body);
           line-height: 1.32; color: var(--ink); text-decoration: none; }
.alire-l:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Suite d articles */
.after { background: var(--wash); border-top: 1px solid var(--rule);
         padding-top: clamp(44px, 5.5vw, 76px); padding-bottom: clamp(44px, 5.5vw, 76px); }
.after h2 { font-size: var(--t-h2); margin: 0 0 4px; padding-bottom: 12px;
            border-bottom: 2px solid var(--ink); letter-spacing: -.03em; }

/* =========================================================
   BLOC SEO DE BAS DE RUBRIQUE
   ========================================================= */
.seo-row { border-top: 1px solid var(--rule);
           padding-top: clamp(48px, 6vw, 78px); padding-bottom: clamp(48px, 6vw, 78px); }
.seo-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
          gap: clamp(28px, 4vw, 60px); align-items: start; }
.seo-solo .seo-in { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
.seo-in h2 { font-size: var(--t-h2); letter-spacing: -.03em; margin: 0 0 14px; }
.seo-in > div > p { color: var(--ink-soft); }
.seo-list, .seo-steps { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 11px; }
.seo-list li { padding-left: 24px; position: relative; }
.seo-list li::before { content: ''; position: absolute; left: 0; top: .82em;
                       width: 13px; height: 1px; background: var(--accent); }
.seo-steps { counter-reset: s; }
.seo-steps li { counter-increment: s; padding-left: 38px; position: relative; }
.seo-steps li::before { content: counter(s, decimal-leading-zero); position: absolute;
                        left: 0; top: .12em; font-family: var(--mono);
                        font-size: var(--t-label); font-weight: 500; color: var(--accent); }
.seo-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* =========================================================
   PAGES STATIQUES
   ========================================================= */
.sheet { padding-top: clamp(40px, 5vw, 66px); padding-bottom: clamp(52px, 6.5vw, 90px); }
.sheet-in { max-width: 44rem; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
       gap: clamp(30px, 4.5vw, 66px); align-items: start; }
.duo h2 { font-size: var(--t-h2); margin: 0 0 14px; letter-spacing: -.03em; }
.duo p { color: var(--ink-soft); }

.coord { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 11px; }
.coord li { display: flex; align-items: center; gap: 10px; }
.coord-i { display: inline-flex; color: var(--accent); }

.map-cat { border-top: 2px solid var(--ink); padding-top: 16px; margin-top: 34px; }
.map-cat h2 { font-size: var(--t-h3); margin: 0 0 10px; }
.map-cat ul { list-style: none; padding: 0; margin: 0; }
.map-cat li { border-bottom: 1px solid var(--rule-fine); }
.map-cat a { display: block; padding: 9px 0; text-decoration: none; color: var(--ink); }
.map-cat a:hover { color: var(--accent); }

/* Formulaire */
.wpcf7-form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.wpcf7-form br { display: none; }
.wpcf7-form input, .wpcf7-form textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--paper); font-family: var(--serif); font-size: var(--t-body); color: var(--ink);
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
/* Un submit est un input : il faut le requalifier pour ne pas heriter du champ */
.wpcf7-form input.wpcf7-submit {
  width: 100%; background: var(--accent); border: 1px solid var(--accent); color: var(--paper);
  font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; padding: 14px 20px; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--ink); border-color: var(--ink); }

/* =========================================================
   PIED DE PAGE : deux bandes, pas quatre colonnes
   ========================================================= */
.foot { background: var(--ink); color: var(--paper); padding-top: clamp(46px, 5.5vw, 74px); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
            gap: clamp(24px, 4vw, 60px); align-items: start;
            padding-bottom: clamp(34px, 4vw, 50px); }
.foot-title { display: inline-flex; align-items: center; gap: 11px; color: var(--paper);
              text-decoration: none; margin-bottom: 14px; }
.foot-title svg { width: 24px; height: 24px; }
.foot-title b { font-family: var(--sans); font-weight: 700; font-size: 1.2rem;
                letter-spacing: -.035em; }
.foot-top p { margin: 0; color: rgba(251,251,249,.72); max-width: 42ch; font-size: var(--t-body); }
.foot-recent { list-style: none; padding: 0; margin: 0; }
.foot-recent li { border-bottom: 1px solid rgba(251,251,249,.16); }
.foot-recent li:first-child { border-top: 1px solid rgba(251,251,249,.16); }
.foot-recent a { display: block; padding: 10px 0; color: var(--paper); text-decoration: none;
                 font-family: var(--sans); font-weight: 500; font-size: var(--t-small);
                 line-height: 1.34; }
.foot-recent a:hover { color: var(--accent-lit); }
.foot-recent .tick { display: block; margin-bottom: 10px; color: rgba(251,251,249,.55); }

.foot-bar { display: flex; align-items: center; justify-content: space-between;
            gap: 18px; flex-wrap: wrap; border-top: 1px solid rgba(251,251,249,.16);
            padding: 16px 0 22px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a, .foot-copy { font-size: var(--t-small);
                            color: rgba(251,251,249,.68); text-decoration: none; }
.foot-links a:hover { color: var(--paper); }

/* =========================================================
   MOUVEMENT : MOTION 3, sobre et motive par la lecture
   ========================================================= */
[data-set] { opacity: 0; transform: translateY(12px); }
[data-set].on { opacity: 1; transform: none;
                transition: opacity .55s var(--ease), transform .55s var(--ease); }
/* Entree en cascade : les elements ne montent jamais tous d un coup. */
[data-set][data-set-delay="1"].on { transition-delay: .08s; }
[data-set][data-set-delay="2"].on { transition-delay: .16s; }
[data-set][data-set-delay="3"].on { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-set], [data-set].on { opacity: 1; transform: none; transition: none; }
  .entry-art img { transition: none; }
}

/* =========================================================
   EFFONDREMENT, declare explicitement
   ========================================================= */
@media (max-width: 1000px) {
  /* En dessous, la ligne ne tient plus : on rend le retour a la ligne. */
  .poster em { text-wrap: balance; max-width: 24ch; }
  .manifest-in { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .manifest-side { max-width: 34rem; }
  .ledger-list { grid-template-columns: minmax(0, 1fr); }
  .entry-open { grid-template-columns: minmax(0, 1fr); }
  .entry-open .entry-art { grid-column: 1 / -1; height: clamp(200px, 40vw, 300px); }
  .cover-grid { grid-template-columns: minmax(0, 1fr); }
  .seo-in { grid-template-columns: minmax(0, 1fr); }
  .seo-img { max-width: 22rem; }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .note-in { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
}

/* =========================================================
   PICTOGRAMMES DES BLOCS D ARTICLE GENERES
   La CSS de ces blocs arrive en ligne, donc apres la feuille du
   theme. On qualifie par le conteneur de contenu, ce qui remonte
   la specificite sans !important. Les icones sont des masques :
   elles heritent de l accent du site.
   Cinq pictogrammes au total, controles par garde-design.sh.
   ========================================================= */
/* La coche livree par la chaine est dessinee en 6x3 px avec les bords
   gauche et bas : elle donne un trait informe. Geometrie correcte. */
.prose [class$="-key"] li::before, .prose [class$="-key"] li::before {
  width: 20px; height: 20px; top: 50%; margin-top: -10px; border-radius: 50%;
  background: var(--accent); opacity: .14;
}
.prose [class$="-key"] li::after, .prose [class$="-key"] li::after {
  content: ''; position: absolute; left: 6.5px; top: 50%; margin-top: -5px;
  width: 5px; height: 9px; border: 0;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
/* Le bouclier du badge : la version recente de la chaine l a perdu,
   alors que sa CSS reserve toujours le gap de 6 px. */
.prose [class$="-badge"]::before, .prose [class$="-badge"]::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Ligne de pied : aucun pictogramme n est prevu par la chaine. */
.prose [class$="-foot"], .prose [class$="-foot"] { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.prose [class$="-foot"] span, .prose [class$="-foot"] span { position: relative; padding-left: 21px; display: inline-flex; align-items: center; }
.prose [class$="-foot"] span::before, .prose [class$="-foot"] span::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; background: var(--accent); opacity: .9;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.prose [class$="-foot"] span:nth-child(1)::before, .prose [class$="-foot"] span:nth-child(1)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E"); }
.prose [class$="-foot"] span:nth-child(2)::before, .prose [class$="-foot"] span:nth-child(2)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E"); }
.prose [class$="-foot"] span:nth-child(3)::before, .prose [class$="-foot"] span:nth-child(3)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E"); }

@media (max-width: 720px) {
  .ask { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .almanac-rail { grid-auto-columns: minmax(11.5rem, 1fr); }
  .mast-burger { display: block; }
  .mast-nav {
    position: fixed; inset: 0; z-index: 200; background: var(--paper);
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    padding: 74px 0 0; border-top: 0;
    transform: translateX(100%); transition: transform .3s var(--ease);
    overflow-y: auto;
  }
  body.nav-on .mast-nav { transform: none; }
  .mast-nav a {
    border-left: 0; border-bottom: 1px solid var(--rule-fine);
    padding: 17px var(--gut); font-size: .84rem; color: var(--ink) !important;
  }
  .mast-nav a:last-child { border-right: 0; }
  .mast-shut { display: block; position: absolute; top: 16px; right: var(--gut);
               background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
  .mast-shut svg { width: 22px; height: 22px; stroke: currentColor; }

  .entry { grid-template-columns: 4.4rem minmax(0, 1fr); gap: 14px; }
    .entry-art { width: 4.4rem; height: 4.4rem; }
  .entry-open { grid-template-columns: minmax(0, 1fr); }
  .entry-open .entry-art { height: clamp(180px, 52vw, 260px); }
  .note-in { grid-template-columns: minmax(0, 1fr); }
  .note-fig { max-width: 13rem; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .foot-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}