/*
Theme Name:  Aphasie Québec
Theme URI:   https://aphasiequebec.com
Description: Thème de blocs enfant dédié au site d'Aphasie Québec - Le Réseau. Basé sur la maquette « Proposition visuelle 1.0 ».
Author:      ZAA
Author URI:  https://zaa.cc
Template:    twentytwentyfive
Version:     1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aphasiequebec
*/ 

/* ============================================================
   Variables
   Les couleurs, polices, rayons et ombres sont définis dans le
   theme.json (variables --wp--preset--* et --wp--custom--*).
   Les alias ci-dessous permettent de réutiliser le CSS de la
   maquette sans dupliquer les valeurs.
   ============================================================ */
:root {
  --blue-sky:    var(--wp--preset--color--blue-sky);
  --blue-light:  var(--wp--preset--color--blue-light);
  --blue-pale:   var(--wp--preset--color--blue-pale);
  --blue-deep:   var(--wp--preset--color--blue-deep);
  --accent2:     var(--wp--preset--color--accent-2);
  --blue-navy:   var(--wp--preset--color--blue-navy);
  --black:       var(--wp--preset--color--blue-navy);
  --gray-light:  var(--wp--preset--color--gray-light);
  --gray-mid:    var(--wp--preset--color--gray-mid);
  --white:       var(--wp--preset--color--white);
  --accent:      var(--wp--preset--color--accent);

  --font-heading: var(--wp--preset--font-family--heading);
  --font-body:    var(--wp--preset--font-family--body);

  --radius:      var(--wp--custom--radius); /* 12px */
  --radius-20:   20px;
  --radius-lg:   var(--wp--custom--radius-lg); /*24px*/
  --radius-xl:   32px; /*32px*/
  --radius-cercle : 50%;
  --shadow:      var(--wp--custom--shadow);
  --shadow-card: var(--wp--custom--shadow-card);

  --font-scale:  1;

  --bg-blue:  var(--wp--preset--gradient--bg-blue);
  --bg-blue2: var(--wp--preset--gradient--bg-blue-2);

  /* Tailles de texte : définies dans le theme.json (une seule source),
     alias courts pour le CSS de la maquette.
     x-small 0.75 · small 0.85 · medium 0.9 · large 1 · x-large 1.25
     xx-large clamp(1.6→2.4) titres de section · xxx-large clamp(2→3) héros */
  --fs-xs:  var(--wp--preset--font-size--x-small);
  --fs-sm:  var(--wp--preset--font-size--small);
  --fs-md:  var(--wp--preset--font-size--medium);
  --fs-lg:  var(--wp--preset--font-size--large);
  --fs-xl:  var(--wp--preset--font-size--x-large);
  --fs-xxl: var(--wp--preset--font-size--xx-large);
  --fs-xxxl: var(--wp--preset--font-size--xxx-large);
}

/* Accessibility: font scaling */
html { font-size: calc(16px * var(--font-scale)); }

/* High contrast mode */
body.high-contrast {
  --blue-sky:   #005A8E;
  --blue-light: #003F6B;
  --blue-pale:  #CCE8F4;
  --blue-deep:  #002B4D;
  --blue-navy:  #001A30;
  --black:  #111111;
  --white:      #FFFFFF;
}
body.high-contrast * { border-color: #000 !important; }
body.high-contrast .card { border: 2px solid #000; }

/* Les boutons Gutenberg utilisent la variable preset WordPress
   (--wp--preset--color--blue-sky) et non l'alias du thème : en contraste
   élevé, on fonce cette variable UNIQUEMENT sur le bouton (texte blanc sur
   bleu ciel = 2,5:1 → 7,4:1), sans toucher aux fonds de section clairs. */
body.high-contrast .wp-block-button__link,
body.high-contrast .wp-element-button {
  --wp--preset--color--blue-sky: #005A8E;
}

/* Contraste élevé : bordures plus épaisses (+2px) sur des éléments
   d'interface fins, pour mieux les délimiter. */
body.high-contrast .search-wrap input { border-width: 3px; }
body.high-contrast .wp-block-zaa-faq-item { border-width: 3px; }

/* Le sélecteur de langue est sur le fond foncé de la barre utilitaire :
   une bordure noire (règle globale) y serait invisible, on force donc du
   blanc — le !important + la spécificité l'emportent sur body.high-contrast *. */
body.high-contrast .lang-switcher a {
  border: 2px solid #fff !important;
  border-radius: var(--radius-20);
  padding: 1px 7px;
}

/* Indicateur de focus clavier visible sur tous les éléments interactifs
   (champs, boutons natifs, résumés d'accordéon…). Les liens <a> ont déjà
   leur propre règle a:focus-visible. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue-sky);
  outline-offset: 2px;
}

/* Respect de « réduire les animations » du système : on neutralise
   animations et transitions pour les personnes sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  line-height: 1.7;
  font-size: var(--fs-lg);
  overflow-x: hidden;
}

/* Les liens de contenu sont soulignés pour être repérables sans dépendre
   de la seule couleur (WCAG 1.4.1). Les éléments d'interface (navigations,
   boutons, logo, icônes, cartes cliquables) sont exclus juste après. */
a { color: var(--blue-deep); text-decoration: underline; }

.wp-block-navigation a,
.wp-block-button__link,
.btn,
.skip-link,
.logo-wrap a,
.social-icons a,
.contact-social a,
.lang-switcher a,
#utility-bar a,
.utility-bar-link,
.nav-inner a,
.card a,
.card-flip a,
.tool-card a,
.news-card a,
.btn-contact-popup a,
.footer-brand > a {
  text-decoration: none;
}

a:focus-visible {
  outline: 3px solid var(--blue-sky);
  outline-offset: 3px;
  border-radius: var(--radius);
}

strong {
  font-weight: 600;
}

img { max-width: 100%; display: block; }
ul { list-style: none; }

/* Utilitaires d'espacement */
.mb-1 { margin-bottom: 1rem; }
.mt-1 { margin-top: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }

/* Contenu masqué visuellement mais présent dans le DOM (ex. mots-clés de recherche) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Coins arrondis (images, encadrés…) */
.round-border { border-radius: var(--radius); } 

h1,h2,h3,h4 {
  font-family: var(--font-heading);
  color: var(--blue-navy);
  line-height: 1.25;
}

:root :where(.is-layout-flow) > * {
  margin-block-start: 0;
}

/* Skip to content */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--blue-navy);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 700;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   UTILITY BAR (top bar #1 — fixed)
   ============================================================ */
#utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background:var(--blue-deep);
  color: var(--white);
  padding: 0 2rem;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}

.utility-left,
.utility-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.utility-bar-link svg { width: 15px; height: 15px; fill: var(--white); }
.utility-bar-link:hover svg { width: 15px; height: 15px; fill: var(--blue-pale); }
.utility-bar-link {
  color: var(--white);
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-sm);
  opacity: 1;

}
.utility-bar-link:hover { color: var(--blue-pale); text-decoration: underline; }



.utility-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.25);
}

/* Social icons in utility bar */
.social-icons {
  display: flex;
  gap: .5rem;
}
.social-icons a {
  color: var(--white);
  opacity: .85;
  display: flex;
  align-items: center;
}
.social-icons svg, .social-icons a::before { width: 16px; height: 16px; fill: var(--white); } 
.social-icons a:hover, .social-icons a:hover::before { color: var(--black); }
.social-icons a:hover svg { fill: var(--black); color: var(--black); }
@media (max-width:1024px) {
  .social-icons span.wp-block-navigation-item__label {
    padding-left:0.25rem;
  }
}
.footer-social a::before {
    top: 5px;
    left: 5px;
    margin-left: 10px;
    margin-top: 10px;
}
.footer-social a:hover::before {
    color:var(--black);
    fill:var(--black);
}
#copyright a:hover::before {
    color:var(--blue-light);
    fill:var(--blue-light);
}

a.messenger svg, .footer-messenger a svg { width: 16px; height: 16px; fill: #0866ff; }
a.social-icons:hover { color: var(--black); }
a.messenger:hover svg { fill: var(--black) !important; color: var(--black); }

/* Menu des réseaux sociaux : couleurs et tailles propres à ce site.
   La structure vit dans assets/css/social-icons.css (réutilisable),
   les icônes suivent la couleur du lien (currentColor).
   Pour une couleur de marque par réseau, cibler par URL, ex. :
   .social-icons a[href*="youtube.com"] { color: #ff0000; } */
#utility-bar .social-icons {
  --social-icon-size: 16px;
  --social-icons-gap: .5rem;
}


