/* =====================================================================
   COMPLÉMENTS — nouvelle structure du site (octobre 2026)
   Chargé après style.css. Reprend les couleurs et polices du site
   (variables --primary, --card, --border…). Modifiez ici les nouveaux
   éléments : menu déroulant, fil d'Ariane, encadrés, tableaux, FAQ.
   ===================================================================== */
/* Ancres : le titre visé n'est pas masqué par l'en-tête fixe */
[id] {
    scroll-margin-top: 6rem;
}

/* ---------- Logo dans l'en-tête ---------- */
.logo-entete {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-entete img {
    height: 34px;
    width: auto;
}

@media (min-width: 64rem) {
    .logo-entete img {
        height: 38px;
    }
}

/* ---------- Menu déroulant (ordinateur) ---------- */
.menu-groupe {
    position: relative;
}

.menu-parent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: none;
    border: 0;
    font-family: inherit;
}

.menu-chevron {
    transition: transform .2s ease;
    opacity: .7;
}

.menu-groupe.is-open .menu-chevron,
.menu-groupe:hover .menu-chevron {
    transform: rotate(180deg);
}

.menu-sous {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px);
    width: 22rem;
    padding: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    box-shadow: 0 18px 40px -18px color-mix(in oklch, var(--foreground) 35%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    white-space: normal;
    z-index: 60;
}

/* zone tampon pour que le survol ne se perde pas entre le bouton et le panneau */
.menu-sous::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.menu-groupe:hover .menu-sous,
.menu-groupe.is-open .menu-sous {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.menu-sous a {
    display: block;
    padding: 10px 14px;
    border-radius: .9rem;
    text-decoration: none;
    transition: background .15s;
}

.menu-sous a:hover,
.menu-sous a:focus-visible {
    background: color-mix(in oklch, var(--primary) 7%, transparent);
}

.menu-sous a[aria-current="page"] {
    background: color-mix(in oklch, var(--primary) 9%, transparent);
}

.menu-titre {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--foreground);
}

.menu-sous a[aria-current="page"] .menu-titre {
    color: var(--primary);
}

.menu-detail {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted-foreground);
}

/* ---------- Menu mobile groupé ---------- */
.menu-mobile-groupe {
    margin: 10px 0 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.menu-mobile-titre {
    margin: 0 0 2px;
    padding: 0 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--primary);
}

.menu-mobile-groupe a {
    padding-left: 18px !important;
}

.menu-mobile-appel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px !important;
    padding: 12px 16px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 14px;
    font-weight: 500;
}

/* ---------- Fil d'Ariane ---------- */
.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 12.5px;
    color: var(--muted-foreground);
}

.fil-ariane a {
    color: var(--muted-foreground);
    text-decoration: none;
}

.fil-ariane a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.fil-ariane [aria-current] {
    color: var(--foreground);
}

.fil-ariane > span[aria-hidden] {
    opacity: .45;
}

/* ---------- Texte courant ---------- */
.texte-vima p,
.texte-vima li {
    font-size: 15px;
}

.texte-vima strong {
    color: var(--foreground);
    font-weight: 600;
}

.texte-vima a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.texte-vima h3 {
    margin-top: 28px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--foreground);
    letter-spacing: -.01em;
}

.liste-vima {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.liste-vima li {
    position: relative;
    padding-left: 20px;
}

.liste-vima li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--primary);
}

/* ---------- Images ---------- */
.image-vima {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
    box-shadow: 0 14px 34px -22px color-mix(in oklch, var(--foreground) 45%, transparent);
}

.image-vima.h-72 {
    height: 18rem;
}

.image-vima.h-96 {
    height: 24rem;
}

.image-contain {
    object-fit: contain;
    background: var(--card);
    padding: 24px;
}

/* ---------- Bloc « détail » (traitements) ---------- */
.detail-vima {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

@media (min-width: 40rem) {
    .detail-vima {
        grid-template-columns: 1fr 1fr;
    }
}

.detail-vima > div {
    padding: 18px 20px;
    border-radius: 1.1rem;
    background: var(--card);
    border: 1px solid var(--border);
}

.detail-vima h4 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--foreground);
}

