/* =====================================================================
   Cabinet Dr Mohammed BOURHIM — feuille de style
   Palette reprise de la carte de visite : bleu médical et blanc.
   Écrite en propriétés logiques (inline-start/end) : la bascule
   arabe en RTL ne demande aucune règle supplémentaire.
   ===================================================================== */

:root {
    /* Bleu de la carte de visite */
    --blue-900: #0B2C45;
    --blue-800: #103F62;
    --blue-700: #12507E;
    --blue-600: #1B6CA8;
    --blue-500: #2E86C1;
    --blue-300: #7FB6DA;
    --blue-100: #DCEAF5;
    --blue-50:  #F1F7FC;

    --teal-600: #128C7E;
    --teal-700: #0F7568;
    --teal-50:  #E6F4F1;

    /* Pastilles « cabinet ouvert / fermé » du bandeau supérieur.
       Elles ne reprennent pas --success et --danger, qui sont calibrés
       pour du texte sur fond clair : ici le fond est le bleu-nuit.
       Mesurées à 6,47:1 et 5,17:1 contre lui. */
    --dot-open:   #6BBF8A;
    --dot-closed: #C98B8B;

    /* Étoiles d'un avis. L'or habituel (#E0A800) ne tient que 2,15:1 sur
       blanc, sous le seuil de 3:1 qu'exige un graphique porteur de sens.
       Celui-ci atteint 3,78:1. */
    --gold: #AD7A00;

    --ink:      #10243A;
    --ink-soft: #33506B;
    --muted:    #64809A;
    --line:     #DDE7F0;
    --line-soft:#EDF3F8;

    --surface:  #FFFFFF;
    --ground:   #F5F9FC;

    --success:  #1E7A4D;
    --success-bg:#E6F4EC;
    --warning:  #9A6100;
    --warning-bg:#FDF3E2;
    --danger:   #B3261E;
    --danger-bg:#FCEBEA;

    /* Rayons. La feuille en comptait huit pour cinq intentions : 9, 10
       et 11 px décrivent le même arrondi, personne ne les distingue. */
    --radius-xs:   4px;
    --radius-sm:   10px;
    --radius:      14px;
    --radius-lg:   22px;
    --radius-pill: 100px;

    --shadow-sm: 0 1px 2px rgba(16, 36, 58, .06), 0 1px 3px rgba(16, 36, 58, .04);
    --shadow:    0 4px 12px rgba(16, 36, 58, .07), 0 1px 3px rgba(16, 36, 58, .05);
    --shadow-lg: 0 18px 44px rgba(16, 36, 58, .12), 0 4px 12px rgba(16, 36, 58, .06);

    /* Polices hébergées localement — voir tools/fetch-fonts.php.
       La pile de secours n'est pas décorative : elle sert pendant les
       quelques dizaines de millisecondes du « font-display: swap ». */
    --sans:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --display: "Lexend", "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --arabic:         "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    --arabic-display: "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;

    /* Échelle typographique.

       La feuille employait 32 tailles distinctes, dont « .93 », « .94 »,
       « .945 » et « .95 » — un demi-pixel d'écart que personne ne
       perçoit. Ce n'étaient pas des décisions mais des accidents.
       Dix paliers les remplacent. Les tailles fluides (clamp) des
       titres restent à part : elles répondent à la largeur, pas à
       la hiérarchie. */
    --text-2xs:  .78rem;
    --text-xs:   .82rem;
    --text-sm:   .87rem;
    --text-md:   .93rem;
    --text-base: 1rem;
    --text-lg:   1.06rem;
    --text-xl:   1.1rem;
    --text-2xl:  1.16rem;
    --text-3xl:  1.3rem;
    --text-4xl:  1.45rem;

    /* Rythme vertical. Une seule échelle, partout : c'est elle qui fait
       qu'une page paraît composée plutôt qu'assemblée. */
    --space-2xs: .35rem;
    --space-xs:  .6rem;
    --space-sm:  1rem;
    --space-md:  1.6rem;
    --space-lg:  2.6rem;
    --space-xl:  4.2rem;

    --wrap: 1180px;
    --header-h: 76px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    /* Source Sans 3 a une hauteur d'x plus basse que la police système
       qu'elle remplace : à 16,5 px elle paraîtrait plus petite. */
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html[dir="rtl"] body { font-family: var(--arabic); line-height: 1.9; }

/* ---- Les surfaces que le navigateur impose ----
   Sélection, curseur de saisie, barre de défilement : livrées par
   défaut dans un gris qui n'appartient à aucune charte. Les teinter
   coûte six lignes et se remarque immédiatement. */

::selection { background: var(--blue-100); color: var(--blue-900); }
::-moz-selection { background: var(--blue-100); color: var(--blue-900); }

input, textarea, select { caret-color: var(--blue-600); }

html { scrollbar-color: var(--blue-300) var(--blue-50); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--blue-50); }
::-webkit-scrollbar-thumb {
    background: var(--blue-300);
    border: 3px solid var(--blue-50);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--blue-500); }

/* Les chiffres d'un tableau d'horaires ou d'une liste de créneaux
   doivent s'aligner en colonne : chasse fixe, pas proportionnelle. */
.hours, .slot, .slots, time, .badge--time { font-variant-numeric: tabular-nums; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-700); }

h1, h2, h3, h4 {
    font-family: var(--display);
    margin: 0 0 .6em;
    line-height: 1.18;
    letter-spacing: -.022em;
    color: var(--blue-900);
    font-weight: 600;
    /* Évite le mot seul en dernière ligne d'un titre. */
    text-wrap: balance;
}

/* Lexend s'élargit en descendant l'échelle : le resserrage doit suivre,
   sinon un h3 paraît plus lâche qu'un h1. */
h1 { letter-spacing: -.03em; font-weight: 650; }
h2 { letter-spacing: -.024em; }
h3 { letter-spacing: -.012em; font-weight: 600; }
h4 { letter-spacing: -.006em; }

