/* =====================================================================
   4D · Section Café IA (v2)
   Complète 4d.css sans le modifier : mêmes jetons (couleurs, polices,
   rayons), mêmes briques. Chargé par index.html et les pages cafe-ia*.
   RÈGLE ANTI-ROGNAGE (voir 4d.css) : tout conteneur qui porte des
   .mini-brick / .brick garde un peu de marge haute, jamais overflow:hidden
   vertical.
   ===================================================================== */

/* Logo Café IA (PNG fourni par l'association, fond transparent) */
.cafe-logo{display:block;width:clamp(170px,26vw,260px);height:auto}
.cafe-logo.sm{width:150px}

/* Fil d'Ariane */
.crumbs{font-size:.9rem;font-weight:700;color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 6px;opacity:.6}

/* Petites infos de séance (durée, date, lieu) */
.meta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.meta-row .chip .ic{width:1em;height:1em}

/* ---------- Lecteur vidéo responsive (16/9) ---------- */
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0d1426;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:inset 0 -7px 0 0 rgba(0,0,0,.25),0 24px 50px -26px rgba(20,30,60,.6);
  border:6px solid var(--surface);outline:1px solid var(--line)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-note{font-size:.88rem;color:var(--muted);margin-top:12px}

/* ---------- Cartes de replay (page liste + accueil) ---------- */
.replay-list{display:grid;gap:26px;grid-template-columns:repeat(2,1fr);padding-top:12px}
@media(max-width:760px){.replay-list{grid-template-columns:1fr}}
.replay-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:0;overflow:visible}
.replay-card .thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius) var(--radius) 0 0;
  background:#0d1426 center/cover no-repeat;overflow:hidden}
.replay-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.replay-card .thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:48px;border-radius:13px;background:var(--b-red);color:#fff;display:grid;place-items:center;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),0 10px 22px -8px rgba(0,0,0,.6)}
.replay-card .thumb .play .ic{width:26px;height:26px}
.replay-card .thumb .dur{position:absolute;right:10px;bottom:10px;background:rgba(13,20,38,.85);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.8rem;padding:3px 9px;border-radius:7px}
.replay-card .rc-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.replay-card .rc-body .mini-brick{align-self:flex-start;margin-top:6px}
.replay-card h3{margin:2px 0 0}
.replay-card p{color:var(--muted);font-size:.97rem}
.replay-card .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.replay-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}

/* Liste compacte de replays (bloc accueil) */
.replay-mini{display:flex;flex-direction:column;gap:14px;padding-top:12px}
.replay-mini a{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  transition:transform .15s,box-shadow .15s}
.replay-mini a:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(20,30,60,.55)}
.replay-mini a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.replay-mini .mini-brick{flex:0 0 auto}
.replay-mini strong{font-family:var(--font-display);font-weight:700;display:block;line-height:1.2}
.replay-mini small{color:var(--muted);font-weight:600}
.cafe-home{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:900px){.cafe-home{grid-template-columns:1fr;gap:26px}}

/* ---------- Sommaire de la séance ---------- */
.toc{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.toc a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:.92rem;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:8px 14px;border-radius:999px}
.toc a:hover{border-color:var(--accent);color:var(--accent-ink)}
.toc a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.toc .n{font-family:var(--font-display);color:var(--accent)}

/* ---------- Bloc concept ---------- */
.concepts{display:flex;flex-direction:column;gap:34px;padding-top:10px}
.concept{--c:var(--b-blue);position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 28px 26px;scroll-margin-top:90px;
  box-shadow:inset 0 5px 0 0 var(--c),0 18px 40px -28px rgba(20,30,60,.5)}
.concept-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.concept-h .mini-brick{--c:inherit;background:var(--c)}
.concept-h h3{flex:1 1 260px;margin:0}
.concept-body{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.concept-body{grid-template-columns:1fr;gap:16px}}
.cb h4{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 70%,#000);margin-bottom:6px}
.cb p,.cb li{color:var(--ink);font-size:.98rem}
.cb p+p{margin-top:8px}
.cb ul{padding-left:1.1em}
.concept .more{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:.95rem;color:var(--muted)}

/* Lien horodaté (bouton brique blanc) */
.ts{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:.88rem;
  text-decoration:none;color:var(--ink);background:var(--bg);border-radius:10px;padding:7px 13px;
  box-shadow:0 3px 0 0 #cdd4e4;white-space:nowrap;transition:transform .08s}
.ts:hover{color:var(--accent-ink);transform:translateY(-1px)}
.ts:active{transform:translateY(2px);box-shadow:0 1px 0 0 #cdd4e4}
.ts:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ts .ic{width:1em;height:1em;color:var(--b-red)}
/* Variante dans le texte courant */
a.ts-inline{font-weight:800;color:var(--accent-ink);text-decoration:none;white-space:nowrap}
a.ts-inline:hover{text-decoration:underline}

/* ---------- Encadrés ---------- */
.callout{border-radius:16px;padding:18px 20px;background:#fff8e1;border:1px dashed #e0b33a;color:#5a4500}
.callout strong{color:#3d2f00}
.callout.info{background:#eaf3ff;border-color:#8fb8f5;color:#0a3a82}
.callout.info strong{color:#0a3a82}
.callout ul{padding-left:1.1em;margin-top:6px}

/* ---------- Outils cités ---------- */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.tools{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tools{grid-template-columns:1fr}}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.tool strong{font-family:var(--font-display);font-size:1.05rem;display:block}
.tool p{color:var(--muted);font-size:.93rem;margin-top:4px}

/* ---------- Glossaire ---------- */
.glossary{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 26px}
@media(max-width:760px){.glossary{grid-template-columns:1fr}}
.glossary div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.glossary dt{font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.glossary dd{color:var(--muted);font-size:.95rem;margin-top:3px}

/* ---------- Navigation entre replays ---------- */
.pager{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pager .btn{white-space:normal}

/* Titres de section internes */
.sec-h{margin-bottom:22px}
.sec-h h2{margin-top:6px}

/* Accessibilité : texte réservé aux lecteurs d'écran */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.band .tool{color:var(--ink)}

/* Couleurs des mini-briques : .mini-brick (déclarée après .c-*) impose --c:var(--accent),
   on renforce la spécificité pour que la couleur choisie l'emporte. */
.mini-brick.c-red{--c:var(--b-red)}.mini-brick.c-teal{--c:var(--b-teal)}
.mini-brick.c-orange{--c:var(--b-orange)}.mini-brick.c-blue{--c:var(--b-blue)}
.slides-frame{background:#fff}

/* Rangée de logos (Café IA, Région, commune) : cartes blanches de même hauteur */
.logo-row{list-style:none;display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin-top:28px}
.logo-row li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 16px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -18px rgba(20,30,60,.5)}
.logo-row img{height:64px;width:auto;display:block}
@media(max-width:560px){.logo-row{gap:10px}.logo-row li{padding:8px 12px}.logo-row img{height:48px}}
.band .logo-row li{border-color:transparent}
/* Liste des replays de l'accueil en 2 colonnes sous l'encart */
.replay-mini.two{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
@media(max-width:760px){.replay-mini.two{grid-template-columns:1fr}}
.logo-row a{display:block;border-radius:10px;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.logo-row a:hover{transform:translateY(-2px)}
.logo-row a:focus-visible{outline:3px solid #2f7ff0;outline-offset:4px}