/* =========================================================
   SEESMILE · CLINIQUE DE MAGUELONE — shared.css
   Palette : azur (enseigne) / bleu profond / corail (sieges) / pierre (facade)
   Typo : Outfit (titres) + Manrope (corps)
   ========================================================= */

:root {
    /* Couleurs — relevées sur les photos de la clinique.
       Azur : l'enseigne de façade. Pétrole : la crédence du cabinet.
       Corail : les sièges et les empreintes de pattes au sol.
       Pierre : le calcaire de la façade. */
    --azur:           #0B93D5;
    --azur-dark:      #0A76AC;
    --bleu-profond:   #0C5E86;
    --bleu-clair:     #A6CEE8;
    --corail:         #E0743A;
    --corail-light:   #F6D6C2;
    --blanc-chaud:    #FCFBF8;
    --pierre:         #EDE5D6;
    --navy:           #0E2E3E;
    --ink:            #17272F;
    --muted:          #58696E;
    --line:           #E3DCCD;
    --white:          #FFFFFF;

    /* Typo */
    --font-title: 'Outfit', 'Manrope', -apple-system, sans-serif;
    /* Variante maison Seesmile (titres serif) : décommenter la ligne ci-dessous
       et commenter celle du dessus, puis charger la police dans inc/enqueue.php.
       --font-title: 'Fraunces', Georgia, serif; */
    --font-body:  'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Grain de calcaire, repris de la façade en pierre de la clinique.
       Bruit fractal SVG, posé en fondu multiplié sur les fonds beiges. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

    /* Empreinte de patte (masque SVG pour les eyebrows) */
    --paw-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.5' cy='12.5' rx='2.2' ry='3'/%3E%3Cellipse cx='9.5' cy='7.5' rx='2.2' ry='3'/%3E%3Cellipse cx='14.5' cy='7.5' rx='2.2' ry='3'/%3E%3Cellipse cx='18.5' cy='12.5' rx='2.2' ry='3'/%3E%3Cpath d='M12 12c-3 0-5.5 2.2-5.5 4.8C6.5 19 8.5 20 12 20s5.5-1 5.5-3.2C17.5 14.2 15 12 12 12z'/%3E%3C/svg%3E");

    /* Layout */
    /* Hauteur de l'en-tête : barre du haut 40px + navigation 78px.
       Sert au hero plein écran, qui doit remplir ce qui reste sous l'en-tête. */
    --header-h: 118px;

    --container: 1360px;
    --narrow:    760px;
    --radius:    18px;
    --radius-sm: 12px;
    --ease:      cubic-bezier(0.22, 1, 0.36, 1);

    /* Ombres */
    --shadow-sm: 0 4px 16px rgba(14,46,62, 0.06);
    --shadow-md: 0 16px 40px rgba(14,46,62, 0.10);
    --shadow-lg: 0 28px 70px rgba(14,46,62, 0.16);
}

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

/* L'attribut hidden doit toujours gagner. Sans cette règle, la moindre
   déclaration display dans une classe (display:flex, display:block) écrase
   le display:none du navigateur et l'élément reste visible : c'est ce qui
   laissait l'espace réservé du consentement affiché à côté de la carte. */
[hidden] { display: none !important; }

html, body {
    width: 100%;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--blanc-chaud);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azur-dark); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--azur); }

h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 600; line-height: 1.08; color: var(--navy); margin: 0 0 .5em; letter-spacing: -0.02em; }

.ssicon { display: inline-block; vertical-align: middle; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container--narrow { max-width: var(--narrow); }
/* Position relative : les décors en absolu (empreintes, halos) doivent se
   caler sur leur propre section et jamais s'échapper ailleurs dans la page. */
.section { padding: clamp(72px, 8vw, 110px) 0; position: relative; }
.text-center { text-align: center; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 64px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ---------- Typo utilitaires ---------- */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--azur);
    margin: 0 0 14px;
}
.section-tag::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--paw-mask) center/contain no-repeat;
    mask: var(--paw-mask) center/contain no-repeat;
}
/* Cohérence : un eyebrow centré (ou dans un conteneur centré) reste centré.
   Comme .section-tag est en inline-flex, on le centre en le passant en flex centré. */
.text-center > .section-tag,
.text-center .section-tag,
.avis-head .section-tag,
.prefooter-inner .section-tag,
.hero-split-intro .section-tag,
.faq-home-intro.text-center .section-tag,
.section-tag.text-center {
    display: flex;
    justify-content: center;
    width: 100%;
}
.section-title { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: .6em; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--azur-dark); }
.link-arrow::after { content: '→'; transition: transform .3s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }

/* ---------- Boutons ---------- */
.btn-primary, .btn-secondary, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px; border-radius: 999px;
    font-family: var(--font-body); font-weight: 600; font-size: .98rem;
    cursor: pointer; border: 2px solid transparent;
    transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
    text-align: center;
}
.btn-primary { background: var(--azur); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--azur-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Bordure à la couleur du texte : avec var(--line) le contour se confondait
   avec les fonds beiges (la section équipe, les blocs pierre) et le bouton
   devenait invisible. Les variantes sur fond sombre redéfinissent la leur
   plus bas, et le survol garde son contour azur. */
.btn-secondary { background: transparent; color: var(--navy); border-color: currentColor; }
.btn-secondary:hover { border-color: var(--azur); color: var(--azur-dark); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }

/* ---------- Barre de progression ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--azur); z-index: 9999; transition: width .1s linear; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(252,251,248, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); border-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; }
.custom-logo-link img, .custom-logo { max-height: 52px; width: auto; }
.site-logo-text { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; color: var(--navy); line-height: 1.05; max-width: 220px; }
.logo-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--azur); color: #fff; border-radius: 9px; font-size: 1.3rem; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.header-phone:hover { color: var(--azur); }
.btn-rdv { padding: 11px 22px; font-size: .92rem; }

/* ---------- Mega menu ---------- */
.main-nav { flex: 1; }
.mega-nav { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.mega-item { position: relative; }
.mega-item > a { display: inline-flex; align-items: center; padding: 12px 16px; font-weight: 600; color: var(--ink); border-radius: 8px; }
.mega-item > a:hover { color: var(--azur-dark); background: rgba(11,147,213,.07); }
.mega-panel {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    margin-top: 14px; z-index: 1001;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 30px; min-width: 600px;
    display: grid; grid-template-columns: 1.1fr 1.1fr; gap: 36px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
/* Zone tampon invisible qui comble le trou entre le lien et le panneau,
   pour que la souris ne perde jamais le survol en descendant. */
.mega-panel::before {
    content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px;
}
.mega-panel--wide { grid-template-columns: 1fr 1fr 1.2fr; min-width: 820px; }
.mega-item:hover .mega-panel, .mega-item:focus-within .mega-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-col { display: flex; flex-direction: column; gap: 10px; }
.megamenu-title { font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--azur); margin-bottom: 4px; }
.mega-col a { color: var(--ink); padding: 6px 0; font-weight: 500; }
.mega-col a:hover { color: var(--azur-dark); }
.mega-col--visual { background: var(--blanc-chaud); border-radius: var(--radius-sm); padding: 20px; }
.mega-col--visual p { font-size: .92rem; color: var(--muted); margin: 6px 0 14px; }
.mega-cta { font-weight: 700; color: var(--azur-dark); }

/* ---------- Burger / mobile ---------- */
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { width: 26px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    position: fixed; top: 78px; left: 0; right: 0; bottom: 0;
    background: var(--blanc-chaud); z-index: 990;
    padding: 22px 24px 32px;
    transform: translateX(100%); transition: transform .35s var(--ease);
    overflow-y: auto; display: flex; flex-direction: column;
    border-top: 1px solid var(--line);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-list { list-style: none; margin: 0 0 24px; padding: 0; }
.mobile-nav-list > li { border-bottom: 1px solid var(--line); }
.mobile-nav-list > li > a { display: block; padding: 16px 0; font-family: var(--font-title); font-size: 1.3rem; color: var(--navy); }
.mobile-accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; background: none; border: 0; font-family: var(--font-title); font-size: 1.3rem; color: var(--navy); cursor: pointer; }
.acc-chevron { font-size: 1.5rem; transition: transform .3s var(--ease); }
.mobile-accordion.is-open .acc-chevron { transform: rotate(45deg); }
.mobile-accordion-panel { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.mobile-accordion.is-open .mobile-accordion-panel { max-height: 600px; }
.mobile-accordion-panel a { display: block; padding: 10px 0 10px 14px; color: var(--muted); font-weight: 500; }
.mobile-nav-cta { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video, .hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(14,46,62,.82) 0%, rgba(12,94,134,.55) 55%, rgba(11,147,213,.25) 100%); }
.hero-media::after { content:''; position:absolute; inset:0; background: radial-gradient(circle at 75% 30%, transparent 40%, rgba(14,46,62,.35) 100%); }
.hero-content { position: relative; z-index: 2; max-width: 720px; color: #fff; padding-top: 60px; padding-bottom: 60px; }
.hero-eyebrow { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .82rem; color: var(--bleu-clair); margin: 0 0 18px; }
.hero-title { color: #fff; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.02; margin-bottom: .25em; }
.hero-sub { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.92); max-width: 600px; margin: 0 0 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; }
.hero-scroll-line { display: block; width: 1px; height: 46px; background: rgba(255,255,255,.6); position: relative; overflow: hidden; }
.hero-scroll-line::after { content:''; position:absolute; top:-46px; left:0; width:1px; height:46px; background:#fff; animation: scrollLine 2s var(--ease) infinite; }
@keyframes scrollLine { to { top: 46px; } }

/* ---------- Pôles ---------- */
.poles-grid { margin-top: 18px; }
.pole-card {
    display: flex; flex-direction: column; gap: 10px; padding: 30px 26px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.pole-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--bleu-profond); }
.pole-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--pierre); color: var(--azur); margin-bottom: 6px; }
.pole-icon .ssicon { width: 28px; height: 28px; }
.pole-name { font-family: var(--font-title); font-weight: 600; font-size: 1.22rem; color: var(--navy); }
.pole-desc { font-size: .95rem; color: var(--muted); }

/* ---------- Présentation ---------- */
.presentation-grid { align-items: center; }
.presentation-img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; object-fit: cover; }
.media-placeholder { aspect-ratio: 4/3; border-radius: var(--radius); background: repeating-linear-gradient(45deg, var(--pierre), var(--pierre) 12px, var(--blanc-chaud) 12px, var(--blanc-chaud) 24px); display: grid; place-items: center; color: var(--muted); font-size: .9rem; border: 1px dashed var(--line); }

