/*
 * EDOS Investissements — feuille de mise en page des contenus.
 * Écrite le 01/08/2026 (lot 7).
 *
 * ── Où vit quoi ───────────────────────────────────────────────────────────────────────────────
 *   EN-TÊTE et pied de page   → CSS additionnel du personnalisateur (lot 6).
 *   PAGES et jetons de style  → ce fichier.
 * Aucun réglage ne doit exister aux deux endroits : c'est ce qui avait cassé l'en-tête au lot 6.
 *
 * ── Règle de lecture ──────────────────────────────────────────────────────────────────────────
 *   Les tailles se règlent par clamp() : une valeur mini, une valeur qui suit la largeur, une
 *   valeur maxi. Aucune media query n'est donc nécessaire pour la typographie. Les media queries
 *   restantes ne servent qu'aux changements de DISPOSITION (nombre de colonnes).
 *
 * ── Contrastes ────────────────────────────────────────────────────────────────────────────────
 *   Toutes les paires ci-dessous ont été mesurées (clients/edoinvestissements/_travail/contraste.php).
 *   Le plancher retenu est 4,5:1 ; la plupart des paires sont à 7:1 ou plus.
 */

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   1. LES JETONS
   Une seule déclaration de la charte. Tout le reste s'y réfère.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Fonds sombres */
  --edos-nuit:        #0D1B2A;   /* le fond principal du site */
  --edos-nuit-2:      #132437;   /* une surface légèrement surélevée : cartes, lignes paires */
  --edos-nuit-3:      #1A2E45;   /* survol */

  /* La marque */
  --edos-violet:      #1F0F71;   /* en-tête et pied de page */
  --edos-violet-vif:  #2A1FC7;   /* la couleur exacte du monogramme du logo */

  /* L'or */
  --edos-or:          #C8A96E;   /* 7,75:1 sur --edos-nuit */
  --edos-or-clair:    #E8D5A3;
  --edos-or-sombre:   #A98A50;

  /* Le texte */
  --edos-creme:       #F8F6F1;   /* 16,1:1 sur --edos-nuit */
  --edos-gris:        #A3B0C6;   /* 7,94:1 sur --edos-nuit — l'ancien #8A9AB0 tombait à 6,07 */
  --edos-ardoise:     #4A5568;   /* 6,97:1 sur fond crème, pour les pages claires */

  /* Les traits */
  --edos-ligne:       rgba(200, 169, 110, 0.22);
  --edos-ligne-forte: rgba(200, 169, 110, 0.45);

  /* Les polices */
  --edos-sans:        'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --edos-serif:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Le rythme vertical — une seule valeur pour tout le site */
  --edos-rythme:      clamp(56px, 7vw, 104px);
  --edos-gouttiere:   clamp(16px, 4vw, 32px);
  --edos-lecture:     1200px;   /* largeur de contenu */
  --edos-mesure:      70ch;     /* longueur de ligne confortable pour un texte suivi */

  --edos-rayon:       6px;
  --edos-transition:  180ms cubic-bezier(.2, .7, .3, 1);
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   2. LA BASE
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

body,
body .entry-content,
body .elementor-widget-text-editor,
body .elementor-widget-heading {
  font-family: var(--edos-sans);
}

body h1, body h2, body h3, body h4,
body .elementor-heading-title,
body .entry-title {
  font-family: var(--edos-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  /* La capitalisation de titre anglaise a été retirée du réglage Astra
     (headings-text-transform). On la neutralise aussi ici, au cas où un bloc la remettrait. */
  text-transform: none;
}

/* Un anneau de focus visible partout : la navigation au clavier doit rester possible. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body .edos-btn:focus-visible {
  outline: 2px solid var(--edos-or);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Aucune page ne doit déborder horizontalement. */
html, body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   3. LES BOUTONS
   Deux formes seulement : plein doré (action principale) et fantôme (action secondaire).
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

.edos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;              /* cible tactile : 44 px est le plancher, on prend 48 */
  padding: 13px 30px;
  border-radius: var(--edos-rayon);
  border: 1px solid transparent;
  font-family: var(--edos-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--edos-transition), color var(--edos-transition),
              border-color var(--edos-transition), transform var(--edos-transition);
}

.edos-btn:hover { transform: translateY(-1px); }
.edos-btn:active { transform: translateY(0); }

