/* ================================================================
   AACC — Feuille de styles principale
   Charte logo (par ordre de présence) :
     #8abc27  vert    → hero, boutons, accents, CTA nav
     #071166  bleu    → nav (fond sobre), stats-bar, textes, titres, footer
     #ffab01  jaune   → highlights dans le hero, prix
   Nav : blanc + bordure douce → look professionnel et sobre
   ================================================================ */

/* --- Variables & reset ---------------------------------------- */
:root {
    /* === Couleurs logo (proportions respectées) === */
    --vert        : #8abc27;   /* majoritaire */
    --vert-dark   : #6b9d1e;
    --vert-medium : #a8d445;
    --vert-light  : #eef8d0;
    --bleu        : #071166;   /* moyen */
    --bleu-medium : #0d1f99;
    --bleu-light  : #f0f1fb;
    --jaune       : #ffab01;   /* accent */
    --jaune-dark  : #e09600;
    --jaune-light : #fff8e1;
    /* === Neutres === */
    --texte       : #1c1c2e;
    --texte-light : #5e6680;
    --fond        : #f7f9f4;   /* très légèrement verdâtre */
    --blanc       : #ffffff;
    --border      : #dde8c4;   /* bordure teintée vert */
    --shadow-sm   : 0 1px 4px rgba(7,17,102,.06);
    --shadow-md   : 0 4px 18px rgba(7,17,102,.09);
    --shadow-lg   : 0 8px 32px rgba(7,17,102,.13);
    --radius-sm   : 8px;
    --radius-md   : 14px;
    --font        : system-ui, -apple-system, 'Segoe UI', sans-serif;
    --transition  : 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family : var(--font);
    color       : var(--texte);
    background  : var(--fond);
    line-height : 1.65;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--vert-dark); }

/* ================================================================
   HEADER / NAV
   ================================================================ */
.site-header {
    background    : var(--blanc);
    position      : sticky;
    top           : 0;
    z-index       : 200;
    border-bottom : 2px solid var(--border);
    box-shadow    : 0 2px 12px rgba(7,17,102,.07);
}

.nav-inner {
    max-width       : 1180px;
    margin          : 0 auto;
    padding         : 0 1.5rem;
    height          : 68px;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 1.5rem;
}

/* ---- Bouton hamburger (visible mobile uniquement) ---- */
.nav-toggle {
    display         : none;     /* masqué sur desktop */
    align-items     : center;
    justify-content : center;
    width           : 42px;
    height          : 42px;
    border          : none;
    background      : transparent;
    cursor          : pointer;
    color           : var(--bleu);
    border-radius   : var(--radius-sm);
    transition      : background var(--transition);
    position        : relative;
    z-index         : 1000;
    flex-shrink     : 0;
}
.nav-toggle:hover { background: var(--bleu-light); }
.nav-toggle[aria-expanded="true"] { color: var(--blanc); background: transparent; }
/* Icône hamburger — 3 barres en CSS pur */
.nav-toggle-bar {
    display       : block;
    width         : 22px;
    height        : 2px;
    background    : currentColor;
    border-radius : 2px;
    position      : absolute;
    transition    : transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle-bar:nth-child(1) { top: 13px; }
.nav-toggle-bar:nth-child(2) { top: 20px; }
.nav-toggle-bar:nth-child(3) { top: 27px; }
/* État ouvert → croix */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top:20px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top:20px; transform: rotate(-45deg); }
/* Bouton fermeture dans le menu ouvert */
.nav-close {
    display    : none;      /* masqué par défaut — visible uniquement dans le menu mobile ouvert */
    position   : absolute;
    top        : 1.2rem;
    right      : 1.5rem;
    background : rgba(255,255,255,.12);
    border     : none;
    color      : #fff;
    font-size  : 1.4rem;
    width      : 40px;
    height     : 40px;
    border-radius: 50%;
    cursor     : pointer;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.nav-links.nav-open .nav-close { display: flex; }

.nav-logo {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    color       : var(--bleu) !important;
    font-weight : 800;
    font-size   : 1.2rem;
    flex-shrink : 0;
}
.nav-logo img {
    height : 51px;
    width  : auto;
}

.logo-badge {
    background    : var(--vert);
    color         : var(--blanc);
    font-size     : .65rem;
    font-weight   : 700;
    padding       : .15rem .45rem;
    border-radius : 4px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nav-links {
    list-style  : none;
    display     : flex;
    align-items : center;
    gap         : .2rem;
}

.nav-links a {
    color         : var(--bleu);
    font-size     : .9rem;
    font-weight   : 600;
    padding       : .45rem .85rem;
    border-radius : var(--radius-sm);
    transition    : var(--transition);
}
.nav-links a:hover { background: var(--vert-light); color: var(--vert-dark); }

/* ---- Sous-barre header ---- */
.header-subbar {
    background    : var(--bleu);
    border-bottom : 1px solid rgba(255,255,255,.08);
}

.subbar-inner {
    max-width       : 1180px;
    margin          : 0 auto;
    padding         : .38rem 1.5rem;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 1.25rem;
}

.subbar-assoc {
    font-size   : .78rem;
    color       : rgba(255,255,255,.60);
    font-weight : 500;
    letter-spacing: .02em;
    margin-right: auto;
}

.subbar-phone {
    display     : flex;
    align-items : center;
    gap         : .4rem;
    color       : rgba(255,255,255,.90);
    font-size   : .85rem;
    font-weight : 600;
    transition  : color var(--transition);
}
.subbar-phone:hover { color: var(--blanc); }

/* Bouton Panier */
.subbar-cart {
    display       : flex;
    align-items   : center;
    gap           : .35rem;
    color         : rgba(255,255,255,.65);
    font-size     : .82rem;
    font-weight   : 600;
    padding       : .28rem .75rem;
    border-radius : var(--radius-sm);
    border        : 1px solid rgba(255,255,255,.20);
    transition    : color var(--transition), border-color var(--transition), background var(--transition);
    white-space   : nowrap;
}
.subbar-cart:hover {
    color        : var(--blanc);
    border-color : rgba(255,255,255,.50);
    background   : rgba(255,255,255,.08);
}
/* Panier actif (contient un article) */
.subbar-cart--active {
    color        : var(--blanc);
    border-color : var(--jaune);
    background   : rgba(255,171,1,.12);
}
.subbar-cart--active:hover {
    background : rgba(255,171,1,.22);
}

/* Badge compteur */
.cart-badge {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 17px;
    height          : 17px;
    border-radius   : 50%;
    font-size       : .65rem;
    font-weight     : 800;
    line-height     : 1;
    background      : rgba(255,255,255,.18);
    color           : rgba(255,255,255,.70);
    transition      : background var(--transition), color var(--transition);
}
.subbar-cart--active .cart-badge {
    background : var(--jaune);
    color      : var(--bleu);
}

.subbar-cta {
    background    : var(--jaune);
    color         : var(--bleu);
    font-size     : .82rem;
    font-weight   : 700;
    padding       : .32rem 1rem;
    border-radius : var(--radius-sm);
    transition    : background var(--transition), color var(--transition);
    white-space   : nowrap;
}
.subbar-cta:hover { background: var(--jaune-dark); color: var(--blanc); }

/* Icônes réseaux sociaux dans la subbar */
.subbar-social {
    display    : flex;
    align-items: center;
    gap        : .5rem;
}
.subbar-social-link {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 26px;
    height         : 26px;
    border-radius  : 50%;
    color          : #ffffff;
    opacity        : .65;
    transition     : opacity var(--transition), background var(--transition);
}
.subbar-social-link:hover {
    opacity    : 1;
    background : rgba(255,255,255,.12);
}

/* ---- Dropdown nav ---- */
.nav-has-dropdown {
    position : relative;
}
.nav-chevron {
    font-size   : .65rem;
    margin-left : .2rem;
    display     : inline-block;
    transition  : transform var(--transition);
}
.nav-has-dropdown:hover .nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
    position   : absolute;
    top        : calc(100% + 6px);
    left       : 50%;
    transform  : translateX(-50%) translateY(-6px);
    background : var(--blanc);
    border     : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    box-shadow : var(--shadow-md);
    min-width  : 220px;
    list-style : none;
    padding    : .4rem;
    opacity    : 0;
    visibility : hidden;
    transition : opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index    : 400;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
    opacity    : 1;
    visibility : visible;
    transform  : translateX(-50%) translateY(0);
}
.nav-dropdown li a {
    display       : block;
    padding       : .55rem 1rem;
    font-size     : .85rem;
    font-weight   : 500;
    color         : var(--texte);
    border-radius : var(--radius-sm);
    transition    : background var(--transition), color var(--transition);
}
.nav-dropdown li a:hover {
    background : var(--vert-light);
    color      : var(--vert-dark);
}
/* Petite flèche décorative */
.nav-dropdown::before {
    content       : '';
    position      : absolute;
    top           : -7px;
    left          : 50%;
    transform     : translateX(-50%);
    border-left   : 7px solid transparent;
    border-right  : 7px solid transparent;
    border-bottom : 7px solid var(--border);
}
.nav-dropdown::after {
    content       : '';
    position      : absolute;
    top           : -5px;
    left          : 50%;
    transform     : translateX(-50%);
    border-left   : 6px solid transparent;
    border-right  : 6px solid transparent;
    border-bottom : 6px solid var(--blanc);
}

/* ================================================================
   PAGE HERO (pages intérieures)
   ================================================================ */
.page-hero {
    background : linear-gradient(135deg, var(--bleu) 0%, #0d1f99 100%);
    padding    : 3.5rem 1.5rem 4rem;
    position   : relative;
    z-index    : 10;
}
.page-hero--vert {
    background : linear-gradient(135deg, #5a9010 0%, var(--vert) 100%);
}
.page-hero--blog {
    background    : var(--bleu) url('/projets/aacc/public/img/blog-hero.jpg') center/cover no-repeat;
    position      : relative;
}
.page-hero--blog::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : linear-gradient(135deg, rgba(7,17,102,.78) 0%, rgba(7,17,102,.55) 100%);
    pointer-events: none;
}
.page-hero--blog .page-hero-inner {
    position : relative;
    z-index  : 1;
}
.page-hero-inner {
    max-width : 800px;
    margin    : 0 auto;
}
.breadcrumb {
    display     : flex;
    align-items : center;
    gap         : .4rem;
    font-size   : .78rem;
    color       : rgba(255,255,255,.55);
    margin-bottom : 1.25rem;
}
.breadcrumb a { color: rgba(255,255,255,.70); }
.breadcrumb a:hover { color: var(--blanc); }

.page-hero h1 {
    font-size     : clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight   : 800;
    color         : var(--blanc);
    line-height   : 1.2;
    margin-bottom : .75rem;
    letter-spacing: -.02em;
}
.page-hero p {
    font-size  : 1rem;
    color      : rgba(255,255,255,.82);
    max-width  : 600px;
    line-height: 1.65;
    margin-bottom: 2rem;
}
.page-hero-ctas {
    display    : flex;
    gap        : .75rem;
    flex-wrap  : wrap;
    align-items: center;
}
.btn-hero-outline {
    color         : rgba(255,255,255,.90);
    font-size     : .9rem;
    font-weight   : 600;
    text-decoration: none;
    border        : 1.5px solid rgba(255,255,255,.35);
    padding       : .5rem 1.1rem;
    border-radius : var(--radius-sm);
    transition    : border-color var(--transition), color var(--transition);
}
.btn-hero-outline:hover { border-color: var(--blanc); color: var(--blanc); }

/* ---- Chiffres clés ---- */
.chiffres-grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 1.25rem;
    margin-top            : 2.5rem;
}
.chiffre-card {
    background    : var(--fond);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 1.75rem 1.25rem;
    text-align    : center;
}
.chiffre-val {
    font-size   : 2.2rem;
    font-weight : 900;
    color       : var(--bleu);
    line-height : 1;
    margin-bottom: .4rem;
}
.chiffre-val span {
    font-size  : 1.1rem;
    font-weight: 700;
    color      : var(--vert);
    margin-left: .1rem;
}
.chiffre-lbl {
    font-size  : .78rem;
    color      : var(--texte-light);
    font-weight: 500;
}

/* ---- Zones tarifaires ---- */
.tarif-zones {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 1.25rem;
    margin-top            : 2.5rem;
}
.tarif-zone-card {
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 2rem 1.5rem;
    position      : relative;
    transition    : box-shadow var(--transition), border-color var(--transition);
}
.tarif-zone-card:hover { box-shadow: var(--shadow-md); border-color: var(--vert); }

.tarif-zone-featured {
    border-color : var(--vert);
    box-shadow   : var(--shadow-md);
}
.tarif-zone-badge {
    position      : absolute;
    top           : -12px;
    left          : 50%;
    transform     : translateX(-50%);
    background    : var(--vert);
    color         : var(--blanc);
    font-size     : .7rem;
    font-weight   : 700;
    padding       : .2rem .8rem;
    border-radius : 99px;
    white-space   : nowrap;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.tarif-zone-label {
    font-size   : .8rem;
    font-weight : 700;
    color       : var(--texte-light);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .6rem;
}
.tarif-zone-prix {
    font-size   : 2rem;
    font-weight : 900;
    color       : var(--bleu);
    line-height : 1;
    margin-bottom: .75rem;
}
.tarif-zone-prix span { font-size: 1.2rem; color: var(--vert); }
.tarif-zone-card p   { font-size: .875rem; color: var(--texte-light); margin-bottom: 1.25rem; }

/* ---- Inclus / Non inclus ---- */
.inclus-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 2rem;
    margin-top            : 2.5rem;
}
.inclus-col { }
.inclus-col h3 { font-size: 1rem; font-weight: 700; color: var(--bleu); margin-bottom: 1.1rem; }
.inclus-col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.inclus-col ul li {
    font-size  : .9rem;
    color      : var(--texte);
    padding-left: 1.25rem;
    position   : relative;
    line-height: 1.5;
}
.inclus-oui ul li::before { content: '✓'; position: absolute; left: 0; color: var(--vert); font-weight: 700; }
.inclus-non ul li::before { content: '○'; position: absolute; left: 0; color: var(--texte-light); }
.inclus-note {
    margin-top    : 1.5rem;
    background    : var(--bleu-light);
    border-left   : 3px solid var(--bleu);
    border-radius : 0 var(--radius-sm) var(--radius-sm) 0;
    padding       : .85rem 1rem;
    font-size     : .83rem;
    color         : var(--bleu);
    line-height   : 1.6;
}
.inclus-note a { color: var(--vert-dark); font-weight: 700; }

/* ---- Conseils préparation ---- */
.conseils-list {
    display       : flex;
    flex-direction: column;
    gap           : 1.25rem;
    margin-top    : 2.5rem;
}
.conseil-item {
    display       : flex;
    gap           : 1.5rem;
    align-items   : flex-start;
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 1.5rem;
    transition    : box-shadow var(--transition);
}
.conseil-item:hover { box-shadow: var(--shadow-md); }
.conseil-num {
    flex-shrink   : 0;
    width         : 40px;
    height        : 40px;
    background    : var(--bleu);
    color         : var(--blanc);
    border-radius : 50%;
    display       : flex;
    align-items   : center;
    justify-content: center;
    font-size     : 1rem;
    font-weight   : 800;
}
.conseil-body h3 { font-size: .95rem; font-weight: 700; color: var(--bleu); margin-bottom: .35rem; }
.conseil-body p  { font-size: .875rem; color: var(--texte-light); line-height: 1.65; }

/* ---- Grille régions / département ---- */
.regions-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(300px, 1fr));
    gap                   : 1.5rem;
    margin-top            : 2.5rem;
}

