/* =========================================================================
   LA PAGE D'ACCUEIL — direction A, « fidèle, remise au propre » (Cheminement
   #55), écrite le 16/09 dans la grammaire de la page d'une édition (R2).

   Fond blanc, la carte « g » partout, deux niveaux de titre de bloc, des
   filets à la place des fonds, un seul jeu de boutons. Deux bandes sombres :
   le bandeau (celui de la préprod fait foi, la planche ne le dessine pas) et
   la masterclass, une affiche. Les valeurs sont dans variables.css ; la
   tablette et le téléphone à la fin de responsive.css. Ce que la page partage
   avec les autres — titres de bloc, rangée à filets, cadre, ligne de liste,
   boutons, lien « Toutes les … » — vit dans composants.css : cette feuille ne
   pose que la mise en page.
   ========================================================================= */


/* --- 1. LE BANDEAU ---------------------------------------------------------
   L'image en fond, un fondu noir de gauche à droite par-dessus : le bandeau
   du site en ligne (Bricks, page 79). Trois étages, dans une pile isolée :
   l'image (-2), le fondu (-1), le texte. La hauteur est celle du contenu plus
   --padding-bandeau — jamais 100vh. Le bandeau n'est pas la une : c'est un
   contenu posé à la main (Apparence › Page d'accueil). Depuis le 16/09, le
   rouge du début du titre est celui de la charte, comme le bouton. */
.bandeau-accueil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gris-noir);
  color: var(--gris-clair-sur-sombre);
  padding-block: var(--padding-bandeau);
}
.bandeau-accueil-fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 0;
  background: var(--gris-fonce);
}
.bandeau-accueil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fondu-bandeau);
}
.bandeau-rouge { color: var(--rouge-titre-bandeau); }
.bandeau-surtitre {
  font-family: var(--police-meta);
  font-size: var(--taille-surtitre-bandeau);
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.bandeau-titre {
  font-size: var(--taille-titre-bandeau);
  line-height: 1.05;
  max-width: var(--largeur-titre-bandeau);
  margin-bottom: 32px;
}
/* Le bouton du bandeau parle comme le titre : League Gothic, en capitales. */
.bouton-bandeau {
  font-family: var(--police-affiche);
  font-size: var(--taille-bouton-bandeau);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 0 26px;
}


/* --- 2. LE HAUT DE PAGE — trois colonnes, deux filets verticaux -------------
   Les brèves et l'édition de la semaine (colonne 1, sur les deux rangées), la
   une puis la question (colonne 2), les deux contenus d'à côté (colonne 3, sur
   les deux rangées). Les filets courent sur toute la hauteur du bloc, tracés
   dans la gouttière — jamais en border + padding, qui redécaleraient le texte.
   Il vient à 32 px sous le bandeau (planches du 30/09 ; 56 avant). */
.haut-accueil { margin-top: 32px; }
.grille-une {
  display: grid;
  grid-template-columns: var(--grille-page);
  grid-template-rows: auto 1fr;
  column-gap: var(--gouttiere-trame);
}
.grille-une > * { min-width: 0; }
.colonne-breves     { grid-column: 1; grid-row: 1 / 3; position: relative; }
.colonne-vedette    { grid-column: 2; grid-row: 1; }
.colonne-question   { grid-column: 2; grid-row: 2; align-self: start; margin-top: 32px; }
.colonne-secondaire { grid-column: 3; grid-row: 1 / 3; position: relative; }
.colonne-breves::after,
.colonne-secondaire::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--filet-clair);
}
.colonne-breves::after      { right: calc(var(--gouttiere-trame) / -2); }
.colonne-secondaire::before { left: calc(var(--gouttiere-trame) / -2); }

/* LA UNE — la carte « g » au calibre fort : l'image en 16:9, le titre à 34,
   le chapô en PT Serif dans le gris du texte long d'une édition. */