/* ---------- Équipe ---------- */
.team { background: var(--pierre); }
.team-grid { margin-top: 16px; }
.team-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); text-align: center; padding-bottom: 22px; }
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.team-photo { aspect-ratio: 5/6; display: grid; place-items: end center; overflow: hidden; position: relative; background: linear-gradient(160deg, var(--bleu-clair) 0%, var(--bleu-profond) 100%); }
/* Grand arc décoratif derrière la personne */
.team-photo::before {
    content: ''; position: absolute; left: 50%; top: 18%; width: 116%; aspect-ratio: 1;
    transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.32) 0%, rgba(255,255,255,.12) 45%, transparent 62%);
    transition: transform .5s var(--ease);
}
/* Cercle plein bas (socle) sur lequel "pose" la personne */
.team-photo::after {
    content: ''; position: absolute; left: 50%; bottom: -34%; width: 86%; aspect-ratio: 1;
    transform: translateX(-50%); border-radius: 50%;
    background: rgba(255,255,255,.22);
    transition: transform .45s var(--ease);
}
.team-photo img { width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: bottom center; position: relative; z-index: 1; padding: 14px 14px 0; display: block; align-self: end; transition: transform .45s var(--ease); }
/* La photo détourée pose sur le bord bas de la carte. */
/* Motif pattes décoratif, très discret, en haut */
.team-photo .team-pattern { position: absolute; inset: 0; z-index: 0; opacity: .16; pointer-events: none; }
.team-photo .team-pattern::before { content: ''; position: absolute; top: 14%; right: 12%; width: 30px; height: 30px;
    background: #fff; -webkit-mask: var(--paw-mask) center/contain no-repeat; mask: var(--paw-mask) center/contain no-repeat; }
.team-photo .team-pattern::after { content: ''; position: absolute; top: 26%; right: 24%; width: 16px; height: 16px;
    background: #fff; -webkit-mask: var(--paw-mask) center/contain no-repeat; mask: var(--paw-mask) center/contain no-repeat; opacity: .7; }
.team-card:hover .team-photo img { transform: translateY(-6px) scale(1.03); }
.team-card:hover .team-photo::after { transform: translateX(-50%) scale(1.1); }
.team-card:hover .team-photo::before { transform: translateX(-50%) scale(1.05); }
/* Trois variantes de couleurs de fond, alternées */
.team-card:nth-child(3n+1) .team-photo { background: linear-gradient(155deg, var(--bleu-clair) 0%, var(--bleu-profond) 100%); }
.team-card:nth-child(3n+2) .team-photo { background: linear-gradient(155deg, #C6DEEE 0%, var(--azur) 100%); }
.team-card:nth-child(3n+3) .team-photo { background: linear-gradient(155deg, var(--pierre) 0%, var(--bleu-clair) 100%); }
.team-initials { font-family: var(--font-title); font-size: 3.4rem; font-weight: 600; color: #fff; position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0,0,0,.12); }
.team-initials--lg { font-size: 4rem; }
.team-name { font-family: var(--font-title); font-size: 1.18rem; font-weight: 600; color: var(--navy); margin: 18px 0 2px; }
.team-role { font-size: .9rem; color: var(--azur); font-weight: 600; margin: 0; }
.team-more { text-align: center; margin-top: 40px; }

/* ---------- Bande infos ---------- */
.infos-band { background: var(--navy); }
.info-card { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.info-icon { color: var(--bleu-clair); }
.info-label { font-family: var(--font-title); font-size: 1.2rem; color: #fff; }
.info-value { color: rgba(255,255,255,.82); font-size: .95rem; }

/* ---------- Page hero (intérieures) ---------- */
.page-hero { padding: clamp(40px, 7vw, 90px) 0 clamp(20px, 3vw, 40px); background: linear-gradient(180deg, var(--pierre), var(--blanc-chaud)); }
.page-hero-title { font-size: clamp(2rem, 5vw, 3.6rem); }
.page-hero-sub { font-size: 1.1rem; color: var(--muted); max-width: 640px; }
.service-hero-icon { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: #fff; color: var(--azur); box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.service-hero-icon .ssicon { width: 30px; height: 30px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--azur-dark); }
.bc-sep { opacity: .5; }
.bc-current { color: var(--ink); font-weight: 600; }

/* ---------- Cards (services / conseils / archives) ---------- */
.card-grid { margin-top: 8px; }
.card, .service-card, .link-card {
    display: flex; flex-direction: column; gap: 10px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
    box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
    height: 100%;
}
.card:hover, .service-card:hover, .link-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--bleu-profond); }
.card-thumb { border-radius: var(--radius-sm); overflow: hidden; margin: -26px -26px 4px; }
.card-thumb img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.card-title, .service-card-title, .link-card-title { font-family: var(--font-title); font-size: 1.2rem; font-weight: 600; color: var(--navy); }
.card-excerpt, .service-card-desc { font-size: .94rem; color: var(--muted); flex: 1; }
.service-icon { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; background: var(--pierre); color: var(--azur); }
.service-icon .ssicon { width: 26px; height: 26px; }
.service-pole { margin-bottom: 60px; }
.service-pole-title { font-size: 1.6rem; padding-bottom: 14px; border-bottom: 2px solid var(--line); margin-bottom: 28px; }

/* ---------- Filtres conseils ---------- */
.conseil-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.conseil-filter { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-family: var(--font-body); font-weight: 600; font-size: .88rem; color: var(--muted); cursor: pointer; transition: all .25s var(--ease); }
.conseil-filter:hover { border-color: var(--azur); color: var(--azur-dark); }
.conseil-filter.is-active { background: var(--azur); color: #fff; border-color: var(--azur); }
.card-cat { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azur); }

/* ---------- Animaux / étapes ---------- */
.animal-card, .step-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.animal-card:hover, .step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.animal-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--pierre); color: var(--azur); margin-bottom: 12px; }
.animal-name { font-size: 1.3rem; margin-bottom: 8px; }
.animal-desc { color: var(--muted); font-size: .95rem; margin: 0; }
.step-num { font-family: var(--font-title); font-size: 2.4rem; color: var(--bleu-profond); display: block; margin-bottom: 6px; }
.step-title { font-size: 1.2rem; margin-bottom: 8px; }
.step-desc { color: var(--muted); font-size: .94rem; margin: 0; }
.rdv-actions, .contact-actions, .error-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
/* Encadré urgence : plus de section blanche isolée, il vit dans la section de
   réservation, sur un fond blanc qui ressort du beige. */
.urgence-callout {
    display: flex; gap: 14px; align-items: flex-start;
    margin: 22px 0 0; background: #fff; border-left: 4px solid var(--corail);
    padding: 20px 24px; border-radius: var(--radius-sm);
    font-size: .96rem; line-height: 1.6; max-width: 70ch;
}
.urgence-callout-ic {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--corail-light); color: var(--corail);
}
.urgence-callout .ssicon { width: 18px; height: 18px; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; color: var(--navy); text-align: left; }
.faq-chevron { font-size: 1.4rem; color: var(--azur); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq-item.is-open .faq-chevron { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-item.is-open .faq-answer { max-height: 400px; }
.faq-answer p { padding: 0 24px 22px; margin: 0; color: var(--muted); }

/* ---------- Contact / membre ---------- */
.contact-grid, .member-grid { align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 16px; }
.contact-list li { display: flex; gap: 14px; align-items: center; }
.contact-ic { color: var(--azur); flex-shrink: 0; }
.contact-subtitle { font-size: 1.5rem; }
.contact-map iframe { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.member-photo { border-radius: var(--radius); overflow: hidden; background: var(--bleu-clair); aspect-ratio: 5/6; display: grid; place-items: center; box-shadow: var(--shadow-md); }
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-diplomes { font-weight: 600; color: var(--azur-dark); font-size: 1.05rem; }

/* ---------- Pré-footer CTA ---------- */
.prefooter-cta { background: linear-gradient(120deg, var(--azur) 0%, var(--azur-dark) 100%); }
.prefooter-inner { text-align: center; padding: clamp(72px, 9vw, 110px) clamp(24px, 6vw, 48px); }
.prefooter-tag { color: var(--bleu-clair); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; margin: 0 0 14px; }
.prefooter-title { font-family: var(--font-title); font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; margin: 0 0 28px; max-width: 640px; margin-inline: auto; line-height: 1.15; }
.prefooter-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.8); padding-top: 70px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer-logo-text { font-family: var(--font-title); font-size: 1.3rem; color: #fff; display: block; margin-bottom: 14px; }
.footer-desc { font-size: .95rem; color: rgba(255,255,255,.7); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-size: .85rem; font-weight: 700; }
.footer-social a:hover { background: var(--azur); }
.footer-title { font-family: var(--font-title); font-size: 1.1rem; color: #fff; margin: 0 0 16px; }
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-list a, .footer-list li { color: rgba(255,255,255,.72); font-size: .95rem; }
.footer-list a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 26px 0; }
.footer-disclaimer { font-size: .8rem; color: rgba(255,255,255,.5); margin: 0 0 8px; }
.footer-copy { font-size: .85rem; color: rgba(255,255,255,.6); margin: 0; }

/* ---------- Entry content (Gutenberg) ---------- */
.entry-content { font-size: 1.08rem; }
.entry-content h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-top: 1.6em; }
.entry-content h3 { font-size: 1.35rem; margin-top: 1.3em; }
.entry-content p { margin: 0 0 1.2em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }
.entry-content img { border-radius: var(--radius-sm); margin: 1.5em 0; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Plan du site ---------- */
.sitemap-html h2 { font-size: 1.5rem; margin-top: 1.5em; }
.sitemap-html ul { list-style: none; padding-left: 0; }
.sitemap-html ul ul { padding-left: 22px; margin-top: 6px; }
.sitemap-html li { margin-bottom: 8px; }

/* ---------- 404 ---------- */
.error-code { font-family: var(--font-title); font-size: clamp(5rem, 16vw, 11rem); color: var(--bleu-profond); line-height: 1; margin: 0; }
.error-actions { justify-content: center; }

/* ---------- Pagination ---------- */
.pagination { margin-top: 50px; display: flex; justify-content: center; }
.pagination .page-numbers { padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); margin: 0 4px; color: var(--ink); }
.pagination .page-numbers.current { background: var(--azur); color: #fff; border-color: var(--azur); }

/* ---------- Animations reveal ---------- */
.reveal, .reveal-left, .reveal-right { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal { transform: translateY(28px); }
.reveal-left { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }
.delay-4 { transition-delay: .32s; }
.delay-5 { transition-delay: .40s; }

/* ---------- Accessibilité ---------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 99999; background: #fff; padding: 10px 16px; border-radius: 8px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; transition: none; }
    .hero-scroll-line::after { animation: none; }
    * { scroll-behavior: auto !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    .container { padding: 0 18px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .presentation-grid, .contact-grid, .member-grid { grid-template-columns: 1fr; }
    .hero { min-height: 88vh; }
    .hero-actions .btn-primary, .hero-actions .btn-ghost,
    .rdv-actions a, .contact-actions a, .prefooter-actions a { width: 100%; }
    .btn-rdv { display: none; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-content { padding-top: 90px; }
    .prefooter-inner { padding: 110px 24px; }
}

@media (max-width: 380px) {
    body { font-size: 1rem; }
    .hero-title { font-size: 2.3rem; }
    .section-title { font-size: 1.7rem; }
}

/* =========================================================
   V1.1 — HERO SPLIT, AVIS, RÉFÉRER, UI FLOTTANTE, FULL-WIDTH
   ========================================================= */

/* ---------- Header / Footer pleine largeur ---------- */
.header-inner--full { width: 100%; max-width: 100%; padding: 0 clamp(20px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; }
.footer-grid--full { width: 100%; max-width: 100%; padding: 0 clamp(20px, 4vw, 56px) 50px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-bottom-inner { width: 100%; max-width: 100%; padding: 0 clamp(20px, 4vw, 56px); }

/* ---------- Hero split ---------- */
.hero-split {
    position: relative;
    /* Remplit exactement ce qui reste visible sous l'en-tête.
       dvh plutôt que vh : sur mobile, vh inclut la barre d'adresse du navigateur
       et le bas du hero passe sous l'écran. */
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100dvh - var(--header-h));
    display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
.hero-split .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-split .hero-video, .hero-split .hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-split-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,46,62,.78) 0%, rgba(14,46,62,.55) 40%, rgba(12,94,134,.55) 100%); }

.hero-split-intro { position: relative; z-index: 3; text-align: center; color: #fff; padding-top: 110px; margin-bottom: 30px; }
.hero-split-title { color: #fff; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; margin: 0 0 .25em; }
.hero-split-lead { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 2vw, 1.35rem); margin: 0; }

.hero-panels { position: relative; z-index: 3; display: flex; align-items: stretch; gap: 0; max-width: 1100px; margin: 0 auto; width: 100%; padding: 0 24px 80px; }
.hero-panel { flex: 1; display: flex; border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: flex .5s var(--ease); position: relative; }
.hero-panel-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 38px 34px; width: 100%; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.16); transition: background .4s var(--ease), transform .4s var(--ease); }
.hero-panel--owner .hero-panel-inner { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.hero-panel--vet .hero-panel-inner { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.hero-panel:hover { flex: 1.35; }
.hero-panel:hover .hero-panel-inner { background: rgba(11,147,213,.92); transform: translateY(-2px); }
.hero-panel--vet:hover .hero-panel-inner { background: rgba(14,46,62,.92); }
.hero-panel-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; background: rgba(255,255,255,.16); color: #fff; }
.hero-panel-icon .ssicon { width: 28px; height: 28px; }
.hero-panel-label { font-family: var(--font-title); font-size: clamp(1.4rem, 2.4vw, 2rem); color: #fff; font-weight: 600; line-height: 1.1; }
.hero-panel-desc { color: rgba(255,255,255,.86); font-size: .98rem; max-width: 320px; }
.hero-panel-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 1rem; }
.hero-panel:hover .hero-panel-cta span { transform: translateX(4px); transition: transform .3s var(--ease); display: inline-block; }
.hero-panels-divider { display: grid; place-items: center; width: 0; position: relative; z-index: 4; }
.hero-divider-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--blanc-chaud); color: var(--navy); display: grid; place-items: center; font-family: var(--font-title); font-style: italic; font-size: 1.1rem; box-shadow: var(--shadow-md); }

/* ---------- Avis : colonnes verticales infinies ---------- */
.avis-section { background: var(--pierre); overflow: hidden; }
.avis-head { text-align: center; margin-bottom: 44px; }
.avis-sub { color: var(--muted); max-width: 560px; margin: 0 auto; }
.avis-columns { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; height: 80vh; max-height: 760px; padding: 0 clamp(20px, 4vw, 56px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.avis-col { overflow: hidden; cursor: grab; }
.avis-col.is-dragging { cursor: grabbing; }
.avis-track { display: flex; flex-direction: column; gap: 22px; will-change: transform; animation: avisScroll var(--avis-duration, 40s) linear infinite; }
.avis-col[data-dir="up"] .avis-track { animation-direction: reverse; }
.avis-col:hover .avis-track, .avis-col.is-dragging .avis-track { animation-play-state: paused; }
@keyframes avisScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.avis-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.avis-stars { color: #F5B301; letter-spacing: 2px; font-size: .95rem; margin-bottom: 10px; }
.avis-text { font-size: .96rem; line-height: 1.6; color: var(--ink); margin: 0 0 18px; }
.avis-author { display: flex; align-items: center; gap: 12px; }
.avis-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bleu-clair); color: var(--navy); font-family: var(--font-title); font-weight: 600; font-size: 1.1rem; flex-shrink: 0; }
.avis-meta { display: flex; flex-direction: column; line-height: 1.3; }
.avis-name { font-weight: 700; color: var(--navy); font-size: .92rem; }
.avis-animal { font-size: .82rem; color: var(--muted); }
.avis-cta { text-align: center; margin-top: 44px; }
.avis-fade { display: none; }

/* ---------- Référer : maquette formulaire animée ---------- */
.referer-section { background: var(--navy); color: rgba(255,255,255,.86); }
.referer-grid { align-items: center; }
.referer-text .section-tag { color: var(--bleu-clair); }
.referer-text .section-title { color: #fff; }
.referer-points { list-style: none; padding: 0; margin: 24px 0 32px; display: flex; flex-direction: column; gap: 14px; }
.referer-points li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.9); }
.referer-check { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.1); color: var(--bleu-clair); flex-shrink: 0; }
.referer-check .ssicon { width: 20px; height: 20px; }

.rf-window { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.rf-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; background: var(--pierre); border-bottom: 1px solid var(--line); }
.rf-dot { width: 11px; height: 11px; border-radius: 50%; background: #DCD2C0; }
.rf-dot:nth-child(1){ background:#ff5f57; } .rf-dot:nth-child(2){ background:#febc2e; } .rf-dot:nth-child(3){ background:#28c840; }
.rf-url { margin-left: 12px; font-size: .8rem; color: var(--muted); }
.rf-body { padding: 26px; }
.rf-field { margin-bottom: 18px; }
.rf-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.rf-input { display: block; min-height: 44px; border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 14px; color: var(--ink); font-size: .95rem; position: relative; background: var(--blanc-chaud); }
.rf-input.is-active { border-color: var(--azur); box-shadow: 0 0 0 3px rgba(11,147,213,.15); }
.rf-input::after { content: attr(data-typed); }
.rf-input.is-typing::after { content: attr(data-typed) '|'; }
.rf-submit { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--azur); color: #fff; border-radius: 10px; padding: 14px; font-weight: 700; transition: background .3s var(--ease); opacity: .5; }
.rf-submit.is-ready { opacity: 1; background: var(--azur-dark); }
.rf-check { opacity: 0; transform: scale(.5); transition: all .4s var(--ease); }
.rf-submit.is-done .rf-check { opacity: 1; transform: scale(1); }
.rf-submit.is-done .rf-submit-text::after { content: ' ✓'; }

/* ---------- Bandeau RDV flottant ---------- */
.rdv-nudge { position: fixed; bottom: 24px; left: 24px; z-index: 950; max-width: 340px; display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); transform: translateY(140%); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.rdv-nudge.is-visible { transform: translateY(0); opacity: 1; }
.rdv-nudge-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--pierre); color: var(--azur); flex-shrink: 0; }
.rdv-nudge-body { display: flex; flex-direction: column; flex: 1; }
.rdv-nudge-title { font-family: var(--font-title); font-weight: 600; color: var(--navy); font-size: 1.02rem; }
.rdv-nudge-text { font-size: .85rem; color: var(--muted); }
.rdv-nudge-btn { background: var(--azur); color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.rdv-nudge-btn:hover { background: var(--azur-dark); color: #fff; }
.rdv-nudge-close { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 1.2rem; color: var(--muted); cursor: pointer; line-height: 1; }

/* ---------- Bouton retour en haut ---------- */
.scroll-top { position: fixed; bottom: 24px; right: 24px; z-index: 940; width: 50px; height: 50px; border-radius: 50%; background: var(--navy); color: #fff; border: 0; font-size: 1.3rem; cursor: pointer; opacity: 0; transform: translateY(20px); transition: all .35s var(--ease); box-shadow: var(--shadow-md); }
.scroll-top.is-visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--azur); transform: translateY(-3px); }

/* ---------- Cartes guide (pages propriétaire/vétérinaire) ---------- */
.guide-card { display: flex; flex-direction: column; gap: 10px; }
.guide-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--pierre); color: var(--azur); }
.guide-icon .ssicon { width: 28px; height: 28px; }
.page-hero--owner { background: linear-gradient(180deg, var(--bleu-clair), var(--blanc-chaud)); }
.page-hero--vet { background: linear-gradient(180deg, #D4E6F2, var(--blanc-chaud)); }
.page-hero--service { background: linear-gradient(180deg, rgba(11,147,213,.10), var(--blanc-chaud)); }

/* ---------- Responsive V1.1 ---------- */
@media (max-width: 1024px) {
    .footer-grid--full { grid-template-columns: 1fr 1fr; }
    .avis-columns { grid-template-columns: repeat(3, 1fr); }
    .referer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .footer-grid--full { grid-template-columns: 1fr; }
    .hero-panels { flex-direction: column; gap: 14px; padding-bottom: 60px; }
    .hero-panel--owner .hero-panel-inner, .hero-panel--vet .hero-panel-inner { border-radius: var(--radius); }
    .hero-panel:hover { flex: 1; }
    .hero-panels-divider { display: none; }
    .avis-columns { grid-template-columns: 1fr; height: 70vh; }
    .avis-col:nth-child(2), .avis-col:nth-child(3), .avis-col:nth-child(4) { display: none; }
    .rdv-nudge { left: 12px; right: 12px; max-width: none; }
}

/* ---------- Bandeaux image (services, clinique, plateau) ---------- */
.service-banner, .clinic-banner { max-width: 1100px; margin: -20px auto 0; padding: 0 clamp(20px, 4vw, 56px); }
.service-banner img, .clinic-banner img { width: 100%; height: clamp(280px, 42vw, 520px); object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); transition: transform .1s linear; }
.service-banner > *, .clinic-banner > * { border-radius: var(--radius); overflow: hidden; display: block; }
.media-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4/3; border-radius: var(--radius); background: repeating-linear-gradient(45deg, var(--pierre), var(--pierre) 12px, var(--blanc-chaud) 12px, var(--blanc-chaud) 24px); color: var(--muted); font-size: .9rem; border: 1px dashed var(--line); text-align: center; }

/* ---------- Cartes animaux avec photo ---------- */
.animal-card--photo { padding: 0; overflow: hidden; }
.animal-photo { display: block; }
.animal-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.animal-card--photo .animal-body { display: block; padding: 26px; }
.animal-card--photo .animal-icon { margin-bottom: 10px; }

/* ---------- Pré-footer avec image de fond ---------- */
.prefooter-cta--image { position: relative; overflow: hidden; }
.prefooter-cta--image .prefooter-bg { position: absolute; inset: 0; z-index: 0; }
.prefooter-cta--image .prefooter-bg img { width: 100%; height: 100%; object-fit: cover; }
.prefooter-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(14,46,62,.92) 0%, rgba(12,94,134,.82) 100%); }
.prefooter-cta--image .prefooter-inner { position: relative; z-index: 2; }

/* =========================================================
   PAGES CLINIQUE / PRÉSENTATION / PLATEAU
   ========================================================= */

/* ---------- Plateau : blocs numérotés ---------- */
.plateau-block--alt { background: var(--pierre); }
.plateau-head { display: flex; align-items: center; gap: 24px; margin-bottom: 40px; }
.plateau-num { font-family: var(--font-title); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--bleu-profond); line-height: 1; flex-shrink: 0; }
.plateau-head .section-title { margin: 0; }
.plateau-head .section-tag { margin-bottom: 6px; }

