/* ==========================================================================
   Les Arêtes de Poisson — charte institutionnelle
   2026-08-13. Mise en forme uniquement : aucun texte du site n'est modifié.
   Cible les classes Gutenberg natives et le thème Astra.
   ========================================================================== */

/* --- Fontes auto-hébergées. Aucun appel à Google. ----------------------- */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/SourceSerif4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/SourceSerif4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/SourceSans3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/SourceSans3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Jetons de conception ---------------------------------------------- */
:root {
  --adp-fond:        #FBFAF8;  /* blanc cassé, ton calcaire */
  --adp-surface:     #FFFFFF;
  --adp-texte:       #1F2933;  /* anthracite, jamais de noir pur */
  --adp-texte-doux:  #55606C;
  --adp-accent:      #1B3A6B;  /* bleu institutionnel */
  --adp-accent-vif:  #14294B;
  --adp-filet:       #E1DFDA;

  --adp-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --adp-sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Astra fixe la taille racine à 19px : les rem seraient 19% trop grands.
     On raisonne donc en ch (largeur de caractère) et en px. */
  --adp-texte-large: 660px;   /* ~68 caracteres a 18px : la plage confortable */
  --adp-media-large: 1140px;
  --adp-rythme:      72px;    /* espace entre deux ensembles */
  --adp-page:        1240px;  /* laize de la page */
}

/* --- Bases -------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body,
body.ast-separate-container,
.site,
.site-content,
#content {
  background-color: var(--adp-fond) !important;
  color: var(--adp-texte);
  font-family: var(--adp-sans);
}

body {
  font-size: 18px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #D8E2F0; color: var(--adp-texte); }

/* --- Hiérarchie typographique ------------------------------------------ */
/* Le défaut inversait la hiérarchie : H1 à 32px sous des H2 à 50px. */
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: var(--adp-serif) !important;
  color: var(--adp-texte);
  font-weight: 600;
  letter-spacing: -0.011em;
  line-height: 1.18;
  text-wrap: balance;
}

.entry-content h2 {
  font-size: clamp(27px, 1.4rem + 0.9vw, 33px);
  margin: 0 0 1.75rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--adp-accent);
  color: var(--adp-accent);
}

.entry-content h3 {
  font-size: 21px;
  margin: 42px 0 12px;
}

/* --- Largeurs de lecture ------------------------------------------------ */
/* 88 caractères par ligne auparavant : première cause de fatigue de lecture.
   On cible les paragraphes eux-mêmes et non les conteneurs : le contenu
   utilise par endroits une balise <center> héritée, qui casse toute règle
   fondée sur les enfants directs de .entry-content. */
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content h2,
.entry-content h3,
.entry-content center {
  max-width: var(--adp-texte-large);
  margin-left: auto;
  margin-right: auto;
}

/* Dans une grille multi-colonnes, la colonne impose déjà sa largeur. */
.entry-content .wp-block-column p,
.entry-content .wp-block-column ul,
.entry-content .wp-block-column ol {
  max-width: none;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
  font-size: 18px;
  line-height: 1.72;
  /* `auto` sur les cotes : le raccourci `margin: 0 0 22px` annulait le
     centrage pose par la regle de largeur de lecture. */
  margin: 0 auto 22px;
  color: var(--adp-texte);
}

/* Tout le texte courant à gauche : le centrage sur de longs paragraphes
   fait « danser » le bord gauche et casse le retour de ligne. */
/* Les alignements d'origine (10 paragraphes centrés, 6 à gauche, 10 par
   défaut) sont neutralisés ; la justification est définie plus bas. */
.entry-content p.has-text-align-center,
.entry-content p.has-text-align-left {
  text-align: inherit;
}

.entry-content a { color: var(--adp-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.entry-content a:hover { color: var(--adp-accent-vif); }

/* --- Rythme vertical ---------------------------------------------------- */
/* Huit espaceurs de 100 px, identiques sur mobile : remplacés par un
   rythme proportionné et réduit sur petit écran. */
.entry-content .wp-block-spacer {
  height: var(--adp-rythme) !important;
  margin: 0;
}

.entry-content > .wp-block-columns { margin-bottom: 0; }

/* --- Blocs colonnes ----------------------------------------------------- */
.entry-content .wp-block-columns {
  max-width: var(--adp-media-large);
  margin-left: auto;
  margin-right: auto;
  gap: 2.5rem;
  align-items: start;
}

.entry-content .wp-block-column { min-width: 0; }

/* --- Médias ------------------------------------------------------------- */
.entry-content .wp-block-embed,
.entry-content .wp-block-image {
  max-width: 100%;
  margin: 0 auto 1.5rem;
}

.entry-content .wp-block-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid var(--adp-filet);
  background: #EFEDE9;
}

.entry-content .wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* Revue de presse : logos ramenés à une hauteur commune pour aligner la grille. */
.entry-content .wp-block-columns .wp-block-image img {
  max-height: 72px;
  width: auto;
  object-fit: contain;
}

.entry-content .wp-block-columns .wp-block-image {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 84px;
  margin-bottom: 1rem;
}

/* Fiche de presse : filet à gauche, comme une notice bibliographique.
   Le filet est porté par la COLONNE et non par chaque paragraphe : posé sur
   les paragraphes, il se retrouvait troué à chaque interligne.
   `:has()` le réserve aux colonnes contenant un logo — donc aux vraies fiches
   de presse, sans toucher au texte courant. */
.entry-content .wp-block-column:has(> .wp-block-image) {
  border-left: 2px solid var(--adp-filet);
  padding-left: 1.1rem;
}

.entry-content .wp-block-column:has(> .wp-block-image) > p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--adp-texte-doux);
  text-align: left;
}