/* Contact popup trigger */
.btn-contact-popup {
  background: var(--blue-sky);
  color: #fff;
  border: none;
  padding: .3rem .9rem;
  border-radius: var(--radius-20);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.btn-contact-popup:hover { background: var(--blue-navy); color: #fff; }
.footer .btn-contact-popup:hover { background: var(--blue-deep); color: #fff; }

/* ------------------------------------------------------------
   En-tête en blocs (parts/header.html) : les liens de la barre
   utilitaire sont des paragraphes Gutenberg. Le style s'applique
   au <p>, le lien intérieur hérite de la couleur.
   ------------------------------------------------------------ */
#utility-bar p { margin: 0; }
.utility-bar-link a,
.btn-contact-popup a { color: inherit; text-decoration: none; }
.utility-bar-link:hover a { text-decoration: underline; }

/* Icônes utilitaires .icon-… : le pseudo-élément ::before et les data
   URI sont GÉNÉRÉS depuis zaa_icons() (voir zaa_icons_css() dans
   inc/icons.php) — source unique, ne pas les redéclarer ici.
   Ici on ne garde que les réglages propres à ce site : taille par
   contexte via --icon-size, espacement via --icon-gap. */
.utility-bar-link[class*="icon-"] { --icon-size: 15px; }

nav.contact .wp-block-navigation-item__content { margin-left:5px;}
/* Language */
.lang-btn {
  background: transparent;
  border: 1px solid var(--white);
  color: var(--white);
  padding: .1rem .65rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .2s;
}
.lang-btn:hover { background: var(--blue-navy); 
  border: 1px solid var(--blue-navy);
  color: var(--white);}

/* Search bar */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-wrap input {
  background: rgba(255,255,255,1);
  border: 2px solid var(--blue-navy);
  color: var(--blue-navy);
  padding: .3rem .75rem .3rem 2rem;
  border-radius: var(--radius-20);
  font-size: var(--fs-sm);
  width: 160px;
  /* width: 0; */
  /* transition: width .35s, background .2s; */
  outline: none;
}
.search-wrap input::placeholder { color: var(--blue-navy); }
/* .search-wrap.open input { width: 160px; } */
/*.search-wrap input:focus { background: rgba(255,255,255,.2); }*/
.search-toggle {
  position: absolute;
  left: .5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0;
}
.search-toggle svg { width: 15px; height: 15px; fill: var(--blue-navy); color:var(--blue-navy); }

/* ============================================================
   MAIN NAVIGATION (header #2 — sticky on scroll)
   ============================================================ */
#main-header {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--white);
  box-shadow: 0 2px 20px rgba(14,58,92,.08);
  transition: top .3s, box-shadow .3s;
}
#main-header.scrolled {
  top: 44px;
  box-shadow: 0 4px 30px rgba(14,58,92,.15);
}

/* Aperçu dans l'Éditeur de site : #utility-bar et #main-header sont en
   position fixed, donc sans hauteur dans le flux normal. Quand on édite
   le template part header seul, le canevas se retrouve écrasé et les
   deux barres n'ont presque pas d'espace pour s'afficher. On donne au
   canevas de l'éditeur une hauteur minimale pour que l'aperçu soit
   fidèle ; ça n'a aucun effet sur le site public. */
.editor-styles-wrapper {
  min-height: 150px;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width:1024px) {
  .nav-inner {
    padding: .75rem 1.25rem;
  }
}
/* Logo */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.logo-wrap img {
  height: 60px;
  width: auto;
}
/* En blocs, le logo est une image Gutenberg : la figure reprend le rôle
   de l'ancien lien .logo-wrap. */
figure.logo-wrap { margin: 0; }
.logo-wrap a {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.logo-text {
  display: flex;
  flex-direction: column;
}
.logo-text .name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--blue-deep);
  line-height: 1.4;
}
.logo-text .tagline {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--blue-deep);
  line-height: 1.4;
}
span.points {
  font-family: Calibri, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--blue-deep);
  font-weight: 900;
}

/* Nav menu */
.main-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.nav-item {
  position: relative;
}
/* Invisible bridge that fills the .5rem gap between the nav link and its
   dropdown, so the mouse keeps the item :hover while travelling down to the
   submenu. Without it the dropdown flickers open/closed and items such as
   « L'équipe » become impossible to click. */
.nav-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: .5rem;
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--blue-navy);
  padding: .5rem 1rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: .3rem;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
  background: var(--blue-pale);
  color: var(--blue-deep);
}
.nav-link svg { width: 14px; height: 14px; fill: currentColor; transition: transform .25s; }
.nav-item:hover > .nav-link svg { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .25s, transform .25s;
  border: 1px solid var(--blue-pale);
  overflow: hidden;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: .65rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--blue-navy);
  transition: background .15s, color .15s;
}
.dropdown a:hover {
  background: var(--blue-pale);
  color: var(--blue-deep);
}

/* CTA button in nav */
.btn-nav-cta {
  background: var(--blue-sky);
  color: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  padding: .55rem 1.4rem !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(58,175,224,.4);
  transition: background .2s, transform .2s, box-shadow .2s !important;
}
.btn-nav-cta:hover {
  background: var(--blue-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(58,175,224,.5) !important;
  color: var(--white) !important;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  border-radius: var(--radius);
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--blue-navy);
  border-radius: var(--radius);
  transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   PAGE OFFSET (because of fixed bars)
   ============================================================ */
body { padding-top: calc(44px + 82px); }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;

  overflow: hidden;
  padding: 3rem 2rem 6rem;
  display: flex;
  align-items: center;
}
.bg-hero {
  background: linear-gradient(135deg, #CCE8F4 0%, #EBF7FE 50%, #F0F8FD 100%);
}
/* Curved blue shapes (brochure-inspired) */
.bg-hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(125,207,238,.25) 0%, transparent 70%);
  border-radius: var(--radius-cercle);
  pointer-events: none;
}
.bg-hero::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 400px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(58,175,224,.12) 0%, transparent 70%);
  border-radius: var(--radius-cercle);
  pointer-events: none;
}


.bg-fleur-complete {
  position: relative;
  /*background: linear-gradient(135deg, #CCE8F4 0%, #EBF7FE 50%, #F0F8FD 100%);*/
  background: var(--gray-light);
}

.bg-fleur-complete::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/images/AphasieQuebecLereseau-fleur-complete-bg.png) no-repeat;
  pointer-events: none;
      background-position: right;
    background-size: 56%;
}

.bg-fleur {
  position: relative;
  background: linear-gradient(135deg, #CCE8F4 0%, #EBF7FE 50%, #F0F8FD 100%);
}

.bg-fleur::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/images/AphasieQuebecLereseau-fleur-bg.png) top right / contain no-repeat;
  pointer-events: none;
}



.hero-wave-bottom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  line-height: 0;
}
.hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 0;
}
.hero-wave svg, .hero-wave-bottom svg { display: block; width: 100%; }

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-content h1 {
  font-size: var(--fs-xxxl);
  font-weight: 900;
  color: var(--blue-navy);
  margin-bottom: 1.25rem;
  line-height: 1.15;
}
.hero-content h1 span {
  color: var(--blue-deep);
}
.hero-content .lead {
  font-size: var(--fs-xl);
  color: var(--blue-navy);
  max-width: 520px;
  line-height: 1.75;
}

.hero-actions {
  margin-top:1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Stats strip in hero */
.hero-stats {
  display: flex;
  gap: 1.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.stat-item {
  display: flex;
  flex-direction: column;
}
.stat-number {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: var(--fs-xxl);
  color: var(--blue-deep);
  line-height: 1;
}
.stat-label {
  font-size: var(--fs-sm);
  color: var(--black);
  font-weight: 600;
}

/* Hero video placeholder */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;   /* le bloc se colle à droite de la colonne */
  text-align: left;        /* mais le texte reste aligné à gauche */
}
/* La vidéo doit rester pleine largeur malgré align-items: flex-end */
.hero-visual .video-embed-wrap { align-self: stretch; width: 100%; }
.video-embed-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(14,58,92,.18);
  aspect-ratio: 16/9;
  background: var(--blue-navy);
  position: relative;
}
.video-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.video-caption {
  font-size: var(--fs-md);
  color: var(--black);
  text-align: center;
  font-style: italic;
}
.caption {
  font-size: var(--fs-md);
  color: var(--black);
  font-style: italic;
}
/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  padding: .8rem 1.8rem;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm a {font-size: var(--fs-sm);
    padding: .3rem .9rem;
    border-radius: var(--radius-20);
  gap: .35rem;}
.btn-primary {
  background: var(--blue-sky);
  color: #fff;
  box-shadow: 0 6px 20px rgba(58,175,224,.35);
}
.btn-primary:hover {
  background: var(--blue-deep);
  color: #fff;
  box-shadow: 0 8px 28px rgba(58,175,224,.5);
}
.btn-secondary {
  background: var(--blue-deep);
  color: #fff;
  box-shadow: 0 6px 20px rgba(58,175,224,.35);
}
.btn-secondary:hover {
  background: var(--blue-navy);
  color: #fff;
  box-shadow: 0 8px 28px rgba(58,175,224,.5);
}

.btn-outline {
  background: transparent;
  color: var(--blue-deep);
  border-color: var(--blue-deep);
}

.btn-outline:hover {
  background: var(--blue-pale);
  color: var(--blue-navy);
  border-color: var(--blue-navy);
}
.btn-outline-inverse {
  border-color:rgba(255,255,255,.6);
  color:#fff;
  box-shadow: 0 6px 20px rgba(58,175,224,.35);
}
.btn-outline-inverse:hover {
  border-color:var(--blue-navy);
  color:#fff;
  background: var(--blue-navy);
  box-shadow: 0 8px 28px rgba(58,175,224,.5);
}
.btn-white {
  background: #fff;
  color: var(--blue-deep);
  box-shadow: 0 4px 16px rgba(14,58,92,.12);
}
.btn-white:hover {
  background: var(--blue-pale);
  color: var(--blue-navy);
}
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--fs-lg);
}

/* ============================================================
   SECTION COMMONS
   ============================================================ */
