/* =========================================================
   CHARTE — Base propre (v2) : dark + warm + gold
   ========================================================= */

/* 1) Variables */
:root{
  /* Fond global (page) */
  --body-bg: #EFE9DF;             /* crème un poil plus soutenu */

  /* Blocs (sombres) */
  --block-dark:   #2B2E2C;        /* gris foncé (référence header) */
  --block-warm:   #333634;        /* gris foncé réchauffé (subtil marron) */

  /* Texte sur sombre */
  --on-dark:        #F4F1EC;      /* blanc cassé CHAUD (pas blanc pur) */
  --muted-on-dark:  #C8C3BC;      /* gris sable doux (texte atténué) */

  /* Accents */
  --gold-500: #D6B25E;            /* or */

  /* Divers */
  --radius: 14px;
  --shadow-soft: 0 8px 24px rgba(0,0,0,.18);
  --shadow-card: 0 10px 30px rgba(0,0,0,.26);
}

/* 2) Corps de page */
html{ scroll-behavior: smooth; }
body{
  background: var(--body-bg);
  color: #222;                    /* texte par défaut quand hors bloc sombre */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 3) Sections (blocs) */
.home-section{
  background: var(--block-dark);  /* par défaut : gris foncé */
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1rem;
  margin-bottom: 2rem;
}
/* Variante chaude (pointe marron très légère) */
.home-section.section-alt{
  background: var(--block-warm);
}

/* 4) Titres dans les blocs (inchangés + filet or) */
.home-section > header h2,
.home-section > .section-head h2{
  color: var(--on-dark);
  font-weight: 800;
  padding-bottom: .5rem;
  background:
    linear-gradient(var(--gold-500), var(--gold-500))
    no-repeat
    center bottom / 140px 2px;
}
/* Utilitaire si tu veux forcer un soulignement or plus large */
.gold-underline{ 
  padding-bottom:.5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              center bottom / 160px 2px;
}

/* 5) Texte atténué / liens dans blocs sombres */
.home-section .text-muted{ color: var(--muted-on-dark) !important; }
.home-section a:not(.btn){
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.home-section a:not(.btn):hover{ color:#fff; }

/* 6) Cartes internes (plus claires que le bloc, jamais blanches froides) */
.home-section .card{
  background: rgba(255,255,255,.04);   /* léger contraste, chaud */
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--radius);
  box-shadow: none;
}
.home-section .card .text-muted{ color: var(--muted-on-dark) !important; }

/* 7) Boutons — or contour (global dans les blocs) */
.btn, a.btn{
  border-radius: 12px;
  font-weight: 700;
  padding: .6rem 1rem;
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}

/* Règle par défaut dans les blocs sombres : contour or + texte or */
.home-section .btn, .home-section a.btn{
  color: var(--gold-500) !important;
  border-color: var(--gold-500) !important;
  background: transparent !important;
}
.home-section .btn i{ color: var(--gold-500) !important; }

/* Hover : fond or + texte blanc */
.home-section .btn:hover, .home-section a.btn:hover{
  background: var(--gold-500) !important;
  color: #fff !important;
  border-color: var(--gold-500) !important;
}
.home-section .btn:hover i{ color:#fff !important; }

/* Alias : “déverdir” les anciens .btn-success dans les blocs */
.home-section .btn-success{
  color: var(--gold-500) !important;
  border-color: var(--gold-500) !important;
  background: transparent !important;
}
.home-section .btn-success:hover{
  background: var(--gold-500) !important;
  color: #fff !important;
}

/* 8) Badges (look premium, discrets) */
.home-section .badge{
  background: rgba(255,255,255,.06);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
}

/* 9) Images / arrondis harmonisés */
.home-section img.rounded-top,
.home-section .rounded-3{
  border-radius: var(--radius) !important;
}

/* =========================================================
   BLOC 1 — Bienvenue (Habillage 1 sur base sombre + or)
   ========================================================= */

/* Encadré interne : un cran plus clair (réchauffé), jamais blanc */
.section-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem 1.5rem;
}

/* Titre : on garde le filet or global ; juste respiration */
.section-head{ margin-bottom: 1rem; }
.section-head h2{ margin-bottom: .25rem; }

/* Image + légende “chaude” lisible sur sombre */
.section-card figure img{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.section-card figcaption{
  color: var(--muted-on-dark) !important;
  opacity: .95;
}

/* Badges “faits clés” : exit bg-light —> contour or, texte clair */
.section-card .badge.bg-light.text-dark{
  background: transparent !important;
  color: var(--on-dark) !important;
  border: 1.5px solid var(--gold-500);
  border-radius: 999px;
  padding: .38rem .7rem;
  font-weight: 600;
}
.section-card .badge i{ color: var(--gold-500); }

/* Texte principal : lisible, chaud ; lead un peu plus large */
.section-card p,
.section-card li{ color: var(--on-dark); }
.section-card p.lead{
  font-size: 1.15rem;
  line-height: 1.6;
}

/* Liste : icônes dorées (on neutralise le vert bootstrap) */
.section-card .text-success{ color: var(--gold-500) !important; }

/* CTA (bas) : déjà transformé en “or contour” par la base ; on ajuste confort */
.section-card .btn{
  padding: .65rem 1rem;
}
.section-card .btn i{ margin-right: .35rem; }

/* =========================================================
   BLOC 2 — Chatons à la une (Habillage 1 • dark + gold)
   ========================================================= */

/* Header */
.home-section header .eyebrow{
  font-size:.85rem; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; color: var(--muted-on-dark);
  margin-bottom:.25rem;
}
/* icône du titre en or (évite le bleu bootstrap) */
.home-section header h2 i{ color: var(--gold-500); }

/* Cartes chatons */
.mini-card{
  background: rgba(255,255,255,.06);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow:none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mini-card:hover{
  transform: translateY(-2px);
  border-color: rgba(214,178,94,.42); /* liseré or discret */
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Image top */
.mini-card .ratio{ background: rgba(255,255,255,.04); }
.mini-card img{
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  object-fit: cover;
}

/* Corps */
.mini-card .card-body{ padding: 1rem 1.15rem 1.05rem; }
.mini-card .line-name{
  font-weight:800; letter-spacing:.2px; color: var(--on-dark);
}
.mini-card .line-name i{ color: var(--gold-500) !important; } /* patte */
.mini-card .line-coat{ font-size:.92rem; color: var(--muted-on-dark); }
.mini-card small.text-muted{ font-size:.82rem; color: var(--muted-on-dark)!important; }

/* Statuts (chips) – sans vert flashy */
.cat-status{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.22rem .6rem; border-radius:999px;
  font-size:.86rem; font-weight:700; line-height:1.2;
  border:1px solid transparent;
}
.cat-status i{ margin-right:.15rem; }

/* Disponible → or lisible sur sombre */
.cat-status.disponible{
  color: var(--gold-500);
  background: rgba(214,178,94,.12);
  border-color: rgba(214,178,94,.38);
}
/* Option → discret */
.cat-status.option{
  color: var(--muted-on-dark);
  background: transparent;
  border-color: rgba(255,255,255,.25);
}
/* Réservé → rouge doux non agressif */
.cat-status.reserve{
  color: #B94A5A;
  background: rgba(185,74,90,.12);
  border-color: rgba(185,74,90,.32);
}

/* Boutons (header + mobile) – déjà ‘or contour’ via base, on ajoute focus */
.home-section .btn:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:2px;
}

/* =========================================================
   BLOC 4 — Actualités (Variante aérée • dark + gold)
   ========================================================= */

#actus .card {
  background: rgba(255,255,255,.08); /* plus clair que les autres blocs */
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#actus .card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-500);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* Images */
#actus .card img {
  object-fit: cover;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* Badge date */
#actus .card .badge {
  background: var(--gold-500) !important;
  color: #000 !important;
  font-weight: 600;
  border: none;
}

/* Titres */
#actus h3 {
  font-weight: 700;
  color: var(--gold-500); /* met en valeur les titres */
}
#actus h3.h5 { font-size: 1.05rem; }
#actus h3.h6 { font-size: .95rem; }

/* Texte */
#actus p,
#actus .text-muted {
  color: var(--on-dark);
  font-size: .93rem;
}

/* Liens “Lire” */
#actus a.small {
  color: var(--gold-500);
  font-weight: 600;
  text-decoration: underline;
}
#actus a.small:hover {
  color: #fff;
  text-decoration: none;
}

/* Bouton “Toutes les actus” */
#actus header .btn {
  border-color: var(--gold-500);
  color: var(--gold-500);
}
#actus header .btn:hover {
  background: var(--gold-500);
  color: #000;
}

/* =========================================================
   BLOC 5 — Reproducteurs (Habillage 1 • dark + gold)
   ========================================================= */

/* Header */
#repro .eyebrow{
  font-size:.9rem; text-transform:uppercase; letter-spacing:.5px;
  font-weight:600; color:var(--muted-on-dark);
  margin-bottom:.25rem;
}
#repro h2{ color:var(--on-dark); }

/* Boutons Mâles / Femelles (outline or) */
#repro header .btn{
  border-color:var(--gold-500);
  color:var(--gold-500);
  background:transparent;
  font-weight:700;
}
#repro header .btn:hover{
  background:var(--gold-500);
  color:#000;
}

/* Cartes média */
#repro .card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#repro .card:hover{
  transform:translateY(-2px);
  border-color:rgba(214,178,94,.42);          /* liseré or discret */
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

/* Image gauche */
#repro .ratio{ background:rgba(255,255,255,.04); }
#repro img{
  object-fit:cover;
  border-top-left-radius:var(--radius);
  border-bottom-left-radius:var(--radius);
}

/* Texte droite */
#repro .p-3{ padding:1rem 1.15rem!important; }
#repro h3{
  color:var(--on-dark);
  font-weight:700;
}
#repro .text-muted{ color:var(--muted-on-dark)!important; }

/* Lien “Voir la fiche” */
#repro a.small{
  color:var(--gold-500);
  font-weight:600;
  text-decoration:none;
}
#repro a.small:hover{
  text-decoration:underline;
}

/* Responsive: arrondis corrects quand l’image passe au-dessus */
@media (max-width:575.98px){
  #repro img{
    border-bottom-left-radius:0;
    border-top-right-radius:var(--radius);
  }
}

/* =========================================================
   BLOC 1 — Bienvenue (POLISH • dark + gold)
   Scope: 1er .home-section de la page
   (Optionnel: si tu ajoutes id="bienvenue", ces règles s'appliquent aussi)
   ========================================================= */



/* Rythme global */
section.home-section:first-of-type .section-head,
#bienvenue .section-head{ margin-bottom: .75rem; }

section.home-section:first-of-type .section-card,
#bienvenue .section-card{ padding: 2.4rem 1.75rem; }
@media (min-width: 992px){
  section.home-section:first-of-type .section-card,
  #bienvenue .section-card{ padding: 2.6rem 2rem; }
}

/* Titre (pas de changement de style, juste respiration) */
section.home-section:first-of-type .section-head h2,
#bienvenue .section-head h2{ margin-bottom: .2rem; }

/* Image + légende */
section.home-section:first-of-type .section-card figure img,
#bienvenue .section-card figure img{
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  border-radius: var(--radius);
}
section.home-section:first-of-type .section-card figcaption,
#bienvenue .section-card figcaption{
  color: var(--muted-on-dark) !important;
  font-size: .92rem;
  opacity: .95;
}

/* Badges “faits clés” : contour or, compacts */
section.home-section:first-of-type .section-card .badge.bg-light.text-dark,
#bienvenue .section-card .badge.bg-light.text-dark{
  background: transparent !important;
  color: var(--on-dark) !important;
  border: 1.5px solid var(--gold-500);
  border-radius: 999px;
  padding: .38rem .72rem;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
section.home-section:first-of-type .section-card .badge i,
#bienvenue .section-card .badge i{ color: var(--gold-500); }

/* Texte */
section.home-section:first-of-type .section-card p,
section.home-section:first-of-type .section-card li,
#bienvenue .section-card p,
#bienvenue .section-card li{ color: var(--on-dark); }

section.home-section:first-of-type .section-card p.lead,
#bienvenue .section-card p.lead{
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.6;
}

/* Liste (sans flex, pas de décalages) */
section.home-section:first-of-type .section-card ul,
#bienvenue .section-card ul{ margin-bottom: 1rem; padding-left: 0; }

section.home-section:first-of-type .section-card li,
#bienvenue .section-card li{ margin-bottom: .6rem; line-height: 1.5; }

section.home-section:first-of-type .section-card li i,
#bienvenue .section-card li i{
  color: var(--gold-500) !important;
  margin-right: .35rem;
}

/* Séparation douce entre colonnes (desktop) */
@media (min-width: 992px){
  section.home-section:first-of-type .section-card .col-md-8,
  #bienvenue .section-card .col-md-8{
    border-left: 1px solid rgba(214,178,94,.32); /* or discret */
    padding-left: 1.5rem;
  }
}

/* CTA bas : confort + focus */
section.home-section:first-of-type .section-card .text-end.mt-4,
#bienvenue .section-card .text-end.mt-4{ margin-top: 1.2rem !important; }

section.home-section:first-of-type .section-card .btn,
#bienvenue .section-card .btn{
  padding: .68rem 1.1rem;
  letter-spacing: .2px;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
section.home-section:first-of-type .section-card .btn:hover,
#bienvenue .section-card .btn:hover{ transform: translateY(-1px); }

section.home-section:first-of-type .section-card .btn:focus-visible,
#bienvenue .section-card .btn:focus-visible{
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* Mobile : centrage CTA + largeur confortable */
@media (max-width: 575.98px){
  section.home-section:first-of-type .section-card .text-end.mt-4,
  #bienvenue .section-card .text-end.mt-4{ text-align: center !important; }
  section.home-section:first-of-type .section-card .btn,
  #bienvenue .section-card .btn{ width: 100%; }
}

/* =========================================================
   BLOC 3 — #rappels (POLISH • dark + gold)
   ========================================================= */

/* Header */
#rappels .eyebrow{
  font-size:.9rem; text-transform:uppercase; letter-spacing:.5px;
  font-weight:600; color:var(--muted-on-dark);
}
#rappels h2{ color:var(--on-dark); }

/* Carte contenant (voile sombre clair) */
#rappels .section-card .card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  box-shadow:none;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#rappels .section-card .card:hover{
  transform:translateY(-2px);
  border-color:rgba(214,178,94,.42);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

/* Colonne visuel */
#rappels figure img{
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
#rappels figcaption{ color:var(--muted-on-dark)!important; }

/* Icônes des titres d’étape */
#rappels h3 i{ color:var(--gold-500); }

/* Texte */
#rappels .text-muted{ color:var(--muted-on-dark)!important; }
#rappels p{ color:var(--on-dark); line-height:1.6; }

/* Pastilles 1/2/3 (remplace le vert bootstrap) */
#rappels .badge.text-bg-success{
  background:transparent!important;
  color:var(--gold-500)!important;
  border:1.5px solid var(--gold-500);
  border-radius:999px;
  padding:.32rem .58rem;
  font-weight:700;
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}

/* Boutons du bloc (outline or) */
#rappels .btn{
  border-color:var(--gold-500);
  color:var(--gold-500);
  background:transparent;
  font-weight:700;
}
#rappels .btn:hover{
  background:var(--gold-500);
  color:#000;
}

/* Rythme des items (alignements propres) */
#rappels .d-flex.gap-3{ gap:1rem!important; }     /* un peu plus d’air */
#rappels .mb-4{ margin-bottom:1.15rem!important; }
#rappels .mb-2{ margin-bottom:.55rem!important; }

/* Responsive */
@media (max-width:575.98px){
  #rappels .section-card .card-body{ padding:1.2rem!important; }
}

/* =========================================================
   BLOC 6 — #confiance (POLISH • E-E-A-T)
   ========================================================= */

/* Header */
#confiance .eyebrow{
  font-size:.9rem; text-transform:uppercase; letter-spacing:.5px;
  font-weight:600; color:var(--muted-on-dark);
  margin-bottom:.25rem;
}
#confiance h2{ color:var(--on-dark); }

/* Cartes */
#confiance article{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  color: var(--on-dark);
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#confiance article:hover{
  transform: translateY(-2px);
  border-color: rgba(214,178,94,.42);           /* liseré or discret */
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Têtes de cartes : icône + h3 */
#confiance .d-flex.align-items-start.gap-2 i{
  color: var(--gold-500) !important;            /* on neutralise les couleurs Bootstrap */
}
#confiance h3{
  color: var(--on-dark);
  font-weight: 700;
}

/* Texte */
#confiance p,
#confiance .text-muted{ color: var(--muted-on-dark) !important; line-height:1.55; }

/* Boutons (contour or, hover or plein) */
#confiance .btn{
  border-color: var(--gold-500);
  color: var(--gold-500);
  background: transparent;
  font-weight: 700;
  border-radius: 12px;
  padding: .55rem .9rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#confiance .btn:hover{
  background: var(--gold-500);
  color: #000;
}
#confiance .btn:focus-visible{
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* Groupe de boutons (Expertise & pédagogie) */
#confiance .text-center .btn + .btn{ margin-left:.4rem; }
@media (max-width:575.98px){
  #confiance .text-center .btn{ display:block; width:100%; margin-left:0 !important; }
  #confiance .text-center .btn + .btn{ margin-top:.5rem; }
}

/* Micro-rythme interne */
#confiance article .mb-1{ margin-bottom:.4rem!important; }
#confiance article .mb-3{ margin-bottom:.8rem!important; }

/* Accessibilité : liens non-boutons éventuels */
#confiance a:not(.btn){
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#confiance a:not(.btn):hover{
  color:#fff; text-decoration: none;
}

/* =========================================================
   BLOC 7 — Contact (POLISH • dark + gold)
   Scope: section[aria-labelledby="contact-titre"]
   ========================================================= */

/* Carte de gauche (contact) */
section[aria-labelledby="contact-titre"] .p-4.border.rounded-3{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  padding: 2rem 1.5rem;
}
@media (min-width: 992px){
  section[aria-labelledby="contact-titre"] .p-4.border.rounded-3{
    padding: 2.2rem 1.8rem;
  }
}
section[aria-labelledby="contact-titre"] .p-4.border.rounded-3:hover{
  transform: translateY(-2px);
  border-color: rgba(214,178,94,.42);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Titres + textes */
#contact-titre{ color: var(--on-dark); font-weight: 800; }
section[aria-labelledby="contact-titre"] .text-muted{ color: var(--muted-on-dark) !important; }

/* Liste rassurante : icônes or + alignements propres */
section[aria-labelledby="contact-titre"] ul{ margin: 0 0 1rem 0; padding-left: 0; }
section[aria-labelledby="contact-titre"] li{ margin-bottom: .45rem; line-height: 1.5; }
section[aria-labelledby="contact-titre"] li i{
  color: var(--gold-500) !important;
  margin-right: .35rem;
}

/* CTA : contour or (hover or plein), focus visible */
section[aria-labelledby="contact-titre"] .btn{
  border: 2px solid var(--gold-500);
  color: var(--gold-500);
  background: transparent;
  font-weight: 700;
  border-radius: 12px;
  padding: .68rem 1.05rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
section[aria-labelledby="contact-titre"] .btn:hover{
  background: var(--gold-500);
  color: #000;
  transform: translateY(-1px);
}
section[aria-labelledby="contact-titre"] .btn:focus-visible{
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}
section[aria-labelledby="contact-titre"] .btn i{ color: currentColor !important; }

/* Ligne d’adresse (petit texte) */
section[aria-labelledby="contact-titre"] .small.text-muted{
  color: var(--muted-on-dark) !important;
  opacity: .95;
}

/* Colonne droite (titre + bouton plan) */
section[aria-labelledby="contact-titre"] .h6{
  color: var(--on-dark);
  font-weight: 700;
}
section[aria-labelledby="contact-titre"] .btn.btn-sm.btn-outline-secondary{
  border: 1.8px solid var(--gold-500);
  color: var(--gold-500);
  background: transparent;
  font-weight: 700;
  padding: .45rem .7rem;
}
section[aria-labelledby="contact-titre"] .btn.btn-sm.btn-outline-secondary:hover{
  background: var(--gold-500);
  color: #000;
}

/* Cadre de la carte (iframe) */
section[aria-labelledby="contact-titre"] .ratio{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
section[aria-labelledby="contact-titre"] .ratio:hover{
  border-color: rgba(214,178,94,.42);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Responsive confort */
@media (max-width: 575.98px){
  section[aria-labelledby="contact-titre"] .btn{ width: 100%; }
  section[aria-labelledby="contact-titre"] .d-flex.flex-wrap.gap-2 > .btn + .btn{ margin-top: .5rem; }
}

/********liens à droite*****************/

.endlink
{
  display:block;
  text-align:center;
  margin-top:0.5rem;
  padding-top:0.5rem;
  border-top: 1px solid var(--gold-500);
}

/* =========================================================
   PAGE — Mentions légales (scope : main[data-bs-target="#toc-legales"])
   Charte : fond sombre, textes blanc cassé, accents or
   ========================================================= */

main[data-bs-target="#toc-legales"]{
  color: var(--on-dark);
}

/* --- En-tête doc ------------------------------------------------- */
main[data-bs-target="#toc-legales"] .doc-head{
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: .75rem;
}
main[data-bs-target="#toc-legales"] h1{
  font-weight: 800;
  color: var(--on-dark);
  margin: 0;
}
main[data-bs-target="#toc-legales"] .updated{
  color: var(--muted-on-dark);
  font-size: .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  padding: .35rem .6rem;
  border-radius: 10px;
}

/* --- Sommaire (TOC) sticky -------------------------------------- */
main[data-bs-target="#toc-legales"] #toc-legales .card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow: hidden;
}
main[data-bs-target="#toc-legales"] #toc-legales .card-header{
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: var(--on-dark);
}
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item{
  background: transparent;
  color: var(--muted-on-dark);
  border-color: rgba(255,255,255,.08);
  padding: .6rem .9rem;
}
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item i{
  color: var(--gold-500);
}
/* actif (Scrollspy) + hover */
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item.active,
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item:focus,
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item:hover{
  color: var(--on-dark);
  background: rgba(214,178,94,.10);
  border-left: 3px solid var(--gold-500);
}
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item.active{
  font-weight: 700;
}

/* --- Corps -------------------------------------------------------- */
main[data-bs-target="#toc-legales"] .legal-body{
  line-height: 1.65;
}
main[data-bs-target="#toc-legales"] .legal-body p{
  color: var(--on-dark);
}
main[data-bs-target="#toc-legales"] .legal-body .text-muted{
  color: var(--muted-on-dark) !important;
}

/* Titres d’articles (H2.h4 avec icône) */
main[data-bs-target="#toc-legales"] .legal-body h2.h4{
  display: flex; align-items: center; gap: .5rem;
  color: var(--on-dark);
  font-weight: 800;
  margin: 1.25rem 0 .5rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--gold-500);     /* soulignement or */
}
/* Icônes (neutralise .text-success) */
main[data-bs-target="#toc-legales"] .legal-body h2.h4 i{
  color: var(--gold-500) !important;
}

/* Sous-titres h3 */
main[data-bs-target="#toc-legales"] .legal-body h3{
  color: var(--on-dark);
  font-weight: 700;
  margin-top: 1rem;
}

/* Liens dans le texte */
main[data-bs-target="#toc-legales"] .legal-body a{
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
main[data-bs-target="#toc-legales"] .legal-body a:hover{
  color: #fff;
  text-decoration: none;
}

/* Listes */
main[data-bs-target="#toc-legales"] .legal-body ul{
  margin: .5rem 0 1rem 0; padding-left: 1rem;
}
main[data-bs-target="#toc-legales"] .legal-body li{
  margin-bottom: .35rem;
  color: var(--on-dark);
}

/* Encarts éventuels (cards dans le corps) */
main[data-bs-target="#toc-legales"] .legal-body .card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}

/* --- Accessibilité / Focus -------------------------------------- */
main[data-bs-target="#toc-legales"] a:focus-visible{
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* --- Responsive --------------------------------------------------- */
@media (max-width: 991.98px){
  main[data-bs-target="#toc-legales"] #toc-legales{
    position: static !important;
  }
  main[data-bs-target="#toc-legales"] #toc-legales .card{
    margin-bottom: .5rem;
  }
}

