/* ============================================================
   La Juste Dose Pharma — agenda.css
   Format « Agenda » des articles (27/09/2026, première utilisation :
   les congrès pharma d'octobre à décembre 2026). Réutilisable pour
   les prochains agendas trimestriels : il suffit d'un conteneur
   .agenda dans le contenu de l'article.
   Chargée uniquement sur un article qui contient class="agenda"
   (functions.php), comme accueil.css et officine.css.

   Code couleur : .ag-fr (en France) = vert officine, .ag-monde
   (à l'étranger) = or de justesse, toujours doublé d'un libellé
   (charte v1.2 : jamais un indicateur doré seul, jamais de doré vif
   en texte sur fond clair). Tokens de app.css uniquement.
   Tout est préfixé .agenda pour passer devant les règles génériques
   de .art-contenu (listes en grille, h3, strong vert).
   ============================================================ */

.agenda{--ag-fr:var(--vert);--ag-monde:var(--dore);margin:28px 0 10px}

/* ----- Chiffres clés ----- */
.agenda .ag-chiffres{list-style:none;padding:0;margin:0 0 14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.agenda .ag-chiffres li{background:var(--blanc);border:1px solid var(--bordure);border-top:4px solid var(--bordure);border-radius:14px;padding:12px 10px 11px;text-align:center;font-size:13px;line-height:1.35;font-weight:600;color:var(--gris-texte)}
.agenda .ag-chiffres .ag-nb{display:block;font-size:30px;line-height:1.1;font-weight:700;color:var(--vert);font-variant-numeric:tabular-nums}
.agenda .ag-chiffres .ag-fr{border-top-color:var(--ag-fr)}
.agenda .ag-chiffres .ag-monde{border-top-color:var(--ag-monde)}

/* ----- Légende du code couleur ----- */
.agenda .ag-legende{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0 0 16px;font-size:13.5px;color:var(--gris-texte)}
.agenda .ag-legende .ag-cle{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--encre)}
.agenda .ag-legende .ag-cle::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--ag-fr);flex:none}
.agenda .ag-legende .ag-cle.ag-monde::before{background:var(--ag-monde)}

/* ----- Frise du trimestre : un mois par colonne, une pastille par rendez-vous ----- */
.agenda .ag-frise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;background:var(--sable);border:1px solid var(--bordure-sable);border-radius:18px;padding:16px;margin:0 0 8px}
.agenda .ag-frise-mois{min-width:0}
.agenda .ag-frise-titre{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--dore-texte)}
.agenda .ag-frise-titre::before{content:"";width:18px;height:2px;background:var(--dore)}
.agenda .ag-frise ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.agenda .ag-puce{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline;background:var(--blanc);border:1px solid var(--bordure);border-left:5px solid var(--ag-fr);border-radius:10px;padding:8px 10px 8px 9px;text-decoration:none;color:var(--encre);font-size:13.5px;line-height:1.3;transition:border-color var(--t-rapide),background-color var(--t-rapide)}
.agenda .ag-puce.ag-monde{border-left-color:var(--ag-monde)}
.agenda .ag-puce:hover{background:var(--blanc-casse);border-top-color:var(--dore);border-right-color:var(--dore);border-bottom-color:var(--dore)}
.agenda .ag-puce-date{grid-row:span 2;min-width:40px;font-weight:700;color:var(--vert);font-variant-numeric:tabular-nums}
.agenda .ag-puce-nom{font-weight:700;overflow-wrap:anywhere}
.agenda .ag-puce-lieu{font-size:12.5px;color:var(--gris-texte)}
.agenda .ag-puce.ag-plus-tard{background:transparent;border-style:dashed;border-color:var(--dore);border-left:5px solid var(--ag-fr)}
.agenda .ag-puce.ag-plus-tard .ag-puce-date{color:var(--gris-texte)}

/* ----- Liste des rendez-vous d'un mois ----- */
.agenda .ag-liste{display:grid;gap:22px;margin:18px 0 6px}

/* ----- Carte d'un rendez-vous : photo du lieu en bandeau + fiche pratique ----- */
.agenda .ag-carte{position:relative;display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--bordure);border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -30px rgba(34,40,31,.45);scroll-margin-top:110px}
.agenda .ag-carte::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--ag-fr);z-index:2}
.agenda .ag-carte.ag-monde::before{background:var(--ag-monde)}

.agenda .ag-photo{margin:0;display:block;min-width:0;background:var(--sable)}
.agenda .ag-visuel{position:relative;aspect-ratio:12/5;overflow:hidden}
.agenda .ag-visuel img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;margin:0;border-radius:0;max-width:none}
.agenda .ag-cadre-haut .ag-visuel img{object-position:50% 16%}
.agenda .ag-cadre-mihaut .ag-visuel img{object-position:50% 34%}
/* Étiquette sur la photo : texte blanc (demande de Joseph, 27/09). Sur l'or, le fond passe à
   l'« or texte » : blanc sur or vif = 2,7:1 (refusé en AA), blanc sur or texte = 5,6:1 ;
   blanc sur vert = 9,6:1. Liseré blanc pour détacher l'étiquette des photos chargées. */
