/* ============================================
   SITE COMPLET — maquette Adobe XD « Flux 1 » (20 écrans)
   Chargée après style.css. Uniquement des classes propres aux nouveaux
   modèles : la page de capture (étape 0) n'est pas affectée.
   Couleurs de la maquette : bleu #0546A5, orange #F37021, gris #EFEFEF.
   ============================================ */

:root {
  --site-blue: var(--color-primary-vivid);
  --site-orange: var(--color-secondary);
  --site-grey: #EFEFEF;
  --site-rule: 6px;
}

/* Site complet : contenu de 1610px à 1920px de large, comme la maquette
   (l'étape 0 garde ses 1200px). */
body:not(.capture-mode) {
  --container-max: 1610px;
}

/* Pages du livre : déjà en ligne pendant l'étape 0 (mode capture), même largeur qu'en site complet */
.livre-page,
.chapitre-page {
  --container-max: 1610px;
}

/* --- Éléments communs --- */
.site-btn-small {
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0;
}

/* Titre de section centré, précédé d'un filet bleu (comme « Rien n'est joué… ») */
.site-section-title {
  text-align: center;
  color: var(--site-blue);
  font-size: var(--text-fluid-h2);
  margin-bottom: var(--space-8);
}

.site-section-title::before {
  content: '';
  display: block;
  height: var(--site-rule);
  background: var(--site-blue);
  border-radius: 2px;
  margin-bottom: var(--space-8);
}

/* Bouton lecture : grand triangle blanc, sans pastille (maquette) */
.site-play-icon {
  position: relative;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 36px 0 36px 60px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  transition: transform var(--transition-fast);
}

.video-block-play:hover .site-play-icon,
.video-block-play:focus-visible .site-play-icon {
  transform: scale(1.1);
}

/* Puce « flèche » grise (ex. « une vie plus longue en meilleure santé ») */
.stat-bullet--next {
  background-color: #8C8C8C;
}

.stat-bullet--next::before {
  content: "\2192";
}

/* --- Carte d'actualité --- */
.site-news-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12) var(--space-8);
}

.site-news-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding-bottom: var(--space-6);
  border-bottom: var(--site-rule) solid var(--site-blue);
}

.site-news-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 4;
  overflow: hidden;
  background-color: var(--site-blue);
  margin-bottom: var(--space-4);
}

.site-news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-normal);
}

.site-news-card-image:hover img {
  transform: scale(1.03);
}

.site-news-card-image .site-news-card-placeholder {
  object-fit: contain;
  padding: var(--space-6);
}

.site-news-card-title {
  font-size: var(--text-2xl);
  line-height: 1.15;
  margin-bottom: var(--space-3);
}

.site-news-card-title a {
  color: var(--site-blue);
  text-decoration: none;
}

.site-news-card-title a:hover,
.site-news-card-title a:focus {
  text-decoration: underline;
}

.site-news-card-excerpt {
  color: var(--site-blue);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-4);
  flex-grow: 1;
}

@media (min-width: 768px) {
  .site-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   ACCUEIL (écran Web 1920 – 1)
   ============================================ */

/* Hero : photo à gauche sur toute la hauteur du fond paysage, grand titre (maquette) */
@media (min-width: 1280px) {
  .home-hero .capture-hero-content {
    grid-template-columns: 46% minmax(0, 1fr);
    min-height: 780px;
    column-gap: var(--space-8);
  }

  .home-hero .hero-image {
    top: var(--space-8);
    bottom: calc(-1 * var(--space-4));
    left: 0;
    width: 47%;
    aspect-ratio: auto;
  }

  .home-hero .hero-image img {
    object-position: center bottom;
  }

  .home-hero .capture-hero-text,
  .home-hero .quote-block {
    max-width: 820px;
  }

  .home-hero .capture-hero-text h1 {
    font-size: clamp(3.5rem, 5vw, 7.5rem);
    line-height: 1;
  }

  .home-hero .capture-hero-tagline {
    font-size: 0.46em;
    font-weight: 500;
  }

  .home-hero .lead {
    font-size: var(--text-lg);
    color: var(--site-blue);
    max-width: 30em;
  }

  .home-hero .quote-block p {
    font-size: var(--text-lg);
  }

  .home-hero .quote-block .quote-conclusion {
    font-size: var(--text-2xl);
  }
}

/* Bande bleue sous le hero : vidéo de présentation + « Découvrez Olivier Becht » */
.home-band {
  background-color: var(--site-blue);
  color: #fff;
  padding: var(--space-8) 0 var(--space-12);
}

@media (min-width: 1024px) {
  /* La citation déborde de 80px sous le hero (style.css, .quote-block) */
  .home-hero + .home-band {
    padding-top: calc(var(--space-8) + 80px);
  }
}

.home-video {
  margin-bottom: var(--space-12);
}

/* Vidéos de l'accueil (présentation, entretien) : format des visuels de la maquette */
.home-video-block {
  aspect-ratio: 1603 / 858;
  border-radius: 0;
}

.home-video-block .video-block-play {
  background: none;
}

.home-video .home-video-block .video-block-play img {
  object-position: center 30%;
}

.home-entretien .home-video-block .video-block-play img {
  object-position: center;
}

.home-entretien .video-play-icon {
  width: 120px;
  height: 120px;
  background: rgba(6, 20, 50, 0.75);
}

.home-entretien .video-play-icon::before {
  border-width: 22px 0 22px 34px;
  margin-left: 8px;
}

.home-decouvrir-title {
  text-align: center;
  color: #fff;
  font-size: var(--text-fluid-h2);
  margin-bottom: var(--space-6);
}

.home-decouvrir-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}

.home-decouvrir-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #fff;
  text-decoration: none;
  border-bottom: 4px solid #fff;
  padding-bottom: var(--space-4);
}

.home-decouvrir-card img {
  width: 100%;
  aspect-ratio: 19 / 11;
  object-fit: cover;
  display: block;
  margin-bottom: var(--space-3);
  transition: opacity var(--transition-fast);
}

.home-decouvrir-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1vw + 0.75rem, 1.75rem);
  line-height: 1.1;
}

.home-decouvrir-card:hover img,
.home-decouvrir-card:focus img {
  opacity: 0.85;
}

.home-decouvrir-card:hover .home-decouvrir-card-title,
.home-decouvrir-card:focus .home-decouvrir-card-title {
  text-decoration: underline;
}

.home-decouvrir-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

@media (min-width: 1024px) {
  .home-decouvrir-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-decouvrir-card {
    min-height: 100%;
    padding-bottom: var(--space-8);
  }
}

/* Cartes d'action : la maquette les colle à la bande bleue */
.home-cta {
  padding-top: var(--space-6);
}

/* Grands écrans : tailles de la maquette (conçue à 1920px) */
@media (min-width: 1280px) {
  .home-cta .cta-card {
    padding: var(--space-12) var(--space-12);
    gap: var(--space-12);
    align-items: center;
  }

  .home-cta .cta-card > img {
    width: 140px;
    height: 140px;
  }

  .home-cta .cta-card-body h2 {
    font-size: var(--text-4xl);
  }

  .home-cta .cta-card-body p {
    font-size: var(--text-lg);
  }

  .home-thematiques .thematique-label {
    font-size: var(--text-lg);
  }

  .home-thematiques .thematique-titre {
    font-size: var(--text-3xl);
  }

  .home-thematiques .thematique-puces li {
    font-size: var(--text-base);
  }

  .home-thematiques .thematique-picto {
    width: 130px;
    height: 130px;
  }

  .home-thematiques .thematique-content {
    padding-left: 100px;
    padding-right: var(--space-12);
  }
}

/* Thématiques : bouton « En savoir plus » sous les puces */
.home-thematiques .thematique-text .btn {
  margin-top: var(--space-4);
}

/* Livre */
.home-livre {
  padding: var(--space-8) 0;
}

.home-livre-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-top: var(--site-rule) solid var(--site-blue);
  border-bottom: var(--site-rule) solid var(--site-blue);
  text-align: center;
}

.home-livre-cover {
  width: 200px;
  height: auto;
  flex-shrink: 0;
}

.home-livre-text h2 {
  color: var(--site-blue);
  font-size: var(--text-fluid-h2);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}

