/* Pharmacie des Pradettes - socle commun (tokens, header, footer, mode jour/nuit) */

/* Polices hebergees en local (RGPD) : plus d'appel a Google Fonts.
   Un seul fichier par graisse reellement utilisee dans le CSS. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-600.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;src:url('../fonts/fraunces-600-italic.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/hanken-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/hanken-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/hanken-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/hanken-grotesk-700.woff2') format('woff2')}

:root{--anthra:#23292B; --night:#191E20; --anthra-2:#2E363A; --cream:#FAF7F2; --grege:#EFE9E0; --sable:#E4D8C3; --terra:#E06B3C; --terra-d:#9A3F1F; --terra-lite:#E88A5E; --ink:#1C2226; --ardoise:#5C666B; --border:#E4DED4; --cream-muted:#B4BBC0; --ft:'Fraunces',Georgia,serif; --fb:'Hanken Grotesk',system-ui,sans-serif; --maxw:1160px; --r:16px; --rs:12px; --pill:999px; --sh-s:0 8px 20px -14px rgba(20,25,27,.45); --sh:0 26px 60px -34px rgba(20,25,27,.55); --tr:.25s ease;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--ft);font-weight:600;line-height:1.08;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-d)}
.eyebrow i{width:26px;height:2px;background:var(--terra);display:inline-block;border-radius:2px}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
}

.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--fb);font-weight:700;font-size:1rem; padding:.9rem 1.5rem;border-radius:var(--rs);cursor:pointer;border:1.6px solid transparent;transition:background var(--tr),color var(--tr),border-color var(--tr),transform var(--tr)}
.btn-primary{background:var(--terra);color:#fff;box-shadow:var(--sh-s)}
.btn-primary:hover{background:var(--terra-d);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--terra-d)}
.btn-ghost:hover{border-color:var(--terra);background:rgba(224,107,60,.06)}
.btn-solid{background:var(--anthra);color:var(--cream)}
.btn-solid:hover{background:#2E363A;transform:translateY(-2px)}
[data-mode=night] .hero .btn-solid{background:var(--cream);color:var(--anthra)}
[data-mode=night] .hero .btn-solid:hover{background:#fff}
.link{position:relative;font-weight:600;color:var(--terra-d);transition:color var(--tr)}
.link::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--terra-d);transition:width var(--tr)}
.link:hover{color:var(--terra)}
.link:hover::after{width:100%;background:var(--terra)}
.annonce{font-size:.9rem;font-weight:600;text-align:center;padding:9px 44px;position:relative;transition:background var(--tr),color var(--tr)}
.annonce a{text-decoration:underline;text-underline-offset:2px}
.annonce .x{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:transparent;border:0;cursor:pointer;font-size:1rem;color:inherit;opacity:.7}
.annonce .x:hover{opacity:1}
[data-mode=day] .annonce{background:var(--grege);color:var(--ink)}
[data-mode=day] .annonce a{color:var(--terra-d)}
[data-mode=night] .annonce{background:var(--anthra-2);color:var(--cream)}
[data-mode=night] .annonce a{color:var(--terra-lite)}
header{position:sticky;top:0;z-index:60;transition:background .3s,border-color .3s,color .3s}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand .mk{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;box-shadow:var(--sh-s);background:var(--cream)}
.brand .mk img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.brand .nm{font-family:var(--ft);font-weight:600;font-size:1.16rem;line-height:1}
.brand .sg{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--terra)}
nav.links{display:flex;align-items:center;gap:2px}
nav.links a{font-weight:600;font-size:.96rem;padding:9px 13px;border-radius:9px;transition:background var(--tr),color var(--tr)}
.nav-cta{white-space:nowrap}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;border-radius:2px;display:block;transition:background var(--tr)}
header{background:#23292B;backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand .nm{color:#FAF7F2}
nav.links a{color:#FAF7F2}
nav.links a:hover{background:rgba(255,255,255,.08)}
.burger span{background:#FAF7F2}
.hero{position:relative;overflow:hidden;padding:78px 0 88px;transition:background .5s,color .5s}
[data-mode=night] .hero{background:radial-gradient(130% 120% at 74% 8%,#2A3236 0%,var(--night) 72%);color:var(--cream)}
.stars{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s}
[data-mode=night] .stars{opacity:1}
.stars span{position:absolute;border-radius:50%;background:var(--cream);opacity:var(--peak,.6);animation:tw 4.5s ease-in-out infinite}
.stars span.big{box-shadow:0 0 6px rgba(250,247,242,.55)}
@keyframes tw{0%,100%{opacity:calc(var(--peak,.6) * .3)}50%{opacity:var(--peak,.6)}}
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(2.7rem,6vw,4.4rem);margin:20px 0 18px}
.hero h1 em{font-style:italic;color:var(--terra);display:block}
[data-mode=night] .hero h1 em{color:var(--terra-lite)}
.hero .lead{font-size:1.14rem;max-width:30em;margin-bottom:24px}
[data-mode=day] .hero .lead{color:var(--ardoise)}
[data-mode=night] .hero .lead{color:var(--cream-muted)}
.status{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;padding:7px 15px;border-radius:var(--pill);margin-bottom:22px}
.status .dot{width:9px;height:9px;border-radius:50%}
[data-mode=day] .status{background:#EAF3EC;color:#2E7D4F}
[data-mode=day] .status .dot{background:#4CA36B;box-shadow:0 0 0 4px rgba(76,163,107,.16)}
[data-mode=night] .status{background:rgba(255,255,255,.08);color:var(--cream)}
[data-mode=night] .status .dot{background:var(--terra-lite);box-shadow:0 0 0 4px rgba(232,138,94,.16)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
[data-mode=night] .hero .btn-ghost{border-color:rgba(255,255,255,.28);color:var(--cream)}
[data-mode=night] .hero .btn-ghost:hover{border-color:var(--cream);background:rgba(255,255,255,.06)}
.garde{display:inline-flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;padding:9px 16px;border-radius:var(--pill);transition:background var(--tr)}
[data-mode=day] .garde{background:#fff;border:1px solid var(--border);color:var(--ink)}
[data-mode=night] .garde{background:rgba(255,255,255,.06);color:var(--cream)}
.garde svg{color:var(--terra)}
.moon img{width:88%;border-radius:50%}
[data-mode=night] .moon{background:#F3EEE6;box-shadow:0 0 0 16px rgba(243,238,230,.06),0 0 90px 10px rgba(243,238,230,.18)}
.block{padding:76px 0}
.block.tint{background:var(--grege)}
.head{max-width:44em;margin-bottom:40px}
.head h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:14px 0 12px}
.head p{color:var(--ardoise);font-size:1.06rem}
.section-dark{background:var(--anthra);color:var(--cream);position:relative;overflow:hidden}
.section-dark h2{color:var(--cream)}
.section-dark .head p{color:var(--cream-muted)}
.section-dark .eyebrow{color:var(--terra-lite)}
.acces{padding:38px 0}
.acces-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
/* Cartes "infos pratiques" : min-height pour un gabarit confortable et
   regulier quel que soit le contenu (ex. horaires sur 2 lignes), en plus de
   l'egalisation automatique de hauteur que la grille CSS applique deja aux
   cartes d'une meme ligne. Ombre douce permanente (meme token --sh-s que le
   bouton principal et le medaillon du logo) pour un leger relief, sans
   [data-mode=night] dedie : carte a lumiere fixe, comme .prod/.mbf ailleurs
   sur le site (un traitement colore/sombre dedie a ete essaye puis
   abandonne : moins lisible et trop charge en mode nuit). */