.agenda .ag-drapeau{position:absolute;top:16px;left:14px;z-index:1;display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 14px 6px 11px;font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;line-height:1.3;background:var(--ag-fr);color:var(--blanc);box-shadow:0 0 0 1.5px rgba(255,255,255,.7),0 8px 18px -8px rgba(34,40,31,.65)}
.agenda .ag-drapeau::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.agenda .ag-monde .ag-drapeau{background:var(--dore-texte);color:var(--blanc)}
.agenda .ag-tampon{position:absolute;right:14px;bottom:14px;z-index:1;min-width:68px;background:var(--blanc);border-radius:12px;border-top:4px solid var(--ag-fr);padding:6px 12px 7px;text-align:center;box-shadow:0 10px 22px -12px rgba(34,40,31,.7)}
.agenda .ag-monde .ag-tampon{border-top-color:var(--ag-monde)}
.agenda .ag-jours{display:block;font-size:22px;line-height:1.1;font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums;white-space:nowrap}
.agenda .ag-mois{display:block;margin-top:1px;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--gris-texte)}
.agenda .ag-photo figcaption{padding:6px 14px 7px;font-size:12px;line-height:1.45;color:var(--gris-texte);background:var(--blanc-casse);border-bottom:1px solid var(--bordure)}
.agenda .ag-photo figcaption a{color:var(--gris-texte);text-decoration:underline;text-decoration-color:var(--bordure);text-underline-offset:2px}
.agenda .ag-photo figcaption a:hover{color:var(--vert);text-decoration-color:var(--dore)}

.agenda .ag-corps{min-width:0;display:flex;flex-direction:column;gap:13px;padding:20px 24px 22px}
.agenda .ag-corps h3{margin:0;font-size:24px;line-height:1.22}
.agenda sup{font-size:.62em;line-height:0;vertical-align:.5em}
.agenda .ag-infos{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 24px;font-size:15px;line-height:1.45}
.agenda .ag-infos div{min-width:0}
.agenda .ag-infos .ag-large{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.agenda .ag-infos dt{margin:0 0 3px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--dore-texte)}
.agenda .ag-infos .ag-large dt{margin:0}
.agenda .ag-infos dd{margin:0;color:var(--encre)}
.agenda .ag-publics{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.agenda .ag-publics li{background:var(--sable);color:var(--vert);border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:600;line-height:1.6}
.agenda .ag-pitch{margin:0;font-size:16px;line-height:1.62;color:var(--gris-texte)}
.agenda .ag-acces{margin:0;background:var(--creme);border-left:3px solid var(--dore);border-radius:0 12px 12px 0;padding:10px 14px;font-size:14.5px;line-height:1.55;color:var(--encre)}
.agenda .ag-acces strong{color:var(--vert)}
.agenda .ag-lien{align-self:flex-start;display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 10px;background:var(--vert);color:var(--creme);text-decoration:none;border-radius:999px;padding:10px 18px 10px 20px;font-size:14.5px;font-weight:600;line-height:1.3;transition:background-color var(--t-rapide)}
.agenda .ag-lien::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);flex:none}
.agenda .ag-lien:hover{background:var(--vert-hover)}
.agenda .ag-domaine{font-weight:500;font-size:13px;color:rgba(247,240,227,.82)}

/* ----- Tableau « lequel choisir » : texte courant, pas de gras sur la dernière colonne ----- */
.agenda .tbl td:last-child{font-weight:400;white-space:normal}

/* ----- Et après ? ----- */
.agenda .ag-suite{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center;background:var(--blanc);border:1px dashed var(--dore);border-radius:16px;padding:16px 20px;margin:18px 0 6px}
.agenda .ag-suite .ag-tampon{position:static;grid-row:span 2}
.agenda .ag-suite p{margin:0;font-size:15.5px;line-height:1.55;color:var(--gris-texte)}
.agenda .ag-suite .ag-suite-titre{font-weight:700;color:var(--encre)}

/* ----- Tablette et mobile : la photo passe au-dessus, au format 3:2 ----- */
@media (max-width:760px){
  .agenda .ag-frise{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px}
  .agenda .ag-visuel{aspect-ratio:16/10}
  .agenda .ag-corps{padding:18px 18px 18px}
}
@media (max-width:560px){
  .agenda .ag-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agenda .ag-corps h3{font-size:22px}
  .agenda .ag-infos{grid-template-columns:minmax(0,1fr)}
  .agenda .ag-lien{align-self:stretch;justify-content:center}
  .agenda .ag-suite{grid-template-columns:minmax(0,1fr)}
  .agenda .ag-suite .ag-tampon{grid-row:auto;justify-self:start}
}

/* ----- Mouvement : un léger relief au survol des cartes, coupé sous reduced-motion ----- */
@media (prefers-reduced-motion: no-preference){
  .agenda .ag-visuel img{transition:transform var(--t-douce)}
  .agenda .ag-carte:hover .ag-visuel img{transform:scale(1.03)}
}