/* ==========================================================================
   LE JEUNE PAYSAN, Michaël Zoicas
   Identité « Terre cuite ». Caelestis, 10/08/2026.

   Sable, brun profond, terre cuite, olive. Author (display) + Satoshi (texte),
   auto-hébergées. Le bandeau de preuves est collé sous la navigation et reste
   visible au défilement. Le guide est vendu dès le premier écran, dans un
   carrousel qui donne accès aux trois.
   ========================================================================== */

/* ----------------------------------------------------- Polices locales -- */
/* Auto-hébergées : supprime une connexion tierce sur le chemin critique.
   Seules les trois graisses réellement utilisées sont servies. */

@font-face {
  font-family: "Author";
  src: url("polices/author-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("polices/satoshi-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("polices/satoshi-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --sable: #F2EDE4;
  --sable-clair: #FAF7F1;
  --sable-tiers: #E7E0D3;
  --brun: #332A22;
  --brun-doux: #5A4E42;
  --cuite: #B85C38;
  --cuite-sombre: #944526;
  --olive: #5F6A43;

  --filet: rgba(51, 42, 34, .16);
  --filet-fin: rgba(51, 42, 34, .09);

  --display: "Author", "Iowan Old Style", Georgia, serif;
  --texte: "Satoshi", "Segoe UI", system-ui, sans-serif;

  /* Les espaces autour du + sont obligatoires : sans eux la valeur est
     invalide et le padding tombe silencieusement à zéro. */
  --air-court: clamp(44px, 3vw + 20px, 74px);
  --air: clamp(72px, 5vw + 30px, 126px);

  --marge: clamp(20px, 3.4vw, 52px);
  --largeur: 1400px;
  --rayon: 6px;
}

/* ---------------------------------------------------------------- Socle -- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 116px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sable);
  color: var(--brun);
  font-family: var(--texte);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 .95em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--cuite); color: #fff; }
:focus-visible { outline: 2px solid var(--cuite-sombre); outline-offset: 3px; }

.saut {
  position: absolute; left: -9999px; z-index: 300;
  background: var(--brun); color: var(--sable); padding: 13px 22px; font-weight: 700;
}
.saut:focus { left: 16px; top: 16px; }

.env { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge); }

/* ----------------------------------------------- Éléments transverses -- */

.sur {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--olive); font-weight: 700; margin: 0 0 16px;
}
.sur::before { content: ""; width: 24px; height: 2px; background: var(--cuite); flex: none; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px;
  background: var(--cuite); color: #fff;
  font-family: var(--texte); font-size: 14px; font-weight: 700;
  text-decoration: none; border: 1px solid var(--cuite); border-radius: 4px; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.bouton:hover { background: var(--cuite-sombre); border-color: var(--cuite-sombre); }
.bouton.creux { background: transparent; color: var(--brun); border-color: var(--filet); }
.bouton.creux:hover { background: var(--brun); color: var(--sable); border-color: var(--brun); }
.sur-brun .bouton { background: var(--sable); color: var(--brun); border-color: var(--sable); }
.sur-brun .bouton:hover { background: var(--cuite); border-color: var(--cuite); color: #fff; }
.sur-brun .bouton.creux { background: transparent; color: var(--sable); border-color: rgba(242, 237, 228, .4); }
.sur-brun .bouton.creux:hover { background: var(--sable); color: var(--brun); border-color: var(--sable); }

.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13.5px; font-weight: 700; color: var(--cuite-sombre); text-decoration: none;
}
.lien-fleche:hover { color: var(--brun); }

/* Fiche : seule forme où plusieurs chiffres cohabitent, chacun avec son libellé */
.fiche { margin: 0; border-top: 1px solid var(--filet); }
.fiche > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--filet-fin);
}
.fiche dt { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--brun-doux); white-space: nowrap; }
.fiche dd { margin: 0; font-size: 14.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.fiche dd b { color: var(--cuite-sombre); }

/* ------------------------------- 1. En-tête et bandeau, collés au haut -- */

.haut { position: sticky; top: 0; z-index: 100; }

.entete { background: var(--sable); border-bottom: 1px solid var(--filet); }
.entete .env { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; }

.marque {
  display: flex; align-items: center; min-height: 44px;
  font-family: var(--display); font-size: 20px; font-weight: 700;
  letter-spacing: -.02em; text-decoration: none; color: var(--brun); white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); }