.region-card {
    background    : var(--blanc);
    border-radius : var(--radius-md);
    overflow      : hidden;
    box-shadow    : var(--shadow-sm);
    border        : 1.5px solid var(--border);
    transition    : box-shadow var(--transition), transform var(--transition);
}
.region-card:hover {
    box-shadow : var(--shadow-lg);
    transform  : translateY(-3px);
}

.region-card-header {
    background    : var(--rc, var(--bleu));
    padding       : 1rem 1.25rem;
    display       : flex;
    align-items   : center;
    gap           : .85rem;
}
.region-emoji {
    font-size   : 1.8rem;
    line-height : 1;
    flex-shrink : 0;
}
.region-name {
    font-size   : .95rem;
    font-weight : 800;
    color       : var(--blanc);
    line-height : 1.2;
}
.region-count {
    font-size  : .72rem;
    color      : rgba(255,255,255,.70);
    margin-top : .15rem;
    font-weight: 500;
}

.dept-tags {
    display   : flex;
    flex-wrap : wrap;
    gap       : .4rem;
    padding   : 1rem 1.25rem 1.25rem;
}
.dept-tag {
    display       : inline-block;
    background    : var(--fond);
    color         : var(--texte);
    font-size     : .72rem;
    font-weight   : 600;
    padding       : .3rem .7rem;
    border-radius : 6px;
    border        : 1px solid var(--border);
    transition    : background var(--transition), color var(--transition), border-color var(--transition);
    white-space   : nowrap;
}
.dept-tag:hover {
    background   : var(--vert);
    color        : var(--blanc);
    border-color : var(--vert);
}

/* ---- Alerte urgente (ex : 48SI restitution 10 jours) ---- */
.alerte-urgente {
    background    : #fff8e1;
    border        : 1.5px solid var(--jaune-dark);
    border-left   : 4px solid var(--jaune-dark);
    border-radius : var(--radius-sm);
    padding       : 1rem 1.25rem;
    font-size     : .9rem;
    color         : #5c4300;
    line-height   : 1.65;
    margin-bottom : 0;
}
.alerte-urgente strong { color: #7a5a00; }

/* ================================================================
   HERO
   ================================================================ */
.hero {
    background     : linear-gradient(145deg, rgba(90,144,16,.55) 0%, rgba(138,188,39,.48) 45%, rgba(168,212,69,.42) 100%),
                     url('../img/slide-route.jpg') center / cover no-repeat;
    padding        : 0 1.5rem;
    position       : relative;
    display        : flex;
    flex-direction : column;
    min-height     : 72vh;
}

.hero::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-inner {
    flex        : 1;                /* prend tout l'espace disponible au-dessus de la stats-bar */
    display     : flex;
    flex-direction : column;
    justify-content : center;      /* centrage vertical */
    align-items : center;
    max-width   : 800px;
    width       : 100%;
    margin      : 0 auto;
    text-align  : center;
    position    : relative;
    z-index     : 10;
    padding     : 3rem 0 2.5rem;
}

.hero-badge {
    display       : inline-flex;
    align-items   : center;
    gap           : .45rem;
    background    : rgba(0,0,0,.28);
    border        : 1px solid rgba(255,255,255,.35);
    color         : var(--blanc);
    font-size     : .78rem;
    font-weight   : 700;
    padding       : .3rem .9rem;
    border-radius : 99px;
    margin-bottom : 1.5rem;
    backdrop-filter: blur(6px);
    text-shadow   : 0 1px 4px rgba(0,0,0,.40);
}

.hero-badge .dot {
    width : 7px; height: 7px;
    background    : var(--jaune);
    border-radius : 50%;
    animation     : pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity:.6; transform: scale(1.35); }
}

.hero h1 {
    font-size     : clamp(1.9rem, 5vw, 3rem);
    font-weight   : 800;
    color         : var(--blanc);
    line-height   : 1.18;
    margin-bottom : .75rem;
    letter-spacing: -.02em;
    text-shadow   : 0 2px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.40);
}

.hero h1 em { font-style: normal; color: var(--jaune); }

.hero-perks {
    font-size     : .95rem;
    font-weight   : 700;
    color         : var(--blanc);
    margin-bottom : 1.1rem;
    text-shadow   : 0 1px 8px rgba(0,0,0,.50);
    letter-spacing: .01em;
    overflow-wrap : break-word;
}

.hero-sub {
    color         : rgba(255,255,255,.95);
    font-size     : 1.05rem;
    margin-bottom : 1.5rem;
    max-width     : 540px;
    margin-left   : auto;
    margin-right  : auto;
    text-shadow   : 0 1px 8px rgba(0,0,0,.50);
    text-shadow   : 0 1px 3px rgba(0,0,0,.15);
}

/* ---- Moteur de recherche ---- */
.search-box {
    background    : var(--blanc);
    border-radius : var(--radius-md);
    padding       : .45rem;
    display       : flex;
    gap           : .4rem;
    width         : 100%;
    max-width     : 600px;
    margin        : 0 auto;
    box-shadow    : 0 8px 40px rgba(0,0,0,.28);
    position      : relative;
}
/* Variante hero : alignée à gauche, même largeur que le contenu */
.search-box--hero {
    margin        : 0;
    max-width     : 600px;
}