.edos-btn--or,
.edos-btn--or:visited {
  background: var(--edos-or);
  border-color: var(--edos-or);
  color: var(--edos-nuit);        /* 7,75:1 */
}
.edos-btn--or:hover,
.edos-btn--or:focus {
  background: var(--edos-or-clair);
  border-color: var(--edos-or-clair);
  color: var(--edos-nuit);
}

.edos-btn--fantome,
.edos-btn--fantome:visited {
  background: transparent;
  border-color: var(--edos-ligne-forte);
  color: var(--edos-creme);
}
.edos-btn--fantome:hover,
.edos-btn--fantome:focus {
  background: rgba(200, 169, 110, 0.12);
  border-color: var(--edos-or);
  color: var(--edos-or-clair);
}
.edos-btn--fantome svg { flex: 0 0 auto; }

/* Le bouton natif d'Elementor, visé par sa structure : il n'y en a qu'un par section. */
.edos-section .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 30px;
  border-radius: var(--edos-rayon);
  background: var(--edos-or);
  border: 1px solid var(--edos-or);
  color: var(--edos-nuit);
  font-family: var(--edos-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color var(--edos-transition), border-color var(--edos-transition);
}
.edos-section .elementor-widget-button .elementor-button:hover,
.edos-section .elementor-widget-button .elementor-button:focus {
  background: var(--edos-or-clair);
  border-color: var(--edos-or-clair);
  color: var(--edos-nuit);
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   4. LE HÉROS DE L'ACCUEIL

   Les classes viennent du réglage « Classes CSS » d'Elementor. Deux clés différentes selon
   l'élément, et c'est un piège classique :
       section, colonne  →  `css_classes`
       widget            →  `_css_classes`   (les réglages de l'onglet Avancé sont préfixés)
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

#accueil-top {
  position: relative;
  overflow: hidden;
  background-color: var(--edos-nuit);
}

/* La vidéo de fond : Elementor l'insère dans .elementor-background-video-container.
   Elle doit couvrir le cadre sans se déformer, quelle que soit la proportion de l'écran. */
#accueil-top .elementor-background-video-container { pointer-events: none; }
#accueil-top .elementor-background-video-container video,
#accueil-top video.elementor-background-video-hosted {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /* Le voilier n'est pas au centre géométrique du cadre : il occupe la bande qui va de 480 à
     940 px sur une image de 1280 (centre à 55 %), et de 110 à 590 sur 720 en hauteur (centre à
     45 %). Sur un écran étroit, `cover` cadre sur la hauteur et ne montre qu'une tranche
     verticale : viser le centre réel du bateau plutôt que celui de l'image met cette tranche sur
     la coque et les mâts, et non sur le lagon vide à gauche. */
  object-position: 55% 45%;
}

/* Le voile sombre, et l'ordre des plans.
   La vidéo du voilier est très lumineuse : sans voile, le texte crème tombe bien en dessous des
   4,5:1 exigés — il devient illisible dès que le soleil entre dans le cadre.
   Le voile est écrit ICI et non dans les réglages Elementor : ceux-ci le rendaient avec une
   opacité de 0, et le corriger demandait de régénérer un fichier CSS mis en cache. Une règle
   dans cette feuille est plus simple à lire et ne dépend d'aucun cache. */
#accueil-top .elementor-background-video-container { z-index: 0; }
#accueil-top > .elementor-container               { z-index: 2; }

#accueil-top .elementor-background-overlay {
  z-index: 1;
  opacity: 1;
  background: linear-gradient(
    172deg,
    rgba(13, 27, 42, 0.88) 0%,
    rgba(13, 27, 42, 0.72) 45%,
    rgba(13, 27, 42, 0.86) 100%
  );
}

/* Sur écran étroit, la vidéo reste en fond plein cadre, comme sur ordinateur : c'est le parti pris
   du héros. Le défaut signalé n'était pas le cadrage mais le fait qu'aucune vidéo ne se lançait —
   Elementor la remplaçait par l'image de repli parce que son réglage « lire sur mobile » était
   vide. Il est désormais actif : c'est la même vidéo sur tous les écrans.

   Le voile est un peu allégé sur téléphone : le texte y occupe presque toute la hauteur, mais
   l'image y est aussi beaucoup plus resserrée, donc moins contrastée. On garde 4,5:1 en gardant
   un fond sombre au milieu, là où passent les paragraphes. */