/* =========================================================
   PAGE — Mentions légales (correctif : fond sombre + contraste)
   Scope strict : main[data-bs-target="#toc-legales"]
   ========================================================= */

/* Panneau sombre + respirations */
main[data-bs-target="#toc-legales"]{
  /* fond sombre avec fallback si la variable n'existe pas */
  background: var(--panel-900, #1f2a27);
  color: var(--on-dark, #f3f4f2);
  border-radius: var(--radius, 16px);
  padding: 2rem 1.25rem;
}

/* En-tête */
main[data-bs-target="#toc-legales"] .doc-head{
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: .75rem;
}
main[data-bs-target="#toc-legales"] h1{
  color: var(--on-dark, #f3f4f2);
  font-weight: 800;
  margin: 0;
}
main[data-bs-target="#toc-legales"] .updated{
  color: var(--muted-on-dark, #cfd6d2);
  font-size: .9rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  padding: .35rem .6rem;
  border-radius: 10px;
}

/* Sommaire (TOC) */
main[data-bs-target="#toc-legales"] #toc-legales .card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius, 16px);
  overflow: hidden;
}
main[data-bs-target="#toc-legales"] #toc-legales .card-header{
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: var(--on-dark, #f3f4f2);
}
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item{
  background: transparent;
  color: var(--muted-on-dark, #cfd6d2);
  border-color: rgba(255,255,255,.08);
  padding: .6rem .9rem;
}
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item i{
  color: var(--gold-500, #d6b25e);
}
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item.active,
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item:hover,
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item:focus{
  color: var(--on-dark, #f3f4f2);
  background: rgba(214,178,94,.10);
  border-left: 3px solid var(--gold-500, #d6b25e);
  font-weight: 700;
}

/* Corps */
main[data-bs-target="#toc-legales"] .legal-body p,
main[data-bs-target="#toc-legales"] .legal-body li,
main[data-bs-target="#toc-legales"] .legal-body h3{
  color: var(--on-dark, #f3f4f2);
}
main[data-bs-target="#toc-legales"] .legal-body .text-muted{
  color: var(--muted-on-dark, #cfd6d2) !important;
}

/* Titres d’article + soulignement or */
main[data-bs-target="#toc-legales"] .legal-body h2.h4{
  display:flex; align-items:center; gap:.5rem;
  color: var(--on-dark, #f3f4f2);
  font-weight:800; margin:1.25rem 0 .5rem;
  padding-bottom:.35rem;
  border-bottom:2px solid var(--gold-500, #d6b25e);
}
main[data-bs-target="#toc-legales"] .legal-body h2.h4 i{
  color: var(--gold-500, #d6b25e) !important; /* neutralise .text-success */
}

/* Liens */
main[data-bs-target="#toc-legales"] .legal-body a{
  color: var(--gold-500, #d6b25e);
  text-decoration: underline;
  text-underline-offset:2px;
}
main[data-bs-target="#toc-legales"] .legal-body a:hover{
  color:#ffffff; text-decoration:none;
}

/* Focus */
main[data-bs-target="#toc-legales"] a:focus-visible{
  outline:2px solid var(--gold-500, #d6b25e);
  outline-offset:2px;
}

/* Responsive : TOC non-sticky en mobile */
@media (max-width: 991.98px){
  main[data-bs-target="#toc-legales"] #toc-legales{ position: static !important; }
  main[data-bs-target="#toc-legales"] #toc-legales .card{ margin-bottom:.5rem; }
}

/* Harmonisation focus/active dans le TOC mentions légales */
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item.active,
main[data-bs-target="#toc-legales"] #toc-legales .list-group-item:focus {
  background: rgba(214,178,94,.15) !important; /* or léger */
  border-left: 3px solid var(--gold-500, #d6b25e) !important;
  color: var(--on-dark, #f3f4f2) !important;
}


/* Étape 2 — Style de l’item actif / focus */
#toc-legales .list-group-item.active,
#toc-legales .list-group-item-action:focus {
  background-color: var(--card-800, #1f2a28);
  border-left: 4px solid var(--gold-500, #d6b25e);
  color: var(--paper-50, #f7f5f0);
}

/* Redondance pour garantir l’or sur l’icône en actif/focus */
#toc-legales .list-group-item.active i,
#toc-legales .list-group-item-action:focus i {
  color: var(--gold-500, #d6b25e) !important;
}

/* TOC Mentions légales – icônes dorées quand l’item est actif/focus */
#toc-legales .list-group-item.active > i.bi,
#toc-legales .list-group-item:focus > i.bi,
#toc-legales .list-group-item.active [class^="bi-"],
#toc-legales .list-group-item:focus [class^="bi-"],
#toc-legales .list-group-item.active [class*=" bi-"],
#toc-legales .list-group-item:focus [class*=" bi-"] {
  color: var(--gold-500, #d6b25e) !important;
}

/* =========================================================
   /chatons — Onglets "Portées" (nav-pills)
   Scope : .portee-tabs
   ========================================================= */
.portee-tabs{
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* Onglet par défaut (outline or, fond transparent) */
.portee-tabs .nav-link{
  border: 2px solid var(--gold-500);
  color: var(--gold-500);
  background: transparent;
  border-radius: 999px;               /* pilule */
  font-weight: 700;
  padding: .45rem .9rem;
  line-height: 1.2;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .05s ease;
  --bs-nav-pills-link-active-bg: transparent; /* neutralise Bootstrap */
}

/* Icône cœur = suit la couleur du texte (pas de rouge forcé) */
.portee-tabs .nav-link i{
  color: currentColor !important;
}

/* Hover / focus */
.portee-tabs .nav-link:hover,
.portee-tabs .nav-link:focus-visible{
  background: rgba(214,178,94,.15);   /* or léger */
  color: var(--gold-500);
  outline: none;
}

/* État actif : pastille pleine or, texte noir (lisible) */
.portee-tabs .nav-link.active,
.portee-tabs .nav-link[aria-selected="true"]{
  background: var(--gold-500) !important;
  color: #000 !important;
  border-color: var(--gold-500) !important;
}

/* Micro feedback au clic */
.portee-tabs .nav-link:active{ transform: translateY(1px); }

/* Confort mobile : scroll horizontal si beaucoup d’onglets */
@media (max-width: 576.98px){
  .portee-tabs{
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .portee-tabs .nav-link{ white-space: nowrap; }
}

/* =========================================================
   /chatons — BLOC MARIAGE (scope : .mariage)
   ========================================================= */

/* Conteneur */
.mariage{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius, 16px);
  padding: 1.25rem 1.25rem 1rem;
}

/* Miniatures parents */
.mariage .parent-thumb{
  position: relative;
  width: 112px; height: 112px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--gold-500);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.mariage .parent-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Infos mariage (étiquettes + valeurs) */
.mariage .mariage-info p{
  color: var(--on-dark);
  margin-bottom: .35rem;
}
.mariage .mariage-info .k{
  color: var(--gold-500);
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.mariage .mariage-info i{
  color: currentColor; /* l’icône suit la couleur de .k (or) */
}

/* Note CGV (encart discret) */
.mariage .cgv-note{
  background: rgba(214,178,94,.08);                 /* voile or léger */
  border: 1px dashed var(--gold-500);
  color: var(--on-dark);
  border-radius: 12px;
  padding: .75rem .9rem;
  line-height: 1.5;
}

/* Alignements & respirations */
.mariage .row{ --bs-gutter-x: 1rem; --bs-gutter-y: .75rem; }
.mariage .d-flex.align-items-center.gap-3{ gap: 1rem !important; }

/* Responsive */
@media (max-width: 991.98px){
  .mariage{ padding: 1rem; }
  .mariage .parent-thumb{ width: 96px; height: 96px; }
}
@media (max-width: 575.98px){
  .mariage .parent-thumb{ width: 88px; height: 88px; }
  .mariage .mariage-info p{ margin-bottom: .45rem; }
}
/* -------- /chatons — Mariage : force dark context + readable text ------- */
.mariage{
  background: var(--surface-850, #25332f);
  border: 1px solid var(--surface-700, #33423d);
  color: var(--on-dark, #e9eee8);
}

/* neutralise les tons Bootstrap trop pâles à l’intérieur */
.mariage .text-muted{ color: var(--on-dark-70, #cdd7d1) !important; }
.mariage p, .mariage li, .mariage .mariage-info p{ color: var(--on-dark, #e9eee8); }

/* étiquettes « clés » en or + icônes lisibles */
.mariage .mariage-info .k{
  color: var(--gold-500, #d6b25e);
  font-weight: 700;
}
.mariage .mariage-info i{ color: var(--gold-500, #d6b25e); }

/* miniatures inchangées, juste tiny lift de contour si fond plus sombre */
.mariage .parent-thumb{
  border-color: var(--gold-500, #d6b25e);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}

/* ===========================================================
   PAGE CHATONS — Légende des statuts
   =========================================================== */

.status-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  font-size: .9rem;
  background: var(--surface-850,#25332f);
  border: 1px solid var(--surface-700,#33423d);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}

.status-legend strong {
  color: var(--on-dark-80,#d9e2dc);
  font-weight: 600;
}

/* Base badge */
.badge-status {
  --c: var(--on-dark-60,#b8c2bd);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--c);
  background: color-mix(in oklab, var(--c) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--c) 55%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
  font-size: .8rem;
}

.badge-status:hover {
  background: color-mix(in oklab, var(--c) 26%, transparent);
  border-color: color-mix(in oklab, var(--c) 70%, transparent);
}

.badge-status i {
  color: currentColor;
  opacity: .95;
}

/* Couleurs spécifiques */
.badge-disponible { --c:#77c5a3; }     /* Vert doux */
.badge-evaluation { --c:#b89be5; }     /* Violet pastel */
.badge-option     { --c:#7fb7e6; }     /* Bleu clair */
.badge-reserve    { --c:#e07a74; }     /* Rouge corail */
.badge-vendu      { --c:#a8b0ad; }     /* Gris atténué */

/* Responsive : statuts sur petits écrans */
@media (max-width: 576px) {
  .status-legend {
    flex-direction: column;
    align-items: flex-start;
    padding: .75rem 1rem;
  }

  .status-legend strong {
    margin-bottom: .4rem;
  }

  .status-legend span {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .status-legend .badge-status {
    width: 100%;
    justify-content: center;
    margin: .15rem 0;
  }
}

/* ===========================
   Cartes chatons — Habillage
   (HTML inchangé)
=========================== */

.kitten-card{
  background: var(--pv-panel-800, #222); /* gris foncé doux */
  color: var(--pv-ink-on-dark, #f3f3f0);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  box-shadow: var(--pv-shadow-soft, 0 6px 18px rgba(0,0,0,.18));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.kitten-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  border-color: rgba(255,255,255,.12);
}

/* Photo 1:1, recadrée */
.kitten-photo{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.kitten-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  transform: scale(1.0001);
  transition: transform .35s ease;
}
.kitten-card:hover .kitten-photo img{
  transform: scale(1.04);
}

/* Corps de carte : pile verticale */
.kitten-body{
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* Nom CENTRÉ, le reste GAUCHE */
.kitten-name{
  text-align: center;
  margin-bottom: .25rem;
  color: var(--pv-ink-on-dark, #f3f3f0);
  font-weight: 700;
  letter-spacing: .2px;
}
.kitten-body .kitten-sex,
.kitten-body .kitten-coat{
  text-align: left;
  color: var(--pv-ink-muted, #cfcfca);
  font-size: .92rem;
}

/* Ligne statut + prix */
.kitten-price{
  color: var(--pv-ink-on-dark, #f3f3f0);
  font-weight: 700;
  font-size: .95rem;
}

/* Badges de statut (pilules) */
.badge-status{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .82rem;
  line-height: 1;
  border: 1px solid currentColor;
  background: transparent;
  white-space: nowrap;
}

/* Variantes — respecte ta charte (verts + or) */
.badge-disponible{ color: var(--pv-emerald, #1ac37a); }
.badge-evaluation{ color: var(--pv-emerald-300, #5bd6a3); } /* vert plus pâle */
.badge-option    { color: var(--pv-gold, #caa75a); }
.badge-reserve   { color: var(--pv-danger, #f26b6b); }
.badge-vendu     { color: var(--pv-ink-muted, #acaca8); }

/* Bouton “Photos” centré EN BAS */
.kitten-actions{
  margin-top: auto;
  padding-top: .5rem;
  text-align: center;
}

/* On “goldifie” le bouton outline-secondary dans le contexte carte */
.kitten-card .btn-outline-secondary{
  --btnGold: var(--pv-gold, #caa75a);
  color: var(--btnGold);
  border-color: var(--btnGold);
  background: transparent;
}
.kitten-card .btn-outline-secondary i{ color: currentColor; }
.kitten-card .btn-outline-secondary:hover,
.kitten-card .btn-outline-secondary:focus{
  color: #111;
  background: var(--pv-gold, #caa75a);
  border-color: var(--pv-gold, #caa75a);
}
.kitten-card .btn-outline-secondary:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(202,167,90,.25);
}

/* Petites finitions responsives */
@media (min-width: 1200px){
  .kitten-body{ padding: 14px 14px 16px; }
}
@media (max-width: 575.98px){
  .kitten-name{ font-size: 1.05rem; }
}

/* Si besoin d’un séparateur fin (or) entre meta et actions — optionnel :
.kitten-body::after{
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pv-gold, #caa75a), transparent);
  margin: .6rem 0 .4rem;
  opacity: .45;
}
*/

/* ===== Chatons — Ajustements demandés ===== */

/* 1) Tout le texte du corps aligné à gauche (sauf exceptions ci-dessous) */
.kitten-body{
  text-align: left;
}

/* 2) Titre reste centré */
.kitten-name{
  text-align: center;
}

/* 3) Bouton "Photos" centré en bas */
.kitten-actions{
  text-align: center;
}

/* 4) Ligne "statut + prix" : alignée à gauche avec un espacement propre */
.kitten-body .d-flex.justify-content-between{
  justify-content: flex-start !important;
  gap: .75rem;
}

/* 5) Séparateur or discret entre le bloc infos et les actions */
.kitten-body::after{
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pv-gold, #caa75a), transparent);
  margin: .65rem 0 .5rem;
  opacity: .45;
}

/* ===== Chatons — Ajustements corrigés ===== */

/* 1) Séparateur discret sous le titre */
.kitten-name::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pv-gold, #caa75a), transparent);
  margin: .35rem auto .65rem;
  width: 60%;
  opacity: .45;
}

/* 2) Icône diamant en or */
.kitten-name .bi-gem {
  color: var(--pv-gold, #caa75a) !important;
}

/* 3) Badge Évaluation en violet (distinct du Disponible) */
.badge-status.badge-evaluation {
  background-color: #e6d5f7; /* fond clair violet */
  color: #5b2c83; /* texte violet profond */
  border: 1px solid #c7a6e2;
}

/* ====== Cartes chatons — Habillage premium ====== */

/* Carte avec triple bordure or-noir-or */
.kitten-card {
  background: var(--pv-dark, #1e1e1e);
  border: 3px solid var(--pv-gold, #caa75a);       /* première bordure or */
  outline: 2px solid #000;                         /* deuxième bordure noire */
  box-shadow: 0 0 0 5px var(--pv-gold, #caa75a);   /* troisième bordure or extérieure */
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kitten-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 5px var(--pv-gold, #caa75a),
              0 8px 18px rgba(0,0,0,0.4);
}

/* Nom du chaton + séparateur */
.kitten-name {
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.4rem;
}

.kitten-name .bi-gem {
  color: var(--pv-gold, #caa75a) !important;
}

/* Séparateur doré sous le titre */
.kitten-name::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pv-gold, #caa75a), transparent);
  margin: .35rem auto .65rem;
  width: 65%;
  opacity: .5;
}

/* Infos alignées à gauche */
.kitten-body {
  padding: 0.75rem 1rem;
  text-align: left;
  flex-grow: 1;
}

/* Statut homogène (même style que Disponible, mais couleurs changées) */
.badge-status {
  display: inline-flex;
  align-items: center;
  padding: .25rem .6rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
}

/* Déclinaisons homogènes */
.badge-status.badge-disponible {
  background: #e0f8ec;
  border-color: #00a86b;
  color: #007a52;
}

.badge-status.badge-evaluation {
  background: #f3e9ff;
  border-color: #8146c1;
  color: #5c2a91;
}

.badge-status.badge-option {
  background: #fff5e0;
  border-color: #cc8a00;
  color: #995c00;
}

.badge-status.badge-reserve {
  background: #ffe5e5;
  border-color: #cc0000;
  color: #990000;
}

.badge-status.badge-vendu {
  background: #e8e8e8;
  border-color: #555;
  color: #333;
}

/* Boutons centrés en bas */
.kitten-actions {
  margin-top: auto;
  text-align: center;
}

/* =========================================================
   Statuts (légende + cartes) : pill sombre + contour coloré
   ========================================================= */
.badge-status{
  --fg: #caa75a;            /* fallback */
  --bd: currentColor;
  background: #111a17;      /* sombre, cohérent avec la charte */
  color: var(--fg);
  border: 2px solid var(--bd);
  border-radius: 999px;
  padding: .24rem .62rem;
  font-size: .82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 1px 0 rgba(0,0,0,.55);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.badge-status i{ color: currentColor; }     /* l’icône prend la couleur du texte */
.badge-status .bi{ margin-right:.25rem; }

/* tailles harmonisées : un poil plus compact dans les cartes */
.kitten-card .badge-status{
  font-size: .78rem;
  padding: .22rem .56rem;
}

/* Variantes (couleurs homogènes) */
.badge-status.badge-disponible{ --fg:#22b07d; --bd:#22b07d; }   /* vert */
.badge-status.badge-evaluation{ --fg:#8a67d6; --bd:#8a67d6; }   /* violet (comme avant) */
.badge-status.badge-option{     --fg:#d29a28; --bd:#d29a28; }   /* ambre */
.badge-status.badge-reserve{    --fg:#d14a4a; --bd:#d14a4a; }   /* rouge */
.badge-status.badge-vendu{      --fg:#9aa1a6; --bd:#9aa1a6; }   /* gris */

/* Hover (léger renfort du contraste) */
.badge-status:hover{
  background: #0d1412;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 1px 2px rgba(0,0,0,.6);
}

/* =========================================================
   MODALES PHOTOS — habillage dark + or (cadres images intacts)
   Scope : .modal[...] + .carousel [...] uniquement
========================================================= */

/* Backdrop plus feutré */
.modal-backdrop.show{
  opacity:.78;
}

/* Carte de modale */
.modal-content{
  background: var(--c-surface-850,#1c1f21);
  color: var(--c-ink-50,#f3f3f3);
  border: 1px solid rgba(212,175,55,.35);/* or doux */
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}

/* Header / footer */
.modal-header,
.modal-footer{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06));
  border: 0;
  padding: .85rem 1rem;
}
.modal-header{ border-bottom: 1px solid rgba(212,175,55,.25); }
.modal-footer{ border-top: 1px solid rgba(212,175,55,.18); }

/* Titre (sans soulignement d’UA) + petite barre or discrète */
.modal-title{
  font-weight: 700;
  letter-spacing:.2px;
}
.modal-title::after{
  content:"";
  display:block;
  width: 46px;
  height: 2px;
  margin-top:.25rem;
  border-radius: 2px;
  background: var(--c-gold-500,#d4af37);
}

/* Bouton fermer : discret, lisible, accessible */
.btn-close{
  filter: invert(92%) sepia(12%) saturate(80%) hue-rotate(0deg) brightness(92%);
  opacity:.9;
}
.btn-close:hover,
.btn-close:focus-visible{
  transform: scale(1.05);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px rgba(212,175,55,.35);
}

/* Corps : on laisse les <img> tels quels (pas de bordure !) */
.modal-body{ padding: .85rem 1rem 1rem; }
.modal-body .ratio{ background: #0e1011; border-radius: 10px; overflow:hidden; }

/* Contrôles du carrousel : boutons ronds bord or (icônes bootstrap conservées) */
.carousel-control-prev,
.carousel-control-next{
  width:auto;
  padding: .25rem;
  opacity:.9;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  width: 40px;
  height: 40px;
  background-size: 60% 60%;
  background-color: rgba(0,0,0,.35);
  border: 1px solid rgba(212,175,55,.6);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon{
  background-color: rgba(255,255,255,.08);
  border-color: var(--c-gold-500,#d4af37);
}

/* Indicateurs (pastilles) */
.carousel-indicators [data-bs-target]{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(212,175,55,.55);
  transition: all .2s ease;
  margin: 0 4px;
}
.carousel-indicators .active{
  background: var(--c-gold-500,#d4af37);
  border-color: var(--c-gold-500,#d4af37);
}

/* Focus visibles (clavier) */
.modal-content :is(button,[data-bs-target]):focus-visible{
  outline:2px solid var(--c-gold-500,#d4af37);
  outline-offset:2px;
  border-radius:10px;
}

/* Petites optimisations responsive */
@media (max-width: 576px){
  .modal-dialog{ margin: .75rem; }
  .modal-title::after{ width: 36px; }
}

/* =========================================================
   BLOC — Adoption & infos clés (dark + gold)
   Scope strict : #adopt-synthese
========================================================= */

#adopt-synthese{
  --gold: #d4af37;
  --gold-30: rgba(212,175,55,.30);
  --gold-18: rgba(212,175,55,.18);
  --ink: #eef1f3;
  --muted: #aeb6bd;
  --surface: #1b1e21;
  --surface-2: #202428;
  color: var(--ink);
}
#adopt-synthese .text-muted{ color: var(--muted)!important; }

/* Titre + petite barre or */
#adopt-synthese header h2{
  color: var(--ink);
  font-weight: 800;
  letter-spacing:.2px;
}
#adopt-synthese header h2::after{
  content:"";
  display:block;
  width:56px;height:2px;margin:.4rem auto 0;
  background: var(--gold); border-radius:2px;
}

/* Cartes horizontales */
#adopt-synthese .card{
  background: var(--surface);
  border: 1px solid var(--gold-18);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
#adopt-synthese .card-body{ padding:1rem 1.25rem; }
@media (min-width:768px){
  #adopt-synthese .card-body{ padding:1.25rem 1.5rem; }
}

/* Pastilles d’icône (garde tes <i> Bootstrap) */
#adopt-synthese .card .rounded{
  background: var(--surface-2)!important;
  border: 1px solid var(--gold-18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

/* Boutons “En savoir plus” -> or, sans toucher au HTML */
#adopt-synthese .card a.btn{
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: rgba(212,175,55,.10);
  --bs-btn-hover-border-color: var(--gold);
  --bs-btn-active-bg: rgba(212,175,55,.16);
  --bs-btn-active-border-color: var(--gold);
  border-radius: 999px;
  padding:.35rem .8rem;
  line-height:1.1;
}
#adopt-synthese .card a.btn i{ color: var(--gold); }

/* Téléchargements utiles — tuiles */
#adopt-synthese .border{
  border-color: var(--gold-18)!important;
  background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#adopt-synthese a.text-decoration-none:hover .border{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  border-color: var(--gold)!important;
}
#adopt-synthese .bi-file-earmark-text{ color:#7aa7ff; } /* laisse un repère couleur */
#adopt-synthese .bi-file-earmark-check{ color:#70d186; }

/* FAQ (Accordion) */
#adopt-synthese .accordion-item{
  background: var(--surface);
  border: 1px solid var(--gold-18);
  border-radius: 12px;
  overflow:hidden;
}
#adopt-synthese .accordion-button{
  background: var(--surface);
  color: var(--ink);
  box-shadow:none;
  padding:.85rem 1rem;
}
#adopt-synthese .accordion-button::after{
  filter: invert(92%) sepia(4%) saturate(80%) hue-rotate(0deg) brightness(85%);
}
#adopt-synthese .accordion-button:not(.collapsed){
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08));
  color: var(--ink);
  border-bottom: 1px solid var(--gold-18);
}
#adopt-synthese .accordion-body{
  color: var(--muted);
  background: var(--body-bg);
}
#adopt-synthese .accordion-button:focus{
  border-color: var(--gold-30);
  box-shadow: 0 0 0 2px var(--gold-30);
}

/* Liens internes */
#adopt-synthese a{
  color: var(--ink);
}
#adopt-synthese a:hover{
  color: var(--ink);
  text-decoration: none;
}

/* Micro-détails */
#adopt-synthese .h5,.h6{ color:var(--ink); }
#adopt-synthese strong{ color: var(--ink); }

/* === Patch contrastes & FAQ – Adoption & infos clés ================== */
#adopt-synthese{
  /* on pousse un peu la luminosité du texte */
  --ink: #f2f4f6;
  --muted: #cfd6dc;
  --muted-2: #b7c0c8;
  --gold: #d4af37;
  --gold-24: rgba(212,175,55,.24);
  --gold-32: rgba(212,175,55,.32);
  --surface: #1b1e21;
  --surface-2: #23272b; /* + clair pour les questions */
}

/* Titres & paragraphes des 3 cartes */
#adopt-synthese .card h3,
#adopt-synthese .card .h5 { color: var(--ink); }

#adopt-synthese .card p{
  color: var(--muted);
  margin-bottom: .6rem;
}

/* Boutons “En savoir plus” (inchangé mais plus lisible) */
#adopt-synthese .card a.btn{
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--gold);
}

/* Pastilles d’icône + icônes “or” */
#adopt-synthese .card .rounded{
  background: var(--surface-2)!important;
  border: 1px solid var(--gold-24);
}
#adopt-synthese .card .rounded i{
  color: var(--gold)!important;
  opacity: .95;
}

/* ================== Tuiles “Téléchargements utiles” ================== */
#adopt-synthese .border{ color: var(--ink); }
#adopt-synthese .border p{ color: var(--muted-2); }

/* ============================= FAQ =================================== */
#adopt-synthese .accordion-item{
  background: var(--surface);
  border: 1px solid var(--gold-24);
  border-radius: 14px;
  overflow: hidden;
}

/* Question (bouton) – plus lisible, bandeau or discret à gauche */
#adopt-synthese .accordion-button{
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 700;
  padding: .95rem 1rem;
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow: none;
}
#adopt-synthese .accordion-button.collapsed{
  background: #202428;            /* un poil plus sombre quand fermée */
  color: var(--ink);
  border-left-color: var(--gold-24);
}
#adopt-synthese .accordion-button:hover{
  background: #262b31;
}
#adopt-synthese .accordion-button:focus{
  box-shadow: 0 0 0 2px var(--gold-32);
  border-left-color: var(--gold);
}

/* Flèche Bootstrap éclaircie pour fond sombre */
#adopt-synthese .accordion-button::after{
  filter: invert(93%) sepia(6%) saturate(60%) hue-rotate(0deg) brightness(95%);
}

/* Réponse – gris clair lisible */
#adopt-synthese .accordion-body{
  background: var(--body-bg);
  color: var(--muted);
  line-height: 1.55;
}

/* Liens dans la section : visibles mais sobres */
#adopt-synthese a{ color: var(--ink); }
#adopt-synthese a:hover{ color: var(--ink); text-decoration: underline; }

/* === Habillage section adoption & infos clés ================= */
#adopt-synthese {
  position: relative;
  padding: 3rem 2rem;
  background: #1b1e21;
  border: 2px solid rgba(212, 175, 55, 0.4); /* cadre doré transparent */
  border-radius: 18px;
  box-shadow: 0 0 25px rgba(0,0,0,0.35);
  margin-bottom: 3rem;
}

/* Bandeau titre */
#adopt-synthese header {
  margin-bottom: 2.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid rgba(212, 175, 55, 0.4);
}
#adopt-synthese header h2 {
  color: #f2f2f2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
#adopt-synthese header p {
  color: #ccc;
  font-size: .95rem;
}

/* Cartes adoption */
#adopt-synthese .card {
  background: #23272b;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
#adopt-synthese .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(212,175,55,0.25);
}
#adopt-synthese .card h3 {
  color: #f8f8f8;
  font-weight: 600;
}
#adopt-synthese .card p {
  color: #cfcfcf;
}
#adopt-synthese .card .rounded {
  background: #1f2327 !important;
  border: 1px solid rgba(212,175,55,.35);
}
#adopt-synthese .card .rounded i {
  color: #d4af37 !important;
}

/* Liens “En savoir plus” */
#adopt-synthese .card a.btn {
  border-color: #d4af37;
  color: #d4af37;
  font-weight: 500;
}
#adopt-synthese .card a.btn:hover {
  background: #d4af37;
  color: #1b1e21;
}

/* Sous-bloc Téléchargements */
#adopt-synthese .border {
  border: 1px solid rgba(212,175,55,.35) !important;
  border-radius: 12px !important;
  background: #23272b;
  transition: background .2s ease;
}
#adopt-synthese .border:hover {
  background: #2b3036;
}
#adopt-synthese .border h4 {
  color: #f2f2f2;
}
#adopt-synthese .border p {
  color: #ccc;
}

/* ===========================
   FOOTER — dark + or
   Scope: .site-footer
=========================== */

:root{
  --gold: #d4af37;           /* or principal */
  --gold-2: #e4c157;         /* or clair (hover/traits) */
  --footer-bg-1:#0f1113;     /* fond sombre */
  --footer-bg-2:#15181b;     /* dégradé */
  --footer-border:#2a2e33;   /* traits internes */
}

/* Fond, dégradé subtil et liseré or en haut */
.site-footer.bg-dark{
  background: linear-gradient(180deg, var(--footer-bg-1), var(--footer-bg-2));
  color:#e9ecef;
  border-top: 2px solid var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* Colonnes : rythme et micro-carte */
.site-footer .row:first-child > [class*="col-"]{
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--footer-border);
  border-radius: .75rem;
}
@media (min-width: 768px){
  .site-footer .row:first-child > [class*="col-"]{
    background: transparent;
    border: none;
    padding: 0 .5rem;
  }
}

/* Titres + petit soulignement or (discret) */
.site-footer h2,
.site-footer h3{
  color:#f8f9fa;
  font-weight: 700;
  margin-bottom:.5rem;
  position:relative;
}
.site-footer h2::after,
.site-footer h3::after{
  content:"";
  display:block;
  width: 40px;
  height: 3px;
  margin-top:.35rem;
  border-radius: 2px;
  background: linear-gradient(90deg,var(--gold),var(--gold-2));
}

/* Icônes et “text-success” en or dans le footer uniquement */
.site-footer .bi,
.site-footer .text-success{
  color: var(--gold) !important;
}

/* Listes & items */
.site-footer ul{
  margin:0;
  padding:0;
}
.site-footer li{
  margin:.35rem 0;
  padding-left:.25rem;
}

/* Liens */
.site-footer a{
  color:#d9dee3;
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}
.site-footer a:hover,
.site-footer a:focus{
  color: var(--gold-2);
  text-decoration: none;
}
.site-footer a:focus-visible{
  outline: 2px solid var(--gold-2);
  outline-offset: 2px;
  border-radius: .25rem;
}

/* Ligne copyright */
.site-footer .row.mt-4{
  border-top: 1px solid var(--footer-border);
  margin-top: 1.5rem !important;
  padding-top: 1rem;
}
.site-footer .row.mt-4 p{
  color:#cfd5db;
}

/* Petites pastilles devant les liens (option doux) */
.site-footer .list-unstyled.small a::before{
  content:"•";
  color: rgba(212,175,55,.7);
  margin-right:.35rem;
}

/* Micro-ajustements typographiques */
.site-footer .small{ letter-spacing:.1px; }
.site-footer .text-uppercase{ letter-spacing:.6px; }

/***********************ACTUALITES**********************************/
/* === Page Actualités — charte dark + warm + gold (palette gelée) === */
.actualites-scope{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2rem 1.25rem;
}

/* Titre & chapeau */
.actualites-scope h1{
  margin: 0 0 .5rem 0;
  font-weight: 800;
  color: var(--on-dark);
  padding-bottom:.5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              center bottom / 180px 2px;
}
.actualites-scope header p{ 
  margin: 0;
  color: var(--muted-on-dark);
}

/* Cartes actu — style sombre premium */
.actualites-scope .card{
  background: color-mix(in oklab, var(--on-dark) 4%, transparent);
  color: var(--on-dark);
  border: 1px solid color-mix(in oklab, var(--on-dark) 10%, transparent) !important;
  border-radius: var(--radius);
  box-shadow: none;
}
.actualites-scope .card .text-muted{
  color: var(--muted-on-dark) !important;
}
.actualites-scope .card-img-top{
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* Séparateur interne */
.actualites-scope .card-sep{
  height:1px;
  background: color-mix(in oklab, var(--on-dark) 12%, transparent);
  margin: .75rem 0 1rem 0;
  border-radius:1px;
}

/* Titres des actus */
.actualites-scope h2{
  color: var(--on-dark);
  font-weight: 800;
}

/* Badge mois (discret) */
.actualites-scope .badge-mois{
  background: color-mix(in oklab, var(--on-dark) 8%, transparent);
  color: var(--on-dark);
  border: 1px solid color-mix(in oklab, var(--on-dark) 15%, transparent);
  border-radius: 999px;
  font-weight: 700;
  padding: .25rem .6rem;
}

/* Boutons actualités : contour or -> plein or au survol */
.actualites-scope .btn-actus{
  color: var(--gold-500) !important;
  border: 2px solid var(--gold-500) !important;
  background: transparent !important;
  border-radius: 12px;
  font-weight: 700;
  padding: .6rem 1rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}
.actualites-scope .btn-actus i{ color: var(--gold-500) !important; }
.actualites-scope .btn-actus:hover{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}
.actualites-scope .btn-actus:hover i{ color: var(--on-dark) !important; }

/* Focus visible (accessibilité) */
.actualites-scope .btn-actus:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--gold-500) 55%, transparent);
  outline-offset: 2px;
}

/* HR global de la page dans le scope */
.actualites-scope hr{
  border: 0;
  height: 1px;
  margin: 2rem 0;
  background: color-mix(in oklab, var(--on-dark) 12%, transparent);
  border-radius: 1px;
}

/* Layout : respirations */
@media (min-width: 992px){
  .actualites-scope{ padding: 2.5rem 2rem; }
}

/* Liens non-boutons dans le scope */
.actualites-scope a:not(.btn){
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.actualites-scope a:not(.btn):hover{ filter: brightness(1.05); }

/* Bloc principal */
.mariage {
  background: var(--block-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
}

/* Sous-blocs */
.mariage-info,
.cgv-note {
  background: var(--block-warm);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--on-dark) 15%, transparent);
}

/* Conteneur Statuts */
.status-legend {
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
}

/* Cartes chatons */
.kitten-card {
  background: var(--block-dark);
  border: 2px solid var(--gold-500);
  border-radius: var(--radius);
  color: var(--on-dark);
}

/* Bloc synthèse adoption — icônes */
#adopt-synthese i {
  color: var(--gold-500) !important;
}

/* Boutons (style or contour → or plein au hover) */
#adopt-synthese .btn {
  border: 2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  font-weight: 600;
  border-radius: var(--radius);
  transition: background-color .2s ease, color .2s ease;
}

#adopt-synthese .btn i {
  color: var(--gold-500) !important;
}

/* Hover/focus : fond or + texte blanc cassé */
#adopt-synthese .btn:hover,
#adopt-synthese .btn:focus {
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}

#adopt-synthese .btn:hover i,
#adopt-synthese .btn:focus i {
  color: var(--on-dark) !important;
}

/* Footer : déjaunir -> or officiel */
.site-footer .text-success,
.site-footer i.text-success {
  color: var(--gold-500) !important;   /* titre + icônes */
}

/* Si un soulignement/trait du footer utilise la même classe décorative que tes titres,
   on force aussi l’or (ne change rien s’il n’existe pas) */
.site-footer .footer-underline,
.site-footer .heading-underline {
  background: var(--gold-500) !important;
  border-color: var(--gold-500) !important;
}

/* ===== Page Retraités — habillage charte (palette gelée) ===== */

/* 1) En-tête de page */
main > header h1{
  color: var(--block-dark);
  font-weight: 800;
  padding-bottom: .5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              center bottom / 200px 2px;
}
main > header p{
  color: var(--block-dark); /* lisible sur --body-bg crème */
}
main > header p .text-muted,
main > header .text-muted{
  color: var(--block-dark); /* on évite le gris Bootstrap non-charte */
}

/* 2) Carte “retraité” (remplace intégralement l'ancien style inline) */
.retiree-card{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
  box-shadow: var(--shadow-soft);
}
.retiree-img{ width:100%; height:auto; border-radius:.5rem }
.retiree-meta dt{ color: var(--muted-on-dark); font-weight:600 }
.retiree-meta dd{ margin-bottom:.5rem }
.retiree-card .text-muted{ color: var(--muted-on-dark) !important; }

/* 3) Badges dispo (palette uniquement, sans rouge/vert/jaune Bootstrap) */
.badge-dispo{
  font-weight:700;
  border-radius:999px;
  padding:.2rem .6rem;
  border:1px solid color-mix(in oklab, var(--on-dark) 15%, transparent);
  color: var(--on-dark);
  background: color-mix(in oklab, var(--on-dark) 8%, transparent);
}
/* Statut “Disponible” -> accent or (lisible) */
.badge-dispo[data-status="Disponible"]{
  background: color-mix(in oklab, var(--gold-500) 22%, transparent);
  border-color: color-mix(in oklab, var(--gold-500) 45%, transparent);
  color: var(--on-dark);
}
/* Statut “En discussion” -> warm discret */
.badge-dispo[data-status="En discussion"]{
  background: var(--block-warm);
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent);
  color: var(--on-dark);
}
/* Statuts “Réservé” / “Adopté” -> neutres lisibles */
.badge-dispo[data-status="Réservé"],
.badge-dispo[data-status="Adopté"]{
  background: color-mix(in oklab, var(--on-dark) 10%, transparent);
  border-color: color-mix(in oklab, var(--on-dark) 22%, transparent);
  color: var(--on-dark);
}

/* 4) Alertes (note utile + garanties) — on neutralise le vert/bleu par la charte */
.alert{
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--on-dark) 15%, transparent);
  box-shadow: none;
}
.alert-success,
.alert-info{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
}
.alert .text-muted{ color: var(--muted-on-dark) !important; }
.alert i{ color: var(--gold-500); } /* icône accent, discret */

/* 5) Boutons (uniformisation charte) */
.btn-success,
.btn-outline-secondary{
  border: 2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  border-radius: var(--radius);
  font-weight:700;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-success i,
.btn-outline-secondary i{ color: var(--gold-500) !important; }
.btn-success:hover,
.btn-outline-secondary:hover,
.btn-success:focus,
.btn-outline-secondary:focus{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}
.btn-success:hover i,
.btn-outline-secondary:hover i,
.btn-success:focus i,
.btn-outline-secondary:focus i{
  color: var(--on-dark) !important;
}

/* 6) HR & liens utiles (bas de page) */
main hr{
  border:0; height:1px; border-radius:1px;
  background: color-mix(in oklab, var(--block-dark) 25%, transparent);
}


/* 7) Micro-responsif */
@media (min-width: 992px){
  .retiree-card{ padding: 1.25rem 1.5rem; }
}

/* CTA final — page Retraités */
.retraite-cta {
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
  margin-top: 0;          /* collé au bloc précédent */
  text-align: center;     /* centrage des boutons */
}

.retraite-cta .btn {
  margin: .25rem;         /* petit espacement horizontal/vertical */
}

.retraite-cta {
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem;
  margin-top: 0;            /* collé au bloc précédent */
  text-align: center;       /* centre TOUT le contenu */
}

.retraite-cta .btn {
  margin: .25rem;           /* petit espacement autour des boutons */
}

.retiree-card .card-actions {
  display: flex;
  justify-content: flex-end;   /* pousse les boutons à droite */
  gap: .5rem;                  /* espace horizontal entre boutons */
  margin-top: auto;            /* colle les actions en bas */
  padding: 0 .5rem .5rem 0;    /* padding bas/droite */
}

/* Colonne texte dans les cartes retraités */
.retiree-card .col-lg-7 {
  display: flex;
  flex-direction: column;
}

/* Bloc actions en bas à droite */
.retiree-card .card-actions {
  margin-top: auto;             /* pousse en bas */
  display: flex;
  justify-content: flex-end;    /* aligne à droite */
  gap: .5rem;
  padding: 0 .5rem .5rem 0;     /* marge interne bas/droite */
}

/* Colonne gauche en positionnement relatif */
.retiree-card .col-lg-5{ position:relative; }


/* Colonne texte = colonne flexible qui s'étire */
.retiree-card .col-lg-7{ display:flex; flex-direction:column; }

/* Dernier bloc d'actions = en bas, à droite */
.retiree-card .col-lg-7 > .d-flex:last-child{
  margin-top:auto;
  justify-content:flex-end;
  gap:.5rem;
  padding:0 .5rem .5rem 0; /* marge interne droite/bas */
}

/* ===== Page Contact — charte gelée ===== */

/* En-tête */
main > header h1{
  color: var(--block-dark);
  font-weight: 800;
  padding-bottom:.5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              center bottom / 160px 2px;
}
main > header p{
  color: var(--block-dark);
}

/* Cartes (formulaire + coordonnées) */
main .card{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  border:1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
  box-shadow: var(--shadow-soft);
}
main .card .h5,
main .card h2{ color: var(--on-dark); font-weight:800; }
main .card .text-muted{ color: var(--muted-on-dark) !important; }

/* Icônes des titres de cartes */
main .card h2 i{ color: var(--gold-500); }

/* Champs de formulaire sur fond sombre */
main .form-label{ color: var(--on-dark); }
main .form-control, 
main textarea.form-control{
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  color: var(--on-dark);
  border:1px solid color-mix(in oklab, var(--on-dark) 18%, transparent);
  border-radius: .6rem;
}
main .form-control::placeholder{ color: color-mix(in oklab, var(--on-dark) 55%, transparent); }

/* Focus accessibles (or) */
main .form-control:focus{
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold-500) 35%, transparent);
}

/* États invalides (pas de rouge Bootstrap) */
main .is-invalid{
  border-color: color-mix(in oklab, var(--gold-500) 55%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold-500) 25%, transparent) !important;
}
main .invalid-feedback{ color: var(--on-dark); opacity:.9; }

/* Case à cocher RGPD */
main .form-check-label{ color: var(--on-dark); }
main .form-check-input{
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  border:1px solid color-mix(in oklab, var(--on-dark) 18%, transparent);
}
main .form-check-input:checked{
  background-color: var(--gold-500);
  border-color: var(--gold-500);
}

/* Alertes success / error (neutralisées sur la charte) */
main .alert{
  border-radius: var(--radius);
  border:1px solid color-mix(in oklab, var(--on-dark) 18%, transparent);
  box-shadow:none;
}
main .alert-success,
main .alert-danger{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
}
main .alert i{ color: var(--gold-500); }

/* Boutons (envoyer / effacer + liens bas de page) */
main .btn-success,
main .btn-outline-secondary,
main .btn.btn-sm.btn-outline-secondary{
  border:2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  border-radius: var(--radius);
  font-weight:700;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
main .btn-success i,
main .btn-outline-secondary i{ color: var(--gold-500) !important; }
main .btn-success:hover,
main .btn-outline-secondary:hover,
main .btn-success:focus,
main .btn-outline-secondary:focus{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}
main .btn-success:hover i,
main .btn-outline-secondary:hover i,
main .btn-success:focus i,
main .btn-outline-secondary:focus i{
  color: var(--on-dark) !important;
}

/* HR & bloc de liens bas de page */
main hr{
  border:0; height:1px; border-radius:1px;
  background: color-mix(in oklab, var(--block-dark) 25%, transparent);
}

/* 1) Email contact : or par défaut, blanc cassé au survol */
.col-12.col-lg-5 .card a[href^="mailto:"]{
  color: var(--gold-500) !important;
  text-decoration: none;
  font-weight:600;
  transition: color .12s ease, text-decoration .12s ease;
}
.col-12.col-lg-5 .card a[href^="mailto:"]:hover,
.col-12.col-lg-5 .card a[href^="mailto:"]:focus{
  color: var(--on-dark) !important;
  text-decoration: underline;
}

/* 2) CTAs bas de page (sélecteur ciblé pour les liens sous le hr) */
main > hr + .d-flex .btn,
main > .d-flex .btn{
  border: 2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  border-radius: 12px;
  font-weight:700;
  padding: .45rem .8rem;
  transition: background-color .15s ease, color .15s ease, box-shadow .12s ease;
}

/* Hover/focus : plein or + texte blanc cassé */
main > hr + .d-flex .btn:hover,
main > .d-flex .btn:hover,
main > hr + .d-flex .btn:focus,
main > .d-flex .btn:focus{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
  box-shadow: 0 6px 18px color-mix(in oklab, #000 30%, #0000);
}

/* Focus visible (accessibilité) */
main > hr + .d-flex .btn:focus-visible,
main > .d-flex .btn:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--gold-500) 45%, transparent);
  outline-offset: 3px;
}

/* Optionnel : améliore le contraste du state "hover" pour les utilisateurs qui utilisent réduction des animations */
@media (prefers-reduced-motion: reduce){
  main > hr + .d-flex .btn,
  main > .d-flex .btn{ transition: none; }
}

/* ===== Page Santé — habillage charte (palette gelée) ===== */

/* Bandeau visuel du haut (on n’altère pas l’illustration) */
main .ratio.ratio-21x9{
  border-color: color-mix(in oklab, var(--block-dark) 25%, transparent) !important;
}
main .ratio.ratio-21x9 i.bi-heart-pulse{ color: var(--gold-500); }

/* Titre & intro */
main > header h1{
  color: var(--block-dark);
  font-weight: 800;
  padding-bottom:.5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              center bottom / 180px 2px;
}
main > header h1 i{ color: var(--gold-500); }
main > header .lead{ color: var(--block-dark); }

/* Alerte “vétérinaire” : neutraliser le bleu/vert bootstrap */
main .alert{
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--on-dark) 18%, transparent);
  box-shadow: none;
}
main .alert-info{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
}
main .alert-info i,
main .alert-info h2{ color: var(--on-dark); }
main .alert-info i.bi{ color: var(--gold-500); } /* icône accent */
main .alert.border-start{ border-left-color: var(--gold-500) !important; }

/* Sections “cartes” sombres */
.section-card{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.25rem;
}
.section-card h2,
.section-card h3{ color: var(--on-dark); font-weight: 800; }
.section-card h2 i,
.section-card h3 i{ color: var(--gold-500); }

/* Petites vignettes à l’intérieur des grilles (prévenir > guérir) */
.section-card .border{
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  color: var(--on-dark);
  border-radius: .65rem !important;
}

/* Placeholders visuels internes (schéma) */
.section-card .ratio{
  background: color-mix(in oklab, var(--on-dark) 6%, transparent) !important;
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
  color: var(--muted-on-dark) !important;
}

/* Sommaire (liste de liens) */
.section-card .list-unstyled a{
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 600;
}
.section-card .list-unstyled a:hover{
  text-decoration: underline;
}
.section-card .list-unstyled i.bi{
  color: var(--gold-500);
}

/* CTA discret bas de page */
main .bg-body-secondary{
  background: var(--block-dark) !important;
  color: var(--on-dark) !important;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
  box-shadow: var(--shadow-soft);
}
main .bg-body-secondary .btn{
  border: 2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  border-radius: var(--radius);
  font-weight:700;
  padding:.45rem .8rem;
  transition: background-color .15s ease, color .15s ease;
}
main .bg-body-secondary .btn:hover,
main .bg-body-secondary .btn:focus{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}

/* Accordion (FAQ) */
.section-card .accordion-item{
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--on-dark) 15%, transparent);
  border-radius: .6rem;
  overflow: hidden;
}
.section-card .accordion-button{
  background: var(--block-warm);
  color: var(--on-dark);
  box-shadow: none;
}
.section-card .accordion-button:not(.collapsed){
  background: var(--block-warm);
  color: var(--on-dark);
}
.section-card .accordion-button:focus{
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold-500) 35%, transparent);
}
.section-card .accordion-body{
  background: var(--body-bg);
  color: var(--on-dark);
}

/* Liens généraux à l’intérieur des sections sombres */
.section-card a:not(.btn){
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section-card a:not(.btn):hover{ filter: brightness(1.05); }

/* Micro-responsif */
@media (min-width: 992px){
  .section-card{ padding: 1.25rem 1.5rem; }
}

/* === Correctif bloc "Vétérinaire : premier référent" === */
main .alert-info {
  background: var(--block-warm) !important; /* on garde le fond warm */
  color: var(--on-dark) !important;
  border: 2px solid var(--gold-500) !important; /* cadre or partout */
}
main .alert-info i.bi {
  color: var(--gold-500) !important; /* icône or */
}
main .alert-info h2 {
  color: var(--on-dark);
}

/* === Correctif sommaire des thèmes === */
.section-card ul.list-unstyled a {
  color: var(--gold-500) !important;
  font-weight: 600;
  text-decoration: none;
}
.section-card ul.list-unstyled a:hover {
  color: var(--on-dark) !important;
  text-decoration: underline;
}
.section-card ul.list-unstyled i.bi {
  color: var(--gold-500) !important;
}

/* ===== Conditions d’adoption — habillage charte (palette gelée) ===== */

/* 0) Base page */
main > header h1{
  color: var(--block-dark);
  font-weight: 800;
  padding-bottom:.5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              center bottom / 220px 2px;
}
main > header p{ color: var(--block-dark); }
main > header p a{ color: var(--gold-500); text-decoration: underline; }
main > header p a:hover{ color: var(--block-dark); }

/* 1) TOC (Sommaire) — remplace le style inline vert */
.toc-sticky{ position: sticky; top: 6.5rem; }
#toc-adoption.card{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  border:1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
  box-shadow: var(--shadow-soft);
}
#toc-adoption strong{ color: var(--on-dark); }
#toc-adoption .nav-link{
  color: var(--muted-on-dark);
  padding:.25rem 0;
}
#toc-adoption .nav-link:hover{ color: var(--on-dark); }
#toc-adoption .nav-link.active{
  color: var(--gold-500);            /* plus de vert */
  font-weight:700;
}

/* Aide de position d’ancre (garde ton comportement) */
.anchor-offset{ scroll-margin-top: 7rem; }

/* 2) Alertes / encadrés d’intro */
.alert{
  border-radius: var(--radius);
  border:1px solid color-mix(in oklab, var(--on-dark) 18%, transparent);
  box-shadow:none;
}
.alert-success,
.alert-info,
.alert-secondary{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
}
.alert i.bi{ color: var(--gold-500); }
.alert a{ color: var(--gold-500); text-decoration: underline; }
.alert a:hover{ color: var(--on-dark); }

/* 3) Cartes de section (ex: Arrhes vs Acompte, Destination) */
.card{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  border:1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
  box-shadow: var(--shadow-soft);
}
.card .card-body h2,
.card .card-body h3{ color: var(--on-dark); font-weight:800; }
.card .card-body i.bi{ color: var(--gold-500) !important; }

/* Désactivation des couleurs Bootstrap dans les titres/texte */
.card .text-success,
.card .text-warning,
.card .text-secondary,
.card .text-primary,
.card .text-danger{
  color: var(--on-dark) !important;
}

/* Petites “tuiles” internes (p-3.border.rounded) */
.card .border{
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  color: var(--on-dark);
  border-radius: .7rem !important;
}

/* 4) Tableau comparatif */
.table{
  --bs-table-bg: transparent;
  color: var(--on-dark);
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent);
}
.table thead,
.table-light{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent);
}
.table td, .table th{
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
}
.table tbody tr:nth-child(odd){
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
}
.table caption{ color: var(--muted-on-dark); }

/* 5) Accordéon (Vente, Garanties, etc.) */
.accordion-item{
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  border:1px solid color-mix(in oklab, var(--on-dark) 15%, transparent);
  border-radius:.6rem;
  overflow:hidden;
}
.accordion-button{
  background: var(--block-warm);
  color: var(--on-dark);
  box-shadow:none !important;
}
.accordion-button:not(.collapsed){
  background: var(--block-warm);
  color: var(--on-dark);
}
.accordion-button:focus{
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold-500) 35%, transparent);
}
.accordion-body{
  background: var(--body-bg);
  color: var(--on-dark);
}

/* 6) Destination — supprime les jaunes/rouges/verts */
#destination .card{ border-width:2px; border-color: var(--gold-500) !important; }
#destination .card .text-warning,
#destination .card .text-success,
#destination .card .text-primary,
#destination .card .text-danger{
  color: var(--gold-500) !important;
}

/* 7) Liens généraux dans les sections sombres */
.card a:not(.btn),
.section-card a:not(.btn){
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.card a:not(.btn):hover,
.section-card a:not(.btn):hover{
  color: var(--on-dark);
}

/* 8) CTA final */
#cta .rounded-3{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius) !important;
  border:1px solid color-mix(in oklab, var(--on-dark) 12%, transparent) !important;
  box-shadow: var(--shadow-soft);
}
#cta i.bi{ color: var(--gold-500) !important; }
#cta .btn.btn-success,
#cta .btn.btn-outline-secondary{
  border:2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  border-radius: var(--radius);
  font-weight:700;
  transition: background-color .15s ease, color .15s ease;
}
#cta .btn:hover,
#cta .btn:focus{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}

/* 9) Séparateurs et petites notes */
hr{
  border:0; height:1px; border-radius:1px;
  background: color-mix(in oklab, var(--block-dark) 25%, transparent);
}
.small.text-muted{ color: var(--muted-on-dark) !important; }

/* 10) Micro-responsif */
@media (min-width: 992px){
  #toc-adoption.card{ padding: 1rem 1.25rem; }
  .card .card-body{ padding: 1.25rem 1.5rem; }
}

/* 1) SOMMAIRE : état actif/focus en OR (plus jamais vert) */
#toc-adoption .nav-link.active,
#toc-adoption .nav-link:active,
#toc-adoption .nav-link:focus,
#toc-adoption .nav-link.show,
#toc-adoption .active > .nav-link{
  color: var(--gold-500) !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 2) TABLEAU : les textes en gras ressortent en OR */
.table thead th strong,
.table tbody td strong{
  color: var(--gold-500) !important;
}
/* (on garde le gras existant ; on renforce un peu la lisibilité générale) */
.table{ color: var(--on-dark); }
.table .text-muted{ color: var(--muted-on-dark) !important; }

/* 3) “Vente & prix” (et autres panneaux) : texte bien lisible */
.accordion-body,
.accordion-body p,
.accordion-body li,
.accordion-body ul{ 
  color: var(--on-dark) !important;
}
.accordion-body .text-muted{ color: var(--muted-on-dark) !important; }

/* 4) CTA bas de page : fond sombre + tout centré (titres + bouton) */
#cta .rounded-3{
  background: var(--block-dark) !important;
  color: var(--on-dark) !important;
  border-radius: var(--radius) !important;
  border: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent) !important;
  /* centrage fort malgré les classes Bootstrap existantes */
  text-align: center;
  align-items: center !important;
  justify-content: center !important;
  row-gap: .75rem !important;
}
#cta .rounded-3 h3,
#cta .rounded-3 p{ margin-left:auto; margin-right:auto; }
#cta .rounded-3 > div:last-child{ align-self: center !important; }

/* Bouton du CTA : identique au reste du site */
#cta .btn{
  border: 2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  border-radius: var(--radius);
  font-weight: 700;
  transition: background-color .15s ease, color .15s ease;
}
#cta .btn:hover,
#cta .btn:focus{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}

/* 1) ACCORDÉON “Vente & prix” (lisibilité + fond) */
#adoptAccordion .accordion-button,
#adoptAccordion .accordion-button.collapsed{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
  box-shadow: none !important;
}
#adoptAccordion .accordion-body{
  background: var(--body-bg);   /* réponses = fond warm demandé */
  color: var(--on-dark) !important;
}

/* Flèche de l’accordéon en OR */
#adoptAccordion .accordion-button::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23D6B25E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; /* #D6B25E = var(--gold-500) */
  transform: none; /* Bootstrap gère la rotation */
  filter: none !important;
}

/* 2) FAQ (si d’autres accordéons sur la page, même rendu) */
.accordion .accordion-button{ 
  background: var(--block-warm) !important; 
  color: var(--on-dark) !important; 
}
.accordion .accordion-body{
  background: var(--body-bg);
  color: var(--on-dark) !important;
}
.accordion .accordion-button::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23D6B25E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  filter: none !important;
}

