/* ============================================================
   Nouvelle home (fr/index.html + en/index.html) : 7 blocs.
   home.css fournit nav, footer, titres de section, fac-simile ep-*,
   et les motifs communs .d-rail (palier 1000px), .d-ligne-tableau et
   .d-chiffre. Cette feuille porte le hero, les trois chiffres du marche,
   les constats, les engagements, la methode (rail), le dossier rendu
   (fac-simile + borne + cas) et le routeur.
   Convention : desktop d'abord, overrides en max-width 900/600
   (paliers de home.css).
   ============================================================ */

/* ---------- Bloc 1 · Hero ---------- */

.a-hero {
  display: grid;
  align-items: center;
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px);
  padding-top: 16px;
  padding-bottom: 48px;
}
.a-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 26ch;
  margin: 0;
}
.a-sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 56ch;
  margin: 22px 0 0;
}
.a-hero-ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 34px;
  flex-wrap: wrap;
}

/* ---------- Rythme commun des blocs 2 a 6 ---------- */

/* Meme famille que .d-band (home.css : filet + padding), mais le motif
   ::before est structurel ici : les sections portent elles-memes .container,
   un border-top s'etendrait sur les gouttieres laterales (64px de chaque
   cote au desktop) la ou le filet doit s'arreter a la colonne de contenu. */
.a-marche, .a-constats, .a-promesse, .a-cout, .a-reponse { padding-bottom: 84px; }
.a-marche::before, .a-constats::before, .a-promesse::before, .a-cout::before, .a-reponse::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--rule);
  margin-bottom: 84px;
}

/* Graisses : Source Serif 4 n'est embarquee qu'en 500 et 600 (fonts.css),
   le 500 est donc le romain de la home. Seul allegement reel du serif :
   la prose du fac-simile descend de 700 a 600. Le selecteur long garantit
   la victoire sur .ep-paper .ep-prose strong de home.css (meme specificite
   sinon, departagee par le seul ordre des feuilles). */
.a-preuve .ep-paper strong,
.a-preuve .ep-paper .ep-prose strong { font-weight: 600; }