.equip-grid { gap: 20px; }
.equip-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); display: flex; flex-direction: column; gap: 10px; }
.equip-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.equip-icon { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; background: var(--pierre); color: var(--azur); }
.plateau-block--alt .equip-icon { background: #fff; }
.equip-icon .ssicon { width: 26px; height: 26px; }
.equip-name { font-family: var(--font-title); font-size: 1.12rem; font-weight: 600; color: var(--navy); }
.equip-desc { font-size: .92rem; color: var(--muted); }

.lab-grid { gap: 16px; }
.lab-item { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; }
.lab-check { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--pierre); color: var(--azur); flex-shrink: 0; }
.lab-check .ssicon { width: 20px; height: 20px; }
.lab-body { display: flex; flex-direction: column; gap: 2px; }
.lab-name { font-weight: 600; color: var(--navy); font-size: .98rem; }
.lab-desc { font-size: .86rem; color: var(--muted); }

.hospit-grid { align-items: center; }
.hospit-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.hospit-points li { display: flex; align-items: center; gap: 14px; font-weight: 500; color: var(--ink); }
.hospit-points .referer-check { background: var(--pierre); color: var(--azur); }
.plateau-seo h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* ---------- Clinique : piliers + cartes nav ---------- */
.pillars-grid { gap: 24px; }
.pillar-card { text-align: center; padding: 38px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pillar-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--pierre); color: var(--azur); margin: 0 auto 18px; }
.pillar-icon .ssicon { width: 32px; height: 32px; }
.pillar-title { font-size: 1.25rem; margin-bottom: 10px; }

