/* Recommandations : suggestions qui apparaissent au survol de la tuile */
.reco{outline:none}
.reco:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.reco-hint{margin:0!important;color:var(--muted);font-size:var(--fs-sm)}
.reco-hint::after{content:" ↓";}
.reco-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .25s ease,margin .3s ease}
.reco:hover .reco-list,.reco:focus-within .reco-list{max-height:320px;opacity:1;margin-top:10px}
.reco:hover .reco-hint,.reco:focus-within .reco-hint{display:none}
.reco-list a{display:block;padding:7px 10px;margin:0 -10px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);line-height:1.3}
.reco-list a:hover,.reco-list a:focus-visible{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.reco-list b{display:block;font:700 var(--fs-sm)/1.25 var(--display)}
.reco-list small{display:block;font-size:var(--fs-xs);color:var(--muted)}
@media (hover:none){.reco-list{max-height:none;opacity:1;margin-top:10px}.reco-hint{display:none}}
@media (prefers-reduced-motion:reduce){.reco-list{transition:none}}

/* recommandations : une seule carte remplie, le reste annoncé en une ligne */
#recommandations .grid{grid-template-columns:minmax(0,420px)}
.soon-line{margin:14px 0 0;color:var(--muted);font-size:var(--fs-sm);font-style:italic}

/* Refonte B : en-tête, cercle, puis Ressources et Recommandations côte à côte */
.som-hero{padding-top:28px}
.som-hero::before{content:"";display:block;width:92px;height:12px;border-radius:6px;background:var(--accent);margin-bottom:22px}
.som-hero .kicker-line{margin:0 0 8px;font-weight:700;color:var(--muted)}
.som-hero h1{font:700 var(--fs-2xl,clamp(2.4rem,6.5vw,4.4rem))/1 var(--display,inherit);margin:0 0 16px}
.som-hero .plead{font-size:var(--fs-lg,1.375rem);line-height:1.4;max-width:34ch;margin:0}
.som-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,40px);align-items:start}
.som-cols h2{margin:0 0 20px}
.som-stack{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.som-stack .tile p{margin:0}
.som-stack .res-act{margin-top:14px}
.pod-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.pod-list a{display:block;padding:8px 10px;margin:0 -10px;border-radius:var(--r-sm,8px);text-decoration:none;color:var(--ink);line-height:1.3}
.pod-list a:hover,.pod-list a:focus-visible{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.pod-list b{display:block;font-size:var(--fs-sm,1rem)}
.pod-list small{display:block;font-size:var(--fs-xs,.875rem);color:var(--muted)}
.som-cols .soon-line{margin:14px 0 0}
@media (max-width:820px){.som-cols{grid-template-columns:1fr}}
.dl{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--r,12px);background:color-mix(in srgb,var(--accent) 16%,transparent);color:color-mix(in srgb,var(--accent) 75%,var(--ink));transition:background .15s}
.dl:hover,.dl:focus-visible{background:color-mix(in srgb,var(--accent) 28%,transparent)}
@media (prefers-reduced-motion:reduce){.dl{transition:none}}

/* textes justifiés */
.som-hero .plead{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* téléphone : texte aligné à gauche plutôt que justifié */
@media (max-width:600px){.som-hero .plead{text-align:left;hyphens:manual;-webkit-hyphens:manual}}

/* ressources : bouton de téléchargement à droite du texte */
.som-stack .tile{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:center}
.som-stack .tile>h3,.som-stack .tile>p:not(.res-act){grid-column:1}
.som-stack .tile>.res-act{grid-column:2;grid-row:1 / span 2;margin:0!important}