/* ============================================================================
   tousensembles2027.fr — feuille de style autonome
   ----------------------------------------------------------------------------
   REFONTE DU 09/08/2026, quatrième version.

   Les trois précédentes étaient des pages noires avec un voile posé sur les
   photographies : on ne voyait plus la nature, et une page qui parle de ce
   qu'on peut encore sauver ne peut pas ressembler à un caveau.

   Principe retenu, et il n'y en a qu'un : ON NE POSE JAMAIS DE TEXTE SUR UNE
   PHOTO. Les images occupent toute la largeur, sans voile, sans dégradé, sans
   rien par-dessus. Le texte a son propre espace, sur fond papier.

   Fond clair par défaut. Le sombre ne sert plus de décor : il ne reste que
   sur deux bandes — l'accusation et le mur — pour faire contraste, comme une
   pièce à conviction au milieu d'un dossier lisible.

   Palette : le papier et l'encre pour lire, la feuille pour ce qui vit,
   l'or pour l'argent, la brique pour ce qui blesse. Aucune couleur en dur
   hors de :root.
   ========================================================================= */

:root {
  /* les fonds et l'encre */
  --papier:      #faf8f2;
  --papier-2:    #f1ece0;
  --papier-3:    #e7e0d0;
  --encre:       #0f2418;
  --encre-doux:  #3b5245;
  --encre-tres:  #6b8073;

  /* ce qui vit */
  --feuille:      #146c43;
  --feuille-fonce:#0c4a2d;
  --feuille-viv:  #4ade80;
  --feuille-pale: #dff0e4;

  /* l'argent */
  --or:       #8a5a00;
  --or-viv:   #f2c14e;
  --or-pale:  #fbf0d5;

  /* ce qui blesse */
  --brique:      #9b2c2c;
  --brique-viv:  #fca5a5;
  --brique-pale: #fbe9e9;

  /* la puissance publique */
  --eau:       #1a6a94;
  --eau-pale:  #e2f0f7;

  /* les bandes sombres */
  --nuit:       #0a1f14;
  --nuit-2:     #071710;

  --lg-texte: 36rem;
  --lg-large: 74rem;
  --lg-photo: 100rem;

  --pas: clamp(1.1rem, 3vw, 2.2rem);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 clamp(1.08rem, 0.55vw + 1rem, 1.28rem)/1.75 var(--serif);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

h1, h2, h3, .chiffre, .kicker, .somme, .pied h2 { font-family: var(--sans); }

a { color: var(--feuille); text-underline-offset: 0.2em; }
a:hover, a:focus-visible { color: var(--feuille-fonce); }

:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }

.saut {
  position: absolute; left: -9999px;
  background: var(--feuille); color: var(--papier);
  padding: 0.8rem 1.2rem; z-index: 99;
}
.saut:focus { left: 1rem; top: 1rem; }

/* ---------- structure ---------------------------------------------------- */

.bande { position: relative; padding: clamp(3.5rem, 9vh, 7rem) var(--pas); }

.dedans        { max-width: var(--lg-texte); margin-inline: auto; }
.dedans--large { max-width: var(--lg-large); margin-inline: auto; }
.dedans .dedans { max-width: var(--lg-texte); }

.bande p { margin: 0 0 1.45em; }

/* Les bandes illustrées n'ont plus de rembourrage en haut : la photo commence
   au ras du bord, en pleine largeur. */
.bande--photo { padding-top: 0; }

/* ============================================================================
   LES PHOTOGRAPHIES — plein cadre, aucun voile.
   C'est tout l'objet de cette refonte. On les regarde, on ne les traverse pas.
   ========================================================================= */

.photo {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50vw);
  height: clamp(20rem, 52vh, 34rem);
  overflow: hidden;
  background: var(--papier-2);
}
.photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Le crédit : une ligne discrète SOUS la photo, jamais dessus. */
.credit {
  max-width: var(--lg-large);
  margin: 0.55rem auto 0 !important;
  padding-inline: 0.2rem;
  text-align: right;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--encre-tres);
}