@media (max-width: 767px) {
  #accueil-top .elementor-background-overlay {
    background: linear-gradient(
      178deg,
      rgba(13, 27, 42, 0.84) 0%,
      rgba(13, 27, 42, 0.7) 38%,
      rgba(13, 27, 42, 0.86) 100%
    );
  }
}

/* ── Les couleurs du texte au-dessus de la vidéo ────────────────────────────────────────────────
   Le contraste ne se juge pas sur l'image moyenne, mais sur le PIRE pixel que la vidéo peut
   amener sous le texte : ici le reflet du soleil sur l'eau, à peu près rgb(235, 230, 218).
   Sous un voile de 0,70, ce pixel donne un fond de luminance 0,095. Mesuré à cette aune :

     gris #A3B0C6 sur ce fond ....... 2,58:1   ✗
     doré #C8A96E ................... 2,52:1   ✗
     crème #F8F6F1 .................. 5,24:1   ✓

   Le gris et le doré du corps de texte échouaient donc déjà sur ordinateur, avant même qu'on
   touche au mobile. On ne réassombrit pas l'image — le client veut voir son voilier : on éclaircit
   les deux couleurs fautives, ce qui suffit. Le doré foncé reste sur les boutons, où il sert de
   fond et non de texte. */
#accueil-top {
  --edos-hero-texte: #dce3ee; /* 5,61:1 sur le pire fond, tout en restant en retrait du crème */
}

/* La colonne : centrée, avec une largeur de lecture. C'est ce qui manquait — la colonne portait
   `margin: 2% 32% 0 9%`, ce qui poussait tout le texte vers la gauche. */
#accueil-top .edos-hero-col {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

#accueil-top .edos-hero-col > .elementor-widget-wrap { justify-content: center; }

.edos-hero-surtitre .elementor-heading-title {
  font-family: var(--edos-sans);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--edos-or-clair); /* le doré foncé tombait à 2,52:1 sur le reflet du soleil */
  margin: 0 0 18px;
}

.edos-hero-titre .elementor-heading-title {
  font-family: var(--edos-serif);
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--edos-creme);
  margin: 0 0 20px;
  text-wrap: balance;
}

.edos-hero-chapo,
.edos-hero-chapo p {
  font-family: var(--edos-sans);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--edos-hero-texte);
}
.edos-hero-chapo { max-width: 640px; margin-inline: auto; }
.edos-hero-chapo p { margin: 0 0 26px; }

.edos-hero-promesse .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  text-wrap: balance;
  font-family: var(--edos-sans);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--edos-creme);
  background: rgba(200, 169, 110, 0.14);
  border: 1px solid var(--edos-ligne);
  border-radius: 100px;
  padding: 8px 20px;
  margin: 0 0 30px;
}

.edos-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.edos-hero-relance {
  margin: 6px 0 0;
  font-family: var(--edos-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--edos-hero-texte);
}

.edos-hero-citation,
.edos-hero-citation p {
  font-family: var(--edos-serif);
  font-size: clamp(15px, 1.6vw, 19px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--edos-hero-texte);
}
.edos-hero-citation {
  max-width: 620px;
  margin: 34px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--edos-ligne);
}
.edos-hero-citation p { margin: 0; }

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   5. LES BLOCS DE CONTENU
   Les dix blocs HTML de l'accueil déclarent chacun leur propre palette. On ne les réécrit pas
   un par un : on redéfinit leurs variables ici, avec une spécificité supérieure. Une seule
   charte, et les blocs restent modifiables dans Elementor sans rien casser.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