html[dir="rtl"] h1, html[dir="rtl"] h2,
html[dir="rtl"] h3, html[dir="rtl"] h4 {
    font-family: var(--arabic-display);
    letter-spacing: 0;
    line-height: 1.5;
    font-weight: 600;
    /* Le kufi n'a pas de version fine : on ne descend pas sous 400. */
}

h1 { font-size: clamp(1.95rem, 1.35rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.35vw, 2.2rem); }
h3 { font-size: clamp(1.13rem, 1.03rem + .45vw, 1.35rem); }

p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-inline-start: 1.35em; }
li { margin-bottom: .35em; }

/* ---- Focus au clavier ----

   L'anneau était bleu-500 partout. Mesuré contre les surfaces réelles,
   cela donnait 1,65:1 sur la bande bleue et 1,41:1 sur le bouton
   « Prendre rendez-vous » — la règle WCAG 2.2 (SC 1.4.11) en exige 3.
   Autrement dit : sur le contrôle le plus important du site, une
   personne naviguant au clavier ne voyait pas où elle se trouvait.

   Aucune couleur unique ne tient sur du blanc ET sur du bleu foncé.
   D'où deux anneaux : sombre par défaut, blanc sur fond sombre.
   Mesures : 11,7 à 14,4:1 sur les surfaces claires, 5,6 à 14,4:1 sur
   les surfaces sombres. */
:focus-visible {
    outline: 3px solid var(--blue-900);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.hero :focus-visible,
.section--blue :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.topbar :focus-visible,
.btn--primary:focus-visible {
    outline-color: #fff;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: -100px;
    z-index: 999;
    background: var(--blue-700);
    color: #fff;
    padding: .7rem 1.15rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: 600;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------------------------------------------------------------- */
/*  Structure                                                        */
/* ---------------------------------------------------------------- */

.wrap {
    width: min(100% - 2.5rem, var(--wrap));
    margin-inline: auto;
}

.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section--tight { padding-block: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); }
.section--ground { background: var(--ground); }
.section--blue {
    background: linear-gradient(160deg, var(--blue-800), var(--blue-600));
    color: #fff;
}
.section--blue h2, .section--blue h3 { color: #fff; }

/* ---- Bandeau bleu avec photographie en fond ---- */

.section--photo { position: relative; overflow: hidden; }
.section--photo > .wrap { position: relative; z-index: 2; }

.section__media { position: absolute; inset: 0; z-index: 0; }
.section__media picture, .section__media img { display: block; width: 100%; height: 100%; }
.section__media img { object-fit: cover; object-position: center 38%; }

/* Le texte court sur toute la largeur du bandeau — il n'y a pas de côté
   « libre » comme dans le hero. Le voile doit donc être dense partout.

   Le dernier arrêt montait auparavant jusqu'au bleu-600 à .88. Recalculé
   en supposant la photographie BLANCHE sous le voile — le pire cas
   absolu — cela ne donnait que 4,40:1 pour du blanc pur : suffisant pour
   un grand titre (seuil 3:1), mais sous le seuil de 4,5:1 dès qu'il
   s'agit de texte courant, ce que sont le chapô et les quatre points
   forts. Le bleu-700 à .90 porte ce même pire cas à 6,57:1. */
.section__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(160deg,
            rgba(16,63,98,.94) 0%,
            rgba(17,72,112,.92) 55%,
            rgba(18,80,126,.90) 100%);
}

/* L'entête de section est aligné à gauche, là où commence la lecture.
   Tout centrer donnait sept sections d'affilée au même rythme et
   rendait chaque titre plus lent à accrocher. */
.section-head {
    max-width: 54ch;
    margin-bottom: var(--space-lg);
}

.section-head h2 { margin-bottom: .35em; }

.lead {
    font-size: var(--text-xl);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 56ch;
    margin-bottom: 0;
}
.section--blue .lead { color: rgba(255,255,255,.88); }

/* Plus d'air au-dessus d'un titre qu'en dessous : c'est ce qui rattache
   visuellement un titre à ce qu'il annonce plutôt qu'à ce qui précède. */
.section-head + * { margin-top: 0; }

/* Ligne de date d'un article, sous le titre du bandeau. */
.hero__dateline {
    margin: .1rem 0 0;
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(255,255,255,.82);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/*  Bandeau supérieur et en-tête                                     */
/* ---------------------------------------------------------------- */

.topbar {
    background: var(--blue-900);
    color: rgba(255,255,255,.9);
    font-size: var(--text-sm);
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 40px;
    flex-wrap: wrap;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--blue-300); text-decoration: underline; }
.topbar__group { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; }

.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--dot-open);
    box-shadow: 0 0 0 3px rgba(107, 191, 138, .25);
    flex: none;
}
.status-dot--closed { background: var(--dot-closed); box-shadow: 0 0 0 3px rgba(201, 139, 139, .22); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
    flex: none;
}
.brand__mark {
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(150deg, var(--blue-600), var(--blue-800));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: .02em;
    flex: none;
    box-shadow: var(--shadow-sm);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.22; }
.brand__name {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -.017em;
    color: var(--blue-900);
    font-size: var(--text-lg);
}
html[dir="rtl"] .brand__name { font-family: var(--arabic-display); letter-spacing: 0; }
.brand__role { font-size: var(--text-2xs); color: var(--muted); }

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a, .nav button { font-family: var(--display); letter-spacing: -.008em; }
html[dir="rtl"] .nav a, html[dir="rtl"] .nav button { font-family: var(--arabic-display); letter-spacing: 0; }
.nav a {
    padding: .55rem .8rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-md);
    white-space: nowrap;
}
.nav a:hover { background: var(--blue-50); color: var(--blue-700); }
.nav a[aria-current="page"] { color: var(--blue-700); background: var(--blue-50); }

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

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    background: #fff;
}
.lang-switch:hover { border-color: var(--blue-300); color: var(--blue-700); }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    place-items: center;
}
.nav-toggle span {
    display: block;
    width: 19px; height: 2px;
    background: var(--blue-800);
    border-radius: var(--radius-xs);
    position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
    content: ""; position: absolute;
    inset-inline-start: 0;
    width: 19px; height: 2px;
    background: var(--blue-800);
    border-radius: var(--radius-xs);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* ---------------------------------------------------------------- */
/*  Boutons                                                          */
/* ---------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .8rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font: inherit;
    /* Lexend jusque dans les commandes : un bouton en police de texte
       au milieu de titres en Lexend se voit immédiatement. */
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--text-md);
    letter-spacing: -.005em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