/* ============================================================================
   OUVERTURE — le texte et la photo arrivent ENSEMBLE.
   ----------------------------------------------------------------------------
   La version précédente posait le titre par-dessus l'image : comme le <header>
   ne porte pas la classe « bande », la règle qui remonte le texte au-dessus de
   la photo ne s'y appliquait pas, et l'image peignait par-dessus les mots.
   On arrivait sur une montagne muette, et le texte ne réapparaissait qu'en le
   sélectionnant à la souris. Corrigé ici, et par construction : plus aucune
   superposition possible, le texte et l'image occupent deux cases distinctes.
   ========================================================================= */

.ouverture {
  display: grid;
  padding: 0;
  grid-template-columns: 1fr;
  grid-template-areas:
    "texte"
    "photo"
    "credit";
}

.ouverture > .dedans--large {
  grid-area: texte;
  align-self: center;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5.5rem) var(--pas) clamp(2rem, 5vh, 3rem);
}

/* La photo reprend sa largeur de colonne : plus de débordement plein écran. */
.ouverture > .photo {
  grid-area: photo;
  width: 100%;
  margin: 0;
  transform: none;
  height: clamp(17rem, 46vh, 26rem);
}

.ouverture > .credit { grid-area: credit; padding-inline: var(--pas); }

@media (min-width: 62rem) {
  .ouverture {
    min-height: 92svh;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "texte photo"
      "texte credit";
  }
  .ouverture > .dedans--large {
    margin: 0 0 0 auto;
    padding: clamp(3rem, 8vh, 5rem) clamp(2rem, 4vw, 3.5rem)
             clamp(3rem, 8vh, 5rem) var(--pas);
  }
  .ouverture > .photo { height: 100%; min-height: 100%; }
  .ouverture > .credit { text-align: right; padding: 0.5rem 1rem 1rem 0; margin: 0 !important; }
}

.kicker {
  margin: 0 0 1.5rem;
  font-size: clamp(0.7rem, 1.4vw, 0.84rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--feuille);
  font-weight: 700;
}

.somme {
  margin: 0;
  font-size: clamp(2.6rem, 10vw, 7rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--or);
}
.somme small {
  display: block;
  max-width: 32ch;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 2.1vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--encre-doux);
  margin-top: 1.1rem;
}

.ouverture h1 {
  margin: clamp(2.2rem, 6vh, 3.4rem) 0 0;
  font-size: clamp(1.7rem, 5.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  max-width: 20ch;
  color: var(--encre);
}
.ouverture h1 em { font-style: normal; color: var(--feuille); }

.appui {
  margin-top: 2.1rem;
  max-width: 48ch;
  color: var(--encre-doux);
  font-size: clamp(1.02rem, 1vw + 0.85rem, 1.24rem);
}
.appui strong { color: var(--encre); }

.fleche {
  margin-top: clamp(2.2rem, 6vh, 3.6rem);
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--feuille);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600;
}
.fleche svg { animation: descendre 2.4s ease-in-out infinite; }
@keyframes descendre { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- les fonds de bande ------------------------------------------- */

.fabrique   { background: var(--papier); }
.demontage  { background: var(--papier-2); }
.lumiere    { background: linear-gradient(180deg, var(--feuille-pale) 0%, var(--papier) 70%); }
.methode    { background: var(--papier-2); }
.manifeste  { background: linear-gradient(180deg, var(--papier) 0%, var(--feuille-pale) 100%); }
.sombre     { background: var(--papier-2); }

/* Les deux seules bandes sombres de la page : l'accusation, et le mur.
   Elles tranchent volontairement — ce sont les pièces du dossier. */
.accusation, .postes { background: var(--nuit); color: var(--papier); }
.accusation h2, .postes h2, .postes .parcours h3 { color: var(--papier); }
.accusation a, .postes a { color: var(--feuille-viv); }
.accusation .exergue, .postes .exergue { color: var(--papier); border-left-color: var(--or-viv); }
.accusation .exergue strong, .postes .exergue strong { color: var(--or-viv); }

/* ---------- titres -------------------------------------------------------- */

.bande h2 {
  margin: 0 0 1.9rem;
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: var(--encre);
}
.bande h2 .trait {
  display: block;
  width: 3.5rem; height: 5px;
  margin-bottom: 1.5rem;
  background: var(--feuille);
  border-radius: 3px;
}
.accusation h2 .trait, .postes h2 .trait { background: var(--or-viv); }

.exergue {
  font-size: clamp(1.14rem, 2.1vw, 1.45rem);
  line-height: 1.5;
  color: var(--encre);
  border-left: 4px solid var(--or);
  padding-left: 1.3rem;
  margin-bottom: 1.9em;
}
.exergue strong { color: var(--or); }

/* ---------- cartes de chiffres -------------------------------------------- */

.chiffres {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 2.6rem 0 1rem;
  padding: 0; list-style: none;
}
.carte {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--papier-3);
  border-left: 5px solid var(--feuille);
  border-radius: 0.5rem;
  background: var(--papier);
}
.carte--alerte { border-left-color: var(--brique); background: var(--brique-pale); }
.chiffre {
  display: block;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--or);
}
.chiffre--vert   { color: var(--feuille); font-size: clamp(1.25rem, 2.8vw, 1.8rem); }
.chiffre--alerte { color: var(--brique); }
.carte p { margin: 0.75rem 0 0; font-size: 0.99rem; color: var(--encre-doux); line-height: 1.6; }
.carte strong { color: var(--encre); }