/* --- Justification ------------------------------------------------------ */
/* Texte courant justifié, avec césure : sans césure, le français produit des
   « rivières » de blancs. Les colonnes étroites restent en drapeau, la
   justification y creuserait des trous. */
.entry-content p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

.entry-content .wp-block-column:has(> .wp-block-image) > p,
.entry-content .wp-block-button,
.entry-content .wp-block-button p {
  text-align: left;
  hyphens: manual;
}

/* --- Bouton principal --------------------------------------------------- */
/* Il était sombre sur fond sombre : l'action la plus importante du site
   était la moins visible. */
.entry-content .wp-block-button__link,
.wp-block-button__link.wp-element-button {
  background-color: var(--adp-accent) !important;
  color: #FFFFFF !important;
  font-family: var(--adp-sans) !important;
  font-weight: 600;
  font-size: 17px !important;
  letter-spacing: 0.02em;
  border-radius: 3px !important;
  padding: 0.9rem 2.2rem !important;
  border: none;
  transition: background-color .15s ease;
}
.entry-content .wp-block-button__link:hover { background-color: var(--adp-accent-vif) !important; }

/* --- En-tête ------------------------------------------------------------ */
.site-header,
.ast-primary-header-bar,
.main-header-bar {
  background-color: var(--adp-surface) !important;
  border-bottom: 1px solid var(--adp-filet);
  box-shadow: none !important;
}

.site-title, .site-title a {
  font-family: var(--adp-serif) !important;
  font-weight: 600 !important;
  color: var(--adp-texte) !important;
  font-size: 22px !important;
  letter-spacing: -0.01em;
}

.main-header-menu a,
.main-header-menu .menu-link {
  font-family: var(--adp-sans) !important;
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--adp-texte) !important;
}
.main-header-menu a:hover { color: var(--adp-accent) !important; }

/* --- Bandeau de titre --------------------------------------------------- */
/* L'image de fond (rendu 3D recadre) etait illisible en bandeau et la
   mediatheque ne contient aucune photographie exploitable. On passe donc a un
   aplat typographique : sobre, lisible, sans ambiguite. */
/* Astra impose min-height:460px via son Customizer alors que le contenu n'en
   fait que 242 : 218px de vide force. On neutralise avec assez de specificite. */
section.ast-single-entry-banner,
.ast-single-entry-banner[data-banner-layout],
.ast-single-entry-banner {
  min-height: 0 !important;
  height: auto !important;
}

.ast-single-entry-banner {
  background-image: none !important;
  background-color: var(--adp-accent) !important;
  padding: 44px 1.5rem 40px !important;
  text-align: center;
  border-bottom: 4px solid #13284B;
}

.ast-single-entry-banner .entry-title {
  color: #FFFFFF !important;
  font-size: clamp(28px, 1.4rem + 1.5vw, 42px) !important;
  font-weight: 600;
  line-height: 1.2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  text-shadow: none;
}

/* Filet fin sous le titre, comme un frontispice de publication. */
.ast-single-entry-banner .entry-title::after {
  content: '';
  display: block;
  width: 72px;
  height: 2px;
  margin: 18px auto 0;
  background: rgba(255,255,255,.45);
}

/* --- Pied de page ------------------------------------------------------- */
.site-footer,
.site-footer .ast-footer-copyright,
.footer-sml-layout {
  background-color: #F2F0EC !important;
  color: var(--adp-texte-doux) !important;
  border-top: 1px solid var(--adp-filet);
  font-size: 15px;
}
.site-footer a { color: var(--adp-accent) !important; }