.a-source {
  margin: 30px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.a-source a,
.a-engagement-texte a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.a-source a:hover,
.a-engagement-texte a:hover { color: var(--ink); }

/* ---------- Bloc 2 · Marche ---------- */

/* Trois chiffres poses comme une ligne de tableau financier : grille,
   filets et separateurs viennent de .d-ligne-tableau (home.css) ; la voix
   du document (serif, chiffres alignes) de .d-chiffre. Ne reste ici que
   le padding vertical, propre a chaque bloc. */
.a-compteurs { padding: 40px 0 36px; }
.a-compteur-nombre {
  display: block;
  /* fluide : « 3 000 000 » est insecable, la taille cede avant la grille
     dans la bande 901-1120px */
  font-size: clamp(38px, 4.2vw, 54px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
.a-compteur-libelle {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 30ch;
}

/* ---------- Bloc 3 · Constats ---------- */

.a-constats-list {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  max-width: 820px;
}
.a-constat {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
.a-constat:last-child { border-bottom: 1px solid var(--rule); }
/* Voix du chiffre : .d-chiffre (home.css) sur le span. */
.a-constat-chiffre {
  font-size: 27px;
  line-height: 1.2;
  color: var(--ink);
}
.a-constat-texte {
  display: block;
  font-size: 16px;
  line-height: 1.55;
}
.a-constat-note {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ---------- Bloc 4 · Ce a quoi Diligeo s'engage ---------- */

.a-pont {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
}
.a-assise {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 62ch;
  margin: 16px 0 0;
}
/* Les trois engagements reprennent la ligne de tableau des compteurs
   (.d-ligne-tableau, home.css) : rime visuelle voulue entre les blocs
   2 et 4. Seul le padding vertical differe. */
.a-engagements-grille { padding: 36px 0; }
/* Couple titre/texte de fiche, partage avec les cas reels et le
   entre/sort du bloc 6. */
.a-engagement-titre,
.a-cas-titre {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 10px;
}
.a-engagement-texte,
.a-cas-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}
.a-pont-sortie {
  margin: 40px 0 0;
  font-size: 17px;
  color: var(--ink);
}

/* ---------- Bloc 5 · La methode (rail titre + colonne de lecture) ---------- */

/* Le rail vient de .d-rail (home.css, palier 1000px), pose dans le HTML ;
   la colonne de lecture y reste bornee a 640px via --d-rail-col.
   Sous 1000px (pas de rail), la colonne garde sa mesure. */
.a-cout-inner { max-width: 640px; margin: 0; --d-rail-col: 640px; }
/* Deroule a intertitres (choix Hugues 2026-08-13) : quatre sous-titres
   serif rythment la colonne de lecture, la conclusion se pose sous un
   filet. Le premier intertitre s'aligne sur le titre du rail. */
.a-cout-inter {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  margin: 40px 0 10px;
}
.a-cout-inner .a-cout-inter:first-of-type { margin-top: 0; }
.a-cout-para {
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}
.a-cout-inner .d-section-title { margin-bottom: 8px; }
.a-cout-conclusion {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin: 44px 0 0;
}
@media (min-width: 1000px) {
  .a-cout-inner { max-width: none; }
  /* Titre un cran sous le 28px des pages parcours : le rail de la home
     cohabite avec des compteurs a 54px. margin: 0 redit la valeur du rail,
     sinon le margin-bottom: 8px ci-dessus reprendrait la main (meme
     specificite, feuille chargee apres home.css). */
  .a-cout-inner > .d-section-title {
    font-size: 26px;
    line-height: 1.25;
    margin: 0;
  }
}

/* ---------- Bloc 6 · Le dossier rendu (fac-simile + borne) ---------- */

.a-preuve { margin-top: 44px; }

/* Extrait unique : la feuille A4 rend sa page entiere (sources, question,
   folio compris) au lieu du rognage a 460px du systeme a onglets ; une
   vraie page ne coupe pas sa propre ligne. Le pli devient inutile. */
.a-preuve .ep-paper { height: auto; padding-bottom: 6px; }
.a-preuve .ep-fold { display: none; }

/* Plancher de lisibilite 13px sur la marge d'annotation du fac-simile
   (les valeurs de home.css descendent a 9px, corrige ici pour la home). */
.a-preuve .ep-concl { font-size: 13.5px; }
.a-preuve .ep-meth { font-size: 13px; }
.a-preuve .ep-pieces li { font-size: 13px; }
.a-preuve .ep-pieces-op { font-size: 13px; }
.a-preuve .ep-ref { font-size: 13px; }
.a-preuve .ep-source { font-size: 13px; }
.a-preuve .ep-foot { font-size: 13px; }
/* Filigrane borne pour rester entier sur une feuille de 327px. */
.a-preuve .ep-paper::before { font-size: clamp(16px, 5vw, 36px); }
/* L'accroche de la marge d'annotation descend de 600 au romain de la
   fonte (500) : la taille et l'encre portent l'emphase, pas la graisse. */
.a-preuve .ep-force { font-weight: 500; font-size: 24px; }
@media (max-width: 640px) {
  /* restaure le palier mobile de home.css:1397, que la specificite
     de la regle ci-dessus ecraserait sinon */
  .a-preuve .ep-force { font-size: 22px; }
}

.a-borne { margin-top: 48px; max-width: 640px; }
.a-borne-texte { font-size: 17px; line-height: 1.6; margin: 0; }

/* ---------- Bloc 6 (suite) · Cas reels et entre/sort ---------- */

.a-cas-soustitre {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  margin: 64px 0 0;
}
.a-cas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 44px;
  max-width: 900px;
}
/* .a-cas-titre / .a-cas-desc : regles groupees avec .a-engagement-titre /
   .a-engagement-texte au bloc 4 (meme couple titre/texte de fiche). */
.a-entre-sort {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px dashed var(--rule);
  max-width: 900px;
}

/* ---------- Bloc 7 · Routeur ---------- */

.a-routeur {
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 84px;
  padding-bottom: 84px;
}
.a-routeur-inner::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--rule);
  margin-bottom: 84px;
}
.a-routeur-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 72px;
  margin-top: 44px;
}
.a-porte {
  display: block;
  position: relative;
  z-index: 0;
  padding: 22px 40px 22px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
/* Assiette de survol : le fond deborde de 24px de part et d'autre du
   texte (choix Hugues 2026-08-13, essai « assiette qui respire »).
   Le filet et le texte restent alignes sur la grille, l'assiette
   flotte derriere. */
.a-porte::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -24px;
  right: -24px;
  border-radius: 3px;
  background: transparent;
  transition: background-color 0.2s;
}
.a-porte::after {
  content: "\2192";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--ink-faint);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s;
}
.a-porte:hover::before, .a-porte:active::before { background: var(--paper); }
.a-porte:hover::after, .a-porte:active::after {
  transform: translate(4px, -50%);
  color: var(--ink);
}
.a-porte:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.a-porte-titre {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
}
.a-porte-contexte {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 44ch;
}

