/* ═══════════════════════════════════════════════════════════════════
 * assets/page-public.css — Styles communs des pages publiques v2
 * ═══════════════════════════════════════════════════════════════════
 * Refonte 22 mai 2026 — recalage sur l'identité originale du site
 * Cœurs d'Enfants : teal/cyan principal + violet pastel secondaire,
 * Open Sans partout, hero image + overlay dégradé + wave SVG, sections
 * splittées, accordéons teal, cards 4-col.
 *
 * Inclure : <link rel="stylesheet" href="assets/page-public.css"/>
 * Aussi : <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet"/>
 * ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Palette TEAL (couleur principale, signature de l'asso) ─── */
  --teal:         #36c5b8;
  --teal-dark:    #2ba89c;
  --teal-darker:  #1d8a80;
  --teal-light:   #5ed5c9;
  --teal-pale:    #d6f4f0;
  --teal-bg:      #f0fbf9;

  /* ─── Palette VIOLET (couleur secondaire, footer + accents) ─── */
  --violet:       #b893cf;
  --violet-dark:  #9c75b8;
  --violet-light: #d4baeb;
  --violet-pale:  #efe3f8;
  --violet-bg:    #f7efff;

  /* ─── Texte ─── */
  --text:         #131313;
  --text-mid:     #4a4a4a;
  --text-light:   #7d7d7d;
  --text-faint:   #aab0b6;

  /* ─── Fond / cards / bordures ─── */
  --white:        #ffffff;
  --bg:           #fbfbfb;
  --bg-soft:      #f5f5f5;
  --border:       #e5e7eb;
  --border-soft:  #eef0f3;

  /* ─── Ombres ─── */
  --shadow-sm:    0 2px 6px rgba(19,19,19,0.04);
  --shadow:       0 4px 16px rgba(19,19,19,0.06);
  --shadow-lg:    0 12px 32px rgba(19,19,19,0.10);
  --shadow-teal:  0 12px 32px rgba(54, 197, 184, 0.25);

  /* ─── Rayons ─── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-pill: 100px;

  /* ─── Espacements (échelle de 4) ─── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;
  --sp-10: 9rem;

  /* ─── Container max width ─── */
  --container:     1280px;
  --container-text: 720px;
}

/* ═══════════════════════════════════════════════════════════════════
   1. RESET + BASE
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-dark); text-decoration: none; transition: color 0.18s; }
a:hover { color: var(--teal-darker); }
p { margin: 0 0 1.1rem; color: var(--text-mid); line-height: 1.85; }
p:last-child { margin-bottom: 0; }

/* Typo titres — Open Sans 800 sur les gros titres, 700 sur le reste */
h1, h2, h3, h4 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 1rem;
}
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.18; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.3; }
h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════════
   2. CONTENEURS
   ═══════════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--sp-5); }
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 var(--sp-5); }

/* ═══════════════════════════════════════════════════════════════════
   3. HERO de page interne (image + overlay teal/violet + wave SVG)
   ═══════════════════════════════════════════════════════════════════ */
