/* Page : ordonnance (deux canaux, Doctolib et Mon espace sante / Medimail,
   plus le comptoir ; jamais de depot de fichier sur le site)
   Reutilise les classes de commun.css : .wrap .block .head .eyebrow .btn .link .section-dark .stars
   Tokens du theme uniquement : --anthra --cream --grege --terra --terra-d --ink --ardoise --border */

/* --- Intro --- */
.page-intro{padding:52px 0 46px;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 h1 em{font-style:italic;color:var(--terra-d);transition:color .5s}
.page-intro .lead{color:var(--ardoise);font-size:1.08rem;max-width:40em;transition:color .5s}

/* Mode nuit : meme traitement que .section-dark ailleurs sur le site. */
[data-mode=night] .page-intro{background:var(--anthra);color:var(--cream)}
[data-mode=night] .page-intro .lead{color:var(--cream-muted)}
[data-mode=night] .page-intro .eyebrow{color:var(--terra-lite)}
[data-mode=night] .page-intro h1 em{color:var(--terra-lite)}

/* --- Deux canaux, cote a cote : memes proportions, aucun des deux mis en
   avant par rapport a l'autre. Cartes a lumiere fixe (comme .prod, .mbf...
   ailleurs sur le site) : pas de variante [data-mode=night] dediee, un fond
   blanc fixe reste lisible dans les deux modes. align-items:stretch (valeur
   par defaut de la grille, ecrite ici en toutes lettres) : les deux cartes
   s'etirent a la hauteur de la plus grande, condition necessaire pour que
   les deux boutons (voir .ordo-canal-cta plus bas, cale en bas de carte)
   s'alignent sur la meme ligne. --- */
.ordo-canaux{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.ordo-canal{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:16px}
.ordo-canal-logo{height:32px;width:auto;object-fit:contain;display:block}
.ordo-canal h2{font-size:1.3rem}
.ordo-canal-texte{color:var(--ardoise);font-size:.95rem;line-height:1.55}
.ordo-canal-texte strong{color:var(--terra-d)}

/* Parcours en etapes : liste ordonnee pour la semantique (lecteur d'ecran),
   puce numerotee en visuel plutot que le marqueur natif du navigateur. */
.ordo-canal-etapes{list-style:none;display:grid;gap:11px;margin:0}
.ordo-canal-etapes li{display:flex;gap:12px;align-items:baseline}
.ordo-canal-etapes .n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--terra);color:#fff;font-family:var(--ft);font-weight:600;font-size:.82rem}
.ordo-canal-etapes span:last-child{font-size:.92rem;color:var(--ink);line-height:1.4}

/* Video explicative (facultative, champs ACF video_doctolib et
   video_medimail, independants l'un de l'autre), hebergee sur le site :
   element <video> natif, pas de lecteur tiers. Partagee par les deux
   colonnes, aspect-ratio fixe donc jamais plus large que la colonne
   (video video{width:100%}), pas de debordement possible. */
.ordo-canal-video{border-radius:var(--rs);overflow:hidden;background:#000;aspect-ratio:16/9}
.ordo-canal-video video{width:100%;height:100%;display:block}

/* Meme classe de bouton (.btn.btn-primary, definie une seule fois dans
   commun.css et deja utilisee partout sur le site) pour les deux colonnes :
   aucun style de bouton propre a cette page, donc aucun risque de
   divergence entre Doctolib et Medimail. min-height reserve la place d'une
   eventuelle note sous le bouton (jusqu'a 2 lignes), meme quand la colonne
   n'en affiche pas (Medimail aujourd'hui) : sans ca, le bouton du cote qui
   a une note se retrouverait plus haut que l'autre, malgre des cartes de
   meme hauteur. Valeur estimee (bouton + note sur 2 lignes), a ajuster de
   quelques pixels si besoin apres verification visuelle. */
.ordo-canal-cta{margin-top:auto;padding-top:4px;min-height:7rem}
.ordo-canal-cta .btn{width:100%;justify-content:center}
.ordo-canal-note{color:var(--ardoise);font-size:.82rem;margin-top:10px;line-height:1.5}

/* Adresse MSSante : mise en avant comme une information a copier. Bloc
   entier (libelle + adresse + avertissement, voir page-ordonnance.php)
   absent si le champ ACF adresse_mssante est vide : pas d'etat "vide" a
   styler ici. */
.ordo-canal-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ardoise);margin-bottom:6px}
/* Notice terracotta regroupant adresse et avertissement en un seul bloc
   visuel (jamais l'un sans l'autre) : meme convention "fond teinte + barre
   laterale" que .done-paiement (parapharmacie.css), en terracotta plutot
   qu'en grege pour bien la distinguer des autres encarts de cette page.
   Coins arrondis seulement a droite (border-radius asymetrique) puisque le
   bord gauche est deja marque par la barre pleine, meme logique que
   .done-paiement. */