html[dir="rtl"] .btn { font-family: var(--arabic-display); letter-spacing: 0; }
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--blue-600);
    color: #fff;
    box-shadow: 0 2px 8px rgba(27,108,168,.28);
}
.btn--primary:hover { background: var(--blue-700); color: #fff; box-shadow: 0 4px 14px rgba(27,108,168,.34); }

.btn--ghost {
    background: #fff;
    color: var(--blue-700);
    border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--blue-300); background: var(--blue-50); color: var(--blue-700); }

.btn--onblue {
    background: rgba(255,255,255,.14);
    color: #fff;
    border-color: rgba(255,255,255,.34);
}
.btn--onblue:hover { background: rgba(255,255,255,.24); color: #fff; }

.btn--whatsapp { background: var(--teal-600); color: #fff; }
.btn--whatsapp:hover { background: var(--teal-700); color: #fff; }

.btn--sm { padding: .5rem .9rem; font-size: var(--text-sm); }
.btn--block { width: 100%; }
/* Désactivé : l'opacité seule fait un bouton « pâle », pas un bouton
   « indisponible ». On retire aussi le relief et la réaction au clic,
   pour que l'état se lise sans comparer à un voisin actif. */
.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(.35);
}
.btn[disabled]:active, .btn[aria-disabled="true"]:active { transform: none; }

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

/* ---------------------------------------------------------------- */
/*  Bandeau d'accueil                                                */
/* ---------------------------------------------------------------- */

.hero {
    position: relative;
    /* Reste visible tant que les photographies n'ont pas chargé, et
       sert de fond si elles ne chargent pas du tout. */
    background:
        radial-gradient(1000px 480px at 82% -12%, rgba(46,134,193,.30), transparent 62%),
        linear-gradient(158deg, var(--blue-900) 0%, var(--blue-700) 58%, var(--blue-600) 100%);
    color: #fff;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    inset-inline-end: -160px;
    top: -120px;
    width: 620px; height: 620px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.11);
    pointer-events: none;
    z-index: 2;
}

/* ---- Diaporama de fond ---- */

.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}
.hero__slide[data-active="true"] { opacity: 1; }
.hero__slide picture, .hero__slide img { display: block; width: 100%; height: 100%; }
.hero__slide img { object-fit: cover; object-position: center; }

/* Le voile garantit le contraste du texte blanc quelle que soit la
   photographie affichée. Il est plus dense du côté du texte et
   s'éclaircit vers la carte des disponibilités. */
/* Densité calibrée : ~0.88 derrière le texte, ~0.40 côté image. Même
   sur la zone la plus claire d'une photographie, le blanc conserve un
   contraste supérieur à 8:1 — bien au-delà du minimum AA — tandis que
   la moitié droite laisse réellement voir le bloc opératoire. */
.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(11,44,69,.45) 0%, rgba(11,44,69,0) 26%, rgba(11,44,69,.45) 100%),
        linear-gradient(100deg,
            rgba(11,44,69,.90) 0%,
            rgba(13,52,82,.84) 32%,
            rgba(16,63,98,.62) 58%,
            rgba(18,80,126,.40) 100%);
}
html[dir="rtl"] .hero__veil {
    background:
        linear-gradient(to bottom, rgba(11,44,69,.45) 0%, rgba(11,44,69,0) 26%, rgba(11,44,69,.45) 100%),
        linear-gradient(260deg,
            rgba(11,44,69,.90) 0%,
            rgba(13,52,82,.84) 32%,
            rgba(16,63,98,.62) 58%,
            rgba(18,80,126,.40) 100%);
}

/* Sur écran étroit la mise en page s'empile et le texte occupe toute la
   largeur : le dégradé horizontal ne protège plus rien, il faut un
   voile uniformément dense. */
@media (max-width: 900px) {
    /* Le dégradé est vertical, donc symétrique : les deux directions
       d'écriture partagent la même règle. */
    .hero__veil,
    html[dir="rtl"] .hero__veil {
        background:
            linear-gradient(to bottom,
                rgba(11,44,69,.88) 0%,
                rgba(13,52,82,.80) 55%,
                rgba(11,44,69,.90) 100%);
    }

    /* Le bandeau compact porte beaucoup moins de texte que celui de
       l'accueil : il peut laisser voir davantage la photographie sans
       descendre sous les seuils de contraste. */
    .hero--compact .hero__veil,
    html[dir="rtl"] .hero--compact .hero__veil {
        background:
            linear-gradient(to bottom,
                rgba(11,44,69,.84) 0%,
                rgba(13,52,82,.74) 55%,
                rgba(11,44,69,.86) 100%);
    }
}

.hero__inner { position: relative; z-index: 3; }

/* ---- Bandeau compact des pages intérieures ---- */

.hero--compact .hero__inner {
    display: block;
    padding-block: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem);
}
.hero--compact h1 {
    font-size: clamp(1.65rem, 1.25rem + 1.9vw, 2.55rem);
    margin-bottom: .5rem;
    max-width: 22ch;
}
html[dir="rtl"] .hero--compact h1 { max-width: 26ch; }
.hero--compact .hero__lead { margin-bottom: 0; max-width: 62ch; font-size: var(--text-lg); }