[class*="edos-"][class*="-wrap"] {
  --navy:     var(--edos-nuit);
  --navy-mid: var(--edos-nuit-3);
  --gold:     var(--edos-or);
  --white:    var(--edos-creme);
  --gray:     var(--edos-gris);      /* éclairci : l'ancien #8A9AB0 passait sous 7:1 */
  --border:   var(--edos-ligne);

  font-family: var(--edos-sans);
  /* Un seul rythme vertical pour tout le site.
     Les blocs avaient « 100px 0 30px 0 » : le haut et le bas ne se ressemblaient pas, et la
     section ajoutait ses propres 100 px par-dessus.
     La valeur est la MOITIÉ du rythme : deux blocs qui se suivent additionnent leurs marges,
     et c'est cette somme qui doit valoir un rythme. Sinon on obtient les 230 px de vide mesurés
     entre « Nos solutions » et la présentation de M. Lisserre. */
  padding: calc(var(--edos-rythme) * 0.62) var(--edos-gouttiere) !important;
  width: 100%;
  /* Les blocs posent « box-sizing: border-box » sur leurs DESCENDANTS (`.edos-x-wrap *`) mais
     pas sur eux-mêmes. Leur marge intérieure s'ajoutait donc à leur largeur : mesurés à 1272 px
     dans un conteneur de 1240, ils débordaient de 32 px de chaque côté. */
  box-sizing: border-box;
}

/* Le premier et le dernier bloc de la page ont besoin d'un peu plus d'air : au-dessus, il n'y a
   que l'en-tête ; en dessous, le pied de page. */
.elementor-section:first-of-type + .elementor-section [class*="edos-"][class*="-wrap"] {
  padding-top: var(--edos-rythme) !important;
}
.elementor-section:last-of-type [class*="edos-"][class*="-wrap"] {
  padding-bottom: var(--edos-rythme) !important;
}

/* Les colonnes qui portent ces blocs ne doivent rien ajouter : toute la largeur vient de la
   section (1240 px). Sans cela, les blocs mesuraient 1233, 1234, 1251, 1254 et 1272 px selon
   les marges héritées de chaque colonne — cinq largeurs différentes sur une même page. */
.edos-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding: 0;
}

[class*="edos-"][class*="-wrap"] .section-title {
  font-family: var(--edos-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  text-wrap: balance;
}

[class*="edos-"][class*="-wrap"] .section-label {
  font-family: var(--edos-sans);
  letter-spacing: 0.22em;
}

[class*="edos-"][class*="-wrap"] .section-subtitle {
  font-size: 15px;
  line-height: 1.75;
}

/* Les logos d'accréditation.
   Chaque logo est fourni dans un format différent (fond blanc, fond transparent, proportions
   variables) : sans cadre commun, les cinq plaques blanches n'avaient ni la même hauteur ni le
   même alignement. On leur donne une plaque identique et on laisse chaque logo s'y inscrire. */
.edos-accred-wrap .accred-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  padding: 12px 16px;
  background: #FFFFFF;
  border-radius: var(--edos-rayon);
}
.edos-accred-wrap .accred-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   6. LES SECTIONS DE L'ACCUEIL
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

.edos-section {
  background-color: var(--edos-nuit);
}

/* Une ligne fine plutôt qu'un vide blanc pour séparer deux sections de même fond. */
.edos-section + .edos-section > .elementor-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--edos-gouttiere);
  right: var(--edos-gouttiere);
  height: 1px;
  background: var(--edos-ligne);
}
.edos-section > .elementor-container { position: relative; }

/* Le bloc du bouton « Simulateur » n'est pas une carte : il ne prend pas le rythme des blocs. */
.edos-section .elementor-widget-button { padding-block: 8px; }

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   7. LE BLOG, LES ARCHIVES, LA RECHERCHE
   Une seule carte, une seule grille, partout : page « Publications », archives de thème,
   résultats de recherche, articles liés en bas d'un article.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

body.single-post,
body.archive,
body.search,
body.blog {
  background-color: var(--edos-nuit);
  color: var(--edos-gris);
}

body.single-post #content,
body.archive #content,
body.search #content,
body.blog #content {
  background-color: var(--edos-nuit);
  /* Moins d'air en haut qu'en bas : l'en-tête blanc fait déjà séparation, tandis qu'en bas il
     faut détacher le contenu du pied de page violet. */
  padding-top: clamp(32px, 3.5vw, 56px);
  padding-bottom: var(--edos-rythme);
}

/* ⚠️ Viser « #content > .ast-container » et NON « .ast-container » seul : la barre d'en-tête
   porte elle aussi la classe `ast-container`. La première version de cette règle la ramenait à
   1240 px et le bouton « Prendre rendez-vous » ressortait de 21 px sur les pages d'archive —
   alors qu'il tenait ailleurs. Un défaut qui n'apparaissait que sur certaines pages. */
body.archive #content > .ast-container,
body.search #content > .ast-container,
body.blog #content > .ast-container {
  max-width: 1240px;
}