section { padding: 5rem 2rem; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-eyebrow, .mission-content h2.section-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: .75rem;
}
.section-title {
  font-size: var(--fs-xxl);
  font-weight: 800;
  color: var(--blue-navy);
  margin-bottom: 1rem;
}
.section-intro {
  font-size: var(--fs-xl);
  color: var(--black);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Pill label */
.pill {
  display: inline-block;
  background: var(--blue-pale);
  color: var(--blue-deep);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: .3rem .9rem;
  border-radius: var(--radius-20);
  letter-spacing: .05em;
}

/* ============================================================
   MISSION SECTION
   ============================================================ */
#mission {
  background: var(--white);
  position: relative;
}
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.mission-visual {
  position: relative;
}
.mission-visual .bg-blob {
  position: absolute;
  inset: -30px;
  background: radial-gradient(ellipse at 60% 50%, rgba(125,207,238,.2) 0%, transparent 70%);
  border-radius: var(--radius-cercle);
  z-index: 0;
}
.mission-visual img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  max-width: 380px;
  margin: 0 auto;
}
.mission-logo-display {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mission-logo-display img {
  width: 300px;

}

.mission-content .pill { margin-bottom: 1rem; }
.mission-content h2 {
  font-size: var(--fs-xxl);
  font-weight: 800;
  color: var(--blue-navy);
  margin-bottom: 1.25rem;
}
.mission-text {
  font-size: var(--fs-xl);
  line-height: 1.8;
  color: var(--black);
  margin-bottom: 1.5rem;
}
.mission-founded {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: var(--blue-pale);
  border-radius: var(--radius);
  padding: .75rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--blue-deep);
  font-size: var(--fs-md);
  margin-bottom: 2rem;
}
.mission-founded svg { width: 20px; height: 20px; fill: var(--blue-sky); }

/* ============================================================
   FIND AN ORGANISM — key feature
   ============================================================ */
#nos-organismes, .nos-organismes {
  background: var(--bg-blue2);
  position: relative;
  overflow: hidden;
}
#nos-organismes::before, .nos-organismes::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cellipse cx='350' cy='200' rx='300' ry='250' fill='rgba(58,175,224,0.04)'/%3E%3C/svg%3E") no-repeat right top;
  background-size: contain;
  pointer-events: none;
}

.organism-finder {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width:1024px) {
 .organism-finder {
  padding: 1.5rem;
} 
}
.finder-bar {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1rem;
  align-items: end;
}
.finder-field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.finder-field label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--blue-navy);
}
.finder-field select,
.finder-field input {
  padding: .8rem 1rem;
  border: 2px solid var(--gray-mid);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: var(--black);
  background: var(--white);
  transition: border-color .2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233AAFE0' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 20px;
}
.finder-field input {
  background-image: none;
}
.finder-field select:focus,
.finder-field input:focus { border-color: var(--blue-sky); }

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  border-left: 4px solid var(--blue-sky);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.card:hover {
  transform: translateY(12px);
  box-shadow: var(--shadow);
}
/* Organisms grid */
.organisms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom:2rem;
  /* Vraie liste <ul>/<li> : on retire puces et retraits par défaut. */
  list-style: none;
  padding: 0;
}
.organisms-grid > li { margin-block-start: 0; }
.organism-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  border-left: 4px solid var(--blue-sky);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.organism-card:hover {
  transform: translateY(12px);
  box-shadow: var(--shadow);
}
.organism-card.hidden { display: none; }
.organism-logo {
  height: 60px;
  display: flex;
  align-items: center;
  margin-bottom: .25rem;
}
.organism-logo img {
  height: 60px;
  max-height: 60px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
}

.organism-card h3 {
  font-size: var(--fs-l);
  font-weight: 700;
  color: var(--blue-navy);
  line-height: 1.3;
}
.organism-region {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue-deep);
}
.organism-card .contact-info {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-top: .25rem;
}
.organism-card .contact-info a {
  font-size: var(--fs-md);
  color: var(--black);
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s;
}
.organism-card .contact-info a:hover { color: var(--blue-sky); }
.organism-card .contact-info svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.organism-card .btn-card {
  margin-top: .5rem;
  font-size: var(--fs-sm);
  padding: .45rem 1rem;
  align-self: flex-start;
}

.no-results {
  text-align: center;
  padding: 3rem;
  color: var(--black);
  font-size: var(--fs-xl);
}

/* ============================================================
   APHASIA EXPLAINED
   ============================================================ */
#laphasie {
  background: var(--white);
}
.aphasia-intro {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}
.aphasia-intro p {
  font-size: var(--fs-xl);
  line-height: 1.8;
  color: var(--black);
}

.aphasia-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.aphasia-card {
  background: var(--gray-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: background .2s, transform .2s;
  position: relative;
  overflow: hidden;
}
.aphasia-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--blue-sky);
  transform: scaleX(0);
  transition: transform .3s;
}
/*.aphasia-card:hover::before { transform: scaleX(1); }
.aphasia-card:hover {
  background: var(--blue-pale);
  transform: translateY(-4px);
}*/
.aphasia-card .icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--blue-sky), var(--blue-light));
  border-radius: var(--radius-cercle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.aphasia-card .icon svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}
.aphasia-card h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--blue-navy);
  margin-bottom: .5rem;
}
.aphasia-card p {
  font-size: var(--fs-md);
  color: var(--black);
  line-height: 1.6;
}

.aphasia-cta {
  text-align: center;
  margin-top: 1rem;
}

/* Causes */
.causes-wrap {
  background: var(--blue-deep);
  border-radius: var(--radius-lg);
  padding: 3rem;
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
#rapports-activites .causes-wrap {
  margin-top: 0;
}
.causes-text { color: #fff; }
.causes-text h3 {
  color: #fff;
  font-size: var(--fs-xl);
  margin-bottom: 1rem;
}
.causes-text p {
  color: rgba(255,255,255,.85);
  line-height: 1.8;
  font-size: var(--fs-lg);
}
.causes-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.cause-item {
  background: rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: background .2s;
}
.cause-item:hover { background: rgba(255,255,255,.14); }
.cause-item .dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-cercle);
  background: var(--blue-sky);
  flex-shrink: 0;
}
.cause-item span,
.cause-item p {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin: 0;
}

/* ============================================================
   TYPES D'APHASIE — page aphasie.php
   ============================================================ */
.bg-blue-sky { background: var(--blue-sky); }
   .bg-gray { background: var(--gray-light); }

.types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.type-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
  border-left: 4px solid var(--blue-sky);
}
.type-card h3 {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--blue-deep);
  margin-bottom: .35rem;
}
.type-card .type-alias {
  display: block;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--blue-navy);
  opacity: .8;
  margin-bottom: .75rem;
}
.type-card p {
  font-size: var(--fs-md);
  color: var(--black);
  line-height: 1.65;
}
.type-source {
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--blue-navy);
  opacity: .7;
  padding-top: 0.5rem;
}
.type-source a { color: var(--blue-deep); text-decoration: underline; }

.app-block {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2.5rem;
  margin-top: 2.5rem;
}
.app-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--blue-navy);
  margin-bottom: 1rem;
}
.app-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.25rem 0;
}
.app-list li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.6;
}
.app-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-cercle);
  background: var(--blue-sky);
}
.app-list li strong { color: var(--blue-deep); }

/* ============================================================
   À PROPOS — hero secondaire, collaborateurs, rapports
   ============================================================ */
/* Titre de section utilisé comme un h1 visuel (sans 2e <h1> sur la page) */
.hero-content .hero-title-as-h2 {
  font-size: var(--fs-xxxl);
  font-weight: 900;
  color: var(--blue-navy);
  margin-bottom: 1.25rem;
  line-height: 1.15;
}

/* Diaporama de logos (défilement CSS infini) */
.logos-marquee {
  overflow: hidden;
  width: 100%;
  padding: 1.5rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: logos-scroll 45s linear infinite;
}
.logos-marquee:hover .logos-track { animation-play-state: paused; }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.logo-item a { display: flex; align-items: center; }
.logo-item img {
  max-height: 70px;
  height: 70px;
  width: auto;
  max-width: 190px;
  width: auto;
  object-fit: contain;
  transition: transform .3s;
}
.logo-item a:hover img,
.logo-item img:hover { transform: scale(1.06); }
.logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 170px;
  max-width: 220px;
  height: 70px;
  padding: 0 1.25rem;
  background: var(--gray-light);
  border: 1px dashed var(--gray-mid);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--blue-deep);
  line-height: 1.25;
}
@media (prefers-reduced-motion: reduce) {
  .logos-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: 2rem 3.5rem;
    padding: 0 2rem;
  }
}

/* Rapports d'activités (réutilise .causes-wrap) */
.report-badge {
  display: inline-block;
  background: var(--blue-sky);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  padding: .25rem .8rem;
  border-radius: var(--radius-20);
  margin-bottom: .9rem;
}
.causes-wrap .archives-title {
  color: #fff;
  font-size: var(--fs-xl);
  margin-bottom: 1rem;
}

/* ── Financement (page À propos) ── */
.financement-logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 3.5rem;
}
.financement-logos img {
  height: 90px;         /* plus grand que les logos des collaborateurs (70px) */
  width: auto;
  max-width: 48%;
  object-fit: contain;
}
@media (max-width: 600px) {
  .financement-logos { gap: 1.5rem; }
  .financement-logos img { height: 70px; }
}