.nav-cards { gap: 24px; }
.nav-card { display: flex; gap: 20px; padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.nav-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--bleu-profond); }
.nav-card-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--pierre); color: var(--azur); flex-shrink: 0; }
.nav-card-icon .ssicon { width: 28px; height: 28px; }
.nav-card-body { display: flex; flex-direction: column; gap: 6px; }
.nav-card-title { font-family: var(--font-title); font-size: 1.3rem; font-weight: 600; color: var(--navy); }
.nav-card-desc { font-size: .95rem; color: var(--muted); margin-bottom: 4px; }

/* ---------- Présentation : expertise + approche ---------- */
.histoire-grid { align-items: center; }
.expertise-grid { gap: 24px; margin-top: 12px; }
.expertise-card { display: flex; align-items: center; gap: 20px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); flex-wrap: wrap; }
.expertise-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.expertise-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--pierre); color: var(--azur); flex-shrink: 0; }
.expertise-icon .ssicon { width: 28px; height: 28px; }
.expertise-body { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 4px; }
.expertise-title { font-family: var(--font-title); font-size: 1.2rem; font-weight: 600; color: var(--navy); }
.expertise-desc { font-size: .92rem; color: var(--muted); }

.approach-grid { gap: 28px; margin-top: 12px; counter-reset: step; position: relative; }
.approach-step { background: var(--pierre); border-radius: var(--radius); padding: 34px 28px; position: relative; }
.approach-num { font-family: var(--font-title); font-size: 2.6rem; color: var(--bleu-profond); line-height: 1; display: block; margin-bottom: 12px; }
.approach-title { font-size: 1.25rem; margin-bottom: 8px; }

@media (max-width: 768px) {
    .plateau-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .expertise-card { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* =========================================================
   SECTIONS "WAOUH" — STATS, TICKER, FAQ ACCUEIL
   ========================================================= */

/* ---------- Chiffres clés (compteurs) ---------- */
.stats-section { padding-bottom: 0; }
.stats-grid { gap: 24px; }
.stat-card { text-align: center; padding: 20px; }
.stat-number { display: block; font-family: var(--font-title); font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.2rem); color: var(--azur); line-height: 1; letter-spacing: -0.03em; }
.stat-suffix { color: var(--bleu-profond); }
.stat-label { display: block; margin-top: 10px; color: var(--muted); font-size: .98rem; font-weight: 500; }

/* ---------- Ticker défilant ---------- */
.ticker { margin-top: clamp(48px, 7vw, 90px); padding: 22px 0; background: var(--navy); overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; align-items: center; gap: 28px; animation: tickerScroll 32s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { font-family: var(--font-title); font-weight: 500; font-size: clamp(1.3rem, 2.6vw, 2rem); color: #fff; letter-spacing: -0.01em; text-transform: uppercase; }
.ticker-sep { color: var(--bleu-profond); font-size: 1.1rem; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- FAQ accueil (2 colonnes) ---------- */
.faq-home-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq-home-intro { position: sticky; top: 110px; }
.faq-home-intro .btn-secondary { margin-top: 22px; }

/* ---------- Animations reveal complémentaires ---------- */
@media (prefers-reduced-motion: reduce) {
    .ticker-track, .avis-track { animation: none !important; }
}

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .faq-home-grid { grid-template-columns: 1fr; }
    .faq-home-intro { position: static; }
}

/* =========================================================
   HERO DE PAGE IMMERSIVE
   ========================================================= */
.hero-page { position: relative; min-height: 56vh; display: flex; align-items: flex-end; padding: 0; overflow: hidden; background: var(--navy); }
.hero-page-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); z-index: 0; }
.hero-page-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,46,62,.55) 0%, rgba(14,46,62,.72) 70%, rgba(14,46,62,.88) 100%); }
.hero-page-inner { position: relative; z-index: 2; padding-top: clamp(60px, 9vw, 130px); padding-bottom: clamp(40px, 6vw, 72px); width: 100%; max-width: var(--container); margin: 0 auto; }
.hero-page--center { align-items: center; text-align: center; }
.hero-page--center .hero-page-inner { max-width: 820px; }
.hero-page--center .breadcrumb { justify-content: center; }
.hero-page-title { color: #fff; font-size: clamp(2.3rem, 5.5vw, 4.4rem); line-height: 1.04; margin: 0 0 .35em; max-width: 16ch; }
.hero-page--center .hero-page-title { max-width: none; }
.hero-page-sub { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 620px; margin: 0; }
.hero-page--center .hero-page-sub { margin: 0 auto; }
.hero-page-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-page--center .hero-page-actions { justify-content: center; }
.section-tag--light { color: var(--bleu-clair); }
/* Breadcrumb clair sur hero foncée */
.hero-page .breadcrumb, .hero-page .breadcrumb a { color: rgba(255,255,255,.7); }
.hero-page .breadcrumb a:hover { color: #fff; }
.hero-page .breadcrumb .bc-current { color: #fff; }

@media (max-width: 768px) {
    .hero-page { min-height: 48vh; }
    .hero-page-actions .btn-primary, .hero-page-actions .btn-secondary, .hero-page-actions .btn-ghost { width: 100%; }
}

/* =========================================================
   SECTIONS FONCÉES, TACHES DE COULEUR, DÉCO ANIMALE
   ========================================================= */

/* ---------- Section foncée : bascule complète en clair ---------- */
.section--dark { position: relative; background: var(--navy); color: rgba(255,255,255,.85); overflow: hidden; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: rgba(255,255,255,.82); }
.section--dark .section-tag { color: var(--bleu-clair); }
.section--dark .section-title { color: #fff; }
.section--dark a:not(.btn-primary):not(.btn-secondary):not(.btn-ghost) { color: var(--bleu-clair); }
.section--dark a:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):hover { color: #fff; }
.section--dark .link-arrow { color: var(--bleu-clair); }
/* Cartes sur fond foncé */
.section--dark .equip-card, .section--dark .pillar-card, .section--dark .nav-card,
.section--dark .expertise-card, .section--dark .lab-item, .section--dark .stat-card,
.section--dark .faq-item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); box-shadow: none; }
.section--dark .equip-name, .section--dark .nav-card-title, .section--dark .expertise-title,
.section--dark .lab-name, .section--dark .pillar-title, .section--dark .faq-question { color: #fff; }
.section--dark .equip-desc, .section--dark .nav-card-desc, .section--dark .expertise-desc,
.section--dark .lab-desc { color: rgba(255,255,255,.7); }
.section--dark .equip-icon, .section--dark .nav-card-icon, .section--dark .expertise-icon,
.section--dark .lab-check, .section--dark .pillar-icon { background: rgba(255,255,255,.1); color: var(--bleu-clair); }
.section--dark .stat-number { color: var(--bleu-clair); }
.section--dark .stat-suffix { color: #fff; }
.section--dark .stat-label { color: rgba(255,255,255,.72); }
.section--dark .faq-item { border-bottom-color: rgba(255,255,255,.12); }
.section--dark .faq-answer p { color: rgba(255,255,255,.72); }
.section--dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,.4); }
.section--dark .btn-secondary:hover { background: #fff; color: var(--navy); }

/* ---------- Taches de couleur (blobs en opacité) ---------- */
.blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Halos d'ambiance. Un flou de 8 pixels laissait un disque net qui se lisait
   comme une tache ; il faut un flou très large pour que ce soit une nuance de
   fond et non une forme. Réservés aux sections sombres, où ils apportent de la
   profondeur : sur fond clair ils passent pour une salissure. */
.blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .30; }
.blob--azur { background: var(--azur); }
.blob--bleu { background: var(--bleu-profond); }
.blob--blanc-chaud { background: var(--pierre); opacity: .18; }
.section--dark .blob { opacity: .14; filter: blur(20px); }
.blob--1 { width: 460px; height: 460px; top: -180px; right: -160px; }
.blob--2 { width: 380px; height: 380px; bottom: -180px; left: -140px; }
.blob--3 { width: 300px; height: 300px; top: 40%; left: 55%; }
.section > .container, .section--dark > .container { position: relative; z-index: 1; }

/* ---------- Empreintes de pattes décoratives ---------- */
.section--dark .paw-trail { opacity: .1; }

/* Traînée de pattes dans les heros (filigrane) */
.paw-trail--hero { position: absolute; z-index: 1; opacity: .12; }
@media (max-width: 768px) { .paw-trail--hero { display: none; } }

/* ---------- Groupe d'actions (boutons) ---------- */
.guide-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.text-center .guide-actions, .guide-actions.text-center { justify-content: center; }

/* ---------- Plan du site ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.sitemap-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.sitemap-title { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; margin-bottom: 18px; }
.sitemap-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--pierre); color: var(--azur); flex-shrink: 0; }
.sitemap-ic .ssicon { width: 22px; height: 22px; }
.sitemap-list { list-style: none; padding: 0; margin: 0; }
.sitemap-list li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.sitemap-list li:last-child { border-bottom: 0; }
.sitemap-list a { color: var(--ink); transition: color .2s var(--ease), padding-left .2s var(--ease); }
.sitemap-list a:hover { color: var(--azur); padding-left: 5px; }
.sitemap-list ul { list-style: none; padding: 6px 0 0 16px; margin: 0; }
.sitemap-list ul li { border-bottom: 0; padding: 4px 0; }
.sitemap-list ul a { font-size: .92rem; color: var(--muted); }

/* ---------- Accès (contact) ---------- */
.access-grid { gap: 24px; margin-top: 8px; }

@media (max-width: 1024px) { .sitemap-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .sitemap-grid { grid-template-columns: 1fr; } }

/* =========================================================
   TOPBAR + MEGA MENU VISUEL + FOOTER
   ========================================================= */

/* ---------- Topbar (bandeau propriétaire / vétérinaire) ---------- */
.topbar { background: var(--navy); color: rgba(255,255,255,.8); font-size: .82rem; }
.topbar-inner { max-width: 100%; padding: 0 clamp(20px, 4vw, 56px); height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar-tagline { display: inline-flex; align-items: center; gap: 9px; letter-spacing: .02em; }
.topbar-paw .ssicon { width: 15px; height: 15px; color: var(--bleu-clair); }
.topbar-links { display: flex; gap: 8px; }
.topbar-links a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.85); padding: 5px 14px; border-radius: 999px; font-weight: 600; transition: background .25s var(--ease), color .25s var(--ease); }
.topbar-links a .ssicon { width: 15px; height: 15px; }
.topbar-links a:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 768px) {
    .topbar-tagline { display: none; }
    .topbar-inner { justify-content: center; height: 38px; }
    .topbar-links a { font-size: .78rem; padding: 4px 11px; }
}