.search-box input[type="text"] {
    flex       : 1;
    border     : none;
    outline    : none;
    padding    : .85rem 1rem;
    font-size  : .95rem;
    color      : var(--texte);
    background : transparent;
    font-family: var(--font);
    min-width  : 0;
}
.search-box input::placeholder { color: #aab; }


.btn-search {
    background    : var(--jaune);
    color         : var(--bleu);
    border        : none;
    border-radius : 10px;
    padding       : .85rem 1.4rem;
    font-size     : .9rem;
    font-weight   : 700;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : background var(--transition), color var(--transition);
    display       : flex;
    align-items   : center;
    gap           : .35rem;
    font-family   : var(--font);
    flex-shrink   : 0;
}
.btn-search:hover { background: var(--jaune-dark); color: var(--blanc); }

/* ---- Dropdown autocomplétion ---- */
.ac-dropdown {
    position      : absolute;
    top           : calc(100% + 6px);
    left          : 0;
    right         : 0;
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    box-shadow    : 0 12px 40px rgba(0,0,0,.18);
    z-index       : 200;
    margin        : 0;
    padding       : .3rem 0;
    list-style    : none;
    max-height    : 360px;
    overflow-y    : auto;
}
.ac-item {
    display     : flex;
    align-items : center;
    gap         : .65rem;
    padding     : .65rem 1rem;
    cursor      : pointer;
    font-size   : .875rem;
    color       : var(--texte);
    transition  : background .1s;
}
.ac-item:hover,
.ac-item.ac-active { background: var(--fond); }
.ac-icon  { font-size: .95rem; flex-shrink: 0; line-height: 1; }
.ac-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-badge {
    font-size     : .65rem;
    font-weight   : 700;
    padding       : .15rem .5rem;
    border-radius : 20px;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink   : 0;
}
.ac-badge--dept   { background: rgba(7,17,102,.08);   color: var(--bleu); }
.ac-badge--region { background: rgba(255,171,1,.18);  color: #8a5a00; }
.ac-badge--ville  { background: rgba(138,188,39,.15); color: #4a6e0a; }

.hero-hints {
    margin-top  : 1rem;
    font-size   : .78rem;
    color       : rgba(255,255,255,.85);
    position    : relative;
    z-index     : 1;
    padding-bottom: 3.5rem;
    text-shadow : 0 1px 6px rgba(0,0,0,.50);
}

/* ---- Barre de stats ---- */
.stats-bar {
    position   : relative;
    z-index    : 1;
    background : var(--bleu);
    box-shadow : 0 6px 24px rgba(7,17,102,.35);
}

.stats-bar-inner {
    max-width               : 1180px;
    margin                  : 0 auto;
    padding                 : 1.25rem 2rem;
    display                 : grid;
    /* 5 colonnes égales séparées par 4 filets de 1px */
    grid-template-columns   : 1fr 1px 1fr 1px 1fr 1px 1fr 1px 1fr;
    align-items             : center;
    gap                     : 0 .5rem;
}

.stat-item  { text-align: center; min-width: 0; }
.stat-val   { font-size: 1.6rem; font-weight: 900; color: var(--blanc); line-height: 1; white-space: nowrap; }
.stat-val span { color: var(--jaune); }
.stat-text  { font-size: 1.15rem; letter-spacing: .08em; }  /* ADELI plus petit que les chiffres */
.stat-lbl  { font-size: .67rem; color: rgba(255,255,255,.70); margin-top: .3rem; letter-spacing: .03em; text-transform: uppercase; }
.stat-sep  { width: 1px; height: 36px; background: rgba(255,255,255,.18); justify-self: center; }

/* ================================================================
   LAYOUT GÉNÉRAL
   ================================================================ */
.container  { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.section    { padding: 5rem 1.5rem; }
.section-white  { background: var(--blanc); }
.section-light  { background: var(--vert-light); }    /* vert pâle au lieu de bleu pâle */
.section-blog   { background: var(--bleu-light); }    /* bleu pâle — bloc articles */
.section-dark   { background: var(--bleu); }          /* bleu foncé : CTA final seulement */

.section-label {
    display       : inline-block;
    background    : var(--vert-light);
    color         : var(--vert-dark);
    font-size     : .72rem;
    font-weight   : 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding       : .28rem .8rem;
    border-radius : 99px;
    margin-bottom : .75rem;
}

.section-title {
    font-size     : clamp(1.45rem, 3vw, 2rem);
    font-weight   : 800;
    color         : var(--bleu);
    line-height   : 1.22;
    margin-bottom : .5rem;
    letter-spacing: -.02em;
}

.section-sub {
    color         : var(--texte-light);
    font-size     : .95rem;
    margin-bottom : 2.5rem;
    line-height   : 1.7;
}

/* ================================================================
   SITUATIONS
   ================================================================ */
.situations-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(290px, 1fr));
    gap                   : 1.25rem;
}

.situation-card {
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 2rem;
    transition    : border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.situation-card:hover {
    border-color : var(--vert);
    box-shadow   : var(--shadow-md);
    transform    : translateY(-3px);
}

.situation-icon {
    width         : 50px;
    height        : 50px;
    border-radius : var(--radius-sm);
    display       : flex;
    align-items   : center;
    justify-content: center;
    font-size     : 1.4rem;
    margin-bottom : 1.1rem;
}

.ic-orange { background: #fff0e0; }
.ic-red    { background: #fde8e8; }
.ic-yellow { background: var(--jaune-light); }

.situation-tag {
    font-size     : .7rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color         : var(--texte-light);
    margin-bottom : .4rem;
}

.situation-card h3 {
    font-size    : 1rem;
    font-weight  : 700;
    color        : var(--bleu);
    margin-bottom: .5rem;
}

.situation-card p {
    font-size  : .875rem;
    color      : var(--texte-light);
    line-height: 1.65;
}

.card-link {
    display     : inline-flex;
    align-items : center;
    gap         : .3rem;
    color       : var(--vert-dark);
    font-size   : .85rem;
    font-weight : 600;
    margin-top  : 1.1rem;
    transition  : gap var(--transition);
}
.card-link:hover { gap: .5rem; }

/* ================================================================
   PROCESSUS
   ================================================================ */
.process-steps {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(210px, 1fr));
    gap                   : 1.25rem;
}

.process-step {
    background    : var(--blanc);
    border-radius : var(--radius-md);
    padding       : 1.75rem;
    box-shadow    : var(--shadow-sm);
    position      : relative;
}

.step-num {
    width         : 38px;
    height        : 38px;
    background    : var(--vert);
    color         : var(--blanc);
    font-weight   : 800;
    border-radius : 50%;
    display       : flex;
    align-items   : center;
    justify-content: center;
    margin-bottom : 1rem;
    font-size     : .95rem;
}

.process-step h3 { font-size: .9rem; font-weight: 700; color: var(--bleu); margin-bottom: .4rem; }
.process-step p  { font-size: .85rem; color: var(--texte-light); }

.step-time {
    margin-top    : .75rem;
    font-size     : .72rem;
    font-weight   : 600;
    color         : var(--vert-dark);
    background    : var(--vert-light);
    display       : inline-block;
    padding       : .18rem .55rem;
    border-radius : 99px;
}

/* ================================================================
   AVANTAGES
   ================================================================ */
.avantages-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(230px, 1fr));
    gap                   : 1.25rem;
}

.avantage-card {
    padding       : 1.75rem;
    border-radius : var(--radius-md);
    border        : 1.5px solid var(--border);
    background    : var(--blanc);
}

.avantage-icon { font-size: 1.75rem; margin-bottom: .75rem; }
.avantage-card h3 { font-size: .95rem; font-weight: 700; color: var(--bleu); margin-bottom: .35rem; }
.avantage-card p  { font-size: .85rem; color: var(--texte-light); }

/* ================================================================
   TABLEAU COMPARATIF
   ================================================================ */
.comparaison-table {
    width          : 100%;
    border-collapse: separate;
    border-spacing : 0;
    background     : var(--blanc);
    border-radius  : var(--radius-md);
    overflow       : hidden;
    box-shadow     : var(--shadow-md);
    font-size      : .875rem;
}

.comparaison-table th {
    background : var(--bleu);
    color      : var(--blanc);
    padding    : 1rem 1.25rem;
    text-align : left;
    font-weight: 700;
}

.comparaison-table th.col-aacc {
    background : var(--vert);
    position   : relative;
}

.comparaison-table th.col-aacc::after {
    content    : ' ✓';
    color      : var(--jaune);
}

.comparaison-table td {
    padding      : .9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    color        : var(--texte);
}

.comparaison-table tr:last-child td { border-bottom: none; }
.comparaison-table tr:nth-child(even) td { background: var(--fond); }

.check { color: var(--vert-dark); font-weight: 700; }
.cross  { color: #cc3333; font-weight: 700; }

/* ================================================================
   TÉMOIGNAGES
   ================================================================ */
.temoignages-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(290px, 1fr));
    gap                   : 1.25rem;
}

.temoignage-card {
    background    : var(--fond);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 1.5rem;
}

.stars { color: var(--jaune); font-size: .95rem; letter-spacing: .08em; margin-bottom: .75rem; }

.temoignage-card blockquote {
    font-size    : .9rem;
    color        : var(--texte);
    line-height  : 1.65;
    margin-bottom: 1rem;
    font-style   : italic;
}
.temoignage-card blockquote::before { content: '« '; color: var(--vert); font-style: normal; }
.temoignage-card blockquote::after  { content: ' »'; color: var(--vert); font-style: normal; }

.temoignage-author { font-size: .8rem; font-weight: 700; color: var(--bleu); }
.temoignage-author span { font-weight: 400; color: var(--texte-light); }

/* ================================================================
   FAQ
   ================================================================ */
.faq-layout {
    display               : grid;
    grid-template-columns : 1fr 380px;
    gap                   : 3.5rem;
    align-items           : start;
}

.faq-col { min-width: 0; }

/* Visuel latéral */
.faq-visual {
    position : sticky;
    top      : 120px;   /* reste visible au scroll */
}

.faq-img,
.faq-visual-placeholder {
    width         : 100%;
    aspect-ratio  : 3 / 4;   /* portrait — s'adapte à la hauteur de la FAQ */
    border-radius : var(--radius-md);
    display       : block;
}

.faq-img { object-fit: cover; }

.faq-visual-placeholder {
    background    : var(--blanc);
    border        : 2px dashed var(--border);
    display       : flex;
    flex-direction: column;
    align-items   : center;
    justify-content: center;
    gap           : .6rem;
    color         : var(--texte-light);
    text-align    : center;
    padding       : 2rem;
}
.faq-visual-placeholder strong { color: var(--bleu); font-size: .9rem; }
.faq-visual-placeholder span   { font-size: .75rem; }
.faq-visual-placeholder svg    { color: var(--border); margin-bottom: .5rem; }

.faq-list { max-width: 100%; }

.faq-item {
    background    : var(--blanc);
    border-radius : var(--radius-sm);
    margin-bottom : .65rem;
    border        : 1.5px solid var(--border);
    overflow      : hidden;
}

.faq-question {
    width      : 100%;
    background : none;
    border     : none;
    padding    : 1.1rem 1.25rem;
    display    : flex;
    justify-content: space-between;
    align-items: center;
    gap        : 1rem;
    cursor     : pointer;
    font-size  : .9rem;
    font-weight: 600;
    color      : var(--bleu);
    font-family: var(--font);
    text-align : left;
}

.faq-arrow {
    flex-shrink   : 0;
    width         : 22px;
    height        : 22px;
    background    : var(--vert-light);
    color         : var(--vert-dark);
    border-radius : 50%;
    display       : flex;
    align-items   : center;
    justify-content: center;
    font-size     : .7rem;
    transition    : transform var(--transition), background var(--transition);
}

.faq-item.open .faq-arrow { transform: rotate(180deg); background: var(--vert); color: var(--blanc); }

.faq-answer {
    padding    : 0 1.25rem;
    max-height : 0;
    overflow   : hidden;
    transition : max-height .3s ease, padding .3s ease;
    font-size  : .875rem;
    color      : var(--texte-light);
    line-height: 1.7;
}

.faq-item.open .faq-answer { max-height: 300px; padding: 0 1.25rem 1.1rem; }

/* ================================================================
   CTA FINAL
   ================================================================ */
.section-cta {
    background  : var(--bleu);
    text-align  : center;
    position    : relative;
    overflow    : hidden;
}

.section-cta::before,
.section-cta::after {
    content       : '';
    position      : absolute;
    border-radius : 50%;
    pointer-events: none;
}
.section-cta::before { width:300px; height:300px; background: rgba(138,188,39,.12); top:-80px; right:-60px; }
.section-cta::after  { width:200px; height:200px; background: rgba(255,173,3,.08); bottom:-60px; left:-40px; }

.section-cta h2 { font-size: clamp(1.5rem,3vw,2.1rem); font-weight:800; color:var(--blanc); margin-bottom:.75rem; position:relative; }
.section-cta p  { color: rgba(255,255,255,.7); margin-bottom:2rem; position:relative; }

.cta-buttons {
    display         : flex;
    gap             : 1rem;
    justify-content : center;
    flex-wrap       : wrap;
    position        : relative;
}

/* ================================================================
   BOUTONS GLOBAUX
   ================================================================ */
.btn-primary {
    background : var(--vert);
    color      : var(--blanc);
    padding    : .85rem 2rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size  : .95rem;
    border     : none;
    cursor     : pointer;
    transition : background var(--transition), transform var(--transition);
    display    : inline-flex;
    align-items: center;
    gap        : .4rem;
    font-family: var(--font);
}
.btn-primary:hover { background: var(--vert-dark); color:var(--blanc); transform:translateY(-1px); }

.btn-outline {
    background : transparent;
    color      : var(--blanc);
    padding    : .85rem 2rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size  : .95rem;
    border     : 2px solid rgba(255,255,255,.32);
    cursor     : pointer;
    transition : border-color var(--transition), background var(--transition);
    display    : inline-flex;
    align-items: center;
    gap        : .4rem;
    font-family: var(--font);
}
.btn-outline:hover { border-color:var(--blanc); background:rgba(255,255,255,.08); color:var(--blanc); }

.btn-cta {
    background : var(--vert);
    color      : var(--blanc) !important;
    padding    : .65rem 1.3rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size  : .9rem;
    display    : inline-flex;
    align-items: center;
    gap        : .35rem;
    transition : background var(--transition);
}
.btn-cta:hover { background: var(--vert-dark); }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
    background : #020e36;
    color      : rgba(255,255,255,.6);
    padding    : 3.5rem 1.5rem 2rem;
}