.nav a {
  display: flex; align-items: center; min-height: 44px;
  font-size: 13.5px; text-decoration: none; color: var(--brun-doux);
  transition: color .2s ease;
}
.nav a:hover { color: var(--cuite-sombre); }
.entete .bouton { min-height: 42px; padding: 0 20px; font-size: 13px; }

.bascule {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--filet); border-radius: 4px;
  cursor: pointer; color: var(--brun);
}

/* Bandeau de preuves : réparti sur toute la largeur, aucun séparateur
   décoratif, chaque nombre accompagné de son libellé. */
.bandeau { background: var(--brun); color: var(--sable); }
.bandeau .env {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px clamp(18px, 2.4vw, 40px); padding-block: 10px; font-size: 12.5px;
}
.bandeau span { display: flex; align-items: baseline; gap: 6px; color: rgba(242, 237, 228, .76); }
.bandeau b { font-weight: 700; color: var(--sable); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ 2. Hero -- */

.hero { padding-block: clamp(24px, 3vw, 44px) clamp(26px, 3vw, 46px); }
.hero-grille {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.hero h1 { font-size: clamp(34px, 3.9vw, 58px); max-width: 19ch; }
.hero h1 .accent { color: var(--cuite-sombre); }
.hero .accroche { font-size: clamp(16px, 1.15vw, 18px); color: var(--brun-doux); max-width: 52ch; margin: 16px 0 22px; }

.renvoi {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--filet);
  font-size: 14.5px; color: var(--brun-doux); max-width: 54ch;
}
.renvoi a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--cuite-sombre); font-weight: 700; text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--cuite-sombre); margin-left: 4px;
  transition: box-shadow .25s ease;
}
.renvoi a:hover { box-shadow: inset 0 -2px 0 var(--cuite-sombre); }

/* Le même renvoi sur fond brun, dans le portrait */
.sur-brun .renvoi { border-top-color: rgba(242, 237, 228, .28); color: rgba(242, 237, 228, .8); }
.sur-brun .renvoi a { color: #E8A07C; box-shadow: inset 0 -1px 0 #E8A07C; }
.sur-brun .renvoi a:hover { box-shadow: inset 0 -2px 0 #E8A07C; }

/* Carrousel des trois guides, dans le premier écran */
.offre { background: var(--sable-clair); border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(18px, 1.9vw, 26px); }
.offre-piste {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: clamp(18px, 1.9vw, 26px); scrollbar-width: none; -ms-overflow-style: none;
}
.offre-piste::-webkit-scrollbar { display: none; }
.guide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.guide-haut { display: flex; gap: clamp(14px, 1.5vw, 20px); align-items: center; margin-bottom: 16px; }
/* Largeur fixe sur l'image : en grille, le <picture> en display:contents fausse
   le calcul de piste et la couverture se dimensionne sur ses 1200px natifs. */
.guide-haut img { width: 104px; flex: none; height: auto; box-shadow: 0 10px 22px rgba(51, 42, 34, .22); }
.guide-etiquette {
  display: inline-flex; background: var(--olive); color: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 10px;
}
.guide h2 { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; margin-bottom: 7px; }
.guide .quoi { font-size: 13.5px; color: var(--brun-doux); margin: 0; line-height: 1.4; }
.guide ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.guide li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.4; }
.guide li svg { color: var(--cuite); margin-top: 3px; }
.guide-bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; border-top: 1px solid var(--filet); padding-top: 16px;
}
.guide-prix { display: flex; align-items: baseline; gap: 8px; }
.guide-prix b { font-family: var(--display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; }
.guide-prix span { font-size: 12.5px; color: var(--brun-doux); }

.offre-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--filet);
}
.offre-nav .ou { font-size: 13px; color: var(--brun-doux); }
.offre-nav .ou b { font-variant-numeric: tabular-nums; color: var(--brun); font-weight: 700; }
.offre-fleches { display: flex; gap: 8px; }
.fleche {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filet);
  background: transparent; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--brun);
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.fleche:hover { background: var(--cuite); border-color: var(--cuite); color: #fff; }
.fleche[disabled] { opacity: .32; cursor: default; }
.fleche[disabled]:hover { background: transparent; border-color: var(--filet); color: var(--brun); }

/* ------------------------------------------------------- 3. L'accroche -- */

.appel { background: var(--sable-clair); border-block: 1px solid var(--filet); padding-block: var(--air); }
.appel-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 4vw, 70px); align-items: start; }
.appel h2 { font-size: clamp(27px, 3.2vw, 44px); }
.appel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.appel-liste li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start;
  background: var(--sable); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 16px 18px; font-size: clamp(15.5px, 1.15vw, 17.5px);
}
.appel-liste .num {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cuite-sombre); color: #fff;
  font-size: 12px; font-weight: 700; font-family: var(--display);
}
.appel-note { margin-top: 20px; color: var(--brun-doux); font-size: 15px; max-width: 60ch; }