.home-livre-subtitle {
  color: var(--site-orange);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.home-livre-text p {
  color: var(--site-blue);
}

.home-livre-text .btn {
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .home-livre-inner {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-12);
    text-align: left;
  }

  .home-livre-cover {
    width: 240px;
  }
}

/* Entretien : même largeur que les autres blocs de la page */
.home-livre + .entretien-intro {
  margin-top: var(--space-8);
}

/* Actualités */
.home-actualites {
  padding: var(--space-8) 0 var(--space-16);
}

/* ============================================
   RUBRIQUES (écrans 14 et 4 à 7 : Olivier Becht)
   Tailles exprimées en vw d'après la maquette conçue à 1920px,
   bornées pour rester lisibles sur mobile.
   ============================================ */

/* --- Sommaire de rubrique (page-sommaire.php, écran 14) --- */
.sommaire-page {
  padding: clamp(3rem, 7vw, 8.5rem) 0 clamp(3rem, 7vw, 8rem);
}

.sommaire-header {
  margin-bottom: clamp(2rem, 2.6vw, 3rem);
}

.sommaire-title {
  color: var(--site-blue);
  font-size: clamp(2.5rem, 6.25vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.15em;
}

.sommaire-intro p {
  color: var(--site-blue);
  font-size: clamp(1rem, 1.3vw, 1.5625rem);
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 0;
}

.sommaire-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 1.6vw, 1.875rem);
}

.sommaire-card {
  position: relative;
  display: block;
  aspect-ratio: 808 / 545;
  overflow: hidden;
  background-color: var(--site-blue);
  color: #fff;
  text-decoration: none;
}

.sommaire-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

/* Bande bleue translucide en bas de la carte, bouton collé au bord inférieur (maquette) */
.sommaire-card-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 35%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: clamp(0.875rem, 2.2vw, 2.625rem) 9.6% 0;
  background-color: rgba(5, 70, 165, 0.8);
}

.sommaire-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 3.125rem);
  line-height: 1.05;
}

.sommaire-card-btn {
  margin-top: auto;
  padding: 0.4em 0.45em;
  background-color: var(--site-orange);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.8125rem, 1.3vw, 1.5625rem);
  line-height: 1;
  text-transform: uppercase;
}

.sommaire-card:hover img,
.sommaire-card:focus-visible img {
  transform: scale(1.03);
}

.sommaire-card:hover .sommaire-card-title,
.sommaire-card:focus-visible .sommaire-card-title {
  text-decoration: underline;
}

.sommaire-card:focus-visible {
  outline: 3px solid var(--site-orange);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .sommaire-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Cartes à demi-largeur sur tablette : textes réduits pour tenir dans la bande */
@media (min-width: 768px) and (max-width: 1279px) {
  .sommaire-card-title {
    font-size: clamp(1.25rem, 2.6vw, 2rem);
  }

  .sommaire-card-btn {
    font-size: var(--text-sm);
  }
}

/* --- Page de rubrique (page-rubrique.php, écrans 4 à 7) --- */

/* Bandeau : photo pleine largeur, bande bleue translucide en bas */
.rubrique-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Proportions de la maquette (1920 × 1045), sans dépasser 85 % de l'écran.
     Pas d'aspect-ratio : le max-height réduirait aussi la largeur. */
  height: clamp(20rem, 54.4vw, 85vh);
  overflow: hidden;
  background-color: var(--site-blue);
  color: #fff;
}

.rubrique-hero--sans-image {
  height: auto;
  padding-top: var(--space-16);
}

.rubrique-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.rubrique-hero-band {
  position: relative;
  width: 100%;
  padding: clamp(1.25rem, 3vw, 3.625rem) 0 clamp(1.25rem, 2.4vw, 2.875rem);
  background-color: rgba(5, 70, 165, 0.8);
}

.rubrique-hero-parent {
  margin: 0;
  padding-bottom: 0.3em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 3.125rem);
  line-height: 1;
}

.rubrique-hero-parent a {
  color: #fff;
  text-decoration: none;
}

.rubrique-hero-parent a:hover,
.rubrique-hero-parent a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.rubrique-hero-title {
  margin: 0.12em 0 0;
  color: #fff;
  font-size: clamp(2.25rem, 6.25vw, 7.5rem);
  font-weight: 700;
  line-height: 1.05;
}

/* Sections : blocs « Groupe » (classe rubrique-section, variantes --gris, --bleu,
   --orange, --encart) contenant des blocs « Colonnes » (classe rubrique-cols) ;
   la colonne photo a la classe rubrique-media. */
.rubrique-section {
  padding: clamp(3rem, 5vw, 6rem) var(--space-4);
}

.rubrique-section > * {
  max-width: calc(var(--container-max) - 2 * var(--space-4));
  margin-left: auto;
  margin-right: auto;
}

.rubrique-section > * + * {
  margin-top: clamp(2.5rem, 3.5vw, 4rem);
}