.hero-page {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 7rem 0 6rem;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
}
.hero-page::before {
  /* image background */
  content: "";
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.hero-page::after {
  /* overlay dégradé teal → violet semi-transparent */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(54,197,184,0.78) 0%, rgba(184,147,207,0.78) 100%);
  z-index: -1;
}
.hero-page .container { position: relative; z-index: 1; }
.hero-page h1 {
  color: var(--white);
  margin-bottom: var(--sp-3);
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
  max-width: 900px;
}
.hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  color: rgba(255,255,255,0.95);
  margin-top: var(--sp-3);
}
.hero-breadcrumb a {
  color: rgba(255,255,255,0.95);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hero-breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.hero-breadcrumb .home-icon { font-size: 1.1em; }
.hero-breadcrumb .sep { opacity: 0.7; }
.hero-breadcrumb .current { font-weight: 600; }

/* Wave SVG en bas du hero (transition douce vers blanc) */
.hero-wave {
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%;
  height: 80px;
  z-index: 2;
  pointer-events: none;
}
.hero-wave svg { width: 100%; height: 100%; display: block; }

/* Variantes d'image hero (réutilisables par classe) */
.hero-img-qui::before        { background-image: url('photos/meeting-about-page.jpg'); }
.hero-img-ief::before        { background-image: url('photos/association_coeurs_denfants_instruction_famille_ief.webp'); }
.hero-img-protection::before { background-image: url('photos/association_coeurs_denfants_protection_droits.webp'); }
.hero-img-droits::before     { background-image: url('photos/association_couers_denfants_droits_scolarite.webp'); }
.hero-img-juridique::before  { background-image: url('photos/coach-service.jpg'); }
.hero-img-actu::before       { background-image: url('photos/blog-01.jpg'); }
.hero-img-ressources::before { background-image: url('photos/blog-02.jpg'); }
.hero-img-faq::before        { background-image: url('photos/association_coeurs_denfants_questions.webp'); }
.hero-img-adhesion::before   { background-image: url('photos/meeting-outdoor-about.jpg'); }
.hero-img-contact::before    { background-image: url('photos/coach-service.jpg'); }
.hero-img-mentions::before   { background-image: url('photos/association_coeurs_denfants_mentions_legales.webp'); }
.hero-img-accueil::before    { background-image: url('photos/assocoeursdenfants_accueil.webp'); background-position: center 35%; background-size: cover; }
/* Overlay plus transparent sur l'accueil pour voir la photo de la petite fille */
.hero-img-accueil::after     { background: linear-gradient(135deg, rgba(54,197,184,0.55) 0%, rgba(184,147,207,0.55) 100%); }

/* ═══════════════════════════════════════════════════════════════════
   4. SECTIONS — espacements généreux
   ═══════════════════════════════════════════════════════════════════ */
section { padding: var(--sp-9) 0; }
section.tight { padding: var(--sp-7) 0; }
section.spacious { padding: var(--sp-10) 0; }
section + section { margin-top: 0; }

/* Alternance subtile : section impaire = fond clair, paire = bg-soft */
section.bg-soft { background: var(--bg-soft); }
section.bg-pale { background: linear-gradient(180deg, var(--teal-bg) 0%, var(--bg) 100%); }

/* Sous-titre violet en surtitre */
.section-eyebrow {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--violet-dark);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
  position: relative;
}
.section-eyebrow::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--violet);
  margin: var(--sp-3) auto 0;
  border-radius: 2px;
}

/* Titre H2 centré sur les sections de contenu */
.section-title {
  text-align: center;
  margin-bottom: var(--sp-4);
}
.section-lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-8);
  font-size: 1.08rem;
  color: var(--text-mid);
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════════
   5. SECTION SPLIT — image à gauche, texte blanc sur dégradé teal→violet
   ═══════════════════════════════════════════════════════════════════ */
.section-split {
  background: linear-gradient(135deg, var(--teal) 0%, var(--violet) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.section-split .container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-8);
  align-items: center;
}
.section-split h2 { margin-bottom: var(--sp-5); }
.section-split p { font-size: 1.02rem; line-height: 1.85; }
.section-split img {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--white);
}
.section-split h2, .section-split h3 { color: var(--white); }
.section-split p { color: rgba(255,255,255,0.93); }
.section-split strong { color: var(--white); }
@media (max-width: 768px) {
  .section-split .container { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   6. ACCORDÉONS TEAL (FAQ style)
   ═══════════════════════════════════════════════════════════════════ */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.accordion details {
  background: var(--teal);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: background 0.18s;
}
.accordion details[open] { background: var(--teal-dark); }
.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--white);
  list-style: none;
  user-select: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 400;
  transition: transform 0.2s, background 0.2s;
  flex-shrink: 0;
}
.accordion details[open] summary::after {
  content: "−";
  background: rgba(255,255,255,0.3);
}
.accordion .acc-body {
  padding: 0 1.5rem 1.25rem;
  color: rgba(255,255,255,0.95);
  font-size: 0.96rem;
  line-height: 1.7;
}
.accordion .acc-body p { color: rgba(255,255,255,0.95); margin: 0 0 0.6rem; }
.accordion .acc-body p:last-child { margin-bottom: 0; }