/* La liste des trois envies mène aux guides, qui y répondent. */
.appel-suite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 22px; margin-top: clamp(16px, 1.8vw, 24px);
  border-top: 1px solid var(--filet); padding-top: clamp(16px, 1.8vw, 24px);
}
.appel-suite p { margin: 0; font-size: 15.5px; color: var(--brun-doux); max-width: 46ch; }

/* --------------------------------------------------- 4. Les reportages -- */

.section-tete {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(20px, 3vw, 52px); align-items: end; margin-bottom: clamp(26px, 3vw, 42px);
}
.section-tete h2 { font-size: clamp(28px, 3.4vw, 48px); }
.section-tete p { margin: 0; color: var(--brun-doux); font-size: 15px; max-width: 42ch; }
.sur-brun .section-tete p { color: rgba(242, 237, 228, .76); }

.reportages { padding-block: var(--air); }

/* Lecteur différé : la miniature, l'iframe seulement au clic */
.lecteur {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; background: var(--sable-tiers);
}
.lecteur img {
  width: 100%; height: 100%;
  object-fit: fill; /* miniatures nativement 16/9 : ni rognage ni déformation */
  filter: saturate(.76) contrast(1.03);
  transition: filter .4s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}
.lecteur:hover img, .lecteur:focus-visible img { filter: none; transform: scale(1.035); }
.lecteur iframe { width: 100%; height: 100%; border: 0; display: block; }
.play {
  position: absolute; right: 12px; bottom: 12px;
  width: 44px; height: 44px; border-radius: 50%; background: var(--sable);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, transform .3s ease; pointer-events: none;
}
.play svg { fill: var(--cuite-sombre); margin-left: 3px; }
.lecteur:hover .play { background: var(--cuite); transform: scale(1.08); }
.lecteur:hover .play svg { fill: #fff; }

.carte-reportage {
  display: flex; flex-direction: column;
  background: var(--sable-clair); border: 1px solid var(--filet);
  border-radius: var(--rayon); overflow: hidden;
}
.carte-reportage .texte { padding: clamp(16px, 1.6vw, 22px); display: flex; flex-direction: column; flex: 1; }
.carte-reportage h3 { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.22; margin-bottom: 12px; }
.carte-reportage .fiche { margin-top: auto; }

.reportage-phare {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3vw, 48px); align-items: center;
  background: var(--sable-clair); border: 1px solid var(--filet); border-radius: var(--rayon);
  overflow: hidden; margin-bottom: clamp(22px, 2.6vw, 36px);
}
.reportage-phare .texte { padding: clamp(20px, 2.4vw, 40px) clamp(20px, 2.4vw, 40px) clamp(20px, 2.4vw, 40px) 0; }
.reportage-phare h3 { font-size: clamp(23px, 2.3vw, 34px); margin-bottom: 14px; }
.reportage-phare p { color: var(--brun-doux); font-size: 15.5px; margin-bottom: 18px; }

