@charset "UTF-8";

/* =====================================================
   EPIDAURE — THEME MSP
   Version STABLE (Desktop + Mobile + Safari)
   ===================================================== */

/* =====================================================
   1) VARIABLES
   ===================================================== */
:root{
  --primary: #2f6f8f;
  --primary-dark: #24576f;
  --primary-soft: #e8f2f6;

  --accent: #4fa59a;
  --accent-soft: #e6f1ef;

  --text: #1f2d2b;
  --muted: #5b6b6a;

  --border: #d5e7e3;
  --bg: #ffffff;
  --bg-soft: #f4f9f8;

  --danger: #c94a44;

  --shadow: 0 8px 18px rgba(0,0,0,.08);
  --shadow-hover: 0 12px 24px rgba(0,0,0,.12);

  --focus: rgba(47,111,143,0.35);
}

/* =====================================================
   2) BASE
   ===================================================== */
body{
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3{
  color: var(--text);
}

h2{
  font-weight: 700;
}

a{
  color: var(--primary);
}

a:hover{
  color: var(--primary-dark);
  text-decoration: underline;
}

a:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =====================================================
   3) LAYOUT PRINCIPAL
   ===================================================== */
.layout{
  display: flex;
  align-items: flex-start;
  gap: 16px;

  max-width: 1232px;
  margin: 0 auto;
  padding: 16px 12px;
}

/* Colonne gauche */
.sidebar{
  width: 260px;
  flex: 0 0 260px;
}

/* ✅ FIX : menu gauche sticky en desktop (au scroll) */
@media (min-width: 901px){
  .sidebar{
    position: sticky;
    top: 12px;
    align-self: flex-start;
  }
}

/* Contenu principal */
.main{
  flex: 1;
  min-width: 0;
}

/* MOBILE : menu au-dessus */
@media (max-width: 900px){
  .layout{
    flex-direction: column;
  }

  .sidebar{
    width: 100%;
    position: static;
    top: auto;
  }
}

/* =====================================================
   4) HEADER
   ===================================================== */
.site-header{
  background-color: #e9eff2;
  background-image: url(Images/Header/FondToile.png);
  background-repeat: repeat;
  padding: 6px 0;
}

.site-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;

  display: flex;
  align-items: center;
  gap: 12px;
}

.site-logo img{
  display: block;
}

.site-title{
  flex: 1;
  text-align: center;
}

.site-title-main{
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
}

.site-title-sub{
  font-size: 23px;
}

.site-title-sub2,
.site-address{
  font-size: 16px;
}

.site-updated{
  font-size: 0.85rem;
  color: #334;
}

/* MOBILE HEADER */
@media (max-width: 768px){
  .site-header-inner{
    flex-direction: column;
  }

  .site-title-main{
    font-size: 28px;
  }
}

/* =====================================================
   5) MENU
   ===================================================== */
.site-menu{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

.menu-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list li + li{
  margin-top: 8px;
}

.menu-list a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
}

.menu-list a:hover{
  background: var(--accent-soft);
}

.menu-list a[aria-current="page"]{
  background: var(--primary-soft);
  font-weight: 700;
}

/* =====================================================
   6) CARTES
   ===================================================== */
.cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 900px){
  .cards{
    grid-template-columns: 1fr 1fr;
  }
}

.card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.cards > .card--full{
  grid-column: 1 / -1;
}

/* =====================================================
   7) TAGS
   ===================================================== */
.tag{
  display: block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

.tag-danger{
  background: #fff1f1;
  border-color: #f2b0b0;
}
.tag.tag-danger{
  border-radius: 8px;     /* arrondis réduits */
  padding: 10px 14px;     /* plus d’air pour le texte */
  line-height: 1.45;     /* améliore la lisibilité */
}

/* =====================================================
   8) BOUTONS
   ===================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-secondary{
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-color: var(--border);
}

.btn-call{
  background: var(--accent-soft);
  color: var(--primary);
}

.btn-rdv{
  background: #e9f7ef;      /* vert très clair */
  color: #1e6f4f;           /* texte foncé lisible */
  border: 1px solid #b7e4c7;
}
.btn-rdv:hover{
  background: #d8f3dc;
  color: #145a3a;
}

.btn-danger{
  background: #fdecec;           /* rouge très clair */
  color: #7a1f1c;                /* texte rouge foncé lisible */
  border: 2px solid #e6a3a0;     /* contour visible */
  box-shadow: none;
  font-weight: 700;
}

.btn-danger:hover{
  background: #f9dede;
  color: #6a1a17;
}

a.btn:visited{
  color: inherit;
}

/* =====================================================
   9) SOMMAIRE STICKY
   ===================================================== */
@media (min-width: 901px){
  section[aria-label="Sommaire de la page"]{
    position: sticky;
    top: 12px;
    z-index: 5;
  }
}

section[aria-label="Sommaire de la page"]{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 10px;
  margin-bottom: 16px;
}

/* =====================================================
   10) DIAPORAMA — CSS ONLY, ISOLÉ
   ===================================================== */
.slideshow{
  width: 330px;
  max-width: 100%;
  margin: 20px auto;
  overflow: hidden;

  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
}

.slideshow ul{
  display: flex;
  flex-wrap: nowrap;

  list-style: none;
  margin: 0;
  padding: 0;

  transform: translateX(0);
}

.slideshow li{
  flex: 0 0 100%;
  max-width: 100%;
}