.carte-vedette .carte-service { margin-top: 16px; font-size: var(--taille-service-une); }
.carte-vedette .carte-titre {
  font-size: var(--taille-titre-vedette);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-top: 12px;
}
.carte-vedette .carte-extrait {
  font-family: var(--police-texte);
  font-size: var(--taille-chapo-vedette);
  line-height: 1.5;
  color: var(--couleur-texte-une);
  margin-top: 12px;
  -webkit-line-clamp: var(--lignes-chapo-central);
  line-clamp: var(--lignes-chapo-central);
}
.carte-vedette .carte-auteur { font-size: var(--taille-service-une); margin-top: 14px; }

/* LES DEUX D'À CÔTÉ — la carte « g », un filet clair entre les deux. */
.colonne-secondaire { display: flex; flex-direction: column; gap: var(--espace-filet-clair); }
.colonne-secondaire .carte + .carte {
  border-top: 1px solid var(--filet-clair);
  padding-top: var(--espace-filet-clair);
}
.carte-laterale .carte-titre { font-size: var(--taille-titre-une); }
.carte-laterale .carte-extrait {
  -webkit-line-clamp: var(--lignes-chapo-lateral);
  line-clamp: var(--lignes-chapo-lateral);
}

/* LES BRÈVES, puis L'ÉDITION DE LA SEMAINE — deux barres dans la même colonne.
   Le dessin est celui que l'édition déclare ; il mène à l'édition, comme le
   lien sous lui (14/09). Une brève : l'heure et la rubrique, puis le titre
   (30/09) ; trois au bureau, cinq en tablette, trois au téléphone. */
.breves-accueil .ligne:nth-child(n + 4) { display: none; }
.breves-accueil .carte-service { margin-top: 0; }
.breves-accueil .ligne-titre { margin-top: 6px; }
.service-heure { font-weight: 700; font-variant-numeric: tabular-nums; }
.edition-semaine { margin-top: 32px; }
.edition-semaine .cadre-dessin { margin-top: 18px; }
.edition-semaine .lien-suite { margin-top: 14px; }


/* --- 3. LES ENQUÊTES — deux tiers, un tiers --------------------------------
   La trame commune : les enquêtes sur les colonnes 1 et 2, les chroniques et
   les dossiers sur la 3 — la même verticale que les deux d'à côté du haut de
   page. Chaque colonne ouvre sur sa barre, à la même hauteur (30/09 : le
   titre de bloc en pleine largeur est parti). Le filet vertical est tracé
   dans la gouttière. */
.enquetes-cadre {
  display: grid;
  grid-template-columns: var(--grille-page);
  column-gap: var(--gouttiere-trame);
  align-items: start;
}
.enquetes-cadre > * { min-width: 0; }
.colonne-enquetes   { grid-column: 1 / 3; }
.colonne-chroniques { grid-column: 3; position: relative; }
.colonne-chroniques::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gouttiere-trame) / -2);
  width: 1px;
  background: var(--filet-clair);
}

/* LA TÊTE D'AFFICHE : la carte « g » au calibre le plus fort de la page —
   l'image en 16:9, le titre à 40, le chapô en PT Serif à 19 sur 720 px. */
.carte-enquete-tete {
  margin-top: 28px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--filet-clair);
}
.carte-enquete-tete .carte-service { margin-top: 18px; font-size: var(--taille-service-une); }
.carte-enquete-tete .carte-titre {
  font-size: var(--taille-titre-enquete);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin-top: 12px;
}
.carte-enquete-tete .carte-extrait {
  font-family: var(--police-texte);
  font-size: var(--taille-chapo-enquete);
  line-height: 1.55;
  color: var(--couleur-texte-une);
  margin-top: 12px;
  max-width: 720px;
  -webkit-line-clamp: var(--lignes-chapo-enquete);
  line-clamp: var(--lignes-chapo-enquete);
}
.carte-enquete-tete .carte-auteur { font-size: var(--taille-service-une); margin-top: 14px; }

/* LES TROIS SUIVANTES : la rangée à filets, à une gouttière plus serrée. */
.enquetes-suite { --gouttiere-rangee: var(--gouttiere-enquetes-suite); }