/* 3) CTA bas de page : bloc sombre + tout CENTRÉ (titre + texte + bouton) */
#cta .rounded-3{
  background: var(--block-dark) !important;
  color: var(--on-dark) !important;
  border-radius: var(--radius) !important;
  border: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent) !important;
  /* on neutralise la mise en page flex de Bootstrap ici */
  display: block !important;
  text-align: center;
  padding: 1.25rem 1.5rem;
}
#cta .rounded-3 > i,
#cta .rounded-3 > div{ margin-left:auto; margin-right:auto; }
#cta .rounded-3 > div:last-child{ margin-top:.5rem; } /* groupe bouton centré */

#cta a{ color: var(--gold-500) !important; text-decoration: underline; }
#cta a:hover{ color: var(--on-dark) !important; }

/* Bouton CTA (or → plein or au hover) */
#cta .btn{
  border: 2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  border-radius: var(--radius);
  font-weight: 700;
  transition: background-color .15s ease, color .15s ease;
}
#cta .btn:hover, #cta .btn:focus{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}

/* 4) Liens verts restants (ex: “certificat d’engagement”) -> OR */
a.text-success, .text-success a{
  color: var(--gold-500) !important;
}
a.text-success:hover, .text-success a:hover{
  color: var(--on-dark) !important;
  text-decoration: underline;
}