/* Quatre reportages sur une seule ligne, jamais de seconde rangée dépareillée */
.grille-reportages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); }

.reportages-pied {
  margin-top: clamp(26px, 3vw, 44px); padding-top: 22px; border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.reportages-pied p { margin: 0; color: var(--brun-doux); font-size: 14.5px; max-width: 58ch; }

/* ------------------------------------------------------ 5. Le portrait -- */

.portrait { background: var(--brun); color: var(--sable); padding-block: var(--air); }
.portrait-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 76px); align-items: center; }
.portrait h2 { font-size: clamp(28px, 3.4vw, 50px); margin-bottom: 22px; }
.portrait-texte { font-size: clamp(16px, 1.15vw, 18px); color: rgba(242, 237, 228, .84); max-width: 56ch; }
.portrait-image { margin: 0; border-radius: var(--rayon); overflow: hidden; }
.portrait .fiche { border-top-color: rgba(242, 237, 228, .32); margin-top: 26px; max-width: 560px; }
.portrait .fiche > div { border-bottom-color: rgba(242, 237, 228, .18); }
.portrait .fiche dt { color: rgba(242, 237, 228, .64); }
.portrait .fiche dd b { color: #E8A07C; }
.portrait .sur { color: #E8A07C; }

/* Mise en valeur de sa légitimité, avant de vendre quoi que ce soit */
.distinction {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 30px); align-items: center;
  background: rgba(242, 237, 228, .07); border: 1px solid rgba(242, 237, 228, .22);
  border-radius: var(--rayon); padding: clamp(18px, 2vw, 26px); margin-bottom: 26px;
}
.distinction-sceau {
  width: clamp(58px, 5vw, 74px); height: clamp(58px, 5vw, 74px); flex: none;
  border-radius: 50%; border: 2px solid #E8A07C;
  display: flex; align-items: center; justify-content: center;
}
.distinction-sceau svg { color: #E8A07C; }
.distinction b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; margin-bottom: 5px; }
.distinction span { font-size: 14.5px; color: rgba(242, 237, 228, .78); }

/* ------------------------------------------------------ 6. Les messages -- */

.messages { padding-block: var(--air); }
.grille-messages { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(18px, 2.2vw, 34px); }
.message {
  margin: 0; background: var(--sable-clair); border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: clamp(20px, 2vw, 28px);
}
.message blockquote {
  margin: 0 0 14px; font-family: var(--display); font-weight: 700;
  font-size: clamp(16.5px, 1.35vw, 19.5px); line-height: 1.3; letter-spacing: -.015em;
}
.message figcaption { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brun-doux); }

/* -------------------------------------------------------- 7. Les guides -- */

.guides { background: var(--sable-clair); border-block: 1px solid var(--filet); padding-block: var(--air); }
.trois { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: clamp(18px, 2.2vw, 34px); }

.guide-phare {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(24px, 3.4vw, 60px); align-items: center;
  background: var(--sable); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: clamp(22px, 2.6vw, 42px); margin-bottom: clamp(22px, 2.6vw, 38px);
}
.guide-phare-visuel { display: flex; justify-content: center; align-items: center; background: var(--sable-tiers); border-radius: 5px; padding: clamp(20px, 2.4vw, 36px); }
/* Couverture affichée entière, jamais rognée */
.guide-phare-visuel img { width: auto; max-width: 100%; max-height: 400px; height: auto; box-shadow: 0 16px 34px rgba(51, 42, 34, .22); }
.etiquette-phare {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cuite-sombre); color: #fff; border-radius: 999px; padding: 6px 14px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px;
}
.guide-phare h3 { font-size: clamp(23px, 2.5vw, 36px); margin-bottom: 14px; }
.guide-phare .promesse { font-size: clamp(16px, 1.2vw, 18px); color: var(--brun-doux); margin-bottom: 22px; max-width: 52ch; }

.dedans { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.dedans li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15.5px; }
.dedans svg { color: var(--cuite); margin-top: 4px; }