.acc{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px;min-height:118px;box-shadow:var(--sh-s);transition:transform var(--tr),box-shadow var(--tr)}
.acc:hover{transform:translateY(-2px)}
.acc .ic{width:40px;height:40px;border-radius:11px;background:var(--grege);color:var(--terra-d);display:grid;place-items:center;flex:none}
/* Bloc texte (libelle + valeur + ligne secondaire) : gap regulier plutot
   que des marges ponctuelles, et min-width:0 pour que le texte long
   (l'adresse) puisse revenir a la ligne au lieu de deborder de la carte
   (piege classique d'un enfant flex sans min-width). */
.acc>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.acc .k{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ardoise)}
.acc .v{font-weight:700;font-size:1rem;line-height:1.3;color:var(--ink)}
.acc .s{font-size:.82rem;color:var(--ardoise);line-height:1.4}
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.serv{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:26px;transition:transform var(--tr),box-shadow var(--tr)}
.serv:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.serv .ic{width:46px;height:46px;border-radius:13px;background:var(--sable);color:var(--terra-d);display:grid;place-items:center;margin-bottom:16px}
.serv h3{font-size:1.28rem;margin-bottom:7px}
.serv p{color:var(--ardoise);font-size:.97rem;margin-bottom:14px}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--tr),box-shadow var(--tr)}
.prod:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.prod .ph{aspect-ratio:1/.9;display:grid;place-items:center;position:relative}
.prod .ph span{font-family:var(--ft);font-size:1.7rem;color:rgba(255,255,255,.94)}
/* Base partagee des pastilles de carte produit (promo, coup de coeur) :
   plus de badge categorie brut ici (ex. "COMPLEMENTS") — son contraste
   restait fragile sur une photo blanche ou le degrade clair de .ph-empty
   (produit sans photo) quel que soit le traitement essaye, et l'info est
   deja disponible via les puces de filtre en haut de page. Seuls promo et
   coup de coeur restent, tous deux en fond plein sature (voir
   parapharmacie.css : .badge-promo, .badge-phare), jamais en transparence. */