/* ---------- Mega menu : panneau visuel avec image ---------- */
.mega-caret { font-size: .7em; opacity: .6; }
.mega-col a .mm-link-t { display: block; font-weight: 600; color: var(--navy); }
.mega-col a .mm-link-d { display: block; font-size: .82rem; color: var(--muted); margin-top: 1px; }
.mega-col a:hover .mm-link-t { color: var(--azur); }
.mega-col--visual { position: relative; overflow: hidden; border-radius: var(--radius-sm); background-size: cover; background-position: center; min-height: 180px; display: flex; align-items: flex-end; text-decoration: none; }
.mega-visual-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,46,62,.1), rgba(14,46,62,.85)); }
.mega-visual-content { position: relative; z-index: 1; padding: 18px; }
.mega-col--visual .megamenu-title { color: #fff; margin-bottom: 6px; }
.mega-col--visual .mega-cta { color: var(--bleu-clair); font-weight: 600; }
.mega-col--visual:hover .mega-cta { color: #fff; }

/* ---------- Footer : titres multiples ---------- */
.footer-title--mt { margin-top: 26px; }
.footer-col--hidden-dup { display: none; }

/* =========================================================
   HUB SERVICES — STACK-SCROLL (cartes qui s'empilent)
   ========================================================= */
.services-stack-section { overflow: visible; }
.services-stack { margin-top: 50px; }
.stack-card { position: sticky; top: 110px; margin-bottom: 40px; scroll-margin-top: 130px; }
/* Décalage progressif pour l'effet d'empilement */
.stack-card { top: calc(110px + (var(--stack-i) - 1) * 18px); }
.stack-card-inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg, 24px);
    overflow: hidden; box-shadow: var(--shadow-lg); height: 480px;
}
.stack-card-text { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; position: relative; }
.stack-num { font-family: var(--font-title); font-size: 3rem; color: var(--bleu-clair); line-height: 1; position: absolute; top: 28px; right: 32px; }
.stack-ic { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--pierre); color: var(--azur); margin-bottom: 18px; }
.stack-ic .ssicon { width: 30px; height: 30px; }
.stack-title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: .35em; }
.stack-desc { color: var(--muted); margin-bottom: 22px; }
.stack-links { display: flex; flex-direction: column; gap: 9px; }
.stack-links a { font-weight: 600; color: var(--azur-dark); display: inline-flex; align-items: center; gap: 7px; transition: gap .25s var(--ease), color .25s var(--ease); }
.stack-links a:hover { gap: 12px; color: var(--azur); }
.stack-card-media { background-size: cover; background-position: center; position: relative; min-height: 280px; }
.stack-media-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(14,46,62,.15), transparent 60%); }

@media (max-width: 860px) {
    .stack-card { position: relative; top: 0 !important; margin-bottom: 24px; }
    .stack-card-inner { grid-template-columns: 1fr; height: auto; }
    .stack-card-media { min-height: 200px; order: -1; }
    .stack-num { font-size: 2.2rem; top: 20px; right: 22px; }
}

/* ---------- Arrondi de sécurité sur les images de contenu ---------- */
.histoire-grid img, .presentation-media img, .reveal-right > img, .reveal-left > img,
.presentation-grid img { border-radius: var(--radius); }