.guide-phare-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; border-top: 1px solid var(--filet); padding-top: 20px; }
.prix-bloc { display: flex; align-items: baseline; gap: 10px; }
.prix-bloc .prix { font-family: var(--display); font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; }
.prix-bloc .format { font-size: 13px; color: var(--brun-doux); }

.livre { display: flex; flex-direction: column; background: var(--sable); border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(18px, 1.8vw, 26px); }
.livre-visuel { display: flex; justify-content: center; align-items: flex-end; background: var(--sable-tiers); border-radius: 5px; padding: clamp(16px, 1.8vw, 26px); margin-bottom: 18px; }
.livre-visuel img { width: auto; max-width: 100%; max-height: 268px; height: auto; box-shadow: 0 10px 24px rgba(51, 42, 34, .18); transition: transform .45s cubic-bezier(.2, .7, .3, 1); }
.livre:hover .livre-visuel img { transform: translateY(-6px); }
.livre h3 { font-size: 19px; margin-bottom: 10px; }
.promesse-courte { font-size: 14.5px; color: var(--brun-doux); margin-bottom: 16px; }
.livre .fiche { margin-bottom: 18px; }
.livre-bas { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--filet); padding-top: 16px; }
.livre-prix { font-family: var(--display); font-size: 23px; font-weight: 700; white-space: nowrap; }

.reassurance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(22px, 2.6vw, 38px);
  border-top: 1px solid var(--filet); padding-top: clamp(20px, 2.4vw, 32px);
}
.reassurance div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.reassurance svg { color: var(--cuite-sombre); margin-top: 3px; }
.reassurance b { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.reassurance span { font-size: 13.5px; color: var(--brun-doux); line-height: 1.4; }

/* Par où commencer : trois situations, trois guides */
.orientation { background: var(--sable); border: 1px solid var(--filet); border-radius: var(--rayon); padding: clamp(22px, 2.6vw, 40px); margin-top: clamp(24px, 3vw, 42px); }
.orientation h3 { font-size: clamp(20px, 2vw, 28px); margin-bottom: 8px; }
.orientation > p { color: var(--brun-doux); margin-bottom: clamp(20px, 2.4vw, 30px); max-width: 56ch; }
.chemins { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.chemin {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--sable-clair); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: clamp(16px, 1.8vw, 24px); text-decoration: none; color: inherit;
  transition: border-color .25s ease, transform .35s cubic-bezier(.2, .7, .3, 1);
}
.chemin:hover { border-color: var(--cuite); transform: translateY(-3px); }
.chemin .situation { font-family: var(--display); font-weight: 700; font-size: 16.5px; line-height: 1.25; }
.chemin .vers { font-size: 13.5px; color: var(--brun-doux); }
.chemin .aller { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--cuite-sombre); }

/* Renvoi de fin de section vers les guides */
.pont {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px; margin-top: clamp(24px, 3vw, 40px);
  background: var(--sable); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: clamp(16px, 1.8vw, 26px) clamp(18px, 2vw, 30px);
}
.pont p { margin: 0; font-size: 15.5px; max-width: 62ch; }

/* ------------------------------------------------------- 8. Les questions -- */