.footer-inner {
    max-width            : 1180px;
    margin               : 0 auto 2.5rem;
    display              : grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr 1fr;
    gap                  : 2rem;
}

.footer-brand .brand-name { font-size:1.1rem; font-weight:800; color:var(--blanc); margin-bottom:.5rem; }
.footer-brand p { font-size:.85rem; line-height:1.7; max-width:260px; margin-bottom:1rem; }
.footer-contact { font-size:.85rem; }
.footer-contact p { margin-bottom:.4rem; }
.footer-contact a { color:var(--jaune); }

/* Réseaux sociaux footer */
.footer-social { display:flex; gap:.6rem; margin-top:.9rem; flex-wrap:wrap; }
.footer-social-link {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 34px;
    height         : 34px;
    border-radius  : 50%;
    background     : rgba(255,255,255,.12);
    border         : 1px solid rgba(255,255,255,.15);
    color          : #ffffff;
    transition     : background .2s, border-color .2s;
    flex-shrink    : 0;
}
.footer-social-link svg { stroke: #ffffff; }
.footer-social-link:hover {
    background  : var(--jaune);
    border-color: var(--jaune);
}
.footer-social-link:hover svg { stroke: var(--bleu); }

/* Colonnes nav footer */
.footer-col h4 {
    font-size     : .8rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color         : var(--blanc);
    margin-bottom : .9rem;
}
/* Le h4 peut contenir un lien (page principale) */
.footer-col h4 a {
    color      : var(--blanc);
    font-size  : inherit;
    font-weight: inherit;
    transition : color var(--transition);
}
.footer-col h4 a:hover { color: var(--jaune); }

.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.footer-col li a {
    font-size  : .83rem;
    color      : rgba(255,255,255,.52);
    transition : color var(--transition);
    line-height: 1.4;
}
.footer-col li a:hover { color: rgba(255,255,255,.90); }

/* Barre de bas de page */
.footer-bottom {
    max-width       : 1180px;
    margin          : 0 auto;
    padding-top     : 1.5rem;
    border-top      : 1px solid rgba(255,255,255,.08);
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    flex-wrap       : wrap;
    gap             : .75rem;
    font-size       : .78rem;
    color           : rgba(255,255,255,.38);
}

.footer-credit { color: rgba(255,255,255,.38); }
.footer-credit a { color: rgba(255,255,255,.60); font-weight:600; transition: color var(--transition); }
.footer-credit a:hover { color: var(--blanc); }

.footer-legal { display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer-legal a { color:rgba(255,255,255,.38); transition: color var(--transition); }
.footer-legal a:hover { color:var(--blanc); }

/* ================================================================
   RÉSULTATS DE RECHERCHE
   ================================================================ */

.resultats-layout {
    max-width : 1180px;
    margin    : 2.5rem auto;
    padding   : 0 1.5rem;
    align-items: start;
}

.filtres-sidebar {
    background    : var(--blanc);
    border-radius : var(--radius-md);
    padding       : 1.5rem;
    border        : 1.5px solid var(--border);
    position      : sticky;
    top           : 80px;
}

.filtres-sidebar h3 {
    font-size     : .78rem;
    font-weight   : 700;
    color         : var(--texte-light);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom : 1rem;
}

.filtre-groupe { margin-bottom: 1.25rem; }
.filtre-groupe label { display:block; font-size:.78rem; font-weight:600; color:var(--texte-light); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem; }
.filtre-groupe select,
.filtre-groupe input { width:100%; padding:.55rem .75rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:.875rem; color:var(--texte); background:var(--blanc); font-family:var(--font); }
.filtre-dept-input:focus { outline:none; border-color:var(--vert); box-shadow:0 0 0 3px rgba(138,188,39,.15); }

.filtre-btn-submit {
    width         : 100%;
    background    : var(--vert);
    color         : var(--blanc);
    border        : none;
    border-radius : var(--radius-sm);
    padding       : .6rem 1rem;
    font-size     : .875rem;
    font-weight   : 600;
    font-family   : var(--font);
    cursor        : pointer;
    transition    : background var(--transition);
    margin-bottom : .6rem;
}
.filtre-btn-submit:hover { background: #5a9010; }

.filtre-reset {
    display     : block;
    text-align  : center;
    font-size   : .78rem;
    color       : var(--texte-light);
    text-decoration: none;
    margin-top  : .25rem;
}
.filtre-reset:hover { color: var(--bleu); }

.resultats-count { font-size:.875rem; color:var(--texte-light); margin-bottom:1.25rem; }
.resultats-count strong { color:var(--bleu); }

.psy-cards-list {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 1.25rem;
    list-style            : none;
    padding               : 0;
    margin                : 0;
}

.psy-card {
    background    : var(--blanc);
    border-radius : var(--radius-md);
    padding       : 1.25rem;
    border        : 1.5px solid var(--border);
    display       : flex;
    flex-direction: column;
    gap           : .9rem;
    width         : 100%;
    box-sizing    : border-box;
    transition    : border-color var(--transition), box-shadow var(--transition);
}
.psy-card:hover { border-color:var(--vert); box-shadow:var(--shadow-md); }

/* Header : avatar + identité sur la même ligne */
.psy-card-header {
    display    : flex;
    align-items: flex-start;
    gap        : .85rem;
}

.psy-avatar {
    width         : 64px;
    height        : 64px;
    border-radius : var(--radius-sm);
    object-fit    : cover;
    background    : var(--bleu-light);
    flex-shrink   : 0;
    display       : flex;
    align-items   : center;
    justify-content: center;
    font-size     : 1.3rem;
    font-weight   : 800;
    color         : var(--bleu);
}

.psy-card-identity        { flex:1; min-width:0; }
.psy-card-identity h2     { font-size:.97rem; font-weight:700; color:var(--bleu); margin-bottom:.2rem; line-height:1.3; }
.psy-location             { font-size:.82rem; color:var(--texte-light); margin:0; }

/* Corps : tags + extrait + actions */
.psy-card-body { display:flex; flex-direction:column; gap:.65rem; }

.psy-tags { display:flex; gap:.4rem; flex-wrap:wrap; }
.psy-tag  { font-size:.7rem; font-weight:600; padding:.18rem .55rem; border-radius:99px; background:var(--vert-light); color:var(--bleu); }
.psy-tag.green { background:var(--vert); color:var(--blanc); }
.psy-tag--samedi { background:#fff3cd; color:#856404; }

.psy-extrait { font-size:.85rem; color:var(--texte-light); line-height:1.55; margin:0; }

.psy-card-actions { display:flex; gap:.65rem; align-items:center; flex-wrap:wrap; margin-top:.1rem; }

.btn-voir { background:var(--bleu); color:var(--blanc); padding:.5rem 1rem; border-radius:var(--radius-sm); font-size:.83rem; font-weight:600; transition:background var(--transition); }
.btn-voir:hover { background:var(--bleu-medium); color:var(--blanc); }

.btn-rdv { background:var(--vert); color:var(--blanc); padding:.5rem 1rem; border-radius:var(--radius-sm); font-size:.83rem; font-weight:600; transition:background var(--transition); }
.btn-rdv:hover { background:var(--vert-dark); color:var(--blanc); }

.psy-tarif { font-size:.9rem; font-weight:700; color:var(--vert-dark); margin-left:auto; }

/* ================================================================
   PROFIL PSYCHOLOGUE — refonte avec calendrier
   ================================================================ */

/* Hero */
.profil-hero {
    background : linear-gradient(135deg, var(--bleu) 0%, #0d1f99 100%);
    padding    : 2.5rem 1.5rem 3rem;
}

/* Hero layout */
.profil-hero-inner {
    max-width   : 1180px;
    margin      : 0 auto;
    display     : flex;
    gap         : 1.75rem;
    align-items : center;
}

/* Avatar */
.profil-avatar {
    width         : 96px;
    height        : 96px;
    border-radius : var(--radius-md);
    border        : 3px solid rgba(255,255,255,.25);
    flex-shrink   : 0;
    overflow      : hidden;
    background    : var(--bleu-medium);
    display       : flex;
    align-items   : center;
    justify-content: center;
}
.profil-avatar img    { width:100%; height:100%; object-fit:cover; }
.profil-avatar-initiales {
    font-size   : 2rem;
    font-weight : 900;
    color       : var(--blanc);
    letter-spacing: -.04em;
}

/* Infos hero */
.profil-hero-info h1 {
    color         : var(--blanc);
    font-size     : clamp(1.4rem,3vw,2rem);
    font-weight   : 800;
    margin-bottom : .3rem;
    letter-spacing: -.02em;
}
.profil-hero-sub {
    color           : rgba(255,255,255,.72);
    font-size       : .9rem;
    margin-bottom   : .75rem;
    word-break      : break-word;
    overflow-wrap   : break-word;
}

/* Badges hero */
.profil-hero-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.profil-badge {
    display       : inline-block;
    font-size     : .72rem;
    font-weight   : 700;
    padding       : .22rem .65rem;
    border-radius : 99px;
}
.profil-badge--adeli { background: rgba(138,188,39,.20); border:1px solid rgba(138,188,39,.40); color:#c8f07a; }
.profil-badge--aacc  { background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.30); color:var(--blanc); }
.profil-badge--prix  { background: var(--jaune); color: var(--bleu); }

/* Breadcrumb sur fond foncé */
.breadcrumb--light { margin-bottom: .65rem; }
.breadcrumb--light a { color: rgba(255,255,255,.60); }
.breadcrumb--light span { color: rgba(255,255,255,.40); }
.breadcrumb--light a:hover { color: var(--blanc); }

/* Layout page profil */
.profil-page-layout {
    max-width     : 1180px;
    margin        : 0 auto;
    padding       : 2.5rem 1.5rem 4rem;
    display       : grid;
    grid-template-columns: 1fr 380px;
    gap           : 2.5rem;
    align-items   : start;
}

/* Colonne principale */
.profil-main-col { display: flex; flex-direction: column; gap: 1.25rem; }

.profil-card {
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 1.75rem 2rem;
}
.profil-card-title {
    font-size    : .78rem;
    font-weight  : 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color        : var(--texte-light);
    margin-bottom: 1.1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}
.profil-presentation-text {
    font-size  : .9rem;
    color      : var(--texte);
    line-height: 1.75;
}

/* Grille infos pratiques */
.profil-infos-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1rem;
}
.profil-info-item {
    display        : flex;
    flex-direction : column;
    gap            : .2rem;
}
.profil-info-label {
    font-size     : .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color         : var(--texte-light);
    font-weight   : 600;
}
.profil-info-val {
    font-size  : .9rem;
    color      : var(--texte);
    font-weight: 500;
    line-height: 1.45;
}
.profil-info-val a { color: var(--vert-dark); font-weight: 600; }
.profil-tarif-val  { color: var(--bleu); font-weight: 800; font-size: 1.1rem; }

/* Liste inclus */
.profil-inclus-list {
    list-style : none;
    display    : flex;
    flex-direction: column;
    gap        : .5rem;
}
.profil-inclus-list li {
    font-size  : .875rem;
    color      : var(--texte);
    line-height: 1.55;
    padding-left: .25rem;
}

/* ================================================================
   ASIDE RÉSERVATION
   ================================================================ */
.profil-aside-col {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
    position       : sticky;
    top            : 88px;
}

/* Alerte secrétariat */
.rdv-alerte {
    display       : flex;
    gap           : .75rem;
    align-items   : flex-start;
    background    : #fff8e1;
    border        : 1.5px solid #f9a825;
    border-left   : 4px solid #f57f17;
    border-radius : var(--radius-sm);
    padding       : .9rem 1rem;
}
.rdv-alerte-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.rdv-alerte-text {
    font-size  : .82rem;
    color      : #5c3d00;
    line-height: 1.6;
}
.rdv-alerte-text strong { color: #7a5200; }

/* Carte réservation */
.rdv-card {
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    box-shadow    : var(--shadow-md);
    overflow      : hidden;
}
.rdv-card-header {
    background   : var(--fond);
    border-bottom: 1px solid var(--border);
    padding      : 1rem 1.25rem;
    display      : flex;
    align-items  : center;
    justify-content: space-between;
    gap          : 1rem;
    flex-wrap    : wrap;
}
.rdv-prix strong { font-size: 1.5rem; font-weight: 900; color: var(--bleu); }
.rdv-prix span   { font-size: .75rem; color: var(--texte-light); }
.rdv-disponible  { font-size: .75rem; color: var(--texte-light); text-align: right; line-height: 1.4; }
.rdv-disponible strong { color: var(--vert-dark); }

/* Sections RDV */
.rdv-section { padding: 1.25rem 1.25rem 0; }
.rdv-section:last-of-type { padding-bottom: 1.25rem; }
.rdv-section-label {
    font-size     : .72rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color         : var(--texte-light);
    margin-bottom : .75rem;
}

/* ================================================================
   CALENDRIER
   ================================================================ */
.cal-nav {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : .65rem;
}
.cal-nav-title {
    font-size  : .88rem;
    font-weight: 700;
    color      : var(--bleu);
    text-transform: capitalize;
}
.cal-nav-btn {
    background    : none;
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-sm);
    width         : 28px;
    height        : 28px;
    cursor        : pointer;
    display       : flex;
    align-items   : center;
    justify-content: center;
    font-size     : .75rem;
    color         : var(--texte-light);
    transition    : border-color var(--transition), color var(--transition);
    font-family   : var(--font);
}
.cal-nav-btn:hover { border-color: var(--bleu); color: var(--bleu); }
.cal-nav-btn:disabled { opacity: .35; cursor: not-allowed; }

/* Grille 7 colonnes */
.cal-grid {
    display               : grid;
    grid-template-columns : repeat(7, 1fr);
    gap                   : 2px;
}
.cal-day-header {
    text-align    : center;
    font-size     : .65rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color         : var(--texte-light);
    padding-bottom: .4rem;
}
.cal-day-header.dim { color: #ddd; }

.cal-day {
    aspect-ratio    : 1;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : .78rem;
    font-weight     : 500;
    border-radius   : 6px;
    cursor          : default;
    transition      : background var(--transition), color var(--transition);
    position        : relative;
}
/* Jour disponible */
.cal-day--dispo {
    cursor     : pointer;
    color      : var(--bleu);
    font-weight: 600;
}
.cal-day--dispo:hover {
    background : var(--bleu-light);
}
/* Jour sélectionné */
.cal-day--selected {
    background  : var(--bleu) !important;
    color       : var(--blanc) !important;
    font-weight : 800;
}
/* Jour indisponible / passé */
.cal-day--off {
    color   : #ccc;
}
/* Dimanche */
.cal-day--dim {
    color : #ddd;
}
/* Jour vide (hors mois) */
.cal-day--empty { }

/* Plages horaires */
.rdv-plage-section { padding-top: 1rem; }
.rdv-plages {
    display : grid;
    grid-template-columns: 1fr 1fr;
    gap     : .65rem;
}
.rdv-plage-option {
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-sm);
    cursor        : pointer;
    transition    : border-color var(--transition), background var(--transition);
    overflow      : hidden;
}
.rdv-plage-option input { display: none; }
.rdv-plage-option:has(input:checked) {
    border-color : var(--vert);
    background   : var(--vert-light);
}
.rdv-plage-body {
    display     : flex;
    align-items : center;
    gap         : .5rem;
    padding     : .85rem .75rem;
}
.rdv-plage-icon  { font-size: 1.25rem; flex-shrink: 0; }
.rdv-plage-title { font-size: .82rem; font-weight: 700; color: var(--bleu); }
.rdv-plage-sub   { font-size: .7rem; color: var(--texte-light); margin-top: .1rem; }

/* Récap + bouton */
.rdv-recap {
    margin    : 1rem 1.25rem 0;
    background: var(--fond);
    border    : 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding   : .85rem 1rem;
}
.rdv-recap-ligne {
    display         : flex;
    justify-content : space-between;
    font-size       : .82rem;
    color           : var(--texte-light);
    padding         : .3rem 0;
    border-bottom   : 1px solid var(--border);
}
.rdv-recap-ligne:last-child { border-bottom: none; }
.rdv-recap-total {
    font-size   : .9rem !important;
    font-weight : 700;
    color       : var(--bleu) !important;
    padding-top : .55rem !important;
}

.rdv-btn-submit {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : .5rem;
    width           : calc(100% - 2.5rem);
    margin          : 1rem 1.25rem 1.25rem;
    background      : var(--vert);
    color           : var(--blanc);
    border          : none;
    border-radius   : var(--radius-sm);
    padding         : .9rem 1rem;
    font-size       : .95rem;
    font-weight     : 700;
    cursor          : pointer;
    font-family     : var(--font);
    transition      : background var(--transition), transform var(--transition);
}
.rdv-btn-submit:hover { background: var(--vert-dark); transform: translateY(-1px); }

/* Téléphone alternatif */
.rdv-tel-alt {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : .25rem;
    padding         : .85rem 1.25rem 1.1rem;
    border-top      : 1px solid var(--border);
    background      : var(--fond);
    text-align      : center;
}
.rdv-tel-alt > span:first-child { font-size: .72rem; color: var(--texte-light); }
.rdv-tel-link {
    display     : flex;
    align-items : center;
    gap         : .35rem;
    font-size   : .95rem;
    font-weight : 700;
    color       : var(--bleu);
    transition  : color var(--transition);
}
.rdv-tel-link:hover { color: var(--vert-dark); }
.rdv-tel-hours {
    font-size   : .7rem;
    color       : var(--texte-light);
    word-wrap   : break-word;
    max-width   : 100%;
    text-align  : center;
}

/* ================================================================
   ANCIENS STYLES PROFIL (conservés pour compatibilité)
   ================================================================ */
.booking-card {
    background    : var(--blanc);
    border-radius : var(--radius-md);
    padding       : 1.75rem;
    border        : 1.5px solid var(--border);
    box-shadow    : var(--shadow-md);
    position      : sticky;
    top           : 80px;
}
.booking-price { font-size:2rem; font-weight:800; color:var(--bleu); }
.booking-note  { font-size:.78rem; color:var(--texte-light); margin-bottom:1.5rem; }
.dispo-label   { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--texte-light); margin-bottom:.4rem; }
.dispo-date    { font-size:.95rem; font-weight:700; color:var(--vert-dark); margin-bottom:1.25rem; }
.btn-booking {
    width:100%; background:var(--vert); color:var(--blanc); border:none; padding:.9rem;
    border-radius:var(--radius-sm); font-size:.95rem; font-weight:700; cursor:pointer;
    font-family:var(--font); transition:background var(--transition); display:block; text-align:center;
}
.btn-booking:hover { background:var(--vert-dark); color:var(--blanc); }

/* ================================================================
   FORMULAIRES
   ================================================================ */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display:block; font-size:.875rem; font-weight:600; color:var(--texte); margin-bottom:.35rem; }
.form-group input,
.form-group select,
.form-group textarea {
    width:100%; padding:.7rem .9rem; border:1.5px solid var(--border);
    border-radius:var(--radius-sm); font-size:.9rem; color:var(--texte);
    background:var(--fond); font-family:var(--font); transition:border-color var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--vert); background:var(--blanc); }

.form-hint { font-size:.78rem; color:#6b7280; margin-top:.3rem; }

/* ---- Upload zone drag & drop ---- */
.upload-zone {
    position       : relative;
    border         : 2px dashed var(--border);
    border-radius  : var(--radius-md);
    padding        : 1.25rem;
    text-align     : center;
    cursor         : pointer;
    transition     : border-color .2s, background .2s;
    background     : #f9fafb;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : .6rem;
    overflow       : hidden;
}
.upload-zone:hover,
.upload-zone.drag-over { border-color:var(--vert); background:#f0f9e8; }
.upload-zone input[type="file"] {
    position : absolute;
    inset    : 0;
    opacity  : 0;
    cursor   : pointer;
    width    : 100%;
    height   : 100%;
    z-index  : 2;
}
.upload-zone #photo-preview {
    display      : block;
    width        : 90px;
    height       : 90px;
    border-radius: 50%;
    object-fit   : cover;
    border       : 2px solid var(--border);
    flex-shrink  : 0;
    position     : relative;
    z-index      : 1;
}
.upload-hint { font-size:.85rem; color:#6b7280; margin:0; position:relative; z-index:1; }
.upload-link { color:var(--vert); font-weight:600; text-decoration:underline; }

.tunnel-steps {
    list-style   : none;
    display      : flex;
    margin-bottom: 2rem;
    background   : var(--blanc);
    border       : 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow     : hidden;
    counter-reset: step;
}
.tunnel-steps li {
    flex      : 1;
    text-align: center;
    padding   : .75rem .5rem;
    font-size : .78rem;
    font-weight:600;
    color     : var(--texte-light);
    border-right:1px solid var(--border);
}
.tunnel-steps li:last-child { border-right:none; }
.tunnel-steps li.active { background:var(--vert); color:var(--blanc); }

/* ================================================================
   ASSOCIATION — Qui sommes-nous
   ================================================================ */
.apropos-layout {
    display               : grid;
    grid-template-columns : 1fr 360px;
    gap                   : 3rem;
    align-items           : start;
    margin-top            : 2.5rem;
}
.apropos-text p {
    font-size    : .95rem;
    color        : var(--texte-light);
    line-height  : 1.75;
    margin-bottom: 1rem;
}
.apropos-aside {
    display        : flex;
    flex-direction : column;
    gap            : 1.5rem;
}

.apropos-quote {
    background    : var(--bleu);
    border-radius : var(--radius-md);
    padding       : 1.75rem;
}
.apropos-quote blockquote {
    font-size    : 1rem;
    font-style   : italic;
    color        : rgba(255,255,255,.92);
    line-height  : 1.65;
    margin-bottom: .75rem;
}
.apropos-quote cite {
    font-size  : .75rem;
    font-style : normal;
    color      : rgba(255,255,255,.55);
    font-weight: 600;
    display    : block;
}

.apropos-infos {
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    overflow      : hidden;
}
.apropos-info-item {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    gap             : 1rem;
    padding         : .85rem 1.25rem;
    border-bottom   : 1px solid var(--border);
    font-size       : .875rem;
}
.apropos-info-item:last-child { border-bottom: none; }
.apropos-info-label {
    color      : var(--texte-light);
    font-weight: 500;
    flex-shrink: 0;
}
.apropos-info-val {
    color      : var(--bleu);
    font-weight: 600;
    text-align : right;
}
.apropos-info-val a { color: var(--vert-dark); }

/* ================================================================
   ASSOCIATION — Engagements
   ================================================================ */
.engagement-list {
    display        : flex;
    flex-direction : column;
    gap            : 1.75rem;
    margin-top     : 2.5rem;
}
.engagement-item {
    display       : flex;
    gap           : 2rem;
    align-items   : flex-start;
    padding       : 2rem;
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    transition    : box-shadow var(--transition), border-color var(--transition);
}
.engagement-item:hover {
    box-shadow   : var(--shadow-md);
    border-color : var(--vert);
}
.engagement-num {
    flex-shrink     : 0;
    width           : 52px;
    height          : 52px;
    background      : var(--bleu);
    color           : var(--blanc);
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1rem;
    font-weight     : 900;
    letter-spacing  : .01em;
}
.engagement-body h3 {
    font-size    : 1.05rem;
    font-weight  : 700;
    color        : var(--bleu);
    margin-bottom: .45rem;
}
.engagement-body p {
    font-size    : .9rem;
    color        : var(--texte-light);
    line-height  : 1.7;
    margin-bottom: .65rem;
}

/* ================================================================
   FAQ PAGE (page dédiée /faq, distincte du widget FAQ homepage)
   ================================================================ */
.faq-page-container {
    max-width : 860px;
}

/* Onglets catégories */
.faq-cats {
    display       : flex;
    gap           : .6rem;
    flex-wrap     : wrap;
    margin-bottom : 3rem;
    padding-bottom: 1.5rem;
    border-bottom : 1.5px solid var(--border);
}
.faq-cat {
    display       : inline-flex;
    align-items   : center;
    gap           : .4rem;
    background    : var(--fond);
    border        : 1.5px solid var(--border);
    color         : var(--texte);
    font-size     : .83rem;
    font-weight   : 600;
    padding       : .45rem 1rem;
    border-radius : 99px;
    transition    : background var(--transition), border-color var(--transition), color var(--transition);
    scroll-margin-top: 8rem;
}
.faq-cat:hover {
    background   : var(--bleu);
    border-color : var(--bleu);
    color        : var(--blanc);
}
.faq-cat.active {
    background   : var(--bleu);
    border-color : var(--bleu);
    color        : var(--blanc);
}

/* Bloc section FAQ (association, réservation, test, démarches) */
.faq-section {
    margin-bottom : 3rem;
    scroll-margin-top: 120px;
}
.faq-section-header {
    display       : flex;
    align-items   : center;
    gap           : 1rem;
    margin-bottom : 1.5rem;
}
.faq-section-header h2 {
    font-size  : 1.25rem;
    font-weight: 800;
    color      : var(--bleu);
    margin     : 0;
}
.faq-section-num {
    flex-shrink     : 0;
    width           : 36px;
    height          : 36px;
    background      : var(--bleu);
    color           : var(--blanc);
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : .72rem;
    font-weight     : 800;
    letter-spacing  : .04em;
}

/* Bloc "Pas trouvé" */
.faq-not-found {
    background    : var(--fond);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 2.5rem 2rem;
    text-align    : center;
    margin-top    : 1.5rem;
}
.faq-not-found h3 {
    font-size    : 1.1rem;
    font-weight  : 700;
    color        : var(--bleu);
    margin-bottom: .5rem;
}
.faq-not-found p {
    font-size : .9rem;
    color     : var(--texte-light);
}

/* ================================================================
   PAGES LÉGALES (mentions, CGV, RGPD)
   ================================================================ */
.legal-container {
    display               : grid;
    grid-template-columns : 220px 1fr;
    gap                   : 4rem;
    align-items           : start;
    max-width             : 1000px;
}

/* Sommaire sticky */
.legal-toc {
    position      : sticky;
    top           : 100px;
    background    : var(--fond);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 1.25rem;
    font-size     : .83rem;
}
.legal-toc strong {
    display      : block;
    font-size    : .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color        : var(--texte-light);
    margin-bottom: .75rem;
}
.legal-toc ol {
    padding-left : 1.1rem;
    display      : flex;
    flex-direction: column;
    gap          : .35rem;
    color        : var(--texte-light);
}
.legal-toc a {
    color      : var(--texte-light);
    font-size  : .82rem;
    line-height: 1.4;
    transition : color var(--transition);
}
.legal-toc a:hover { color: var(--bleu); }

/* Corps du texte légal */
.legal-body { min-width: 0; }

.legal-section {
    margin-bottom     : 2.5rem;
    padding-bottom    : 2rem;
    border-bottom     : 1px solid var(--border);
    scroll-margin-top : 120px;
}
.legal-section:last-of-type { border-bottom: none; }

.legal-section h2 {
    font-size    : 1.1rem;
    font-weight  : 800;
    color        : var(--bleu);
    margin-bottom: 1rem;
    padding-left : .75rem;
    border-left  : 3px solid var(--vert);
}
.legal-section p {
    font-size    : .9rem;
    color        : var(--texte);
    line-height  : 1.75;
    margin-bottom: .85rem;
}
.legal-section ul {
    padding-left : 1.25rem;
    margin-bottom: .85rem;
    display      : flex;
    flex-direction: column;
    gap          : .4rem;
}
.legal-section ul li {
    font-size  : .9rem;
    color      : var(--texte);
    line-height: 1.65;
}
.legal-section a { color: var(--vert-dark); font-weight: 600; }
.legal-section a:hover { color: var(--bleu); }

.legal-info-block {
    background    : var(--fond);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-sm);
    padding       : 1rem 1.25rem;
    margin        : .75rem 0 1rem;
    display       : flex;
    flex-direction: column;
    gap           : .3rem;
}
.legal-info-block p { margin: 0; font-size: .875rem; color: var(--texte); }
.legal-info-block a { color: var(--vert-dark); }

.legal-update {
    font-size  : .78rem;
    color      : var(--texte-light);
    font-style : italic;
    margin-top : 2rem;
    padding-top: 1.5rem;
    border-top : 1px solid var(--border);
}

/* ================================================================
   PANIER
   ================================================================ */
.panier-layout {
    display               : grid;
    grid-template-columns : 1fr 320px;
    gap                   : 3rem;
    align-items           : start;
}

/* --- Titre section --- */
.panier-section-title {
    font-size    : 1.1rem;
    font-weight  : 800;
    color        : var(--bleu);
    margin-bottom: 1.25rem;
}

/* --- Article panier --- */
.panier-item {
    display       : flex;
    gap           : 1.5rem;
    align-items   : flex-start;
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 1.75rem;
    margin-bottom : 1rem;
}
.panier-item-icon {
    font-size   : 2rem;
    flex-shrink : 0;
    line-height : 1;
    padding-top : .1rem;
}
.panier-item-body { flex: 1; min-width: 0; }
.panier-item-title {
    font-size    : 1rem;
    font-weight  : 700;
    color        : var(--bleu);
    margin-bottom: .6rem;
}
.panier-item-sub {
    display      : flex;
    flex-wrap    : wrap;
    gap          : .4rem;
    margin-bottom: .9rem;
}
.panier-badge {
    display       : inline-block;
    font-size     : .78rem;
    font-weight   : 600;
    padding       : .22rem .65rem;
    border-radius : 99px;
}
.panier-badge--psy {
    background : var(--bleu-light);
    color      : var(--bleu);
}
.panier-badge--loc {
    background : var(--fond);
    color      : var(--texte-light);
    border     : 1px solid var(--border);
}
.panier-item-details {
    list-style : none;
    display    : flex;
    flex-direction: column;
    gap        : .3rem;
}
.panier-item-details li {
    font-size  : .83rem;
    color      : var(--texte-light);
    line-height: 1.5;
}
.panier-item-prix {
    font-size   : 1.5rem;
    font-weight : 900;
    color       : var(--bleu);
    white-space : nowrap;
    flex-shrink : 0;
}

/* --- Actions secondaires --- */
.panier-actions-secondary {
    display     : flex;
    align-items : center;
    gap         : 1.5rem;
    margin-bottom: 1.75rem;
}
.panier-link-change {
    font-size  : .83rem;
    color      : var(--texte-light);
    transition : color var(--transition);
}
.panier-link-change:hover { color: var(--bleu); }
.panier-btn-vider {
    background  : transparent;
    border      : none;
    cursor      : pointer;
    font-size   : .83rem;
    color       : #cc3333;
    font-family : var(--font);
    padding     : 0;
    transition  : opacity var(--transition);
}
.panier-btn-vider:hover { opacity: .7; }

/* --- Réassurance --- */
.panier-reassurance {
    display    : flex;
    gap        : 1.5rem;
    flex-wrap  : wrap;
    background : var(--fond);
    border     : 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding    : 1rem 1.25rem;
}
.panier-reassurance-item {
    display    : flex;
    align-items: center;
    gap        : .5rem;
    font-size  : .8rem;
    color      : var(--texte-light);
}
.panier-reassurance-item strong { color: var(--texte); }

/* --- Aside récapitulatif --- */
.panier-aside {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
    position       : sticky;
    top            : 100px;
}

.panier-recap {
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 1.75rem;
    box-shadow    : var(--shadow-md);
}
.panier-recap h3 {
    font-size    : .78rem;
    font-weight  : 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color        : var(--texte-light);
    margin-bottom: 1.25rem;
}
.panier-recap-ligne {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    font-size       : .875rem;
    color           : var(--texte);
    padding         : .6rem 0;
    border-bottom   : 1px solid var(--border);
}
.panier-recap-ligne:last-of-type { border-bottom: none; }
.panier-offert {
    background    : var(--vert-light);
    color         : var(--vert-dark);
    font-size     : .72rem;
    font-weight   : 700;
    padding       : .15rem .55rem;
    border-radius : 99px;
}
.panier-recap-total {
    font-size   : 1rem !important;
    font-weight : 800;
    color       : var(--bleu) !important;
    padding-top : .85rem !important;
    border-top  : 2px solid var(--border) !important;
    border-bottom: none !important;
    margin-top  : .25rem;
}

.panier-btn-checkout {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : .5rem;
    width           : 100%;
    background      : var(--vert);
    color           : var(--blanc);
    font-size       : .95rem;
    font-weight     : 700;
    padding         : .9rem 1rem;
    border-radius   : var(--radius-sm);
    margin-top      : 1.25rem;
    transition      : background var(--transition), transform var(--transition);
}
.panier-btn-checkout:hover {
    background : var(--vert-dark);
    color      : var(--blanc);
    transform  : translateY(-1px);
}

.panier-recap-note {
    font-size    : .72rem;
    color        : var(--texte-light);
    text-align   : center;
    line-height  : 1.55;
    margin-top   : .75rem;
}

.panier-cb-logos {
    display         : flex;
    gap             : .5rem;
    justify-content : center;
    margin-top      : .9rem;
}
.cb-logo {
    background    : var(--fond);
    border        : 1px solid var(--border);
    border-radius : 4px;
    font-size     : .65rem;
    font-weight   : 800;
    color         : var(--texte-light);
    padding       : .2rem .55rem;
    letter-spacing: .04em;
}

/* Bloc aide */
.panier-aide {
    background    : var(--bleu);
    border-radius : var(--radius-md);
    padding       : 1.25rem;
    text-align    : center;
}
.panier-aide p { font-size: .82rem; color: rgba(255,255,255,.70); margin-bottom: .5rem; }
.panier-aide-tel {
    display    : block;
    font-size  : 1rem;
    font-weight: 800;
    color      : var(--blanc);
    margin-bottom: .3rem;
}
.panier-aide-tel:hover { color: var(--jaune); }
.panier-aide-horaires { font-size: .72rem; color: rgba(255,255,255,.50); margin: 0 !important; }

/* --- Panier vide --- */
.panier-vide {
    grid-column : 1 / -1;
    text-align  : center;
    padding     : 4rem 2rem;
    max-width   : 480px;
    margin      : 0 auto;
}
.panier-vide-icon { font-size: 3.5rem; margin-bottom: 1.25rem; }
.panier-vide h2 {
    font-size    : 1.4rem;
    font-weight  : 800;
    color        : var(--bleu);
    margin-bottom: .65rem;
}
.panier-vide p {
    font-size    : .9rem;
    color        : var(--texte-light);
    line-height  : 1.7;
    margin-bottom: 1.75rem;
}
.panier-link-tarifs {
    display    : block;
    margin-top : .85rem;
    font-size  : .85rem;
    color      : var(--texte-light);
    transition : color var(--transition);
}
.panier-link-tarifs:hover { color: var(--bleu); }

/* ================================================================
   CONTACT
   ================================================================ */
.contact-layout {
    display               : grid;
    grid-template-columns : 1fr 300px;
    gap                   : 4rem;
    align-items           : start;
}

/* --- Colonne formulaire --- */
.contact-form-col { min-width: 0; }

.form-row-2 {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1rem;
}

.contact-form textarea {
    resize     : vertical;
    min-height : 150px;
}

.contact-alert {
    border-radius : var(--radius-sm);
    padding       : .9rem 1.1rem;
    font-size     : .875rem;
    font-weight   : 500;
    margin-bottom : 1.5rem;
    line-height   : 1.6;
}
.contact-alert-ok  { background: #e8f5e9; color: #1b5e20; border: 1.5px solid #a5d6a7; }
.contact-alert-err { background: #fff8e1; color: #5c4300; border: 1.5px solid var(--jaune-dark); }

.req { color: var(--vert-dark); font-weight: 700; }

.contact-rgpd {
    font-size    : .75rem;
    color        : var(--texte-light);
    line-height  : 1.6;
    margin-bottom: 1.25rem;
    padding      : .75rem 1rem;
    background   : var(--fond);
    border-radius: var(--radius-sm);
    border       : 1px solid var(--border);
}
.contact-rgpd a { color: var(--vert-dark); }

.contact-submit {
    width           : 100%;
    justify-content : center;
    padding         : .95rem 2rem;
    font-size       : 1rem;
}

/* --- Colonne aside coordonnées --- */
.contact-info-col {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
    position       : sticky;
    top            : 100px;
}

.contact-info-card {
    display       : flex;
    gap           : 1rem;
    align-items   : flex-start;
    background    : var(--blanc);
    border        : 1.5px solid var(--border);
    border-radius : var(--radius-md);
    padding       : 1.25rem 1.5rem;
    transition    : box-shadow var(--transition);
}
.contact-info-card:hover { box-shadow: var(--shadow-sm); }

.contact-info-icon {
    font-size   : 1.4rem;
    flex-shrink : 0;
    line-height : 1;
    padding-top : .1rem;
}
.contact-info-body h3 {
    font-size    : .8rem;
    font-weight  : 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color        : var(--texte-light);
    margin-bottom: .3rem;
}
.contact-info-val {
    display      : block;
    font-size    : .95rem;
    font-weight  : 700;
    color        : var(--bleu);
    margin-bottom: .25rem;
    line-height  : 1.4;
}
a.contact-info-val:hover { color: var(--vert-dark); }
.contact-info-body p {
    font-size  : .78rem;
    color      : var(--texte-light);
    line-height: 1.55;
    margin     : 0;
}

/* Encadré FAQ */
.contact-faq-cta {
    background    : var(--bleu);
    border-radius : var(--radius-md);
    padding       : 1.5rem;
    text-align    : center;
    margin-top    : .5rem;
}
.contact-faq-icon { font-size: 1.6rem; margin-bottom: .6rem; }
.contact-faq-cta p {
    font-size    : .85rem;
    color        : rgba(255,255,255,.80);
    line-height  : 1.6;
    margin-bottom: 1rem;
}
.contact-faq-cta strong { color: var(--blanc); }
.contact-faq-btn {
    display       : inline-block;
    background    : rgba(255,255,255,.15);
    border        : 1.5px solid rgba(255,255,255,.35);
    color         : var(--blanc);
    font-size     : .85rem;
    font-weight   : 600;
    padding       : .55rem 1.2rem;
    border-radius : var(--radius-sm);
    transition    : background var(--transition), border-color var(--transition);
}
.contact-faq-btn:hover {
    background   : rgba(255,255,255,.25);
    border-color : var(--blanc);
    color        : var(--blanc);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .filtres-sidebar   { position:static; }
    .footer-inner      { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .profil-layout     { grid-template-columns: 1fr; }
    .faq-layout        { grid-template-columns: 1fr; }
    .faq-visual        { position:static; }
    .faq-visual-placeholder,
    .faq-img           { aspect-ratio: 16/7; }
    .tarif-zones       { grid-template-columns: 1fr; }
    .inclus-grid       { grid-template-columns: 1fr; }
    .chiffres-grid     { grid-template-columns: repeat(3,1fr); }
    .booking-card      { position:static; }
    .profil-page-layout{ grid-template-columns: 1fr; }
    .profil-aside-col  { position: static; }
    .profil-infos-grid { grid-template-columns: 1fr; }
    .apropos-layout    { grid-template-columns: 1fr; }
    .apropos-aside     { flex-direction: row; gap: 1.25rem; }
    .legal-container   { grid-template-columns: 1fr; }
    .legal-toc         { position: static; }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .psy-cards-list { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 768px) {
    /* Navigation */
    .nav-links    { display:none; }
    .nav-links.nav-open { display:flex; flex-direction:column; position:fixed; top:0; left:0; right:0; bottom:0; background:var(--bleu); z-index:999; padding:5rem 2rem 2rem; gap:.25rem; overflow-y:auto; }
    .nav-links.nav-open li a { display:block; color:#fff; font-size:1.15rem; font-weight:600; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.10); }
    .nav-links.nav-open .nav-chevron { display:none; }
    .nav-links.nav-open .nav-dropdown { display:flex; flex-direction:column; padding-left:1rem; gap:0; position:static; box-shadow:none; border:none; background:transparent; }
    .nav-links.nav-open .nav-dropdown a { font-size:1rem; color:rgba(255,255,255,.75); padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
    .nav-dropdown { display:none; }
    .nav-toggle   { display:flex; }

    /* Sous-barre */
    .subbar-inner  { flex-wrap:wrap; gap:.4rem; padding:.4rem 1rem; justify-content:space-between; }
    .subbar-assoc  { display:none; }                              /* texte décoratif masqué */
    .subbar-phone  { font-size:.8rem; }
    .subbar-cta    { white-space:normal; font-size:.78rem; padding:.28rem .75rem; }

    /* Layout */
    .section       { padding: 3rem 1.25rem; }
    .chiffres-grid { grid-template-columns: 1fr; }
    .hero          { padding:3rem 1.25rem 0; }

    /* Recherche */
    .search-box    { flex-wrap:wrap; }
    .btn-search    { width:100%; justify-content:center; }

    /* Stats */
    .stat-sep      { display:none; }
    .stats-bar-inner {
        grid-template-columns : 1fr 1fr 1fr;
        gap                   : 1rem;
        padding               : 1.25rem 1rem;
    }

    /* Footer */
    .footer-inner      { grid-template-columns: 1fr 1fr 1fr; }
    .footer-bottom     { flex-direction: column; align-items: flex-start; gap: .5rem; }

    /* Profil psy */
    .profil-hero-inner { flex-direction:column; align-items:flex-start; }

    /* Listing psy */
    .psy-cards-list { grid-template-columns:1fr; }
    .psy-tarif      { margin-left:0; }

    /* Divers */
    .apropos-aside     { flex-direction: column; }
    .engagement-item   { flex-direction: column; gap: 1rem; }
    .engagement-num    { width: 40px; height: 40px; }
    .faq-cats          { gap: .4rem; }
    .faq-cat           { font-size: .78rem; padding: .38rem .8rem; }
    .contact-layout    { grid-template-columns: 1fr; }
    .contact-info-col  { position: static; flex-direction: row; flex-wrap: wrap; }
    .contact-info-card { flex: 1 1 240px; }
    .form-row-2        { grid-template-columns: 1fr; }
    .panier-layout     { grid-template-columns: 1fr; }
    .panier-aside      { position: static; }
    .panier-item       { flex-wrap: wrap; }
    .panier-item-prix  { width: 100%; text-align: right; }
}

@media (max-width: 480px) {
    .hero h1         { font-size:1.7rem; }
    .section-title   { font-size:1.35rem; }
    .section         { padding: 2.5rem 1rem; }
    .cta-buttons     { flex-direction:column; }
    .btn-primary,
    .btn-outline     { width:100%; justify-content:center; }

    /* Stats — ADELI/RPPS peut wrapper sur très petit écran */
    .stats-bar-inner { grid-template-columns: 1fr 1fr; }
    .stat-val        { font-size:1.35rem; white-space:normal; }
    .stat-text       { font-size:.8rem; letter-spacing:0; }

    /* Sous-barre : masquer les réseaux sociaux, garder tel + CTA */
    .subbar-social   { display:none; }

    /* Footer : brand pleine largeur */
    .footer-brand    { grid-column: 1 / -1; }
    .footer-inner    { grid-template-columns: 1fr 1fr; }

    /* Blog */
    .blog-grid       { grid-template-columns: 1fr; }
}

/* ================================================================
   BLOG — GUIDES & CONSEILS
   ================================================================ */

/* ---- Filtres catégories ---- */
.blog-cats-bar {
    background     : var(--blanc);
    border-bottom  : 1px solid var(--border);
    position       : sticky;
    top            : 0;
    z-index        : 40;
}
.blog-cats-inner {
    max-width  : 1180px;
    margin     : 0 auto;
    padding    : 0 1.5rem;
    display    : flex;
    gap        : .25rem;
    overflow-x : auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.blog-cats-inner::-webkit-scrollbar { display:none; }
.blog-cat-btn {
    white-space    : nowrap;
    padding        : .75rem .9rem;
    background     : none;
    border         : none;
    font-family    : inherit;
    font-size      : .85rem;
    font-weight    : 500;
    color          : var(--texte-light);
    cursor         : pointer;
    border-bottom  : 2.5px solid transparent;
    transition     : color .15s, border-color .15s;
    text-decoration: none;
    display        : inline-block;
}
.blog-cat-btn:hover  { color:var(--bleu); }
.blog-cat-btn.active {
    color         : var(--bleu);
    border-bottom-color: var(--vert);
    font-weight   : 600;
}

/* ---- Corps de page ---- */
.blog-body {
    max-width : 1180px;
    margin    : 0 auto;
    padding   : 2.5rem 1.5rem;
}

.blog-count {
    font-size    : .875rem;
    color        : var(--texte-light);
    margin-bottom: 1.5rem;
}
.blog-count strong { color:var(--bleu); }

/* ---- Grille articles ---- */
.blog-grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 1.5rem;
}

/* ---- Carte article ---- */
.blog-card {
    background    : var(--blanc);
    border-radius : var(--radius-md);
    border        : 1.5px solid var(--border);
    overflow      : hidden;
    display       : flex;
    flex-direction: column;
    transition    : box-shadow .18s, transform .18s;
}
.blog-card:hover {
    box-shadow : 0 8px 28px rgba(7,17,102,.12);
    transform  : translateY(-3px);
}
/* Image de couverture */
.blog-card-img {
    width        : 100%;
    aspect-ratio : 16 / 9;
    object-fit   : cover;
    display      : block;
    background   : #e8ebf5;
}
.blog-card-img-placeholder {
    width        : 100%;
    aspect-ratio : 16 / 9;
    background   : linear-gradient(135deg,#e8ebf5 0%,#dce0f0 100%);
    display      : flex;
    align-items  : center;
    justify-content: center;
    font-size    : 2.5rem;
}
/* Corps */
.blog-card-body {
    padding       : 1.25rem;
    flex          : 1;
    display       : flex;
    flex-direction: column;
    gap           : .5rem;
}
.blog-card-meta {
    display    : flex;
    align-items: center;
    gap        : .65rem;
    flex-wrap  : wrap;
}
.blog-card-cat {
    font-size     : .7rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color         : var(--vert);
    background    : rgba(138,188,39,.1);
    padding       : .2em .65em;
    border-radius : 20px;
}
.blog-card-date {
    font-size : .78rem;
    color     : var(--texte-light);
}
.blog-card-title {
    font-size   : 1.05rem;
    font-weight : 700;
    color       : var(--bleu);
    line-height : 1.35;
    margin      : 0;
}
.blog-card-title a {
    color          : inherit;
    text-decoration: none;
}
.blog-card-title a:hover { color: var(--vert-dk, #6fa01e); }
.blog-card-excerpt {
    font-size   : .875rem;
    color       : var(--texte-light);
    line-height : 1.6;
    flex        : 1;
    /* 3 lignes max */
    display            : -webkit-box;
    -webkit-line-clamp : 3;
    -webkit-box-orient : vertical;
    overflow           : hidden;
}
.blog-card-footer {
    margin-top : .75rem;
    padding-top: .75rem;
    border-top : 1px solid var(--border);
}
.blog-card-lire {
    font-size      : .82rem;
    font-weight    : 600;
    color          : var(--bleu);
    text-decoration: none;
    display        : inline-flex;
    align-items    : center;
    gap            : .3rem;
    transition     : gap .15s, color .15s;
}
.blog-card-lire:hover { color:var(--vert); gap:.5rem; }

/* ---- Vide ---- */
.blog-vide {
    grid-column  : 1/-1;
    text-align   : center;
    padding      : 4rem 1rem;
    color        : var(--texte-light);
}
.blog-vide-icon { font-size:3rem; margin-bottom:.75rem; }

/* ================================================================
   ARTICLE INDIVIDUEL
   ================================================================ */
.article-page {
    max-width : 780px;
    margin    : 0 auto;
    padding   : 2.5rem 1.5rem 4rem;
}

.article-breadcrumb {
    font-size      : .82rem;
    color          : var(--texte-light);
    margin-bottom  : 1.5rem;
    display        : flex;
    align-items    : center;
    gap            : .5rem;
    flex-wrap      : wrap;
}
.article-breadcrumb a { color:var(--bleu); text-decoration:none; }
.article-breadcrumb a:hover { color:var(--vert); }
.article-breadcrumb span { color:var(--texte-light); }

/* Image de tête d'article */
.article-cover {
    width         : 100%;
    aspect-ratio  : 16 / 9;
    object-fit    : cover;
    border-radius : var(--radius-md);
    margin-bottom : 2rem;
    display       : block;
}

.article-header-block {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}
.article-cat-badge {
    display         : inline-flex;
    align-items     : center;
    font-size       : .72rem;
    font-weight     : 700;
    text-transform  : uppercase;
    letter-spacing  : .07em;
    color           : var(--vert);
    background      : rgba(138,188,39,.1);
    padding         : .25em .75em;
    border-radius   : 20px;
    margin-bottom   : .85rem;
}
.article-header-block h1 {
    font-size   : 2rem;
    font-weight : 800;
    color       : var(--bleu);
    line-height : 1.25;
    margin-bottom: .75rem;
}
.article-meta-row {
    display    : flex;
    align-items: center;
    gap        : 1.25rem;
    font-size  : .82rem;
    color      : var(--texte-light);
    flex-wrap  : wrap;
}
.article-meta-row svg { flex-shrink:0; }

.article-chapeau {
    font-size   : 1.1rem;
    color       : var(--texte);
    line-height : 1.7;
    font-weight : 400;
    background  : #f5f7ff;
    border-left : 4px solid var(--bleu);
    padding     : 1rem 1.25rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: 2rem;
}

/* Contenu éditorial */
.article-contenu {
    font-size  : 1rem;
    line-height: 1.8;
    color      : var(--texte);
}
.article-contenu h2 {
    font-size    : 1.45rem;
    font-weight  : 700;
    color        : var(--bleu);
    margin       : 2rem 0 .75rem;
}
.article-contenu h3 {
    font-size    : 1.15rem;
    font-weight  : 600;
    color        : var(--bleu);
    margin       : 1.5rem 0 .5rem;
}
.article-contenu p { margin-bottom:1.1rem; }
.article-contenu ul,
.article-contenu ol {
    margin  : .75rem 0 1.1rem 1.5rem;
}
.article-contenu li { margin-bottom:.35rem; }
.article-contenu a { color:var(--bleu); }
.article-contenu a:hover { color:var(--vert); }
.article-contenu blockquote {
    border-left  : 4px solid var(--vert);
    padding      : .75rem 1.25rem;
    background   : #f7f9f2;
    margin       : 1.5rem 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style   : italic;
    color        : var(--texte-light);
}
.article-contenu img {
    max-width     : 100%;
    border-radius : var(--radius-sm);
    margin        : 1rem 0;
}
.article-contenu table {
    width           : 100%;
    border-collapse : collapse;
    margin          : 1.25rem 0;
    font-size       : .9rem;
}
.article-contenu th {
    background : var(--bleu);
    color      : #fff;
    padding    : .6rem .85rem;
    text-align : left;
}
.article-contenu td {
    padding       : .55rem .85rem;
    border-bottom : 1px solid var(--border);
}

/* Footer article */
.article-footer-block {
    margin-top     : 3rem;
    padding-top    : 1.5rem;
    border-top     : 2px solid var(--border);
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : 1rem;
}
.article-back-link {
    display        : inline-flex;
    align-items    : center;
    gap            : .4rem;
    font-size      : .875rem;
    font-weight    : 500;
    color          : var(--bleu);
    text-decoration: none;
    transition     : gap .15s;
}
.article-back-link:hover { color:var(--vert); gap:.6rem; }

/* CTA bas d'article */
.article-cta {
    background    : linear-gradient(135deg,var(--bleu) 0%,#1a32c8 100%);
    border-radius : var(--radius-md);
    padding       : 2rem;
    text-align    : center;
    color         : #fff;
    margin-top    : 2.5rem;
}
.article-cta h3 { font-size:1.25rem; margin-bottom:.5rem; }
.article-cta p  { font-size:.9rem; opacity:.85; margin-bottom:1.25rem; }

/* Responsive blog */
@media (max-width: 900px) {
    .blog-grid { grid-template-columns: repeat(2,1fr); }
    .article-header-block h1 { font-size:1.6rem; }
}
@media (max-width: 600px) {
    .blog-grid  { grid-template-columns: 1fr; }
    .article-page { padding:1.5rem 1rem 3rem; }
}

/* ================================================================
   SCROLL REVEAL
   Déclenché par IntersectionObserver (main.js)
   ================================================================ */
.reveal {
    opacity    : 0;
    transform  : translateY(28px);
    transition : opacity .6s cubic-bezier(.22,.61,.36,1),
                 transform .6s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.reveal.revealed {
    opacity   : 1;
    transform : none;
}
/* Variante : glisse depuis la gauche (ex. image FAQ) */
.reveal-left {
    opacity   : 0;
    transform : translateX(-32px);
    transition: opacity .65s cubic-bezier(.22,.61,.36,1),
                transform .65s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.reveal-left.revealed { opacity: 1; transform: none; }

/* Variante : glisse depuis la droite */
.reveal-right {
    opacity   : 0;
    transform : translateX(32px);
    transition: opacity .65s cubic-bezier(.22,.61,.36,1),
                transform .65s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.reveal-right.revealed { opacity: 1; transform: none; }

/* Respect accessibilité — pas d'animation si demandé */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right {
        opacity   : 1;
        transform : none;
        transition: none;
    }
}

/* ================================================================
   BLOG — Grille "Derniers conseils" sur la page d'accueil
   ================================================================ */
.blog-home-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 1.75rem;
    margin-top           : 2rem;
}

.blog-home-card {
    background    : var(--blanc);
    border        : 1px solid var(--border);
    border-radius : var(--radius-md);
    overflow      : hidden;
    box-shadow    : var(--shadow-sm);
    display       : flex;
    flex-direction: column;
    transition    : box-shadow var(--transition), transform var(--transition);
}
.blog-home-card:hover {
    box-shadow: var(--shadow-md);
    transform : translateY(-3px);
}

/* ---- Image / placeholder ---- */
.blog-home-card-img-wrap {
    display : block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bleu-light);
}
.blog-home-card-img-wrap img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.blog-home-card:hover .blog-home-card-img-wrap img {
    transform: scale(1.04);
}
.blog-home-card-placeholder {
    width          : 100%;
    height         : 100%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 2.5rem;
    color          : var(--texte-light);
    background     : var(--bleu-light);
}

/* ---- Corps de la carte ---- */
.blog-home-card-body {
    display       : flex;
    flex-direction: column;
    gap           : .5rem;
    padding       : 1.1rem 1.25rem 1.25rem;
    flex          : 1;
}

.blog-home-date {
    font-size  : .75rem;
    color      : var(--texte-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.blog-home-titre {
    font-size  : 1rem;
    font-weight: 700;
    line-height: 1.35;
    color      : var(--bleu);
    margin     : 0;
}
.blog-home-titre a {
    color      : inherit;
    text-decoration: none;
}
.blog-home-titre a:hover {
    color: var(--vert-dark);
}

.blog-home-chapeau {
    font-size  : .875rem;
    color      : var(--texte-light);
    line-height: 1.55;
    flex       : 1;
}

.blog-home-lire {
    display    : inline-block;
    margin-top : .25rem;
    font-size  : .85rem;
    font-weight: 600;
    color      : var(--vert-dark);
    text-decoration: none;
    transition : color var(--transition);
}
.blog-home-lire:hover {
    color: var(--bleu);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .blog-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .blog-home-grid {
        grid-template-columns: 1fr;
    }
}