/* Le cercle décoratif du grand bandeau serait tronqué ici. */
.hero--compact::after { display: none; }

/* Sur une page intérieure, le contenu suit immédiatement : le voile
   n'a pas de côté « libre » à ménager comme sur l'accueil. */
.hero--compact .hero__veil {
    background:
        linear-gradient(to bottom, rgba(11,44,69,.40) 0%, rgba(11,44,69,.18) 45%, rgba(11,44,69,.42) 100%),
        linear-gradient(100deg,
            rgba(11,44,69,.88) 0%,
            rgba(13,52,82,.80) 40%,
            rgba(16,63,98,.60) 72%,
            rgba(18,80,126,.44) 100%);
}
html[dir="rtl"] .hero--compact .hero__veil {
    background:
        linear-gradient(to bottom, rgba(11,44,69,.40) 0%, rgba(11,44,69,.18) 45%, rgba(11,44,69,.42) 100%),
        linear-gradient(260deg,
            rgba(11,44,69,.88) 0%,
            rgba(13,52,82,.80) 40%,
            rgba(16,63,98,.60) 72%,
            rgba(18,80,126,.44) 100%);
}

/* Fil d'Ariane posé sur la photographie : il lui faut ses propres
   couleurs, celles du fil d'Ariane sur fond blanc y seraient illisibles.
   C'est le plus petit texte du bandeau, donc le plus exposé : il est
   volontairement plus lumineux que sur fond blanc. */
.breadcrumb--onphoto { padding-block: 0 .9rem; color: rgba(255,255,255,.85); }
.breadcrumb--onphoto a { color: rgba(255,255,255,.9); }
.breadcrumb--onphoto a:hover { color: #fff; }
.breadcrumb--onphoto li + li::before { color: rgba(255,255,255,.55); }
.breadcrumb--onphoto [aria-current="page"] { color: #fff; font-weight: 600; }

.hero--compact .hero__dots { bottom: .8rem; }

/* ---- Pastilles de contrôle ---- */

.hero__dots {
    position: absolute;
    z-index: 4;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    bottom: 1.1rem;
    display: flex;
    gap: .5rem;
}
html[dir="rtl"] .hero__dots { transform: translateX(50%); }

.hero__dots:empty { display: none; }

.hero__dot {
    width: 34px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.35);
    cursor: pointer;
    /* L'allongement de la puce active passait par « width », ce qui
       force le navigateur à recalculer la mise en page à chaque image —
       et le diaporama tourne en continu. « transform » se règle sur le
       compositeur, sans toucher au flux. Effet de bord bienvenu : les
       puces voisines ne sont plus repoussées à chaque changement. */
    transform-origin: center;
    transition: background-color .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.hero__dot:hover { background: rgba(255,255,255,.6); }
.hero__dot[aria-pressed="true"] { background: #fff; transform: scaleX(1.53); }
.hero__dot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hero__inner {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
    padding-block: clamp(3rem, 2rem + 5vw, 5.6rem);
    position: relative;
    z-index: 1;
}
.hero h1 { color: #fff; margin-bottom: .5rem; }
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: .35rem .85rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 1.15rem;
}
html[dir="rtl"] .hero__eyebrow { letter-spacing: 0; }
.hero__lead {
    font-size: clamp(1.02rem, .96rem + .35vw, 1.18rem);
    /* Le voile du hero est un dégradé HORIZONTAL : dense du côté du texte
       (.90 sur le bleu-900), clair du côté libre où la photographie
       respire. Ce chapô est donc toujours posé sur la partie sombre.
       Le passage de .88 à .96 n'était pas nécessaire au contraste — il
       rend simplement le texte un peu plus franc sur une photographie
       chargée. */
    color: rgba(255,255,255,.96);
    max-width: 56ch;
    margin-bottom: 1.7rem;
}
.hero__badges { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; }
.hero__badge {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: var(--text-md);
    color: rgba(255,255,255,.9);
}
.hero__badge svg { flex: none; margin-top: 3px; color: var(--blue-300); }

.hero-card {
    background: rgba(255,255,255,.97);
    border-radius: var(--radius-lg);
    padding: 1.7rem;
    box-shadow: var(--shadow-lg);
    color: var(--ink);
}
.hero-card h2 { font-size: var(--text-2xl); margin-bottom: .3rem; }
.hero-card__sub { font-size: var(--text-sm); color: var(--muted); margin-bottom: 1.15rem; }
.hero-card__days { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.15rem; }
.hero-card__day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--blue-50);
    font-size: var(--text-md);
}
.hero-card__day strong { color: var(--blue-800); }
.hero-card__count {
    font-size: var(--text-2xs);
    color: var(--teal-600);
    font-weight: 700;
    white-space: nowrap;
}
.hero-card__note { font-size: var(--text-xs); color: var(--muted); margin: .9rem 0 0; }

/* ---------------------------------------------------------------- */
/*  Cartes et grilles                                                */
/* ---------------------------------------------------------------- */

.grid { display: grid; gap: 1.4rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.5rem 1.45rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card--link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.card--link:hover {
    border-color: var(--blue-300);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    color: inherit;
}
.card h3 { font-size: var(--text-lg); margin-bottom: .4rem; }
.card p { color: var(--ink-soft); font-size: var(--text-md); line-height: 1.55; margin-bottom: 0; }

/* L'icône annonce, elle ne domine pas : c'est le nom de l'intervention
   que le patient cherche du regard. */
.card__icon {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: var(--blue-50);
    color: var(--blue-600);
    display: grid;
    place-items: center;
    margin-bottom: .95rem;
    transition: background-color .18s ease, color .18s ease;
}
.card--link:hover .card__icon { background: var(--blue-100); }

.card__more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* « auto » pousse le lien en bas : quel que soit le nombre de lignes
       du résumé, les appels à l'action d'une rangée s'alignent. */
    margin-top: auto;
    padding-top: .95rem;
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--blue-600);
}
html[dir="rtl"] .card__more svg { transform: scaleX(-1); }