/* ── L'en-tête d'une archive ───────────────────────────────────────────────── */

.edos-archive-entete {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(32px, 4vw, 56px);
}
.edos-archive-sur {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--theme, var(--edos-or));
  margin: 0 0 14px;
}
.edos-archive-titre {
  font-family: var(--edos-serif);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.1;
  color: var(--edos-creme);
  margin: 0 0 16px;
  text-wrap: balance;
}
.edos-archive-texte p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--edos-gris);
  margin: 0 0 12px;
}
.edos-archive-nombre {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--edos-gris);
  margin: 0;
}

/* ── Les puces de thème ────────────────────────────────────────────────────── */

.edos-filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto clamp(32px, 4vw, 52px);
}
.edos-filtre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid var(--edos-ligne);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--edos-gris);
  text-decoration: none;
  transition: color var(--edos-transition), border-color var(--edos-transition),
              background-color var(--edos-transition);
}
.edos-filtre:hover,
.edos-filtre:focus {
  color: var(--edos-creme);
  border-color: var(--theme, var(--edos-or));
  background: rgba(255, 255, 255, 0.04);
}
.edos-filtre.est-actif {
  color: var(--edos-nuit);
  background: var(--theme, var(--edos-or));
  border-color: var(--theme, var(--edos-or));
}
.edos-filtre-nb {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* ── La grille et la carte ─────────────────────────────────────────────────── */

.edos-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 24px;
}

.edos-carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 26px;
  background: var(--edos-nuit-2);
  border: 1px solid var(--edos-ligne);
  border-top: 3px solid var(--theme, var(--edos-or));
  border-radius: var(--edos-rayon);
  transition: transform var(--edos-transition), border-color var(--edos-transition),
              background-color var(--edos-transition);
}
.edos-carte:hover {
  transform: translateY(-2px);
  background: var(--edos-nuit-3);
  border-color: var(--edos-ligne-forte);
  border-top-color: var(--theme, var(--edos-or));
}

.edos-carte-theme {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme, var(--edos-or));
  text-decoration: none;
}
.edos-carte-theme:hover { text-decoration: underline; }

.edos-carte-titre {
  font-family: var(--edos-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.22;
  margin: 0;
}
.edos-carte-titre a {
  color: var(--edos-creme);
  text-decoration: none;
}
.edos-carte-titre a:hover { color: var(--theme, var(--edos-or)); }

.edos-carte-amorce {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--edos-gris);
  margin: 0;
}

.edos-carte-pied {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--edos-gris);
  opacity: 0.85;
  padding-top: 12px;
  border-top: 1px solid var(--edos-ligne);
}

.edos-carte-lien {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme, var(--edos-or));
  text-decoration: none;
}
.edos-carte-lien span { transition: transform var(--edos-transition); display: inline-block; }
.edos-carte-lien:hover span { transform: translateX(4px); }

.edos-vide {
  text-align: center;
  color: var(--edos-gris);
  padding: 48px 0;
}

/* ── La pagination ─────────────────────────────────────────────────────────── */

.edos-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(36px, 4vw, 56px);
}
.edos-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--edos-ligne);
  border-radius: var(--edos-rayon);
  font-size: 14px;
  color: var(--edos-gris);
  text-decoration: none;
  transition: color var(--edos-transition), border-color var(--edos-transition);
}
.edos-pagination .page-numbers:hover {
  color: var(--edos-creme);
  border-color: var(--edos-or);
}
.edos-pagination .page-numbers.current {
  background: var(--edos-or);
  border-color: var(--edos-or);
  color: var(--edos-nuit);
  font-weight: 600;
}
.edos-pagination .dots { border-color: transparent; }
.edos-pagination-etat {
  flex-basis: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--edos-gris);
  opacity: 0.8;
}

/* ── La page « Publications » ──────────────────────────────────────────────── */

.edos-entete-blog {
  padding-block: var(--edos-rythme) !important;
  text-align: center;
}
.edos-blog-titre .elementor-heading-title {
  font-family: var(--edos-serif);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  color: var(--edos-creme);
  margin: 0 0 18px;
  text-wrap: balance;
}
.edos-blog-chapo .elementor-heading-title {
  font-family: var(--edos-sans);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--edos-or-clair);
  max-width: 680px;
  margin: 0 auto 24px;
}
.edos-blog-intro,
.edos-blog-intro p {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--edos-gris);
}
.edos-blog-intro {
  max-width: 760px;
  margin-inline: auto;
}
.edos-blog-intro p { margin: 0 0 14px; }
.edos-blog-intro strong { color: var(--edos-creme); font-weight: 500; }