/* ---------- Revelations au scroll (classe posee par motion.js) ---------- */

[data-reveal-groupe].a-anim [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}
[data-reveal-groupe].a-anim.est-revele [data-reveal] {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delai, 0s);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal-groupe].a-anim [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media print {
  /* l'IntersectionObserver ne tire pas au rendu d'impression :
     tout doit etre visible sur le papier */
  [data-reveal-groupe].a-anim [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Tablette ---------- */

@media (max-width: 900px) {
  .a-routeur-liste { grid-template-columns: 1fr; gap: 0; }
  .a-cas-grid, .a-entre-sort { gap: 36px; }

  /* L'effondrement en colonne de tableau vient de .d-ligne-tableau
     (home.css) ; restent les paddings et le margin-top propres au bloc. */
  .a-compteurs, .a-engagements-grille { padding: 28px 0; }
  .a-compteurs { margin-top: 36px; }
  .a-compteur-nombre { font-size: 42px; }
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
  .a-hero { padding-bottom: 32px; }
  .a-h1 { font-size: 34px; }
  .a-sub { font-size: 16px; margin-top: 18px; }
  .a-hero-ctas { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 28px; }
  .a-hero-ctas .d-cta { display: flex; justify-content: center; text-align: center; }
  .a-hero-ctas .d-cta-secondary { align-self: flex-start; }

  .a-marche, .a-constats, .a-promesse, .a-cout, .a-reponse { padding-bottom: 56px; }
  .a-marche::before, .a-constats::before, .a-promesse::before, .a-cout::before, .a-reponse::before { margin-bottom: 56px; }

  .a-constat { grid-template-columns: 72px 1fr; gap: 18px; padding: 22px 0; }
  .a-constat-chiffre { font-size: 22px; }

  .a-cout-inter { margin-top: 32px; }
  .a-cout-para { font-size: 16px; }
  .a-cout-conclusion { font-size: 16px; }

  .a-cas-grid, .a-entre-sort { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }

  /* Recadrage mobile du fac-simile : la zone significative est le pont
     d'EBE (titre + graphique + sources) et la marge d'annotation ; la
     prose complete de la page A4 reste reservee aux ecrans larges. */
  .a-preuve .ep-prose, .a-preuve .ep-question { display: none; }

  .a-routeur { padding-top: 56px; padding-bottom: 56px; }
  .a-routeur-inner::before { margin-bottom: 56px; }
  .a-routeur-liste { margin-top: 32px; }
  .a-porte { padding: 18px 36px 18px 0; }
  .a-porte::before { left: -16px; right: -16px; }
  .a-porte-titre { font-size: 18px; }
}