.detail-vima p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* ---------- Encadré « À valider » (à supprimer avant publication) ---------- */
.a-valider {
    margin-top: 24px;
    padding: 16px 20px;
    border: 2px dashed #c98a15;
    border-radius: 1rem;
    background: #fff6e0;
    color: #6b4a00;
    font-size: 13.5px;
    line-height: 1.55;
}

.a-valider strong {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9a6400;
}

.a-valider p {
    margin: 0;
}

/* ---------- Encadré urgence ---------- */
.encadre-urgence {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 24px;
    border-radius: 1.5rem;
    background: color-mix(in oklch, var(--destructive) 8%, var(--card));
    border: 1px solid color-mix(in oklch, var(--destructive) 35%, transparent);
    color: var(--foreground);
}

.encadre-urgence > svg {
    flex-shrink: 0;
    color: var(--destructive);
    margin-top: 2px;
}

.encadre-urgence strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.encadre-urgence p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.encadre-urgence a {
    color: var(--destructive);
    font-weight: 700;
}

/* ---------- Tableaux ---------- */
.tableau-vima {
    margin-top: 28px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    background: var(--card);
    box-shadow: 0 10px 30px -24px color-mix(in oklch, var(--foreground) 40%, transparent);
}

.tableau-vima table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 34rem;
}

.tableau-vima th,
.tableau-vima td {
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.tableau-vima thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary);
    background: color-mix(in oklch, var(--secondary) 55%, transparent);
}

.tableau-vima tbody th {
    font-weight: 600;
    color: var(--foreground);
    width: 34%;
}

.tableau-vima td {
    color: var(--muted-foreground);
    line-height: 1.55;
}

.tableau-vima tr:last-child th,
.tableau-vima tr:last-child td {
    border-bottom: 0;
}

.tableau-vima caption {
    caption-side: top;
    text-align: left;
    padding: 16px 18px 0;
    font-weight: 600;
}

/* ---------- Questions fréquentes ---------- */
.faq-vima {
    margin-top: 28px;
    display: grid;
    gap: 10px;
}

.faq-vima details {
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    background: var(--card);
    padding: 0 20px;
}

.faq-vima summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 28px 16px 0;
    position: relative;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--foreground);
}

.faq-vima summary::-webkit-details-marker {
    display: none;
}

.faq-vima summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 12px;
    font-size: 22px;
    color: var(--primary);
}

.faq-vima details[open] summary::after {
    content: "–";
}

.faq-vima details > div {
    padding: 0 0 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted-foreground);
}

/* ---------- Signature des pages médicales ---------- */
.signature-medicale {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.signature-medicale a {
    color: var(--primary);
}

/* ---------- Accès rapide (accueil) ---------- */
.acces-rapide {
    display: grid;
    gap: 12px;
    margin-top: 36px;
}

@media (min-width: 40rem) {
    .acces-rapide {
        grid-template-columns: repeat(3, 1fr);
    }
}

.acces-rapide a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 1.25rem;
    background: color-mix(in oklch, var(--card) 85%, transparent);
    border: 1px solid var(--border);
    text-decoration: none;
    text-align: left;
    color: var(--foreground);
    backdrop-filter: blur(6px);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.acces-rapide a:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklch, var(--primary) 40%, transparent);
    box-shadow: 0 12px 26px -18px color-mix(in oklch, var(--foreground) 45%, transparent);
}

.acces-rapide .ar-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--primary-foreground);
    flex-shrink: 0;
}

.acces-rapide .ar-titre {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.acces-rapide .ar-detail {
    display: block;
    font-size: 12px;
    color: var(--muted-foreground);
}

/* ---------- Pied de page : rappel urgence ---------- */
.pied-urgence {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0;
    font-size: 12.5px;
    color: color-mix(in oklch, var(--primary-foreground) 75%, transparent);
}

.pied-urgence a {
    color: var(--primary-foreground);
    font-weight: 700;
}

/* ---------- Logos partenaires ---------- */
.logo-partenaire {
    height: 64px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* ---------- Utilitaires absents de la feuille compilée d'origine ---------- */
.mt-0 {
    margin-top: 0;
}

.pt-6 {
    padding-top: calc(var(--spacing) * 6);
}

.pt-24 {
    padding-top: calc(var(--spacing) * 24);
}

.pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
}

.pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
}