/* ---------- Maillage : liens groupés présentation + CTA conseils ---------- */
.presentation-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 8px; }
.conseil-cta { margin-top: 40px; padding: 28px 32px; background: var(--pierre); border-radius: var(--radius); border: 1px solid var(--line); }
.conseil-cta p { margin-bottom: 16px; font-weight: 500; color: var(--navy); }
.btn-ghost-dark { display: inline-flex; align-items: center; padding: 12px 26px; border-radius: 999px; border: 1.5px solid var(--navy); color: var(--navy); font-weight: 600; transition: background .25s var(--ease), color .25s var(--ease); }
.btn-ghost-dark:hover { background: var(--navy); color: #fff; }

/* ---------- Carte CTA "Découvrir nos services" (page animaux) ---------- */
.animal-card--cta { display: flex; align-items: center; justify-content: center; text-align: center;
    background: linear-gradient(155deg, var(--azur) 0%, var(--azur-dark) 100%); color: #fff;
    border-radius: var(--radius); padding: 32px; min-height: 100%; text-decoration: none;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.animal-card--cta:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.animal-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.animal-card--cta .animal-icon { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: rgba(255,255,255,.16); color: #fff; }
.animal-card--cta .animal-icon .ssicon { width: 30px; height: 30px; }
.animal-cta-title { font-family: var(--font-title); font-size: 1.35rem; font-weight: 600; }
.animal-cta-desc { color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.5; }
.animal-card--cta .link-arrow { color: #fff; font-weight: 600; margin-top: 4px; }

/* ---------- Menu mobile : header opaque quand le menu est ouvert ---------- */
body.mobile-menu-open .site-header { background: var(--blanc-chaud); backdrop-filter: none; }


/* ---------- Header fixe + menu déroulant sur mobile ---------- */
@media (max-width: 980px) {
    /* La barre du haut disparaît : l'en-tête ne fait plus que la navigation. */
    :root { --header-h: 78px; }
    .topbar { display: none; }
    .main-nav { display: none; }
    .burger { display: flex; }
    .header-phone { display: none; }
    .site-header {
        background: var(--blanc-chaud); backdrop-filter: none;
        position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
        box-shadow: 0 1px 0 rgba(0,0,0,.06);
    }
    body { padding-top: 78px; }
    .mobile-nav { top: 78px; }
}

/* Contention du scroll horizontal SANS couper le mega-menu (hors header). */
.site-main { overflow-x: clip; }


/* =========================================================
   Accent corail — repris des sieges et des empreintes de pattes.
   Usage volontairement rare : un seul accent chaud par ecran.
   ========================================================= */
.accent-corail { color: var(--corail); }
.btn-accent {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px; border-radius: 999px;
    font-family: var(--font-body); font-weight: 600; font-size: .98rem;
    background: var(--corail); color: #fff; border: 2px solid transparent;
    transition: transform .3s var(--ease), background .3s var(--ease);
}
.btn-accent:hover { background: #C7602B; color: #fff; transform: translateY(-2px); }
.badge-urgence {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--corail-light); color: #A94E1E;
    padding: 6px 14px; border-radius: 999px;
    font-size: .82rem; font-weight: 600;
}


/* =========================================================
   Liste de réassurance (page propriétaire).
   Volontairement sans bouton : le pied de page porte déjà
   l'appel à l'action, deux à la suite s'annulent.
   ========================================================= */
.reassurance-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.reassurance-item { display: flex; gap: 16px; align-items: flex-start; }
.reassurance-icon {
    display: grid; place-items: center; flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 11px;
    background: rgba(11,147,213,.10); color: var(--azur-dark);
}
.reassurance-icon .ssicon { width: 21px; height: 21px; }
.reassurance-body { display: flex; flex-direction: column; gap: 4px; }
.reassurance-title { color: var(--navy); font-weight: 700; font-size: 1rem; }
.reassurance-desc { color: var(--muted); font-size: .95rem; line-height: 1.6; }
@media (max-width: 1024px) { .reassurance-list { gap: 18px; } }


/* =========================================================
   Décor : traînées d'empreintes de pattes.
   Reprend les empreintes bleues et orange peintes au sol de
   la clinique. Volontairement discrètes : elles se remarquent
   à la deuxième lecture, jamais à la première.
   ========================================================= */
.paw-trail {
    position: absolute; z-index: 0; pointer-events: none; user-select: none;
    display: flex; flex-direction: column; gap: 30px;
}
/* Placement : dans la gouttière, à peu près au milieu de l'espace laissé libre
   par le conteneur, avec un plancher pour ne jamais être coupé par le bord de
   l'écran. Sous 1400px il n'y a plus de gouttière disponible, on masque. */
.paw-trail--left  { left:  max(14px, calc((100vw - var(--container)) / 4 - 21px)); }
.paw-trail--right { right: max(14px, calc((100vw - var(--container)) / 4 - 21px)); }

/* Teintes volontairement très basses : le décor se devine, il ne se voit pas. */
.paw-trail--azur   { color: var(--azur);         opacity: .085; }
.paw-trail--corail { color: var(--corail);       opacity: .10; }
.paw-trail--pierre { color: var(--bleu-profond); opacity: .07; }
.paw-trail--light  { color: #fff;                opacity: .12; }

/* Coussinets PLEINS, comme les empreintes peintes au sol de la clinique :
   un masque posé sur un aplat de couleur, pas une icône au trait. */
.paw-step {
    display: block; width: 40px; height: 40px; background: currentColor;
    -webkit-mask: var(--paw-mask) center / contain no-repeat;
            mask: var(--paw-mask) center / contain no-repeat;
}
/* Rythme de marche : un pied à gauche, un pied à droite, des tailles et des
   angles qui varient, sinon la trace ressemble à une colonne d'icônes. */
.paw-trail .paw-step:nth-child(even) { margin-left: 40px; }
.paw-trail--right .paw-step:nth-child(even) { margin-left: 0; margin-right: 40px; }
.paw-trail .paw-step:nth-child(1) { transform: rotate(-16deg); width: 40px; height: 40px; }
.paw-trail .paw-step:nth-child(2) { transform: rotate(11deg);  width: 36px; height: 36px; opacity: .92; }
.paw-trail .paw-step:nth-child(3) { transform: rotate(-9deg);  width: 42px; height: 42px; }
.paw-trail .paw-step:nth-child(4) { transform: rotate(14deg);  width: 34px; height: 34px; opacity: .86; }
.paw-trail .paw-step:nth-child(5) { transform: rotate(-12deg); width: 39px; height: 39px; opacity: .80; }
.paw-trail .paw-step:nth-child(6) { transform: rotate(8deg);   width: 33px; height: 33px; opacity: .72; }
.paw-trail .paw-step:nth-child(7) { transform: rotate(-6deg);  width: 30px; height: 30px; opacity: .62; }

/* Le décor disparaît sous 1400px : la place sert au contenu. */
@media (max-width: 1400px) { .paw-trail { display: none; } }

/* Une section qui accueille un décor doit pouvoir le positionner
   et garder son contenu au-dessus. */
.section, .prefooter-cta { position: relative; }
.section > .container, .prefooter-cta > .container { position: relative; z-index: 1; }


/* Filet de sécurité : aucun halo sur un fond clair. */
.section:not(.section--dark) > .blobs { display: none; }

/* ==========================================================================
   FICHES SOINS, mise en page à deux colonnes
   Le contenu rédigé garde toute la largeur de lecture confortable, la colonne
   de droite reste visible pendant la lecture avec le sommaire et le rappel
   téléphonique. Sous 1024px tout se remet en une colonne, sommaire en premier.
   ========================================================================== */

.section--pierre { background: var(--pierre); }

/* Sous-titre de localisation sous le H1 des fiches */
.page-hero--service .page-hero-sub { max-width: 720px; }

/* Repères pratiques, juste sous le bandeau */
.service-brief { background: var(--blanc-chaud); border-bottom: 1px solid var(--line); }
.service-brief-list {
    list-style: none; margin: 0; padding: 26px 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.service-brief-list li { display: flex; gap: 14px; align-items: flex-start; }
.sb-icon {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 11px;
    background: var(--pierre); color: var(--azur);
}
.sb-text { display: flex; flex-direction: column; gap: 2px; }
.sb-label {
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; color: var(--azur);
}
.sb-value { font-size: .95rem; color: var(--ink); line-height: 1.45; }

/* Deux colonnes */
.service-body { padding-top: clamp(48px, 6vw, 76px); }
.service-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(36px, 5vw, 72px);
    /* Surtout pas align-items:start : la colonne de droite doit occuper toute la
       hauteur de la ligne, sinon le bloc collant n'a aucune course. */
    align-items: stretch;
}
.service-main { max-width: 760px; }
.service-aside { height: 100%; }
.service-aside-inner { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 20px; }

/* Sommaire */
.service-toc {
    background: var(--blanc-chaud); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px 24px;
}
.service-toc ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.service-toc a {
    display: flex; gap: 12px; align-items: baseline;
    padding: 7px 0; font-size: .92rem; line-height: 1.4;
    color: var(--muted); border-bottom: 1px solid transparent;
}
.service-toc a:hover { color: var(--azur-dark); }
.toc-num {
    flex: 0 0 auto; font-size: .72rem; font-weight: 700;
    color: var(--bleu-clair); font-variant-numeric: tabular-nums;
}
.service-toc a:hover .toc-num { color: var(--azur); }

/* Rappel téléphonique collant */
.service-aside-cta {
    background: var(--navy); color: rgba(255,255,255,.82);
    border-radius: var(--radius); padding: 26px 24px;
    display: grid; gap: 10px; justify-items: start;
}
.sac-icon {
    display: inline-grid; place-items: center; width: 42px; height: 42px;
    border-radius: 12px; background: rgba(255,255,255,.1); color: var(--bleu-clair);
    margin-bottom: 4px;
}
.sac-title { font-family: var(--font-title); font-size: 1.12rem; font-weight: 600; color: #fff; margin: 0; }
.sac-text { font-size: .9rem; line-height: 1.55; margin: 0 0 6px; color: rgba(255,255,255,.72); }
.service-aside-cta .btn-primary { width: 100%; justify-content: center; }
.service-aside-cta .link-arrow { color: var(--bleu-clair); font-size: .88rem; }
.service-aside-cta .link-arrow:hover { color: #fff; }

/* Typographie du contenu rédigé des fiches */
/* Chapô : tous les paragraphes d'intro, pas seulement le premier, sinon deux
   tailles de texte se suivent dans un même bloc et ça se voit. */
.entry-content--service .service-lead {
    font-size: 1.16rem; line-height: 1.68; color: var(--ink);
}
.entry-content--service h2 {
    position: relative; padding-top: 18px; margin-top: 2.2em;
    scroll-margin-top: calc(var(--header-h) + 24px);
}
.entry-content--service h2::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 40px; height: 3px; border-radius: 2px; background: var(--corail);
}
.entry-content--service h2:first-child { margin-top: 0; }
.entry-content--service ul {
    list-style: none; padding-left: 0; margin: 1.4em 0;
    display: grid; gap: 2px;
}
.entry-content--service ul li {
    position: relative; padding: 9px 0 9px 34px;
    border-bottom: 1px solid var(--line);
}
.entry-content--service ul li:last-child { border-bottom: 0; }
.entry-content--service ul li::before {
    content: ""; position: absolute; left: 2px; top: 15px;
    width: 14px; height: 14px; background: var(--azur);
    -webkit-mask: var(--paw-mask) center / contain no-repeat;
            mask: var(--paw-mask) center / contain no-repeat;
    opacity: .55;
}

/* Bloc d'accès à la clinique */
.service-local-grid {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: clamp(32px, 5vw, 70px); align-items: start;
}
.service-local-lead { font-size: 1.05rem; line-height: 1.7; max-width: 62ch; }
.service-local-facts { list-style: none; margin: 26px 0 28px; padding: 0; display: grid; gap: 16px; }
.service-local-facts li { display: flex; gap: 14px; align-items: flex-start; font-size: .98rem; line-height: 1.55; }
.slf-icon {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 11px; background: #fff; color: var(--azur);
}
.service-local-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.service-local-side { background: #fff; border-radius: var(--radius); padding: 26px 24px; }
.service-local-acces { list-style: none; margin: 14px 0 0; padding: 0; }
.service-local-acces a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink);
}
.service-local-acces li:last-child a { border-bottom: 0; }
.service-local-acces a:hover .sla-ville { color: var(--azur-dark); }
.sla-ville { font-weight: 600; font-size: .96rem; }
.sla-temps { font-size: .86rem; color: var(--muted); white-space: nowrap; }
.service-local-note { font-size: .8rem; color: var(--muted); margin: 14px 0 0; }

@media (max-width: 1024px) {
    /* On sort le sommaire et le rappel de leur conteneur pour pouvoir les
       placer de part et d'autre du contenu : sommaire avant, rappel après. */
    .service-layout { grid-template-columns: 1fr; gap: 30px; }
    .service-aside, .service-aside-inner { display: contents; }
    .service-toc { order: 1; }
    .service-main { max-width: none; order: 2; }
    .service-aside-cta { order: 3; justify-items: stretch; text-align: left; }
    .service-local-grid { grid-template-columns: 1fr; }
    .service-brief-list { grid-template-columns: 1fr; gap: 16px; padding: 22px 0; }
}

@media (max-width: 768px) {
    .entry-content--service .service-lead { font-size: 1.06rem; }
    .service-local-actions .btn-primary, .service-local-actions .btn-secondary { width: 100%; }
}

    .rdv-frame-placeholder .btn-primary { width: 100%; }
}

/* ==========================================================================
   HORAIRES AVEC LE JOUR COURANT MIS EN ÉVIDENCE
   Le jour du jour est signalé par trois choses à la fois : la couleur, la
   graisse et une pastille texte. Jamais par la couleur seule, sinon la
   distinction disparaît pour une personne daltonienne.
   ========================================================================== */
.horaires { list-style: none; margin: 0; padding: 0; }
.horaires-ligne {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 7px 0; font-size: .92rem; line-height: 1.4;
    border-bottom: 1px solid var(--line);
}
.horaires-ligne:last-child { border-bottom: 0; }
.horaires-jour { display: flex; align-items: baseline; gap: 8px; }
.horaires-heures { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.horaires-ligne.is-closed .horaires-heures { font-style: italic; opacity: .75; }
.horaires-badge {
    font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
    padding: 2px 7px; border-radius: 999px; background: var(--azur); color: #fff;
    transform: translateY(-1px);
}
.horaires--clair .horaires-ligne.is-today {
    font-weight: 700; color: var(--azur-dark);
    box-shadow: inset 3px 0 0 var(--azur);
    padding-left: 12px; margin-left: -12px; border-radius: 3px;
}
.horaires--clair .horaires-ligne.is-today .horaires-heures { color: var(--azur-dark); font-weight: 700; }
.horaires--footer .horaires-ligne { border-bottom-color: rgba(255,255,255,.12); }
.horaires--footer .horaires-heures { color: rgba(255,255,255,.62); }
.horaires--footer .horaires-ligne.is-today {
    font-weight: 700; color: #fff;
    box-shadow: inset 3px 0 0 var(--bleu-clair);
    padding-left: 12px; margin-left: -12px; border-radius: 3px;
}
.horaires--footer .horaires-ligne.is-today .horaires-heures { color: #fff; font-weight: 700; }
.horaires--footer .horaires-badge { background: var(--bleu-clair); color: var(--navy); }
.contact-horaires { margin-top: 26px; }
.contact-horaires .megamenu-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.contact-horaires .megamenu-title .ssicon { width: 16px; height: 16px; }

/* ==========================================================================
   TEXTURE DE PIERRE
   La façade de la clinique est un mur en moellons. On le reprend littéralement :
   une photo de pierre sèche, désaturée, fortement aplatie en contraste, posée
   en fondu multiplié sur les fonds beiges, les héros et le pied de page.

   Trois garde-fous :
   - l'écart de luminosité de la texture est volontairement faible, les
     contrastes de texte restent très au-dessus du seuil AA ;
   - la texture est en pointer-events none et sous le contenu, elle ne masque
     rien et n'intercepte aucun clic ;
   - elle est en cover sans répétition, donc aucune couture visible quelle que
     soit la largeur de la section.
   ========================================================================== */
.section--pierre { background: var(--pierre); }
.section--pierre, .avis-section, .team, .page-hero, .service-hero, .site-footer { position: relative; overflow: hidden; }
.section--pierre::before, .avis-section::before, .team::before,
.page-hero::before, .service-hero::before, .site-footer::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("../images/texture-pierre.webp");
    background-size: cover; background-position: center;
    mix-blend-mode: multiply; opacity: .35;
}
/* Pas de pierre sur les fonds bleus : le pied de page et les sections sombres
   portent déjà les empreintes claires, une texture par dessus alourdit. */
.site-footer::before, .section--dark::before { display: none; }

/* Pas de pierre non plus sur le bloc « Venir à la clinique » des fiches soins :
   il contient l'adresse, les horaires et les temps de trajet, il doit se lire
   comme un encadré pratique, pas comme une image de fond. */
.service-local::before { display: none; }

/* Page Notre équipe : aucune texture, le fond reste neutre derrière les portraits. */
.sans-texture .section--pierre::before, .sans-texture .avis-section::before,
.sans-texture .team::before, .sans-texture .page-hero::before,
.sans-texture .service-hero::before { display: none; }
/* Les héros portent le titre principal : la pierre y reste en sourdine. */
.page-hero::before, .service-hero::before { opacity: .12; }
/* Sur mobile, la pierre est étirée et n'apporte plus rien : on l'allège. */
@media (max-width: 768px) {
    .section--pierre::before, .avis-section::before, .team::before,
    .page-hero::before, .service-hero::before { opacity: .22; }
}

/* Le contenu repasse au-dessus du grain, mais surtout pas les empreintes :
   elles doivent rester en absolu dans la gouttière, et derrière le texte. */
.section--pierre > *:not(.paw-trail), .avis-section > *:not(.paw-trail),
.team > *:not(.paw-trail), .page-hero > *:not(.paw-trail),
.service-hero > *:not(.paw-trail), .site-footer > *:not(.paw-trail) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) { .paw-trail { opacity: .05; } }

/* ==========================================================================
   HERO DES FICHES SOINS, en deux colonnes
   L'ancienne version empilait une pastille d'icône orpheline, un très grand
   titre, puis un bandeau photo pleine largeur : trois blocs successifs, aucun
   ne tenait dans le premier écran avec les autres. Ici le texte et la photo
   partagent la même ligne, l'icône est intégrée à l'étiquette de pôle, et le
   titre est calibré pour un intitulé long (soin plus ville).
   ========================================================================== */
.service-hero {
    padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 5vw, 68px);
    background: linear-gradient(180deg, rgba(11,147,213,.10), var(--blanc-chaud));
}
.service-hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(32px, 5vw, 70px); align-items: center; margin-top: 18px;
}
.service-hero-text { display: flex; flex-direction: column; }
.service-hero-tag { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; }
.service-hero-tag .ssicon { width: 18px; height: 18px; }
.service-hero-title {
    font-size: clamp(1.85rem, 3.2vw, 2.9rem); line-height: 1.12;
    margin: 0 0 16px; text-wrap: balance;
}
.service-hero-sub { font-size: 1.06rem; line-height: 1.65; color: var(--muted); margin: 0; max-width: 52ch; }
.service-hero .hero-page-actions { margin-top: 26px; }

.service-hero-media { position: relative; }
.service-hero-media img {
    width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius); box-shadow: var(--shadow-md); display: block;
}
.service-hero-media .media-placeholder { aspect-ratio: 4 / 3; }

@media (max-width: 900px) {
    .service-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .service-hero-media { order: -1; }
    .service-hero-media img { aspect-ratio: 16 / 10; }
}

/* L'étiquette de pôle porte déjà l'icône du soin : on retire l'empreinte
   décorative du section-tag, sinon deux pictogrammes se suivent. */
.service-hero-tag::before { display: none !important; }

/* ==========================================================================
   CONSENTEMENT AUX COOKIES
   Bannière discrète en bas d'écran, et espace réservé posé à la place de
   chaque contenu tiers tant que le visiteur n'a pas choisi. L'espace réservé
   garde la même hauteur que le contenu qu'il remplace, la page ne saute donc
   pas au moment du chargement.
   ========================================================================== */
.consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: var(--navy); color: rgba(255,255,255,.85);
    box-shadow: 0 -10px 40px rgba(14,46,62,.28);
    animation: consent-monte .35s var(--ease) both;
}
@keyframes consent-monte { from { transform: translateY(100%); } to { transform: translateY(0); } }
.consent-inner {
    max-width: var(--container); margin: 0 auto; padding: 22px 32px;
    display: flex; gap: clamp(20px, 4vw, 48px); align-items: center; justify-content: space-between;
}
.consent-title { font-family: var(--font-title); font-size: 1.05rem; font-weight: 600; color: #fff; margin: 0 0 6px; }
.consent-desc { font-size: .9rem; line-height: 1.6; margin: 0; max-width: 78ch; color: rgba(255,255,255,.75); }
.consent-desc a { color: var(--bleu-clair); text-decoration: underline; text-underline-offset: 3px; }
.consent-desc a:hover { color: #fff; }
.consent-actions { display: flex; gap: 12px; flex-shrink: 0; }
.consent-actions .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.consent-actions .btn-secondary:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Bouton « Gérer les cookies » du pied de page : c'est un bouton, pas un lien,
   il ne mène nulle part, il rouvre la bannière. On le déguise en lien. */
.consent-relink {
    background: none; border: 0; padding: 0; margin-left: 10px;
    font: inherit; color: inherit; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.consent-relink:hover { color: #fff; }

/* Espace réservé à la place d'un contenu tiers */
.consent-frame { position: relative; min-height: 460px; display: flex; }
.consent-frame > iframe { width: 100%; border: 0; display: block; border-radius: var(--radius); }
.consent-holder {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; padding: 40px 26px;
    background: var(--blanc-chaud); border: 1px dashed var(--line); border-radius: var(--radius);
}
.consent-holder-ic {
    display: inline-grid; place-items: center; width: 50px; height: 50px;
    border-radius: 14px; background: var(--pierre); color: var(--azur);
}
.consent-holder-title { font-family: var(--font-title); font-size: 1.12rem; font-weight: 600; margin: 6px 0 0; }
.consent-holder-text { font-size: .92rem; line-height: 1.6; color: var(--muted); margin: 0 0 8px; max-width: 44ch; }
.consent-holder-alt { font-size: .86rem; margin: 8px 0 0; }

/* Le module de réservation est plus haut qu'une carte. */
.rdv-frame { min-height: 620px; }
.rdv-frame > .rdv-iframe { height: 900px; }
.rdv-embed-note { margin-top: 18px; font-size: .88rem; color: var(--muted); max-width: 70ch; }

@media (max-width: 768px) {
    .consent-inner { flex-direction: column; align-items: stretch; padding: 20px; }
    .consent-actions { flex-direction: column-reverse; }
    .consent-actions .btn-primary, .consent-actions .btn-secondary { width: 100%; }
    .consent-frame { min-height: 380px; }
    .rdv-frame { min-height: 460px; }
    .rdv-frame > .rdv-iframe { height: 780px; }
    .consent-holder .btn-primary { width: 100%; }
}

/* ==========================================================================
   PORTRAITS D'ÉQUIPE : PHOTOS PLEINES
   Le cadre coloré et son décor circulaire avaient été conçus pour des portraits
   détourés, posés sur un aplat. Les photos de la clinique ne sont pas détourées :
   elles doivent donc remplir tout le cadre, sans fond bleu autour ni décor
   derrière. Les fonds colorés et le décor restent, mais seulement pour un membre
   sans photo, où la carte affiche ses initiales.
   ========================================================================== */
.team-photo:has(img) { background: var(--pierre); }
.team-card:nth-child(3n+1) .team-photo:has(img),
.team-card:nth-child(3n+2) .team-photo:has(img),
.team-card:nth-child(3n+3) .team-photo:has(img) { background: var(--pierre); }
.team-photo:has(img)::before,
.team-photo:has(img)::after,
.team-photo:has(img) .team-pattern { display: none; }
.team-photo:has(img) img {
    width: 100%; height: 100%; max-height: none;
    object-fit: cover; object-position: center 22%;
    padding: 0; align-self: stretch;
}
.team-card:hover .team-photo:has(img) img { transform: scale(1.04); }

/* ==========================================================================
   RELAIS D'URGENCE
   Information de sécurité : elle doit se repérer instantanément et le numéro
   doit être atteignable au pouce. Le corail sert de signal, jamais le rouge
   pur, qui jurerait avec la palette et dramatiserait inutilement.
   ========================================================================== */
.urgence-relais {
    display: flex; gap: 16px; align-items: flex-start;
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--corail);
    border-radius: var(--radius); padding: 26px 28px;
}
.urgence-relais-ic {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--corail-light); color: var(--corail);
}
.urgence-relais-titre {
    font-family: var(--font-title); font-size: 1.15rem; font-weight: 600;
    margin: 2px 0 8px; color: var(--ink);
}
.urgence-relais-texte { font-size: .98rem; line-height: 1.6; margin: 0 0 14px; color: var(--muted); }
.urgence-relais-texte strong { color: var(--ink); }
.urgence-relais-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0; }
.urgence-relais-tel {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-title); font-size: 1.28rem; font-weight: 600; color: var(--corail);
}
.urgence-relais-tel:hover { color: var(--ink); }
.urgence-relais-tel .ssicon { width: 19px; height: 19px; }
.urgence-relais-note { font-size: .86rem; color: var(--muted); margin: 14px 0 0; }

