/* Page : accueil */
[data-mode=day] .hero{background:linear-gradient(180deg,#8ECAE6 0%,#A9D8E8 100%);color:var(--ink)}

/* Bandeau d'annonce, mode jour : grege discret de la charte, pas de bleu
   qui jure au contact du ciel du hero juste en dessous (deux bleus
   differents qui se touchaient). Texte anthracite, lien terracotta fonce.
   Le mode nuit du bandeau n'est pas touche ici : il vient de commun.css,
   inchange (--anthra-2). */
[data-mode=day] .annonce{background:var(--grege);color:var(--anthra)}
[data-mode=day] .annonce a{color:var(--terra-d)}
/* Profondeur du hero, du fond vers l'avant :
   1. fond bleu (background de .hero, inchange)
   2. .sky-scene z-index:1 — arbre, nuages, oiseaux
   3. .hero-visual z-index:2 — medaillon + chouette
   4. .hero-copy z-index:3 — texte + boutons, toujours au premier plan */
.hero-grid{position:relative}
.hero-copy{position:relative;z-index:3}
.hero-visual{position:relative;z-index:2;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;z-index:2}
[data-mode=day] .moon{background:#F7EEC8;box-shadow:0 0 0 14px rgba(247,238,200,.55),0 30px 70px -30px rgba(224,107,60,.4)}
.daylight-scene{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;z-index:1}
[data-mode=day] .daylight-scene{opacity:1}
[data-mode=night] .daylight-scene{opacity:0}
.sun-rays{position:absolute;top:50%;left:50%;width:min(480px,96%);height:min(480px,96%);transform:translate(-50%,-50%);color:var(--terra);opacity:.4}

/* ---------- etoiles filantes (hero, nuit uniquement) ----------
   Boucle CSS infinie a cycle long (9s / 11s / 13s decales), avec une
   courte fenetre active (1%-5% du cycle) : technique demandee
   explicitement (evite le piege classique d'un animation-delay qui ne
   joue qu'au premier passage sur une boucle courte).

   Placees dans .hero-grid (pas .hero) : meme referentiel que .wrap, comme
   .sky-scene juste au-dessus dans le HTML — sinon les % se calculent sur
   toute la largeur de .hero (bord a bord de l'ecran), pas sur la colonne
   de contenu visible (bug d'une version precedente).

   z-index:1 explicite, comme .sky-scene : reste toujours derriere
   .hero-visual (z-index:2) et .hero-copy (z-index:3), devant le fond du
   hero (qui n'a pas de z-index, donc implicitement sous tout).

   Trois etoiles, trois zones de depart et trois trajectoires bien
   distinctes (angle ET longueur), pour un ciel plus vivant plutot que trois
   copies du meme trajet a des horaires differents :
     - 1 (haut a droite, la plus haute) : depart right:6%, trajet court et
       raide (-100px,42px ≈ ratio 2,4:1)
     - 2 (haut au centre, la plus proche de la zone de texte) : depart
       right:38%, trajet court et tres a plat (-70px,17px ≈ ratio 4,1:1)
     - 3 (traverse la partie haute du ciel) : depart right:16%, trajet le
       plus long (-150px,45px ≈ ratio 3,3:1)
   Chaque trajet reste dans la moitie droite, meme au point le plus etroit
   ou .hero-grid garde 2 colonnes (941px de large, juste avant le passage
   en 1 colonne a 940px ; colonne de droite ≈389px, --maxw:1160px,
   colonnes 1.08fr/.92fr, gap 44px) : l'etoile 2 (la plus proche du centre)
   termine sa course vers ~54% de large a ce point le plus defavorable —
   marge la plus etroite des trois, mais toujours au-dela de 50%, donc
   jamais au-dessus du texte. Les etoiles 1 et 3 gardent une marge bien
   plus large. Aucun overflow:hidden a proximite ne coupe la trajectoire
   (.hero en a un, mais .hero-grid est bien plus etroit que .hero sur les
   ecrans larges : large marge).

   Frequence inchangee : memes trois cycles decales (9s/11s/13s, delais
   0s/3s/8s) qu'avant, seules les positions/trajectoires ont change —
   toujours un passage toutes les ~3,6s en moyenne.

   Traine courte (58px, 2.2px d'epaisseur) alignee sur l'angle exact de
   chaque trajet : la traine par defaut (::after) pointe vers la gauche
   (180°) — orientation correcte pour une etoile qui filerait
   horizontalement vers la droite (la traine reste alors derriere elle).
   Le deplacement reel etant en diagonale vers la gauche/bas, on fait
   pivoter la traine de l'angle exact du trajet
   (rotate = 180° - atan(vertical/horizontal)) pour qu'elle reste alignee
   dans l'axe du mouvement plutot que figee a l'horizontale (bug du rendu
   precedent, effet "barre qui tombe"). Les trois etoiles n'ayant plus le
   meme ratio horizontal:vertical, chacune a maintenant son propre angle
   (157,2° / 166,3° / 161,6°), fixe par etoile via :nth-child(n)::after.
   transform-origin:100% 50% fait pivoter la traine autour du point (son
   bord droit), pas de son propre centre, pour qu'elle reste accrochee au
   point durant la rotation.

   Accessibilite : media query prefers-reduced-motion dediee ci-dessous
   (en plus de la regle globale de commun.css, qui neutraliserait de toute
   facon `animation` sur toute la page).

   Extension vers la gauche demandee, mais volontairement mesuree : le
   texte du hero (.hero-copy) a ete recalcule a partir du CSS reel — h1 sur
   deux lignes (le <em> est display:block) a line-height:1.08, plus
   eyebrow/lead/status/cta-row/garde — et fait environ 470px de haut,
   probablement plus que le medaillon (~390px). Comme .hero-grid utilise
   align-items:center, c'est tres probablement le texte qui fixe la
   hauteur de ligne, avec peu ou pas de marge libre au-dessus de lui a
   gauche : impossible a verifier sans le voir rendu. On ne place donc rien
   dans la moitie gauche a proprement parler ; les etoiles 2 et 3 sont
   simplement decalees un peu plus vers le centre qu'avant (right:40%/20%
   au lieu de 38%/16%), trajets raccourcis en consequence pour ne jamais
   redescendre sous 50% de large, meme au point le plus etroit (941px) —
   meme marge de securite qu'avant, juste un peu plus centree. A confirmer
   visuellement ; si le titre s'avere plus bas que prevu, on pourra pousser
   davantage vers la gauche ensuite. ---------- */
.shooting-stars{position:absolute;inset:0;pointer-events:none;z-index:1}
.shooting-star{position:absolute;width:2.6px;height:2.6px;background:var(--cream);border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 0 5px 1px rgba(250,247,242,.55)}
.shooting-star::after{content:'';position:absolute;top:50%;right:0;width:58px;height:2.2px;margin-top:-1.1px;background:linear-gradient(to left,rgba(250,247,242,.8) 0%,transparent 58%);border-radius:2px;transform-origin:100% 50%}
.shooting-star:nth-child(1){top:4%;right:6%}
.shooting-star:nth-child(1)::after{transform:rotate(157.2deg)}
.shooting-star:nth-child(2){top:9%;right:40%}
.shooting-star:nth-child(2)::after{transform:rotate(166.7deg)}
.shooting-star:nth-child(3){top:13%;right:20%}
.shooting-star:nth-child(3)::after{transform:rotate(163.2deg)}

/* Fenetre active portee de 5% a 7% du cycle (duree de cycle inchangee,
   9s/11s/13s) : la traversee visible dure un peu plus longtemps, sans
   changer la frequence des passages. */
@keyframes filante{
  0%{transform:translate(0,0);opacity:0}
  1%{opacity:.95}
  7%{transform:translate(-100px,42px);opacity:0}
  100%{transform:translate(-100px,42px);opacity:0}
}
@keyframes filante2{
  0%{transform:translate(0,0);opacity:0}
  1%{opacity:.95}
  7%{transform:translate(-55px,13px);opacity:0}
  100%{transform:translate(-55px,13px);opacity:0}
}
@keyframes filante3{
  0%{transform:translate(0,0);opacity:0}
  1%{opacity:.95}
  7%{transform:translate(-165px,50px);opacity:0}
  100%{transform:translate(-165px,50px);opacity:0}
}

[data-mode=night] .shooting-star{animation:filante 9s linear infinite}
[data-mode=night] .shooting-star:nth-child(2){animation-name:filante2;animation-duration:13s;animation-delay:8s}
[data-mode=night] .shooting-star:nth-child(3){animation-name:filante3;animation-duration:11s;animation-delay:3s}

@media(prefers-reduced-motion:reduce){
.shooting-star{animation:none!important;opacity:0!important}
}

/* Hero empile sous 940px (commun.css) : plus de "bande haute a droite" a
   proprement parler, meme traitement que .sky-scene (masque cote jour). */
@media(max-width:940px){
.shooting-stars{display:none}
}

/* Ciel de jour : canevas sur .hero-grid entier (texte + chouette). Zones :
   - c1 : groupe haut-centre, au-dessus de la gouttiere entre les 2 colonnes
   - c2 : groupe au-dessus du medaillon, ciel degage a droite
   - c3 : petit nuage discret, bas-droite, pres du bord
   - oiseaux : zone morte entre texte et chouette, hauteurs differentes
   - arbre : ancre au sol (bottom:0), feuillage derriere le medaillon
     (z-index:1, sous .hero-visual qui est z-index:2 : le recouvrement est
     donc automatiquement correct, sans astuce de decoupe)
   Rien ne descend sous ~50% de large : la moitie gauche (le texte) reste
   totalement degagee, aucun risque de passer derriere lui. */
.sky-scene{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;z-index:1}
[data-mode=day] .sky-scene{opacity:1}
[data-mode=night] .sky-scene{opacity:0}
.cloud-deco{position:absolute;top:2%;left:50%;width:10%;max-width:95px;color:#fff;opacity:.82;filter:drop-shadow(0 10px 18px rgba(28,34,38,.08))}
.cloud-deco.c2{top:1%;left:76%;width:9%;max-width:78px;opacity:.68}
.cloud-deco.c3{bottom:5%;right:3%;left:auto;top:auto;width:7%;max-width:58px;opacity:.4}
.bird-deco{position:absolute;color:var(--ardoise)}
.bird-deco.b1{top:11%;left:53%;width:22px;opacity:.55}
.bird-deco.b2{top:17%;left:57%;width:16px;opacity:.42}
.tree-deco{position:absolute;bottom:0;left:64%;width:17%;max-width:150px;color:#6B9B5C;opacity:.55}
/* Sous 940px, .hero-grid repasse en une seule colonne empilee : les zones
   "texte / chouette" ne veulent plus rien dire, la chouette occupe alors
   toute la largeur. On masque le ciel plutot que de risquer un
   chevauchement du medaillon ou du texte. */
@media(max-width:940px){
.sky-scene{display:none}
}
/* ---------- rythme des fonds de section, jour et nuit ----------
   Principe : deux sections adjacentes n'ont jamais le meme fond, MAIS pas
   d'enchainement de sections sombres trop long la nuit non plus : Accès
   rapide et Équipe restent volontairement claires en permanence (voir plus
   bas), pour casser la suite hero -> services -> materiel -> ... -> contact
   qui serait sinon presque entierement sombre la nuit.
   Jour : hero bleu -> creme (fixe) -> grege -> anthracite (fixe) ->
          creme (fixe) -> grege -> anthracite (fixe).
   Nuit : dark radial -> creme (fixe) -> dark radial -> anthra (fixe) ->
          creme (fixe) -> anthra-2 -> anthra (fixe). */
.acces{background:var(--cream)}
/* Fond clair fixe, jour comme nuit : les cartes .acc sont deja des blocs
   blancs autonomes (voir commun.css), rien a adapter en mode nuit. */

.motifs-section{position:relative;overflow:hidden;transition:background .5s}
[data-mode=day] .motifs-section{background:var(--grege)}
[data-mode=night] .motifs-section{background:radial-gradient(130% 120% at 74% 8%,#2A3236 0%,var(--night) 72%)}
[data-mode=night] .motifs-section .head h2{color:var(--cream)}
[data-mode=night] .motifs-section .head p{color:var(--cream-muted)}
[data-mode=night] .motifs-section .eyebrow{color:var(--terra-lite)}
.serv-grid-4{grid-template-columns:repeat(4,1fr);gap:14px}
/* Carte cliquable en entier (.serv.serv-photo est un <a>, voir front-page.php) :
   display block pour que le lien occupe toute la surface de la carte,
   comme un <div> ordinaire. .serv:hover (levee + ombre) vient deja de
   commun.css, tag-agnostique, rien a refaire ici. */
.serv.serv-photo{display:block;padding:0;overflow:hidden}
/* Cartes plus compactes : image nettement moins haute (3/4 portrait ->
   16/10 paysage, meme ratio que la page Nos services) et espacements
   internes resserres. Texte garde sa taille, seule la densite change. */
.serv-photo .thumb{aspect-ratio:16/10;overflow:hidden}
.serv-photo .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.serv-photo:hover .thumb img{transform:scale(1.05)}
.serv-photo .bd{padding:12px 13px 14px}
.serv-photo .bd h3{font-size:1rem;margin-bottom:4px}
.serv-photo .bd p{font-size:.84rem;margin-bottom:7px}
/* "En savoir plus" n'est plus un lien independant (toute la carte l'est) :
   il reagit visuellement au survol de la carte entiere, pas seulement a
   un survol direct sur ces quelques mots. */
.serv-photo:hover .link{color:var(--terra)}
.serv-photo:hover .link::after{width:100%;background:var(--terra)}
.cmap{margin-top:8px;height:220px;border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#20262A}
.cmap iframe{width:100%;height:100%;border:0;display:block}
.cmap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 14px),linear-gradient(150deg,#2E363A,#20262A);padding:16px;text-align:center}
.cmap-btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--fb);font-weight:700;font-size:.92rem;color:var(--cream);background:rgba(255,255,255,.08);border:1.6px solid rgba(255,255,255,.18);border-radius:var(--rs);padding:.7rem 1.2rem;cursor:pointer;transition:background var(--tr),border-color var(--tr)}
.cmap-btn:hover{background:rgba(255,255,255,.14);border-color:var(--terra-lite)}
.cmap-btn .ic{color:var(--terra-lite);display:inline-flex}
.cmap-note{font-size:.76rem;color:var(--cream-muted);max-width:26em}
.cmap.is-loaded{padding:0;background:#20262A}

/* ---------- pharmacie de garde : variante active (on est de garde aujourd'hui) ---------- */
/* Doit se voir au premier coup d'oeil : accent terracotta plein, sur les deux points d'entree. */
.garde.garde-active{background:var(--terra);border-color:var(--terra);color:#fff}
.garde.garde-active:hover{background:var(--terra-d);border-color:var(--terra-d)}
.garde.garde-active svg{color:#fff}
.acc-garde-active{background:var(--terra);border-color:var(--terra)}
.acc-garde-active .ic{background:rgba(255,255,255,.2);color:#fff}
.acc-garde-active .k{color:rgba(255,255,255,.85)}
.acc-garde-active .v,.acc-garde-active .s{color:#fff}

/* ---------- equipe ---------- */
/* Fond --cream fixe, jour comme nuit (voir note "rythme des fonds" plus
   haut) : meme couleur que le bandeau infos pratiques (.acces, herite du
   fond du body), pour rester dans les tons deja presents sur la page
   plutot qu'introduire du blanc pur (jamais utilise ailleurs sur le
   site). .equipe-section porte le fond (en plus de .tint) pour differer
   de .parapharmacie-section juste en dessous, qui partage aussi .tint et,
   elle, continue de foncer la nuit. Fond fixe => aucune couleur de texte
   a adapter en mode nuit ici, tout reste sur les valeurs de jour.
   Selecteur .block.tint.equipe-section (3 classes) et non .equipe-section
   seul : .block.tint (commun.css, 2 classes) a sinon une specificite plus
   forte que .equipe-section seul (1 classe) et gardait la main malgre
   l'ordre de chargement — bug constate, le fond restait grege en
   pratique malgre cette regle. */
.block.tint.equipe-section{background:var(--cream)}
/* Aperçu simple (pas de sous-groupes ici, voir front-page.php) : titulaire
   + pharmaciens dans la grille .team standard, meme taille de carte que
   partout ailleurs. Le decoupage en 3 groupes avec sous-titres reste
   reserve a la page « La pharmacie » (assets/css/pages/la-pharmacie.css). */

/* ---------- matériel médical (recentrage stratégique) ---------- */
.materiel-spot{padding:64px 0}
.materiel-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.materiel-grid h2{color:var(--cream);font-size:clamp(1.7rem,3.2vw,2.3rem);margin:14px 0 12px}
.materiel-grid p{color:var(--cream-muted);font-size:1.02rem;max-width:32em;margin-bottom:22px}
.materiel-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh)}
.materiel-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- parapharmacie, version compacte (secondaire) ---------- */
.block-compact{padding:36px 0}
.parapharmacie-section{position:relative;overflow:hidden;transition:background .5s}
[data-mode=night] .parapharmacie-section{background:var(--anthra-2)}
.para-compact{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:background .5s,border-color .5s}
.para-compact-bas{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:22px 28px}
.para-compact h3{font-family:var(--ft);font-weight:600;font-size:1.15rem;margin:6px 0 4px;transition:color .5s}
.para-compact p{color:var(--ardoise);font-size:.92rem;max-width:36em;transition:color .5s}

/* --- Affiche promo (facultative, La pharmacie > Accueil) : grande banniere
   pleine largeur au-dessus du texte, cliquable vers /parapharmacie/.
   object-fit:cover : remplit la bande sans bord vide, quitte a rogner
   legerement les bords (voir instructions du champ ACF pour le format
   d'image recommande). N'apparait que si l'admin a televerse une image ;
   absente, la carte revient exactement a .para-compact-bas seule, sans
   bande vide au-dessus. --- */
.para-banniere-link{display:block}
.para-banniere{display:block;width:100%;height:280px;object-fit:cover}

/* Nuit : carte blanche pleine -> carte translucide sur fond sombre, meme
   traitement que les cartes des autres sections sombres du site (garde-canal,
   garde-statut-non). Un blanc plein aurait ete trop tranchant a cote. */
[data-mode=night] .para-compact{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
[data-mode=night] .para-compact .eyebrow{color:var(--terra-lite)}
[data-mode=night] .para-compact h3{color:var(--cream)}
[data-mode=night] .para-compact p{color:var(--cream-muted)}
[data-mode=night] .para-compact .btn-ghost{border-color:rgba(255,255,255,.28);color:var(--cream)}
[data-mode=night] .para-compact .btn-ghost:hover{border-color:var(--cream);background:rgba(255,255,255,.06)}

@media(max-width:940px){
.materiel-grid{grid-template-columns:1fr}
.materiel-photo{order:-1;aspect-ratio:16/9}
.para-compact-bas{flex-direction:column;align-items:flex-start}
.para-banniere{height:180px}
}

/* ---------- contact (accueil) : colonne de gauche (coordonnees + carte)
   alignee sur la hauteur du formulaire de droite, meme principe que sur la
   page Contact (assets/css/pages/contact.css) : la carte s'etire pour
   occuper l'espace restant sous .cinfo, jusqu'au bas du formulaire. Sans
   effet sur la logique de chargement au clic (RGPD), inchangee. ---------- */
.contact-grid{align-items:stretch}
.contact-left{display:flex;flex-direction:column}
.contact-left .cmap{flex:1;height:auto;min-height:220px}

/* Sous 940px, .contact-grid repasse en une seule colonne (commun.css) :
   plus rien a etirer, on revient a une hauteur de carte fixe. */
@media(max-width:940px){
.contact-left{display:block}
.contact-left .cmap{flex:none;height:220px}
}

/* ---------- contact (accueil) : meme formulaire, memes IDs, meme script
   (assets/js/contact-form.js) que la page Contact — voir page-contact.php
   et inc/contact.php pour la logique d'envoi partagee, une seule fois.
   .form/.field/.btn viennent deja de commun.css (partages entre toutes les
   pages). Les quelques elements suivants sont, eux, propres a la page
   Contact dans le decoupage CSS par page du theme (assets/css/pages/*.css) :
   on les duplique ici avec des valeurs identiques a contact.css, puisque
   les deux blocs contact sont sur le meme fond sombre (.section-dark). ---------- */
select.field{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23F3EEE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;cursor:pointer}
select.field option{background:var(--anthra);color:var(--cream)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--cream-muted);margin-bottom:18px;line-height:1.4}
.consent input{margin-top:3px;flex:none}
.form-success{text-align:center;padding:22px 6px}
.form-success .ic-done{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--terra-lite);display:grid;place-items:center;margin:0 auto 18px}
.form-success h3{color:var(--cream);font-size:1.3rem;margin-bottom:10px}
.form-success p{color:var(--cream-muted)}
.form-success .btn{margin-top:16px}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cart-error{background:rgba(224,74,58,.16);color:#F0A99A;border:1px solid rgba(224,74,58,.35);border-radius:var(--rs);padding:10px 14px;font-size:.86rem;margin-bottom:14px}

/* --- Horaires, colonne coordonnees : une ligne par periode, comme sur la
   page Contact (voir contact.css), plutot que le resume compresse sur une
   seule ligne. --- */
.horaires-list{display:grid;gap:5px}
.horaires-ligne{line-height:1.4}