/* Sur fond sombre, les cartes s'inversent. */
.accusation .carte, .postes .carte { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.accusation .carte p, .postes .carte p { color: var(--papier); }

/* ---------- barres comparées ---------------------------------------------- */

.balance { margin: 3rem 0; }
.balance figcaption {
  font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--encre-tres); margin-bottom: 1.1rem;
}
.accusation .balance figcaption { color: rgba(250,248,242,0.66); }

.barre {
  position: relative;
  height: clamp(2.7rem, 6.5vw, 3.7rem);
  border-radius: 0.4rem;
  margin-bottom: 0.9rem;
  background: rgba(107,128,115,0.16);
  overflow: hidden;
}
.accusation .barre { background: rgba(255,255,255,0.09); }

.barre span {
  position: absolute; inset: 0 auto 0 0;
  display: flex; align-items: center; padding-inline: 1rem;
  font-family: var(--sans);
  font-weight: 700; font-size: clamp(0.8rem, 1.7vw, 1rem);
  color: var(--papier); white-space: nowrap;
  border-radius: 0.4rem;
}
.barre--etranger  span { width: 54.7%; background: var(--brique); }
.barre--assureurs span { width: 26%;   background: var(--or); }
.barre--banques   span { width: 26%;   background: var(--eau); }
.barre--epargne   span { width: 100%;  background: linear-gradient(90deg, var(--feuille), #2f9c63); }
.barre--dette     span { width: 53%;   background: var(--brique); }

.horsbarre {
  margin: 0 0 2rem;
  font-family: var(--sans);
  font-size: 0.94rem; line-height: 1.6; color: var(--encre-doux);
}
.horsbarre strong { color: var(--encre); }
.accusation .horsbarre { color: rgba(250,248,242,0.82); }
.accusation .horsbarre strong { color: var(--or-viv); }

/* ---------- verdicts ------------------------------------------------------- */

.verdict {
  margin: 3rem 0 0;
  padding: clamp(1.5rem, 3.6vw, 2.4rem);
  border-left: 6px solid var(--feuille);
  background: var(--feuille-pale);
  border-radius: 0 0.6rem 0.6rem 0;
  font-size: clamp(1.1rem, 2.2vw, 1.42rem);
  line-height: 1.48;
  font-weight: 500;
  color: var(--encre);
}
.verdict strong { color: var(--feuille-fonce); }

.verdict--cle { border-left-color: var(--or); background: var(--or-pale); }
.verdict--cle strong { color: var(--or); }

.verdict--clair { border-left-color: var(--feuille); background: var(--feuille-pale); }

.verdict--manifeste {
  border-left-color: var(--or);
  background: var(--or-pale);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}
.verdict--manifeste strong { color: var(--or); }

/* Sur les bandes sombres. */
.accusation .verdict, .postes .verdict {
  background: rgba(255,255,255,0.06);
  border-left-color: var(--or-viv);
  color: var(--papier);
}
.accusation .verdict strong, .postes .verdict strong { color: var(--or-viv); }

/* ---------- la liste des preuves ------------------------------------------- */

.preuves { list-style: none; padding: 0; margin: 2.6rem 0; }
.preuves li {
  position: relative;
  padding: 1.35rem 0 1.35rem 1.7rem;
  border-top: 1px solid var(--papier-3);
  line-height: 1.62;
}
.preuves li:last-child { border-bottom: 1px solid var(--papier-3); }
.preuves li::before {
  content: ""; position: absolute; left: 0; top: 1.9em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--or);
}
.preuves strong { color: var(--or); }
.qui {
  display: block;
  margin-top: 0.65rem;
  font-family: var(--sans);
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--encre-tres);
}