/* Texte du tableau adoption en OR */
#adoptAccordion table td,
#adoptAccordion table th {
  color: var(--gold-500) !important;
}

/* On garde bien le gras déjà en place */
#adoptAccordion table td strong,
#adoptAccordion table th strong {
  color: var(--gold-500) !important;
  font-weight: 700;
}

/* ===== Page Remerciements — habillage charte ===== */

/* En-tête */
main > header h1{
  color: var(--block-dark);
  font-weight: 800;
  padding-bottom:.5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              center bottom / 200px 2px;
}
main > header p{ color: var(--block-dark); }

/* Cartes principales (tous les encadrés .border .rounded-3) */
main .border.rounded-3{
  background: var(--block-dark) !important;
  color: var(--on-dark) !important;
  border-radius: var(--radius) !important;
  border: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent) !important;
  box-shadow: var(--shadow-soft);
}

/* Icônes titres & grosses icônes : or */
main h2 i.bi,
main .border.rounded-3 > .d-flex > i.bi{
  color: var(--gold-500) !important;
}

/* Petits blocs internes (les .p-3.border) */
main .p-3.border.rounded{
  background: color-mix(in oklab, var(--on-dark) 6%, transparent) !important;
  color: var(--on-dark) !important;
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
  border-radius: .7rem !important;
}

/* Listes & textes atténués */
main .border.rounded-3 .small,
main .border.rounded-3 .text-muted{ color: var(--muted-on-dark) !important; }
main .border.rounded-3 ul li::marker{ color: var(--gold-500); }

/* Neutralisation des couleurs Bootstrap (pas de rouge/bleu) */
.text-danger, .text-primary{ color: var(--gold-500) !important; }

/* Liens dans les sections sombres */
main .border.rounded-3 a:not(.btn){
  color: var(--gold-500) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
main .border.rounded-3 a:not(.btn):hover{ color: var(--on-dark) !important; }

/* CTA final : fond sombre + bouton or */
main section:last-of-type .border.rounded-3{
  background: var(--block-dark) !important;
  color: var(--on-dark) !important;
  border: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent) !important;
}
main section:last-of-type i.bi{ color: var(--gold-500) !important; }

main section:last-of-type .btn{
  border: 2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  border-radius: var(--radius);
  font-weight: 700;
  padding:.45rem .85rem;
  transition: background-color .15s ease, color .15s ease;
}
main section:last-of-type .btn:hover,
main section:last-of-type .btn:focus{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}

/* Micro-responsif */
@media (min-width: 992px){
  main .border.rounded-3{ padding: 1.25rem 1.5rem !important; }
}

/* ===== Page Conseils — habillage charte (palette gelée) ===== */

/* En-tête */
main > header h1{
  color: var(--block-dark);
  font-weight: 800;
  padding-bottom:.5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              center bottom / 200px 2px;
}
main > header p{ color: var(--block-dark); }

/* Sommaire (TOC) */
.toc-sticky{ position: sticky; top: 6rem; }
#toc-conseils.gen-card{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  border:1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.25rem;
}
#toc-conseils strong{ color: var(--on-dark); }
#toc-conseils .nav-link{ color: var(--muted-on-dark); padding:.25rem 0; }
#toc-conseils .nav-link:hover{ color: var(--on-dark); }
#toc-conseils .nav-link.active{ color: var(--gold-500) !important; font-weight:700; }

/* Cartes génériques (contenus des sections) */
.gen-card{
  background: var(--block-dark) !important;
  color: var(--on-dark) !important;
  border-radius: var(--radius) !important;
  border:1px solid color-mix(in oklab, var(--on-dark) 12%, transparent) !important;
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.25rem;
}
.gen-card .text-muted,
.gen-card .mini-note{ color: var(--muted-on-dark) !important; }

/* Icônes d’en-tête de section */
.icon-box{
  width:2.25rem; height:2.25rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.5rem;
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  margin-right:.5rem;
  color: var(--gold-500);
}
h2 .bi{ color: var(--gold-500); }

/* Alertes intro / PDF / avertissements */
.alert{
  border-radius: var(--radius);
  border:1px solid color-mix(in oklab, var(--on-dark) 18%, transparent);
  box-shadow:none;
}
.alert-success,
.alert-warning{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
}
.alert i.bi{ color: var(--gold-500); }
.alert .alert-link{ color: var(--gold-500); text-decoration: underline; }
.alert .alert-link:hover{ color: var(--on-dark); }

/* Listes & texte dans cartes */
.gen-card ul li::marker{ color: var(--gold-500); }
.gen-card a:not(.btn){
  color: var(--gold-500);
  text-decoration: underline; text-underline-offset:2px;
}
.gen-card a:not(.btn):hover{ color: var(--on-dark); }

/* Tableau (si présent) */
.table{
  --bs-table-bg: transparent;
  color: var(--on-dark);
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent);
}
.table thead th{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
}
.table td, .table th{
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
}

/* Boutons (bas de page + PDF) */
.btn-success,
.btn-outline-secondary,
.btn.btn-sm.btn-outline-secondary{
  border:2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  border-radius: var(--radius);
  font-weight:700;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-success i,
.btn-outline-secondary i{ color: var(--gold-500) !important; }
.btn-success:hover,
.btn-outline-secondary:hover,
.btn-success:focus,
.btn-outline-secondary:focus{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}
.btn-success:hover i,
.btn-outline-secondary:hover i,
.btn-success:focus i,
.btn-outline-secondary:focus i{
  color: var(--on-dark) !important;
}

/* Séparateur + bloc de liens bas de page */
hr{
  border:0; height:1px; border-radius:1px;
  background: color-mix(in oklab, var(--block-dark) 25%, transparent);
}
.d-flex.gap-2 .btn{ margin:.125rem 0; }

/* Micro-responsif */
@media (min-width: 992px){
  #toc-conseils.gen-card{ padding:1.1rem 1.3rem; }
  .gen-card{ padding:1.25rem 1.5rem; }
}

/* ===== CTA bas de page Conseils ===== */
.conseils-cta{
  background: var(--block-dark);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 2rem;
  text-align: center;
}
.conseils-cta .btn{
  margin: .25rem .5rem;
}

/* ===== De la naissance au départ — charte gelée ===== */

/* En-tête */
main > header h1{
  color: var(--block-dark);
  font-weight:800;
  padding-bottom:.5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              center bottom / 220px 2px;
}
main > header p{ color: var(--block-dark); }

/* Cartes étapes (on n’altère pas les images, on les “embellit”) */
.card{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  border:1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
  box-shadow: var(--shadow-soft);
}
.card .card-body h2{ color: var(--on-dark); font-weight:800; }
.card .card-body h2 i{ color: var(--gold-500); }

/* Images : coins harmonisés + léger trait lumineux (pas de retouche visuelle autre) */
.card-img-top{
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:block;
}

/* Section “période critique” : suppression des rouges Bootstrap */
.border-danger{ border-color: var(--gold-500) !important; }
.text-danger{ color: var(--gold-500) !important; }
.alert-danger{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
  border: 2px solid var(--gold-500) !important;
}
.alert-danger i{ color: var(--gold-500) !important; }

/* Frise chronologique */
section .border.rounded-3{
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius) !important;
}
.row .border.rounded{
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  color: var(--on-dark);
  border-radius: .65rem !important;
}
.bg-danger-subtle{ background: var(--block-warm) !important; }
.fw-semibold.text-danger{ color: var(--gold-500) !important; }