/* Version compacte du pied de page, sur fond sombre */
.urgence-relais--compact {
    background: rgba(224,116,58,.10); border: 1px solid rgba(224,116,58,.35);
    border-left-width: 3px; padding: 16px 18px; margin-top: 22px; gap: 12px;
}
.urgence-relais--compact .urgence-relais-ic { width: 34px; height: 34px; background: rgba(224,116,58,.2); }
.urgence-relais--compact .urgence-relais-titre { font-size: .95rem; color: #fff; margin-bottom: 5px; }
.urgence-relais--compact .urgence-relais-texte { font-size: .86rem; margin-bottom: 9px; color: rgba(255,255,255,.72); }
.urgence-relais--compact .urgence-relais-texte strong { color: #fff; }
.urgence-relais--compact .urgence-relais-tel { font-size: 1.08rem; color: #F0996A; }
.urgence-relais--compact .urgence-relais-tel:hover { color: #fff; }
.urgence-relais--compact .link-arrow { font-size: .84rem; }

/* Page urgences */
.urgence-grid { align-items: stretch; }
.urgence-carte {
    background: var(--navy); color: rgba(255,255,255,.82);
    border-radius: var(--radius); padding: 30px 32px; height: 100%;
}
.urgence-carte-tag {
    display: inline-block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700; color: var(--bleu-clair); margin-bottom: 12px;
}
.urgence-carte-titre { font-family: var(--font-title); font-size: 1.35rem; font-weight: 600; color: #fff; margin: 0 0 12px; }
.urgence-carte-tel {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-title); font-size: 1.85rem; font-weight: 600; color: #fff;
}
.urgence-carte-tel:hover { color: var(--bleu-clair); }
.urgence-carte-tel .ssicon { width: 24px; height: 24px; }
.urgence-carte-texte { font-size: .95rem; margin: 14px 0 0; color: rgba(255,255,255,.78); }
.urgence-carte-note { font-size: .88rem; line-height: 1.6; margin: 16px 0 0; color: rgba(255,255,255,.6); }
.urgence-top .urgence-relais { height: 100%; }

@media (max-width: 768px) {
    .urgence-relais { flex-direction: column; padding: 22px; }
    .urgence-carte { padding: 24px; }
    .urgence-carte-tel { font-size: 1.6rem; }
}

/* ==========================================================================
   VISITE DES LOCAUX, salle par salle
   Alternance texte et photo, une ligne par espace. Sur mobile tout s'empile,
   la photo au-dessus du texte.
   ========================================================================== */
.espace-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: clamp(30px, 5vw, 64px); align-items: center;
    padding: clamp(32px, 4vw, 48px) 0; border-bottom: 1px solid rgba(23,39,47,.08);
}
.espace-row:last-child { border-bottom: 0; }
.espace-row--inverse .espace-texte { order: 2; }
.espace-row--inverse .espace-media  { order: 1; }
.espace-num {
    display: block; font-family: var(--font-title); font-size: 1rem; font-weight: 700;
    color: var(--azur); letter-spacing: .1em; margin-bottom: 8px;
}
.espace-titre { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin: 0 0 14px; line-height: 1.2; }
.espace-para { font-size: 1.02rem; line-height: 1.7; margin: 0 0 14px; max-width: 60ch; }
.espace-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.espace-points li { display: flex; gap: 11px; align-items: flex-start; font-size: .97rem; line-height: 1.5; }
.espace-check {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 7px; background: #fff; color: var(--azur);
}
.espace-check .ssicon { width: 13px; height: 13px; }
.espace-media img {
    width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius); box-shadow: var(--shadow-md); display: block;
}

@media (max-width: 860px) {
    .espace-row { grid-template-columns: 1fr; gap: 22px; padding: 30px 0; }
    .espace-row--inverse .espace-texte,
    .espace-row .espace-texte { order: 2; }
    .espace-row--inverse .espace-media,
    .espace-row .espace-media { order: 1; }
    .espace-media img { aspect-ratio: 16 / 10; }
}
/* Logo du partenaire d'urgence, quand il est présent dans la médiathèque. */
.urgence-relais-logo { flex: 0 0 auto; display: block; width: 70px; }
.urgence-relais-logo img { width: 100%; height: auto; display: block; }
.urgence-relais--compact .urgence-relais-logo { width: 52px; }

/* Pas de pierre sur la visite des locaux : les photos des salles portent déjà
   la matière, une texture par dessus rendait la section bruyante. */
.espaces::before { display: none; }

/* ==========================================================================
   CARTES D'ÉQUIPE, version détaillée de la page Notre équipe
   La biographie et les diplômes n'étaient visibles nulle part depuis cette
   page : la carte n'était même pas cliquable. Elle mène maintenant à la fiche
   et affiche un résumé.
   ========================================================================== */
.team-lien { display: block; color: inherit; }
.team-lien:hover .team-name { color: var(--azur-dark); }
.team-card--detail { text-align: left; padding-bottom: 26px; }
.team-card--detail .team-name { padding: 0 24px; }
.team-card--detail .team-role { padding: 0 24px; }
.team-diplome {
    margin: 8px 24px 0; font-size: .85rem; line-height: 1.5; color: var(--azur-dark);
    font-weight: 600;
}
.team-resume {
    margin: 12px 24px 0; font-size: .93rem; line-height: 1.6; color: var(--muted);
}
.team-plus { display: inline-block; margin: 14px 24px 0; font-size: .88rem; }

/* ==========================================================================
   DÉMARCHE EN TROIS TEMPS
   Trois colonnes de texte nu ne racontaient pas une progression. Ici les
   étapes sont reliées par un trait, chacune porte une pastille numérotée
   posée dessus, et le contenu vit dans une carte. La liste est ordonnée en
   HTML : c'est une suite d'étapes, pas un ensemble interchangeable.
   ========================================================================== */
.demarche-section { padding-bottom: clamp(56px, 6vw, 84px); }
/* Pas de texture ici : l'anneau clair qui détoure chaque pastille se verrait
   comme une pièce rapportée sur la pierre. Et deux sections texturées qui se
   suivent alourdissent la page. */
.demarche-section::before { display: none; }
.demarche {
    list-style: none; margin: 52px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 34px);
    position: relative;
}
/* Le trait de liaison, derrière les pastilles. Il s'arrête au centre de la
   première et de la dernière, il ne dépasse jamais dans le vide. */
.demarche::before {
    content: ""; position: absolute; top: 27px; left: 16.66%; right: 16.66%;
    height: 2px; background: linear-gradient(90deg, var(--bleu-clair), var(--azur), var(--bleu-clair));
    opacity: .45; z-index: 0;
}
.demarche-etape { position: relative; display: flex; flex-direction: column; align-items: center; }
.demarche-pastille {
    position: relative; z-index: 1;
    display: inline-grid; place-items: center; width: 54px; height: 54px;
    border-radius: 50%; background: var(--azur); color: #fff;
    font-family: var(--font-title); font-size: 1.05rem; font-weight: 700;
    letter-spacing: .04em; box-shadow: 0 0 0 8px var(--pierre), 0 6px 18px rgba(11,147,213,.28);
}
.demarche-carte {
    margin-top: 20px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 26px 26px 28px; text-align: center;
    height: 100%; box-shadow: 0 2px 14px rgba(23,39,47,.05);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.demarche-etape:hover .demarche-carte { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.demarche-icone {
    display: inline-grid; place-items: center; width: 46px; height: 46px;
    border-radius: 13px; background: var(--pierre); color: var(--azur); margin-bottom: 14px;
}
.demarche-titre { font-size: 1.14rem; line-height: 1.3; margin: 0 0 10px; }
.demarche-texte { font-size: .96rem; line-height: 1.62; color: var(--muted); margin: 0; }

@media (max-width: 860px) {
    .demarche { grid-template-columns: 1fr; gap: 26px; margin-top: 34px; }
    /* En colonne, le trait horizontal n'a plus de sens. */
    .demarche::before { display: none; }
    .demarche-carte { text-align: left; }
    .demarche-etape { align-items: stretch; }
    /* Anneau plus fin en mobile : la gouttière est étroite, un halo de 8px
       ferait déborder la pastille hors de la zone de lecture. */
    .demarche-pastille {
        align-self: flex-start; width: 46px; height: 46px; font-size: .95rem;
        margin-left: 6px; box-shadow: 0 0 0 4px var(--pierre), 0 4px 12px rgba(11,147,213,.25);
    }
}

/* ==========================================================================
   AVIS : bandeau de note globale
   La note affichée est celle de la fiche Google, toutes appréciations
   confondues. Elle n'est jamais recalculée sur la sélection d'avis montrée
   plus bas, sous peine d'annoncer une moyenne trompeuse.
   ========================================================================== */
.avis-note {
    display: inline-flex; align-items: center; gap: 18px;
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 14px 28px 14px 22px; margin: 4px 0 22px;
    box-shadow: 0 4px 20px rgba(23,39,47,.07);
}
.avis-note-chiffre {
    font-family: var(--font-title); font-size: 2.5rem; font-weight: 700;
    line-height: 1; color: var(--navy); letter-spacing: -.02em;
}
.avis-note-sur { font-size: 1.05rem; font-weight: 600; color: var(--muted); margin-left: 2px; }
.avis-note-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.avis-note-etoiles { color: #F5A623; font-size: 1.12rem; letter-spacing: .1em; line-height: 1; }
.avis-note-source { font-size: .86rem; color: var(--muted); }
.avis-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
    .avis-note { gap: 14px; padding: 12px 20px; }
    .avis-note-chiffre { font-size: 2rem; }
    .avis-cta .btn-primary, .avis-cta .btn-secondary { width: 100%; }
}

/* Pas de texture sur les avis : les cartes blanches se détachent mieux sur un
   beige uni, et la pierre sous des colonnes en mouvement fatigue l'œil. */
.avis-section::before { display: none; }