/* ---------- chronologie ----------------------------------------------------- */

.chrono { list-style: none; padding: 0; margin: 2.6rem 0; }
.chrono li {
  position: relative;
  padding: 0 0 2.1rem 2rem;
  border-left: 2px solid var(--papier-3);
}
.chrono li:last-child { border-left-color: transparent; padding-bottom: 0; }
.chrono li::before {
  content: ""; position: absolute; left: -8px; top: 0.35em;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--encre-tres); border: 3px solid var(--papier-2);
}
.chrono li.cle::before { background: var(--or); box-shadow: 0 0 0 5px var(--or-pale); }
.chrono .an {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--or); font-weight: 700;
  margin-bottom: 0.55rem;
}
.chrono p { margin: 0 0 0.8em; }

/* ---------- citation d'un texte de loi -------------------------------------- */

.citation {
  margin: 1.5rem 0 0;
  padding: 1.4rem 1.6rem;
  background: var(--papier);
  border: 1px solid var(--papier-3);
  border-left: 5px solid var(--or);
  border-radius: 0 0.6rem 0.6rem 0;
}
.citation p {
  margin: 0 0 0.85rem;
  font-size: 1.05rem; line-height: 1.6; font-style: italic;
  color: var(--encre);
}
.citation cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--encre-tres);
}
.postes .citation, .accusation .citation {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14);
}
.postes .citation p, .accusation .citation p { color: var(--papier); }

/* ---------- le bloc d'honnêteté --------------------------------------------- */

.garde-fou {
  margin: 3rem 0 0;
  padding: clamp(1.5rem, 3.4vw, 2.1rem);
  border: 2px dashed var(--eau);
  border-radius: 0.8rem;
  background: var(--eau-pale);
}
.garde-fou h3 {
  margin: 0 0 1rem;
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--eau); font-weight: 800;
}
.garde-fou p { font-size: 1rem; line-height: 1.65; color: var(--encre-doux); }
.garde-fou p:last-child { margin-bottom: 0; }
.garde-fou strong { color: var(--encre); }

/* ============================================================================
   LE MUR — sur fond sombre, comme une pièce à conviction.
   Chaque fiche : le nom, la trajectoire, l'acte, le commentaire.
   Code couleur constant : l'or pour le privé, l'eau pour la puissance publique.
   ========================================================================= */

.bloc-titre {
  max-width: var(--lg-large);
  margin: 3.6rem auto 1.7rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--or-viv);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(242,193,78,0.35);
}

.parcours { list-style: none; padding: 0; margin: 0 0 1rem; }

.parcours > li {
  padding: 1.9rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.11);
}
.parcours > li.marquant {
  padding: 1.9rem clamp(1.1rem, 2.6vw, 1.8rem);
  margin: 1.3rem 0;
  border: 1px solid rgba(242,193,78,0.34);
  border-radius: 0.8rem;
  background: rgba(242,193,78,0.06);
}

