.elementor-26503 .elementor-element.elementor-element-53cb557{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}body.elementor-page-26503:not(.elementor-motion-effects-element-type-background), body.elementor-page-26503 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F0E4;}/* Start custom CSS for theme-post-content, class: .elementor-element-53cb557 *//* ============================================================
   PAGE INTRODUCTION — Lecture longue
   Thème Cendres / Gris + Architecture Mobile-First
   ============================================================ */

/* ------------------------------------------------------------
   1. THÈME INTRODUCTION (Variables globales pour tous les écrans)
   ------------------------------------------------------------ */

.ariane {
    display: none;
}

main.introduction {
  --couleur-titre: var(--Cendres, #7A7264);
  --fond-titre: var(--Gris-clair, #F5F5F5);
  --bordure-titre: var(--Cendres, #7A7264);
  --separateur: var(--Gris, #D9D9D9);

  --ch-accent: var(--couleur-titre, var(--Cendres, #7A7264));
  --ch-tint: var(--fond-titre, var(--Gris-clair, #F5F5F5));
  --ch-border: var(--Cendres, #7A7264);
  --ch-separator: var(--separateur, var(--Gris, #D9D9D9));
  --ch-text: var(--texte, var(--Noir, #212320));
  --ch-surface: var(--Blanc-casse, #FFFCF4);

  --ch-title-font: var(--TITRES, "Union Gothic"), sans-serif;
  --ch-body-font: "Stack Sans Text", var(--Textes, "Stack Sans"), sans-serif;

  display: flex;
  flex-direction: column;
  gap: var(--Space3, 24px);

  width: 100%;
  max-width: var(--Container-Encadre, 1096px);
  min-width: 0;
  margin-inline: auto;
  padding: 0;

  color: var(--ch-text);
  font-family: var(--ch-body-font);
  font-size: var(--Body-large, 18px);
  line-height: 1.5;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

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

main.introduction > * {
  min-width: 0;
}

/* ------------------------------------------------------------
   2. MOBILE (Styles de base par défaut)
   ------------------------------------------------------------ */

/* Masquage accessible du H1 pour éviter la répétition visuelle */
main.introduction > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Carte principale complète (4 coins arrondis) */
main.introduction > section {
  margin: 0;
  padding: var(--Space2, 16px);
  background-color: var(--ch-surface);
  border: 1px solid var(--ch-border);
  border-radius: var(--Radius-10, 10px);
}

/* Titre visible « Introduction » (premier paragraphe) */
main.introduction > section > p:first-of-type {
  margin: 0 0 var(--Space0-5, 4px);
  font-family: var(--ch-title-font);
  font-weight: 700;
  font-size: var(--Space4, 32px);
  line-height: 1.1;
  color: var(--ch-accent);
}

/* Signature « de Jean-Luc Mélenchon » (second paragraphe) */
main.introduction > section > p:nth-of-type(2) {
  margin: 0 0 var(--Space4, 32px);
  font-family: var(--ch-body-font);
  font-size: 18px;
  color: var(--texte-secondaire, var(--Terre, #3C3C3B));
}

/* Titres de sous-parties au fil du texte */
main.introduction > section h2,
main.introduction > section .wp-block-heading {
  margin: var(--Space4, 32px) 0 var(--Space2, 16px);
  padding: 0;

  font-family: var(--ch-title-font);
  font-weight: 700;
  font-size: var(--Space4, 24px);
  line-height: 1.2;
  text-transform: none;
  color: var(--ch-accent);
}

/* Paragraphes de lecture */
main.introduction > section p,
main.introduction > section .wp-block-paragraph {
  margin: 0 0 var(--Space3, 24px);
  font-family: var(--ch-body-font);
  font-size: var(--Body-large, 18px);
  line-height: 1.6;
  color: var(--ch-text);
  overflow-wrap: break-word;
}

/* Dernier paragraphe sans marge basse */
main.introduction > section > :last-child {
  margin-bottom: 0;
}

/* Accessibilité */
main.introduction a:focus-visible {
  outline: 2px solid var(--ch-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   3. MOBILE LARGE (à partir de 481px)
   ------------------------------------------------------------ */
@media (min-width: 481px) {
  main.introduction > section > p:first-of-type {
    font-size: clamp(32px, 3.5vw, 40px);
  }
}

/* ------------------------------------------------------------
   4. TABLETTE VERTICALE (à partir de 768px)
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  main.introduction {
    gap: var(--Space4, 32px);
  }

  main.introduction > section {
    padding: var(--Space3, 24px);
  }

  main.introduction > section > p:first-of-type {
    font-size: clamp(36px, 3.2vw, 44px);
  }

  main.introduction > section h2,
  main.introduction > section .wp-block-heading {
    margin-top: var(--Space5, 40px);
    font-size: var(--H4, 28px);
  }
}

/* ------------------------------------------------------------
   5. TABLETTE HORIZONTALE (à partir de 1025px)
   ------------------------------------------------------------ */
@media (min-width: 1025px) {
  main.introduction > section {
    padding: var(--Space4, 32px) var(--Space5, 48px);
  }

  main.introduction > section p,
  main.introduction > section .wp-block-paragraph {
    line-height: 1.65;
  }
}

/* ------------------------------------------------------------
   6. ORDINATEUR / DESKTOP (à partir de 1140px)
   ------------------------------------------------------------ */
@media (min-width: 1140px) {
  main.introduction {
    max-width: var(--Container-Encadre, 1096px);
  }
}


/* ------------------------------------------------------------
   7. LARGEUR DE LECTURE (texte max 800px, carte max 1096px)
   ------------------------------------------------------------ */
main.introduction {
  --lecture-max: 800px;
  --pad-min: var(--Space2, 16px);          /* mobile */
}

@media (min-width: 768px) {
  main.introduction { --pad-min: var(--Space3, 24px); }
}

@media (min-width: 1025px) {
  main.introduction { --pad-min: var(--Space5, 48px); }
}

main.introduction > section {
  /* 100% = largeur de <main> ; on retire 2px de bordure pour tomber pile sur 800px */
  padding-inline: max(
    var(--pad-min),
    calc((100% - var(--lecture-max) - 2px) / 1.2)
  );
}


/* ------------------------------------------------------------
   8. BOUTON « SUIVANT » (même rendu que les pages de partie)
   ------------------------------------------------------------ */
main.introduction + .footer {
  --ch-accent: var(--Cendres, #7A7264);
  --ch-body-font: "Stack Sans Text", var(--Textes, "Stack Sans"), sans-serif;
  --ch-button-gap: 8px;
  --ch-button-padding-x: var(--Space2, 16px);
  --ch-icon-secondary-opacity: 0.35;

  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: var(--Container-Encadre, 1096px);
  margin: var(--Space2, 16px) auto 0;
  padding-top: var(--Space2, 16px);

}

main.introduction + .footer a.next {
  display: inline-grid;
  grid-template-columns: auto var(--next-icon-size, 24px);
  align-items: center;
  justify-content: center;
  column-gap: var(--ch-button-gap);

  min-height: 44px;
  padding: var(--Space1, 8px) var(--ch-button-padding-x);

  font-family: var(--ch-body-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--ch-accent);
  background: transparent;
  border: 1px solid var(--ch-accent);
  border-radius: 10px;
  cursor: pointer;

  transition: transform 0.15s ease, background-color 0.2s ease,
              border-color 0.2s ease, color 0.2s ease;
}

/* Flèche duo-tone : 2 couches superposées */
main.introduction + .footer a.next::before,
main.introduction + .footer a.next::after {
  content: "\f061";
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  position: static;
  display: block;
  margin: 0;
  padding: 0;

  font-family: var(--fa-family-slab-duo) !important;
  font-weight: 400;
  font-style: normal;
  font-size: var(--next-icon-size, 24px);
  line-height: 1;
  color: currentColor;
  transform: none;
  pointer-events: none;
}

main.introduction + .footer a.next::before {
  font-feature-settings: normal;
  opacity: 1;
}

main.introduction + .footer a.next::after {
  font-feature-settings: "ss01";
  opacity: var(--ch-icon-secondary-opacity);
}
main.introduction + .footer a.next:hover::before,
main.introduction + .footer a.next:hover::after {
  font-family: var(--fa-family-slab-press-duo, "Font Awesome 7 Slab Press Duo")!important;
}
main.introduction + .footer a.next:hover {
 transform: translateY(2px);
}


/* ------------------------------------------------------------
   9. IMPRESSION
   ------------------------------------------------------------ */
@media print {
  @page {
    size: A4;
    margin: 2cm 2cm 2.2cm;
  }

  html,
  body {
    background: #fff !important;
  }

  /* Éléments inutiles sur papier */
  .ariane,
  main.introduction + .footer {
    display: none !important;
  }

  /* Le conteneur ne doit plus être un flex : plus fiable pour les sauts de page */
  main.introduction {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    font-size: 11pt;
    line-height: 1.45;
    color: #000;
  }

  /* Carte : plus de cadre, de fond, de coins arrondis ni de marges latérales */
  main.introduction > section {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Titre « Introduction » */
  main.introduction > section > p:first-of-type {
    margin: 0 0 2mm;
    font-size: 28pt;
    line-height: 1.1;
    color: var(--ch-accent);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Signature */
  main.introduction > section > p:nth-of-type(2) {
    margin: 0 0 8mm;
    font-size: 12pt;
    color: #333;
  }

  /* Sous-titres */
  main.introduction > section h2,
  main.introduction > section .wp-block-heading {
    margin: 9mm 0 3mm;
    font-size: 16pt;
    line-height: 1.2;
    color: var(--ch-accent);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;

    break-after: avoid;
    page-break-after: avoid;
  }

  /* Paragraphes */
  main.introduction > section p,
  main.introduction > section .wp-block-paragraph {
    margin: 0 0 4mm;
    font-size: 11pt;
    line-height: 1.45;
    color: #000;

    orphans: 3;
    widows: 3;
  }

  /* Le texte peut se couper entre deux pages (long paragraphes) */
  main.introduction > section {
    break-inside: auto;
    page-break-inside: auto;
  }
}


/* ============================================================
   PAGE INTRODUCTION — MODE CONTRASTE ÉLEVÉ
   Activé par html.contraste-eleve
   Écran uniquement : impression inchangée.
   ============================================================ */

@media screen {

  /* ----------------------------------------------------------
     1. PALETTE ET VARIABLES
     ---------------------------------------------------------- */

  html.contraste-eleve body {
    background: #fff !important;
  }

  html.contraste-eleve main.introduction,
  html.contraste-eleve main.introduction + .footer {
    --couleur-titre: #000 !important;
    --fond-titre: #f0f0f0 !important;
    --bordure-titre: #000 !important;
    --separateur: #000 !important;

    --ch-accent: #000 !important;
    --ch-tint: #f0f0f0 !important;
    --ch-border: #000 !important;
    --ch-separator: #000 !important;
    --ch-text: #000 !important;
    --ch-surface: #fff !important;

    --texte-secondaire: #000 !important;
    --ch-icon-secondary-opacity: 1 !important;
  }

  /* ----------------------------------------------------------
     2. CARTE PRINCIPALE
     ---------------------------------------------------------- */

  html.contraste-eleve main.introduction {
    color: #000 !important;
    background: #fff !important;
    letter-spacing: 0.01em;
    word-spacing: 0.08em;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
  }

  html.contraste-eleve main.introduction > section {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  /* ----------------------------------------------------------
     3. TITRE INTRODUCTION
     ---------------------------------------------------------- */

  html.contraste-eleve main.introduction > section > p:first-of-type {
    color: #000 !important;
    background: #f0f0f0 !important;
    padding: 12px 16px !important;
    margin: 0 0 12px !important;
    border-left: 5px solid #000 !important;
    border-radius: 4px;
    line-height: 1.25;
  }

  /* ----------------------------------------------------------
     4. SIGNATURE
     ---------------------------------------------------------- */

  html.contraste-eleve main.introduction > section > p:nth-of-type(2) {
    color: #000 !important;
    background: #fff !important;
    font-weight: 600;
    border-bottom: 1px solid #000;
    padding-bottom: 16px;
  }

  /* ----------------------------------------------------------
     5. TITRES DE SOUS-PARTIES
     ---------------------------------------------------------- */

  html.contraste-eleve main.introduction > section h2,
  html.contraste-eleve main.introduction > section .wp-block-heading {
    color: #000 !important;
    background: #f0f0f0 !important;
    border-left: 4px solid #000 !important;
    padding: 10px 16px !important;
    border-radius: 4px;
    line-height: 1.3;
    text-shadow: none !important;
  }

  /* ----------------------------------------------------------
     6. TEXTE ET PARAGRAPHES
     ---------------------------------------------------------- */

  html.contraste-eleve main.introduction > section,
  html.contraste-eleve main.introduction > section p,
  html.contraste-eleve main.introduction > section .wp-block-paragraph {
    color: #000 !important;
    background-color: #fff !important;
  }

  html.contraste-eleve main.introduction > section p,
  html.contraste-eleve main.introduction > section .wp-block-paragraph {
    line-height: 1.75;
  }

  /* ----------------------------------------------------------
     7. LIENS DANS LE TEXTE
     ---------------------------------------------------------- */

  html.contraste-eleve main.introduction > section a {
    color: #000 !important;
    background: transparent !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0.2em;
  }

  html.contraste-eleve main.introduction > section a:hover {
    color: #000 !important;
    background: #f0f0f0 !important;
  }

  /* ----------------------------------------------------------
     8. BOUTON SUIVANT
     ---------------------------------------------------------- */

  html.contraste-eleve main.introduction + .footer {
    color: #000 !important;
    background: #fff !important;
    border-top: 2px solid #000 !important;
  }

  html.contraste-eleve main.introduction + .footer a.next {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 9px !important;
    font-weight: 700;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    box-shadow: none !important;
  }

  html.contraste-eleve main.introduction + .footer a.next::before,
  html.contraste-eleve main.introduction + .footer a.next::after {
    color: #000 !important;
    opacity: 1 !important;
  }

  html.contraste-eleve main.introduction + .footer a.next:is(:hover, :focus-visible, :active) {
    color: #fff !important;
    background: #000 !important;
  }

  html.contraste-eleve main.introduction + .footer a.next:is(:hover, :focus-visible, :active)::before,
  html.contraste-eleve main.introduction + .footer a.next:is(:hover, :focus-visible, :active)::after {
    color: #fff !important;
  }

  /* ----------------------------------------------------------
     9. FOCUS CLAVIER
     ---------------------------------------------------------- */

  html.contraste-eleve main.introduction :is(a, button):focus-visible,
  html.contraste-eleve main.introduction + .footer :is(a, button):focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 4px !important;
  }

  /* ----------------------------------------------------------
     10. TRANSITIONS ET MOUVEMENTS
     ---------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    html.contraste-eleve main.introduction + .footer a.next {
      transition: none !important;
    }
  }
}


/* ============================================================
   BOUTON DE BASCULE — CONTRASTE ÉLEVÉ
   ============================================================ */

html body button.btn-contraste {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  z-index: 9999;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;

  font-size: 22px;
  line-height: 1;
  text-transform: none !important;
  letter-spacing: normal;

  color: #000 !important;
  background: #fff !important;
  border: 2px solid #000 !important;
  border-radius: 50%;

  box-shadow: 0 0 0 2px #fff,
              0 2px 8px rgba(0, 0, 0, 0.25);

  cursor: pointer;
}

/* Survol, focus et clic */

html body button.btn-contraste:is(:hover, :focus, :focus-visible, :active) {
  color: #000 !important;
  background: #fff !important;
  border-color: #000 !important;
}

/* Icône */

html body button.btn-contraste::before {
  content: "\f042";
  font-family: var(--fa-family-slab, "Font Awesome 7 Slab") !important;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  color: #000;
}

/* Mode actif */

html.contraste-eleve body button.btn-contraste {
  border-width: 4px !important;
}

/* Infobulle */

html body button.btn-contraste::after {
  content: attr(data-tooltip);
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);

  padding: 6px 10px;
  font: 600 14px/1.3 "Stack Sans Text", "Stack Sans", sans-serif;
  text-transform: none;
  white-space: nowrap;

  color: #fff;
  background: #000;
  border-radius: 6px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

html body button.btn-contraste:is(:hover, :focus-visible)::after {
  opacity: 1;
}

html body button.btn-contraste:focus-visible {
  outline: 3px solid #000;
  outline-offset: 4px;
}

/* Réduction des animations */

@media (prefers-reduced-motion: reduce) {
  html body button.btn-contraste::after {
    transition: none;
  }
}

/* Impression */

@media print {
  .btn-contraste {
    display: none !important;
  }
}

/* Accessibilité et impression */

@media (prefers-reduced-motion: reduce) {
  html body button.btn-contraste::after {
    transition: none;
  }
}

@media print {
  html body button.btn-contraste {
    display: none !important;
  }
}/* End custom CSS */