.prod .cat{position:absolute;top:10px;left:10px;background:#fff;color:var(--ink);font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:var(--pill);box-shadow:0 1px 5px rgba(20,25,27,.18);white-space:nowrap}
.prod .bd{padding:14px 15px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.prod .br{font-size:.78rem;color:var(--ardoise)}
.prod .nm2{font-weight:600;font-size:.98rem;line-height:1.25}
.prod .ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px}
.prod .pr{font-weight:700}
/* Carte en promo : prix mis en avant, bordure d'accent discrete — pas de
   gros ruban, pour ne pas casser l'harmonie de la grille. */
.prod.is-promo{border-color:var(--terra)}
.prod.is-promo .pr{color:var(--terra-d);font-size:1.12em}
.prod .add{background:var(--grege);color:var(--terra-d);border:0;font-family:var(--fb);font-weight:700;font-size:.84rem;padding:8px 13px;border-radius:9px;cursor:pointer;transition:var(--tr)}
.prod .add:hover{background:var(--terra);color:#fff}
.cc{display:flex;align-items:center;gap:18px;background:var(--anthra);color:var(--cream);border-radius:var(--r);padding:22px 26px;margin-top:26px;flex-wrap:wrap}
.cc .ic{width:50px;height:50px;border-radius:13px;background:rgba(255,255,255,.08);color:var(--terra-lite);display:grid;place-items:center;flex:none}
.cc h4{font-family:var(--ft);font-size:1.2rem}
.cc p{color:var(--cream-muted);font-size:.95rem}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:30px}
.mb{text-align:center}
/* overflow:hidden + position:relative sur le conteneur, img en
   position:absolute;inset:0 : le conteneur "avatar" est TOUJOURS un cercle
   104x104 fixe, que le contenu soit une vraie photo ou les initiales. Ne
   pas se fier a width/height:100% sur l'image seule a l'interieur d'un
   display:grid : ce calcul peut echouer a resoudre une hauteur en
   pourcentage selon le contexte, et l'image retombe alors sur ses
   dimensions naturelles (photo ovale et bien plus grande que les cercles
   d'initiales voisins — bug constate). L'approche position:absolute;inset:0
   est la meme que .ph-photo/.ph-photo img ailleurs sur le site : elle ne
   depend d'aucune resolution de pourcentage, seulement de la boite du
   conteneur, donc jamais de ce probleme. */
.mb .av{width:104px;height:104px;border-radius:50%;overflow:hidden;position:relative;margin:0 auto 10px;display:grid;place-items:center;font-family:var(--ft);font-size:1.8rem;color:#fff;box-shadow:var(--sh-s)}
.mb .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Placeholder "photo absente" d'un membre (accueil et equipe complete de
   La pharmacie) : fond grege derriere un cercle plein aux initiales, dans
   la couleur du groupe (titulaire/pharmacien/equipe, voir
   pradettes_couleur_avatar_membre() dans inc/cpt.php). Des qu'une vraie
   photo est televersee dans le champ ACF, ce bloc n'est plus rendu : rien
   d'autre a faire. Cercle volontairement discret (voir aussi
   .mbf .ph-photo dans la-pharmacie.css : meme conteneur reduit, avec ou
   sans vraie photo, pour un alignement identique dans les deux cas). */