/* “Documents remis” (2 colonnes) */
section .p-3.border.rounded{
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  color: var(--on-dark);
  border-radius: .7rem !important;
}
section ul li strong{ color: var(--on-dark); }

/* FAQ */
#faqBirth .accordion-item{
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  border:1px solid color-mix(in oklab, var(--on-dark) 15%, transparent);
  border-radius:.6rem;
  overflow:hidden;
}
#faqBirth .accordion-button{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
  box-shadow:none !important;
}
#faqBirth .accordion-button:not(.collapsed){
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
}
#faqBirth .accordion-body{
  background: var(--body-bg);
  color: var(--on-dark) !important;
}
/* Flèche de l’accordéon en OR */
#faqBirth .accordion-button::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23D6B25E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  filter:none !important;
}

/* CTA final (appel à contact) — bloc sombre centré, bouton or */
section .rounded-3.border{
  background: var(--block-dark) !important;
  color: var(--on-dark) !important;
  border-radius: var(--radius) !important;
  border:1px solid color-mix(in oklab, var(--on-dark) 12%, transparent) !important;
}
section .rounded-3.border i.bi{ color: var(--gold-500) !important; }
section .rounded-3.border .text-muted{ color: var(--muted-on-dark) !important; }
/* Bouton */
section .rounded-3.border .btn.btn-success{
  border:2px solid var(--gold-500) !important;
  color: var(--gold-500) !important;
  background: transparent !important;
  border-radius: var(--radius);
  font-weight:700;
  transition: background-color .15s ease, color .15s ease;
}
section .rounded-3.border .btn.btn-success:hover,
section .rounded-3.border .btn.btn-success:focus{
  background: var(--gold-500) !important;
  color: var(--on-dark) !important;
  border-color: var(--gold-500) !important;
}

/* Séparateurs */
hr{
  border:0; height:1px; border-radius:1px;
  background: color-mix(in oklab, var(--block-dark) 25%, transparent);
}

/* Micro-responsif */
@media (min-width: 992px){
  .card .card-body{ padding: 1.25rem 1.5rem; }
}

/* ===== Page “De la naissance au départ” — Ajustements ===== */

/* 1) “Documents remis au départ” — rendre le texte lisible (bloc sombre cohérent) */
section:has(.bi-folder-check){
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: 1.25rem;
}
section:has(.bi-folder-check) h2{
  color: var(--on-dark);
  font-weight: 800;
  margin-bottom: 1rem;
  padding-bottom: .4rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
             left bottom / 120px 2px;
}
section:has(.bi-folder-check) .p-3.border.rounded{
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
  color: var(--on-dark);
  border-radius: .65rem;
}

/* 2) FAQ — englober toute la section dans un bloc foncé (comme ailleurs) */
section:has(#faqBirth){
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: 1.5rem;
}
section:has(#faqBirth) h2{
  color: var(--on-dark);
  font-weight: 800;
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
             left bottom / 160px 2px;
}
/* Accordéon interne, fond warm + flèche or (cohérence charte) */
#faqBirth .accordion-item{
  background: var(--block-warm);
  border: 1px solid color-mix(in oklab, var(--on-dark) 15%, transparent);
  border-radius: .6rem;
  overflow: hidden;
}
#faqBirth .accordion-button{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
  box-shadow: none !important;
}
#faqBirth .accordion-button::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23D6B25E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  filter: none !important;
}
#faqBirth .accordion-body{
  background: var(--body-bg);
  color: var(--on-dark);
}

/* 3) Frise — tu peux garder le “⛔” rouge (car emoji), on renforce juste la lisibilité autour */
section h2:has(.bi-timeline) + .position-relative{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
}
section h2:has(.bi-timeline) + .position-relative .border.rounded{
  background: color-mix(in oklab, var(--on-dark) 6%, transparent);
  border-color: color-mix(in oklab, var(--on-dark) 18%, transparent) !important;
}
/* Tu souhaitais l’icône en noir : s’il y a un <i> dans la tuile critique, on le neutralise */
section h2:has(.bi-timeline) + .position-relative .col:nth-child(3) i{
  color: #000; /* n’ajoute pas de nouvelle couleur visible sur fond sombre (icône ≠ emoji) */
}

/* ================================
   PAGE « À propos » — Habillage v1
   Charte : var(--block-dark) / var(--block-warm) / var(--gold-500) / var(--on-dark)
===================================*/

/* 0) Bandeau héro : garder l’image, juste lisser les bords et la légende */
main .ratio.ratio-21x9 img{ border-radius: var(--radius); }
main figure > figcaption{ color: var(--muted-on-dark); }

/* 1) Sections “texte + image” : bloc sombre + titres soulignés or */
#histoire,
#pk-le-maine-coon,
#passion,
#choix-reproducteurs,
#travail-annees,
#formations{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.25rem;
}
#histoire h2,
#pk-le-maine-coon h2,
#passion h2,
#choix-reproducteurs h2,
#travail-annees h2,
#formations h2{
  color: var(--on-dark);
  font-weight: 800;
  padding-bottom: .45rem;
  margin-bottom: .75rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
             left bottom / 160px 2px;
}

/* 1b) Cartouches image dans ces sections : léger contraste warm */
#histoire .ratio, #pk-le-maine-coon .ratio, #passion .ratio,
#choix-reproducteurs .ratio, #travail-annees .ratio, #formations .ratio{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--block-warm);
  border: 1px solid rgba(255,255,255,.12);
}

/* 1c) Listes/abbr lisibles sur sombre */
#histoire abbr[title],
#pk-le-maine-coon abbr[title],
#choix-reproducteurs abbr[title]{ text-decoration: underline dotted; }

/* 2) Liens dans ces blocs : or + hover blanc (cohérence globale) */
#histoire a:not(.btn),
#pk-le-maine-coon a:not(.btn),
#passion a:not(.btn),
#choix-reproducteurs a:not(.btn),
#travail-annees a:not(.btn),
#formations a:not(.btn){
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#histoire a:not(.btn):hover,
#pk-le-maine-coon a:not(.btn):hover,
#passion a:not(.btn):hover,
#choix-reproducteurs a:not(.btn):hover,
#travail-annees a:not(.btn):hover,
#formations a:not(.btn):hover{ color: #fff; }

/* 3) FAQ — bloc sombre, items warm, chevrons or */
#faq{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.25rem;
}
#faq h2{
  color: var(--on-dark);
  font-weight: 800;
  padding-bottom: .45rem;
  margin-bottom: 1rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
             left bottom / 210px 2px;
}
/* Accordéon */
#faqAccordion .accordion-item{
  background: var(--block-warm);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .65rem;
  overflow: hidden;
}
#faqAccordion .accordion-button{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
  box-shadow: none !important;
}
#faqAccordion .accordion-button::after{
  /* chevron or */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23D6B25E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  filter: none !important;
}
#faqAccordion .accordion-body{ background: var(--body-bg); color: var(--on-dark); }

/* 3b) Neutraliser les classes Bootstrap colorées à l’intérieur (on garde la charte) */
#faq .text-success,
#faq .text-primary,
#faq .text-info,
#faq .text-warning,
#faq .text-secondary{ color: var(--gold-500) !important; }

/* 4) Liens de navigation de fin de page — CTA sur fond sombre centré */
.section-links{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.25rem;
  justify-content: center;           /* centrage des boutons */
}
.section-links .btn{
  color: var(--gold-500);
  border-color: var(--gold-500);
  background: transparent;
}
.section-links .btn:hover{
  background: var(--gold-500);
  color: #fff;
  border-color: var(--gold-500);
}

/* 5) Header de page : s’assurer que l’intro est lisible */
header.text-center p.text-muted{ color: var(--on-dark); }

/* ================================
   MÂLES — Habillage v1 (charte)
   Couleurs : --block-dark / --block-warm / --gold-500 / --on-dark
===================================*/

/* 1) Onglets (nav-pills) */
#studTabs .nav-link{
  background: var(--block-warm);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: .5rem 1rem;
}
#studTabs .nav-link:hover{ filter: brightness(1.08); }
#studTabs .nav-link.active{
  background: var(--block-dark);
  color: var(--on-dark);
  border-color: var(--gold-500);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--gold-500) 35%, transparent);
}

/* 2) Panneaux + cartes (fond sombre) */
#studTabsContent .tab-pane{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.25rem;
}
#studTabsContent .card{
  background: var(--block-warm);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
#studTabsContent .card hr{ border-color: rgba(255,255,255,.12); }
#studTabsContent dl dt{ color: color-mix(in oklab, var(--on-dark) 70%, white 30%); }

/* 3) Carrousel */
#studTabsContent .carousel-inner{
  background: var(--block-warm);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}
#studTabsContent .carousel img{ display:block; width:100%; height:auto; }

/* flèches or */
#studTabsContent .carousel-control-prev,
#studTabsContent .carousel-control-next{ width: 3rem; }
#studTabsContent .carousel-control-prev-icon,
#studTabsContent .carousel-control-next-icon{
  filter: none; background-size: 100% 100%;
}
#studTabsContent .carousel-control-prev-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 1.5 4 8l6.5 6.5' stroke='%23D6B25E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
#studTabsContent .carousel-control-next-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 14.5 12 8 5.5 1.5' stroke='%23D6B25E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 4) Miniatures (thumbs) */
.thumb-switch{
  background: var(--block-warm);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .12s ease;
}
.thumb-switch:hover{ transform: translateY(-1px); }
.thumb-switch:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold-500) 40%, transparent);
  border-color: var(--gold-500);
}

/* 5) Liens internes dans les cartes */
#studTabsContent .card a:not(.btn){
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#studTabsContent .card a:not(.btn):hover{ color:#fff; }

/* 6) CTA bas de page : fond sombre + bouton or */
.conseils-cta{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.25rem;
}
.conseils-cta .btn{
  border-color: var(--gold-500);
  color: var(--gold-500);
  background: transparent;
}
.conseils-cta .btn:hover{
  background: var(--gold-500);
  color:#fff;
  border-color: var(--gold-500);
}

/* 7) Accessibilité (focus générique) */
#studTabs .nav-link:focus-visible,
.conseils-cta .btn:focus-visible,
.thumb-switch:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold-500) 45%, transparent);
}

/* ================================
   FEMELLES — Habillage v1 (charte)
   Même logique que les mâles
===================================*/

/* 1) Onglets (nav-pills) */
#queenTabs .nav-link{
  background: var(--block-warm);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: .5rem 1rem;
}
#queenTabs .nav-link:hover{ filter: brightness(1.08); }
#queenTabs .nav-link.active{
  background: var(--block-dark);
  color: var(--on-dark);
  border-color: var(--gold-500);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--gold-500) 35%, transparent);
}

/* 2) Panneaux + cartes */
#queenTabsContent .tab-pane{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.25rem;
}
#queenTabsContent .card{
  background: var(--block-warm);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
#queenTabsContent .card hr{ border-color: rgba(255,255,255,.12); }
#queenTabsContent dl dt{ color: color-mix(in oklab, var(--on-dark) 70%, white 30%); }

/* 3) Carrousel */
#queenTabsContent .carousel-inner{
  background: var(--block-warm);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}
#queenTabsContent .carousel img{ display:block; width:100%; height:auto; }

/* Flèches or */
#queenTabsContent .carousel-control-prev,
#queenTabsContent .carousel-control-next{ width: 3rem; }
#queenTabsContent .carousel-control-prev-icon,
#queenTabsContent .carousel-control-next-icon{
  filter: none; background-size: 100% 100%;
}
#queenTabsContent .carousel-control-prev-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 1.5 4 8l6.5 6.5' stroke='%23D6B25E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
#queenTabsContent .carousel-control-next-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 14.5 12 8 5.5 1.5' stroke='%23D6B25E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 4) Miniatures */
.thumb-switch{
  background: var(--block-warm);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .12s ease;
}
.thumb-switch:hover{ transform: translateY(-1px); }
.thumb-switch:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold-500) 40%, transparent);
  border-color: var(--gold-500);
}

/* 5) Liens internes */
#queenTabsContent .card a:not(.btn){
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#queenTabsContent .card a:not(.btn):hover{ color:#fff; }

/* 6) CTA bas de page */
.conseils-cta{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.25rem;
}
.conseils-cta .btn{
  border-color: var(--gold-500);
  color: var(--gold-500);
  background: transparent;
}
.conseils-cta .btn:hover{
  background: var(--gold-500);
  color:#fff;
  border-color: var(--gold-500);
}

/* 7) Accessibilité (focus) */
#queenTabs .nav-link:focus-visible,
.conseils-cta .btn:focus-visible,
.thumb-switch:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold-500) 45%, transparent);
}

/* === Standard de race — harmonisation charte === */

/* TOC : actif en or, non-vert */
#toc-standard .toc-link.active{ color: var(--gold-500); font-weight:700; }

/* Cartes internes de contenu (encarts, notes…) */
.section-card{
  background: var(--block-warm);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: none;
}

/* Titres de section + pictos */
.h-title{ 
  color: var(--on-dark);
  padding-bottom:.5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              left bottom / 120px 2px;
}
.h-title i{ color: var(--gold-500); opacity:1; margin-right:.35rem; }

/* Meta / petits textes atténués */
.mini-meta{ font-size:.875rem; color: var(--muted-on-dark); }

/* Badge conseil (remap du vert) */
.badge-tip{
  background: rgba(255,255,255,.06);
  color: var(--gold-500);
  border: 1px solid var(--gold-500);
}

/* Sommaire (liste à droite) */
#toc-standard .list-group-item{
  background: var(--block-warm);
  color: var(--on-dark);
  border-color: rgba(255,255,255,.10);
}
#toc-standard .list-group-item .toc-link{ color: var(--on-dark); text-decoration:none; }
#toc-standard .list-group-item .toc-link:hover{ color:#fff; }

/* Figures / images : arrondis harmonisés */
#intro-standard .ratio img,
#tete-profil .ratio img,
#robe-texture .ratio img{
  border-radius: var(--radius);
}

/* Bloc sommaire “note” sous le TOC */
#toc-standard .section-card .mini-meta i{ color: var(--gold-500); }

/* Accordéon de la FAQ */
#faqStdAcc .accordion-item{
  background: var(--block-warm);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow: hidden;
}
#faqStdAcc .accordion-button{
  background: var(--block-warm);
  color: var(--on-dark);
  box-shadow: none;
}
#faqStdAcc .accordion-button:not(.collapsed){ background: rgba(255,255,255,.04); }
#faqStdAcc .accordion-button::after{ filter: invert(78%) sepia(35%) saturate(514%) hue-rotate(343deg) brightness(94%) contrast(88%); } /* chevron or */
#faqStdAcc .accordion-body{ color: var(--on-dark); }

/* CTA bas de page (liens) */
.section-links.conseils-cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem;
}
.section-links.conseils-cta .btn{
  color: var(--gold-500) !important;
  border-color: var(--gold-500) !important;
  background: transparent !important;
}
.section-links.conseils-cta .btn:hover{
  background: var(--gold-500) !important;
  color:#fff !important;
}

/* Titres & paragraphes généraux dans cette page */
#silhouette, #tete-profil, #oreilles, #yeux, #corps, #queue, #robe-texture, #couleurs-autorisees, #defauts, #faq-standard{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.25rem;
  margin-bottom: 2rem;
}
#intro-standard figcaption{ color: var(--muted-on-dark); }

/* Liens dans les blocs sombres */
#silhouette a, #tete-profil a, #oreilles a, #yeux a, #corps a, #queue a, #robe-texture a, #couleurs-autorisees a, #defauts a, #faq-standard a{
  color: var(--gold-500);
}
#silhouette a:hover, #tete-profil a:hover, #oreilles a:hover, #yeux a:hover, #corps a:hover, #queue a:hover, #robe-texture a:hover, #couleurs-autorisees a:hover, #defauts a:hover, #faq-standard a:hover{
  color:#fff;
  text-decoration: underline;
}

/* Bouton “Guide des couleurs” (remap) */
#couleurs-autorisees .btn-outline-secondary{
  color: var(--gold-500) !important;
  border-color: var(--gold-500) !important;
  background: transparent !important;
}
#couleurs-autorisees .btn-outline-secondary:hover{
  background: var(--gold-500) !important;
  color:#fff !important;
}

/* === Page Couleurs — Habillage charte (scope local) ===================== */


/* 1) TOC : actif en OR + items lisibles sur fond warm */
main[data-bs-target="#toc-couleurs"] #toc-couleurs .toc-link.active{
  color: var(--gold-500) !important;
  font-weight: 700 !important;
}
main[data-bs-target="#toc-couleurs"] #toc-couleurs .list-group-item{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
  border-color: rgba(255,255,255,.12) !important;
}
main[data-bs-target="#toc-couleurs"] #toc-couleurs .list-group-item .toc-link{
  color: var(--on-dark) !important;
  text-decoration: none;
}
main[data-bs-target="#toc-couleurs"] #toc-couleurs .list-group-item .toc-link:hover{
  color:#fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 2) Blocs de contenu : panels sombres cohérents (warm) */
main[data-bs-target="#toc-couleurs"] .col-12.col-lg-8 > section{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--radius) !important;
  padding: 1rem 1.25rem !important;
  box-shadow: var(--shadow-soft);
}

/* Intro : garder l’image respirante mais intégrée */
main[data-bs-target="#toc-couleurs"] #intro-couleurs .ratio{
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
}
main[data-bs-target="#toc-couleurs"] #intro-couleurs figcaption{
  color: var(--muted-on-dark) !important;
}

/* 3) Titres & icônes : contraste + filet or cohérent */
main[data-bs-target="#toc-couleurs"] .h-title{
  color: var(--on-dark) !important;
  padding-bottom: .5rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat
              left bottom / 120px 2px;
}
main[data-bs-target="#toc-couleurs"] .h-title i{
  color: var(--gold-500) !important;
  opacity: 1 !important;
}

/* 4) Médias internes : coins harmonisés */
main[data-bs-target="#toc-couleurs"] .col-12.col-lg-8 section .ratio{
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
}
main[data-bs-target="#toc-couleurs"] .col-12.col-lg-8 section figcaption{
  color: var(--muted-on-dark) !important;
}

/* 5) Texte atténué & liens dans panels sombres */
main[data-bs-target="#toc-couleurs"] .col-12.col-lg-8 section .text-muted{
  color: var(--muted-on-dark) !important;
}
main[data-bs-target="#toc-couleurs"] .col-12.col-lg-8 section a{
  color: var(--gold-500) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
main[data-bs-target="#toc-couleurs"] .col-12.col-lg-8 section a:hover{
  color:#fff !important;
}

/* 6) Accordéon (FAQ) sombre + chevrons or (Bootstrap 5.3) */
main[data-bs-target="#toc-couleurs"] #faqCouleursAcc{
  --bs-accordion-color: var(--on-dark);
  --bs-accordion-bg: var(--block-warm);
  --bs-accordion-border-color: rgba(255,255,255,.12);
  --bs-accordion-btn-color: var(--on-dark);
  --bs-accordion-btn-bg: var(--block-warm);
  --bs-accordion-active-color: #fff;
  --bs-accordion-active-bg: var(--block-warm);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .15rem rgba(214,178,94,.25);
  /* chevrons or = même teinte que --gold-500 */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23D6B25E' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
main[data-bs-target="#toc-couleurs"] #faqCouleursAcc .accordion-button{
  color: var(--on-dark) !important;
  box-shadow: none !important;
}

/* 7) CTA bas de page : centrage */
main[data-bs-target="#toc-couleurs"] .section-links.conseils-cta{
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}

/* 8) Petits ajustements : tableaux / bordures intégrées si présents */
main[data-bs-target="#toc-couleurs"] .table thead th{
  background: rgba(255,255,255,.06) !important;
  color: var(--on-dark) !important;
}
main[data-bs-target="#toc-couleurs"] .table,
main[data-bs-target="#toc-couleurs"] .table td,
main[data-bs-target="#toc-couleurs"] .table th{
  border-color: rgba(255,255,255,.12) !important;
}

/* === TOC Couleurs : actif et icônes en or ===================== */
main[data-bs-target="#toc-couleurs"] #toc-couleurs .toc-link.active {
  color: var(--gold-500) !important;
  font-weight: 700 !important;
}

main[data-bs-target="#toc-couleurs"] #toc-couleurs .toc-link i {
  color: var(--gold-500) !important;
}

/* === TOC Standard : actif et icônes en or ===================== */
main[data-bs-target="#toc-standard"] #toc-standard .toc-link.active {
  color: var(--gold-500) !important;
  font-weight: 700 !important;
}

main[data-bs-target="#toc-standard"] #toc-standard .toc-link i {
  color: var(--gold-500) !important;
}

/* ===== GÉNÉTIQUE — Habillage dans la charte (version classes existantes) ===== */

/* TOC (sommaire) : lien actif + icônes en OR (prend nav-link ou toc-link) */
#toc-genetique .nav-link.active,
#toc-genetique .toc-link.active { color: var(--gold-500) !important; font-weight: 700 !important; }
#toc-genetique .nav-link i,
#toc-genetique .toc-link i { color: var(--gold-500) !important; }

/* Sections : on garde tes blocs sombres existants */

.home-section.section-alt { background: var(--block-warm); }

/* Titres (héritent déjà du filet or via ta charte) */
.home-section > header h2,
.home-section .h-title { color: var(--on-dark); }

/* Notes / légendes dans les blocs (si présentes) */
.home-section .legend,
.home-section .note,
.home-section .tip,
.home-section .warn{
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin: .75rem 0;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--on-dark);
}
.home-section .tip{  border-color: rgba(214,178,94,.55); }
.home-section .warn{ background: rgba(255,100,80,.08); border-color: rgba(255,100,80,.35); }