/* --- Adaptation aux petits écrans --------------------------------------- */
@media (max-width: 921px) {
  :root { --adp-rythme: 44px; }
  .entry-content .wp-block-columns { gap: 1.75rem; }
  .ast-single-entry-banner { min-height: 260px; padding-bottom: 1.75rem !important; }
}

@media (max-width: 600px) {
  :root { --adp-rythme: 36px; }
  body { font-size: 17px; }
  .entry-content p { font-size: 17px; }
  .entry-content .wp-block-columns .wp-block-image img { max-height: 56px; }
}

/* --- Impression --------------------------------------------------------- */
@media print {
  .site-header, .ast-single-entry-banner, .wp-block-embed { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
}

/* ==========================================================================
   Appels à l'action — ajouté le 2026-08-13
   La visite est l'objet même du site, mais son bouton n'apparaissait qu'une
   fois, isolé au milieu de la page. Un visiteur qui défile le perdait
   définitivement. On le rend permanent et on le hiérarchise.
   ========================================================================== */

/* En-tête collant : l'accès à la visite ne quitte jamais l'écran. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
}

/* --- Bouton de l'en-tête ------------------------------------------------ */
.adp-cta-nav { display: flex; align-items: center; margin-left: 1.5rem; }

/* Spécificité renforcée : `.main-header-menu a` porte un !important sur la
   couleur et rendait le libellé sombre sur fond bleu. */
.main-header-menu .adp-cta-nav .adp-cta-nav__lien,
.main-header-menu .adp-cta-nav .adp-cta-nav__lien:visited,
.adp-cta-nav__lien,
.adp-cta-nav__lien:visited {
  display: inline-block;
  background: var(--adp-accent);
  color: #FFFFFF !important;
  font-family: var(--adp-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 11px 20px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.main-header-menu .adp-cta-nav .adp-cta-nav__lien:hover,
.adp-cta-nav__lien:hover { background: var(--adp-accent-vif); color: #FFFFFF !important; }

/* --- Bouton du bandeau -------------------------------------------------- */
.adp-cta-hero { margin: 22px 0 0; text-align: center; }

.adp-cta-hero__lien,
.adp-cta-hero__lien:visited {
  display: inline-block;
  background: #FFFFFF;
  color: var(--adp-accent) !important;
  font-family: var(--adp-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 16px 42px;
  border-radius: 3px;
  text-decoration: none;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.adp-cta-hero__lien:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 20px rgba(0,0,0,.24);
  color: var(--adp-accent-vif) !important;
}

/* --- Bouton d'origine dans la page -------------------------------------- */
/* Retire : il se trouvait immediatement sous le bandeau, qui porte desormais
   le meme appel a l'action, et l'en-tete collant le rend accessible en
   permanence. Trois boutons identiques a l'ecran nuisaient a la lisibilite.
   Masquage par la feuille de style : le bloc reste dans le contenu, donc la
   suppression est reversible sans toucher a la page. */
.entry-content .wp-block-buttons {
  display: none;
}

/* --- Petits écrans ------------------------------------------------------ */
@media (max-width: 921px) {
  /* Le menu passe en tiroir : le bouton d'en-tête ferait doublon. */
  .adp-cta-nav { display: none; }
  .adp-cta-hero__lien { font-size: 17px; padding: 15px 30px; }
  .entry-content .wp-block-buttons { padding: 1.75rem 1rem; }
}


/* --- Avertissement de durée de chargement -------------------------------- */
/* La visite précharge six faces par panorama haute définition : le premier
   affichage peut demander une à deux minutes. Sans mention, le visiteur croit
   à un blocage et referme l'onglet. */
.adp-attente {
  display: block;
  margin: 12px auto 0;
  font-family: var(--adp-sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
  max-width: 34em;
  text-align: center;
}

.entry-content .adp-attente { color: var(--adp-texte-doux); }


/* La mention hérite sinon du `justify` appliqué au texte courant. */
.entry-content p.adp-attente,
.adp-cta-hero .adp-attente {
  text-align: center;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* ==========================================================================
   Corrections de mise en page — 2026-08-13
   ========================================================================== */

/* --- Centrage des blocs larges ------------------------------------------ */
/* Astra applique des marges négatives à .alignwide : les blocs faisaient
   1200px avec 0 de marge à gauche et 40 à droite, donc décalés. */
.entry-content .alignwide,
.entry-content .wp-block-columns.alignwide,
.entry-content .wp-block-columns,
.entry-content .wp-block-kubio-spacer {
  max-width: var(--adp-media-large) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* --- Médias centrés dans leur colonne ----------------------------------- */
.entry-content .wp-block-columns .wp-block-image,
.entry-content .wp-block-column > figure {
  justify-content: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.entry-content .wp-block-embed__wrapper,
.entry-content figure.wp-block-embed {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Le filet de notice reste à gauche du texte, mais le logo se centre. */
.entry-content .wp-block-column:has(> .wp-block-image) > .wp-block-image {
  justify-content: center;
}

/* --- Mention de licence renvoyée en fin de page ------------------------- */
/* Elle occupait la 6e position sur 37, juste sous le bandeau : le premier
   contenu lu était une clause juridique. `order` la déplace visuellement
   sans toucher au contenu. */
.entry-content {
  display: flex;
  flex-direction: column;
}

.entry-content > center {
  order: 99;
  margin-top: var(--adp-rythme);
  padding-top: 1.75rem;
  border-top: 1px solid var(--adp-filet);
  font-size: 14px;
  line-height: 1.55;
  color: var(--adp-texte-doux);
  max-width: var(--adp-media-large);
}

.entry-content > center img { max-height: 22px; width: auto; vertical-align: middle; }

/* --- Pied de page ------------------------------------------------------- */
/* `.site-below-footer-wrap` portait un fond noir pur : texte gris sur noir. */
.site-footer,
.site-footer .site-below-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-builder-layout-element,
.site-footer .ast-footer-copyright {
  background-color: #F2F0EC !important;
  color: var(--adp-texte-doux) !important;
}

.site-footer,
.site-below-footer-wrap { border-top: 1px solid var(--adp-filet); }

.site-footer a,
.site-below-footer-wrap a { color: var(--adp-accent) !important; }

/* --- Ordre des sections -------------------------------------------------- */
/* La page s'ouvrait sur deux teasers puis une clause de licence ; « Notre
   projet » n'arrivait qu'en quatrième position. On réordonne visuellement
   avec `order`, sans toucher au contenu :
     1. Notre projet      2. les teasers      3. Tutoriels et la suite
   ATTENTION : ces règles reposent sur la position des blocs dans la page.
   Si le contenu est réorganisé dans l'éditeur, elles seront à revoir — la
   solution durable est de déplacer les blocs dans WordPress. */

/* (ordonnancement désormais fait dans le HTML, pas en CSS) */

/* La licence ferme la page. */
.entry-content > center { order: 99; }

/* La règle `> center` (0,1,1) perdait contre `> :nth-child()` (0,2,0). */
.entry-content > center { order: 99 !important; }

/* Blocs d'espacement vides hérités de Kubio : ~150px cumulés avant le premier
   titre, alors que le bandeau assure déjà la séparation. */
.entry-content > .wp-block-kubio-spacer,
.entry-content > div.wp-block:empty,
.entry-content > div.wp-block:not([class*="columns"]):not([class*="spacer"]):not([class*="heading"]):empty {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- En-tête : fond uniforme -------------------------------------------- */
/* Un fond résiduel subsistait derrière le titre et autour du menu. */
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.site-branding,
.ast-site-identity,
.site-header .ast-builder-layout-element,
.site-header .site-primary-header-wrap,
.ast-primary-header-bar .site-primary-header-wrap {
  background-color: var(--adp-surface) !important;
}

/* --- Titres de section : pleine largeur, alignés à gauche ---------------- */
/* Centrés, ils flottaient au-dessus d'un contenu réparti en colonnes et
   paraissaient désalignés. Un filet pleine largeur pose la section. */
.entry-content h2 {
  max-width: var(--adp-media-large);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  padding-top: 1rem;
}

/* Les paragraphes hors colonnes s'alignent sur ce même bord. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  max-width: var(--adp-media-large);
  padding-left: 0;
}

/* --- Effet de bord du conteneur flex ------------------------------------- */
/* `.entry-content` est en flex colonne (pour réordonner les sections). Dans ce
   contexte, `margin: auto` sur l'axe transversal centre l'élément ET le
   rétrécit à la largeur de son contenu : les titres devenaient de petits blocs
   centrés au lieu de bandeaux pleine largeur. `width: 100%` rétablit le
   comportement attendu, `max-width` continuant de borner. */
.entry-content > * {
  width: 100%;
}

.entry-content > h2,
.entry-content > .wp-block-heading {
  max-width: var(--adp-media-large);
  align-self: center;
  text-align: left;
}

.entry-content > p,
.entry-content > center {
  align-self: center;
}

/* --- Alignement vertical des colonnes ------------------------------------ */
/* Certaines colonnes portent `is-vertically-aligned-center` : la vidéo se
   centrait dans une colonne aussi haute que le texte voisin, donc flottait
   au milieu d'un grand vide. On les cale en haut, en regard du texte. */
.entry-content .wp-block-column.is-vertically-aligned-center,
.entry-content .wp-block-column.is-vertically-aligned-bottom {
  align-self: flex-start !important;
}

/* --- Pied de page : une seule séparation, contenu centré ----------------- */
/* J'avais posé une bordure haute sur `.site-footer` ET sur
   `.site-below-footer-wrap` imbriqué : deux filets superposés. */
.site-footer { border-top: 1px solid var(--adp-filet); }
.site-below-footer-wrap,
.site-footer .ast-builder-layout-element,
.site-footer .site-primary-footer-wrap { border-top: none !important; }

.site-footer,
.site-footer .ast-footer-copyright,
.site-footer .ast-builder-layout-element,
.site-below-footer-wrap {
  text-align: center !important;
}

.site-footer .ast-builder-grid-row,
.site-below-footer-wrap .ast-builder-grid-row {
  justify-content: center !important;
  justify-items: center !important;
  grid-template-columns: 1fr !important;
  gap: 6px;
}

.site-footer .ast-footer-copyright p { margin: 0; text-align: center; }

/* --- Espace sous les titres de section ---------------------------------- */
/* Blocs vides hérités qui ajoutaient un saut de ligne systématique. */
.entry-content > .wp-block-heading + div.wp-block:empty,
.entry-content div.wp-block:empty {
  display: none !important;
}

.entry-content h2 { margin-bottom: 1.1rem; }

/* --- Titres de section : centrés, sans filet ----------------------------- */
/* Le filet bleu au-dessus se lisait comme une barre de séparation parasite.
   Les titres sont recentrés sur la pleine largeur du contenu. */
.entry-content h2,
.entry-content > h2,
.entry-content > .wp-block-heading {
  border-top: none !important;
  padding-top: 0 !important;
  text-align: center !important;
  max-width: var(--adp-media-large);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.6rem;
}

/* --- Titre du site : plus long, donc légèrement resserré ----------------- */
.site-title, .site-title a {
  font-size: 20px !important;
  line-height: 1.25;
}
@media (max-width: 1100px) { .site-title, .site-title a { font-size: 17px !important; } }
@media (max-width: 921px)  { .site-title, .site-title a { font-size: 18px !important; } }

/* --- Mention de licence dans le pied de page ----------------------------- */
.adp-licence {
  background: #F2F0EC;
  color: var(--adp-texte-doux);
  font-family: var(--adp-sans);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  padding: 0 1.5rem 1.75rem;
  margin: 0;
}
.adp-licence p { margin: 0 auto; max-width: 62em; font-size: 13px; text-align: center; }
.adp-licence a { color: var(--adp-accent); }
.adp-licence img { max-height: 18px; width: auto; vertical-align: text-bottom; margin-left: 2px; }

/* Ancien filet de sécurité anti-widget RETIRÉ : il masquait aussi la section
   contenant « Mentions légales », qui est une obligation légale. Le crédit
   WordPress est déjà supprimé du HTML, ce garde-fou était inutile et nuisible. */

/* Le lien vers les mentions légales doit rester visible en toutes circonstances. */
.site-footer a[href*="privacy-policy"],
.site-footer a[href*="mentions"] {
  display: inline-block !important;
  visibility: visible !important;
}
.site-footer [class*="site-footer-below-section"]:has(a[href*="privacy-policy"]),
.site-footer .footer-widget-area:has(a[href*="privacy-policy"]) {
  display: block !important;
}

/* --- Sauts de ligne parasites -------------------------------------------- */
/* Quatre paragraphes du contenu commencent par un <br> : une ligne vide en
   tête, qui s'ajoute à la marge du paragraphe et double l'écart. On la
   neutralise sans toucher au texte. */
/* (traité dans le HTML : en CSS, :first-child compte les ELEMENTS et non les
   nœuds, donc un <br> précédé de texte était masqué à tort, collant les
   phrases entre elles.) */

/* Listes écrites en « – item<br> » : on resserre leur interligne pour
   qu'elles se lisent comme une liste et non comme du texte courant. */
.entry-content p:has(br + br),
.entry-content p:has(br) {
  text-align: left;
  hyphens: manual;
}

/* --- Pied de page : hauteur ramenée au nécessaire ------------------------ */
/* 65px de remplissage haut et bas pour 202px de contenu. */
.site-below-footer-wrap,
.site-footer .site-below-footer-wrap {
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}

.site-footer .ast-builder-grid-row,
.site-below-footer-wrap .ast-builder-grid-row {
  gap: 2px !important;
}

.site-footer .ast-builder-layout-element,
.site-footer .site-footer-below-section-1,
.site-footer .site-footer-below-section-2,
.site-footer .site-footer-below-section-3 {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.site-footer .ast-footer-copyright { margin: 0 !important; }

.adp-licence { padding-top: 10px; padding-bottom: 20px; }

/* ==========================================================================
   Pied de page et section Contact — ajustements finaux
   ========================================================================== */

/* Plus aucun filet au-dessus du copyright : le changement de fond suffit. */
.site-footer,
.site-below-footer-wrap,
.site-footer .ast-builder-layout-element {
  border-top: none !important;
  border-bottom: none !important;
}

/* Les trois blocs du pied sur une même ligne, au lieu d'être empilés. */
.site-footer .ast-builder-footer-grid-columns,
.site-below-footer-wrap .ast-builder-grid-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 28px !important;
  grid-template-columns: none !important;
}

.site-footer [class*="site-footer-below-section"] {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0 !important;
}

.site-footer [class*="site-footer-below-section"]:empty { display: none !important; }

.site-below-footer-wrap,
.site-footer .site-below-footer-wrap {
  padding-top: 16px !important;
  padding-bottom: 10px !important;
}

.adp-licence { padding-top: 4px; padding-bottom: 16px; }

/* --- Section Contact : tout centré, listes en ligne ---------------------- */
/* Les paragraphes restaient alignés à gauche sous des listes centrées. */
.entry-content .wp-block-column:has(ul) p,
.entry-content .wp-block-column:has(ul) ul,
.entry-content .wp-block-column:has(ul) li {
  text-align: center !important;
  hyphens: manual;
}

.entry-content .wp-block-column ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}

.entry-content .wp-block-column ul:not(.wp-block-social-links) li { margin: 0; }

.entry-content .wp-block-column ul:not(.wp-block-social-links) li a {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--adp-filet);
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  background: var(--adp-surface);
  transition: border-color .15s ease, color .15s ease;
}
.entry-content .wp-block-column ul:not(.wp-block-social-links) li a:hover {
  border-color: var(--adp-accent);
  color: var(--adp-accent-vif);
}

/* Les blocs du pied n'ont pas la même hauteur : on les aligne sur leur axe. */
.site-footer [class*="site-footer-below-section"] {
  align-self: center !important;
  display: flex !important;
  align-items: center;
}
.site-footer [class*="site-footer-below-section"] > * { margin: 0 !important; }

/* Hauteur de ligne uniforme dans le pied : les deux blocs se calaient sinon
   sur des lignes de base différentes (12px d'écart). */
.site-footer [class*="site-footer-below-section"],
.site-footer [class*="site-footer-below-section"] *,
.site-footer .ast-footer-copyright p,
.site-footer .ast-footer-copyright a {
  line-height: 1.5 !important;
  font-size: 15px !important;
}

/* --- Liens sociaux : ce sont des blocs WordPress, pas des listes ---------- */
/* Mon style générique de liste les avait transformés en pastilles de texte et
   écrasé leurs icônes SVG (24x24 ramenées à 16x16). On les rétablit comme
   boutons ronds, dans la palette du site. */
.entry-content ul.wp-block-social-links,
.entry-content .wp-block-social-links {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px !important;
  list-style: none;
  margin: 4px auto 26px !important;
  padding: 0 !important;
}

/* Surtout PAS de `background` ici : WordPress porte la couleur de marque sur
   le <li> lui-même (.wp-social-link-youtube, -instagram, -mail). La neutraliser
   rendait toutes les pastilles blanches. */
.entry-content .wp-block-social-links li,
.entry-content .wp-block-social-link {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* On annule le style « pastille de texte » hérité de ma règle générique. */
/* On ne touche PAS au fond : WordPress fournit les couleurs de marque
   (YouTube rouge, Instagram, etc.) via des règles `:where()` de spécificité
   nulle — la moindre déclaration de notre part les écraserait toutes. */
.entry-content .wp-block-social-links li a,
.entry-content .wp-block-social-link a,
.entry-content a.wp-block-social-link-anchor {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  /* Transparent, impérativement : la couleur de marque est portée par le <li>
     et un fond sur le <a> la recouvrirait — c'est ce qui rendait les icônes
     blanches sur blanc. */
  background: transparent !important;
  transition: transform .12s ease, filter .12s ease;
}

.entry-content a.wp-block-social-link-anchor:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.entry-content .wp-block-social-link-anchor svg {
  width: 22px !important;
  height: 22px !important;
  max-height: none !important;
  fill: currentColor;
  display: block;
}

/* Le libellé est réservé aux lecteurs d'écran : il ne doit pas s'afficher. */
.entry-content .wp-block-social-link-label {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Le filet du pied : c'est l'élément INTERNE qui le porte -------------- */
/* Mes règles précédentes visaient les conteneurs externes ; Astra borde
   `div.ast-footer-copyright` lui-même. */
.site-footer .ast-footer-copyright,
.site-footer div.ast-footer-copyright,
.site-footer [class*="below-section"] > *,
.site-footer .footer-widget-area,
.site-footer .widget {
  border-top: none !important;
  border-bottom: none !important;
}

/* --- Alignement des deux blocs ------------------------------------------- */
/* La section « Mentions légales » faisait 49px de haut pour un lien de 24 :
   le surplus venait des marges internes du widget. */
.site-footer [class*="below-section"],
.site-footer [class*="below-section"] > *,
.site-footer .footer-widget-area,
.site-footer .widget,
.site-footer .widget > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

.site-footer [class*="below-section"] {
  display: flex !important;
  align-items: center !important;
}

/* --- Espacements autour des titres de section ---------------------------- */
/* Sous « Médias » s'empilaient : 72px d'espaceur + 30px sous le titre +
   42,75px de marge sur « Ils parlent de nous ! ». */
.entry-content h2,
.entry-content > h2,
.entry-content > .wp-block-heading {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* Paragraphe d'accroche suivant immédiatement un titre : marge resserrée. */
.entry-content .wp-block-heading + p,
.entry-content .wp-block-heading + div + p,
.entry-content h2 + p {
  margin-top: 0 !important;
}

/* Astra impose 42,75px sur les paragraphes centrés ; on aligne sur le rythme. */
.entry-content p,
.entry-content .entry-content p,
.entry-content p.has-text-align-center {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

/* L'espaceur qui précède un titre suffit : on retire celui qui le suit. */
.entry-content .wp-block-spacer + .wp-block-heading { margin-top: 0 !important; }

/* --- Crédit du moteur : retiré ------------------------------------------- */
/* Le site faisait de la publicité pour ses outils, ce qui dessert le registre
   institutionnel. On cible le widget par le lien qu'il contient, sans toucher
   aux autres widgets du pied (dont « Mentions légales »). */
.site-footer .widget_text:has(a[href*="wordpress.org"]),
.site-footer .textwidget:has(a[href*="wordpress.org"]),
.site-footer aside:has(a[href*="wordpress.org"]) {
  display: none !important;
}

/* --- Alignement du pied : spécificité renforcée --------------------------- */
/* La section « Mentions légales » restait en display:block avec 49px de haut
   pour un contenu de 23 : ni flex ni centrée. */
.site-footer div[class*="site-footer-below-section"],
.site-below-footer-wrap div[class*="site-footer-below-section"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: center !important;
}

.site-footer div[class*="site-footer-below-section"] > *,
.site-footer div[class*="site-footer-below-section"] aside,
.site-footer div[class*="site-footer-below-section"] .widget {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 0 !important;
}

/* --- Bouton du bandeau : rendu hors de la <section> ---------------------- */
/* Les hooks d'Astra encadrent le gabarit du bandeau, ils sont donc à
   l'extérieur de la section : le bouton tombait sur le fond clair et sa
   mention blanche devenait invisible. Plutôt que de forcer le thème, le bloc
   prend le même aplat et se colle au bandeau : l'ensemble se lit d'un tenant. */
.ast-single-entry-banner { padding-bottom: 18px !important; }

.adp-cta-hero {
  background: var(--adp-accent);
  margin: 0 !important;
  padding: 0 1.5rem 40px;
  text-align: center;
  border-bottom: 4px solid #13284B;
}

/* Le filet sous le titre appartenait au bandeau : on le déplace ici pour que
   la séparation reste au bon endroit visuellement. */
.ast-single-entry-banner { border-bottom: none !important; }

/* Le <p> imbriqué dans .textwidget portait 26px de marge basse : c'est lui qui
   donnait 49px de haut à la section et décalait les deux blocs du pied. */
.site-footer [class*="site-footer-below-section"] p,
.site-footer .textwidget p,
.site-footer .widget p,
.site-footer aside p {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Vidéos bloquées par le gestionnaire de consentement ----------------- */
/* iubenda remplace la source des lecteurs YouTube par une page vide tant que
   les cookies ne sont pas acceptés. Le visiteur voyait un rectangle gris
   anonyme, sans savoir que le contenu existe ni comment l'afficher. */
.entry-content .wp-block-embed:has(iframe[src*="cookie_solution"]),
.entry-content figure:has(iframe[src*="cookie_solution"]) {
  position: relative;
}

.entry-content .wp-block-embed:has(iframe[src*="cookie_solution"])::after,
.entry-content figure:has(iframe[src*="cookie_solution"])::after {
  content: "Vidéo masquée : elle ne s’affichera qu’après acceptation des cookies.";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  font-family: var(--adp-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--adp-texte-doux);
  background: #EFEDE9;
  border: 1px solid var(--adp-filet);
  pointer-events: none;
}

/* --- Façade vidéo -------------------------------------------------------- */
/* Vignette hébergée localement ; le lecteur YouTube n'est inséré qu'au clic.
   Aucune requête vers Google avant, donc rien à consentir et vidéos visibles
   par tous — y compris ceux qui refusent les cookies. */
.entry-content .adp-video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 1px solid var(--adp-filet);
  border-radius: 0;
  background-color: #DEDBD5;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  transition: filter .15s ease;
}
.entry-content .adp-video-facade:hover { filter: brightness(1.05); }
.entry-content .adp-video-facade:focus-visible {
  outline: 3px solid var(--adp-accent);
  outline-offset: 2px;
}

/* Voile sombre en bas, pour que le titre reste lisible sur toute vignette. */
.entry-content .adp-video-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.62) 100%);
}

.entry-content .adp-video-facade__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 48px;
  border-radius: 10px;
  background: rgba(20,26,36,.78);
  z-index: 1;
  transition: background-color .15s ease, transform .15s ease;
}
.entry-content .adp-video-facade__play::before {
  content: '';
  position: absolute;
  top: 50%; left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #FFFFFF;
}
.entry-content .adp-video-facade:hover .adp-video-facade__play {
  background: var(--adp-accent);
  transform: translate(-50%, -50%) scale(1.06);
}

.entry-content .adp-video-facade__titre {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 14px 16px;
  font-family: var(--adp-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #FFFFFF;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.entry-content iframe.adp-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 1px solid var(--adp-filet);
}

/* Le message « vidéo masquée » n'a plus lieu d'être : plus rien n'est bloqué. */
.entry-content .wp-block-embed:has(iframe[src*="cookie_solution"])::after,
.entry-content figure:has(iframe[src*="cookie_solution"])::after { content: none; }

@media (max-width: 600px) {
  .entry-content .adp-video-facade__play { width: 56px; height: 40px; }
  .entry-content .adp-video-facade__titre { font-size: 13px; padding: 10px 12px; }
}

/* --- Conteneur d'intégration d'Astra ------------------------------------- */
/* `.ast-oembed-container` réserve le ratio 16:9 avec un padding-top de 56,25 %,
   en prévision d'un <iframe> positionné en absolu. La façade est en flux
   normal : elle se plaçait SOUS ce remplissage, laissant 307 px de vide
   au-dessus de chaque vidéo. */
.entry-content .ast-oembed-container:has(.adp-video-facade),
.entry-content .ast-oembed-container:has(iframe.adp-video) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  position: static !important;
}

.entry-content .ast-oembed-container > .adp-video-facade,
.entry-content .ast-oembed-container > iframe.adp-video {
  position: static !important;
  top: auto; left: auto;
}

.entry-content figure.wp-block-embed:has(.adp-video-facade),
.entry-content .wp-block-embed__wrapper:has(.adp-video-facade) {
  height: auto !important;
  min-height: 0 !important;
}

.entry-content figure.wp-block-embed { margin-bottom: 20px !important; }

/* --- Lignes d'accroche centrées ------------------------------------------ */
/* Ces paragraphes portent `has-text-align-center` dans le contenu : c'est un
   choix de l'auteur, que ma justification globale écrasait. On le rétablit
   pour les paragraphes AUTONOMES (enfants directs), qui sont de courtes
   accroches sous les titres. Le corps de texte, lui, reste justifié : centrer
   de longs paragraphes rend le bord gauche illisible. */
.entry-content > p.has-text-align-center,
.entry-content > p.has-text-align-center strong,
.entry-content > p.has-text-align-center em {
  text-align: center !important;
  hyphens: manual;
  max-width: var(--adp-texte-large);
  margin-left: auto;
  margin-right: auto;
}

/* --- Justification du corps de texte : spécificité rétablie -------------- */
/* `.entry-content p.has-text-align-left` (0,2,1) l'emportait sur la règle de
   justification (0,1,1), quel que soit l'ordre : le corps de texte était
   revenu en drapeau sans que ça se voie. */
.entry-content p.has-text-align-left,
.entry-content .wp-block-column p,
.entry-content .wp-block-column p.has-text-align-left,
.entry-content .wp-block-column p.has-text-align-center {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Sauf : les accroches autonomes centrées, les listes en « – item<br> »,
   et les notices de presse, qui restent en drapeau. */
.entry-content > p.has-text-align-center,
.entry-content p:has(br),
.entry-content .wp-block-column:has(> .wp-block-image) > p,
.entry-content .adp-attente,
.entry-content .wp-block-column ul,
.entry-content .wp-block-column li {
  text-align: initial;
  hyphens: manual;
}

.entry-content > p.has-text-align-center { text-align: center !important; }

.entry-content p:has(br),
.entry-content .wp-block-column:has(> .wp-block-image) > p {
  text-align: left !important;
}