/* LES CHRONIQUES : la signature, puis ses chroniques en cartes en ligne —
   la vignette à 160 px, la rubrique, le titre, la date ; un filet clair
   entre deux (30/09). */
.chroniques-entete {
  --taille-portrait: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.chroniques-entete > * { min-width: 0; }
.chroniques-nom {
  font-family: var(--police-titre);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.chroniques-fonction {
  font-family: var(--police-meta);
  font-size: var(--taille-service-carte);
  color: var(--couleur-format-carte);
  margin-top: 3px;
}
.chroniques-liste { margin-top: 14px; }
.chroniques-liste .carte-ligne {
  --largeur-vignette-ligne: 160px;
  padding: 18px 0;
  border-top: 1px solid var(--filet-clair);
}
.chroniques-liste .carte-ligne:first-child { padding-top: 0; border-top: 0; }
.chroniques-liste .carte-titre { font-size: var(--taille-ligne-chronique); line-height: 1.25; margin-top: 6px; }
.chroniques-liste .carte-auteur { margin-top: 6px; }

/* LES DOSSIERS, sous les chroniques : ceux qu'épingle la barre de
   navigation, dans leur rang ; le nom seul, un filet clair entre deux. */
.bloc-dossiers { margin-top: 32px; }
.bloc-dossiers .liste-lignes { margin-top: 6px; }
.bloc-dossiers .liste-dossiers .ligne { border-bottom: 0; }
.bloc-dossiers .liste-dossiers .ligne + .ligne { border-top: 1px solid var(--filet-clair); }


/* --- 4. S'ABONNER — l'encart sur papier -------------------------------------
   Le lecteur a traversé la une, les brèves et les enquêtes avant qu'on lui
   demande quoi que ce soit. Le texte à gauche, le bouton rouge à droite. */
.bandeau-abonnement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
}
.bandeau-abonnement > * { min-width: 0; }
.abonnement-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-titre-abonnement);
  font-weight: 700;
  line-height: 1.15;
}
.abonnement-accroche {
  font-family: var(--police-texte);
  font-size: 18px;
  line-height: 1.5;
  color: var(--couleur-extrait-carte);
  margin-top: 10px;
  max-width: 760px;
}
.abonnement-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.abonnement-actions .bouton { width: 220px; }
.abonnement-don {
  font-family: var(--police-meta);
  font-size: 14px;
  color: var(--couleur-extrait-carte);
  text-decoration: underline;
  text-decoration-color: var(--couleur-sep-carte);
  text-underline-offset: 4px;
}


/* --- 5. LES ENTRETIENS VIDÉO — en clair, trois cartes à filets ---------------
   Plus de bande sombre (V2, 15/09) : la barre avec son lien, puis la
   rangée à filets, la carte « g » en 16:9 — une vidéo n'est jamais recadrée. */
.entretiens-accueil { margin-top: 28px; }
.carte-entretien-accueil .carte-titre { font-size: var(--taille-titre-entretien-accueil); }
.carte-entretien-accueil .carte-extrait {
  -webkit-line-clamp: var(--lignes-chapo-lateral);
  line-clamp: var(--lignes-chapo-lateral);
}


/* --- 6. LE RÉEL EN BREF — sous sa barre, comme les autres sections ---------
   La barre (30/09) : le titre à gauche ; à droite le lien, un filet, les deux
   flèches. Dessous, l'étagère sur toute la largeur : une seule rangée qui
   déborde, le dernier réel coupé au bord — sans fondu (Ludovic, 30/09). La
   tablette et le téléphone gardent la barre et le lien, sans les flèches, et
   poussent l'étagère jusqu'au bord de l'écran (responsive.css). */
.bloc-reels { margin-top: 48px; }
.reels-barre { align-items: center; }
.reels-droite { display: flex; align-items: center; gap: 16px; }
.reels-sep { width: 1px; height: 16px; background: var(--filet-clair); }
.reels-fleches { display: flex; gap: 8px; }
.bloc-reels .etagere-reels { margin-top: 20px; gap: 22px; }


