/*
Theme Name: Hope and Care
Theme URI: https://hopeandcare.cm
Author: Clinique Hope and Care
Description: Thème sur mesure pour la Clinique Hope and Care à Bertoua — gynécologie-obstétrique, médecine générale, chirurgie, laboratoire, imagerie. Conçu pour une lecture confortable sur téléphone et sur des connexions lentes.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Propriétaire
Text Domain: hopeandcare
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. Système de design

   Couleurs : le vert et le bleu de la médecine. Le vert profond porte le
   sérieux et la confiance, le bleu sert d'accent et de couleur d'action.
   Aucune couleur chaude : la chaleur vient des formes arrondies et de
   l'espace, pas de la teinte.

   Typographie : Cormorant Garamond pour les titres — une antique délicate,
   à fort contraste de graisse, franchement féminine — et Nunito pour le
   texte, dont les terminaisons arrondies adoucissent la lecture. C'est le
   couple qui remplace Fraunces/Inter, jugés trop massifs et trop neutres.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --ink:          #10262c;
    --ink-soft:     #486169;
    --ink-faint:    #7b939b;

    /* Vert — identité, confiance */
    --primary:      #0f6357;
    --primary-deep: #084c43;
    --primary-soft: #e1f1ed;
    --primary-tint: #f1f9f7;

    /* Bleu — action, information, médecine */
    --accent:       #1f74b6;
    --accent-deep:  #175a90;
    --accent-soft:  #e5f0fa;
    --accent-pale:  #f4f9fd;

    --sky:          #f5fafc;
    --white:        #ffffff;
    --line:         #dfe8ea;

    --radius-sm: 10px;
    --radius:    18px;
    --radius-lg: 28px;
    --radius-xl: 44px;

    --shadow-sm: 0 1px 2px rgba(16, 38, 44, .05), 0 2px 8px rgba(16, 38, 44, .04);
    --shadow:    0 4px 12px rgba(16, 38, 44, .06), 0 18px 40px -18px rgba(16, 38, 44, .18);
    --shadow-lg: 0 8px 24px rgba(16, 38, 44, .08), 0 40px 80px -32px rgba(15, 99, 87, .28);

    --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
    --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --container: 1180px;
    --gutter: clamp(1.1rem, 4vw, 2.5rem);
    --section: clamp(3.5rem, 9vw, 7.5rem);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. Réinitialisation et bases
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ink-soft);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    /* Sans cette ligne, un mot long (« Gynécologie-obstétrique ») déborde
       horizontalement sur les petits écrans et fait défiler toute la page. */
    overflow-wrap: break-word;
}

/* Cormorant Garamond est une antique délicate : à taille égale elle paraît
   plus petite et plus fine qu'une Fraunces. On compense par des corps plus
   généreux et une graisse 600, sinon les titres s'effacent. */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.12;
    margin: 0 0 .5em;
    font-weight: 600;
    letter-spacing: -.005em;
}
h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
/* h4 sert d'intertitre court : la sans-serif y reste plus lisible. */
h4 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1.25em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-deep); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.35em; }
li { margin-bottom: .45em; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--primary); color: #fff; padding: .85rem 1.4rem;
    border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. Mise en page
   ═══════════════════════════════════════════════════════════════════════ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 760px; }
/* Utilisée par la barre du haut et l'en-tête : ceux-ci occupent toute la
   largeur de l'écran, seuls les contenus restent dans la colonne de lecture. */
.container--wide { max-width: none; padding-inline: clamp(1.1rem, 3vw, 3rem); }

.section { padding-block: var(--section); }
.section--tint { background: var(--primary-tint); }
.section--sky  { background: var(--accent-pale); }
.section--deep { background: var(--primary-deep); color: #c6ded9; }
.section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }

.section-head { max-width: 660px; margin-bottom: clamp(2.25rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 1rem;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; }
.section--deep .eyebrow { color: #7fc0f0; }
.section--deep .eyebrow::before { background: #7fc0f0; }

/* `.lead` ne déclare AUCUNE couleur : elle hérite de sa surface. Une couleur
   propre l'aurait rendue illisible sur chaque fond sombre qui n'a pas reçu de
   surcharge explicite — c'est ce qui s'est produit dans `.cta-band`, où le
   texte ardoise disparaissait sur le vert. Le corps de page fournit déjà
   `--ink-soft` sur fond clair : la déclaration était de toute façon redondante. */
.lead { font-size: clamp(1.06rem, 1.6vw, 1.25rem); line-height: 1.7; }

.grid { display: grid; gap: clamp(1.1rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ═══════════════════════════════════════════════════════════════════════
   4. Boutons
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .9rem 1.7rem;
    font-family: var(--font-body); font-size: 1rem; font-weight: 700;
    border-radius: 999px; border: 2px solid transparent;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--primary-deep); color: #fff; box-shadow: var(--shadow); }

.btn--accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--accent-deep); color: #fff; box-shadow: var(--shadow); }

.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-pale); }

.btn--light { background: #fff; color: var(--primary-deep); }
.btn--light:hover { background: var(--primary-tint); color: var(--primary-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

.link-arrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 700; text-decoration: none; color: var(--accent);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════════════
   5. En-tête — pleine largeur
   ═══════════════════════════════════════════════════════════════════════ */
.topbar { background: var(--primary-deep); color: #a4c6c0; font-size: .875rem; }
.topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding-block: .55rem; }
.topbar__items { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.topbar__item { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__item svg { width: 15px; height: 15px; color: #7fc0f0; flex-shrink: 0; }
.topbar a { color: #fff; text-decoration: none; font-weight: 700; }
.topbar a:hover { color: #7fc0f0; }
.topbar__urgent {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--accent); color: #fff; padding: .3rem .95rem; border-radius: 999px; font-weight: 700;
}
.topbar__urgent svg { width: 15px; height: 15px; color: #fff; }
/* Sous 640 px la barre du haut devient un empilement centré : à l'horizontale
   elle poussait le numéro d'urgence hors de l'écran. */
@media (max-width: 640px) {
    .topbar { font-size: .8rem; }
    .topbar__inner { justify-content: center; text-align: center; }
    .topbar__items { justify-content: center; gap: .5rem 1rem; }
}

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .8rem; }

.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 46px; height: 46px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
/* Sans ce nowrap, « Clinique Hope and Care » se replie sur quatre lignes dès
   que la barre est serrée et fait exploser la hauteur de l'en-tête. */
.brand__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.brand__tag { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav ul { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; position: relative; }
/* Scopé à `.nav ul a` et non à `.nav a` : sinon ces règles happent aussi le
   bouton d'appel du menu mobile, avec une spécificité (0,1,1) qui écrase
   `.nav__cta { display:none }` (0,1,0) — le bouton réapparaissait alors sur
   grand écran, à côté des deux autres. */
.nav ul a {
    text-decoration: none; color: var(--ink); font-weight: 600; font-size: .97rem;
    padding-block: .4rem; border-bottom: 2px solid transparent; display: block;
}
.nav ul > li > a { white-space: nowrap; }
.nav ul a:hover, .nav .current-menu-item > a, .nav .current_page_item > a {
    color: var(--primary); border-bottom-color: var(--accent);
}
.nav .sub-menu {
    position: absolute; top: 100%; left: -1rem; min-width: 235px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); padding: .5rem; flex-direction: column; gap: 0;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s ease;
}
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav .sub-menu a { padding: .55rem .9rem; border-bottom: 0; border-radius: 8px; white-space: normal; }
.nav .sub-menu a:hover { background: var(--primary-tint); }

.nav-toggle {
    display: none; background: transparent; border: 1px solid var(--line);
    border-radius: 10px; padding: .5rem .65rem; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 24px; height: 24px; display: block; }

.header-actions { display: flex; align-items: center; gap: .75rem; }

/* Les intitulés français sont longs : sous 1240 px le numéro de téléphone
   fait déborder la barre. On sacrifie le bouton téléphone (le numéro reste
   dans la barre du haut) avant de sacrifier la lisibilité du menu. */
@media (max-width: 1240px) {
    .header-actions .btn--ghost { display: none; }
}

@media (max-width: 1000px) {
    .nav-toggle { display: block; }
    .header-actions { display: none; }
    .nav {
        position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px);
        background: #fff; flex-direction: column; align-items: stretch; gap: 0;
        padding: 5.5rem 1.5rem 2rem; box-shadow: var(--shadow-lg);
        transform: translateX(100%); transition: transform .28s ease; overflow-y: auto;
    }
    .nav[data-open='true'] { transform: translateX(0); }
    .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .nav li { border-bottom: 1px solid var(--line); }
    .nav ul a { padding: .95rem 0; border-bottom: 0; font-size: 1.05rem; }
    .nav ul > li > a { white-space: normal; }
    .nav .sub-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; padding: 0 0 .5rem .9rem; min-width: 0;
    }
    .nav__cta { margin-top: 1.5rem; }
    .nav-close { position: absolute; top: 1.25rem; right: 1.25rem; }
}
@media (min-width: 1001px) {
    .nav__cta { display: none; }
    .nav-close { display: none; }
}

/* Petits téléphones (360–480 px). La marque est en `white-space: nowrap` pour
   ne pas se replier sur quatre lignes ; à 1.5rem elle occupe ~260 px, auxquels
   s'ajoutent le bouton de menu et les marges — soit plus que la largeur d'un
   Android d'entrée de gamme. On réduit le corps et on retire la mention
   secondaire plutôt que de laisser la barre déborder à l'horizontale. */
@media (max-width: 480px) {
    .site-header__inner { gap: .75rem; padding-block: .65rem; }
    .brand { gap: .55rem; }
    .brand__mark { width: 38px; height: 38px; }
    .brand__name { font-size: 1.15rem; }
    .brand__tag { display: none; }
    .btn { padding: .8rem 1.35rem; font-size: .95rem; }
}

/* Très petits écrans : la marque passe au sigle, le nom complet reste lisible
   par les lecteurs d'écran via l'attribut du lien. */
@media (max-width: 360px) {
    .brand__name { font-size: 1.02rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. Héros
   ═══════════════════════════════════════════════════════════════════════ */
.hero { position: relative; overflow: hidden; background: linear-gradient(170deg, var(--accent-pale) 0%, var(--primary-tint) 100%); }
.hero::before {
    content: ''; position: absolute; top: -30%; right: -12%; width: 62vw; height: 62vw;
    max-width: 820px; max-height: 820px;
    background: radial-gradient(circle at 35% 35%, var(--primary-soft), transparent 68%);
    border-radius: 50%; pointer-events: none;
}
.hero__inner {
    position: relative; display: grid; gap: clamp(2.25rem, 5vw, 4.5rem);
    grid-template-columns: 1.05fr .95fr; align-items: center;
    padding-block: clamp(3rem, 7vw, 6rem);
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }

.hero__badge {
    display: inline-flex; align-items: center; gap: .6rem;
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: .45rem 1.1rem .45rem .5rem; font-size: .85rem; font-weight: 700; color: var(--ink);
    box-shadow: var(--shadow-sm); margin-bottom: 1.5rem;
}
.hero__badge span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.hero__badge svg { width: 15px; height: 15px; }

.hero h1 { margin-bottom: .35em; }
.hero h1 em { font-style: italic; color: var(--primary); position: relative; }
.hero__lead { font-size: clamp(1.06rem, 1.7vw, 1.3rem); max-width: 34em; margin-bottom: 2rem; }

.hero__trust { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: 2.5rem; }
.hero__trust-item { display: flex; align-items: center; gap: .7rem; }
.hero__trust-item svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; }
.hero__trust-item strong { color: var(--ink); font-weight: 700; font-size: .93rem; }

.hero__visual { position: relative; aspect-ratio: 1 / 1.05; }
@media (max-width: 900px) { .hero__visual { max-width: 460px; margin-inline: auto; width: 100%; } }
.hero__frame {
    position: absolute; inset: 0;
    border-radius: 52% 48% 46% 54% / 48% 44% 56% 52%;
    overflow: hidden; box-shadow: var(--shadow-lg);
    background: linear-gradient(150deg, var(--primary) 0%, var(--primary-deep) 55%, #05332d 100%);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__pattern { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero__chip {
    position: absolute; background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .85rem 1.1rem;
    display: flex; align-items: center; gap: .75rem; max-width: 240px;
}
.hero__chip svg { width: 30px; height: 30px; color: var(--accent); flex-shrink: 0; }
.hero__chip strong { display: block; color: var(--ink); font-size: 1.4rem; font-family: var(--font-display); font-weight: 700; line-height: 1; }
.hero__chip span { font-size: .8rem; color: var(--ink-faint); }
.hero__chip--a { bottom: 8%; left: -4%; }
.hero__chip--b { top: 7%; right: -3%; }
@media (max-width: 600px) {
    .hero__chip { padding: .7rem .9rem; max-width: 190px; }
    .hero__chip svg { width: 24px; height: 24px; }
    .hero__chip strong { font-size: 1.15rem; }
    .hero__chip span { font-size: .72rem; }
    .hero__chip--a { left: 0; bottom: 2%; }
    .hero__chip--b { right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. Cartes de service
   ═══════════════════════════════════════════════════════════════════════ */
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 3vw, 2.25rem);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex; flex-direction: column; height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card__icon {
    width: 56px; height: 56px; border-radius: 16px;
    display: grid; place-items: center; margin-bottom: 1.25rem;
    background: var(--accent-soft); color: var(--accent);
}
.card__icon svg { width: 28px; height: 28px; }
.card--feature { background: var(--primary-deep); border-color: transparent; color: #aacfc9; }
.card--feature h3, .card--feature .card__title { color: #fff; }
.card--feature .card__icon { background: rgba(255, 255, 255, .12); color: #7fc0f0; }
.card--feature .link-arrow { color: #7fc0f0; }
.card h3 { margin-bottom: .4rem; }
.card p { margin-bottom: 1.25rem; }
.card .link-arrow { margin-top: auto; }

.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.tag-list li {
    margin: 0; font-size: .82rem; font-weight: 700; padding: .35rem .85rem;
    border-radius: 999px; background: var(--primary-tint); color: var(--primary-deep);
}
.section--deep .tag-list li { background: rgba(255, 255, 255, .1); color: #cfe5e1; }

/* ═══════════════════════════════════════════════════════════════════════
   8. Parcours de grossesse
   ═══════════════════════════════════════════════════════════════════════ */
.journey { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); counter-reset: step; }
.journey__step {
    position: relative; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 2.5rem 1.4rem 1.6rem; counter-increment: step;
}
.journey__step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; top: 1.1rem; left: 1.4rem;
    font-family: var(--font-display); font-size: 1.7rem; color: var(--accent); font-weight: 700;
}
.journey__step h4 { margin: .6rem 0 .5rem; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.journey__step p { font-size: .95rem; margin: 0; }
.journey__step small { display: block; margin-top: .85rem; font-weight: 700; color: var(--primary); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════════════
   9. Chiffres, personnes, citations
   ═══════════════════════════════════════════════════════════════════════ */
.stats { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); text-align: center; }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.8rem); color: #fff; line-height: 1; margin-bottom: .35rem; }
.stat__value span { color: #7fc0f0; }
.stat__label { font-size: .95rem; color: #aacfc9; }

.person { text-align: center; }
.person__avatar {
    width: 128px; height: 128px; margin: 0 auto 1.25rem; border-radius: 50%;
    background: linear-gradient(150deg, var(--primary-soft), var(--accent-soft));
    display: grid; place-items: center; overflow: hidden; border: 3px solid #fff; box-shadow: var(--shadow-sm);
}
.person__avatar img { width: 100%; height: 100%; object-fit: cover; }
.person__initials { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--primary); }
.person h4 { margin-bottom: .2rem; }
.person__role { font-size: .9rem; color: var(--accent); font-weight: 700; margin-bottom: .5rem; }
.person p { font-size: .92rem; margin: 0; }

.quote {
    background: #fff; border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.5rem);
    border: 1px solid var(--line); position: relative; height: 100%;
    display: flex; flex-direction: column;
}
.quote__mark { width: 34px; height: 34px; color: var(--accent-soft); margin-bottom: 1rem; }
.quote p { font-size: 1.15rem; color: var(--ink); font-family: var(--font-display); }
.quote footer { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9rem; }
.quote footer strong { display: block; color: var(--ink); }
.quote footer span { color: var(--ink-faint); }

/* ═══════════════════════════════════════════════════════════════════════
   10. Bandeau d'appel, informations pratiques, carte
   ═══════════════════════════════════════════════════════════════════════ */
.cta-band {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    border-radius: var(--radius-xl); padding: clamp(1.75rem, 5vw, 4rem);
    color: #c6ded9; position: relative; overflow: hidden;
}
.cta-band::after {
    content: ''; position: absolute; right: -8%; top: -40%; width: 46%; aspect-ratio: 1;
    background: radial-gradient(circle, rgba(127, 192, 240, .22), transparent 65%); border-radius: 50%;
}
.cta-band h2 { color: #fff; }
.cta-band__inner { position: relative; display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr; align-items: center; }
@media (max-width: 820px) { .cta-band__inner { grid-template-columns: 1fr; } }

.info-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.6rem; height: 100%;
}
.info-card h4 { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.info-card h4 svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.info-card dl { margin: 0; display: grid; gap: .55rem; }
.info-card .row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.info-card dt { color: var(--ink-soft); margin: 0; }
.info-card dd { margin: 0; color: var(--ink); font-weight: 700; text-align: right; }

/* ── Carte de localisation ────────────────────────────────────────────── */
.map-block { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; }
@media (max-width: 900px) { .map-block { grid-template-columns: 1fr; } }

.map-block__info {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column;
}
.map-block__list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.1rem; }
.map-block__list li { display: flex; gap: .85rem; align-items: flex-start; margin: 0; }
.map-block__list svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: .25rem; }
.map-block__list strong { display: block; color: var(--ink); font-size: .95rem; }
.map-block__list span { font-size: .95rem; }
.map-block__info .btn-row { margin-top: auto; }

.map-block__frame {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--shadow);
    min-height: 340px; background: var(--primary-soft);
}
.map-block__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .map-block__frame { min-height: 300px; aspect-ratio: 4 / 3; } }

/* ═══════════════════════════════════════════════════════════════════════
   11. Blog
   ═══════════════════════════════════════════════════════════════════════ */
.post-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(140deg, var(--primary-soft), var(--accent-soft)); position: relative; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--primary); opacity: .28; }
.post-card__glyph svg { width: 62px; height: 62px; }
.post-card__body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: .6rem .75rem; align-items: center; font-size: .82rem; color: var(--ink-faint); margin-bottom: .75rem; }
.post-card__cat {
    background: var(--accent-soft); color: var(--accent-deep); font-weight: 700;
    padding: .25rem .7rem; border-radius: 999px; text-decoration: none; font-size: .74rem;
    letter-spacing: .04em; text-transform: uppercase;
}
.post-card__cat:hover { background: var(--accent); color: #fff; }
.post-card h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a:hover { color: var(--primary); }
.post-card p { font-size: .95rem; margin-bottom: 1.25rem; }
.post-card .link-arrow { margin-top: auto; font-size: .92rem; }

.page-hero { background: var(--primary-tint); padding-block: clamp(2.5rem, 6vw, 4.75rem); border-bottom: 1px solid var(--line); }
.breadcrumb { font-size: .85rem; color: var(--ink-faint); margin-bottom: 1rem; }
.breadcrumb a { text-decoration: none; }
.breadcrumb span { margin-inline: .5rem; }

.entry-meta { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; font-size: .9rem; color: var(--ink-faint); margin-top: 1.5rem; }
.entry-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.entry-meta svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

.entry-content { font-size: 1.09rem; }
.entry-content > * + * { margin-top: 1.35em; }
.entry-content h2 { margin-top: 2em; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.entry-content h3 { margin-top: 1.6em; }
.entry-content img, .entry-content figure { border-radius: var(--radius); }
.entry-content figcaption { font-size: .875rem; color: var(--ink-faint); text-align: center; margin-top: .75rem; }
.entry-content blockquote {
    margin: 2em 0; padding: 1.4rem 1.6rem; border-left: 4px solid var(--accent);
    background: var(--accent-pale); border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-display); font-size: 1.35rem; line-height: 1.4; color: var(--ink);
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content a { font-weight: 600; }
.entry-content code { background: var(--primary-tint); padding: .15em .4em; border-radius: 5px; font-size: .9em; }
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
/* Un tableau plus large que l'écran doit défiler dans son propre cadre,
   jamais entraîner toute la page à l'horizontale. */
.entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { padding: .7rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.entry-content th { background: var(--primary-tint); color: var(--ink); font-weight: 700; }

.medical-notice {
    display: flex; gap: 1rem; align-items: flex-start;
    background: var(--accent-soft); border-radius: var(--radius); padding: 1.25rem 1.4rem;
    font-size: .95rem; color: #14456e; margin-top: 3rem;
}
.medical-notice svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); margin-top: .15rem; }
.medical-notice p { margin: 0; }

.pagination { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 3.5rem; }
.pagination .page-numbers {
    display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: .75rem;
    border-radius: 12px; border: 1px solid var(--line); text-decoration: none;
    color: var(--ink); font-weight: 700;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   12. Pied de page
   ═══════════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--primary-deep); color: #92b5b0; padding-block: clamp(2.5rem, 6vw, 5rem) 2rem; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.15rem; }
.site-footer a { color: #c6ded9; text-decoration: none; }
.site-footer a:hover { color: #7fc0f0; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 2rem; } }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-grid li { margin: 0; font-size: .95rem; }
.footer-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.15rem; }
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__tag { color: #7fc0f0; }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; color: #7fc0f0; flex-shrink: 0; margin-top: .22rem; }
.footer-bottom {
    margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .875rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   13. Utilitaires et blocs WordPress
   ═══════════════════════════════════════════════════════════════════════ */
.alignwide { max-width: min(1180px, 100%); }
.alignfull { max-width: 100%; }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.wp-caption { max-width: 100%; }
.sticky, .gallery-caption, .bypostauthor { display: block; }
/* Les flottants n'ont plus de sens sur un téléphone : une image à 45 % de
   large y devient une vignette illisible collée au texte. */
@media (max-width: 640px) {
    .alignleft, .alignright { float: none; margin: 1.5rem auto; }
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }