/* ============================================================
   La Juste Dose Pharma — accueil.css
   Refonte de la page d'accueil du 26/09/2026 : ligne « Nouveau » du héros,
   section Fiches (bloc ljd/fiches-populaires), Cas de comptoir +
   jeux Réflexe (pattern accueil-comptoir), podcast Au comptoir
   (bloc ljd/ecoute-accueil). Chargée uniquement sur l'accueil
   (functions.php), après app.css. Tokens de la charte uniquement ;
   mouvement transform/opacity, coupé sous prefers-reduced-motion.
   Préfixes : af- (fiches), ac- (comptoir), ap- (podcast).
   ============================================================ */

/* Alternance des fonds propre à l'accueil : héros crème, fiches blanc cassé,
   Cas de comptoir vert, podcast crème, Dose d'actu blanc cassé, quatuor crème. */
.accueil .s-actu{background:var(--blanc-casse)}
.accueil .s-equipe{background:var(--creme)}
.accueil section[id]{scroll-margin-top:84px}
/* La mise en page « flow » du groupe main ajoute 24 px au-dessus de chaque section : le fond
   crème de la page apparaissait en liseré entre la section Fiches (blanc cassé) et le bandeau
   vert de Cas de comptoir (retour de Joseph). Les sections se touchent, chacune porte son fond. */
main.accueil > *{margin-block-start:0}

/* ===== Héros : ligne « Nouveau », discrète, sous la réassurance =====
   Sur-titre doré de la charte + lien vert au trait qui se souligne au survol : elle se fond
   dans la typographie du héros au lieu de flotter au-dessus (retour de Joseph, 26/09). */
.hero-nouveau{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:26px;padding-top:18px;border-top:1px solid var(--bordure);color:var(--vert);font-size:15px;font-weight:600;line-height:1.4;text-decoration:none}
.hero-nouveau-tag{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--dore-texte)}
.hero-nouveau-txt{position:relative}
.hero-nouveau-txt::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--dore);transform:scaleX(0);transform-origin:left;transition:transform var(--t-rapide)}
.hero-nouveau svg{flex:0 0 auto;transition:transform var(--t-rapide)}
.hero-nouveau:hover .hero-nouveau-txt::after{transform:scaleX(1)}
.hero-nouveau:hover svg{transform:translateX(4px)}
@media (max-width:919px){.hero-nouveau{justify-content:center}}

/* ===== FICHES (bloc serveur ljd/fiches-populaires) ===== */
.s-fiches-accueil{background:var(--blanc-casse)}
.s-fiches-accueil .af-tete{max-width:760px;margin-bottom:clamp(32px,4.5vw,48px)}
.s-fiches-accueil .af-tete p{max-width:600px}

/* les trois types de fiches : cartes entièrement cliquables, visuels réels */
.af-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.af-type{position:relative;display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-carte);overflow:hidden;text-decoration:none;color:var(--encre);box-shadow:var(--ombre-carte);transition:transform var(--t-douce),box-shadow var(--t-douce)}
.af-type:hover{transform:translateY(-6px);box-shadow:var(--ombre-elev)}
.af-type:focus-visible{border-radius:var(--r-carte)}
.af-visuel{position:relative;flex:0 0 auto;aspect-ratio:16/9;background:var(--creme);border-bottom:1px solid var(--bordure-sable);overflow:hidden}
.af-corps{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.6vw,28px);flex-grow:1}
.af-compte{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--dore-texte)}
.af-titre{font-size:25px}
.af-texte{color:var(--gris-texte);font-size:16px;line-height:1.6;flex-grow:1}
.af-type .lien-fleche{margin-top:2px}
.af-type:hover .lien-fleche span::after{transform:scaleX(1)}
.af-type:hover .lien-fleche svg{transform:translateX(4px)}

/* médicaments : trois boîtes d'aires différentes, en éventail */
.af-type-med .af-visuel{background:radial-gradient(120% 95% at 50% 100%,var(--sable) 0%,var(--creme) 72%)}
.af-boite{position:absolute;bottom:13%;width:36%;height:auto;filter:drop-shadow(0 12px 14px rgba(34,40,31,.22));transition:transform var(--t-douce)}
.af-boite-1{left:8%;transform:rotate(-8deg)}
.af-boite-2{left:31%;bottom:17%;width:38%;z-index:2}
.af-boite-3{right:8%;transform:rotate(8deg)}
.af-type-med:hover .af-boite-1{transform:rotate(-11deg) translateY(-6px)}
.af-type-med:hover .af-boite-2{transform:translateY(-9px)}
.af-type-med:hover .af-boite-3{transform:rotate(11deg) translateY(-6px)}

/* conseil : trois illustrations trait continu des fiches, en tuiles */
.af-illus{position:absolute;top:50%;width:33%;height:auto;aspect-ratio:1;border-radius:14px;border:1px solid var(--bordure-sable);box-shadow:0 12px 24px -18px rgba(34,40,31,.45);transition:transform var(--t-douce)}
.af-illus-1{left:50%;width:39%;z-index:2;transform:translate(-50%,-50%)}
.af-illus-2{left:7%;transform:translateY(-45%) rotate(-7deg)}
.af-illus-3{right:7%;transform:translateY(-45%) rotate(7deg)}
.af-type-con:hover .af-illus-1{transform:translate(-50%,-54%)}
.af-type-con:hover .af-illus-2{transform:translateY(-49%) rotate(-10deg)}
.af-type-con:hover .af-illus-3{transform:translateY(-49%) rotate(10deg)}

/* préparations : Aisha au gélulier */
.af-type-pre .af-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;transition:transform var(--t-douce)}
.af-type-pre:hover .af-visuel img{transform:scale(1.04)}

@media (max-width:919px){
  .af-types{grid-template-columns:1fr;max-width:680px;margin-inline:auto}
  .af-type{flex-direction:row}
  .af-visuel{flex:0 0 36%;aspect-ratio:auto;min-height:168px;border-bottom:0;border-right:1px solid var(--bordure-sable)}
  .af-boite{width:40%}
  .af-boite-2{left:30%;width:42%}
}
/* téléphone : cartes compactes (compte, titre, lien), le détail est sur chaque hub */
@media (max-width:619px){
  .af-visuel{flex-basis:34%;min-height:132px}
  .af-texte{display:none}
  .af-titre{font-size:23px}
  .af-corps{gap:6px;padding:16px 16px 18px}
}

/* sous-blocs : molécules les plus délivrées, aires thérapeutiques */
.af-bloc{margin-top:clamp(44px,6vw,68px)}
.af-bloc-tete{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-bottom:18px}
.af-sous{font-size:clamp(24px,2.6vw,28px)}

.af-mols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.af-mols a{display:flex;align-items:center;gap:12px;height:100%;padding:9px 14px 9px 9px;background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-encart);text-decoration:none;color:var(--encre);transition:border-color var(--t-rapide),transform var(--t-rapide),box-shadow var(--t-rapide)}
.af-mols a:hover{border-color:var(--c,var(--vert));transform:translateY(-2px);box-shadow:0 12px 24px -18px rgba(31,77,58,.45)}
.af-mol-boite{flex:0 0 auto;width:66px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--creme)}
.af-mol-boite img{display:block;max-width:58px;max-height:46px;width:auto;height:auto;filter:drop-shadow(0 3px 5px rgba(34,40,31,.2))}
.af-mol-txt{display:flex;flex-direction:column;min-width:0}
.af-mol-nom{font-weight:700;font-size:16px;line-height:1.3;color:var(--vert)}
.af-mol-aire{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--gris-texte);margin-top:3px}
.af-mol-aire::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:99px;background:var(--c,var(--vert))}
@media (max-width:1023px){.af-mols{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* téléphone : trois rangées qui défilent à l'horizontale (toutes les fiches restent des
   liens HTML, la liste reste basse), comme les trois rangées du bureau */
@media (max-width:619px){
  .af-mols{grid-template-columns:none;grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(var(--gout) * -1);padding:2px var(--gout) 12px;scroll-padding-inline:var(--gout)}
  .af-mols li{scroll-snap-align:start}
}


/* ===== CAS DE COMPTOIR + JEUX RÉFLEXE (pattern accueil-comptoir) ===== */
/* même dégradé de verts charte que le panneau du héros */
.s-comptoir-accueil{position:relative;overflow:hidden;background:linear-gradient(160deg,#27583f 0%,var(--vert) 50%,var(--vert-hover) 100%);color:var(--creme)}
.s-comptoir-accueil::before{content:"";position:absolute;right:-12%;top:-20%;width:62%;aspect-ratio:1;border-radius:999px;background:radial-gradient(closest-side,rgba(247,240,227,.09),rgba(247,240,227,0) 72%);pointer-events:none}
.s-comptoir-accueil .conteneur{position:relative}
.s-comptoir-accueil a:focus-visible{outline-color:var(--creme)}
.ac-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.ac-texte h2{color:var(--creme);font-size:clamp(40px,5.4vw,58px);margin-top:14px}
.ac-lead{font-size:clamp(17px,1.9vw,19px);line-height:1.65;color:var(--creme);margin-top:18px;max-width:32em}
.ac-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.ac-points li{position:relative;padding-left:24px;font-size:16px;line-height:1.5;color:var(--creme)}
.ac-points li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--dore);transform:rotate(45deg)}
.ac-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:32px}
.ac-note{font-size:14.5px;color:var(--creme);opacity:.86}

/* aperçu d'un cas : décor 3D du comptoir + patiente + textes du jeu, en HTML */
.ac-scene{position:relative;background:var(--creme);border-radius:24px;padding:12px;box-shadow:0 44px 80px -40px rgba(0,0,0,.6),0 0 0 1px rgba(247,240,227,.3)}
.ac-ecran{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--vert-hover)}
.ac-decor{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ac-ecran::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,59,44,0) 55%,rgba(23,59,44,.3) 100%);pointer-events:none}
.ac-perso{position:absolute;right:5%;bottom:0;z-index:2;height:94%;width:auto;filter:drop-shadow(0 12px 22px rgba(34,40,31,.35))}
.ac-bulle{position:absolute;left:12px;right:36%;bottom:12px;z-index:3;background:var(--blanc);color:var(--encre);border-radius:14px;padding:22px 16px 14px;box-shadow:0 16px 30px -18px rgba(34,40,31,.65)}
.ac-nom{position:absolute;top:-12px;left:14px;background:var(--vert);color:var(--creme);font-size:12px;font-weight:700;letter-spacing:.6px;border-radius:999px;padding:4px 12px}
.ac-bulle p{font-size:14.5px;line-height:1.5}
.ac-choix{display:grid;gap:8px;padding:14px 2px 2px}
.ac-consigne{font-size:13.5px;font-style:italic;color:var(--gris-texte);padding-left:4px}
.ac-opt{display:flex;align-items:center;gap:12px;background:var(--blanc);border:1.5px solid var(--bordure);border-radius:12px;padding:10px 14px;font-size:14.5px;line-height:1.35;color:var(--encre)}
.ac-opt b{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:99px;background:var(--sable);color:var(--vert);font-size:12.5px}
.ac-opt-choisie{border-color:var(--vert);background:rgba(31,77,58,.06)}
.ac-opt-choisie b{background:var(--vert);color:var(--creme)}
/* entrée en scène : la patiente arrive, puis sa réplique, puis les questions */
@media (prefers-reduced-motion:no-preference){
  .js .ac-scene .ac-perso{opacity:0;transform:translateX(26px);transition:opacity .5s ease-out .25s,transform .6s cubic-bezier(.22,.61,.36,1) .25s}
  .js .ac-scene .ac-bulle{opacity:0;transform:translateY(10px);transition:opacity .45s ease-out .65s,transform .45s ease-out .65s}
  .js .ac-scene .ac-opt{opacity:0;transform:translateY(8px);transition:opacity .4s ease-out,transform .4s ease-out}
  .js .ac-scene .ac-opt:nth-child(2){transition-delay:.95s}
  .js .ac-scene .ac-opt:nth-child(3){transition-delay:1.07s}
  .js .ac-scene .ac-opt:nth-child(4){transition-delay:1.19s}
  .js .ac-scene.vu .ac-perso,.js .ac-scene.vu .ac-bulle,.js .ac-scene.vu .ac-opt{opacity:1;transform:none}
}

/* les six jeux Réflexe, en accès libre */
.ac-reflexe{margin-top:clamp(52px,7vw,80px);padding-top:clamp(34px,4.5vw,48px);border-top:1px solid rgba(247,240,227,.2)}
.ac-reflexe-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin-bottom:22px}
.ac-reflexe-tete h3{color:var(--creme);font-size:clamp(24px,2.7vw,30px)}
.ac-reflexe-tete p{font-size:15.5px;color:var(--creme);opacity:.86}
.ac-reflexe-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ac-reflexe-liste a{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;padding:12px 10px 16px;background:var(--creme);border-radius:var(--r-encart);text-decoration:none;color:var(--vert);font-weight:700;font-size:14.5px;line-height:1.3;text-align:center;transition:transform var(--t-rapide),box-shadow var(--t-rapide)}
.ac-reflexe-liste a:hover{transform:translateY(-3px);box-shadow:0 16px 28px -18px rgba(0,0,0,.55)}
/* icône trait continu (fond crème un peu plus clair que la tuile) : darken l'efface */
.ac-reflexe-liste img{width:72px;height:72px;mix-blend-mode:darken}
.ac-tous{margin-top:20px;display:flex;justify-content:flex-end}
.ac-tous .lien-fleche{color:var(--creme)}

@media (max-width:919px){
  .ac-grille{grid-template-columns:1fr}
  .ac-scene{width:100%;max-width:640px;margin-inline:auto}
  .ac-reflexe-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:519px){
  .ac-scene{padding:8px;border-radius:20px}
  /* Téléphone (retour de Joseph du 13/10/2026 : patiente rognée, à moitié cachée par sa réplique) : la scène
     grandit, la patiente y tient en entier, et sa réplique passe SOUS elle au lieu de la recouvrir. */
  .ac-ecran{aspect-ratio:auto;border-radius:14px;padding-top:min(76vw,300px)}
  .ac-decor{object-position:64% 30%}
  .ac-perso{top:12px;bottom:auto;right:5%;height:min(74vw,292px)}
  .ac-bulle{position:relative;left:auto;right:auto;bottom:auto;margin:-26px 8px 8px;padding:18px 12px 10px}
  .ac-bulle p{font-size:13.5px}
  .ac-opt{font-size:14px;padding:9px 12px}
  .ac-reflexe-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-tous{justify-content:flex-start}
}