.questions { padding-block: var(--air); }
.questions-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3.4vw, 64px); align-items: start; }
.questions h2 { font-size: clamp(26px, 3.2vw, 44px); }
.questions-intro { color: var(--brun-doux); margin-top: 16px; max-width: 34ch; }
.question { border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--sable-clair); margin-bottom: 12px; overflow: hidden; }
.question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px clamp(16px, 1.8vw, 24px); min-height: 56px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.3vw, 18.5px); list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--cuite-sombre); border-bottom: 2px solid var(--cuite-sombre);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s ease;
}
.question[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.question summary:hover { color: var(--cuite-sombre); }
.question .reponse { padding: 0 clamp(16px, 1.8vw, 24px) 18px; color: var(--brun-doux); font-size: 15.5px; }

/* ------------------------------------------------------ 9. L'abonnement -- */

.abonnement { padding-block: var(--air); }
.abonnement-bloc {
  background: var(--brun); color: var(--sable); border-radius: var(--rayon);
  padding: clamp(24px, 3.4vw, 58px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(24px, 3.4vw, 64px); align-items: center;
}
.abonnement h2 { font-size: clamp(25px, 3vw, 42px); margin-bottom: 16px; }
.abonnement p { color: rgba(242, 237, 228, .8); max-width: 44ch; }
.abonnement .sur { color: #E8A07C; }
.formulaire-abo { display: flex; flex-wrap: wrap; gap: 12px; }
.formulaire-abo label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.formulaire-abo input {
  flex: 1 1 240px; min-height: 52px; padding: 0 20px;
  background: transparent; border: 1px solid rgba(242, 237, 228, .4); border-radius: 4px;
  color: var(--sable); font-family: var(--texte); font-size: 16px;
}
.formulaire-abo input::placeholder { color: rgba(242, 237, 228, .55); }
.formulaire-abo input:focus { border-color: var(--sable); outline: none; }
.abo-mention { margin-top: 14px; font-size: 13px; color: rgba(242, 237, 228, .64); }

/* --------------------------------------------------------- 10. À lire -- */

.lire { background: var(--sable-clair); border-block: 1px solid var(--filet); padding-block: var(--air); }
.index { border-top: 1px solid var(--filet); }
.ligne-article {
  display: grid; grid-template-columns: 124px minmax(0, 1fr) auto;
  gap: clamp(14px, 2.6vw, 40px); align-items: baseline;
  padding: clamp(15px, 1.8vw, 24px) 0; border-bottom: 1px solid var(--filet);
  text-decoration: none; color: inherit;
  transition: padding-left .35s cubic-bezier(.2, .7, .3, 1);
}
.ligne-article:hover { padding-left: 12px; }
.ligne-article .date { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brun-doux); white-space: nowrap; }
.ligne-article .titre {
  font-family: var(--display); font-size: clamp(18px, 1.75vw, 25px); font-weight: 700;
  line-height: 1.16; letter-spacing: -.018em; transition: color .25s ease;
}
.ligne-article:hover .titre { color: var(--cuite-sombre); }
.ligne-article .duree { font-size: 12.5px; color: var(--brun-doux); white-space: nowrap; }

/* Extrait d'article : ses articles sont sourcés et chiffrés, c'est son
   meilleur registre et il ne le montre nulle part. */
.extrait {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(22px, 3vw, 52px); align-items: center;
  background: var(--sable); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: clamp(20px, 2.4vw, 34px); margin-bottom: clamp(24px, 3vw, 40px);
}
.extrait h3 { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.22; margin-bottom: 10px; }
.extrait > div > p { color: var(--brun-doux); font-size: 15px; margin: 0; }
.extrait-chiffres { margin: 0; display: grid; gap: 10px; }
.extrait-chiffres > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  border-bottom: 1px solid var(--filet-fin); padding-bottom: 9px;
}
.extrait-chiffres > div:last-child { border-bottom: 0; padding-bottom: 0; }
.extrait-chiffres dt { font-size: 14.5px; color: var(--brun-doux); min-width: 0; }
/* Pas de white-space: nowrap : sur mobile, une valeur comme « 4 000 à 6 000 m² »
   ne peut alors plus se réduire et pousse la fiche hors de l'écran. */
.extrait-chiffres dd { margin: 0; min-width: 0; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.5vw, 21px); font-variant-numeric: tabular-nums; text-align: right; }
.extrait-source { margin-top: 14px; font-size: 12.5px; color: var(--brun-doux); }

/* --------------------------------------------------------- 11. Contact -- */

.contact { padding-block: var(--air); }
.contact-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 76px); }
.contact h2 { font-size: clamp(28px, 3.4vw, 48px); margin-bottom: 18px; }
.contact-intro { color: var(--brun-doux); max-width: 44ch; margin-bottom: 26px; }
.contact-liens { list-style: none; padding: 0; margin: 0; }
.contact-liens li { border-top: 1px solid var(--filet); }
.contact-liens li:last-child { border-bottom: 1px solid var(--filet); }
.contact-liens a { display: flex; align-items: center; gap: 14px; min-height: 52px; text-decoration: none; font-size: 15.5px; transition: color .25s ease; }
.contact-liens a:hover { color: var(--cuite-sombre); }
.contact-liens svg { flex: none; color: var(--cuite-sombre); }