/* Titres et parcours.

   C'étaient quatre encadrés flottants, chacun barré d'un filet bleu de
   3 px. Un parcours hospitalier se lit comme un curriculum : des lignes
   séparées par un trait, pas des boîtes. Le filet épais et coloré est
   d'ailleurs proscrit — il décore sans rien signifier. */
.credentials { display: grid; gap: 0 var(--space-lg); }

.credential {
    display: flex;
    gap: .95rem;
    align-items: flex-start;
    padding-block: 1.15rem;
    border-top: 1px solid var(--line);
}

.credential__icon {
    width: 30px; height: 30px;
    flex: none;
    color: var(--blue-600);
    display: grid;
    place-items: center;
    /* Aligné sur la première ligne du texte, pas sur le haut de la boîte. */
    margin-top: .05rem;
}

.credential p {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
}

/* ---- Portrait du praticien ----

   Le praticien regarde vers sa gauche : le portrait se place à DROITE
   du texte, pour que le regard entre dans la page. Sur écran étroit la
   mise en page s'empile et la question ne se pose plus. */

.about-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 380px);
    gap: var(--space-xl);
    align-items: start;
}

.about-intro > div > p:last-child { margin-bottom: 0; }

.portrait { margin: 0; }

.portrait__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    /* Profondeur ambiante : la photographie se détache de la page, elle
       ne flotte pas au-dessus. */
    box-shadow: var(--shadow);
}

.portrait__legende {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin-top: var(--space-sm);
    padding-inline-start: .1rem;
    /* Un filet fin plutôt qu'un encadré : la légende appartient à
       l'image, elle ne s'en détache pas. */
    border-top: 1px solid var(--line);
    padding-top: var(--space-xs);
}

.portrait__nom {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--text-lg);
    letter-spacing: -.012em;
    color: var(--blue-900);
}
html[dir="rtl"] .portrait__nom { font-family: var(--arabic-display); letter-spacing: 0; }

.portrait__titre {
    font-size: var(--text-md);
    color: var(--ink-soft);
}

/* Le parcours passe sous les deux colonnes : à côté du portrait, il
   n'avait plus la place de se lire. */
.credentials--large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-lg);
}

@media (max-width: 900px) {
    .about-intro { grid-template-columns: 1fr; gap: var(--space-lg); }

    /* Sur téléphone, un portrait pleine largeur écraserait le texte
       qui suit. On le borne et on le centre. */
    .portrait { max-width: 340px; margin-inline: auto; }
    .portrait__legende { text-align: center; align-items: center; }

    /* Le visage passe AVANT la biographie : empilé, le portrait se
       retrouvait sous trois paragraphes, alors que c'est lui qui
       établit la confiance le plus vite.

       Réordonner par CSS déplace l'affichage sans toucher à l'ordre du
       document — ce qui désaccorderait l'ordre de tabulation. Une
       figure n'étant pas focalisable, le décalage reste sans effet
       pour la navigation au clavier. */
    .about-intro > .portrait { order: -1; }

    .credentials--large { grid-template-columns: 1fr; }
}

/* Points forts */
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature__icon {
    width: 44px; height: 44px;
    flex: none;
    border-radius: var(--radius);
    background: rgba(255,255,255,.14);
    display: grid;
    place-items: center;
    color: #fff;
}
.section--ground .feature__icon { background: var(--blue-50); color: var(--blue-600); }
.feature h3 { font-size: var(--text-lg); margin-bottom: .3rem; }
.feature p { font-size: var(--text-md); margin: 0; }
.section--blue .feature p { color: rgba(255,255,255,.82); }

/* ---------------------------------------------------------------- */
/*  Horaires                                                         */
/* ---------------------------------------------------------------- */

.hours { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.hours__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.15rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--text-md);
}
.hours__row:last-child { border-bottom: 0; }
.hours__row--today { background: var(--blue-50); font-weight: 650; }
.hours__day { color: var(--ink); }
.hours__time { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hours__time--closed { color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------- */
/*  Formulaires                                                      */
/* ---------------------------------------------------------------- */

.field { margin-bottom: 1.15rem; }
.field label, .label {
    display: block;
    font-weight: 650;
    font-size: var(--text-md);
    color: var(--blue-900);
    margin-bottom: .4rem;
}
.field__hint { font-size: var(--text-xs); color: var(--muted); margin-top: .35rem; }
.field__optional { font-weight: 400; color: var(--muted); font-size: var(--text-sm); }

.input, .textarea, .select {
    width: 100%;
    padding: .72rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-base);
    color: var(--ink);
    background: #fff;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.input:focus, .textarea:focus, .select:focus {
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(46,134,193,.16);
    outline: none;
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(179,38,30,.12);
}
.textarea { min-height: 130px; resize: vertical; }
.select { appearance: none; padding-inline-end: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364809A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
}
html[dir="rtl"] .select { background-position: left .9rem center; }

.field__error {
    display: block;
    color: var(--danger);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-top: .35rem;
}

.checkbox { display: flex; gap: .65rem; align-items: flex-start; }
.checkbox input { margin-top: .28rem; width: 17px; height: 17px; accent-color: var(--blue-600); flex: none; }
.checkbox label { font-weight: 400; font-size: var(--text-md); color: var(--ink-soft); margin: 0; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.15rem; }

/* Alertes */
.alert {
    padding: .95rem 1.2rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    font-size: var(--text-md);
    border: 1px solid transparent;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
}
.alert svg { flex: none; margin-top: 2px; }
.alert--success { background: var(--success-bg); color: var(--success); border-color: rgba(30,122,77,.22); }
.alert--error   { background: var(--danger-bg);  color: var(--danger);  border-color: rgba(179,38,30,.2); }
.alert--warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(154,97,0,.22); }
.alert--info    { background: var(--blue-50);    color: var(--blue-700); border-color: var(--blue-100); }
.alert p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- */
/*  Prise de rendez-vous                                             */
/* ---------------------------------------------------------------- */