/* Variante : FAQ 2-col image + accordéons */
.faq-2col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-7);
  align-items: start;
}
.faq-2col .faq-illu {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.faq-2col .faq-illu img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .faq-2col { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   7. CARDS 4 COLONNES (Nos axes d'action / Ce que nous couvrons)
   ═══════════════════════════════════════════════════════════════════ */
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.cards-4 .card {
  text-align: center;
}
.cards-4 .card-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 0 auto var(--sp-4);
  overflow: hidden;
  background: var(--teal-pale);
  box-shadow: var(--shadow);
}
.cards-4 .card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.cards-4 .card h3 {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: 1.1rem;
  color: var(--text);
}
.cards-4 .card p {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.7;
}
@media (max-width: 1024px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards-4 { grid-template-columns: 1fr; } }

/* ── Variante 3 COLONNES (12/08/2026) ────────────────────────────────
   POURQUOI CETTE CLASSE EXISTE — bug corrigé le 12/08/2026.
   Cinq pages (accueil, instruction-en-famille, contact, adhesion,
   actualites) forçaient 3 colonnes par un style INLINE :
       <div class="cards-4" style="grid-template-columns: repeat(3,1fr)">
   Or un style inline bat TOUTE règle de feuille de style, media queries
   comprises : les deux replis ci-dessus n'étaient JAMAIS appliqués.
   Résultat mesuré sur téléphone (390 px) : 3 colonnes maintenues,
   soit ~110 px par carte — texte illisible.
   → La grille vit désormais dans une CLASSE, donc elle se replie.
   ⚠️ Ne JAMAIS remettre grid-template-columns dans un attribut style. */
.cards-4.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .cards-4.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards-4.cols-3 { grid-template-columns: 1fr; } }

/* ── Filet de sécurité anti-débordement (12/08/2026) ─────────────────
   La feuille ne portait AUCUN overflow-wrap : un mot long, une URL ou
   un e-mail collé un jour dans une page suffit à faire déborder toute
   la mise en page sur téléphone. Filet standard, sans effet visible
   sur l'existant. */
p, li, h1, h2, h3, h4, summary, .acc-body, td, th { overflow-wrap: break-word; }

/* ── CONFORT DE LECTURE SUR TÉLÉPHONE (12/08/2026) ───────────────────
   Constat mesuré : les trois conteneurs portaient 24 px de marge de
   chaque côté SANS aucune règle mobile pour les réduire. Sur un écran
   de 390 px, il ne restait que 342 px utiles, et les paragraphes
   centrés donnaient l'impression d'un texte qui flotte.

   Deux corrections, et une abstention :
     • marges ramenées à 16 px sous 600 px → 358 px utiles ;
     • paragraphes alignés à GAUCHE sous 600 px (un texte de plusieurs
       lignes centré sur une colonne étroite fatigue la lecture) ;
     • PAS de `text-align: justify` — sur une colonne de ~350 px en
       français, sans césure, la justification creuse des rivières de
       blanc entre les mots. Si elle est un jour souhaitée, elle ne se
       pose QU'AVEC `hyphens: auto` (les pages portent bien lang="fr").

   Les titres, sur-titres et blocs d'appel restent centrés : c'est le
   corps de texte seul qui repasse à gauche. */
.txt-centre { text-align: center; }

@media (max-width: 600px) {
  .container,
  .container-narrow,
  .container-wide,
  .article-content { padding-left: var(--sp-4); padding-right: var(--sp-4); }

  .section-lead,
  .article-content p,
  .article-content li,
  .container-narrow > p,
  .section-split p,
  .txt-centre { text-align: left; }
}

/* ── Tableaux responsives (12/08/2026) ───────────────────────────────
   politique-confidentialite porte 2 tableaux de 4 colonnes et la
   feuille n'avait aucune règle pour `table` : débordement horizontal
   sur téléphone. On rend le tableau lui-même défilable plutôt que de
   laisser déborder la page entière. */
table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 761px) { table { display: table; } }