/* ── Rapports d'activités (page À propos) ── */
.rapports-box {
  background: var(--blue-deep);
  border-radius: var(--radius-lg);
  padding: 3rem;
  color: #fff;
}
.rapports-top {
  display: grid;
  grid-template-columns: 1fr 2fr;   /* image 1/3 · texte 2/3 */
  gap: 2.5rem;
  align-items: center;
}
.rapports-cover { display: block; }
.rapports-cover img {
  width: 100%;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rapports-cover:hover img {
  transform: translateY(-12px);
  box-shadow: 0 22px 44px rgba(0,0,0,.38);
}
.rapports-text h2 {
  color: #fff;
  font-size: var(--fs-xxl);
  margin: .35rem 0 .75rem;
}
.rapports-text p(not:.btn) { 
  color: rgba(255,255,255,.9); 
  line-height: 1.7; 
}

/* Accordéon des archives */
.archive-accordion {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 1rem;
}
.archive-accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-xl);
  color: #fff;
  padding: .5rem 0;
}
.archive-accordion summary::-webkit-details-marker { display: none; }
.archive-accordion summary .chevron {
  width: 22px;
  height: 22px;
  fill: #fff;
  flex-shrink: 0;
  transition: transform .3s;
}
.archive-accordion[open] summary .chevron { transform: rotate(180deg); }
.archive-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin-top: .75rem;
}
.archive-list li { color: rgba(255,255,255,.9); margin-bottom: .5rem; }
.archive-list li a { color: #fff; text-decoration: underline; }
@media (max-width: 768px) {
  .rapports-top { grid-template-columns: 1fr; }
  .rapports-box { padding: 2rem; }
}

/* ============================================================
   ACTUALITÉS (news) — for SEO
   ============================================================ */
#actualites {
  background: var(--gray-light);
  position: relative;
  overflow: hidden;
}
#actualites::after {
  content: '';
  position: absolute;
  bottom: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(ellipse, rgba(58,175,224,.1) 0%, transparent 70%);
  border-radius: var(--radius-cercle);
  pointer-events: none;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}
/* Le bloc Boucle (Query Loop) et son gabarit deviennent transparents pour que
   les cartes d'articles et la carte Facebook partagent la même grille. */
.news-grid > .wp-block-query,
.news-grid > .wp-block-query > .wp-block-post-template {
  display: contents;
}
/* Dans les archives, la pagination de la boucle s'étend sur toute la grille. */
.news-grid .wp-block-query-pagination {
  grid-column: 1 / -1;
  margin-top: 1rem;
}
/* Les <li> du bloc Boucle sont des éléments de grille : la grille leur
   donne déjà une hauteur de ligne égale, mais il faut qu'ils soient en
   flex pour que la carte .news-card à l'intérieur remplisse toute
   cette hauteur (au lieu de ne prendre que sa hauteur de contenu). */
.news-grid > .wp-block-query > .wp-block-post-template > li, .news-grid li {
  display: flex;
  margin-block-start: 0;
}
.news-card--facebook {
  padding: 0;
  margin-block-start: 0;


}
.news-card--facebook:hover { transform: none; }
.news-card--facebook .fb-page,
.news-card--facebook .fb-page span,
.news-card--facebook .fb-page iframe {
  width: 100% !important;
  max-width: 100%;
}
.news-card {
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
}
.news-card:hover {
  transform: translateY(12px);
  box-shadow: var(--shadow);
}
.news-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue-pale), var(--blue-light));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.news-card-img img {
  width: 100%;
  height: auto;
  transition: transform .35s;
}
.news-card:hover .news-card-img img { transform: scale(1.05); }

/* Média d'article — shortcode [image_video] : vidéo/balado (champ SCF
   « video ») pour les formats Vidéo et Son, image mise en avant sinon. */
.entry-media {
  border-radius: 24px;
  overflow: hidden;
}
.entry-media iframe,
.entry-media video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
}
.entry-media audio {
  width: 100%;
  display: block;
}
.entry-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
}
/* Dans une carte d'actualité, la carte gère déjà coins et survol. */
.entry-media.news-card-img { border-radius: 0; }
.news-card-img .img-placeholder {
  width: 60px;
  height: 60px;
  fill: rgba(255,255,255,.6);
}

.news-card-body {
  margin-top:0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap:0.6rem;
}
.news-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.news-date {
  font-size: var(--fs-sm);
  color: var(--blue-sky);
  font-weight: 700;
}
.news-category {
  font-size: var(--fs-xs);
  background: var(--blue-pale);
  color: var(--blue-deep);
  padding: .2rem .6rem;
  border-radius: var(--radius-20);
  font-weight: 700;
}
.news-card h3 {
  margin-top:0;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--blue-navy);
  line-height: 1.35;
}
.news-card .wp-block-post-excerpt {
  margin-top:0;
}
.news-card p {
  font-size: var(--fs-md);
  color: var(--black);
  line-height: 1.65;
  flex: 1;
}
.news-read-more {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--blue-sky);
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .5rem;
  transition: gap .2s, color .2s;
}
.news-card:hover .news-read-more {
  gap: .6rem;
  color: var(--blue-deep);
}
.news-read-more svg { width: 16px; height: 16px; fill: currentColor; }

.news-all-link {
  text-align: center;
  margin-top: 2.5rem;
}

/* ============================================================
   TOOLBOX SECTION
   ============================================================ */
#boite-a-outils {
  background: var(--bg-blue);
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.tool-card {
  border: none;
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s;
}
.tool-card:hover {
  transform: translateY(24px);
  box-shadow: var(--shadow);
}
.tool-card:hover::before { opacity: 1; }
.tool-card > * { position: relative; z-index: 1; }
.tool-icon {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-cercle);
  background: linear-gradient(135deg, var(--blue-sky), var(--blue-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  transition: transform .25s;
}
.tool-card:hover .tool-icon { transform: scale(1.1) rotate(-5deg); }
.tool-icon svg { width: 32px; height: 32px; fill: #fff; }
.tool-card h3 {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--blue-navy);
  margin-bottom: .5rem;
}
.tool-card p {
  font-size: var(--fs-md);
  color: var(--black);
  line-height: 1.6;
}

/* ============================================================
   VIDEO SECTION (standalone)
   ============================================================ */
#video-aphasie {
  background: var(--blue-deep);
  position: relative;
  overflow: hidden;
}
#video-aphasie::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(58,175,224,.15) 0%, transparent 60%);
  pointer-events: none;
}
#video-aphasie .section-title { color: #fff; }
#video-aphasie .section-intro { color: rgba(255,255,255,.8); }
#video-aphasie .section-eyebrow { color: var(--white); }

.video-container {
  max-width: 860px;
  margin: 0 auto;
}
.video-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  aspect-ratio: 16/9;
  position: relative;
  background: #000;
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   NEWSLETTER / CONTACT STRIP
   ============================================================ */
#contact-strip {
  background: linear-gradient(135deg, var(--blue-sky) 0%, var(--blue-deep) 100%);
  padding: 4rem 2rem;
  text-align: center;
}
#contact-strip h2 {
  color: #fff;
  font-size: var(--fs-xxl);
  margin-bottom: .75rem;
}
#contact-strip p {
  color: rgba(255,255,255,.9);
  font-size: var(--fs-xl);
  margin-bottom: 2rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.contact-strip-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--blue-navy);
  color: rgba(255,255,255,.85);
  padding: 4rem 2rem 2rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-brand img { height: 70px; }
.footer-brand p {
  font-size: var(--fs-md);
  line-height: 1.7;
  max-width: 280px;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: .5rem;
}
.footer-contact a {
  color: rgba(255,255,255,.8);
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: color .2s;
}
.footer-contact a:hover { color: var(--blue-light); }
.footer-contact svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

.footer-col h3, .footer-col h4 {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--fs-lg);
  margin-bottom: 1rem;
  letter-spacing: .04em;
}
.footer-col ul li { margin-bottom: .6rem; }
.footer-col ul li a {
  color: rgba(255,255,255,.75);
  font-size: var(--fs-md);
  transition: color .2s, padding-left .2s;
  display: block;
}
.footer-col ul li a:hover {
  color: var(--blue-light) !important;
  padding-left: 6px;
  text-decoration: none;
}
/* Bouton « Faire un don » dans le footer : s'ajuste au contenu (pas toute la largeur) */
.footer-col .btn-contact-popup { display: inline-flex; }

.footer-social {
  display: flex;
  gap: .75rem;
  margin-top: .5rem;
  --social-icon-size: 18px;
  --social-icons-gap: .75rem;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-cercle);
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .2s, transform .2s;
}
.footer-social a:hover {
  background: var(--blue-sky);
  transform: translateY(-3px);
}
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.55);
}
.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}
.footer-bottom-links a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.55);
  transition: color .2s;
}
.footer-bottom-links a:hover { color: var(--blue-light); }

/* ============================================================
   ACCESSIBILITY WIDGET
   ============================================================ */
#a11y-widget {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}
.a11y-toggle {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-cercle);
  background: var(--blue-sky);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(58,175,224,.45);
  transition: background .2s, transform .2s;
  color: #fff;
}
.a11y-toggle:hover { background: var(--blue-deep); transform: scale(1.08); }
.a11y-toggle svg { width: 26px; height: 26px; fill: currentColor; }

.a11y-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 50px rgba(14,58,92,.2);
  padding: 1.5rem;
  width: 240px;
  display: none;
  flex-direction: column;
  gap: 1rem;
}
.a11y-panel.open { display: flex; }
.a11y-panel h3 {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--blue-navy);
  margin-bottom: .25rem;
}
.a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a11y-option label {
  font-size: var(--fs-md);
  color: var(--black);
  font-weight: 600;
}
.a11y-controls {
  display: flex;
  gap: .4rem;
}
.a11y-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  border: 2px solid var(--blue-pale);
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--blue-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.a11y-btn:hover {
  background: var(--blue-pale);
  border-color: var(--blue-sky);
}
.a11y-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
}
.a11y-toggle-switch input { opacity: 0; width: 0; height: 0; }
.a11y-toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--gray-mid);
  border-radius: var(--radius-lg);
  transition: background .2s;
}
.a11y-toggle-switch .slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: var(--radius-cercle);
  transition: transform .2s;
}
.a11y-toggle-switch input:checked + .slider { background: var(--blue-sky); }
.a11y-toggle-switch input:checked + .slider::before { transform: translateX(20px); }