.booking { display: grid; grid-template-columns: 1.5fr .85fr; gap: 2.2rem; align-items: start; }

/* Un élément de grille vaut `min-width: auto` par défaut : il refuse de
   descendre sous la largeur intrinsèque de son contenu et fait déborder
   la page entière. Le remettre à zéro est la condition pour que les
   zones défilantes défilent au lieu de pousser la mise en page. */
.booking > * { min-width: 0; }

/* Les navigateurs imposent `min-inline-size: min-content` aux <fieldset>.
   Sans cette remise à zéro, un libellé long — « Chirurgie rénale,
   urologique et prostatique » — empêche la colonne de se réduire. */
fieldset { min-inline-size: 0; }

.step { margin-bottom: 2.2rem; }
.step__head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.step__num {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--blue-600);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--text-md);
    flex: none;
}
.step__title { font-size: var(--text-xl); font-weight: 700; color: var(--blue-900); margin: 0; }

.service-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.service-option { position: relative; }
.service-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.service-option label {
    display: block;
    padding: .85rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-md);
    font-weight: 550;
    color: var(--ink-soft);
    background: #fff;
    transition: all .14s ease;
    margin: 0;
}
.service-option label:hover { border-color: var(--blue-300); background: var(--blue-50); }
.service-option input:checked + label {
    border-color: var(--blue-600);
    background: var(--blue-50);
    color: var(--blue-800);
    box-shadow: 0 0 0 2px rgba(27,108,168,.14);
}
.service-option input:focus-visible + label { outline: 3px solid var(--blue-500); outline-offset: 2px; }

.date-strip { display: flex; gap: .55rem; overflow-x: auto; padding-bottom: .6rem; margin-bottom: 1rem; }
.date-chip {
    flex: none;
    min-width: 82px;
    padding: .7rem .55rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    text-align: center;
    cursor: pointer;
    font: inherit;
    transition: all .14s ease;
}
.date-chip:hover { border-color: var(--blue-300); background: var(--blue-50); }
.date-chip[aria-pressed="true"] {
    border-color: var(--blue-600);
    background: var(--blue-600);
    color: #fff;
}
.date-chip__day  { display: block; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.date-chip__num  { display: block; font-size: var(--text-3xl); font-weight: 700; line-height: 1.25; }
.date-chip__month{ display: block; font-size: var(--text-2xs); opacity: .75; }
html[dir="rtl"] .date-chip__day { letter-spacing: 0; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .55rem; }
.slot {
    padding: .68rem .4rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    font: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: all .14s ease;
}
.slot:hover { border-color: var(--blue-500); background: var(--blue-50); color: var(--blue-700); }
.slot[aria-pressed="true"] {
    border-color: var(--blue-600);
    background: var(--blue-600);
    color: #fff;
}

.slots-state {
    padding: 1.6rem 1.2rem;
    text-align: center;
    color: var(--muted);
    font-size: var(--text-md);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: var(--ground);
}

.booking-summary {
    position: sticky;
    top: calc(var(--header-h) + 1.2rem);
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    border-radius: var(--radius);
    padding: 1.5rem;
}

/* Un seul bouton de validation visible à la fois : celui du
   récapitulatif tant qu'il tient en colonne, celui de l'étape 3 dès que
   la mise en page s'empile. Les deux soumettent le même formulaire. */
.booking-submit-inline { display: none; margin-top: 1.6rem; }
.booking-summary h3 { font-size: var(--text-lg); margin-bottom: 1rem; }
.summary-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--blue-100);
    font-size: var(--text-md);
}
.summary-line:last-of-type { border-bottom: 0; }
.summary-line dt { color: var(--muted); margin: 0; }
.summary-line dd { margin: 0; font-weight: 650; color: var(--blue-900); text-align: end; }

/* Confirmation */
.confirm-box {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 1.5rem + 2vw, 3rem);
    box-shadow: var(--shadow);
}
.confirm-icon {
    width: 68px; height: 68px;
    margin: 0 auto 1.3rem;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    display: grid;
    place-items: center;
}
.reference-badge {
    display: inline-block;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--text-4xl);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--blue-800);
    background: var(--blue-50);
    border: 1px dashed var(--blue-300);
    padding: .6rem 1.3rem;
    border-radius: var(--radius-sm);
    margin: .3rem 0 1.4rem;
}
.confirm-detail {
    text-align: start;
    background: var(--ground);
    border-radius: var(--radius-sm);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.4rem;
}

/* ---------------------------------------------------------------- */
/*  Fil d'Ariane, FAQ, témoignages                                   */
/* ---------------------------------------------------------------- */

.breadcrumb { font-size: var(--text-sm); color: var(--muted); padding-block: 1rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.breadcrumb li + li::before { content: "›"; color: var(--line); }
html[dir="rtl"] .breadcrumb li + li::before { content: "‹"; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue-600); text-decoration: underline; }

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: .7rem;
    background: #fff;
    overflow: hidden;
}
.faq-item summary {
    padding: 1.05rem 1.3rem;
    cursor: pointer;
    font-weight: 650;
    color: var(--blue-900);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    font-size: var(--text-base);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-size: var(--text-3xl);
    color: var(--blue-600);
    font-weight: 400;
    flex: none;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line-soft); }
.faq-item__body { padding: 1.05rem 1.3rem; color: var(--ink-soft); font-size: var(--text-md); }
.faq-item__body p:last-child { margin-bottom: 0; }