/* Figures (légendes atténuées) */
.home-section figure figcaption { color: var(--muted-on-dark) !important; }

/* ===== Tableaux sombres et lisibles ===== */
.home-section table,
.home-section .table,
.table-gen{ /* accepte aussi .table-gen si tu l’ajoutes ponctuellement */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--on-dark);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;
}
.home-section table thead th,
.home-section .table thead th,
.table-gen thead th{
  background: rgba(255,255,255,.07);
  color: var(--gold-500);
  font-weight: 800;
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding: .75rem .9rem;
}
.home-section table tbody td,
.home-section .table tbody td,
.table-gen tbody td{
  padding: .7rem .9rem;
  vertical-align: top;
  border-top: 1px solid rgba(255,255,255,.08);
}
.home-section table tbody tr:nth-child(odd),
.home-section .table tbody tr:nth-child(odd),
.table-gen tbody tr:nth-child(odd){ background: rgba(255,255,255,.03); }
.home-section table tbody tr:hover,
.home-section .table tbody tr:hover,
.table-gen tbody tr:hover{ background: rgba(255,255,255,.06); }

.home-section .muted { color: var(--muted-on-dark) !important; }
.home-section .emph  { color: var(--gold-500); font-weight: 700; }
.home-section .table-cap { color: var(--muted-on-dark) !important; font-size: .875rem; margin-top: .35rem; }

/* Liens dans blocs sombres */
.home-section a:not(.btn){
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.home-section a:not(.btn):hover{ color: #fff; }

/* FAQ (accordéon) */
.home-section .accordion .accordion-item{ border: none; background: transparent; }
.home-section .accordion .accordion-button{
  background: var(--block-warm);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  margin: .4rem 0;
  box-shadow: none;
}
.home-section .accordion .accordion-button:not(.collapsed){
  background: var(--block-dark);
  color: var(--on-dark);
}
.home-section .accordion .accordion-button::after{
  /* chevron OR */
  filter: invert(72%) sepia(28%) saturate(534%) hue-rotate(349deg) brightness(95%) contrast(90%);
}
.home-section .accordion .accordion-body{
  background: var(--body-bg);
  color: var(--on-dark);
  border-radius: 12px;
}

/* CTA bas de page : centrage */
.conseils-cta{ display: flex; flex-wrap: wrap; justify-content: center; }

/* --- Footer: alignement & habillage --- */
.site-footer{
  background: var(--block-dark);
  color: var(--on-dark);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* icônes et accents en or */
.site-footer .text-success,
.site-footer i.bi { color: var(--gold-500) !important; }

/* liens */
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--gold-500); }

/* titres */
.site-footer h2, .site-footer h3 {
  color: var(--on-dark);
  letter-spacing: .02em;
  margin-bottom: .75rem;
}
.site-footer h2.text-success { color: var(--gold-500) !important; }

/* panneaux internes homogènes */
.site-footer .row > div{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
@media (min-width: 768px){
  .site-footer .row > div{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

/* listes : espacements propres */
.site-footer ul { margin: 0; padding-left: 0; }
.site-footer li { list-style: none; margin: .35rem 0; }

/* RESPONSIVE: empile les 3 colonnes en mobile (alignées à gauche/droite) */
@media (max-width: 767.98px){
  .site-footer .row > div { 
    flex: 0 0 100% !important; 
    max-width: 100% !important; 
    margin-bottom: .75rem;
  }
}

/* ligne copyright plus lisible */
.site-footer .row.mt-4 .col{
  color: var(--muted-on-dark);
}

/* ===== GÉNÉTIQUE — TOC (Sommaire) ===== */

/* Bloc sticky */
.toc-sticky{
  position: sticky;
  top: 6rem; /* ajuste si header fixe différent */
  z-index: 1;
}

/* Carte du sommaire : fond warm, texte lisible, bords doux */
#toc-genetique.gen-card{
  background: var(--block-warm);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1rem;
}

/* Titre "Sommaire" */
#toc-genetique > strong{
  color: var(--on-dark);
  font-weight: 800;
  padding-bottom: .4rem;
  background:
    linear-gradient(var(--gold-500),var(--gold-500))
    no-repeat left bottom / 90px 2px;
  display: inline-block;
}

/* Liste & items */
#toc-genetique .nav{
  gap: .15rem;
}
#toc-genetique .nav-item{
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#toc-genetique .nav-item:last-child{
  border-bottom: 0;
}

/* Liens du sommaire (états par défaut / hover) */
#toc-genetique .nav-link{
  color: var(--muted-on-dark);
  padding: .35rem .25rem;
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}
#toc-genetique .nav-link:hover{
  color: var(--on-dark);
  opacity: .95;
}

/* Actif (Scrollspy) : or + gras */
#toc-genetique .nav-link.active,
#toc-genetique .nav-link[aria-current="true"]{
  color: var(--gold-500) !important;
  font-weight: 700 !important;
}

/* Accessibilité focus clavier */
#toc-genetique .nav-link:focus-visible{
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Icônes éventuelles dans les liens du sommaire */
#toc-genetique .nav-link i{
  color: var(--gold-500) !important;
  margin-right: .35rem;
  opacity: .95;
}

/* Petits écrans : resserrer, garder la lisibilité */
@media (max-width: 991.98px){
  #toc-genetique.gen-card{
    padding: .75rem .85rem;
  }
  #toc-genetique .nav-link{
    padding: .3rem .2rem;
  }
}

/* ===== GÉNÉTIQUE — Intro (polish visuel) ===== */
#gen-intro .gen-card{
  background: var(--block-warm);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.25rem 1.25rem;
}

/* Icône ampoule dans un écrin or doux */
#gen-intro .icon-box{
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .6rem;
  background: rgba(214,178,94,.12); /* or adouci */
  border: 1px solid rgba(214,178,94,.55);
  margin-right: .6rem;
}
#gen-intro .icon-box i{
  color: var(--gold-500);
  font-size: 1.15rem;
}

/* Titre souligné or */
#gen-intro h2{
  color: var(--on-dark);
  font-weight: 800;
  padding-bottom: .4rem;
  background:
    linear-gradient(var(--gold-500), var(--gold-500))
    no-repeat left bottom / 110px 2px;
}

/* Texte : un peu plus "lead" sur le premier paragraphe */
#gen-intro p{ margin-bottom: .75rem; }
#gen-intro p:first-of-type{
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Note finale plus discrète et structurée */
#gen-intro .mini-note{
  color: var(--muted-on-dark) !important;
  border-top: 1px dashed rgba(255,255,255,.18);
  padding-top: .6rem;
  margin-top: .25rem;
}

/* Liseré or très subtil en pied de carte */
#gen-intro .gen-card::after{
  content: "";
  display: block;
  height: 1px;
  margin-top: .9rem;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: .35;
}

/* Petites adaptations mobile */
@media (max-width: 575.98px){
  #gen-intro .gen-card{ padding: 1rem; }
  #gen-intro h2{ background-size: 90px 2px; }
}

/* ===== GÉNÉTIQUE — Notions de base (accordéon) ===== */
#gen-notions .icon-box{
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .6rem;
  background: rgba(214,178,94,.12);
  border: 1px solid rgba(214,178,94,.5);
  margin-right: .6rem;
}
#gen-notions .icon-box i{
  color: var(--gold-500);
  font-size: 1.1rem;
}

#gen-notions h2{
  color: var(--on-dark);
  font-weight: 800;
  padding-bottom: .4rem;
  background:
    linear-gradient(var(--gold-500), var(--gold-500))
    no-repeat left bottom / 130px 2px;
}

/* Accordéon général */
#gen-notions .accordion-item{
  border: none;
  margin-bottom: .5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--block-warm);
  box-shadow: var(--shadow-soft);
}
#gen-notions .accordion-item:last-child{ margin-bottom: 0; }

/* Boutons */
#gen-notions .accordion-button{
  background: var(--block-dark);
  color: var(--on-dark);
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}
#gen-notions .accordion-button i{ color: var(--gold-500); }
#gen-notions .accordion-button.collapsed{
  background: var(--block-warm);
  color: var(--on-dark);
}
#gen-notions .accordion-button:not(.collapsed){
  background: var(--block-dark);
  color: var(--on-dark);
}

/* Chevron en or */
#gen-notions .accordion-button::after{
  filter: invert(72%) sepia(28%) saturate(534%) hue-rotate(349deg) brightness(95%) contrast(90%);
}

/* Corps de l'accordéon */
#gen-notions .accordion-body{
  background: var(--body-bg);
  color: var(--on-dark);
  font-size: .95rem;
  line-height: 1.55;
}

#gen-notions h2 {
  color: #222; /* texte sombre pour contraster sur le fond crème */
  font-weight: 800;
  padding-bottom: .4rem;
  background:
    linear-gradient(var(--gold-500), var(--gold-500))
    no-repeat left bottom / 130px 2px;
}

/* ===== GÉNÉTIQUE — Croisements (polish) ===== */
#gen-dominance .icon-box{
  width:2.25rem;height:2.25rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:.5rem;background:rgba(214,178,94,.12); /* or très léger */
  margin-right:.5rem;
}
#gen-dominance .icon-box i{ color:var(--gold-500); }

#gen-dominance h2{
  color:#222; font-weight:800; padding-bottom:.4rem;
  background:linear-gradient(var(--gold-500),var(--gold-500)) no-repeat left bottom/130px 2px;
}

/* Cartes en fond crème, lisibles */
#gen-dominance .gen-card{
  background:var(--body-bg);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}

/* Tableau harmonisé + contrasté (sans vert/jaune Bootstrap) */
#gen-dominance .table{ color:#222; }
#gen-dominance thead th{
  background:rgba(214,178,94,.12); /* bandeau doré doux */
  color:var(--gold-500);
  border-bottom:1px solid rgba(0,0,0,.08);
}
#gen-dominance tbody tr:nth-child(odd){ background:rgba(0,0,0,.02); }
#gen-dominance tbody tr:hover{ background:rgba(214,178,94,.08); }

/* Badges remappés sur la charte (contours élégants) */
#gen-dominance .badge{ border-radius:999px; font-weight:600; padding:.35rem .6rem; }
#gen-dominance .bg-dark-subtle.text-dark{
  background:rgba(0,0,0,.06)!important; color:#222!important; border:1px solid rgba(0,0,0,.12);
}
#gen-dominance .text-bg-success{      /* = “Dominant” */
  background:transparent; color:var(--gold-500)!important; border:1.5px solid var(--gold-500);
}
#gen-dominance .text-bg-warning{      /* = “Dominant porteur” */
  background:transparent; color:#222!important; border:1.5px dashed var(--gold-500);
}
#gen-dominance .text-bg-secondary{    /* = “Récessif” */
  background:transparent; color:#555!important; border:1.5px solid #B8B8B8;
}

/* Mini Punnett plus premium, lisible sur crème */
#gen-dominance .row .col>div{
  background:var(--body-bg);
  border:1.5px solid rgba(214,178,94,.6);
  border-radius:10px; padding:.75rem;
}
#gen-dominance .row .col>div small{ color:#6b6b6b; }

/* Notes en teinte sable (cohérentes avec le crème) */
#gen-dominance .mini-note{ color:#5f5a52; }

/* ===== GENETIQUE > Croisements — Corrections de lisibilité ===== */

/* Titre + pictos */
#gen-dominance .icon-box{ background:rgba(214,178,94,.12); }
#gen-dominance .icon-box i{ color:var(--gold-500); }
#gen-dominance h2{
  color:#222; font-weight:800;
  padding-bottom:.4rem;
  background:linear-gradient(var(--gold-500),var(--gold-500)) no-repeat left bottom/130px 2px;
}

/* Carte / table : texte crème sur fond sombre */
#gen-dominance .gen-card{
  background:var(--block-warm);
  color:var(--on-dark);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
}

/* Forcer les couleurs du tableau sur sombre */
#gen-dominance .gen-card table,
#gen-dominance .gen-card thead th,
#gen-dominance .gen-card tbody td{
  color:var(--on-dark) !important;
}
#gen-dominance thead th{
  background:rgba(255,255,255,.06);
  color:var(--gold-500) !important;
  border-bottom:1px solid rgba(255,255,255,.16);
}
#gen-dominance tbody tr:nth-child(odd){ background:rgba(255,255,255,.03); }
#gen-dominance tbody tr:hover{ background:rgba(214,178,94,.10); }

/* Remarques/gris trop sombre -> remonter le contraste */
#gen-dominance tbody td:last-child{ color:var(--on-dark) !important; }

/* Badges Bootstrap remappés sur la charte (avec !important pour casser le vert/jaune) */
#gen-dominance .badge{ border-radius:999px; font-weight:700; padding:.35rem .6rem; }

/* "Parents" (bg-dark-subtle text-dark) -> lisible sur sombre */
#gen-dominance .bg-dark-subtle.text-dark{
  background:rgba(255,255,255,.10) !important;
  color:var(--on-dark) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

/* Résultats */
#gen-dominance .text-bg-success{                /* Dominant */
  background:transparent !important;
  color:var(--gold-500) !important;
  border:1.6px solid var(--gold-500) !important;
}
#gen-dominance .text-bg-warning{                /* Dominant porteur */
  background:transparent !important;
  color:var(--on-dark) !important;
  border:1.6px dashed var(--gold-500) !important;
}
#gen-dominance .text-bg-secondary{              /* Récessif */
  background:transparent !important;
  color:var(--on-dark) !important;
  border:1.6px solid rgba(255,255,255,.35) !important;
}

/* Mini Punnett : fond crème + texte foncé bien lisible */
#gen-dominance .punnett-grid .cell,
#gen-dominance .row .col>div{
  background:var(--body-bg) !important;
  color:#222 !important;
  border:1.6px solid rgba(214,178,94,.60) !important;
  border-radius:12px;
  padding:.8rem;
  font-weight:700;            /* DD / Dd / dd bien visibles */
  text-align:center;
}
#gen-dominance .row .col>div small{
  display:block; margin-top:.25rem;
  color:#6b6b6b !important; font-weight:600;
}

/* Notes */
#gen-dominance .mini-note{ color:#E6E0D6 !important; } /* crème atténué sur sombre */

/* ===== GÉNÉTIQUE > Gène O (orange) & Torties — Polish ===== */
#gen-tortie .h4 i{ color:var(--gold-500); }
#gen-tortie .h4{
  color:#222;
  font-weight:800;
  padding-bottom:.4rem;
  background:linear-gradient(var(--gold-500),var(--gold-500)) no-repeat left bottom/180px 2px;
}

/* Carte/table enveloppe : même look que les autres blocs sombres */
#gen-tortie .table-responsive{
  background:var(--block-warm);
  color:var(--on-dark);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:.75rem .75rem;
}

/* Entête de table et cellules lisibles sur sombre */
#gen-tortie thead th{
  background:rgba(255,255,255,.07);
  color:var(--gold-500) !important;
  font-weight:800;
  border-bottom:1px solid rgba(255,255,255,.16);
}
#gen-tortie tbody td,
#gen-tortie thead th{ color:var(--on-dark) !important; }

#gen-tortie tbody tr:nth-child(odd){ background:rgba(255,255,255,.03); }
#gen-tortie tbody tr:hover{ background:rgba(214,178,94,.10); }

/* Badges / statuts (remplace les verts Bootstrap) */
#gen-tortie .text-success{ color:var(--gold-500) !important; }
#gen-tortie .table .badge,
#gen-tortie .table .text-bg-success,
#gen-tortie .table .text-bg-warning,
#gen-tortie .table .text-bg-secondary{
  display:inline-block;
  background:transparent !important;
  color:var(--on-dark) !important;
  border-radius:999px;
  padding:.28rem .6rem;
  font-weight:700;
  border:1.6px solid rgba(255,255,255,.28);
}
#gen-tortie .table .text-bg-success{           /* “Dominant / OK” */
  color:var(--gold-500) !important;
  border-color:var(--gold-500) !important;
}
#gen-tortie .table .text-bg-warning{           /* “Porteur” */
  border-style:dashed;
  border-color:var(--gold-500) !important;
}

/* Ligne “Note” plus douce */
#gen-tortie tbody td:last-child{ color:var(--muted-on-dark) !important; }

/* Alerte mémo : re-skin en bloc sombre premium */
#gen-tortie .alert-info{
  background:var(--block-dark) !important;
  color:var(--on-dark) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-left:4px solid var(--gold-500) !important;
  border-radius:var(--radius);
  box-shadow:none;
}
#gen-tortie .alert-info i{ color:var(--gold-500); }
#gen-tortie .alert-info .text-muted{ color:var(--muted-on-dark) !important; }

/* Paragraphe d’intro sous le titre */
#gen-tortie > .text-muted{
  color:#6c6c6c !important;       /* meilleure lecture sur fond crème global */
  max-width:65ch;
}

/* Petites finitions responsive */
@media (max-width: 576px){
  #gen-tortie .table thead{ display:none; }                    /* table en “stacked” mobile */
  #gen-tortie .table tr{ display:block; border-top:1px solid rgba(255,255,255,.12); padding:.35rem 0; }
  #gen-tortie .table td{ display:flex; justify-content:space-between; gap:.75rem; }
  #gen-tortie .table td::before{
    content:attr(data-th);
    color:var(--muted-on-dark);
    font-weight:600;
  }
}

/* Forcer les icônes “✅ Cas canonique” en or */
#gen-tortie td .bi,
#gen-tortie td .text-success {
  color: var(--gold-500) !important;
}

/* =========================================================
   GÉNÉTIQUE — Shaded & Chinchilla (polish visuel ciblé)
   Scope : #gen-shaded-chinchilla uniquement
   ========================================================= */

#gen-shaded-chinchilla.gen-section{
  /* fond warm avec un léger dégradé pour casser l’effet “bloc” */
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0)),
    var(--block-warm);
  padding: 2.25rem 1.25rem; /* un poil plus d’air */
}

/* Titre + underline or légèrement plus long et plus haut */
#gen-shaded-chinchilla .gold-underline{
  background-size: 190px 2px !important;
  padding-bottom: .65rem;
}

/* Sous-titre / légende intro */
#gen-shaded-chinchilla .mini-note{
  color: var(--muted-on-dark) !important;
  max-width: 60ch;
  margin-inline: auto;
}

/* Cartes internes : contraste + léger relief */
#gen-shaded-chinchilla .gen-card{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
#gen-shaded-chinchilla .gen-card:hover{
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
  transition: border-color .15s ease, transform .15s ease;
}

/* Encadré "Idées reçues" (warn) : lisible mais contenu */
#gen-shaded-chinchilla .warn{
  background: rgba(255,120,90,.09);
  border-color: rgba(255,120,90,.38);
}

/* Icones dorées dans les titres de sous-cartes */
#gen-shaded-chinchilla h3 i{
  color: var(--gold-500);
  opacity: 1;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* propre */
}

/* Figure : bord fin + ombre douce + arrondi harmonisé */
#gen-shaded-chinchilla .gen-figure .ratio{
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius);
}
#gen-shaded-chinchilla .gen-figure figcaption{
  color: var(--muted-on-dark) !important;
}

/* Badges gènes (A-, aa) : plus “premium” */
#gen-shaded-chinchilla .gene-badge{
  padding: .25rem .65rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--on-dark);
  font-weight: 700;
}
#gen-shaded-chinchilla .gene-badge .dot{
  background: var(--gold-500);
  box-shadow: 0 0 0 2px rgba(214,178,94,.15);
}

/* Tableau comparatif : visibilité + rythme de lignes */
#gen-shaded-chinchilla .table-gen{
  color: var(--on-dark);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
}
#gen-shaded-chinchilla .table-gen thead th{
  background: rgba(255,255,255,.075);
  color: var(--gold-500);
  font-weight: 800;
  letter-spacing: .2px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding: .8rem .95rem;
}
#gen-shaded-chinchilla .table-gen tbody td{
  color: var(--on-dark);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .75rem .95rem;
}
#gen-shaded-chinchilla .table-gen tbody tr:nth-child(odd){
  background: rgba(255,255,255,.035);
}
#gen-shaded-chinchilla .table-gen tbody tr:hover{
  background: rgba(255,255,255,.07);
}

/* Listes : micro-rythme */
#gen-shaded-chinchilla ul{
  margin-bottom: 0;
}
#gen-shaded-chinchilla li + li{
  margin-top: .35rem;
}

/* Accessibilité / comfort motion */
@media (prefers-reduced-motion: reduce){
  #gen-shaded-chinchilla .gen-card:hover{
    transform: none;
  }
  #gen-shaded-chinchilla .gen-card,
  #gen-shaded-chinchilla .table-gen{
    transition: none;
  }
}

/* Responsive : respirations sur petits écrans */
@media (max-width: 767.98px){
  #gen-shaded-chinchilla.gen-section{
    padding: 1.5rem 1rem;
  }
  #gen-shaded-chinchilla .gold-underline{
    background-size: 140px 2px !important;
  }
}

/* Titres du bloc Shaded/Chinchilla : visibles en crème */
#gen-shaded-chinchilla h2,
#gen-shaded-chinchilla h3,
#gen-shaded-chinchilla .h3,
#gen-shaded-chinchilla .h5,
#gen-shaded-chinchilla .h6 {
  color: var(--on-dark) !important;
}

/* === Shaded/Chinchilla — Accordéon final (tests, origines, mini-FAQ) === */
#gen-shaded-chinchilla #acc-shaded-details .accordion-item{
  border: none;
  background: transparent;
}
#gen-shaded-chinchilla #acc-shaded-details .accordion-button{
  background: var(--block-warm);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  margin: .45rem 0;
  box-shadow: none;
}
#gen-shaded-chinchilla #acc-shaded-details .accordion-button i{
  color: var(--gold-500) !important;         /* icônes or */
}
#gen-shaded-chinchilla #acc-shaded-details .accordion-button::after{
  /* chevron or */
  filter: invert(72%) sepia(28%) saturate(534%) hue-rotate(349deg) brightness(95%) contrast(90%);
}
#gen-shaded-chinchilla #acc-shaded-details .accordion-button:not(.collapsed){
  background: var(--block-dark);
  color: var(--on-dark);
  border-color: rgba(255,255,255,.18);
}
#gen-shaded-chinchilla #acc-shaded-details .accordion-button:focus{
  box-shadow: 0 0 0 .2rem rgba(214,178,94,.25);
}
#gen-shaded-chinchilla #acc-shaded-details .accordion-body{
  background: var(--body-bg);
  color: var(--on-dark);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
}