@media (min-width: 40rem) {
    .sm\:pb-20 {
        padding-bottom: calc(var(--spacing) * 20);
    }
}

@media (min-width: 64rem) {
    .lg\:pb-24 {
        padding-bottom: calc(var(--spacing) * 24);
    }

    .lg\:grid-cols-\[1fr_1\.25fr\] {
        grid-template-columns: 1fr 1.25fr;
    }

    .lg\:grid-cols-\[1\.25fr_1fr\] {
        grid-template-columns: 1.25fr 1fr;
    }

    .lg\:grid-cols-\[1fr_1\.4fr\] {
        grid-template-columns: 1fr 1.4fr;
    }
}

/* ---------- Vidéo de présentation (page Paxman) ---------- */
.video-vima { max-width: 56rem; margin: 48px auto 0; }
.video-vima video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 2rem; background: var(--primary); object-fit: cover;
  box-shadow: 0 24px 50px -28px color-mix(in oklch, var(--foreground) 55%, transparent);
}
.video-vima figcaption { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--muted-foreground); }

/* Sous-titres de la vidéo */
.video-vima video::cue { font-family: "Inter", system-ui, sans-serif; font-size: 0.95em; line-height: 1.4;
  color: #fff; background: rgba(20, 45, 32, 0.82); }

/* ---------- Liens vers les fiches Google (Actualités, Contact) ---------- */
.liens-google { margin-top: 40px; }
.liens-google-titre { margin: 0 0 12px; font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.liens-google-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.liens-google-boutons a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border); color: var(--foreground);
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  box-shadow: 0 6px 16px -12px color-mix(in oklch, var(--foreground) 45%, transparent);
  transition: border-color .2s ease, transform .2s ease;
}
.liens-google-boutons a:hover { border-color: color-mix(in oklch, var(--primary) 45%, transparent); transform: translateY(-1px); }
.liens-google-boutons a svg:first-child { color: var(--primary); }
.liens-google-boutons a svg:last-child { opacity: .5; }

/* ---------- Page Professionnels de santé ---------- */
.badge-prioritaire { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  background: var(--accent); color: var(--accent-foreground); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.adresse-pro { margin: 18px 0 0; padding: 10px 14px; border-radius: .9rem; background: rgba(255,255,255,.12);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; word-break: break-all; }
.adresse-pro a { color: inherit; text-decoration: none; }
.adresse-pro a:hover { text-decoration: underline; }

/* ---------- Pathologies : listes déroulantes (page Traitements) ---------- */
.patho { position: relative; }
.patho-btn { gap: 6px; cursor: pointer; font-family: inherit; transition: border-color .2s ease, color .2s ease; }
.patho-btn:hover, .patho.is-open .patho-btn { border-color: color-mix(in oklch, var(--primary) 45%, transparent); color: var(--primary); }
.patho-chevron { opacity: .6; transition: transform .2s ease; }
.patho:hover .patho-chevron, .patho.is-open .patho-chevron { transform: rotate(180deg); }
.patho-detail {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 14rem; margin: 0; padding: 8px; list-style: none;
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  box-shadow: 0 18px 40px -18px color-mix(in oklch, var(--foreground) 35%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.patho-detail::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.patho:hover .patho-detail, .patho.is-open .patho-detail { opacity: 1; visibility: visible; transform: translateY(0); }
.patho-detail li { position: relative; padding: 7px 12px 7px 26px; border-radius: .7rem; font-size: 13.5px; color: var(--foreground); }
.patho-detail li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 999px; background: var(--primary); }
.patho-detail li:hover { background: color-mix(in oklch, var(--primary) 6%, transparent); }
.patho-aide { margin: 10px 0 0; font-size: 12px; color: var(--muted-foreground); }

/* Hormonothérapie : blocs sur une colonne dans chaque carte */
.detail-hormono { grid-template-columns: 1fr !important; }

/* Image schéma (hormonothérapie) : proportions conservées pour garder les légendes lisibles */
.image-schema { height: auto; aspect-ratio: 16 / 9; }

/* Cartes avec photo en haut (Votre parcours de soins) */
.carte-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.group:hover .carte-photo { transform: scale(1.03); }

/* Logos des partenaires en haut de carte */
.carte-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 28px 40px; transition: transform .5s ease; }
.group:hover .carte-logo { transform: scale(1.04); }