.slideshow img{
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.slideshow figcaption{
  padding: 8px 10px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* =====================================================
   MENU MOBILE — FIX espace blanc + rendu propre
   (à mettre tout en bas de Epidaure-theme.css)
   ===================================================== */

/* Desktop : hamburger caché */
.menu-mobile { display: none; }

/* Mobile : hamburger visible, menu desktop masqué */
@media (max-width: 900px){
  .menu-desktop { display: none; }
  .menu-mobile  { display: block; }

  /* IMPORTANT : sur mobile on veut une sidebar "normale" */
  .sidebar{
    position: static !important;
    top: auto !important;
    width: 100% !important;
    flex: none !important;
  }

  /* Évite que le conteneur menu rajoute du vide */
  .site-menu{ padding: 10px !important; }
}

/* Reset marges/paddings qui créent le blanc (Safari inclus) */
.menu-mobile,
.menu-mobile__summary,
.menu-mobile .menu-list{
  margin: 0 !important;
  padding: 0 !important;
}

/* Supprime le marqueur triangle natif */
.menu-mobile__summary::-webkit-details-marker{ display:none; }
.menu-mobile__summary::marker{ content:""; }

/* Summary (bouton) compact */
.menu-mobile__summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px !important;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(213,231,227,0.9);
}

/* Burger */
.menu-mobile__burger{ font-size: 1.15rem; line-height: 1; }
.menu-mobile__title{ font-weight: 700; color: var(--primary-dark); }

/* Quand c'est fermé : la liste n'occupe AUCUN espace */
.menu-mobile:not([open]) > .menu-list{ display: none !important; }

/* Quand c'est ouvert : petit espace propre */
.menu-mobile[open] > .menu-list{
  display: block;
  margin-top: 10px !important;
}

/* UL/LI : aucun padding/marge navigateur */
.menu-mobile .menu-list{
  list-style: none;
}
.menu-mobile .menu-list li{
  margin: 0 !important;
  padding: 0 !important;
}

/* (Optionnel) évite marges globales sur UL à l'intérieur du menu desktop aussi */
.site-menu .menu-list{
  margin: 0;
  padding: 0;
}

/* =====================================================
   FIX FINAL : triangle <details> visible en desktop
   ===================================================== */

/* Desktop : on cache COMPLÈTEMENT le menu mobile */
@media (min-width: 901px){
  .menu-mobile{
    display: none !important;
  }
}

/* Mobile : on cache le menu desktop */
@media (max-width: 900px){
  .menu-desktop{
    display: none !important;
  }
}

/* =====================================================
   SOMMAIRE — version "fine" (compacte) — RESTAURATION
   À coller tout en bas du fichier
   ===================================================== */

/* Le conteneur du sommaire (déjà présent chez toi) reste inchangé,
   on ne fait qu’affiner l’intérieur. */

section[aria-label="Sommaire de la page"] .card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(213,231,227,0.9);
  background: #fff;
  box-shadow: none;
}

section[aria-label="Sommaire de la page"] .card h2{
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}

section[aria-label="Sommaire de la page"] .card .cta{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex-wrap: wrap; /* si écran étroit : ça passe sur 2 lignes proprement */
}

/* Boutons du sommaire uniquement : plus fins que les autres */
section[aria-label="Sommaire de la page"] .btn.btn-secondary{
  padding: 5px 10px;
  font-size: 0.85rem;
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(47,111,143,0.22);
  box-shadow: none;
  white-space: nowrap;
  font-weight: 600;
  transform: none;
}

section[aria-label="Sommaire de la page"] .btn.btn-secondary:hover{
  background: rgba(47,111,143,0.08);
  box-shadow: none;
  transform: none;
}
/* =====================================================
   MENU MOBILE — sticky sur mobile + fix open (Firefox/Safari)
   ===================================================== */
@media (max-width: 900px){

  /* IMPORTANT : sticky ne marche pas si un parent a overflow hidden/auto */
  .layout, .main{ overflow: visible !important; }

  /* Sidebar sticky aussi sur mobile */
  .sidebar{
    position: sticky !important;
    top: 8px !important;
    z-index: 1200;
  }

  /* Le bloc menu */
  .site-menu{
    position: relative;
    z-index: 1300;
  }

  /* Quand le menu est OUVERT : bouton toujours visible */
  details.menu-mobile[open] > summary.menu-mobile__summary{
    position: fixed !important;
    top: 8px !important;
    left: 12px;
    right: 12px;
    z-index: 2000;
    background: #fff;
  }

  /* Réserve la place du bouton fixed */
  details.menu-mobile[open]{
    padding-top: 56px;
  }

  /* La liste scrolle sous le bouton */
  details.menu-mobile[open] > ul.menu-list{
    max-height: calc(100vh - 56px - 24px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================
   ICÔNES MENU (CSS ONLY)
   ========================= */

.menu-list a{
  position: relative;
  padding-left: 36px; /* place pour l’icône */
}

/* Base icône */
.menu-list a::before{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  opacity: 0.8;
}

/* =========================
   ICÔNES MENU – EXPLICITES
   ========================= */

.menu-list a{
  position: relative;
  padding-left: 44px; /* espace icône */
}

/* Base icône */
.menu-list a::before{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  font-weight: 700;
  opacity: 0.85;
}

/* Icônes */
.ico-home::before{ content: "⌂"; }
.ico-team::before{ content: "👤"; }
.ico-phone::before{ content: "☎"; }
.ico-doctor::before{ content: "⚕"; }
.ico-assist::before{ content: "🗂"; }
.ico-ultrasound::before{ content: "≈"; }
.ico-osteo::before{ content: "✋"; }
.ico-kine::before{ content: "↔"; }
.ico-ortho::before{ content: "💬"; }
.ico-nurse::before{ content: "💉"; }
.ico-asalee::before{ content: "📋"; }
.ico-job::before{ content: "✚"; }

/* Urgences : très visible */
.ico-urgent::before{
  content: "⚠";
  color: #c94a44;
  font-size: 1.1rem;
}