/* Page : la-pharmacie */
[data-mode=day] .hero{background:radial-gradient(130% 110% at 78% 0%,#FFFDFA 0%,#F4EADD 78%);color:var(--ink)}
.hero-visual{display:grid;place-items:center;min-height:360px}
.moon{position:relative;width:min(400px,80%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transition:box-shadow .5s,background .5s}
[data-mode=day] .moon{background:#fff;box-shadow:0 0 0 14px rgba(255,255,255,.5),0 30px 70px -30px rgba(224,107,60,.5)}
.cmap{margin-top:8px;height:150px;border-radius:var(--r);background:linear-gradient(135deg,#2E363A,#20262A);display:grid;place-items:center;color:var(--cream-muted);font-size:.85rem;border:1px solid rgba(255,255,255,.08)}
.page-intro{padding:52px 0 46px;background:var(--grege)}
.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}
.ph-photo{position:relative;border-radius:var(--r);overflow:hidden; background: repeating-linear-gradient(135deg, rgba(35,41,43,.05) 0 2px, transparent 2px 14px), linear-gradient(150deg,#E9E2D4,#D9CDB8); display:flex;align-items:flex-end;min-height:220px; border:1px solid var(--border);}
/* Photo reelle (ACF), quand il y en a une : remplit le cadre derriere la
   legende, sans deformation (object-fit:cover). Le cadre garde son fond
   degrade en repli si aucune image n'est fournie. */
.ph-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ph-photo .tag{position:relative;z-index:1;margin:14px;background:rgba(35,41,43,.82);color:var(--cream); font-size:.76rem;font-weight:600;padding:7px 12px;border-radius:var(--pill); display:inline-flex;align-items:center;gap:8px;backdrop-filter:blur(2px);}
.ph-photo .tag svg{flex:none}
/* aspect-ratio plutot que min-height seul : les photos sources (facade,
   galerie) sont au format paysage (~1.6:1, ~2124x1328px). Sans ratio
   explicite, un cadre .tall pouvait finir presque carre selon la largeur
   de colonne, forçant object-fit:cover a rogner tres large des deux
   cotes — d'ou un rendu flou/disgracieux malgre des photos sources de
   bonne resolution. 3:2 reste proche du ratio d'origine : rognage leger
   seulement. */
.ph-photo.tall{aspect-ratio:3/2;min-height:0}
.ph-photo.short{min-height:160px}
.ph-photo.dark{background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px), linear-gradient(150deg,#3A434A,#20262A); border-color:rgba(255,255,255,.08);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split .kicker{margin-bottom:14px}
.split p.big{font-size:1.08rem;color:var(--ardoise);margin-bottom:14px}
.eng-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.eng{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:24px}
.eng .ic{width:42px;height:42px;border-radius:12px;background:var(--sable);color:var(--terra-d);display:grid;place-items:center;margin-bottom:14px}
.eng h3{font-size:1.06rem;margin-bottom:6px}
.eng p{color:var(--ardoise);font-size:.92rem}
/* Sous-titres de groupe (Titulaire / Pharmaciens / Equipe) : discret par
   rapport a l'eyebrow principal de la section. Section .block simple, ne
   bascule jamais avec le mode (comme partout ailleurs sur le site), donc
   pas de regle [data-mode=night] necessaire ici. */
.team-group{margin-bottom:34px}
.team-group:last-child{margin-bottom:0}
.team-group-title{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ardoise);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.team-full{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mbf{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform var(--tr),box-shadow var(--tr)}
.mbf:hover{transform:translateY(-3px);box-shadow:var(--sh)}
/* Avatar rond, meme taille et meme format que l'apercu equipe de l'accueil
   (.mb .av, commun.css) : 104px, centre en tete de carte. Le cercle est le
   conteneur entier (pas un cadre plus grand autour) : une vraie photo le
   remplit via object-fit:cover (regle heritee de .ph-photo img dans
   commun.css/la-pharmacie.css), deja recadree par le navigateur puisque
   .ph-photo garde son overflow:hidden. */
.mbf .ph-photo{border-radius:50%;border:0;width:104px;height:104px;min-height:0;margin:20px auto 0}
/* Placeholder "photo absente" (voir aussi commun.css : .av-cercle, partage
   avec l'apercu equipe de l'accueil) : fond grege a la place du degrade
   decoratif par defaut de .ph-photo, cercle aux initiales centre dedans.
   Meme regle .av-cercle partagee qu'a l'accueil (42% du conteneur, min
   34px) : conteneur de meme taille des deux cotes, donc meme cercle
   d'initiales des deux cotes, sans avoir besoin de valeur figee ici. */
.mbf .ph-photo.ph-photo-placeholder{background:var(--grege);display:flex;align-items:center;justify-content:center}
.mbf .bd{padding:16px 18px 20px}
.mbf h4{font-size:1.05rem;margin-bottom:2px}
.mbf .role{color:var(--terra-d);font-weight:600;font-size:.86rem;margin-bottom:8px}
.mbf .desc{color:var(--ardoise);font-size:.88rem}
/* Grande photo en tete, pleine largeur + petites photos en rangee dessous
   (plutot que grande photo a gauche sur 2 lignes) : avec des sources
   paysage, une grande case qui s'etire sur 2 lignes de petites photos
   landscape finit presque carree (largeur ~= hauteur cumulee des 2
   lignes), d'ou le rognage excessif observe. Cette disposition existait
   deja pour le format tablette/mobile ci-dessous (grid-column:1/3 sur
   .g1) : on l'etend simplement au desktop, chaque case garde un
   aspect-ratio explicite proche du format d'origine des photos (2/1 pour
   la grande, en bandeau ; 3/2 pour les petites), donc un rognage leger et
   previsible plutot qu'une forme quasi carree accidentelle. */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery .ph-photo{aspect-ratio:3/2;min-height:0}
.gallery .g1{grid-column:1/-1;aspect-ratio:2/1}
.spot{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:26px}
.spot:nth-child(even) .ph-photo{order:2}
.spot .tagline{color:var(--terra-d);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.spot h3{font-size:1.6rem;margin-bottom:12px}
.spot p{color:var(--ardoise);margin-bottom:16px}
.spot ul{list-style:none;display:grid;gap:9px;margin-bottom:16px}
.spot li{display:flex;gap:10px;font-size:.95rem;color:var(--ink)}
.spot li svg{flex:none;color:var(--terra-d);margin-top:2px}
.cta-dark{background:var(--anthra);color:var(--cream);border-radius:24px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-dark h2{color:var(--cream);font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:8px}
.cta-dark p{color:var(--cream-muted)}
.cta-dark .actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:940px){
.split{grid-template-columns:1fr}
.eng-grid{grid-template-columns:1fr 1fr}
.team-full{grid-template-columns:1fr 1fr}
.gallery{grid-template-columns:1fr 1fr}
.gallery .g1{grid-column:1/3}
.spot,.spot:nth-child(even) .ph-photo{grid-template-columns:1fr;order:0}
.cta-dark{flex-direction:column;align-items:flex-start}
}

@media(max-width:560px){
.eng-grid,.team-full{grid-template-columns:1fr}
.gallery{grid-template-columns:1fr}
.gallery .g1{grid-column:auto;aspect-ratio:3/2}
}

/* --- Galerie cliquable : indique clairement que chaque photo s'ouvre en
   grand (curseur, leger zoom au survol/focus, icone loupe en overlay). --- */
.gallery-item{cursor:pointer;border:1px solid var(--border);padding:0;margin:0;width:100%;font:inherit;text-align:inherit;color:inherit;appearance:none;-webkit-appearance:none;transition:box-shadow var(--tr)}
.gallery-item:hover,.gallery-item:focus-visible{box-shadow:var(--sh)}
.gallery-item img{transition:transform .35s ease}
.gallery-item:hover img,.gallery-item:focus-visible img{transform:scale(1.04)}
.ph-photo-zoom{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:rgba(35,41,43,0);color:#fff;opacity:0;transition:opacity .25s ease,background .25s ease;pointer-events:none}
.gallery-item:hover .ph-photo-zoom,.gallery-item:focus-visible .ph-photo-zoom{opacity:1;background:rgba(35,41,43,.28)}
.ph-photo-zoom svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}

/* --- Lightbox : fond assombri fixe, toujours au-dessus de la page, quel
   que soit le mode jour/nuit du site en dessous (une visionneuse reste
   sombre par convention pour que la photo ressorte). .lightbox-dialog en
   pointer-events:none avec seule .lightbox-figure reactivee : cliquer
   dans la zone vide autour de la photo ferme la lightbox comme un clic
   sur le fond, cliquer sur la photo elle-meme ne ferme rien. --- */
.lightbox{position:fixed;inset:0;z-index:200;display:none}
.lightbox.is-open{display:block}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(20,25,27,.92)}
.lightbox-dialog{position:relative;z-index:1;height:100%;display:flex;align-items:center;justify-content:center;padding:70px 90px;pointer-events:none}
.lightbox-figure{pointer-events:auto;max-width:100%;text-align:center}
.lightbox-img{display:block;max-width:100%;max-height:78vh;margin:0 auto;border-radius:var(--rs);box-shadow:var(--sh);object-fit:contain}
.lightbox-caption{margin-top:16px;color:var(--cream);font-size:.94rem}
.lightbox-caption:empty{display:none}
.lightbox-close,.lightbox-nav{position:fixed;z-index:2;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;cursor:pointer;transition:background var(--tr)}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.22)}
.lightbox-close{top:20px;right:20px;width:44px;height:44px}
.lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:48px}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-nav[hidden]{display:none}

@media(max-width:640px){
.lightbox-dialog{padding:70px 16px}
.lightbox-close{top:12px;right:12px;width:40px;height:40px}
.lightbox-nav{width:40px;height:40px}
.lightbox-prev{left:8px}
.lightbox-next{right:8px}
}