.mb .av.av-placeholder{background:var(--grege);box-shadow:none}
.av-cercle{width:42%;min-width:34px;aspect-ratio:1/1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ft);font-weight:600;font-size:.8rem;color:#fff;letter-spacing:.02em}
.mb h4{font-size:1.06rem;margin-bottom:2px}
.mb p{color:var(--ardoise);font-size:.88rem}
.center{text-align:center}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.cinfo{display:grid;gap:14px}
.cinfo .row{display:flex;gap:13px;align-items:flex-start}
.cinfo .ic{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.07);color:var(--terra-lite);display:grid;place-items:center;flex:none}
.cinfo .k{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--cream-muted)}
.cinfo .v{font-weight:600}
.form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:26px}
.form label{display:block;font-size:.8rem;font-weight:600;color:var(--cream);margin:0 0 6px}
.field{width:100%;font-family:var(--fb);font-size:.95rem;color:var(--cream);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:11px 13px;margin-bottom:15px}
.field:focus{outline:none;border-color:var(--terra)}
.form .btn-primary{width:100%;justify-content:center}
footer{background:var(--night);color:var(--cream-muted);padding:60px 0 28px;position:relative;overflow:hidden}
.foot-grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
footer h5{color:var(--cream);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:15px}
footer ul{list-style:none;display:grid;gap:9px;font-size:.94rem}
footer a:hover{color:var(--cream)}
footer .about{max-width:24em;font-size:.94rem;margin-top:12px}
.legal{position:relative;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.55)}
.toggle{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:8px;background:var(--anthra);color:var(--cream);border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);padding:8px 14px 8px 10px;cursor:pointer;font-family:var(--fb);font-weight:600;font-size:.82rem;box-shadow:var(--sh)}
.toggle .ic{width:22px;height:22px;display:grid;place-items:center;color:var(--terra-lite)}
.demo-flag{position:fixed;left:14px;bottom:14px;z-index:80;background:var(--anthra);color:#fff;font-size:.72rem;font-weight:600;padding:6px 12px;border-radius:var(--pill);opacity:.9}
.mobile{display:none}
@media(max-width:940px){
.hero-grid{grid-template-columns:1fr;gap:30px}
.acces-grid{grid-template-columns:repeat(2,1fr)}
.serv-grid{grid-template-columns:1fr 1fr}
.prod-grid{grid-template-columns:1fr 1fr}
.team{grid-template-columns:1fr 1fr}
.contact-grid{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr}
nav.links,.nav-cta{display:none}
.burger{display:flex}
.mobile.open{display:block;border-bottom:1px solid var(--border)}
.mobile.open{background:#23292B;border-color:rgba(255,255,255,.1)}
.mobile .wrap{display:grid;gap:2px;padding-top:8px;padding-bottom:14px}
.mobile a{font-weight:600;padding:12px 6px;border-bottom:1px solid rgba(255,255,255,.08);color:#FAF7F2}
}

@media(max-width:560px){
.serv-grid,.prod-grid,.team,.foot-grid{grid-template-columns:1fr}
.acces-grid{grid-template-columns:1fr}
.block{padding:56px 0}
}