.quote {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.quote__stars { color: var(--gold); letter-spacing: .1em; font-size: var(--text-md); margin-bottom: .7rem; }
.quote p { font-size: var(--text-md); color: var(--ink-soft); font-style: italic; }
.quote footer { font-size: var(--text-sm); color: var(--muted); font-weight: 600; font-style: normal; }

/* ---------------------------------------------------------------- */
/*  Page d'un acte chirurgical                                       */
/* ---------------------------------------------------------------- */

/* Le texte prime sur la colonne latérale : une page d'acte fait
   plusieurs centaines de mots, et une colonne trop étroite casse la
   lecture. `minmax(0, …)` évite le piège du `min-width: auto` des
   éléments de grille, qui ferait déborder la page horizontalement. */
.service-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* La carte de prise de rendez-vous suit la lecture sur les pages
   longues : le patient n'a jamais à remonter pour réserver. */
.service-layout > aside { position: sticky; top: calc(var(--header-h) + 1.2rem); }

@media (max-width: 980px) {
    .service-layout { grid-template-columns: 1fr; gap: 2.4rem; }
    .service-layout > aside { position: static; }
}

/* ---------------------------------------------------------------- */
/*  Conseils santé — vignettes et corps d'article                    */
/* ---------------------------------------------------------------- */

.card--article { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--article .card__body { padding: 1.35rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.card--article h2 { font-size: var(--text-lg); margin-bottom: .45rem; }
.card--article p { flex: 1; }

/* La vignette occupe un rapport fixe : la grille ne bouge pas au
   chargement des images, ce que Google pénalise (layout shift). */
.card__cover {
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    background: var(--blue-50);
    border-bottom: 1px solid var(--line);
}
.card__date {
    font-size: var(--text-2xs);
    color: var(--muted);
    margin-bottom: .5rem;
    font-weight: 600;
}

.article-cover {
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    margin: 1.8rem 0 .5rem;
    background: var(--blue-50);
}

/* Le corps d'article respire davantage que le reste du site : c'est
   du texte long, lu d'une traite. */
/* La longueur de ligne est plafonnée : au-delà d'environ 75 caractères,
   l'œil perd le début de la ligne suivante et la lecture se fatigue.
   Le conteneur peut être plus large, le texte ne l'est pas. */
.article-body {
    margin-top: 2rem;
    font-size: var(--text-lg);
    line-height: 1.78;
    max-width: 66ch;
}
.article-body h2 {
    font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
    margin: 2.4rem 0 .8rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line-soft);
}
.article-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body h3 { font-size: var(--text-xl); margin: 1.8rem 0 .6rem; color: var(--blue-700); }
.article-body p { margin-bottom: 1.15em; }
.article-body ul, .article-body ol { margin: 0 0 1.3em; padding-inline-start: 1.4em; }
.article-body li { margin-bottom: .55em; padding-inline-start: .2em; }
.article-body li::marker { color: var(--blue-500); font-weight: 700; }
.article-body strong { color: var(--blue-900); font-weight: 650; }

/* Encadré d'avertissement : signale ce qui relève de l'urgence ou
   d'une précaution. Bordure ET icône — la couleur seule ne suffit pas
   pour un lecteur daltonien. */
.article-callout {
    display: flex;
    gap: .85rem;
    background: var(--warning-bg);
    border: 1px solid rgba(154, 97, 0, .28);
    border-inline-start: 4px solid var(--warning);
    border-radius: var(--radius-sm);
    padding: 1.15rem 1.35rem;
    margin: 1.8rem 0;
}
.article-callout::before {
    content: "";
    flex: none;
    width: 22px; height: 22px;
    margin-top: 2px;
    background-color: var(--warning);
    -webkit-mask: var(--icon-alert) center / contain no-repeat;
    mask: var(--icon-alert) center / contain no-repeat;
}
.article-callout p { margin: 0; color: var(--warning); font-size: var(--text-base); }
.article-callout strong { color: var(--warning); }

:root {
    --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3Cpath d='M10.3 3.9 2 18a2 2 0 0 0 1.7 3h16.6A2 2 0 0 0 22 18L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- */
/*  Contact                                                          */
/* ---------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.4rem; align-items: start; }

.contact-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.contact-item__icon {
    width: 42px; height: 42px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--blue-50);
    color: var(--blue-600);
    display: grid;
    place-items: center;
}
.contact-item h3 { font-size: var(--text-md); margin-bottom: .2rem; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
html[dir="rtl"] .contact-item h3 { letter-spacing: 0; }
.contact-item p { margin: 0; font-size: var(--text-base); color: var(--ink); }
.contact-item a { color: var(--blue-700); font-weight: 600; text-decoration: none; }
.contact-item a:hover { text-decoration: underline; }

#map {
    height: 340px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    z-index: 1;
}

/* ---------------------------------------------------------------- */
/*  Bandeau d'appel à l'action                                       */
/* ---------------------------------------------------------------- */

.cta-band {
    background: linear-gradient(150deg, var(--blue-800), var(--blue-600));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 1.5rem + 2.5vw, 3.2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: .4rem; }
.cta-band p { color: rgba(255,255,255,.85); margin: 0; max-width: 52ch; }

/* ---------------------------------------------------------------- */
/*  Pied de page                                                     */
/* ---------------------------------------------------------------- */

.site-footer {
    position: relative;
    overflow: hidden;
    /* Fond de repli : visible tant que la photographie n'a pas chargé,
       et seul fond si elle ne charge pas. */
    background: var(--blue-900);
    color: rgba(255,255,255,.80);
    padding-block: 3.2rem 1.6rem;
    font-size: var(--text-md);
}

.site-footer__media { position: absolute; inset: 0; z-index: 0; }
.site-footer__media picture,
.site-footer__media img { display: block; width: 100%; height: 100%; }
.site-footer__media img { object-fit: cover; object-position: center 30%; }

/* Le pied de page contient les textes les plus petits et les plus pâles
   du site — adresse, mentions, avertissement. Le voile y est donc plus
   dense qu'ailleurs : la photographie ne doit être qu'une texture. */
.site-footer__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(11,44,69,.97) 0%, rgba(11,44,69,.90) 40%, rgba(11,44,69,.95) 100%);
}

.site-footer > .wrap { position: relative; z-index: 2; }
.site-footer h3 {
    color: #fff;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1rem;
}
html[dir="rtl"] .site-footer h3 { letter-spacing: 0; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.2rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .55rem; }
.footer-brand__name { color: #fff; font-weight: 700; font-size: var(--text-lg); margin-bottom: .3rem; }
.footer-bottom {
    margin-top: 2.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.11);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    /* Remonté de 55 % à 70 % : à 55 % le contraste tombait sous le
       seuil AA une fois la photographie posée derrière. */
    color: rgba(255,255,255,.70);
}
.footer-disclaimer {
    margin-top: 1rem;
    font-size: var(--text-xs);
    /* 45 % donnait 4,1:1 — sous le seuil AA de 4,5:1, et ce AVANT
       même l'ajout de la photographie. Corrigé à 64 %. */
    color: rgba(255,255,255,.64);
    max-width: 90ch;
}

/* Barre d'action mobile */
.mobile-bar { display: none; }

/* ---------------------------------------------------------------- */
/*  Adaptation aux petits écrans                                     */
/* ---------------------------------------------------------------- */

@media (max-width: 1080px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Entre le repli mobile et la pleine largeur, la barre de navigation
   tient tout juste : on resserre plutôt que de laisser la page déborder
   horizontalement. */
@media (min-width: 1081px) and (max-width: 1279px) {
    .brand__role { display: none; }
    .nav { gap: .1rem; }
    .nav a { padding: .5rem .6rem; font-size: var(--text-sm); }
    .header-actions { gap: .45rem; }
    .lang-switch { padding: .45rem .55rem; }
    .header-actions .btn--primary { padding: .6rem .8rem; font-size: var(--text-sm); }
}

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }

    /* Le récapitulatif passe sous le formulaire : il devient un rappel
       de ce qui a été choisi, et la validation revient à l'étape 3. */
    .booking { grid-template-columns: 1fr; }
    .booking-summary { position: static; order: -1; }
    .booking-summary #booking-submit,
    .booking-summary .alert { display: none; }
    .booking-submit-inline { display: block; }
}