/* Mini-FAQ : meilleures contrastes des dt/dd */
#gen-shaded-chinchilla #acc-shaded-details dl dt{
  color: var(--gold-500);
  font-weight: 700;
}
#gen-shaded-chinchilla #acc-shaded-details dl dd{
  color: var(--on-dark);
}

/* Note de récap (remplace le vert Bootstrap par notre charte) */
#gen-shaded-chinchilla .alert-success{
  background: var(--block-dark);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-left: 4px solid var(--gold-500);
  border-radius: 12px;
}
#gen-shaded-chinchilla .alert-success i{
  color: var(--gold-500);
}

/* === Rappels pratiques — titre + carte === */
#gen-rappels .icon-box{
  background: rgba(255,255,255,.06);
  color: var(--gold-500);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .6rem;
}
#gen-rappels h2{
  color: var(--on-dark);              /* crème : lisible partout */
  font-weight: 800;
  letter-spacing: .2px;
}
#gen-rappels .gen-card{
  background: rgba(255,255,255,.04);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}
#gen-rappels .gen-card .mini-note{
  color: var(--muted-on-dark) !important;
}

/* Titre Rappels pratiques : en gris foncé pour contraste sur fond crème */
#gen-rappels h2 {
  color: var(--block-dark) !important;  /* gris foncé de la charte */
  font-weight: 800;
  letter-spacing: .2px;
}

/* ===== Contact — Habillage ===== */

/* Titres */
#contact-page h1,
#contact-page h2 {
  font-weight: 700;
  color: var(--on-dark);
}

/* Cartes */
#contact-page .card {
  background: var(--block-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  color: var(--on-dark);
  box-shadow: var(--shadow-soft);
}
#contact-page .card-body {
  padding: 1.5rem;
}

/* Labels */
#contact-page .form-label {
  font-weight: 600;
  color: var(--on-dark);
}

/* Inputs */
#contact-page .form-control {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: var(--on-dark);
}
#contact-page .form-control:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 .25rem rgba(214,178,94,.35);
}

/* Feedback */
#contact-page .invalid-feedback {
  color: #f88 !important;
  font-size: .85rem;
}

/* Checkbox */
#contact-page .form-check-label {
  color: var(--muted-on-dark);
  font-size: .9rem;
}

/* Alertes */
#contact-page .alert-success {
  background: rgba(214,178,94,.12);
  border: 1px solid var(--gold-500);
  color: var(--gold-500);
}
#contact-page .alert-danger {
  background: rgba(255,80,60,.12);
  border: 1px solid rgba(255,80,60,.6);
  color: #f77;
}

/* Coordonnées */
#contact-page address {
  font-style: normal;
  line-height: 1.6;
  color: var(--on-dark);
}
#contact-page address a {
  color: var(--gold-500);
  text-decoration: underline;
}
#contact-page address a:hover {
  color: #fff;
}

/* Google Maps embed */
#contact-page iframe {
  border: none;
  filter: grayscale(20%) contrast(110%);
}

/* CTA bas de page */
#contact-page .conseils-cta .btn {
  border-color: var(--gold-500) !important;
  color: var(--gold-500) !important;
  font-weight: 600;
}
#contact-page .conseils-cta .btn:hover {
  background: var(--gold-500) !important;
  color: #fff !important;
}

/* Titre principal page Contact */
#contact-page h1 {
  color: var(--dark-500) !important; /* gris foncé de la charte */
  font-weight: 700;
}

/* ================================
   PAGE RETRAITÉS — POLISH (charte)
   Scope recommandé : <main class="container py-5 retraites-scope"> …
   ================================ */

/* Titre & intro */
.retraites-scope h1 {
  color: var(--block-dark);              /* gris foncé de la charte */
  font-weight: 800;
  letter-spacing: .2px;
}
.retraites-scope .lead,
.retraites-scope .page-intro { color:#444; }

/* Grille de cartes — base sombre harmonisée */
.ret-card.card {
  background: var(--block-dark);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ret-card .card-img-top {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ret-card .card-body { padding: 1rem 1.1rem 1.1rem; }
.ret-card h2,
.ret-card .h5,
.ret-card .h6 { color: var(--gold-500); font-weight: 700; margin-bottom:.25rem; }
.ret-card .mini-meta,
.ret-card .text-muted { color: var(--muted-on-dark) !important; }

/* Séparateur discret interne */
.ret-card .card-sep {
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: .85rem 0;
}

/* Hover : léger lift + liseré or */
.ret-card:hover {
  transform: translateY(-2px);
  border-color: rgba(214,178,94,.55);  /* or semi-transp */
  box-shadow: var(--shadow-card);
}
.ret-card:hover .card-img-top { filter: saturate(1.03) contrast(1.02); }

/* Badge “Retraité(e)” (coin) */
.ret-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  background: var(--gold-500);
  color: #fff;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Ruban optionnel (si tu préfères un style “ribbon”) */
.ret-ribbon {
  position: absolute; top: .5rem; left: -2.2rem; z-index:2;
  background: var(--gold-500); color:#fff;
  padding: .35rem 2.2rem;
  transform: rotate(-12deg);
  font-size: .78rem; font-weight:800;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}

/* Tags / “qualités” (si utilisés) */
.ret-tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.ret-tag {
  background: rgba(255,255,255,.06);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: .18rem .55rem;
  font-size: .82rem;
}

/* Boutons (cohérents charte) */
.btn-ret {
  border: 2px solid var(--gold-500);
  color: var(--gold-500);
  background: transparent;
  border-radius: 12px;
  font-weight: 700;
  padding: .5rem 1rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-ret:hover {
  background: var(--gold-500);
  color: #fff;
  transform: translateY(-1px);
}
.btn-ret i { color: currentColor; }

/* Liens dans cartes sombres */
.ret-card a:not(.btn) {
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ret-card a:not(.btn):hover { color:#fff; }

/* En-têtes de section internes (filet or sous le titre) */
.ret-section-title {
  color: var(--on-dark);
  font-weight: 800;
  padding-bottom: .45rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat left bottom / 120px 2px;
}

/* Variantes de bloc (chaud vs très sombre) */
.ret-block { background: var(--block-dark); color: var(--on-dark); border-radius: var(--radius); padding:1.25rem; }
.ret-block.alt { background: var(--block-warm); }

/* Accessibilité : focus visibles */
.ret-card a:focus-visible,
.btn-ret:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-color: var(--gold-500);
}

/* Responsive */
@media (max-width: 575.98px){
  .ret-badge { top: .6rem; left: .6rem; font-size: .76rem; }
  .ret-card .card-body { padding: .9rem 1rem; }
}

/* Bloc principal Mentions légales */
.legal-body {
  background: var(--body-bg); /* gris foncé de la charte */
  color: var(--on-dark) !important;         /* texte crème lisible */
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
}

/* Liens à l’intérieur */
.legal-body a {
  color: var(--gold-500) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:hover {
  color: #fff !important;
}

/* Titres à l’intérieur */
.legal-body h2,
.legal-body h3 {
  color: var(--on-dark) !important;
}
.legal-body h2 {
  font-weight: 800;
  margin: .5rem 0 .75rem;
  padding-bottom: .45rem;
  background: linear-gradient(var(--gold-500), var(--gold-500))
              no-repeat left bottom/140px 2px;
}

/* ===== Mentions légales : verrou couleurs (charte only) ===== */

/* Gros bloc texte (droite) */
.legal-body{
  background: var(--body-bg);
  color: var(--on-dark) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 1.75rem 2rem !important;
  /* coupe toute teinte résiduelle potentielle */
  background: var(--body-bg);
}

/* Titres + filet or */
.legal-body h1, .legal-body h2, .legal-body h3{
  color: var(--on-dark) !important;
}
.legal-body h2{
  font-weight: 800;
  padding-bottom: .45rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat left bottom/140px 2px;
}

/* Liens dans le bloc */
.legal-body a{
  color: var(--gold-500) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:hover{ color:#fff !important; }

/* ===== Sommaire (gauche) ===== */
#toc-legales .card{
  background: var(--block-warm) !important;
  color: var(--on-dark) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* En-tête du sommaire */
#toc-legales .card-header{
  background: transparent !important;
  color: var(--on-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* Items */
#toc-legales .list-group-item{
  background: transparent !important;
  color: var(--on-dark) !important;
  border-color: rgba(255,255,255,.08) !important;
}
#toc-legales .list-group-item i{
  color: var(--gold-500) !important; /* icônes or */
}

/* Hover = or doux */
#toc-legales .list-group-item:hover{
  color: var(--gold-500) !important;
  background: rgba(214,178,94,.10) !important; /* voilage or */
}

/* Actif (focus/section vue) – même logique que les autres sommaires */
#toc-legales .list-group-item.active,
#toc-legales .list-group-item:focus,
#toc-legales .list-group-item:active{
  color: var(--on-dark) !important;
  background: var(--block-dark) !important;
  border-left: 3px solid var(--gold-500) !important;
  font-weight: 700 !important;
}

/* Nettoyage agressif d’une teinte résiduelle (si un style global “bg-*” traine) */
#toc-legales .list-group-item[class*="bg-"],
#toc-legales .card[class*="bg-"],
.legal-body[class*="bg-"]{
  background: unset !important;
}
/* Bloc Mentions légales */
.legal-body {
  background: var(--body-bg);
  color: var(--on-dark) !important;
  padding: 2rem;
  border-radius: var(--radius);
}

/* Sommaire */
#toc-legales .card {
  background: var(--block-warm) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
#toc-legales .card-header {
  background: var(--block-dark) !important;
  color: var(--on-dark) !important;
}

/* Liens sommaire */
#toc-legales .list-group-item {
  background: transparent !important;
  color: var(--on-dark) !important;
  border-left: 3px solid transparent !important;
  transition: all .2s ease;
}
#toc-legales .list-group-item i {
  color: var(--muted-on-dark) !important;
}

/* Hover */
#toc-legales .list-group-item:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--gold-500) !important;
}
#toc-legales .list-group-item:hover i {
  color: var(--gold-500) !important;
}

/* Active forcé (ScrollSpy applique .active) */
#toc-legales .list-group-item.active {
  background: rgba(214,178,94,.14) !important; /* reflet or */
  color: var(--gold-500) !important;
  border-left-color: var(--gold-500) !important;
  font-weight: 600 !important;
}
#toc-legales .list-group-item.active i {
  color: var(--gold-500) !important;
}

/* Titres */
.legal-body h1, .legal-body h2, .legal-body h3 {
  color: var(--on-dark) !important;
}

/* ===== Mentions légales — charte ===== */

/* Gros bloc : dark */
.legal-body{
  background: var(--body-bg);
  color: var(--on-dark) !important;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
}

/* Sommaire : warm + header dark */
#toc-legales .card{
  background: var(--block-warm) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--radius);
}
#toc-legales .card-header{
  background: var(--block-dark) !important;
  color: var(--on-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

/* Liens du sommaire (état par défaut) */
#toc-legales .list-group-item{
  background: transparent !important;
  color: var(--on-dark) !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
#toc-legales .list-group-item i{ color: var(--muted-on-dark) !important; }

/* Hover : reflet léger + or */
#toc-legales .list-group-item:hover{
  background: rgba(255,255,255,.06) !important;
  color: var(--gold-500) !important;
}
#toc-legales .list-group-item:hover i{ color: var(--gold-500) !important; }

/* Active (ScrollSpy) : or, pas de vert */
#toc-legales .list-group-item.active{
  background: rgba(214,178,94,.14) !important; /* voile or */
  color: var(--gold-500) !important;
  border-left-color: var(--gold-500) !important;
  font-weight: 700 !important;
}
#toc-legales .list-group-item.active i{ color: var(--gold-500) !important; }

/* Titre h1 en crème + filet or discret */
.doc-head h1{
  color: var(--on-dark) !important;
  padding-bottom:.4rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat left bottom/120px 2px;
}
.updated{ background: rgba(255,255,255,.06); color: var(--muted-on-dark); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.25rem .6rem; }

/* === Mentions légales — Overrides charte (colle en fin de theme.css) === */

/* 1) En-tête de page */
.doc-head h1{
  color: var(--on-dark) !important;              /* crème */
  margin-bottom: .25rem;
}
.doc-head .updated{
  background: rgba(0,0,0,.18);
  color: var(--muted-on-dark);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  padding: .25rem .6rem;
}

/* 2) Gros bloc (colonne contenu) */
.legal-body{
  background: var(--body-bg);      /* gris foncé — FINI le vert */
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.25rem 1.25rem;
}
.legal-body a{ color: var(--gold-500); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover{ color:#fff; }

/* Titres + icônes en or / crème */
.legal-body h2, .legal-body h3, .legal-body .h4, .legal-body .h5{
  color: var(--on-dark) !important;
}
.legal-body h2{
  padding-bottom:.35rem;
  background: linear-gradient(var(--gold-500),var(--gold-500)) no-repeat left bottom / 140px 2px;
}
.legal-body h2 i, .legal-body h3 i, .legal-body .h4 i{
  color: var(--gold-500) !important;
}
/* Désactive le vert des .text-success éventuels dans le contenu */
.legal-body .text-success{ color: var(--gold-500) !important; }

/* 3) Sommaire (carte + liens) */
#toc-legales .card{
  background: var(--block-warm) !important;      /* gris chaud */
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: none;
}
#toc-legales .card-header{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: var(--muted-on-dark);
}

/* Liens : état normal/hover/actif sans vert Bootstrap */
#toc-legales .list-group-item{
  background: transparent !important;
  color: var(--on-dark) !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 10px;
  margin: .1rem .25rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#toc-legales .list-group-item i{
  color: var(--muted-on-dark) !important;
  transition: color .15s ease;
}
#toc-legales .list-group-item:hover{
  background: rgba(255,255,255,.06) !important;
  border-left-color: var(--gold-500) !important;
  color: var(--on-dark) !important;
}
#toc-legales .list-group-item:hover i{ color: var(--gold-500) !important; }

/* Actif ScrollSpy (focus/active) */
#toc-legales .list-group-item.active{
  background: rgba(255,255,255,.04) !important;
  border-left-color: var(--gold-500) !important;
  color: var(--gold-500) !important;
  font-weight: 700;
}
#toc-legales .list-group-item.active i{ color: var(--gold-500) !important; }
#toc-legales .list-group-item:focus-visible{
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Bloc principal Mentions légales */
main.container.py-5.conteneur-dark{
  background: var(--block-dark) !important;  /* gris foncé charte */
  color: var(--on-dark) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem;
}

/* === CGV — Bloc 1 : En-tête + Intro ============================ */
.cgv-scope .doc-head h1{
  color:#2B2E2C;           /* titre très lisible sur fond crème */
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:.25rem;
}
.cgv-scope .doc-head .updated{ color:#6c757d; font-size:.9rem; }

/* Intro = premier <section> du corps CGV */
.cgv-scope .legal-body > section:first-of-type{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:1.25rem 1.25rem 1rem;
  margin-bottom:1rem;
}
.cgv-scope .legal-body > section:first-of-type p{
  color:var(--on-dark);
  line-height:1.8;
  font-size:1.025rem;
  max-width:68ch;
}
.cgv-scope .legal-body > section:first-of-type a{
  color:var(--gold-500);
  text-decoration:underline; text-underline-offset:2px;
}
.cgv-scope .legal-body > section:first-of-type a:hover{ color:#fff; }

/* === CGV — Bloc 2 : Sommaire (TOC) ============================= */
.cgv-scope #toc-cgv .card{
  background:var(--block-warm);
  color:var(--on-dark);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:none;
}
.cgv-scope #toc-cgv .card-header{
  background:transparent;
  color:var(--muted-dark);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.cgv-scope #toc-cgv .list-group-item{
  background:transparent; color:var(--on-dark);
  border:0; border-left:3px solid transparent;
  transition:color .15s,border-color .15s,background-color .15s;
  padding:.6rem .75rem;
}
.cgv-scope #toc-cgv .list-group-item i{ color:var(--muted-dark); }

/* Hover = or */
.cgv-scope #toc-cgv .list-group-item:hover{
  color:var(--gold-500);
  background:rgba(255,255,255,.05);
  border-left-color:var(--gold-500);
}
.cgv-scope #toc-cgv .list-group-item:hover i{ color:var(--gold-500); }

/* Actif (scrollspy) = or + gras */
.cgv-scope #toc-cgv .list-group-item.active{
  color:var(--gold-500)!important; font-weight:700;
  background:rgba(255,255,255,.08);
  border-left-color:var(--gold-500);
}
.cgv-scope #toc-cgv .list-group-item.active i{ color:var(--gold-500)!important; }


/* —— LOCK CHARTE — Mentions légales —— */
.legal-body{
  background:var(--block-dark)!important;
  color:var(--on-dark)!important;
  border-radius:var(--radius);
}
#toc-legales .card{
  background:var(--block-warm)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
#toc-legales .list-group-item{
  background:transparent!important;
  color:var(--on-dark)!important;
  border-left:3px solid transparent!important;
}
#toc-legales .list-group-item:hover{
  color:var(--gold-500)!important;
  background:rgba(214,178,94,.10)!important;
}
#toc-legales .list-group-item.active{
  color:var(--gold-500)!important;
  background:rgba(214,178,94,.14)!important;
  border-left-color:var(--gold-500)!important;
  font-weight:600;
}
/* ===== FAQ / Accordéons — lisibilité sur fond clair (sitewide) ===== */

/* Corps des réponses */
.accordion .accordion-body{
  background: var(--body-bg);   /* crème de la charte (#EFE9DF) */
  color: #222;                  /* texte foncé lisible (hors blocs sombres) */
  line-height: 1.65;
}

/* Titres/gras/éléments forts dans la réponse */
.accordion .accordion-body h1,
.accordion .accordion-body h2,
.accordion .accordion-body h3,
.accordion .accordion-body h4,
.accordion .accordion-body h5,
.accordion .accordion-body h6,
.accordion .accordion-body strong{
  color: var(--block-dark);     /* gris foncé de la charte */
}

/* Texte atténué dans la réponse (plus sombre que le muted Bootstrap) */
.accordion .accordion-body .text-muted,
.accordion .accordion-body small{
  color: #4b4742 !important;    /* lisible sur crème */
}

/* Listes, paragraphes, puces — héritent du #222 ci-dessus */
.accordion .accordion-body p,
.accordion .accordion-body li,
.accordion .accordion-body dd,
.accordion .accordion-body dt{ color:#222; }

/* Liens dans la réponse : or + souligné, hover un peu plus présent */
.accordion .accordion-body a{
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.accordion .accordion-body a:hover{ filter: brightness(1.1); }

/* Icônes éventuelles dans la réponse : or */
.accordion .accordion-body i.bi{ color: var(--gold-500); }

/* Badges éventuels dans la réponse : or en contour (cohérent blocs) */
.accordion .accordion-body .badge{
  background: transparent;
  color: var(--gold-500);
  border: 1.5px solid var(--gold-500);
  border-radius: 999px;
}

/* Séparateur doux en haut du body si besoin */
.accordion .accordion-body{ border-top: 1px solid rgba(0,0,0,.06); }

/* FAQ — texte des réponses lisible (gris foncé sur fond clair) */
.accordion .accordion-body{
  color:#222 !important;   /* gris foncé de base */
}

/* éléments courants dans la réponse */
.accordion .accordion-body p,
.accordion .accordion-body li,
.accordion .accordion-body dt,
.accordion .accordion-body dd,
.accordion .accordion-body span,
.accordion .accordion-body strong,
.accordion .accordion-body small{
  color:#222 !important;
}

/* ===== Page "De la naissance au départ" — FAQ : texte lisible ===== */
#faqBirth .accordion-body{
  background: var(--cream-100);            /* fond clair (déjà présent visuellement) */
  color: var(--dark-800)!important;        /* texte principal en gris foncé de la charte */
  border-top: 1px solid rgba(0,0,0,.06);
}

#faqBirth .accordion-body p,
#faqBirth .accordion-body li,
#faqBirth .accordion-body small,
#faqBirth .accordion-body .text-muted{
  color: var(--dark-800)!important;        /* force le gris foncé sur tout le contenu */
}

#faqBirth .accordion-body strong{
  color: var(--dark-900);                   /* garde le contraste sur les <strong> */
  font-weight: 700;
}

#faqBirth .accordion-body a{
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 2px;
 
}
#faqBirth .accordion-body a:hover{ color:#000; }

/* Entêtes des items (option “polish” homogène avec la charte) */
#faqBirth .accordion-button{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: 12px;
}
#faqBirth .accordion-item{
  background: transparent;
  border: none;
  margin-bottom: .5rem;
}
#faqBirth .accordion-button.collapsed{
  box-shadow: none;
}
#faqBirth .accordion-button::after{
  filter: invert(72%) sepia(28%) saturate(534%) hue-rotate(349deg) brightness(95%) contrast(90%); /* chevron or */
}
/* FAQ - page naissance au départ */
#faqBirth .accordion-body {
  background-color: var(--cream-100) !important;
  color: var(--dark-800) !important;
}

/* Forcer l'affichage correct des réponses FAQ */
#faqBirth .accordion-item .accordion-body {
  background-color: var(--cream-100) !important;
  color: var(--dark-800) !important;
  position: relative;
  z-index: 1;
}

/* FAQ — "Naissance au départ" : réponses lisibles sur fond crème */
#faqBirth .accordion-collapse,
#faqBirth .accordion-collapse .accordion-body {
  background-color: var(--cream-100) !important;  /* fond crème */
}

#faqBirth .accordion-collapse .accordion-body,
#faqBirth .accordion-collapse .accordion-body * {
  color: var(--dark-800) !important;              /* texte gris foncé */
}

/* On garde les entêtes en sombre, même ouverts */
#faqBirth .accordion-button,
#faqBirth .accordion-button:not(.collapsed) {
  background-color: var(--block-dark) !important;
  color: var(--on-dark) !important;
  box-shadow: none !important;
}

/* Petite séparation entre l’entête et la réponse */
#faqBirth .accordion-body { 
  border-top: 1px solid rgba(0,0,0,.08);
}

/* FAQ "Naissance → départ" : réponses lisibles (fond crème + texte dark) */
#faqBirth .accordion-collapse > .accordion-body{
  background-color: var(--on-dark) !important;   /* ta crème */
  color: var(--dark-800) !important;              /* texte gris foncé */
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Tous les descendants héritent de la couleur (même s’il y a des styles globaux) */
#faqBirth .accordion-collapse > .accordion-body :where(p, li, span, em, small, strong, a){
  color: inherit !important;
}

/* Les en-têtes restent en sombre pour le contraste */
#faqBirth .accordion-button,
#faqBirth .accordion-button:not(.collapsed){
  background-color: var(--block-dark) !important;
  color: var(--on-dark) !important;
  box-shadow: none !important;
}

/* === FAQ "Naissance → départ" === */
#faqBirth {
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Chaque item */
#faqBirth .accordion-item {
  border: none;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--block-dark);
}

/* Boutons FAQ */
#faqBirth .accordion-button {
  background-color: var(--block-dark);
  color: var(--on-dark);
  font-weight: 600;
  padding: 1rem 1.25rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#faqBirth .accordion-button:hover {
  background-color: var(--warm-800);
  color: var(--cream-100);
}

#faqBirth .accordion-button:not(.collapsed) {
  background-color: var(--warm-700);
  color: var(--cream-100);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}

/* Corps de réponse */
#faqBirth .accordion-body {
  background-color: var(--cream-100);
  color: var(--dark-800);
  padding: 1rem 1.25rem;
  line-height: 1.6;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* Texte interne */
#faqBirth .accordion-body strong {
  color: var(--warm-900);
  font-weight: 700;
}
#faqBirth .accordion-body a {
  color: var(--gold-500);
  text-decoration: underline;
}
#faqBirth .accordion-body a:hover {
  color: var(--gold-700);
}

/* Icône caret par défaut (chevron) */
#faqBirth .accordion-button::after {
  filter: invert(1) brightness(1.2); /* icône claire */
}
#faqBirth .accordion-button:not(.collapsed)::after {
  filter: invert(1) sepia(1) hue-rotate(20deg) saturate(3); /* accent gold/warm */
}

/* === Page Reproducteurs — Mâles === */

/* Header */
main h1 {
  color: var(--dark-900);
  font-weight: 700;
}
main header p {
  color: var(--dark-700);
  font-size: 1rem;
}

/* Onglets nav-pills */
#studTabs .nav-link {
  border-radius: 2rem;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  color: var(--dark-700);
  background-color: var(--cream-100);
  border: 1px solid var(--dark-200);
  transition: all 0.2s ease;
}
#studTabs .nav-link:hover {
  background-color: var(--warm-100);
  color: var(--dark-900);
  border-color: var(--warm-300);
}
#studTabs .nav-link.active {
  background-color: var(--warm-700);
  color: var(--cream-100);
  border-color: var(--warm-800);
  font-weight: 600;
}

/* Carrousel */
.carousel-inner {
  border-radius: 0.75rem;
  overflow: hidden;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1) drop-shadow(0 0 2px rgba(0,0,0,.6));
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  filter: invert(84%) sepia(52%) saturate(400%) hue-rotate(10deg);
}

/* Thumbnails */
.thumb-switch img {
  transition: transform 0.2s ease, filter 0.2s ease;
}
.thumb-switch:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Cartes fiche */
.card {
  border: 1px solid var(--dark-200);
  border-radius: 0.75rem;
  background-color: var(--cream-100);
}
.card h2 {
  color: var(--dark-900);
  font-weight: 700;
}
.card dl dt {
  font-weight: 600;
  color: var(--dark-800);
}
.card dl dd {
  color: var(--dark-700);
}
.card hr {
  border-color: var(--dark-200);
}
.card h3 {
  color: var(--warm-800);
  font-weight: 600;
}
.card p {
  color: var(--dark-800);
  line-height: 1.55;
}

/* CTA final */
.conseils-cta .btn {
  border-radius: 2rem;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.conseils-cta .btn:hover {
  background-color: var(--warm-700);
  color: var(--cream-100);
  border-color: var(--warm-800);
}

/* --- Polish fiche reproducteurs --- */

/* Séparateur élégant entre infos et "À propos" */
.card dl {
  border-bottom: 2px solid var(--warm-400); /* liseré doré fin */
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

/* Liens onglets (nav-pills) */
#studTabs .nav-link {
  color: var(--dark-800);
  background-color: var(--cream-100);
  border: 1px solid var(--dark-200);
}
#studTabs .nav-link:hover {
  background-color: var(--warm-200);
  border-color: var(--warm-400);
  color: var(--dark-900);
}
#studTabs .nav-link.active {
  background-color: var(--warm-700);
  color: var(--cream-100);
  font-weight: 600;
  border-color: var(--warm-800);
}

/* Cadres images carousel */
.carousel-inner img {
  border: 3px solid var(--dark-200);
  border-radius: 0.5rem;
}

/* Cadres miniatures */
.thumb-switch img {
  border: 2px solid var(--dark-200);
  border-radius: 0.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.thumb-switch:hover img {
  transform: scale(1.05);
  border-color: var(--warm-600);
}

/* ===== Reproducteurs — Mâles : polish avec ta charte ===== */

/* 1) Liseré entre fiche et “À propos” (utilise le <hr> existant) */
#studTabsContent .card .card-body > hr{
  height:2px!important;
  border:0!important;
  background:linear-gradient(to right,var(--gold-500),transparent 65%)!important;
  opacity:1!important;
  margin:.8rem 0 1rem!important;
}

/* 2) Onglets (nav-pills) très lisibles */
#studTabs.nav.nav-pills .nav-link{
  color:var(--block-dark) !important;
  background-color:var(--body-bg) !important;
  border:1px solid var(--block-warm) !important;
  border-radius:999px!important;
}
#studTabs.nav.nav-pills .nav-link:hover{
  border-color:var(--gold-500)!important;
  box-shadow:0 0 0 2px rgba(214,178,94,.25)!important;
  color:var(--block-dark)!important;
}
#studTabs.nav.nav-pills .nav-link.active,
#studTabs.nav.nav-pills .nav-link[aria-selected="true"]{
  background-color:var(--gold-500)!important;
  border-color:var(--gold-500)!important;
  color:var(--block-dark)!important;
  font-weight:700!important;
}

/* 3) Cadres images (carousel + miniatures) */
#male1 .carousel-inner,
#male2 .carousel-inner{
  border:3px solid var(--block-warm)!important;
  border-radius:calc(var(--radius) - 2px)!important;
  box-shadow:var(--shadow-soft)!important;
}
#male1 .carousel-inner img,
#male2 .carousel-inner img{
  border-radius:calc(var(--radius) - 6px)!important;
}

.thumb-switch img{
  border:2px solid var(--block-warm)!important;
  border-radius:calc(var(--radius) - 6px)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
.thumb-switch:hover img,
.thumb-switch:focus img{
  transform:scale(1.05);
  border-color:var(--gold-500)!important;
  box-shadow:0 0 0 2px rgba(214,178,94,.25)!important;
}
.thumb-switch.active img{
  border-color:var(--gold-500)!important;
  box-shadow:0 0 0 2px rgba(214,178,94,.35)!important;
}

/* 4) Lisibilité fiche (titres + dl) */
#studTabsContent .card h2.h4{ color:var(--on-dark)!important; }
#studTabsContent .card dl dt{ color:var(--muted-on-dark)!important; font-weight:600; }
#studTabsContent .card dl dd{ color:var(--on-dark)!important; }

/* ————— Remerciements (scopé) ————— */
.thanks-scope header h1 { color: var(--block-dark); }
.thanks-scope header p   { color: #6d6a64; } /* dérivé du crème, reste dans l'esprit */

/* Cartes et blocs */
.thanks-scope .border.rounded-3,
.thanks-scope .card,
.thanks-scope .p-3.border.rounded,
.thanks-scope .p-4.border.rounded-3 {
  background: var(--block-dark);
  color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* Variante “tuile” plus chaude pour les sous-cartes 2 colonnes */
.thanks-scope .row .p-3.border.rounded {
  background: var(--block-warm);
}

/* Titres & icônes dans les blocs */
.thanks-scope h2,
.thanks-scope h3,
.thanks-scope .h5,
.thanks-scope .h6 { color: var(--on-dark); }

.thanks-scope i.bi { color: var(--gold-500); }

/* Traits d’accent sous les H2/H3 */
.thanks-scope h2::after,
.thanks-scope h3::after {
  content:"";
  display:block;
  width: 120px;
  height: 2px;
  margin-top:.35rem;
  background: linear-gradient(90deg,var(--gold-500),transparent);
  border-radius: 2px;
  opacity:.9;
}

/* Listes plus lisibles sur sombre */
.thanks-scope ul { margin-left: .9rem; }
.thanks-scope li { color: var(--on-dark); }
.thanks-scope li + li { margin-top:.35rem; }

/* Petits textes atténués sur sombre */
.thanks-scope .text-muted,
.thanks-scope .small { color: var(--muted-on-dark) !important; }

/* Neutraliser les couleurs Bootstrap pour rester dans la charte */
.thanks-scope .text-danger,
.thanks-scope .text-primary { color: var(--gold-500) !important; }

/* Bouton CTA (on remappe .btn-primary -> or) */
.thanks-scope .btn.btn-primary {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--block-dark);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.thanks-scope .btn.btn-primary:hover {
  filter: brightness(.95);
}

/* Petites respirations et alignements */
.thanks-scope .d-flex.gap-3 { gap: 1rem !important; }
.thanks-scope .row.g-3 > [class^="col"] { display:flex; }
.thanks-scope .row.g-3 > [class^="col"] > * { width:100%; }

/* Effet hover doux sur les sous-cartes partenaires */
.thanks-scope .row .p-3.border.rounded:hover {
  border-color: rgba(255,255,255,.14);
  transform: translateY(-2px);
  transition: border-color .2s ease, transform .2s ease;
}

/* Header des remerciements */
.thanks-scope header p {
  color: var(--block-warm) !important; /* texte lisible et doux */
  font-size: 1.05rem;
}

/* ---------- TOC (sommaires) — style unifié ---------- */

/* Conteneur */
.toc {
  background: linear-gradient(180deg, var(--block-dark), var(--block-warm));
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
  position: sticky;
  top: 90px; /* ajuste si besoin */
  z-index: 1;
}

/* Titre */
.toc .toc-title {
  color: var(--on-dark);
  font-weight: 800;
  margin: 0 0 .35rem 0;
  line-height: 1.2;
  letter-spacing: .2px;
}
.toc .toc-title::after{
  content:"";
  display:block;
  width:120px;
  height:4px;
  margin-top:.35rem;
  border-radius:999px;
  background: var(--gold-500);
}

/* Liste (compatible Bootstrap .list-group ou .nav.flex-column) */
.toc .toc-list {
  margin: 8px 0 0 0;
  padding: 0;
}

/* Items */
.toc .toc-item,
.toc .toc-list .list-group-item,
.toc .toc-list .nav-link {
  display:block;
  color: var(--muted-on-dark);
  background: transparent !important;
  border: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid transparent;
  border-radius: 8px;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
  text-decoration: none;
}

/* Dernier item sans séparateur (si souhaité) */
.toc .toc-item:last-child,
.toc .toc-list .list-group-item:last-child,
.toc .toc-list .nav-link:last-child {
  border-bottom-color: transparent;
}

/* Hover */
.toc .toc-item:hover,
.toc .toc-list .list-group-item:hover,
.toc .toc-list .nav-link:hover {
  color: var(--on-dark);
  background: rgba(255,255,255,.05) !important;
}

/* Actif (Bootstrap .active ou .is-active) */
.toc .toc-item.active,
.toc .toc-item.is-active,
.toc .toc-list .list-group-item.active,
.toc .toc-list .nav-link.active {
  color: var(--gold-500) !important;
  font-weight: 700;
  border-left-color: var(--gold-500);
  background: rgba(255,255,255,.06) !important;
}

/* Icônes (optionnel) */
.toc i { color: var(--muted-on-dark); }
.toc .toc-item.active i,
.toc .toc-item:hover i,
.toc .nav-link.active i,
.toc .nav-link:hover i { color: var(--gold-500); }

/* Sous-niveaux (indentés) */
.toc .is-sub { padding-left: 28px; font-size: .95rem; opacity: .95; }

/* CGV — Sommaire (toc-adoption) : lisible, sans soulignement */
#toc-adoption .nav-link{
  color: var(--muted-on-dark);         /* lisible par défaut */
  text-decoration: none !important;    /* jamais souligné */
  padding: .55rem .75rem;
  border-radius: 10px;
  display: block;
}

#toc-adoption .nav-link:hover{
  color: var(--on-dark);               /* crème au survol */
  background: color-mix(in srgb, var(--on-dark) 6%, transparent);
}

#toc-adoption .nav-link:focus,
#toc-adoption .nav-link:active{
  color: var(--on-dark);               /* crème au focus/active */
  text-decoration: none !important;
  outline: none; box-shadow: none;
}

#toc-adoption .nav-link.active{
  color: var(--on-dark);               /* plus contrasté que l’inactif */
  background: color-mix(in srgb, var(--block-warm) 88%, black);
  font-weight: 600;
}

/* Option : petit filet or à gauche sur l’item actif (comme le modèle) */
#toc-adoption .nav-link.active{
  position: relative;
}
#toc-adoption .nav-link.active::before{
  content:"";
  position:absolute; inset: 8px auto 8px -12px;
  width: 3px; border-radius: 2px;
  background: var(--gold-500);
}

/* Filet or sous le titre Sommaire */
#toc-standard h2 {
  position: relative;
  display: inline-block;  /* limite le filet à la largeur du texte */
  padding-bottom: 0.35rem; /* espace entre texte et filet */
  margin-bottom: 1rem;
}

#toc-standard h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;           /* correspond exactement à la largeur du texte */
  background: var(--gold-500);
  border-radius: 2px;
}

/* --- Chatons : affichage 3/4 (600x800), 4 par ligne, centrage de la 2e ligne --- */

/* Images portrait : on garantit le ratio 3/4, sans déformer */
.kitten-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;          /* moderne, gère le cadre sans CSS compliqué */
  object-fit: cover;             /* recadre proprement si besoin */
  display: block;
}

/* À partir de lg (≥992px) : forcer 4 colonnes sans changer les classes HTML.
   On "réinterprète" col-lg-2 en 25% pour cette grille précise. */
@media (min-width: 992px) {
  /* Limiter la portée au bloc qui contient ces cartes (la section avec .row.g-3) */
  .row.g-3 > .col-12.col-sm-6.col-md-4.col-lg-2 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }

  /* Centrer la 2e ligne quand il n’y a que 2 cartes (items 5 et 6)
     -> On met une marge à gauche de 25% au 5e item pour obtenir
        25% (vide) + 50% (2 cartes) + 25% (vide) = centré */
  .row.g-3 > .col-12.col-sm-6.col-md-4.col-lg-2:nth-child(5) {
    margin-left: 25%;
  }
}

/* Optionnel : harmoniser la hauteur des cartes si contenu variable */
.kitten-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.kitten-body {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.kitten-actions {
  margin-top: .5rem;
}

/* ===========================
   Bloc mariage (responsive)
   =========================== */
.mariage{
  background: var(--block-dark);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1rem 1.25rem;
}

/* Groupe des deux vignettes parents */
.mariage .parent-thumb{
  /* carrés fluides : mini sur mobile, plus grands ensuite */
  width: clamp(96px, 28vw, 160px);
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  /* petit liseré or discret pour matcher la charte */
  box-shadow: 0 0 0 2px var(--gold-500) inset;
}

.mariage .parent-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Colonne de droite (infos) */
.mariage .mariage-info{
  line-height: 1.5;
}

.mariage .mariage-info p{
  margin-bottom: .5rem;     /* resserre un peu */
}

.mariage .mariage-info .k{
  font-weight: 600;
  color: var(--on-dark);
  white-space: nowrap;       /* label compact */
}

/* Note CGV sous le bloc */
.mariage .cgv-note{
  background: var(--block-warm);
  color: var(--on-dark);
  border-radius: calc(var(--radius) - 6px);
  padding: .75rem .9rem;
  box-shadow: var(--shadow-soft);
}

/* --- Correctif responsive bloc mariage --- */
.mariage .d-flex {
  flex-wrap: wrap; /* permet aux images de passer à la ligne sur mobile */
  justify-content: center; /* centre proprement les images sur petits écrans */
}

.mariage .parent-thumb {
  flex: 1 1 45%; /* deux images côte à côte, ou 100% sur mobile */
  display: flex;
  justify-content: center;
}

.mariage .parent-thumb img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* petit ajustement sur mobile */
@media (max-width: 576px) {
  .mariage .parent-thumb {
    flex: 1 1 100%;
    margin-bottom: .5rem;
  }
}

/* ===== Bloc "mariage" : vignettes carrées, côte à côte, sans étirement ===== */

.mariage .d-flex {
  gap: 12px;                 /* espace entre les 2 vignettes */
  justify-content: center;   /* centrage propre */
  flex-wrap: wrap;           /* permet le calcul des largeurs */
}

.mariage .parent-thumb {
  position: relative;
  overflow: hidden;          /* rien ne dépasse */
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  flex: 0 0 auto;            /* pas d’étirement par flex */
  width: calc(50% - 6px);    /* 2 colonnes sur mobile */
  aspect-ratio: 1 / 1;       /* carré responsive */
}

.mariage .parent-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* recadrage propre, pas de déformation */
}

/* ≥ LG (bootstrap 992px) : carrés fixes 200×200 */
@media (min-width: 992px) {
  .mariage .parent-thumb {
    width: 200px;
    height: 200px;           /* remplace l’aspect-ratio sur grand écran */
  }
}


/* ===== Bloc "mariage" : 2 vignettes côte à côte, partout ===== */

.mariage .d-flex{
  display: grid;                               /* grille au lieu de flex */
  grid-template-columns: repeat(2, minmax(120px, 1fr)); /* 2 colonnes sur mobile */
  gap: 12px;
  justify-content: center;
  align-items: start;
}

.mariage .parent-thumb{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  width: 100%;                 /* chaque cellule = 100% de sa colonne */
  aspect-ratio: 1 / 1;         /* carré responsive */
}

.mariage .parent-thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* pas d’étirement, recadrage propre */
}

/* ≥992px : carrés fixes 200x200, centrés */
@media (min-width: 992px){
  .mariage .d-flex{
    grid-template-columns: none;
    grid-auto-flow: column;    /* place les 2 vignettes en ligne */
    justify-content: center;
    gap: 16px;
  }
  .mariage .parent-thumb{
    width: 200px;
    height: 200px;
  }
}

/* Habillage de l’intro SEO pour matcher les panneaux */
.seo-intro{
  background: var(--panel-bg, #2f3133);
  color: var(--panel-fg, #fff);
  border: 1px solid rgba(255, 211, 77, .25);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-soft, 0 6px 16px rgba(0,0,0,.15));
  padding: 1rem 1.25rem;
}

.seo-intro h2,
.seo-intro .h5{
  color: var(--panel-title, #fff);
  margin-bottom: .5rem;
}

.seo-intro p{
  color: var(--panel-muted, #e7e7e7);
  margin-bottom: .75rem;
}

/* Petite séparation verticale entre les 2 colonnes à partir du lg */
@media (min-width: 992px){
  .seo-intro .row > .col-lg-6 + .col-lg-6{
    border-left: 1px dashed rgba(255,211,77,.35);
    padding-left: 1rem;
  }
}

/* ===== Bloc Intro SEO – version élégante et lisible ===== */
.seo-intro {
  background: var(--block-dark, #2b2e2c);
  color: var(--on-dark, #f4f1ec);
  border: 1px solid rgba(214, 178, 94, 0.35);
  border-radius: var(--radius, 16px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  padding: 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Ligne dorée subtile en haut (effet premium discret) */
.seo-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, rgba(214, 178, 94, 0.9), transparent);
  border-top-left-radius: var(--radius, 16px);
  border-top-right-radius: var(--radius, 16px);
}

/* Titres */
.seo-intro h2,
.seo-intro .h3 {
  color: var(--gold, #d6b25e);
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.seo-intro .h5 {
  color: var(--gold, #d6b25e);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* Paragraphes */
.seo-intro p {
  color: var(--muted-on-dark, #c8c3bc);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Colonnes équilibrées */
.seo-intro .row {
  margin-top: 1rem;
  gap: 1rem;
}

@media (min-width: 992px) {
  .seo-intro .row > .col-lg-6 + .col-lg-6 {
    border-left: 1px dashed rgba(214, 178, 94, 0.25);
    padding-left: 1.5rem;
  }
}

/* Animation douce à l’apparition (bonus esthétique) */
@media (prefers-reduced-motion: no-preference) {
  .seo-intro {
    animation: fadeInUp 0.8s ease-out;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Ligne dorée animée (reflet métal discret) ===== */

/* Remplace la version statique :before par celle-ci */
.seo-intro::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  /* dégradé doré avec zones plus lumineuses */
  background: linear-gradient(
    90deg,
    rgba(214,178,94,0) 0%,
    rgba(214,178,94,0.85) 15%,
    rgba(214,178,94,0.35) 50%,
    rgba(214,178,94,0.85) 85%,
    rgba(214,178,94,0) 100%
  );
  background-size: 200% 100%;   /* permet le balayage */
  border-top-left-radius: var(--radius,16px);
  border-top-right-radius: var(--radius,16px);
  animation: goldSweep 8s ease-in-out infinite;
}

/* léger halo sous la ligne (très discret) */
.seo-intro::after{
  content:"";
  position:absolute;
  top:-8px; left:8px; right:8px;
  height:14px;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(214,178,94,0.18),
    transparent 65%
  );
  filter: blur(6px);
  pointer-events:none;
}

/* Animation du balayage doré */
@keyframes goldSweep{
  0%   { background-position: 0% 0;   }
  50%  { background-position: 100% 0; }
  100% { background-position: 0% 0;   }
}

/* Respect de l’accessibilité : pas d’animation si l’utilisateur la réduit */
@media (prefers-reduced-motion: reduce){
  .seo-intro::before{ animation: none; }
}