/* ===== PODCAST AU COMPTOIR (bloc serveur ljd/ecoute-accueil) ===== */
.s-podcast-accueil{background:var(--creme)}
.ap-grille{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(32px,5vw,72px);align-items:start}
/* le visuel accompagne la lecture de la colonne de texte, plus haute (épisode, à réécouter) */
.ap-visuel{position:sticky;top:110px;padding-bottom:clamp(44px,6vw,70px)}
.ap-photo{position:relative;margin:0;border-radius:var(--r-grand);overflow:hidden;box-shadow:var(--ombre-elev);background:var(--sable)}
.ap-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.ap-photo figcaption{position:absolute;left:14px;top:14px;background:var(--blanc);color:var(--encre);font-size:12px;font-weight:600;border-radius:999px;padding:6px 12px;box-shadow:0 6px 16px -10px rgba(34,40,31,.5)}
/* pochette : reprend la charte des pochettes Ausha (vert, Playfair crème, trait gradué) */
.ap-pochette{position:absolute;right:clamp(-10px,-1vw,0px);bottom:0;z-index:2;width:clamp(150px,38%,212px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center;background:var(--vert);color:var(--creme);border-radius:18px;box-shadow:0 28px 50px -24px rgba(23,59,44,.75),inset 0 0 0 1px rgba(247,240,227,.12);transform:rotate(3deg)}
.ap-p-emission,.ap-p-num{font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:600}
.ap-p-sujet{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(24px,2.7vw,32px);line-height:1.05}
.ap-p-trait{width:80%;height:auto;color:var(--creme)}

.ap-tete{display:grid;gap:14px}
.ap-tete h2{font-size:clamp(32px,4.8vw,46px)}
.ap-tete p{color:var(--gris-texte);font-size:17px}
.ap-episode{margin-top:26px;background:var(--blanc);border:1.5px solid var(--bordure);border-radius:var(--r-carte);padding:clamp(18px,2.4vw,24px);box-shadow:var(--ombre-carte);transition:border-color var(--t-rapide),box-shadow var(--t-douce)}
.ap-episode.actif{border-color:var(--vert);box-shadow:var(--ombre-elev)}
/* carte du dernier épisode (retour de Joseph : alignements repris) : étiquette et infos sur
   une ligne, titre, lecteur sur UNE ligne (lecture, écoulé, barre, durée, vitesse, tous centrés
   sur le même axe), lien vers la fiche conseil en pied de carte */
.ap-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.ap-badge{flex:0 0 auto;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--creme);background:var(--vert);border-radius:999px;padding:4px 11px}
.ap-meta-txt{font-size:14px;color:var(--gris-texte)}
.ap-ep-titre{font-size:clamp(22px,2.3vw,26px);line-height:1.2;margin-top:12px}
.s-podcast-accueil .ap-episode .lecteur{display:flex;align-items:center;gap:14px;margin:18px 0 0}
.s-podcast-accueil .ap-episode .lect-bouton{width:52px;height:52px}
.s-podcast-accueil .ap-episode .lect-bouton svg{width:24px;height:24px}
.s-podcast-accueil .ap-episode .lect-piste{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.s-podcast-accueil .ap-episode .lect-temps{display:contents}
.s-podcast-accueil .ap-episode .lect-ecoule{order:-1;min-width:2.6em}
.s-podcast-accueil .ap-episode .lect-total{min-width:2.6em;text-align:right}
.s-podcast-accueil .ap-episode .lect-ecoule,
.s-podcast-accueil .ap-episode .lect-total{font-size:13px;font-weight:600;color:var(--gris-texte);font-variant-numeric:tabular-nums}
/* anneau de focus en pilule autour de la piste (2 px, vert charte) plutôt qu'un cadre épais */
.s-podcast-accueil .ap-episode .lect-barre:focus-visible{outline:2px solid var(--vert);outline-offset:4px;border-radius:999px}
.s-podcast-accueil .ap-episode .lect-vitesse{height:34px;min-width:50px}
.ap-ep-pied{margin-top:18px;padding-top:14px;border-top:1px solid var(--bordure)}
.ap-ep-pied .lien-fleche{margin-top:0}
.ap-precedents{margin-top:22px}
.ap-sous{font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;font-style:normal;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--vert)}
.ap-precedents ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.ap-precedents a{display:flex;align-items:baseline;gap:12px;padding:11px 14px;background:var(--blanc-casse);border:1px solid var(--bordure);border-radius:var(--r-encart);text-decoration:none;color:var(--encre);transition:border-color var(--t-rapide),transform var(--t-rapide)}
.ap-precedents a:hover{border-color:var(--vert);transform:translateX(3px)}
.ap-pr-num{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--vert);white-space:nowrap}
.ap-pr-titre{font-size:15.5px;line-height:1.4}
.ap-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px}
.ap-plateformes{font-size:14.5px;color:var(--gris-texte);max-width:30em}
.ap-plateformes a{font-weight:600;text-underline-offset:3px}

@media (max-width:919px){
  .ap-grille{grid-template-columns:1fr}
  .ap-visuel{position:relative;top:auto;width:100%;max-width:640px;margin-inline:auto}
}
@media (max-width:519px){
  .ap-visuel{padding-bottom:52px}
  .ap-pochette{width:42%;right:-4px;padding:12px;gap:5px}
  .ap-p-emission,.ap-p-num{font-size:9.5px;letter-spacing:2px}
  .ap-p-sujet{font-size:22px}
  .ap-photo figcaption{font-size:11px;left:10px;top:10px}
  .s-podcast-accueil .ap-episode .lecteur{gap:10px}
  .s-podcast-accueil .ap-episode .lect-bouton{width:46px;height:46px}
  .s-podcast-accueil .ap-episode .lect-piste{gap:8px}
  .s-podcast-accueil .ap-episode .lect-vitesse{min-width:44px;height:32px;font-size:13px}
}