/* Page : pharmacie de garde
   Reutilise les classes de commun.css : .wrap .block .head .eyebrow .btn .link .tint .stars
   Tokens du theme uniquement : --anthra --cream --grege --terra --terra-d --ink --ardoise --border */

/* --- Intro --- */
.page-intro{padding:44px 0 38px;background:var(--grege);position:relative;overflow:hidden;transition:background .5s,color .5s}
.page-intro h1{font-size:clamp(2.1rem,4.2vw,3rem);margin:14px 0 12px}
.page-intro p{color:var(--ardoise);font-size:1.08rem;max-width:40em;transition:color .5s}

/* Mode nuit : meme traitement que .section-dark ailleurs sur le site
   (fond anthracite, texte creme). Sans ces regles, .page-intro restait
   clair et les etoiles (cremes) devenaient quasi invisibles dessus. */
[data-mode=night] .page-intro{background:var(--anthra);color:var(--cream)}
[data-mode=night] .page-intro p{color:var(--cream-muted)}
[data-mode=night] .page-intro .eyebrow{color:var(--terra-lite)}

/* --- Statut du jour --- */
.garde-statut-section{position:relative;overflow:hidden;transition:background .5s}
.garde-statut{display:flex;align-items:flex-start;gap:18px;border-radius:var(--r);padding:26px 28px;transition:background .5s,border-color .5s}
.garde-statut .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none}
.garde-statut h2{font-size:1.35rem;margin-bottom:8px;transition:color .5s}
.garde-statut p{margin-bottom:16px;transition:color .5s}
.garde-statut-oui{background:#EAF3EC;border:1px solid #CFE6D6}
.garde-statut-oui .ic{background:#4CA36B;color:#fff}
.garde-statut-oui h2{color:#2E7D4F}
.garde-statut-oui p{color:#3A6B4C}
.garde-statut-non{background:#fff;border:1px solid var(--border)}
.garde-statut-non .ic{background:var(--grege);color:var(--terra-d)}
.garde-statut-non h2{color:var(--ink)}
.garde-statut-non p{color:var(--ardoise)}

/* Mode nuit : c'est le bloc le plus important de la page (repond a la
   question du titre), il merite le meme traitement que .page-intro.
   Le fond de la section passe en anthracite pour que les cartes
   translucides s'y integrent, au lieu de flotter sur un fond reste clair. */
[data-mode=night] .garde-statut-section{background:var(--anthra)}
[data-mode=night] .garde-statut-oui{background:rgba(76,163,107,.14);border-color:rgba(76,163,107,.4)}
[data-mode=night] .garde-statut-oui h2{color:#8FD1A8}
[data-mode=night] .garde-statut-oui p{color:var(--cream-muted)}
[data-mode=night] .garde-statut-non{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
[data-mode=night] .garde-statut-non .ic{background:rgba(255,255,255,.08);color:var(--terra-lite)}
[data-mode=night] .garde-statut-non h2{color:var(--cream)}
[data-mode=night] .garde-statut-non p{color:var(--cream-muted)}

/* --- Nos prochaines dates de garde : notre info exclusive, valorisee ---
   Volontairement claire (--grege) dans les DEUX modes, y compris la nuit :
   entre le statut du jour et "comment trouver ailleurs" (tous deux sombres
   en mode nuit), ce bloc cree une respiration plutot qu'un troisieme
   anthracite d'affilee. Pas de [data-mode=night] ici : le texte garde ses
   couleurs de mode jour (lisibles sur fond clair) quel que soit le mode. */
.garde-dates{list-style:none;display:grid;gap:14px;max-width:56em}
.garde-date-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-left:4px solid var(--terra);border-radius:var(--rs);padding:18px 22px;transition:transform var(--tr),box-shadow var(--tr)}
.garde-date-card:hover{transform:translateY(-2px);box-shadow:var(--sh-s)}
.garde-date-card .ic{width:44px;height:44px;border-radius:12px;background:var(--sable);color:var(--terra-d);display:grid;place-items:center;flex:none}
.garde-date-card .d{display:block;font-family:var(--ft);font-weight:600;font-size:1.1rem;color:var(--terra-d)}
.garde-date-card .n{display:block;color:var(--ardoise);font-size:.86rem;margin-top:3px}

/* --- Canaux (3237, 3237.fr, ameli) --- */
.garde-canaux-section{position:relative;overflow:hidden;transition:background .5s}
.garde-canaux{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.garde-canal{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;transition:transform var(--tr),box-shadow var(--tr),background .5s,border-color .5s}
.garde-canal:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.garde-canal .ic{width:42px;height:42px;border-radius:12px;background:var(--sable);color:var(--terra-d);display:grid;place-items:center;flex:none;transition:background .5s,color .5s}
.garde-canal h3{font-size:1.02rem;margin-bottom:4px;transition:color .5s}
.garde-canal p{color:var(--ardoise);font-size:.88rem;transition:color .5s}

/* Mode nuit : meme traitement que les autres sections sombres du site. */
[data-mode=night] .garde-canaux-section{background:var(--anthra)}
[data-mode=night] .garde-canaux-section .head h2{color:var(--cream)}
[data-mode=night] .garde-canaux-section .head p{color:var(--cream-muted)}
[data-mode=night] .garde-canaux-section .eyebrow{color:var(--terra-lite)}
[data-mode=night] .garde-canal{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
[data-mode=night] .garde-canal .ic{background:rgba(255,255,255,.08);color:var(--terra-lite)}
[data-mode=night] .garde-canal h3{color:var(--cream)}
[data-mode=night] .garde-canal p{color:var(--cream-muted)}

/* --- Rappel du fonctionnement --- */
.garde-rappel{list-style:none;display:grid;gap:16px;max-width:44em}
.garde-rappel li{display:flex;gap:14px;align-items:flex-start}
.garde-rappel .ic{width:38px;height:38px;border-radius:11px;background:var(--grege);color:var(--terra-d);display:grid;place-items:center;flex:none}
.garde-rappel strong{display:block;font-size:1rem;margin-bottom:3px;color:var(--ink)}
.garde-rappel p{color:var(--ardoise);font-size:.94rem}

@media(max-width:820px){
.garde-canaux{grid-template-columns:1fr}
.garde-statut{flex-direction:column}
}

@media(max-width:560px){
.garde-date-card{flex-direction:column;align-items:flex-start;gap:8px}
}