.formulaire { display: grid; gap: 16px; }
.champ { display: grid; gap: 7px; }
.champ label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brun-doux); }
.champ input, .champ textarea {
  width: 100%; min-height: 52px; padding: 14px 17px;
  background: var(--sable-clair); border: 1px solid var(--filet); border-radius: 4px;
  color: var(--brun); font-family: var(--texte); font-size: 16px;
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ textarea:focus { border-color: var(--cuite-sombre); outline: none; }
.message-formulaire { padding: 13px 17px; border: 1px solid var(--cuite-sombre); border-radius: 4px; color: var(--cuite-sombre); font-size: 14.5px; background: var(--sable-clair); }
.sur-brun .message-formulaire { border-color: var(--sable); color: var(--sable); background: transparent; }
.message-formulaire[hidden] { display: none; }

/* ------------------------------------------------------------ 12. Pied -- */

.pied { background: var(--brun); color: var(--sable); padding-block: var(--air-court) 24px; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 4vw, 70px); padding-bottom: var(--air-court); }
.pied-nom { font-family: var(--display); font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; }
.pied-grille > div > p { color: rgba(242, 237, 228, .72); max-width: 40ch; }
.pied-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 26px; }
.pied-colonnes h3 { font-family: var(--texte); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: rgba(242, 237, 228, .62); font-weight: 700; margin-bottom: 10px; }
.pied-colonnes ul { list-style: none; padding: 0; margin: 0; }
.pied-colonnes a { display: flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; color: rgba(242, 237, 228, .88); transition: color .2s ease; }
.pied-colonnes a:hover { color: #E8A07C; }
.pied-bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  padding-top: 20px; border-top: 1px solid rgba(242, 237, 228, .18);
  font-size: 12.5px; color: rgba(242, 237, 228, .64);
}

/* ------------------------------------------------ Révélation au scroll -- */
/* Translation seule : un bloc de texte posé à opacity 0 est compté illisible
   par les outils d'audit tant qu'il n'est pas entré dans l'écran. */

.js .rev { transform: translateY(20px); }
.js .rev.vu { transform: none; transition: transform .75s cubic-bezier(.2, .7, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  .js .rev { transform: none; }
  .lecteur img, .ligne-article, .livre-visuel img, .chemin { transition: none; }
}

/* -------------------------------------------------------------- Adaptatif -- */

@media (max-width: 1060px) {
  .hero-grille, .appel-grille, .section-tete, .reportage-phare, .guide-phare,
  .portrait-grille, .questions-grille, .abonnement-bloc, .contact-grille, .pied-grille {
    grid-template-columns: minmax(0, 1fr);
  }
  .portrait-image { order: -1; max-width: 520px; }
  .reportage-phare .texte { padding: 0 clamp(18px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px); }
  .section-tete { gap: 16px; }
  .grille-reportages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .extrait { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .grille-reportages { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .nav.ouvert {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--sable); border-bottom: 1px solid var(--filet);
    padding: 8px var(--marge) 16px; z-index: 110;
  }
  .nav.ouvert a { min-height: 48px; border-bottom: 1px solid var(--filet-fin); font-size: 15px; }
  .bascule { display: flex; }
  .entete .bouton { display: none; }
  .entete .env { position: relative; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .bandeau .env { justify-content: flex-start; gap: 5px 18px; font-size: 12px; }
  .ligne-article { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .ligne-article .duree { display: none; }
  .fiche > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .fiche dd { text-align: left; }
  .actions .bouton, .livre-bas .bouton, .formulaire-abo .bouton, .guide-bas .bouton { width: 100%; }
  .livre-bas, .guide-bas { flex-direction: column; align-items: stretch; }
  .extrait-chiffres > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .extrait-chiffres dd { text-align: left; }
}

@media print {
  .haut, .play, .formulaire, .formulaire-abo, .offre-nav { display: none; }
  body { background: #fff; color: #000; }
}