/* La navigation se replie bien avant la mise en page : à partir de
   cinq entrées, elle ne tient plus à côté de la marque et du bouton
   de rendez-vous. */
@media (max-width: 1080px) {
    .nav-toggle { display: grid; }
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: .7rem 1.25rem 1.1rem;
        gap: .1rem;
        box-shadow: var(--shadow);
    }
    .nav[data-open="true"] { display: flex; }
    .nav a { padding: .8rem .6rem; font-size: var(--text-base); }
    .site-header__inner { position: relative; }
}

@media (max-width: 680px) {
    .header-actions .btn--primary { display: none; }
}

@media (max-width: 680px) {
    body { font-size: 16px; }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

    /* Sur un écran étroit, c'est le nom du praticien qui doit céder
       la place — jamais le bouton de menu, qui donne accès au site. */
    .site-header__inner { gap: .55rem; }
    .brand { flex: 1 1 auto; min-width: 0; }
    .brand__text { min-width: 0; }
    .brand__name {
        font-size: var(--text-md);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .header-actions { gap: .4rem; }
    .lang-switch { padding: .45rem .5rem; font-size: var(--text-xs); }

    /* La pastille d'introduction passe sur deux lignes : un rectangle
       arrondi tient mieux qu'une gélule très allongée. */
    .hero__eyebrow { border-radius: var(--radius); }
    .form-grid { grid-template-columns: 1fr; }
    .service-picker { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .cta-band { flex-direction: column; align-items: flex-start; }
    .topbar__group--secondary { display: none; }
    .brand__role { display: none; }

    /* Appel et rendez-vous toujours à portée de pouce */
    .mobile-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .55rem;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 70;
        padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--line);
    }

    /* Une commande d'action tient sur une ligne ou elle n'inspire pas
       confiance. Pas de césure, pas de retour au trait d'union. */
    .mobile-bar .btn {
        white-space: nowrap;
        hyphens: none;
        padding-inline: .7rem;
    }
    body { padding-bottom: 74px; }
}

/* ---------------------------------------------------------------- */
/*  Mouvement                                                        */
/*                                                                   */
/*  Un seul moment animé sur tout le site : l'entrée du bandeau      */
/*  d'accueil. Pas de révélation au défilement sur chaque section —  */
/*  répétée sept fois, une animation cesse d'être un geste pour      */
/*  devenir un tic, et elle retarde la lecture à chaque arrêt.       */
/*                                                                   */
/*  L'état PAR DÉFAUT est l'état final : la règle ne pose aucun      */
/*  « opacity: 0 » en dur. Si l'animation ne s'exécute jamais —      */
/*  navigateur ancien, feuille de style partiellement chargée — le   */
/*  contenu est visible, pas effacé.                                 */
/* ---------------------------------------------------------------- */

@keyframes entree-bandeau {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

.hero__inner > * {
    /* Décélération exponentielle : rapide au départ, longue à s'arrêter.
       C'est la courbe d'un objet réel qui se pose. */
    animation: entree-bandeau .62s cubic-bezier(.16, 1, .3, 1) backwards;
}

.hero__inner > *:nth-child(2) { animation-delay: .09s; }

/* Le bandeau compact des pages intérieures reste immobile : on y arrive
   déjà en lecture, une entrée animée y serait un obstacle. */
.hero--compact .hero__inner > * { animation: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        /* Le délai doit tomber lui aussi : avec « backwards », un délai
           conservé maintiendrait l'élément invisible le temps du retard. */
        animation-delay: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* Impression : le patient imprime sa confirmation */
@media print {
    .topbar, .site-header, .site-footer, .mobile-bar,
    .btn, .breadcrumb, .cta-band { display: none !important; }
    body { padding: 0; font-size: 12pt; color: #000; }
    .confirm-box { border: 1px solid #000; box-shadow: none; }
    a[href]::after { content: ""; }
}