/* ═══════════════════════════════════════════════════════════════════
   8. CARDS IMAGE+OVERLAY (style accueil "Nos axes d'action")
   ═══════════════════════════════════════════════════════════════════ */
.cards-action {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.cards-action .card-action {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cards-action .card-action:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.cards-action .card-action img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.cards-action .card-action::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(19,19,19,0.78) 100%);
}
.cards-action .card-action h3 {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-5);
  color: var(--white);
  z-index: 2;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
@media (max-width: 1024px) { .cards-action { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards-action { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   9. CTA SECTION (large bouton teal centré)
   ═══════════════════════════════════════════════════════════════════ */
.cta-block {
  background: linear-gradient(135deg, var(--teal-pale) 0%, var(--violet-pale) 100%);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-7);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(54,197,184,0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.cta-block::after {
  content: "";
  position: absolute;
  bottom: -50px; left: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(184,147,207,0.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.cta-block > * { position: relative; z-index: 1; }
.cta-block h2, .cta-block h3 { margin-bottom: var(--sp-3); }
.cta-block p { margin-bottom: var(--sp-5); font-size: 1.05rem; }

/* ═══════════════════════════════════════════════════════════════════
   10. BOUTONS
   ═══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.85rem;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 0.98rem;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.btn-teal {
  background: var(--teal);
  color: var(--white);
}
.btn-teal:hover {
  background: var(--teal-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-teal);
}
.btn-violet {
  background: var(--violet);
  color: var(--white);
}
.btn-violet:hover {
  background: var(--violet-dark);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--teal-dark);
  border: 2px solid var(--teal);
}
.btn-ghost:hover {
  background: var(--teal);
  color: var(--white);
}
.btn-lg { padding: 1.1rem 2.4rem; font-size: 1.05rem; }

/* ═══════════════════════════════════════════════════════════════════
   11. CALLOUT (encart d'info en couleur)
   ═══════════════════════════════════════════════════════════════════ */
.callout {
  background: var(--violet-pale);
  border-left: 4px solid var(--violet);
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-md);
  margin: var(--sp-5) 0;
}
.callout strong { color: var(--violet-dark); }
.callout p:last-child { margin-bottom: 0; }
.callout.teal { background: var(--teal-pale); border-left-color: var(--teal); }
.callout.teal strong { color: var(--teal-darker); }

/* ═══════════════════════════════════════════════════════════════════
   12. ARTICLES 3-COLONNES (style actualités)
   ═══════════════════════════════════════════════════════════════════ */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.articles-grid .article-card {
  background: var(--white);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.22s, box-shadow 0.22s;
}
.articles-grid .article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.articles-grid .article-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-soft);
}
.articles-grid .article-img img { width: 100%; height: 100%; object-fit: cover; }
.articles-grid .article-body { padding: var(--sp-5); flex: 1; }
.articles-grid h3 { font-size: 1.1rem; margin-bottom: var(--sp-3); }
.articles-grid .article-tag {
  font-size: 0.85rem;
  color: var(--violet-dark);
  font-weight: 600;
  margin-top: var(--sp-3);
}
.articles-grid .article-date {
  font-size: 0.85rem;
  color: var(--text-light);
}
@media (max-width: 1024px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .articles-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   13. RESPONSIVE GLOBAL
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-page { min-height: 360px; padding: 5rem 0 4rem; }
  section { padding: var(--sp-7) 0; }
  .cta-block { padding: var(--sp-6) var(--sp-5); }
}

/* ═══════════════════════════════════════════════════════════════════
   14. UTILS
   ═══════════════════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.text-mid { color: var(--text-mid); }
.text-light { color: var(--text-light); }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--sp-3); }
.mt-5 { margin-top: var(--sp-5); }
.mt-7 { margin-top: var(--sp-7); }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--sp-5); }

/* ═══════════════════════════════════════════════════════════════════
   15. HERO HOME — variante accueil (image OU dégradé + logo flottant)
   ═══════════════════════════════════════════════════════════════════ */
.hero-home {
  background: linear-gradient(135deg, var(--teal-pale) 0%, var(--violet-pale) 50%, #fef7e8 100%);
  padding: var(--sp-9) 0 var(--sp-8);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-home::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(54,197,184,0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
}
.hero-home::after {
  content: "";
  position: absolute;
  bottom: -150px; left: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(184,147,207,0.18) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
}
.hero-home .container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-7);
  align-items: center;
  position: relative;
}
.hero-home .hero-tag {
  display: inline-block;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
  padding: 0.5rem 1.2rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--violet-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.hero-home h1 {
  margin-bottom: var(--sp-5);
}
.hero-home h1 .accent {
  color: var(--violet);
  display: block;
}
.hero-home p {
  font-size: 1.1rem;
  line-height: 1.75;
  margin-bottom: var(--sp-6);
  max-width: 540px;
  color: var(--text-mid);
}
.hero-home .hero-cta {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.hero-home .hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-home .hero-logo img {
  width: 100%;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(54,197,184,0.2)) drop-shadow(0 10px 30px rgba(184,147,207,0.2));
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
@media (max-width: 900px) {
  .hero-home .container { grid-template-columns: 1fr; text-align: center; }
  .hero-home .hero-cta { justify-content: center; }
  .hero-home p { margin-left: auto; margin-right: auto; }
  .hero-home .hero-logo img { max-width: 280px; }
}

/* ═══════════════════════════════════════════════════════════════════
   16. ACTU / ARTICLE single-page
   ═══════════════════════════════════════════════════════════════════ */
.article-content {
  max-width: var(--container-text);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.article-content h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-4); }
.article-content h3 { margin-top: var(--sp-5); margin-bottom: var(--sp-3); color: var(--violet-dark); }
.article-content ul, .article-content ol {
  margin: 0 0 1.2rem 1.5rem;
  color: var(--text-mid);
  line-height: 1.85;
}
.article-content ul li, .article-content ol li {
  margin-bottom: 0.5rem;
}
.article-content ul li::marker { color: var(--teal); }
.article-content strong { color: var(--text); font-weight: 700; }
.article-content a { color: var(--teal-dark); border-bottom: 1px solid var(--teal-pale); transition: border-color 0.18s; }
.article-content a:hover { border-bottom-color: var(--teal); }

/* Block citation / encart spécial */
.quote-block {
  background: var(--bg-soft);
  border-left: 4px solid var(--violet);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-md);
  margin: var(--sp-6) 0;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--text);
}

/* Numéros utiles (cards petites) */
.helpline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}
.helpline-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-align: center;
  transition: all 0.2s;
}
.helpline-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.helpline-card .helpline-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--teal-dark);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.helpline-card .helpline-label {
  font-size: 0.88rem;
  color: var(--text-mid);
}

/* ═══════════════════════════════════════════════════════════════════
   17. ANIMATIONS subtiles au chargement
   ═══════════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-page h1, .hero-page .hero-breadcrumb,
.hero-home h1, .hero-home p, .hero-home .hero-tag, .hero-home .hero-cta {
  animation: fadeInUp 0.6s ease-out backwards;
}
.hero-home .hero-tag { animation-delay: 0.05s; }
.hero-home h1 { animation-delay: 0.15s; }
.hero-home p { animation-delay: 0.25s; }
.hero-home .hero-cta { animation-delay: 0.35s; }

/* Respect des préférences utilisateur reduce-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-home .hero-logo img { animation: none; }
}