/* ============================================================
   CONTACT MINI-MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,58,92,.5);
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(14,58,92,.3);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--black);
  padding: .4rem;
  border-radius: var(--radius-cercle);
  transition: background .2s;
}
.modal-close:hover { background: var(--gray-light); }
.modal-close svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.modal-box h2 {
  font-size: var(--fs-xxl);
  margin-bottom: .5rem;
}
.modal-box p {
  font-size: var(--fs-md);
  color: var(--black);
  margin-bottom: 1.5rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}
.form-group label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--blue-navy);
}
.form-group input,
.form-group textarea,
.form-group select {
  padding: .8rem 1rem;
  border: 2px solid var(--gray-mid);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: var(--black);
  transition: border-color .2s;
  outline: none;
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--blue-sky); }
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
  outline: 3px solid var(--blue-sky);
  outline-offset: 2px;
}
.form-group textarea { min-height: 100px; }
.form-submit { width: 100%; justify-content: center; margin-top: .5rem; }
/* Champs pleine largeur (indispensable une fois que Contact Form 7
   enveloppe chaque champ dans un <span>). */
.form-group input,
.form-group textarea,
.form-group select { width: 100%; }

/* --- Contact Form 7 : reprendre le style de la maquette (.demo-form) --- */
.demo-form .wpcf7-form-control-wrap { display: block; }
/* Icône avion en papier devant le bouton d'envoi (l'<input> CF7 ne
   peut pas contenir de SVG, on la recrée en pseudo-élément). */
.form-submit::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Messages de validation / réponse CF7 */
.demo-form .wpcf7-not-valid-tip {
  color: #d63638;
  font-size: var(--fs-md);
  margin-top: .35rem;
}
.demo-form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border-radius: var(--radius);
  font-size: var(--fs-md);
}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.contact-methods { display: flex; flex-direction: column; gap: 1.75rem; }
.contact-method { display: flex; gap: 1rem; align-items: flex-start; }
.contact-method .ic {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-cercle);
  background: var(--blue-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-method .ic svg { width: 22px; height: 22px; fill: var(--blue-deep); }
.contact-method h3 {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--blue-navy);
  margin-bottom: .15rem;
}
.contact-method a { color: var(--blue-deep); font-weight: 700; }
.contact-method a:hover { color: var(--blue-navy); }
.contact-method p { font-size: var(--fs-md); color: var(--black); margin-top: .15rem; }
.contact-social { display: flex; gap: .6rem; margin-top: .5rem; }
.contact-social a {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-cercle);
  background: var(--blue-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.contact-social svg { width: 18px; height: 18px; fill: var(--blue-deep); color: var(--blue-deep); transition: fill .2s; }
.contact-social a:hover { background: var(--blue-sky); }
.contact-social a:hover svg { fill: var(--white); color:var(--white); }
.contact-form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2.5rem;
}
.contact-form-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--blue-navy);
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
/* Neutralise les marges de flux ajoutées par l'éditeur de blocs
   (grille et flex gèrent déjà l'espacement) et resserre le corps
   de chaque méthode de contact pour retrouver le look d'origine. */
.contact-grid > *,
.contact-methods > *,
.contact-method > * { margin-block-start: 0; }
.contact-method-body > * + * { margin-block-start: .15rem; }

/* ============================================================
   FAQ (accordéon natif <details>)
   ============================================================ */
.faq-section { background: var(--gray-light); }
.container-narrow { max-width: 820px; }
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--blue-pale);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--blue-navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue-deep); }
.faq-icon {
  width: 20px;
  height: 20px;
  fill: var(--blue-sky);
  flex-shrink: 0;
  transition: transform .25s;
}
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--black);
  line-height: 1.7;
  font-size: var(--fs-md);
}
.faq-answer a { color: var(--blue-deep); font-weight: 700; text-decoration: underline; }
.faq-answer ul { list-style: disc; padding-left: 1.5rem; margin: .5rem 0; }
.faq-answer ul li { margin-bottom: .35rem; }

/* ============================================================
   TÉMOIGNAGES  (réutilise .tool-card / .tools-grid)
   ============================================================ */
.tools-grid.temoignages-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .tools-grid.temoignages-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tools-grid.temoignages-grid { grid-template-columns: 1fr; }
}
.temoignage-head {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.temoignage-photo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-cercle);
  object-fit: cover;
  border: 3px solid var(--blue-pale);
  flex-shrink: 0;
}
.temoignage-auteur {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.temoignage-nom {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--blue-navy);
}
.temoignage-org {
  font-size: var(--fs-sm);
  color: var(--blue-sky);
}
.temoignage-extrait {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--blue-navy);
  margin: 0;
  flex: 1;
}

/* Pop-up témoignage */
.temoignage-modal-box { max-width: 620px; }
.temoignage-modal-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-right: 2rem;
}
.temoignage-modal-head .temoignage-photo {
  width: 64px;
  height: 64px;
  margin-bottom: 0;
}
.temoignage-modal-head h2 { font-size: var(--fs-xxl); margin: 0; }
.temoignage-modal-texte {
  max-height: 60vh;
  overflow-y: auto;
}
.temoignage-modal-texte p {
  color: var(--black);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.temoignage-modal-texte p:last-child { margin-bottom: 0; }
/*******************************************
EQUIPE
******************************************************/
    .hero-statement {
      position: relative;
      z-index: 1;
    }
    .hero-statement p {
      font-family: var(--font-heading);
      font-size: var(--fs-xxxl);
      font-weight: 900;
      color: var(--blue-deep);
      line-height: 1.15;
      margin: 0;
    }
    .hero-statement p span {
      color: var(--blue-sky);
    }

    /* ── Sections ────────────────────────────────────────── */
    .equipe-section {
      background: var(--bg-blue2);
    }
    .equipe-section + .equipe-section {
      padding-top: 0;
    }
    .equipe-section .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .equipe-section-header {
      margin-bottom: 3rem;
      border-left: 4px solid var(--blue-sky);
      padding-left: 1.25rem;
    }
    .equipe-section-header .section-eyebrow {
      font-size: var(--fs-sm);
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--blue-sky);
      margin-bottom: .4rem;
    }
    .equipe-section-header h2,
    .equipe-section-header h3 {
      font-family: var(--font-heading);
      font-size: var(--fs-xl);
      font-weight: 900;
      color: var(--blue-navy);
      margin: 0;
    }

    /* ── Staff cards (Équipe de travail) ─────────────────── */
    .staff-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 2rem;
    }


    /* ── CA cards (Conseil d'administration) ──────────────── */
    .ca-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 1.5rem;
    }
 

    .ca-info h3 {
      font-family: var(--font-heading);
      font-size: var(--fs-xl);
      font-weight: 800;
      color: var(--blue-navy);
      margin: 0 0 .2rem;
    }
    .ca-info .ca-role-title {
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--blue-sky);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: .35rem;
    }
    .ca-info .ca-affiliation {
      font-size: var(--fs-sm);
      color: var(--black);
      line-height: 1.5;
    }
    .ca-info .ca-date {
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--blue-deep);
      margin-top: .5rem;
    }
    .ca-affiliation a svg {
    fill: var(--blue-deep);
    height: 16px;
    width: 16px;
    margin-bottom: -3px;
}
.ca-affiliation a:hover svg {
    fill: var(--blue-navy);
    height: 16px;
    width: 16px;
    margin-bottom: -3px;
}

    /* ── Responsive ──────────────────────────────────────── */
    @media (max-width: 768px) {

      .staff-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
      .ca-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    }
    @media (max-width: 480px) {
      /* Une seule colonne : à deux, les courriels (mots insécables)
         imposent une largeur minimale qui fait déborder la page. */
      .staff-grid { grid-template-columns: 1fr; }
      .ca-grid { grid-template-columns: 1fr; }
    }
    /* Un enfant de grille ne rétrécit pas sous son contenu par défaut
       (min-width auto) : on l'y autorise, et on permet aux courriels
       de se couper plutôt que d'élargir la carte. */
    .staff-grid > *, .ca-grid > * { min-width: 0; }
    .card a[href^="mailto:"] { overflow-wrap: anywhere; }
/* ============================================================
   OUTILS ET RESSOURCES
   ============================================================ */

/* Filter bar */
.tools-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.5rem;
}
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.filter-btn {
  padding: .5rem 1.1rem;
  border: 2px solid var(--blue-deep);
  border-radius: var(--radius-xl);
  background: var(--white);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-deep);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.filter-btn:hover {
  border-color: var(--blue-navy);
  color: var(--blue-navy);
}
.filter-btn.active {
  background: var(--blue-sky);
  border-color: var(--blue-sky);
  color: var(--white);
}
.filter-search {
  flex: 1;
  min-width: 200px;
  max-width: 340px;
}
.filter-search input {
  width: 100%;
  padding: .65rem 1rem;
  border: 2px solid var(--gray-mid);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--blue-navy);
  box-sizing: border-box;
}
.filter-search input:focus {
  outline: none;
  border-color: var(--blue-sky);
}