/* Le bouton YouTube était rouge vif, aligné à droite, sans rapport avec la charte.
   Il reste identifiable (l'icône le dit), mais il ne prend plus le pas sur le contenu. */
.edos-blog-youtube { margin-top: 10px; }
.edos-blog-youtube .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  background: transparent;
  border: 1px solid var(--edos-ligne-forte);
  border-radius: var(--edos-rayon);
  color: var(--edos-creme);
  font-family: var(--edos-sans);
  font-size: 15px;
  font-weight: 600;
}
.edos-blog-youtube .elementor-button:hover,
.edos-blog-youtube .elementor-button:focus {
  background: rgba(200, 169, 110, 0.12);
  border-color: var(--edos-or);
  color: var(--edos-or-clair);
}

.edos-section-blog { padding-bottom: var(--edos-rythme) !important; }

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   8. UN ARTICLE
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

.edos-article {
  max-width: 780px;      /* environ 70 caractères par ligne en 18 px : la mesure confortable */
  margin: 0 auto;
}

.edos-fil {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--edos-gris);
  margin-bottom: 24px;
}
.edos-fil a { color: var(--edos-gris); text-decoration: none; }
.edos-fil a:hover { color: var(--edos-or); text-decoration: underline; }
.edos-fil-courant { opacity: 0.7; }

.edos-article-theme {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme, var(--edos-or));
  text-decoration: none;
  margin-bottom: 14px;
}

.edos-article-titre {
  font-family: var(--edos-serif);
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--edos-creme);
  margin: 0 0 20px;
  text-wrap: balance;
}

.edos-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: var(--edos-gris);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--edos-ligne);
}
.edos-article-auteur { color: var(--edos-creme); font-weight: 500; }

.edos-article-image {
  margin: 28px 0 0;
}
.edos-article-image img {
  width: 100%;
  height: auto;
  border-radius: var(--edos-rayon);
}

/* ── Le sommaire ───────────────────────────────────────────────────────────── */

.edos-sommaire {
  margin: 34px 0;
  padding: 24px 26px;
  background: var(--edos-nuit-2);
  border: 1px solid var(--edos-ligne);
  border-left: 3px solid var(--theme, var(--edos-or));
  border-radius: var(--edos-rayon);
}
.edos-sommaire-titre {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme, var(--edos-or));
  margin: 0 0 14px;
}
.edos-sommaire ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: edos-toc;
}
.edos-sommaire li { margin: 0 0 8px; }
.edos-sommaire li:last-child { margin-bottom: 0; }
.edos-sommaire-h3 { padding-left: 20px; }
.edos-sommaire a {
  font-size: 15px;
  line-height: 1.5;
  color: var(--edos-gris);
  text-decoration: none;
}
.edos-sommaire a:hover { color: var(--edos-creme); text-decoration: underline; }
.edos-sommaire-h3 a { font-size: 14px; opacity: 0.85; }

/* ── Le corps du texte ─────────────────────────────────────────────────────── */

.edos-article-corps {
  font-size: 17.5px;
  font-weight: 300;
  line-height: 1.8;
  color: #C3CCDB;              /* 10,5:1 sur --edos-nuit : confortable sur un texte long */
}
.edos-article-corps > * + * { margin-top: 1.25em; }
.edos-article-corps p { margin: 0; }
.edos-article-corps strong { color: var(--edos-creme); font-weight: 600; }