.ordo-mssante-notice{background:rgba(224,107,60,.07);border-left:4px solid #9A3F1F;border-radius:0 var(--rs) var(--rs) 0;padding:16px 18px}
.ordo-mssante-notice .ordo-canal-label{margin-bottom:8px}
.ordo-mssante-adresse{background:var(--grege);border-radius:var(--rs);padding:13px 16px;margin-bottom:12px;font-weight:700;color:var(--terra-d);font-size:1rem;word-break:break-word}
/* Avertissement mis en valeur (couleur terracotta fonce, poids et taille
   plus marques que l'ancien texte gris discret), icone attention au trait
   (fill:none partout, comme les autres icones du site). */
.ordo-mssante-avertissement{display:flex;gap:10px;align-items:flex-start;color:#9A3F1F;font-weight:500;font-size:.9rem;line-height:1.5}
.ordo-mssante-avertissement svg{flex:none;margin-top:1px}
.ordo-mssante-avertissement p{margin:0}
/* Mode nuit : le fond teinte et la barre gagnent en presence, l'avertissement
   et son icone passent au terracotta clair (--terra) pour rester lisibles. */
[data-mode=night] .ordo-mssante-notice{background:rgba(224,107,60,.14);border-left-color:var(--terra)}
[data-mode=night] .ordo-mssante-avertissement{color:var(--terra)}

/* --- Comptoir : alternative toujours visible, coordonnees ACF --- */
.ordo-comptoir{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ordo-comptoir-texte{flex:1 1 260px}
.ordo-comptoir h3{font-size:1.15rem;margin-bottom:4px}
.ordo-comptoir-texte p{color:var(--ardoise);font-size:.96rem}
.ordo-comptoir-coord{display:grid;gap:10px;flex:1 1 260px}
.ordo-comptoir-coord .row{display:flex;align-items:flex-start;gap:11px;font-size:.94rem}
.ordo-comptoir-coord .row a{font-weight:600;color:var(--terra-d)}
.ordo-comptoir-coord .ic{width:32px;height:32px;border-radius:9px;background:#fff;color:var(--terra-d);display:grid;place-items:center;flex:none}
.ordo-comptoir-coord .row-horaires{align-items:flex-start}
.ligne-horaire{display:block;color:var(--ardoise);font-size:.9rem;line-height:1.5}

/* --- Rassurance (sur .section-dark, toujours sombre, inchange) --- */
.ordo-confiance{max-width:52em;position:relative;z-index:2}
.ordo-confiance h2{font-size:1.4rem;margin-bottom:12px}
.ordo-confiance p{color:var(--cream-muted)}

/* --- "Pourquoi pas par email" : encadre discret, ton pedagogique et
   rassurant, jamais culpabilisant. Fond grege fixe, meme convention que
   .ordo-mssante-adresse plus haut sur cette page (aucune carte de cette
   page ne bascule avec le mode jour/nuit, seuls .page-intro et
   .section-dark le font) : lisible a l'identique dans les deux modes,
   sans regle [data-mode=night] a ecrire. Icone bouclier plutot que
   cadenas : plus proche de "protection" que de "acces refuse". */
.ordo-securite-section{padding:36px 0}
.ordo-securite{display:flex;gap:18px;align-items:flex-start;background:var(--grege);border-radius:var(--r);padding:24px 28px;max-width:52em;margin:0 auto}
.ordo-securite-icon{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--terra-d);display:grid;place-items:center}
.ordo-securite h3{font-size:1.05rem;margin-bottom:6px;color:var(--ink)}
.ordo-securite p{color:var(--ardoise);font-size:.92rem;line-height:1.6;margin:0}

@media(max-width:940px){
  .ordo-canaux{grid-template-columns:1fr}
}

@media(max-width:820px){
  .ordo-comptoir{flex-direction:column;align-items:flex-start}
}

@media(max-width:560px){
  .ordo-securite{flex-direction:column;align-items:flex-start;padding:20px 22px}
}