/* Tools grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Featured tool */
.tool-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2.5rem;
  align-items: center;
  /*background: linear-gradient(135deg, var(--accent2) 0%, var(--blue-deep) 100%);*/
  background: var(--blue-deep);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  color: var(--white);
  margin-bottom: .5rem;
  box-shadow: var(--shadow);
}
.tool-featured .tool-type-badge {
  background: rgba(255,255,255,.18);
  color: var(--white);
}
/* Le badge est un paragraphe : neutraliser les styles de .tool-featured p */
.tool-featured p.tool-type-badge {
  font-size: var(--fs-xs);
  margin-bottom: 0;
  color: var(--white);
}
/* Bouton contour sur fond foncé (équivalent de l'ancien btn-outline-inverse) */
.tool-featured .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--white);
  border-color: rgba(255,255,255,.6);
}
.tool-featured .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.12);
  color: var(--white);
  border-color: var(--white);
}
.tool-featured h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--white);
  margin: .75rem 0 1rem;
  line-height: 1.15;
}
.tool-featured p {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: rgba(255,255,255,.88);
  margin-bottom: 1.75rem;
  max-width: 55ch;
}
.tool-featured-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.tool-featured-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9rem;
  line-height: 1;
  color: rgba(255,255,255,.1);
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: -.05em;
  user-select: none;
}
.tool-featured-icon img { border-radius: var(--radius); }

/* Carte aphasie — effet de retournement (recto / verso) */
.card-flip {
  perspective: 1200px;
  width: 100%;
  max-width: 360px;
  cursor: pointer;
  outline: none;
}
.card-flip-inner {
  position: relative;
  width: 100%;
  transition: transform .7s ease;
  transform-style: preserve-3d;
}
.card-flip:hover .card-flip-inner,
.card-flip:focus-visible .card-flip-inner,
.card-flip.is-flipped .card-flip-inner {
  transform: rotateY(180deg);
}
.card-flip-front,
.card-flip-back {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.card-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
/* Les faces sont des blocs Image : la figure porte la face, l'image la remplit */
.card-flip .wp-block-image { margin: 0; }
.card-flip-front img,
.card-flip-back img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
}
@media (prefers-reduced-motion: reduce) {
  .card-flip-inner { transition: none; }
}

/* Regular tool card */
.tool-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--blue-sky);
  transition: transform .25s, box-shadow .25s;
}
.tool-card:hover {
  transform: translateY(12px);
  box-shadow: 0 6px 28px rgba(14,58,92,.13);
}
.tool-card.hidden { display: none; }

/* Type badge */
.tool-type-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .75rem;
  background: var(--blue-pale);
  color: var(--blue-deep);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: var(--radius-xl);
  width: fit-content;
}
.tool-type-badge svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  flex-shrink: 0;
}
/* Type d'outil — version simple (icône + texte, sans fond) */
.tool-type {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--blue-deep);
}
.tool-type svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.tool-card h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--blue-navy);
  line-height: 1.35;
  margin: 0;
}
.tool-description {
  margin-top:0;
  font-size: var(--fs-md);
  color: var(--black);
  line-height: 1.65;
  flex: 1;
}
.tool-categories {
  margin-top:0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.tool-cat-tag,
.tool-categories a {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: var(--radius-xl);
  background: var(--gray-light);
  color: var(--blue-navy);
}
.tool-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--blue-sky);
  text-decoration: none;
  margin-top: auto;
  padding-top: .5rem;
  transition: color .2s;
}
.tool-link:hover { color: var(--blue-navy); }
.tool-link svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
/* Bouton d'action de la carte outil (remplace l'ancien lien) */
.tool-card .tool-btn {
  margin-top: auto;
  align-self: flex-start;
  font-size: var(--fs-sm);
  padding: .5rem;
}
.tool-card .tool-btn svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }

/* Cartes issues de la boucle du post type Outil (pattern boucle-outils).
   La liste du Modèle de publication devient la grille ; chaque élément
   de liste étire sa carte, et le bouton est lié aux champs lien/bouton. */
ul.tools-grid { padding: 0; margin: 0; list-style: none; }
ul.tools-grid li { margin-block-start: 0;}
.tools-grid .wp-block-post { display: flex; }
.tools-grid .wp-block-post.hidden { display: none; }
.tools-grid .wp-block-post > .tool-card { flex: 1; }
.tool-description p { margin: 0; }
.tool-type a,
.tool-categories a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
.tool-card .wp-block-buttons { margin-top: auto; }
.tool-card .wp-block-button.tool-btn .wp-block-button__link {
  font-size: var(--fs-sm);
  padding: .5rem 1.1rem;
}

/* Icône du badge de type et du bouton d'action selon le terme type_outil
   (classes générées sur l'élément de liste : type_outil-pdf, …). */
.wp-block-post[class*="type_outil-"] .tool-type::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.wp-block-post[class*="type_outil-"] .tool-btn .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--icon-btn) center / contain no-repeat;
          mask: var(--icon-btn) center / contain no-repeat;
}
.wp-block-post[class*="type_outil-pdf"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 6H8v-1h2v1zm4 0h-2v-1h2v1zm1-3H8v-1h7v1z'/%3E%3C/svg%3E");
  --icon-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}
.wp-block-post[class*="type_outil-site-web"],
.wp-block-post[class*="type_outil-website"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
  --icon-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
}
.wp-block-post[class*="type_outil-sur-demande"],
.wp-block-post[class*="type_outil-on-request"] {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  --icon-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* No results */
.tools-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--black);
  font-size: var(--fs-lg);
  display: none;
}
.tools-no-results.visible { display: block; }

/* Results count */
.tools-count {
  margin-top:0;
  margin-bottom: 0;
  font-size: var(--fs-md);
  color: var(--black);
  
  font-style: italic;
}

@media (max-width: 768px) {
  .tool-featured { grid-template-columns: 1fr; }
  .tool-featured-icon { display: none; }
  .tools-filter-bar { flex-direction: column; align-items: stretch; }
  .filter-search { max-width: 100%; }
}
@media (max-width: 480px) {
  .tools-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-visual { order: -1; }
  .mission-grid { grid-template-columns: 1fr; }
  .mission-visual { display: none; }
  .causes-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .finder-bar { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-stats { gap: 1rem; }
  .stat-number { font-size: var(--fs-xxl); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
  /* Énoncé d'équipe : plus petit, précédé d'un guillemet décoratif. */
  .hero-statement p { font-size: var(--fs-xxl); }
  .hero-statement::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .75rem;
    background-color: var(--blue-sky);
    -webkit-mask: var(--icon-quote) center / contain no-repeat;
            mask: var(--icon-quote) center / contain no-repeat;
  }
  /* Bandeau contact : boutons empilés, centrés et pleine largeur. */
  .contact-strip-actions,
  .contact-strip-actions .wp-block-buttons { width: 100%; flex-direction: column; align-items: center; }
  .contact-strip-actions .wp-block-button { width: 100%; }
  .contact-strip-actions .wp-block-button__link { display: block; width: 100%; text-align: center; }
  section { padding: 3.5rem 1.25rem; }
  /* Le décalage du corps de page et la barre du haut sont réglés avec la
     bascule mobile, plus bas (« Point de rupture du menu mobile »). */
}

@media (max-width: 480px) {
  .hero { padding: 3rem 1.25rem 4rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .organisms-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .aphasia-cards { grid-template-columns: 1fr; }
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  /*transform: translateY(0);*/
}

/* ============================================================
   ADAPTATIONS WORDPRESS
   ============================================================ */

/* Barre d'admin : décaler les barres fixes du header */
body.admin-bar #utility-bar { top: 32px; }
body.admin-bar #main-header { top: calc(44px + 32px); }
@media (max-width: 782px) {
  body.admin-bar #utility-bar { top: 46px; }
  body.admin-bar #main-header { top: calc(44px + 46px); }
}

/* Menu principal : bloc Navigation stylé comme la maquette.
   L'ouverture des sous-menus et le menu mobile (hamburger sous 600 px)
   sont gérés nativement par le bloc ; ici on ne fait que l'apparence. */
.main-nav .wp-block-navigation-item__content {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--blue-navy);
  padding: .5rem 1rem;
  border-radius: var(--radius);
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.main-nav .wp-block-navigation-item__content:hover,
.main-nav .current-menu-item > .wp-block-navigation-item__content {
  background: var(--blue-pale);
  color: var(--blue-navy);
}
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content:hover {
  text-decoration: none;
}
.main-nav .wp-block-navigation__submenu-icon {
  color: var(--blue-navy);
  transition: transform .25s;
}
.main-nav .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon { transform: rotate(180deg); }

/* Sous-menus : l'apparence de la maquette (.dropdown). */
.main-nav .wp-block-navigation__submenu-container {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--blue-pale);
  min-width: 220px;
  overflow: hidden;
}
.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item,
.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
    border-radius: var(--radius);
}
@media (max-width:1024px) {
  .main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item,
  .main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content {
      border-radius: 0;
  }
}
.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: .65rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--blue-navy);
  border-radius: 0;
  white-space: normal;
}

.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--blue-pale);
  color: var(--blue-navy);
  text-decoration: none;
}