/* --- 7. LA NEWSLETTER — le cadre, en colonnes ---------------------------------
   Le mail est le canal de conversion réel du média : une section entière,
   juste avant la masterclass. Le formulaire est la case de l'action. */
.bloc-newsletter { margin-top: var(--espace-section); margin-bottom: var(--espace-section); }
.newsletter-cadre { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.newsletter-texte { padding: 40px 44px 44px; }
.newsletter-titre {
  font-size: var(--taille-titre-newsletter);
  line-height: 1.12;
  margin-top: 12px;
}
.newsletter-accroche { margin-top: 12px; }
.newsletter-accroche p {
  font-family: var(--police-texte);
  font-size: 19px;
  line-height: 1.5;
}
.newsletter-accroche p + p {
  font-family: var(--police-meta);
  font-size: 15px;
  line-height: 1.55;
  color: var(--couleur-extrait-carte);
  margin-top: 12px;
  max-width: 620px;
}
.newsletter-form { padding: 36px 40px; }
.newsletter-mention {
  font-family: var(--police-meta);
  font-size: 13px;
  font-weight: 500;
}
.newsletter-champ {
  width: 100%;
  min-height: var(--hauteur-bouton);
  font-family: var(--police-meta);
  font-size: 15px;
  padding: 0 14px;
  border: 1px solid var(--filet-noir);
  border-radius: 0;
  background: var(--c-blanc);
  color: var(--gris-texte);
}
.newsletter-champ::placeholder { color: var(--couleur-sep-carte); }
.newsletter-consentement {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  font-family: var(--police-meta);
  font-size: 13px;
  line-height: 1.45;
  color: var(--couleur-extrait-carte);
}
.newsletter-consentement input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--gris-texte); }
.newsletter-form .bouton { width: 100%; }


/* --- 8. LA MASTERCLASS — l'affiche (M3, 15/09) --------------------------------
   La photo des intervenantes en fond sur toute la largeur, sans fondu ; le
   texte à gauche, dans la colonne du conteneur : le libellé, le titre en
   League Gothic rouge et blanc, l'accroche, les noms, le bouton rouge et le
   lien. Avec le bandeau, c'est la seule bande sombre de la page. La photo
   vient de l'écran Apparence › Page d'accueil (l'image de une de la
   masterclass porte son titre incrusté). Le téléphone en fait une affiche :
   tout le texte se pose SUR la photo, sans chapô (responsive.css).

   ⚠ BLANC, ET PAS CRÈME (Ludovic, 16/09). Le crème de la charte est chaud :
     posé sur une photo sombre, il ne se lit pas comme une couleur, il se lit
     comme du blanc sali. L'affiche passe donc au blanc franc, et ses gris
     descendent en neutre — le rouge reste seul à porter la couleur. */
.bandeau-masterclass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gris-fonce);
  color: var(--c-blanc);
}
.masterclass-fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0;
  background: var(--gris-fonce);
}
.masterclass-fond::after { content: none; }
.masterclass-fond picture { display: contents; }
.masterclass-fond img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
}
.masterclass-texte {
  min-height: var(--hauteur-masterclass);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.masterclass-tete,
.masterclass-corps { max-width: var(--largeur-texte-masterclass); }
.masterclass-surtitre { color: #a9a9a9; }
.masterclass-titre {
  font-family: var(--police-affiche);
  font-weight: 400;
  font-size: var(--taille-titre-masterclass);
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: 16px;
}
.masterclass-titre a { color: inherit; }
.masterclass-rouge { color: var(--accent); }
.masterclass-blanc { color: var(--c-blanc); }
.masterclass-accroche {
  font-family: var(--police-texte);
  font-size: 19px;
  line-height: 1.55;
  color: var(--gris-clair-sur-sombre);
  margin-top: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.masterclass-intervenants {
  font-family: var(--police-meta);
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-clair-sur-sombre);
  margin-top: 16px;
}
.masterclass-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.masterclass-actions .lien-suite { margin-top: 0; color: var(--c-blanc); }