.rubrique-section h2 {
  color: var(--site-blue);
  font-size: clamp(1.625rem, 2.86vw, 3.4375rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 0.8em;
}

.rubrique-section p {
  color: var(--site-blue);
  font-size: clamp(1rem, 1.3vw, 1.5625rem);
  font-weight: 500;
  line-height: 1.32;
  margin-bottom: 1.3em;
}

.rubrique-section .wp-block-column > :last-child {
  margin-bottom: 0;
}

.rubrique-section--gris {
  background-color: var(--site-grey);
}

.rubrique-section--bleu {
  background-color: var(--site-blue);
}

.rubrique-section--orange {
  background-color: var(--site-orange);
}

.rubrique-section--bleu h2,
.rubrique-section--bleu p,
.rubrique-section--orange h2,
.rubrique-section--orange p,
.rubrique-section--encart h2,
.rubrique-section--encart p {
  color: #fff;
}

.rubrique-section--orange h2 {
  font-size: clamp(2rem, 4.17vw, 5rem);
  line-height: 1.02;
  margin-bottom: 0.6em;
}

/* Colonnes : empilées sur mobile, côte à côte ensuite (texte ≈ 50 %, photo 44 %) */
.rubrique-cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.rubrique-cols > .wp-block-column {
  min-width: 0;
}

.rubrique-body .wp-block-image {
  margin: 0 0 var(--space-8);
}

.rubrique-body .wp-block-image:last-child {
  margin-bottom: 0;
}

.rubrique-body .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Photo plus étroite que sa colonne, éventuellement calée à droite (classes ajoutées
   au bloc Image dans « Avancé → Classes CSS additionnelles ») */
.rubrique-body .wp-block-image.rubrique-img--etroite {
  width: 70%;
}

.rubrique-body .wp-block-image.rubrique-img--droite {
  margin-left: auto;
}

.rubrique-body .wp-block-column > * + .wp-block-image {
  margin-top: var(--space-8);
}

@media (min-width: 900px) {
  .rubrique-cols {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(2rem, 4.9vw, 5.875rem);
  }

  .rubrique-cols > .wp-block-column {
    flex: 1 1 0;
  }

  .rubrique-cols > .rubrique-media {
    flex: 0 0 44%;
  }

  /* Texte aligné à droite (réglage d'alignement des blocs) seulement quand les colonnes
     sont côte à côte : sur mobile tout reste aligné à gauche */
  .rubrique-body .has-text-align-right {
    text-align: right;
  }
}

/* Encart orange (« Refonder notre pays… ») : à cheval sur la section grise précédente,
   portrait détouré calé en bas à droite */
.rubrique-section--encart {
  padding-top: 0;
  background: linear-gradient(to bottom, var(--site-grey) 0, var(--site-grey) 3rem, #fff 3rem);
}

.rubrique-section--encart .rubrique-cols {
  gap: var(--space-6);
  padding: clamp(2rem, 4vw, 4.5rem) clamp(1.5rem, 6vw, 7rem) 0;
  background-color: var(--site-orange);
}

.rubrique-section--encart .rubrique-media img {
  max-width: 420px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .rubrique-section--encart {
    background: linear-gradient(to bottom, var(--site-grey) 0, var(--site-grey) 45%, #fff 45%);
  }

  .rubrique-section--encart .rubrique-cols {
    align-items: flex-end;
    padding-right: 0;
  }

  .rubrique-section--encart .rubrique-cols > .wp-block-column:not(.rubrique-media) {
    align-self: center;
    padding-bottom: clamp(2rem, 4vw, 4.5rem);
  }

  .rubrique-section--encart .rubrique-cols > .rubrique-media {
    flex-basis: 50%;
  }

  .rubrique-section--encart .rubrique-media img {
    max-width: none;
  }
}

/* ============================================
   PAGES HORS MAQUETTE (page.php, site complet)
   Comité de soutien, mentions légales, presse, FAQ, don, ressources…
   Même bandeau et même typographie que les rubriques de la maquette
   (écrans 4 à 7). En mode capture, page.php garde la charte de l'étape 0.
   ============================================ */
.page-site-main {
  padding-top: clamp(3rem, 5vw, 6rem);
  padding-bottom: clamp(3rem, 5vw, 6rem);
}

.page-site .page-body {
  color: var(--site-blue);
}

.page-site .page-body p,
.page-site .page-body li,
.page-site .page-body dd,
.page-site .page-body dt {
  font-size: clamp(1rem, 1.3vw, 1.5625rem);
  font-weight: 500;
  line-height: 1.32;
}

/* Longueur de ligne lisible pour les textes courants */
.page-site .page-body > p,
.page-site .page-body > ul,
.page-site .page-body > ol,
.page-site .page-body > h2,
.page-site .page-body > h3,
.page-site .page-body > h4 {
  max-width: 62rem;
}

.page-site .page-body p {
  color: var(--site-blue);
  margin-bottom: 1.3em;
}

.page-site .page-body .lead {
  color: var(--site-blue);
  font-size: clamp(1.125rem, 1.6vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
}

.page-site .page-body h2 {
  color: var(--site-blue);
  font-size: clamp(1.625rem, 2.86vw, 3.4375rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 0.8em;
}

.page-site .page-body h3 {
  color: var(--site-blue);
  font-size: clamp(1.25rem, 1.8vw, 2.1875rem);
  font-weight: 700;
  line-height: 1.15;
}

.page-site .page-body h4 {
  color: var(--site-orange);
}

.page-site .page-body strong {
  color: inherit;
}

.page-site .page-body a:not(.btn):not(.wp-block-button__link) {
  color: var(--site-blue);
}

.page-site .page-body a:not(.btn):not(.wp-block-button__link):hover,
.page-site .page-body a:not(.btn):not(.wp-block-button__link):focus-visible {
  color: var(--site-orange);
}

/* Boutons carrés en capitales, comme « En savoir plus » de la maquette :
   orange (principal) ou bleu (secondaire) */
.page-site .page-body .btn,
.page-site .page-body .wp-block-button__link {
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  background-color: var(--site-orange);
  color: #fff;
  border: none;
}

.page-site .page-body .btn-secondary,
.page-site .page-body .is-style-outline .wp-block-button__link {
  background-color: var(--site-blue);
  color: #fff;
  border: none;
}

.page-site .page-body .btn:hover,
.page-site .page-body .btn:focus-visible,
.page-site .page-body .wp-block-button__link:hover,
.page-site .page-body .wp-block-button__link:focus-visible {
  background-color: #c25a1a;
  color: #fff;
}

.page-site .page-body .btn-secondary:hover,
.page-site .page-body .btn-secondary:focus-visible,
.page-site .page-body .is-style-outline .wp-block-button__link:hover,
.page-site .page-body .is-style-outline .wp-block-button__link:focus-visible {
  background-color: #04367f;
  color: #fff;
}

.page-site .page-body .flex {
  flex-wrap: wrap;
}

/* Cartes : aplats gris de la maquette */
.page-site .page-body .card {
  background-color: var(--site-grey);
  padding: clamp(1.25rem, 2vw, 2.5rem);
}

.page-site .page-body .card h2,
.page-site .page-body .card h3,
.page-site .page-body .card-title {
  color: var(--site-blue);
  font-size: clamp(1.25rem, 1.8vw, 2.1875rem);
}

.page-site .page-body .card p {
  color: var(--site-blue);
  margin-bottom: 0;
}

/* Tableaux : en-têtes bleus, lignes grises */
.page-site .page-body th,
.page-site .page-body thead td {
  background-color: var(--site-blue);
}

.page-site .page-body tbody tr:nth-child(even) td {
  background-color: var(--site-grey);
}

/* Encadrés (bulletin de don, informations légales) : aplat gris */
.page-site .page-body .donation-bulletin,
.page-site .page-body .legal-block {
  background-color: var(--site-grey);
  border: none;
  border-radius: 0;
}

.page-site .page-body .legal-block p {
  font-size: clamp(0.875rem, 1vw, 1.125rem);
}

/* Formulaire [newsletter_form] dans une page : une seule colonne, largeur limitée
   (hors du bloc « Restez informé », il n'a pas de conteneur .newsletter-form) */
.page-site .page-body .newsletter-form-ajax {
  max-width: 40rem;
}

.page-site .page-body .newsletter-fields {
  grid-template-columns: minmax(0, 1fr);
}

.page-site .page-body .newsletter-submit {
  justify-content: flex-start;
}

/* ============================================
   LE LIVRE (écrans 8 et 9 de la grille XD, artboards « Web 1920 – 18 » et « – 19 »)
   page-livre.php (liste des parties) et page-chapitre.php (lecture d'une partie)
   ============================================ */

/* Photo du livre pleine largeur : 1920 × 1194 sur la liste, bandeau 1920 × 538 en lecture */
.livre-photo {
  height: clamp(16rem, 62.2vw, 74.625rem);
  overflow: hidden;
  background-color: var(--site-grey);
}

.livre-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.livre-photo--bandeau {
  height: clamp(10rem, 28vw, 33.625rem);
}

/* Encart gris à cheval sur la photo */
.livre-container {
  position: relative;
  margin-top: calc(-1 * clamp(3rem, 18.4vw, 22rem));
  margin-bottom: clamp(3rem, 7.6vw, 9.125rem);
}

.livre-encart {
  background-color: #F3F3F3;
  padding: clamp(1.75rem, 3.1vw, 3.75rem) clamp(1.25rem, 6.6vw, 7.9375rem) clamp(2.5rem, 7vw, 8.5rem);
  color: var(--site-blue);
}

.livre-intro {
  margin-bottom: clamp(1.5rem, 2.6vw, 3.125rem);
}

.livre-intro h1,
.livre-intro .wp-block-heading {
  color: var(--site-blue);
  font-size: clamp(2rem, 4.17vw, 5rem);
  font-weight: 800;
  line-height: 1.09;
  margin: 0;
}

.livre-intro p {
  color: var(--site-orange);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 3.125rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0.2em 0 0;
}

.livre-parties {
  list-style: none;
  margin: 0;
  padding: 0;
}

.livre-partie {
  border-top: 1px solid var(--site-blue);
  padding: clamp(1.25rem, 1.95vw, 2.35rem) 0;
}

.livre-partie:last-child {
  padding-bottom: 0;
}

.livre-partie-titre {
  color: #B3B3B3;
  font-size: clamp(1.25rem, 2.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}

.livre-partie.is-disponible .livre-partie-titre {
  color: var(--site-blue);
}

.livre-partie-numero {
  font-weight: 400;
}

.livre-partie-dispo {
  color: var(--site-orange);
  font-size: clamp(0.875rem, 1.3vw, 1.5625rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0.7em 0 0.9em;
}

.livre-partie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* Boutons orange en capitales (gris quand la partie n'est pas encore disponible) */
.livre-btn {
  display: inline-flex;
  align-items: center;
  min-height: clamp(2.5rem, 3.07vw, 3.6875rem);
  padding: 0.3em 0.75em;
  background-color: var(--site-orange);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 1.3vw, 1.5625rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

a.livre-btn:hover,
a.livre-btn:focus-visible {
  background-color: #c25a1a;
  color: #fff;
}

a.livre-btn:focus-visible {
  outline: 3px solid var(--site-blue);
  outline-offset: 2px;
}

.livre-btn.is-inactif {
  background-color: #B3B3B3;
  cursor: default;
}

/* --- Lecture d'une partie (écran 9, artboard « Web 1920 – 19 ») --- */
.chapitre-container {
  padding-top: clamp(2rem, 5.5vw, 6.625rem);
  padding-bottom: clamp(3rem, 9.7vw, 11.625rem);
  color: var(--site-blue);
}

.chapitre-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: clamp(1.5rem, 3.1vw, 3.75rem);
  border-bottom: 1px solid var(--site-blue);
  margin-bottom: clamp(2rem, 4vw, 4.8rem);
}

.chapitre-titre {
  color: var(--site-blue);
  font-size: clamp(2.25rem, 4.69vw, 5.625rem);
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.chapitre-numero {
  display: block;
  font-weight: 400;
}

.chapitre-pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--site-orange);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.56vw, 1.875rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  text-transform: uppercase;
  text-decoration: none;
}

.chapitre-pdf img {
  width: clamp(2.75rem, 3.44vw, 4.125rem);
  height: auto;
}

.chapitre-pdf:hover span,
.chapitre-pdf:focus-visible span {
  text-decoration: underline;
}

.chapitre-texte p {
  color: var(--site-blue);
  font-size: clamp(1rem, 1.3vw, 1.5625rem);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 1.4em;
}

.chapitre-texte h2 {
  color: var(--site-blue);
  font-size: clamp(1.5rem, 2.6vw, 3.125rem);
  font-weight: 700;
  line-height: 1.32;
  margin: 1.6em 0 0.6em;
}

/* Intertitres des parties (en italique dans les PDF du livre) : Titre H3 */
.chapitre-texte h3 {
  color: var(--site-blue);
  font-size: clamp(1.25rem, 1.85vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 1.5em 0 0.6em;
}

.chapitre-texte sup {
  font-size: 0.6em;
  line-height: 0;
}

.chapitre-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  border-top: 1px solid var(--site-blue);
  padding-top: clamp(1.5rem, 2.76vw, 3.3rem);
  margin-top: clamp(2rem, 3vw, 3.5rem);
}

.chapitre-nav-suite {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ============================================
   LE PROJET FRANCE (écran 7 de la grille, artboard « Web 1920 – 17 »)
   page-projet-france.php — colonnes en fractions de la maquette (conteneur de 1610px)
   ============================================ */

.projet-page {
  padding-top: clamp(3rem, 7vw, 8.5rem);
}

.projet-title {
  color: var(--site-orange);
}

.projet-header .sommaire-intro {
  margin-top: clamp(0.5rem, 1.7vw, 2rem);
}

/* Les 5 refondations : picto, grand numéro, texte et bouton */
.projet-refondations,
.projet-medias {
  list-style: none;
  margin: 0;
  padding: 0;
}

.projet-refondations {
  margin-top: clamp(2rem, 3.33vw, 4rem);
}

.projet-refondation,
.projet-media {
  display: grid;
  grid-template-columns: clamp(4.5rem, 12.2vw, 14.625rem) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-4);
  padding: clamp(1.5rem, 2.35vw, 2.8rem) 0;
}

.projet-refondation + .projet-refondation,
.projet-media + .projet-media {
  border-top: 1px solid var(--site-blue);
}

.projet-picto {
  display: block;
  width: 100%;
  height: auto;
}

.projet-numero {
  align-self: center;
  color: var(--site-orange);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7.3vw, 8.75rem);
  font-weight: 700;
  line-height: 1;
}

.projet-refondation-texte {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
}

.projet-refondation-texte p,
.projet-media-texte p,
.projet-livre-texte p {
  color: var(--site-blue);
  font-size: clamp(1rem, 1.3vw, 1.5625rem);
  font-weight: 500;
  line-height: 1.32;
  margin: 0 0 1.3em;
}

/* Encart du livre sur fond gris */
.projet-livre {
  background-color: #F3F3F3;
  margin-top: clamp(2rem, 6.35vw, 7.625rem);
}

.projet-livre-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-top: clamp(2rem, 2.3vw, 2.75rem);
  padding-bottom: clamp(2rem, 2.3vw, 2.75rem);
}

.projet-livre-couverture {
  display: block;
  width: min(13rem, 60%);
  height: auto;
}

.projet-livre-texte h2 {
  color: var(--site-blue);
  font-size: clamp(1.625rem, 2.86vw, 3.4375rem);
  font-weight: 800;
  line-height: 1.09;
  margin: 0;
}

.projet-livre-texte .projet-livre-sous-titre {
  color: var(--site-orange);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.875vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0.25em 0 0.3em;
}

/* En vidéo / En podcasts */
.projet-medias {
  padding: clamp(1rem, 1.6vw, 1.9rem) 0 clamp(2.5rem, 5vw, 6rem);
}

.projet-media-texte h2 {
  color: var(--site-blue);
  font-size: clamp(1.625rem, 2.86vw, 3.4375rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.3em;
}

.projet-media-texte .livre-btn {
  margin-top: 0.2em;
}

@media (min-width: 768px) {
  /* [113] picto 234 [75] numéro 153 texte 1035 (dont 920 de texte) */
  .projet-refondation {
    grid-template-columns: 113fr 234fr 75fr 153fr 1035fr;
    column-gap: 0;
  }

  .projet-refondation .projet-picto {
    grid-column: 2;
  }

  .projet-numero {
    grid-column: 4;
    align-self: start;
    margin-top: 0.22em;
  }

  .projet-refondation-texte {
    grid-column: 5;
    margin-top: clamp(1rem, 3.6vw, 4.3rem);
    padding-right: 11%;
  }

  /* [93] couverture 389 [93] texte 1035 */
  .projet-livre-inner {
    grid-template-columns: 93fr 389fr 93fr 1035fr;
    align-items: center;
    gap: 0;
  }

  .projet-livre-couverture {
    grid-column: 2;
    width: 100%;
  }

  .projet-livre-texte {
    grid-column: 4;
  }

  /* [113] picto 234 [62] texte 1201 */
  .projet-media {
    grid-template-columns: 113fr 234fr 62fr 1201fr;
    column-gap: 0;
  }

  .projet-media .projet-picto {
    grid-column: 2;
  }

  .projet-media-texte {
    grid-column: 4;
    padding-top: 0.5em;
  }
}

/* ============================================
   LES 5 REFONDATIONS (écrans 12 à 16 de la grille : santé, pacte démocratique et
   territorial, énergie, sécurité, refondation sociale — artboards « Web 1920 – 8 » à « – 12 »)
   page-refondation.php : bandeau des rubriques en orange avec picto blanc,
   puis blocs de l'éditeur (classes rubrique-*, section d'ouverture refondation-intro).
   ============================================ */

/* Bandeau : photo 1920 × 944, bande orange translucide de 233px */
.refondation-hero {
  height: clamp(20rem, 49.17vw, 85vh);
}

.refondation-hero .rubrique-hero-image {
  object-position: center;
}

.refondation-hero .rubrique-hero-band {
  padding: clamp(1rem, 2.45vw, 2.9375rem) 0 clamp(1rem, 2.08vw, 2.5rem);
  background-color: rgba(243, 112, 33, 0.8);
}

.refondation-hero-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 2.19vw, 2.625rem);
}

/* Picto 240px qui déborde au-dessus de la bande */
.refondation-hero-picto {
  flex: 0 0 auto;
  width: clamp(4rem, 12.5vw, 15rem);
  height: auto;
  margin-top: -5.05vw;
}

.refondation-hero-texte {
  flex: 1 1 auto;
  min-width: 0;
}

.refondation-hero .rubrique-hero-parent {
  padding-bottom: 0.08em;
}

.refondation-hero .rubrique-hero-title {
  font-size: clamp(1.75rem, 4.06vw, 4.875rem);
}

/* Section d'ouverture orange : photo de la vidéo (1602 × 858), titre et texte centrés */
.refondation-intro {
  padding-top: clamp(2rem, 3.9vw, 4.6875rem);
  padding-bottom: clamp(3rem, 5.5vw, 6.5rem);
}

.refondation-intro h2 {
  font-size: clamp(1.625rem, 2.86vw, 3.4375rem);
  line-height: 1.04;
  margin-bottom: 0.85em;
}

.refondation-intro .has-text-align-center {
  text-align: center;
}

/* 61px entre la photo et le titre ; pas de marge sous le dernier paragraphe
   (les blocs sont dans .wp-block-group__inner-container, thème sans theme.json) */
.refondation-intro .wp-block-image.refondation-video,
.refondation-intro .wp-block-embed {
  margin-bottom: clamp(1.5rem, 3.2vw, 3.8rem);
}

.refondation-intro .wp-block-group__inner-container > :last-child {
  margin-bottom: 0;
}

/* Bouton lecture (disque gris en produit + triangle blanc) : seulement quand la photo
   renvoie vers la vidéo (lien ajouté au bloc Image) */
.refondation-video a {
  position: relative;
  display: block;
}

.refondation-video a::before,
.refondation-video a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.refondation-video a::before {
  width: 17.1%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #6D6D6D;
  mix-blend-mode: multiply;
  transition: background-color 0.2s ease;
}

.refondation-video a::after {
  width: 6.9%;
  aspect-ratio: 110 / 126;
  margin-left: 0.9%;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.refondation-video a:hover::before,
.refondation-video a:focus-visible::before {
  background-color: var(--site-blue);
}

/* Vidéo intégrée (bloc Contenu embarqué) à la place de la photo */
.refondation-intro .wp-block-embed {
  margin: 0;
}

.refondation-intro .wp-block-embed iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Sections de texte : un peu plus serrées que les rubriques Olivier Becht */
.refondation-page .rubrique-section:not(.refondation-intro) {
  padding-top: clamp(3rem, 4.2vw, 5rem);
  padding-bottom: clamp(3rem, 4.2vw, 5rem);
}

/* ============================================
   MAQUETTE MOBILE (XD « Flux 1 » responsive, artboards « iPhone 14 Pro Max », 430px)
   Grille mobile : 1 accueil, 2 menu ouvert, 3 Olivier Becht, 4 à 7 rubriques,
   8 Le Projet France, 9 le livre, 10 lecture d'une partie, 13 à 17 les 5 refondations.
   Cotes de la maquette à 430px, réduites proportionnellement en dessous : min(Npx, N/4.3 vw).
   En-tête et pied de page : site complet seulement (l'étape 0 garde sa maquette mobile).
   ============================================ */

@media (max-width: 1023px) {
  :root {
    --m-gutter: min(50px, 11.63vw);
    --m-space: min(35px, 8.14vw);
    --m-header-h: min(127px, 29.53vw);
    --m-header-side: min(85px, 19.77vw);
  }

  /* --- En-tête : carré orange, logo sur fond bleu, bouton « Menu » (écrans 1 et 2) --- */
  body:not(.capture-mode) .main-nav,
  body:not(.capture-mode) .main-nav.scrolled {
    padding: 0;
  }

  body:not(.capture-mode) .main-nav::before {
    width: var(--m-header-side);
  }

  body:not(.capture-mode) .main-nav > .container {
    height: var(--m-header-h);
    max-width: none;
    padding: 0;
    align-items: stretch;
    gap: 0;
  }

  body:not(.capture-mode) .site-branding {
    align-items: stretch;
    margin: 0;
    padding-left: var(--m-header-side);
  }

  body:not(.capture-mode) .site-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(260px, 60.47vw);
    overflow: hidden;
    border-radius: 0;
    background-color: var(--site-blue);
  }

  /* Le SVG a son propre fond bleu et des marges internes (logo = 73 % de sa largeur) :
     agrandi à 292px pour 213px de logo visible, recadré par le bloc 260 × 127 */
  body:not(.capture-mode) .site-branding .site-logo img {
    flex: 0 0 auto;
    width: min(292px, 67.9vw);
    max-width: none;
    height: auto;
    margin-top: min(9px, 2.09vw);
  }

  body:not(.capture-mode) .capture-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    width: var(--m-header-side);
    height: auto;
    min-height: 0;
    margin-left: auto;
    padding: calc(var(--m-header-h) * 0.323) 0 0;
    border-radius: 0;
    background-color: #fff;
    color: var(--site-orange);
  }

  body:not(.capture-mode) .capture-menu-toggle:hover,
  body:not(.capture-mode) .capture-menu-toggle:focus-visible {
    background-color: #fff;
  }

  body:not(.capture-mode) .capture-menu-toggle[aria-expanded="true"] {
    background-color: var(--site-blue);
    color: #fff;
  }

  /* Trois barres orange de 40 × 8 (blanches menu ouvert, sans croix : maquette) */
  body:not(.capture-mode) .capture-menu-toggle .menu-icon,
  body:not(.capture-mode) .capture-menu-toggle .menu-icon::before,
  body:not(.capture-mode) .capture-menu-toggle .menu-icon::after,
  body:not(.capture-mode) .capture-menu-toggle[aria-expanded="true"] .menu-icon {
    width: min(40px, 9.3vw);
    height: calc(var(--m-header-h) * 0.063);
    border-radius: 0;
    background-color: currentColor;
  }

  body:not(.capture-mode) .capture-menu-toggle .menu-icon {
    margin-top: calc(var(--m-header-h) * 0.118);
  }

  body:not(.capture-mode) .capture-menu-toggle .menu-icon::before,
  body:not(.capture-mode) .capture-menu-toggle[aria-expanded="true"] .menu-icon::before {
    top: calc(var(--m-header-h) * -0.118);
    transform: none;
  }

  body:not(.capture-mode) .capture-menu-toggle .menu-icon::after,
  body:not(.capture-mode) .capture-menu-toggle[aria-expanded="true"] .menu-icon::after {
    top: calc(var(--m-header-h) * 0.118);
    transform: none;
  }

  body:not(.capture-mode) .capture-menu-toggle-label {
    margin-top: calc(var(--m-header-h) * 0.173);
    font-family: var(--font-display);
    font-size: min(14px, 3.26vw);
    font-weight: 500;
    line-height: 1.36;
    letter-spacing: 0;
  }

  /* --- Menu ouvert (écran 2) : actions, réseaux, puis les pages en liste à gauche --- */
  body:not(.capture-mode) .capture-menu-panel {
    max-height: calc(100vh - var(--m-header-h));
    max-height: calc(100dvh - var(--m-header-h));
    padding: min(37px, 8.6vw) 0 min(88px, 20.47vw);
    box-shadow: none;
  }

  body:not(.capture-mode) .capture-menu-panel .container {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 0 var(--m-gutter);
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-actions {
    order: 1;
    gap: 0;
    margin: 0 calc(var(--m-gutter) * -0.3);
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-actions li + li {
    border-left: 1px solid #fff;
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-actions a {
    justify-content: flex-start;
    min-height: min(155px, 36.05vw);
    gap: min(15px, 3.49vw);
    padding: min(15px, 3.49vw) 4px min(20px, 4.65vw);
    font-size: min(14px, 3.26vw);
    line-height: 1.07;
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-actions img {
    width: min(60px, 13.95vw);
    height: min(60px, 13.95vw);
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-social {
    order: 2;
    margin-top: min(19px, 4.42vw);
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-social .social-links {
    gap: min(6px, 1.4vw);
  }

  body:not(.capture-mode) .capture-menu-panel .social-link--brand img {
    width: min(38px, 8.84vw);
    height: min(38px, 8.84vw);
  }

  body:not(.capture-mode) .capture-menu-panel .social-link--mail {
    margin-left: min(25px, 5.81vw);
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-nav {
    order: 3;
    align-self: stretch;
    margin: min(66px, 15.35vw) 0 0;
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-nav-list {
    align-items: flex-start;
    margin: 0;
    padding: 0;
    border-bottom: none;
    text-align: left;
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-nav-list > li + li {
    margin-top: min(30px, 6.98vw);
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-nav-list a {
    display: block;
    min-height: 0;
    padding: 0;
    font-size: min(17px, 3.95vw);
    font-weight: 800;
    line-height: 2.06;
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-nav-list .sub-menu {
    align-items: flex-start;
    margin: 0;
  }

  body:not(.capture-mode) .capture-menu-panel .capture-menu-nav-list .sub-menu a {
    padding: 0;
    font-size: min(17px, 3.95vw);
    font-weight: 300;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  body:not(.capture-mode) .container,
  .livre-page .container,
  .chapitre-page .container {
    padding-left: var(--m-gutter);
    padding-right: var(--m-gutter);
  }

  /* --- Pied de page : logo, réseaux et liens centrés --- */
  body:not(.capture-mode) .site-footer--light .footer-bottom .container {
    padding-top: min(60px, 13.95vw);
    padding-bottom: min(66px, 15.35vw);
  }

  body:not(.capture-mode) .footer-bottom .footer-capture-row {
    gap: min(32px, 7.44vw);
  }

  body:not(.capture-mode) .site-footer--light {
    padding: 0;
  }

  body:not(.capture-mode) .footer-capture-brand {
    gap: min(33px, 7.67vw);
  }

  /* Le SVG du logo a des marges internes (logo = 73 % de sa largeur, de 21,5 % à 72 %
     de sa hauteur) : 387px de large pour 282px de logo visible, marges compensées */
  body:not(.capture-mode) .footer-capture-logo {
    --footer-logo: min(387px, 90vw);
    width: var(--footer-logo);
    max-width: none;
    margin: calc(var(--footer-logo) * -0.124) 0 calc(var(--footer-logo) * -0.163);
  }

  body:not(.capture-mode) .footer-capture-brand .social-links {
    gap: min(6px, 1.4vw);
  }

  body:not(.capture-mode) .site-footer--light .social-link--brand img {
    width: min(38px, 8.84vw);
    height: min(38px, 8.84vw);
  }

  body:not(.capture-mode) .site-footer--light .social-link--mail {
    margin-left: min(30px, 6.98vw);
  }

  body:not(.capture-mode) .site-footer--light .footer-legal {
    gap: 0;
    margin-bottom: 0;
  }

  body:not(.capture-mode) .site-footer--light .footer-legal a {
    font-size: 12px;
    line-height: 1.5;
  }

  /* --- Accueil (écran 1) --- */
  .home-hero {
    padding: 0;
    background-color: #fff;
  }

  body:not(.capture-mode) .home-hero .container,
  .home-hero .capture-hero-content {
    padding: 0;
  }

  /* Photo 430 × 347 : paysage en fond, portrait recadré sur le buste */
  .home-hero .hero-image {
    position: relative;
    max-width: none;
    width: 100%;
    height: min(347px, 80.7vw);
    margin: 0;
    overflow: hidden;
  }

  .home-hero .hero-image img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 112.6%;
    max-width: none;
    height: auto;
    transform: translateX(-50%);
  }

  .home-hero .capture-hero-text {
    padding: min(7px, 1.63vw) var(--m-gutter) 0;
    border-radius: 0;
  }

  .home-hero .capture-hero-text h1 {
    font-size: min(50px, 11.63vw);
    line-height: 1;
    margin-bottom: 0;
  }

  .home-hero .capture-hero-tagline {
    margin-top: 0.3em;
    font-size: 0.4em;
    font-weight: 500;
    line-height: 1;
  }

  .home-hero .lead {
    margin: min(7px, 1.63vw) 0 0;
    color: var(--site-blue);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
  }

  /* Citation orange pleine largeur, guillemets bleus à l'intérieur */
  .home-hero .quote-block {
    margin: min(28px, 6.51vw) 0 0;
    padding: min(66px, 15.35vw) var(--m-gutter) min(38px, 8.84vw);
    border-radius: 0;
  }

  .home-hero .quote-mark {
    width: min(46px, 10.7vw);
    height: auto;
  }

  .home-hero .quote-mark-open {
    top: min(8px, 1.86vw);
    left: var(--m-gutter);
  }

  .home-hero .quote-mark-close {
    right: var(--m-gutter);
    bottom: min(10px, 2.33vw);
  }

  .home-hero .quote-block p {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1.5em;
  }

  .home-hero .quote-block .quote-conclusion {
    padding: 0.3em 0 0;
    margin: 0 0 min(22px, 5.12vw);
    border-top: 1px solid #fff;
    border-bottom: none;
    font-size: min(20px, 4.65vw);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
  }

  .home-hero .quote-block footer {
    font-size: 12px;
    font-weight: 500;
  }

  /* Bande bleue : vidéo pleine largeur puis « Découvrez Olivier Becht » en une colonne */
  .home-band {
    padding: min(24px, 5.58vw) 0 min(66px, 15.35vw);
  }

  .home-video {
    margin-bottom: min(27px, 6.28vw);
  }

  body:not(.capture-mode) .home-video .container {
    padding: 0;
  }

  .home-video-block {
    aspect-ratio: 430 / 229;
  }

  .home-decouvrir-title {
    font-size: min(30px, 6.98vw);
    line-height: 1;
    margin-bottom: min(37px, 8.6vw);
  }

  .home-decouvrir-list {
    grid-template-columns: minmax(0, 1fr);
    gap: min(21px, 4.88vw);
  }

  .home-decouvrir-card {
    padding-bottom: 0;
  }

  .home-decouvrir-card img {
    aspect-ratio: 330 / 160;
    margin-bottom: min(7px, 1.63vw);
  }

  .home-decouvrir-card-title {
    font-size: min(20px, 4.65vw);
    line-height: min(50px, 11.63vw);
  }

  /* Cartes d'action : picto à gauche, titre et bouton à droite ; le formulaire
     de l'infolettre reprend toute la largeur */
  .home-cta {
    padding: 0;
  }

  body:not(.capture-mode) .home-cta .container {
    padding: 0;
  }

  .home-cta .cta-card {
    display: grid;
    grid-template-columns: min(82px, 19.07vw) minmax(0, 1fr);
    align-items: start;
    gap: 0 min(19px, 4.42vw);
    padding: min(19px, 4.42vw) var(--m-gutter) min(25px, 5.81vw);
    background-color: #E8E8E8;
    text-align: left;
  }

  .home-cta .cta-card:nth-child(even) {
    background-color: #F8F8F8;
  }

  .home-cta .cta-card > img {
    grid-row: 1 / span 2;
    width: 100%;
    height: auto;
    margin-top: min(8px, 1.86vw);
  }

  .home-cta .cta-card-body {
    display: contents;
  }

  .home-cta .cta-card-body h2 {
    grid-column: 2;
    margin: 0;
    color: var(--site-blue);
    font-size: min(30px, 6.98vw);
    line-height: 1;
  }

  .home-cta .cta-card-body > .btn {
    grid-column: 2;
    justify-self: start;
    min-height: 39px;
    margin-top: min(10px, 2.33vw);
    padding: 0 1.1em;
    border-radius: 0;
    font-size: 13px;
  }

  .home-cta .cta-card-body > p,
  .home-cta .cta-card-body > form {
    grid-column: 1 / -1;
  }

  .home-cta .cta-card-body > p {
    margin: min(16px, 3.72vw) 0 min(10px, 2.33vw);
    color: var(--site-blue);
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
  }

  .home-cta #newsletter-form-etape0 .newsletter-compact-row {
    max-width: none;
  }

  .home-cta #newsletter-form-etape0 .newsletter-compact-row input[type="email"] {
    min-height: 37px;
    padding: 0 min(19px, 4.42vw);
    border: none;
    border-radius: 0;
    font-size: 12px;
  }

  .home-cta #newsletter-form-etape0 .newsletter-compact-row .btn {
    width: min(81px, 18.84vw);
    min-height: 37px;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
  }

  .home-cta .newsletter-consent-list {
    max-width: none;
    margin-top: min(28px, 6.51vw);
    gap: min(18px, 4.19vw);
  }

  .home-cta .newsletter-consent-list label {
    gap: min(17px, 3.95vw);
    font-size: 12px;
    line-height: 1.5;
  }

  /* Cases blanches de 30 × 30 (maquette), coche bleue */
  .home-cta .newsletter-consent-list input {
    appearance: none;
    width: 30px;
    height: 30px;
    margin: 0;
    border: 1px solid #fff;
    background: #fff center / 70% no-repeat;
    cursor: pointer;
  }

  .home-cta .newsletter-consent-list input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%230546A5' stroke-width='3.5'/%3E%3C/svg%3E");
  }

  .home-cta .newsletter-consent-list input:focus-visible {
    outline: 2px solid var(--site-blue);
    outline-offset: 2px;
  }

  .home-cta .newsletter-consent-more {
    max-width: none;
    margin-top: min(28px, 6.51vw);
  }

  .home-cta .newsletter-consent-more a {
    color: var(--site-blue);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
  }

  /* « Rien n'est joué, tout commence ! » : photo, encart gris, pastille à cheval */
  .home-thematiques.section {
    padding: min(42px, 9.77vw) 0 0;
  }

  .home-thematiques .thematiques-title {
    margin-bottom: min(30px, 6.98vw);
    font-size: min(30px, 6.98vw);
    line-height: 1;
  }

  .home-thematiques .thematiques-title::before {
    height: 9px;
    border-radius: 0;
    margin-bottom: min(11px, 2.56vw);
    background: var(--site-blue);
  }

  .home-thematiques .thematiques-list {
    gap: min(20px, 4.65vw);
  }

  .home-thematiques .thematique-row {
    background: none;
  }

  .home-thematiques .thematique-image {
    aspect-ratio: 330 / 213;
  }

  .home-thematiques .thematique-content {
    position: static;
    display: block;
    padding: min(23px, 5.35vw) min(30px, 6.98vw) min(25px, 5.81vw);
    background-color: var(--site-grey);
  }

  .home-thematiques .thematique-picto {
    position: absolute;
    z-index: 1;
    top: calc((100vw - 2 * var(--m-gutter)) * 0.6455 - min(77px, 17.91vw));
    right: min(24px, 5.58vw);
    width: min(100px, 23.26vw);
    height: auto;
  }

  .home-thematiques .thematique-label {
    padding-bottom: 4px;
    margin-bottom: min(11px, 2.56vw);
    border-bottom-width: 1px;
    color: var(--site-blue);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
  }

  .home-thematiques .thematique-titre {
    margin-bottom: min(14px, 3.26vw);
    font-size: min(20px, 4.65vw);
    font-weight: 700;
    line-height: 1.05;
  }

  .home-thematiques .thematique-puces {
    gap: min(10px, 2.33vw);
  }

  .home-thematiques .thematique-puces li {
    gap: 7px;
    color: var(--site-blue);
    font-size: 12px;
    line-height: 1.17;
  }

  .home-thematiques .stat-bullet {
    width: 24px;
    height: 24px;
  }

  .home-thematiques .thematique-text .btn {
    min-height: 37px;
    margin-top: min(18px, 4.19vw);
    padding: 0 1em;
    font-size: 12px;
  }

  /* Livre (absent de la maquette mobile) : couverture à gauche, comme sur « Le Projet France » */
  .home-livre-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: min(15px, 3.49vw);
    padding: min(21px, 4.88vw) 0 min(27px, 5.81vw);
    border-width: 9px;
    text-align: left;
  }

  .home-livre-cover {
    width: min(136px, 31.63vw);
  }

  .home-livre-text h2 {
    font-size: min(20px, 4.65vw);
    font-weight: 800;
    line-height: 1.1;
  }

  .home-livre-subtitle {
    font-size: 14px;
  }

  .home-livre-text p {
    font-size: 12px;
    line-height: 1.5;
  }

  /* Entretien : titre centré, image pleine largeur */
  .home-livre + .entretien-intro {
    margin-top: min(34px, 7.91vw);
  }

  body:not(.capture-mode) .home-entretien .container {
    padding: 0;
  }

  body:not(.capture-mode) .entretien-intro {
    margin-bottom: min(20px, 4.65vw);
    padding: 0 var(--m-gutter);
    font-size: min(20px, 4.65vw);
    line-height: 1;
  }

  .home-entretien.video-block-section {
    padding-bottom: min(47px, 10.93vw);
  }

  .home-entretien .video-play-icon {
    width: min(64px, 14.88vw);
    height: min(64px, 14.88vw);
  }

  .home-entretien .video-play-icon::before {
    border-width: 12px 0 12px 19px;
    margin-left: 4px;
  }

  /* Galerie : quatre photos verticales sur une ligne */
  body:not(.capture-mode) .photo-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body:not(.capture-mode) .photo-strip img {
    aspect-ratio: auto;
    height: min(221px, 51.4vw);
  }

  /* --- Sommaire « Olivier Becht » (écran 3) --- */
  .sommaire-page {
    padding: min(29px, 6.74vw) 0 min(44px, 10.23vw);
  }

  .sommaire-header {
    margin-bottom: min(24px, 5.58vw);
  }

  .sommaire-title {
    font-size: min(50px, 11.63vw);
    line-height: 1;
    margin-bottom: min(23px, 5.35vw);
  }

  .sommaire-intro p {
    font-size: 12px;
    line-height: 1.5;
  }

  .sommaire-list {
    gap: min(11px, 2.56vw);
  }

  .sommaire-card {
    aspect-ratio: 330 / 249;
  }

  .sommaire-card-band {
    min-height: 0;
    height: 39.4%;
    gap: 0;
    padding: min(17px, 3.95vw) min(28px, 6.51vw) 0;
  }

  .sommaire-card-title {
    font-size: min(25px, 5.81vw);
    line-height: 1.2;
  }

  .sommaire-card-btn {
    display: inline-flex;
    align-items: center;
    min-height: min(37px, 8.6vw);
    padding: 0 1em;
    font-size: 12px;
  }

  /* --- Bandeau des rubriques (écrans 4 à 7) : photo 430 × 347, puis bande bleue pleine --- */
  .rubrique-hero {
    display: block;
    height: auto;
    overflow: visible;
    background-color: transparent;
  }

  .rubrique-hero-image {
    position: static;
    display: block;
    height: min(347px, 80.7vw);
  }

  .rubrique-hero--sans-image {
    padding-top: 0;
  }

  .rubrique-hero-band {
    padding: min(26px, 6.05vw) 0 min(42px, 9.77vw);
    background-color: var(--site-blue);
  }

  .rubrique-hero-parent {
    padding-bottom: min(7px, 1.63vw);
    border-bottom-color: #fff;
    font-size: min(25px, 5.81vw);
    line-height: 1.32;
  }

  .rubrique-hero-title {
    margin-top: min(6px, 1.4vw);
    font-size: min(40px, 9.3vw);
    line-height: 1;
  }

  /* --- Sections : photo pleine largeur au-dessus du texte --- */
  .rubrique-section {
    padding: var(--m-space) var(--m-gutter);
  }

  .rubrique-section h2 {
    font-size: min(30px, 6.98vw);
    line-height: 1.03;
    margin-bottom: min(21px, 4.88vw);
  }

  .rubrique-section p {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 1.5em;
  }

  .rubrique-section--orange:not(.refondation-intro) h2 {
    font-size: min(45px, 10.47vw);
    line-height: 0.91;
    margin-bottom: min(36px, 8.37vw);
  }

  .rubrique-cols {
    gap: var(--m-space);
    margin-bottom: 0;
  }

  .rubrique-cols + .rubrique-cols {
    margin-top: var(--m-space);
  }

  .rubrique-cols > .wp-block-column {
    display: flex;
    flex-direction: column;
  }

  /* Colonne photo (seulement des images) : sa première photo passe avant le texte,
     les suivantes restent après (maquette « Des résultats concrets ») */
  .rubrique-section:not(.rubrique-section--encart) .rubrique-cols > .rubrique-media:not(:has(> :not(.wp-block-image))) {
    display: contents;
  }

  .rubrique-section:not(.rubrique-section--encart) .rubrique-cols > .rubrique-media:not(:has(> :not(.wp-block-image))) > .wp-block-image {
    margin-bottom: 0;
  }

  .rubrique-section:not(.rubrique-section--encart) .rubrique-cols > .rubrique-media:not(:has(> :not(.wp-block-image))) > .wp-block-image:first-child {
    order: -1;
  }

  .rubrique-body .wp-block-image,
  .rubrique-body .wp-block-image.rubrique-img--etroite {
    width: auto;
    margin: 0 calc(-1 * var(--m-gutter)) var(--m-space);
  }

  .rubrique-body .wp-block-column > * + .wp-block-image {
    margin-top: 0;
  }

  .rubrique-body .wp-block-image:last-child {
    margin-bottom: 0;
  }

  /* Photo en fin de colonne de texte : remontée en tête de la colonne */
  .rubrique-cols > .wp-block-column:not(.rubrique-media) > .wp-block-image:last-child:not(:first-child) {
    order: -1;
    margin-bottom: var(--m-space);
  }

  .rubrique-body .wp-block-image img {
    aspect-ratio: 430 / 250;
    object-fit: cover;
  }

  /* La section commence par une photo : collée au bloc précédent */
  .rubrique-section:has(> .wp-block-group__inner-container > .rubrique-cols:first-child .wp-block-image),
  .rubrique-section:has(> .rubrique-cols:first-child .wp-block-image) {
    padding-top: 0;
  }

  /* Section bleue qui prolonge le bandeau (« Son parcours ») : photo dans la marge */
  .rubrique-section--bleu .wp-block-image,
  .rubrique-section--bleu .wp-block-image.rubrique-img--etroite {
    margin-left: 0;
    margin-right: 0;
  }

  .rubrique-section--bleu .wp-block-image img {
    aspect-ratio: 330 / 157;
  }

  /* Encart orange (« Refonder notre pays… ») : texte puis portrait pleine largeur */
  .rubrique-section--encart {
    padding: 0;
    background: none;
  }

  .rubrique-section--encart .rubrique-cols {
    gap: var(--m-space);
    padding: min(45px, 10.47vw) var(--m-gutter) 0;
  }

  .rubrique-section--encart .rubrique-media img {
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
  }

  /* --- Les 5 refondations (écrans 13 à 17) : bande orange, picto à cheval sur la photo --- */
  .refondation-hero {
    height: auto;
  }

  .refondation-hero .rubrique-hero-band {
    padding: min(26px, 6.05vw) 0 min(42px, 9.77vw);
    background-color: var(--site-orange);
  }

  .refondation-hero-inner {
    position: relative;
    display: block;
  }

  .refondation-hero-picto {
    position: absolute;
    top: calc(-1 * min(103px, 23.95vw));
    right: calc(var(--m-gutter) - min(7px, 1.63vw));
    width: min(128px, 29.77vw);
    margin: 0;
  }

  .refondation-hero .rubrique-hero-title {
    font-size: min(40px, 9.3vw);
  }

  /* Ouverture : photo de la vidéo pleine largeur, titre et texte alignés à gauche */
  .refondation-intro {
    padding-top: 0;
  }

  .refondation-intro .wp-block-image.refondation-video,
  .refondation-intro .wp-block-embed {
    margin: 0 calc(-1 * var(--m-gutter)) min(28px, 6.51vw);
  }

  .refondation-intro .wp-block-image.refondation-video img {
    aspect-ratio: 430 / 230;
  }

  .refondation-intro .has-text-align-center {
    text-align: left;
  }

  .refondation-intro h2 {
    font-size: min(30px, 6.98vw);
    line-height: 1.03;
    margin-bottom: min(23px, 5.35vw);
  }

  .refondation-page .rubrique-section:not(.refondation-intro) {
    padding-top: var(--m-space);
    padding-bottom: var(--m-space);
  }

  /* --- Le Projet France (écran 8) --- */
  .projet-page {
    padding-top: min(29px, 6.74vw);
  }

  .projet-header .sommaire-intro {
    margin-top: 0;
  }

  .projet-refondations {
    margin-top: min(19px, 4.42vw);
  }

  /* Numéro, puis picto de 77px sous le numéro ; texte et bouton à droite */
  .projet-refondation {
    grid-template-columns: min(77px, 17.91vw) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: min(16px, 3.72vw);
    padding: min(21px, 4.88vw) 0 min(34px, 7.91vw);
  }

  .projet-refondation .projet-picto {
    grid-column: 1;
    grid-row: 2;
  }

  .projet-numero {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    font-size: min(70px, 16.28vw);
    line-height: 1.33;
    text-align: center;
  }

  .projet-refondation-texte {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: min(12px, 2.79vw);
  }

  .projet-refondation-texte p,
  .projet-media-texte p,
  .projet-livre-texte p {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: min(12px, 2.79vw);
  }

  .projet-refondation-texte .livre-btn,
  .projet-livre-texte .livre-btn,
  .projet-media-texte .livre-btn {
    min-height: 37px;
    padding: 0 1em;
    font-size: 12px;
  }

  /* Encart du livre : filets bleus de 9px, couverture 136px à gauche */
  .projet-livre {
    margin-top: 0;
    background: none;
  }

  .projet-page .projet-livre-inner.container {
    grid-template-columns: min(136px, 31.63vw) minmax(0, 1fr);
    align-items: start;
    gap: 0 min(15px, 3.49vw);
    margin: 0 var(--m-gutter);
    padding: min(21px, 4.88vw) 0 min(27px, 6.28vw);
    border-top: 9px solid var(--site-blue);
    border-bottom: 9px solid var(--site-blue);
  }

  .projet-livre-couverture {
    width: 100%;
  }

  .projet-livre-texte {
    padding-top: min(15px, 3.49vw);
  }

  .projet-livre-texte h2 {
    font-size: min(20px, 4.65vw);
    line-height: 1.1;
  }

  .projet-livre-texte .projet-livre-sous-titre {
    margin: 0.4em 0;
    font-size: 14px;
  }

  /* En vidéo / En podcasts : picto, titre, texte et bouton centrés */
  .projet-medias {
    padding: 0 0 min(57px, 13.26vw);
  }

  .projet-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: min(27px, 6.28vw) 0 min(21px, 4.88vw);
    text-align: center;
  }

  .projet-media .projet-picto {
    width: min(106px, 24.65vw);
    margin-bottom: min(20px, 4.65vw);
  }

  .projet-media-texte h2 {
    font-size: min(30px, 6.98vw);
    line-height: 1.03;
    margin-bottom: min(15px, 3.49vw);
  }

  /* --- Le livre (écran 9) : photo, puis liste des parties sur fond blanc --- */
  .livre-photo {
    height: min(346px, 80.47vw);
  }

  .livre-container {
    margin-top: 0;
    margin-bottom: min(30px, 6.98vw);
  }

  .livre-encart {
    padding: min(29px, 6.74vw) 0 0;
    background: none;
  }

  .livre-intro {
    margin-bottom: min(26px, 6.05vw);
  }

  .livre-intro h1,
  .livre-intro .wp-block-heading {
    font-size: min(30px, 6.98vw);
    line-height: 1;
  }

  .livre-intro p {
    font-size: min(20px, 4.65vw);
  }

  .livre-partie {
    padding: min(13px, 3.02vw) 0 min(16px, 3.72vw);
  }

  .livre-partie-titre {
    font-size: min(25px, 5.81vw);
    line-height: 1.08;
  }

  /* « Partie N » sur sa propre ligne, sans tiret */
  .livre-partie-numero {
    display: block;
  }

  .livre-partie-sep {
    display: none;
  }

  .livre-partie-dispo {
    margin: min(11px, 2.56vw) 0 min(8px, 1.86vw);
    font-size: 12px;
    line-height: 1.5;
  }

  .livre-partie-actions {
    gap: min(9px, 2.09vw);
  }

  .livre-btn {
    min-height: 37px;
    padding: 0 min(13px, 3.02vw);
    font-size: 12px;
  }

  /* --- Lecture d'une partie (écran 10) --- */
  .livre-photo--bandeau {
    height: min(229px, 53.26vw);
  }

  .chapitre-container {
    padding-top: min(36px, 8.37vw);
    padding-bottom: min(26px, 6.05vw);
  }

  .chapitre-header {
    display: block;
    padding-bottom: min(26px, 6.05vw);
    margin-bottom: min(30px, 6.98vw);
  }

  .chapitre-titre {
    font-size: min(30px, 6.98vw);
    line-height: 0.9;
  }

  /* Picto à gauche du lien « Télécharger la version PDF » */
  .chapitre-pdf {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: min(18px, 4.19vw);
    margin-top: min(17px, 3.95vw);
    font-size: min(20px, 4.65vw);
    line-height: 1;
    text-align: left;
  }

  .chapitre-pdf img {
    width: min(77px, 17.91vw);
  }

  .chapitre-texte p {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 1.5em;
  }

  .chapitre-texte h2 {
    margin: min(42px, 9.77vw) 0 min(23px, 5.35vw);
    font-size: min(30px, 6.98vw);
    font-weight: 800;
    line-height: 1.03;
  }

  .chapitre-texte h3 {
    font-size: min(18px, 4.19vw);
    line-height: 1.2;
  }

  /* Précédent | suivant côte à côte, « Retour au menu » en dessous à droite */
  .chapitre-nav {
    flex-direction: column;
    align-items: flex-end;
    gap: min(29px, 6.74vw);
    padding-top: min(18px, 4.19vw);
    margin-top: min(25px, 5.81vw);
  }

  .chapitre-nav-suite {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: min(10px, 2.33vw);
    width: 100%;
  }

  .chapitre-nav-suite [rel="next"] {
    grid-column: 2;
  }

  .chapitre-nav .livre-btn {
    justify-content: center;
  }

  .chapitre-nav > .livre-btn {
    width: calc(50% - min(5px, 1.16vw));
  }
}