/* Élément de menu portant la classe « cta » : bouton bleu de la maquette. */
.main-nav .cta > .wp-block-navigation-item__content {
  background: var(--blue-sky);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: .55rem 1.4rem;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(58,175,224,.4);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.main-nav .cta > .wp-block-navigation-item__content:hover {
  background: var(--blue-deep);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(58,175,224,.5);
}

/* Point de rupture du menu mobile.
   Le bloc Navigation bascule nativement en hamburger sous 600 px ; notre menu
   est trop large pour tenir jusque-là, on remonte donc le seuil à 1024 px.
   C'est le seul endroit où ce seuil est défini pour la navigation. */
@media (max-width: 1023.98px) {
  /* Afficher le bouton hamburger (le cœur le cache dès 600 px). */
  .main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  /* Garder le menu replié tant qu'il n'est pas ouvert. */
  .main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  /* Barre du haut : tout son contenu (don, téléphone, langue, recherche,
     réseaux sociaux…) est repris dans le part « Menu mobile ». On la
     masque au lieu de la laisser se tasser sur deux lignes. */
  #utility-bar { display: none; }

  /* Sans la barre du haut, l'en-tête remonte et le décalage du corps
     de page se limite à sa hauteur. */
  #main-header,
  #main-header.scrolled { top: 0; }
  body { padding-top: 82px; }
  body.admin-bar #main-header,
  body.admin-bar #main-header.scrolled { top: 32px; }
}

@media (max-width: 782px) {
  body.admin-bar #main-header,
  body.admin-bar #main-header.scrolled { top: 46px; }
}

@media (max-width: 768px) {
  /* L'en-tête est plus court sur petit écran (logo réduit). */
  body { padding-top: 68px; }
}

/* ============================================================
   MENU MOBILE (template part « Menu mobile »)
   ============================================================
   Le contenu est éditable dans l'Éditeur de site ; ici, uniquement
   l'apparence. Quand un part d'overlay est utilisé, le cœur ajoute la
   classe « disable-default-overlay » et cesse de styler le panneau :
   tout ce qui suit nous appartient.

   Le panneau vit à l'intérieur du bloc .main-nav : les règles de
   .main-nav plus haut s'appliqueraient aussi ici. On les surcharge donc
   avec un sélecteur plus précis (.aq-overlay en tête) plutôt que de
   compter sur l'ordre du fichier. */

.aq-overlay {
  min-height: 100vh;
  background: var(--white);
  padding: 1rem 1.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Ligne du haut : logo et fermeture */
.aq-overlay-top { align-items: center; }
.aq-overlay-top .logo-wrap img { height: 48px; }

/* Le cœur place le X en absolu dans un coin ; on le remet dans le flux
   pour l'aligner sur le logo. La marge négative garde une cible tactile
   confortable sans creuser d'espace autour. */
.aq-overlay .wp-block-navigation-overlay-close {
  position: static;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--blue-navy);
  display: flex;
  align-items: center;
  padding: .6rem;
  margin: -.6rem;
  border-radius: var(--radius);
}
.aq-overlay .wp-block-navigation-overlay-close:hover { background: var(--blue-pale); }
.aq-overlay .wp-block-navigation-overlay-close svg { fill: currentColor; }

/* Recherche : pleine largeur dans le menu */
.aq-overlay .search-wrap,
.aq-overlay .search-wrap form { width: 100%; }
.aq-overlay .search-wrap input {
  width: 100%;
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* Menu principal : items pleine largeur, compacts, séparés par un filet.
   C'est ici que se règle « les items de premier niveau sont trop gros » :
   le desktop garde --fs-lg et ses pastilles, le mobile passe en liste. */
.aq-overlay .aq-overlay-nav,
.aq-overlay .aq-overlay-nav .wp-block-navigation__container { width: 100%; gap: 0; }
.aq-overlay .aq-overlay-nav .wp-block-navigation-item { width: 100%; }
.aq-overlay .aq-overlay-nav .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--blue-navy);
  padding: .7rem .25rem;
  border-radius: 0;
  border-bottom: 0;
  white-space: normal;
}
.aq-overlay .aq-overlay-nav .wp-block-navigation-item__content:hover { background: var(--blue-pale); }

/* Sous-menus en accordéon : repliés hors du flux (display), dépliés
   sous leur parent. En submenuVisibility « click », c'est aria-expanded
   du bouton qui commande ; en « toujours » (.open-always), le cœur ne
   rend pas de bouton et le sous-menu reste déplié en permanence. */
.aq-overlay .aq-overlay-nav .wp-block-navigation__submenu-container {
  display: none;
  position: static;
  width: 100%;
  min-width: 0;
  border: none;
  box-shadow: none;
  padding-left: 1rem;
}
.aq-overlay .aq-overlay-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.aq-overlay .aq-overlay-nav .open-always > .wp-block-navigation__submenu-container {
  display: block;
}
.aq-overlay .aq-overlay-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  padding: .6rem .25rem;
}
.aq-overlay .aq-overlay-nav .wp-block-navigation .has-child.open-always.wp-block-navigation-submenu {
  gap:0;
}

/* En mode « clic », le cœur remplace le lien du parent par un <button> qui
   porte lui-même .wp-block-navigation-item__content : on le remet à plat
   pour qu'il ait l'air d'une ligne de menu et non d'un bouton de formulaire. */
.aq-overlay .aq-overlay-nav button.wp-block-navigation-item__content {
  background: none;
  border: none;
  border-bottom: 1px solid var(--blue-pale);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
}

/* Le chevron est un <span> posé après ce bouton, pas un bouton lui-même :
   on l'ancre à droite de la ligne et on le laisse traverser les clics
   (pointer-events) pour que taper dessus déplie bien le sous-menu. */
.aq-overlay .aq-overlay-nav .wp-block-navigation-item.has-child { position: relative; }
.aq-overlay .aq-overlay-nav .wp-block-navigation__submenu-icon {
  position: absolute;
  right: .25rem;
  top: .8rem;
  color: var(--blue-navy);
  pointer-events: none;
}
/* Neutraliser la rotation au survol héritée du menu desktop : sur écran
   tactile le survol reste « collé » et le chevron mentirait sur l'état. */
.aq-overlay .aq-overlay-nav .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon {
  transform: none;
}
.aq-overlay .aq-overlay-nav .wp-block-navigation-item .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}

/* L'item « Trouver de l'aide » reste le bouton d'action, en plus discret
   que sur desktop. */
.aq-overlay .aq-overlay-nav .cta > .wp-block-navigation-item__content {
  background: var(--blue-sky);
  color: var(--white);
  border-radius: var(--radius-lg);
  text-align: center;
  border-bottom: none;
  box-shadow: none;
  margin-top: .75rem;
  padding: .7rem 1.4rem;
}

/* Téléphone : c'est une ligne d'aide, elle doit se voir. */
.aq-overlay-phone {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
}
.aq-overlay-phone a { color: var(--blue-deep); }

/* Boutons d'action empilés, pleine largeur */
.aq-overlay-actions { width: 100%; }
.aq-overlay-actions .wp-block-button { width: 100%; }
.aq-overlay-actions .wp-block-button__link {
  width: 100%;
  justify-content: center;
}

/* Bas de panneau : réseaux sociaux et langue, sur fond blanc cette fois
   (les règles d'origine visent la barre du haut, en bleu). */
.aq-overlay-bottom {
  align-items: center;
  border-bottom: 1px solid var(--blue-pale);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.aq-overlay .social-icons a { color: var(--blue-navy); opacity: 1; }
.aq-overlay .social-icons svg,
.aq-overlay .social-icons a::before { fill: var(--blue-navy); }
.aq-overlay .social-icons a:hover,
.aq-overlay .social-icons a:hover::before { color: var(--blue-sky); }
.aq-overlay .social-icons a:hover svg { fill: var(--blue-sky); }
.aq-overlay .lang-switcher a { color: var(--blue-navy); font-weight: 700; }

/* Intranet : lien de service, discret et en dernier. */
.aq-overlay-intranet { font-size: var(--fs-sm); }
.aq-overlay-intranet a { color: var(--blue-navy); }

/* Menus du pied de page (colonnes + copyright) */
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-bottom-links ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.footer-bottom-links a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.55);
  transition: color .2s;
}

/* Pied de page en blocs : les colonnes de menus sont des blocs
   Navigation (l'espacement vient du blockGap du bloc) et les liens
   de contact sont des paragraphes avec icônes icon-…. */
.footer-col .wp-block-navigation-item { margin-bottom: 0; }
.footer-contact p {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.8);
  font-size: var(--fs-md);
}

/* Bandeau contact en blocs : boutons en paragraphes .btn */
.btn a { color: inherit; text-decoration: none; }
.btn[class*="icon-"]::before { width: 18px; height: 18px; }
#contact-strip .contact-strip-actions p { margin: 0; max-width: none; }
#contact-strip .btn-white { color: var(--blue-deep); }
#contact-strip .btn-white:hover { color: var(--blue-navy); }
#contact-strip .btn-outline-inverse { color: #fff; }

/* Sur les pages Contact, le bandeau « Besoin d'aide? » ferait doublon. */
body.page-id-536 #contact-strip,
body.page-id-719 #contact-strip { display: none; }

/* Sélecteur de langue Polylang dans la barre utilitaire */
.wp-block-polylang-language-switcher { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.wp-block-polylang-language-switcher .lang-item a {
  background: transparent;
  border: 1px solid var(--white);
  color: var(--white);
  padding: .1rem .65rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  display: block;
}
.wp-block-polylang-language-switcher .lang-item a:hover { background: var(--blue-navy); border-color: var(--blue-navy); }
.wp-block-polylang-language-switcher .current-lang { display: none; }
@media (max-width:1024px) {
  .wp-block-polylang-language-switcher .lang-item a {
    background-color: var(--blue-deep);
    margin-left:.65rem;
  }
}
/* Formulaire de recherche WP dans la barre utilitaire */
.search-wrap form { display: flex; align-items: center; }

/* ============================================================
   BLOCS GUTENBERG — correspondances avec la maquette
   ============================================================ */

/* Les sections de page sont des groupes pleine largeur */
main .wp-block-group.alignfull { padding: 5rem 2rem; }
@media (max-width: 768px) {
  main .wp-block-group.alignfull { padding: 3.5rem 1.25rem; }
}
main > .wp-block-group:not(.alignfull):not(.hero) { padding: 5rem 2rem; }

/* Le héros en bloc groupe */
.hero.alignfull { padding: 3rem 2rem 6rem; }

/* Boutons Gutenberg : reprendre l'apparence .btn de la maquette */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(58,175,224,.35);
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link {
  box-shadow: none;
  background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--blue-pale);
  color: var(--blue-navy);
  border-color: var(--blue-navy);
}