.parcours h3 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.18rem, 2.6vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.018em;
}

.trajet {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0 0 1.15rem !important;
}
.etape {
  flex: 1 1 14rem;
  padding: 0.72rem 0.95rem;
  border-radius: 0.45rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.45;
}
.etape--banque {
  background: rgba(242,193,78,0.14);
  border: 1px solid rgba(242,193,78,0.4);
  color: var(--or-viv);
}
.etape--etat {
  background: rgba(125,211,252,0.12);
  border: 1px solid rgba(125,211,252,0.36);
  color: #a5dcf7;
}
.fleche-t {
  flex: 0 0 auto;
  align-self: center;
  color: rgba(250,248,242,0.5);
  font-size: 1.2rem;
  padding-inline: 0.15rem;
}

.acte {
  margin: 0 0 1.05rem !important;
  padding: 1.05rem 1.25rem;
  border-left: 5px solid var(--brique-viv);
  background: rgba(248,113,113,0.11);
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.99rem;
  line-height: 1.65;
  color: var(--papier);
}
.acte-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brique-viv); font-weight: 800;
  margin-bottom: 0.5rem;
}
.acte strong { color: #fff; }

.commentaire {
  margin: 0 !important;
  font-size: 0.96rem;
  line-height: 1.65;
  color: rgba(250,248,242,0.8);
}
.commentaire strong { color: var(--or-viv); }

/* ---------- les leviers ------------------------------------------------------ */

.leviers {
  counter-reset: levier;
  list-style: none;
  padding: 0;
  margin: 2.6rem auto 0;
  max-width: var(--lg-texte);
}
.leviers > li {
  counter-increment: levier;
  position: relative;
  padding: 1.7rem 0 1.7rem 3.6rem;
  border-top: 1px solid var(--papier-3);
}
.leviers > li:last-child { border-bottom: 1px solid var(--papier-3); }
.leviers > li::before {
  content: counter(levier);
  position: absolute; left: 0; top: 1.65rem;
  width: 2.35rem; height: 2.35rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--feuille); color: var(--papier);
  font-family: var(--sans); font-weight: 800; font-size: 0.98rem;
}
.leviers h3 {
  margin: 0 0 0.6rem;
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--feuille-fonce);
}
.leviers p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--encre-doux); }
.leviers strong { color: var(--encre); }

/* ---------- le manifeste ------------------------------------------------------ */

.titre-manifeste {
  font-size: clamp(2.4rem, 9vw, 5.6rem) !important;
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 0.98;
  color: var(--feuille);
  margin-bottom: 2.2rem !important;
}

/* ---------- pied -------------------------------------------------------------- */

.pied {
  padding: clamp(3rem, 8vh, 5rem) var(--pas) 4rem;
  background: var(--nuit-2);
  color: rgba(250,248,242,0.82);
  font-size: 0.94rem;
}
.pied h2 {
  font-size: 0.92rem; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 1.7rem; color: var(--papier); font-weight: 800;
}
.pied a { color: var(--feuille-viv); }
.pied ul { padding-left: 1.1rem; }
.pied li { margin-bottom: 1.15rem; line-height: 1.62; }
.pied strong { color: var(--papier); }
.pied .note { margin-top: 2.5rem; font-size: 0.86rem; color: rgba(250,248,242,0.55); }

/* ---------- petits écrans ------------------------------------------------------ */

@media (max-width: 34rem) {
  .trajet { flex-direction: column; }
  .fleche-t { align-self: flex-start; transform: rotate(90deg); padding: 0.15rem 0 0.15rem 0.9rem; }
  .etape { flex: 1 1 auto; }
  .barre span { font-size: 0.78rem; padding-inline: 0.7rem; }
  .barre--assureurs span,
  .barre--banques span { width: 62%; }
  .photo { height: clamp(15rem, 40vh, 22rem); }
  .ouverture .photo { height: clamp(17rem, 46vh, 26rem); }
}