.edos-article-corps h2 {
  font-family: var(--edos-serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.2;
  color: var(--edos-creme);
  margin-top: 1.9em;
  padding-top: 0.2em;
  scroll-margin-top: 110px;    /* l'en-tête ne doit pas recouvrir le titre visé par le sommaire */
}
.edos-article-corps h3 {
  font-family: var(--edos-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  color: var(--edos-creme);
  margin-top: 1.6em;
  scroll-margin-top: 110px;
}

.edos-article-corps a {
  color: var(--edos-or);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.edos-article-corps a:hover { color: var(--edos-or-clair); }

.edos-article-corps ul,
.edos-article-corps ol { padding-left: 1.3em; }
.edos-article-corps li { margin-bottom: 0.5em; }
.edos-article-corps li::marker { color: var(--theme, var(--edos-or)); }

.edos-article-corps blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--theme, var(--edos-or));
  font-family: var(--edos-serif);
  font-size: 1.25em;
  font-style: italic;
  color: var(--edos-creme);
}

.edos-article-corps img { max-width: 100%; height: auto; border-radius: var(--edos-rayon); }

.edos-article-corps table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.edos-article-corps th,
.edos-article-corps td {
  padding: 12px 14px;
  border: 1px solid var(--edos-ligne);
  text-align: left;
}
.edos-article-corps th { color: var(--edos-creme); background: var(--edos-nuit-2); font-weight: 600; }

/* Un tableau large doit défiler dans son cadre, pas faire défiler la page. */
.edos-article-corps .wp-block-table,
.edos-article-corps figure.wp-block-table { overflow-x: auto; }

/* ── La signature ──────────────────────────────────────────────────────────── */

.edos-signature {
  margin-top: clamp(40px, 5vw, 64px);
  padding: 28px 30px;
  background: var(--edos-nuit-2);
  border: 1px solid var(--edos-ligne);
  border-radius: var(--edos-rayon);
}
.edos-signature-sur {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--edos-or);
  margin: 0 0 10px;
}
.edos-signature-nom {
  font-family: var(--edos-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--edos-creme);
  margin: 0;
}
.edos-signature-role {
  font-size: 14px;
  color: var(--edos-gris);
  margin: 4px 0 14px;
}
.edos-signature-bio {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--edos-gris);
  margin: 0 0 16px;
}
.edos-signature-agrements {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.7;
  color: var(--edos-gris);
}
.edos-signature-agrements li { padding-left: 18px; position: relative; }
.edos-signature-agrements li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--edos-or);
}
.edos-signature-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  margin: 0;
}
.edos-signature-contact a { color: var(--edos-or); text-decoration: none; }
.edos-signature-contact a:hover { text-decoration: underline; }

/* ── L'appel à l'action de fin d'article ───────────────────────────────────── */

.edos-article-cta {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(30px, 4vw, 44px);
  text-align: center;
  background: linear-gradient(160deg, rgba(31, 15, 113, 0.55), rgba(13, 27, 42, 0.2));
  border: 1px solid var(--edos-ligne);
  border-radius: var(--edos-rayon);
}
.edos-article-cta-sur {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--edos-or);
  margin: 0 0 12px;
}
.edos-article-cta-titre {
  font-family: var(--edos-serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.18;
  color: var(--edos-creme);
  margin: 0 0 14px;
  text-wrap: balance;
}
.edos-article-cta-texte {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--edos-gris);
  max-width: 520px;
  margin: 0 auto 24px;
}

/* ── Les articles liés ─────────────────────────────────────────────────────── */

.edos-lies {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--edos-ligne);
}
.edos-lies-titre {
  font-family: var(--edos-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--edos-creme);
  margin: 0 0 26px;
}
/* Sur la largeur d'un article, deux cartes tiennent mieux que trois. */
.edos-lies .edos-grille { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.edos-lies .edos-carte { padding: 22px 20px; }
.edos-lies .edos-carte-titre { font-size: 1.22rem; }
.edos-lies .edos-carte-amorce { font-size: 13.5px; }

/* ── Le formulaire de recherche ────────────────────────────────────────────── */

.edos-recherche {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}
.edos-recherche input[type="search"] {
  flex: 1 1 280px;
  max-width: 420px;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--edos-nuit-2);
  border: 1px solid var(--edos-ligne);
  border-radius: var(--edos-rayon);
  color: var(--edos-creme);
  font-family: var(--edos-sans);
  font-size: 15px;
}
.edos-recherche input[type="search"]::placeholder { color: var(--edos-gris); opacity: 0.7; }

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   9. LE PIED DE PAGE
   Il est violet ; on aligne seulement sa typographie.
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

.site-footer, .ast-footer-overlay, footer.site-footer {
  font-family: var(--edos-sans);
}
.site-footer h2, .site-footer h3, .site-footer h4 {
  font-family: var(--edos-serif);
}