/* Vidéos intégrées (YouTube / Vimeo) : même cadre que la maquette */
.wp-block-embed.video-embed-wrap { margin: 0; }
.wp-block-embed.video-embed-wrap .wp-block-embed__wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(14,58,92,.18);
  aspect-ratio: 16/9;
  background: var(--blue-navy);
}
.wp-block-embed.video-embed-wrap iframe { width: 100%; height: 100%; border: none; display: block; }

/* ============================================================
   PAGE À PROPOS — conversion HTML brut → blocs natifs
   Les icônes SVG inline sont remplacées par les classes .icon-*
   (voir inc/icons.php) ; on ne fait qu'ajuster couleur et taille.
   ============================================================ */

/* Badge « Fondé en 1999 » : icône calendrier bleue, sans double espacement */
.mission-founded.icon-calendar::before { background-color: var(--blue-sky); --icon-size: 20px; --icon-gap: 0; }

/* Fiches Équipe : icône courriel devant l'adresse */
.ca-affiliation.icon-mail::before { background-color: var(--blue-deep); --icon-size: 16px; }
.ca-affiliation.icon-mail:hover::before { background-color: var(--blue-navy); }

/* Grilles en blocs Group : neutraliser les marges de flux injectées
   (:where(.is-layout-flow) > * + *) qui décalent les items de grille */
.staff-grid > *,
.ca-grid > *,
.rapports-top > *,
.financement-logos > * { margin-block: 0; }

/* Logos de financement en blocs Image */
.financement-logos .wp-block-image { margin: 0; }

/* Rapports : couverture arrondie (l'ancienne classe .round-border sur l'img
   n'existe plus, le rayon passe sur l'image du bloc Image) */
.rapports-cover img { border-radius: var(--radius); }

/* Accordéon des archives : chevron dessiné en CSS (remplace le SVG inline) */
.archive-accordion summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s;
}
.archive-accordion[open] summary::after { transform: rotate(180deg); }

/* ============================================================
   ACCUEIL + L'APHASIE — conversion HTML brut → blocs natifs
   ============================================================ */

/* Icônes des cartes « L'aphasie, c'est quoi? » : blanches dans le cercle dégradé */
.aphasia-card .icon::before { background-color: #fff; --icon-size: 30px; --icon-gap: 0; }

/* Flèche placée APRÈS le texte du bouton (CTA « en savoir plus » →) */
.btn.btn-icon-after::before { order: 2; margin-inline: .4em 0; }

/* Groupes en grille/flex : neutraliser la marge de flux injectée par le layout
   core (:where(.is-layout-flow) > * + *) qui décale les items */
.aphasia-cards > *,
.aphasia-card > *,
.types-grid > *,
.causes-wrap > *,
.causes-list > *,
.type-card > * { margin-block-start: 0; }

/* ============================================================
   FAQ (plugin zaa-faq) — apparence de la maquette
   ============================================================ */
.wp-block-zaa-faq-faq {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: 820px;
  margin: 0 auto;
}
.wp-block-zaa-faq-item,
.wp-block-zaa-faq-item:first-child {
  background: var(--white);
  border: 1px solid var(--blue-pale);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.zaa-faq-item__question {
  padding: 1.1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--blue-navy);
}
@media (max-width:1024px){
  .zaa-faq-item__question {
    padding: 1.1rem 2.25rem 1.1rem 1.25rem;
  }
}
.zaa-faq-item__question:hover { color: var(--blue-deep); }
/* L'indicateur « + / − » du plugin est fait de DEUX barres (::before
   horizontale, ::after verticale) : tout décalage ou couleur doit viser
   les deux, sinon elles se désalignent. */
details.wp-block-zaa-faq-item > .zaa-faq-item__question::before,
details.wp-block-zaa-faq-item > .zaa-faq-item__question::after {
  right: 1.25rem;
  color: var(--blue-sky);
}
.zaa-faq-item__answer p {
  margin-bottom:1rem;
}
.zaa-faq-item__answer p:last-of-type {
  margin-bottom:0;
}
/* Focus clavier : on n'entoure pas le <summary> seul mais tout le bloc
   <details>, plus lisible. Le contour du summary est donc neutralisé et
   reporté sur le parent quand le summary reçoit le focus clavier. */
.zaa-faq-item__question:focus-visible, .zaa-faq-item__question:focus { outline: 0; }
details.wp-block-zaa-faq-item:has( > .zaa-faq-item__question:focus-visible ),
details.wp-block-zaa-faq-item:has( > .zaa-faq-item__question:focus ) {
  outline: 3px solid var(--blue-sky);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.zaa-faq-item__answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--black);
  line-height: 1.7;
  font-size: var(--fs-md);
}
.zaa-faq-item__answer a { color: var(--blue-deep); font-weight: 700; text-decoration: underline; }
.zaa-faq-item__answer ul { list-style: disc; padding-left: 1.5rem; margin: .5rem 0; }

/* ============================================================
   ARTICLES (Actualités)
   ============================================================ */
.single-post .entry-header,
.archive .page-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 0;
}
.post-meta-line {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
}

/* ============================================================
   Complianz)
   ============================================================ */
#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
  max-width:100%;
}
#cmplz-document p, #cmplz-document li, #cmplz-document td, .editor-styles-wrapper .cmplz-unlinked-mode p, .editor-styles-wrapper .cmplz-unlinked-mode li, .editor-styles-wrapper .cmplz-unlinked-mode td {
  font-size:var(--fs-md);
}
#cmplz-document h2 {
  font-size:var(--fs-xxl);
} #cmplz-document h3 {
  font-size:var(--fs-xl);
}
/* ============================================================
   HÉROS EN BLOCS + VAGUE CSS
   ============================================================ */

/* Vague décorative au bas d'une section : ajouter la classe
   .wave-bottom au groupe (remplace l'ancien SVG inline .hero-wave).
   Les propriétés width/border-radius/transform sont réinitialisées
   parce que des classes de fond comme .bg-hero dessinent aussi un
   ::after (halo radial) qui entrerait en conflit. */
.wave-bottom { position: relative; }
.wave-bottom::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 80px;
  border-radius: 0;
  transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Le héros bâti avec le bloc Colonnes garde la grille de la maquette */
.wp-block-columns.hero-inner { display: grid; }
@media (max-width: 1024px) {
  .wp-block-columns.hero-inner { display: grid; grid-template-columns: 1fr; }
}

/* Chiffres clés du héros : les nombres/libellés sont des paragraphes */
.hero-stats p { margin: 0; }

/* ============================================================
   ICÔNES SUPPLÉMENTAIRES + ICÔNES SUR LES BOUTONS
   Complète le système icon-* défini plus haut : mêmes classes,
   nouvelles icônes, et prise en charge du bloc Bouton (la classe
   se met sur le bloc, l'icône se dessine dans le lien).
   ============================================================ */
.icon-pin::before,
.icon-download::before,
.icon-search::before,
.icon-file::before,
.icon-globe::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.icon-pin      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); }
.icon-download { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E"); }
.icon-search   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
.icon-arrow    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E"); }
.icon-file     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13zm-3 6H8v-1h2v1zm4 0h-2v-1h2v1zm1-3H8v-1h7v1z'/%3E%3C/svg%3E"); }
/* Guillemet décoratif (hero-statement mobile) ; défini ici avec les autres
   icônes, sous forme de variable pour rester réutilisable. */
:root { --icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M96 280C96 213.7 149.7 160 216 160L224 160C241.7 160 256 174.3 256 192C256 209.7 241.7 224 224 224L216 224C185.1 224 160 249.1 160 280L160 288L224 288C259.3 288 288 316.7 288 352L288 416C288 451.3 259.3 480 224 480L160 480C124.7 480 96 451.3 96 416L96 280zM352 280C352 213.7 405.7 160 472 160L480 160C497.7 160 512 174.3 512 192C512 209.7 497.7 224 480 224L472 224C441.1 224 416 249.1 416 280L416 288L480 288C515.3 288 544 316.7 544 352L544 416C544 451.3 515.3 480 480 480L416 480C380.7 480 352 451.3 352 416L352 280z'/%3E%3C/svg%3E"); }

.icon-globe    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E"); }

/* La flèche se place après le texte plutôt qu'avant */
.icon-arrow::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* Bloc Bouton : pas d'icône sur le conteneur, elle se rend dans le lien */
.wp-block-button[class*="icon-"]::before,
.wp-block-button[class*="icon-"]::after { content: none; }
.wp-block-button[class*="icon-"] .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.wp-block-button.icon-arrow .wp-block-button__link::before { content: none; }
.wp-block-button.icon-arrow .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* ============================================================
   FICHE SINGLE  (gabarits single-outil et single-testimonial,
   réutilise .tool-card et les classes temoignage-*)
   ============================================================ */
.single-fiche {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.single-fiche h1 { margin-top: 0; }

/* Photo ronde du témoignage (bloc Image mise en avant) */
.wp-block-post-featured-image.temoignage-photo {
  border: none;
  margin: 0;
}
.wp-block-post-featured-image.temoignage-photo img {
  border-radius: var(--radius-cercle);
  border: 3px solid var(--blue-pale);
  object-fit: cover;
}

/* Corps du témoignage dans la fiche */
.single-fiche .wp-block-post-content p {
  color: var(--black);
  line-height: 1.7;
}
/* Google ReCaptcha */
.grecaptcha-badge, .grecaptcha-logo {
  opacity:0;
}
/* Hustle */
@media (min-width: 783px) {
    .hustle-ui .hustle-info.hustle-info--compact .hustle-layout .hustle-content {
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
    }
}