@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

/* ISFO Casablanca — component styles. Mobile-first; breakpoints 600px and 960px.
   Every value comes from tokens.css (var(--…)); nothing here re-declares a token. */

.isfo, .isfo * { box-sizing: border-box; }
.isfo { font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--ink); background: var(--surface-100); -webkit-font-smoothing: antialiased; }
.isfo h1, .isfo h2, .isfo h3 { font-family: var(--font-display); margin: 0; color: var(--ink); }
.isfo p { margin: 0; }
.isfo a:where(:not([class])) { color: var(--brand); text-underline-offset: 3px; }
.isfo a:where(:not([class])):hover { color: var(--brand-strong); }
[data-theme="dark"] .isfo { color-scheme: dark; }
.isfo :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.isfo-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.isfo-icon--sm { width: 16px; height: 16px; }
.isfo-meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.isfo-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.isfo-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.isfo-section-title h2 { font-size: 22px; line-height: 28px; font-weight: 600; padding-bottom: var(--space-2); background: linear-gradient(var(--green), var(--green)) left bottom / 40px 3px no-repeat; }

/* Button */
.isfo-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font: 600 14px/20px var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.isfo-btn--primary { background: var(--brand); color: var(--on-brand); }
.isfo-btn--primary:hover { background: var(--brand-strong); color: var(--on-brand); }
.isfo-btn--secondary { background: var(--surface-200); color: var(--brand); border-color: var(--line-strong); }
.isfo-btn--secondary:hover { background: var(--brand-soft); color: var(--brand-strong); }
.isfo-btn--ghost { background: transparent; color: var(--brand); }
.isfo-btn--ghost:hover { background: var(--brand-soft); }
.isfo-btn--danger { background: var(--surface-200); color: var(--danger); border-color: var(--danger); }
.isfo-btn--danger:hover { background: var(--danger-soft); }
.isfo-btn--sm { min-height: 36px; padding: var(--space-2) var(--space-3); }
.isfo-btn--block { width: 100%; }
.isfo-btn[disabled] { background: var(--surface-300); color: var(--ink-muted); border-color: transparent; cursor: not-allowed; }

/* Badge — always a word, optionally an icon: colour is never the only signal */
.isfo-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm); font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; background: var(--surface-300); color: var(--ink); white-space: nowrap; }
.isfo-badge .isfo-icon { width: 14px; height: 14px; stroke-width: 2.2; }
.isfo-badge--absence { background: var(--danger-soft); color: var(--danger); }
.isfo-badge--changement { background: var(--warning-soft); color: var(--warning); }
.isfo-badge--edt { background: var(--info-soft); color: var(--info); }
.isfo-badge--stage, .isfo-badge--public, .isfo-badge--admis { background: var(--success-soft); color: var(--success); }
.isfo-badge--info { background: var(--brand-soft); color: var(--brand); }
.isfo-badge--emploi { background: var(--info-soft); color: var(--info); }
.isfo-badge--formation { background: var(--green-soft); color: var(--green); }
.isfo-badge--activite { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.isfo-badge--prive { background: var(--surface-300); color: var(--ink-muted); }
.isfo-badge--nouveau { background: var(--accent); color: var(--on-accent); }

/* Card */
.isfo-card { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); }
@media (min-width: 600px) { .isfo-card { padding: var(--space-6); } }
.isfo-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .isfo-grid--2, .isfo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .isfo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .isfo-grid { gap: var(--space-6); } }

/* Site header */
.isfo-header { position: sticky; top: 0; z-index: 20; background: var(--surface-200); border-bottom: 1px solid var(--line); }
.isfo-header__in { display: flex; align-items: center; gap: var(--space-4); min-height: 60px; padding: 0 var(--space-4); max-width: 1200px; margin: 0 auto; }
.isfo-logo { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink); }
.isfo-logo__mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font: 700 12px/1 var(--font-display); letter-spacing: .02em; }
.isfo-logo__img { width: 44px; height: 44px; flex: none; border-radius: var(--radius-pill); display: block; }
.isfo-logo__name { font: 700 16px/18px var(--font-display); color: var(--ink); white-space: nowrap; }
.isfo-logo__sub { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.isfo-nav { display: none; margin-left: auto; gap: var(--space-1); }
.isfo-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font: 600 14px/20px var(--font-sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.isfo-nav a:hover { background: var(--surface-300); color: var(--ink); }
.isfo-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.isfo-menu-btn { margin-left: auto; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-200); color: var(--ink); cursor: pointer; }
@media (min-width: 960px) { .isfo-nav { display: flex; } .isfo-menu-btn { display: none; } .isfo-header__in { padding: 0 var(--space-6); min-height: 72px; } }
@media (min-width: 1200px) { .isfo-header__in { padding: 0 var(--space-12); } }

/* Bottom navigation (mobile only) */
.isfo-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface-200); border-top: 1px solid var(--line); box-shadow: var(--shadow-raised); padding-bottom: env(safe-area-inset-bottom); }
.isfo-bottomnav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) 0; min-height: 56px; font: 600 11px/14px var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.isfo-bottomnav a[aria-current="page"] { color: var(--brand); }
.isfo-bottomnav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--brand); }
.isfo-bottomnav .isfo-dot { position: absolute; top: 6px; left: calc(50% + 6px); width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--accent); }
@media (min-width: 960px) { .isfo-bottomnav { display: none; } }

/* Hero (home) */
.isfo-hero { background: var(--brand); color: var(--on-brand); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-4); position: relative; overflow: hidden; }
.isfo-hero h1 { color: var(--on-brand); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; max-width: 18ch; }
.isfo-hero p { margin-top: var(--space-3); max-width: 46ch; }
.isfo-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.isfo-hero .isfo-btn--primary { background: var(--on-brand); color: var(--brand); }
.isfo-hero .isfo-btn--ghost { color: var(--on-brand); border-color: var(--on-brand); }
.isfo-hero .isfo-btn--ghost:hover { background: transparent; text-decoration: underline; }
@media (min-width: 600px) { .isfo-hero { padding: var(--space-12); } .isfo-hero h1 { font-size: 36px; line-height: 42px; } }
/* Hero with the establishment photo: photo band on top on mobile, side by side from 960px. Never text over the photo. */
.isfo-hero--photo { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.isfo-hero__text { padding: var(--space-6) var(--space-4) var(--space-8); }
.isfo-hero__media { order: -1; margin: 0; height: 168px; background: var(--surface-300); }
.isfo-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; }
@media (min-width: 600px) { .isfo-hero--photo { padding: 0; } .isfo-hero__text { padding: var(--space-12); } .isfo-hero__media { height: 240px; } }
@media (min-width: 960px) { .isfo-hero--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .isfo-hero__media { order: 0; height: auto; min-height: 100%; } }

/* Filter chips */
.isfo-chips { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: none; }
.isfo-chip { flex: none; min-height: 36px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface-200); color: var(--ink); font: 600 14px/18px var(--font-sans); cursor: pointer; }
.isfo-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* Announcement */
.isfo-annonce { display: grid; gap: var(--space-2); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); }
.isfo-annonce__top { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.isfo-annonce h3 { font-size: 18px; line-height: 24px; font-weight: 600; }
.isfo-annonce p { color: var(--ink); }
.isfo-annonce--pinned { border-color: var(--brand); box-shadow: inset 0 3px 0 var(--accent), var(--shadow-card); }

/* Alert banner (urgent announcement strip) */
.isfo-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--brand-soft); color: var(--ink); }
.isfo-alert .isfo-icon { margin-top: 2px; color: var(--brand); }
.isfo-alert--absence { background: var(--danger-soft); } .isfo-alert--absence .isfo-icon { color: var(--danger); }
.isfo-alert--changement { background: var(--warning-soft); } .isfo-alert--changement .isfo-icon { color: var(--warning); }

/* Activity (parascolaire) */
.isfo-activite { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.isfo-activite__media { aspect-ratio: 16 / 9; background: var(--surface-300); display: grid; place-items: center; color: var(--ink-muted); }
.isfo-activite__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.isfo-activite__body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.isfo-activite h3 { font-size: 18px; line-height: 24px; font-weight: 600; }

/* Timetable item */
.isfo-edt { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.isfo-edt__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); background: var(--info-soft); color: var(--info); }
.isfo-edt__body { flex: 1; min-width: 0; }
.isfo-edt__title { font: 600 16px/22px var(--font-sans); }

/* Exam calendar */
.isfo-exams { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.isfo-exam { display: flex; gap: var(--space-3); align-items: stretch; padding: var(--space-3); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); }
.isfo-exam__date { flex: none; width: 56px; display: grid; place-content: center; text-align: center; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); }
.isfo-exam__day { font: 700 22px/24px var(--font-display); }
.isfo-exam__month { font: 700 12px/16px var(--font-sans); text-transform: uppercase; letter-spacing: .06em; }
.isfo-exam__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.isfo-exam__title { font: 600 16px/22px var(--font-sans); }
.isfo-exam--eff .isfo-exam__date { background: var(--brand); color: var(--on-brand); }

/* Tables (results, admin) */
.isfo-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-200); }
.isfo-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.isfo-table th { text-align: left; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface-200); white-space: nowrap; }
.isfo-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.isfo-table tr:last-child td { border-bottom: 0; }
.isfo-table tbody tr:nth-child(even) td { background: var(--surface-100); }
.isfo-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Form fields */
.isfo-field { display: grid; gap: var(--space-1); }
.isfo-field label { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.isfo-field small { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.isfo-input, .isfo-select, .isfo-textarea { width: 100%; min-height: 44px; padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-200); color: var(--ink); font: 400 16px/20px var(--font-sans); }
.isfo-textarea { min-height: 120px; resize: vertical; }
.isfo-input:focus, .isfo-select:focus, .isfo-textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.isfo-field--error .isfo-input { border-color: var(--danger); }
.isfo-field--error small { color: var(--danger); }

/* Switch (page visibility) */
.isfo-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.isfo-switch input { appearance: none; -webkit-appearance: none; margin: 0; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--surface-300); border: 1px solid var(--line-strong); position: relative; cursor: pointer; transition: background-color .15s; }
.isfo-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--ink-muted); transition: transform .15s, background-color .15s; }
.isfo-switch input:checked { background: var(--success); border-color: var(--success); }
.isfo-switch input:checked::after { transform: translateX(18px); background: var(--surface-200); }
.isfo-switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Filière card */
.isfo-filiere { display: grid; gap: var(--space-3); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); }
.isfo-filiere__code { font: 700 13px/16px var(--font-display); letter-spacing: .04em; color: var(--green); }
.isfo-filiere h3 { font-size: 18px; line-height: 24px; font-weight: 600; }
.isfo-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.isfo-facts li { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-300); font-size: 14px; line-height: 20px; color: var(--ink); }

/* Admin page list */
.isfo-admin-actions { display: flex; gap: var(--space-1); justify-content: flex-end; }

/* ==========================================================================
   Additions du portail (structure des pages, admin). Règles du §1 de
   CLAUDE-design.md : préfixe isfo-, uniquement des variables de tokens.css.
   ========================================================================== */

/* Accessibilité */
.isfo-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.isfo-skip { position: absolute; left: var(--space-2); top: -60px; z-index: 50; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none; }
.isfo-skip:focus { top: var(--space-2); }
body.isfo { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

/* Structure */
.isfo-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 960px) { .isfo-container { padding: 0 var(--space-12); } }
.isfo-main { flex: 1; padding: var(--space-4) 0 72px; }
@media (min-width: 960px) { .isfo-main { padding: var(--space-6) 0 var(--space-12); } }
.isfo-stack { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.isfo-section { margin-top: var(--space-8); }
.isfo-section-title a { font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; color: var(--brand); white-space: nowrap; }
.isfo-section-title a:hover { text-decoration: underline; }
.isfo-flashes { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.isfo-banner { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-md); border: 1px dashed var(--line-strong); background: var(--surface-300); color: var(--ink); font-weight: 600; font-size: 14px; line-height: 20px; }
.isfo-home-columns { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .isfo-home-columns { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

/* En-tête : outils (thème, menu) et menu mobile */
.isfo-header__tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.isfo-header__tools .isfo-menu-btn { margin-left: 0; }
@media (min-width: 960px) { .isfo-header__tools { margin-left: var(--space-2); } }
.isfo-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-200); color: var(--ink); cursor: pointer; }
.isfo-icon-btn:hover { background: var(--brand-soft); color: var(--brand); }
/* Compte connecté : pastille d'initiales et menu déroulant (details/summary) */
.isfo-account { position: relative; }
.isfo-account__btn { list-style: none; font: 700 14px/1 var(--font-display); background: var(--brand); color: var(--on-brand); border-color: var(--brand); border-radius: 50%; }
.isfo-account__btn::-webkit-details-marker { display: none; }
.isfo-account__btn:hover, .isfo-account[open] .isfo-account__btn { background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.isfo-account__panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 60; min-width: 240px; padding: var(--space-2); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); display: grid; gap: 2px; }
.isfo-account__who { display: grid; gap: 2px; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
.isfo-account__panel a, .isfo-account__panel button { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
.isfo-account__panel a:hover { background: var(--brand-soft); color: var(--brand); }
.isfo-account__panel form { margin: var(--space-1) 0 0; padding-top: 2px; border-top: 1px solid var(--line); }
.isfo-account__panel button:hover { background: var(--danger-soft); color: var(--danger); }
.isfo-theme-icon--light { display: none; }
[data-theme="dark"] .isfo-theme-icon--light { display: inline; }
[data-theme="dark"] .isfo-theme-icon--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .isfo-theme-icon--light { display: inline; }
  :root:not([data-theme="light"]) .isfo-theme-icon--dark { display: none; }
}
.isfo-menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface-200); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-raised); max-height: calc(100vh - 140px); overflow-y: auto; }
.isfo-menu-panel[hidden] { display: none; }
.isfo-menu-panel ul { list-style: none; margin: 0 auto; padding: var(--space-2) var(--space-4) var(--space-4); max-width: 1200px; }
.isfo-menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font-weight: 600; }
.isfo-menu-panel a:hover, .isfo-menu-panel a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
@media (min-width: 960px) { .isfo-menu-panel { display: none; } }
.isfo-bottomnav--2 { grid-template-columns: repeat(2, 1fr); }
.isfo-bottomnav--3 { grid-template-columns: repeat(3, 1fr); }
.isfo-bottomnav--4 { grid-template-columns: repeat(4, 1fr); }

/* En-tête de page (h1 + introduction) */
.isfo-page-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.isfo-page-head h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.01em; }
.isfo-page-head .isfo-prose { color: var(--ink-muted); }
.isfo-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; padding: 0; list-style: none; }
.isfo-breadcrumb li + li::before { content: "/"; margin-right: var(--space-1); }
.isfo-breadcrumb a { color: var(--brand); text-decoration: none; }
.isfo-breadcrumb a:hover { text-decoration: underline; }

/* Contenu riche */
.isfo-prose { display: grid; gap: var(--space-3); overflow-wrap: break-word; }
.isfo-prose h2 { font-size: 22px; line-height: 28px; font-weight: 600; margin-top: var(--space-4); }
.isfo-prose h3 { font-size: 18px; line-height: 24px; font-weight: 600; margin-top: var(--space-2); }
.isfo-prose ul, .isfo-prose ol { margin: 0; padding-left: var(--space-6); }
.isfo-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.isfo-prose blockquote { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--green); background: var(--green-soft); border-radius: var(--radius-sm); }
.isfo-prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.isfo-prose th, .isfo-prose td { border: 1px solid var(--line); padding: var(--space-2) var(--space-3); text-align: left; }
.isfo-prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-md); }

/* Cartes cliquables : toute la carte renvoie vers le détail */
.isfo-link-card { position: relative; }
.isfo-link-card h3 a { color: inherit; text-decoration: none; }
.isfo-link-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.isfo-link-card:hover { border-color: var(--brand); }
.isfo-link-card h3 a:focus-visible { outline: none; }
.isfo-link-card:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.isfo-chips a.isfo-chip { text-decoration: none; display: inline-flex; align-items: center; }

/* Recherche, filtres, regroupements */
.isfo-toolbar { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.isfo-group-title { font-size: 18px; line-height: 24px; font-weight: 600; margin: var(--space-6) 0 var(--space-3); }
.isfo-group-title:first-child { margin-top: 0; }
.isfo-subtitle { font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: var(--space-4) 0 var(--space-2); }
.isfo-list { display: grid; gap: var(--space-2); }

/* Galerie d'activité */
.isfo-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 600px) { .isfo-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.isfo-gallery a { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-300); }
.isfo-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.isfo-detail-media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-300); aspect-ratio: 16 / 9; }
.isfo-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vidéos intégrées d'une activité (16:9 ; Shorts et Reels en vertical 9:16) */
.isfo-videos { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .isfo-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .isfo-videos > :only-child { grid-column: 1 / -1; } }
.isfo-video { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-300); }
.isfo-video--vertical { aspect-ratio: 9 / 16; width: 100%; max-width: 360px; justify-self: center; }
.isfo-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.isfo-video--file { background: #000; }
.isfo-video--file video { width: 100%; height: 100%; display: block; object-fit: contain; }
/* Photo en portrait : affichée en entier (jamais recadrée), sur un fond flouté de la même photo */
.isfo-media--portrait { position: relative; overflow: hidden; }
.isfo-media--portrait img { position: relative; object-fit: contain; }
.isfo-activite__media.isfo-media--portrait img { position: absolute; inset: 0; width: 100%; height: 100%; }
.isfo-media--portrait .isfo-media__backdrop { position: absolute; inset: 0; object-fit: cover; filter: blur(24px) brightness(.85); transform: scale(1.15); }
.isfo-detail-media.isfo-media--portrait { aspect-ratio: auto; display: grid; place-items: center; }
.isfo-detail-media.isfo-media--portrait img:not(.isfo-media__backdrop) { width: auto; max-width: 100%; height: auto; max-height: min(80vh, 900px); }
.isfo-detail-media.isfo-media--portrait .isfo-media__backdrop { width: 100%; height: 100%; }

/* États vides, pagination, erreur */
.isfo-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-200); }
.isfo-empty .isfo-icon { width: 32px; height: 32px; }
.isfo-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin-top: var(--space-6); }
.isfo-pagination a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-200); color: var(--ink); text-decoration: none; font-weight: 600; }
.isfo-pagination a:hover { background: var(--brand-soft); color: var(--brand); }
.isfo-pagination a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.isfo-error { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-12) 0; text-align: center; }
.isfo-error__code { font: 700 64px/1 var(--font-display); color: var(--brand); }

/* Alertes de retour (messages après une action) */
.isfo-alert--succes { background: var(--success-soft); } .isfo-alert--succes .isfo-icon { color: var(--success); }
.isfo-alert--erreur { background: var(--danger-soft); } .isfo-alert--erreur .isfo-icon { color: var(--danger); }

/* Contact */
.isfo-contact { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.isfo-contact li { display: flex; gap: var(--space-2); align-items: flex-start; }
.isfo-contact .isfo-icon { color: var(--brand); margin-top: 2px; }
.isfo-map { width: 100%; height: 260px; border: 0; border-radius: var(--radius-lg); background: var(--surface-300); }

/* Pied de page */
.isfo-footer { background: var(--surface-200); border-top: 1px solid var(--line); padding: var(--space-8) 0 calc(72px + var(--space-4)); }
@media (min-width: 960px) { .isfo-footer { padding-bottom: var(--space-6); } }
.isfo-footer__in { display: grid; gap: var(--space-6); max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 600px) { .isfo-footer__in { grid-template-columns: 1.4fr 1fr 1fr; } }
.isfo-footer__brand { display: grid; gap: var(--space-3); align-content: start; }
.isfo-footer .isfo-eyebrow { margin: 0 0 var(--space-2); }
.isfo-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: 14px; line-height: 20px; }
.isfo-footer__links a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; color: var(--ink); text-decoration: none; }
.isfo-footer__links a:hover { color: var(--brand); text-decoration: underline; }
.isfo-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); max-width: 1200px; margin: var(--space-6) auto 0; padding: var(--space-4) var(--space-4) 0; border-top: 1px solid var(--line); }
.isfo-footer__bottom a { color: var(--brand); }
@media (min-width: 960px) { .isfo-footer__in, .isfo-footer__bottom { padding-left: var(--space-12); padding-right: var(--space-12); } }
.isfo h2.isfo-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-muted); }

/* Formulaires : compléments */
.isfo-form { display: grid; gap: var(--space-4); }
.isfo-field--error .isfo-select, .isfo-field--error .isfo-textarea { border-color: var(--danger); }
.isfo-field .isfo-counter { justify-self: end; }
.isfo-field .isfo-counter--over { color: var(--danger); font-weight: 600; }
.isfo-fieldset { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: var(--space-3); margin: 0; min-width: 0; }
.isfo-fieldset legend { padding: 0 var(--space-1); }
.isfo-input[type="file"] { padding: var(--space-2); }
.isfo-current-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.isfo-current-file img { width: 96px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); }
.isfo-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-2); }
.isfo-thumb { display: grid; gap: var(--space-1); font-size: 14px; line-height: 20px; }
.isfo-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.isfo-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }

/* ---------------------------------------------------------------- Administration */
.isfo-admin { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .isfo-admin { grid-template-columns: 248px minmax(0, 1fr); } }
.isfo-admin-side { background: var(--surface-200); border-bottom: 1px solid var(--line); }
@media (min-width: 960px) { .isfo-admin-side { border-bottom: 0; border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; } }
.isfo-admin-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
@media (min-width: 960px) { .isfo-admin-top .isfo-menu-btn { display: none; } }
.isfo-admin-nav { display: none; padding: 0 var(--space-3) var(--space-4); }
.isfo-admin-nav.is-open { display: grid; gap: 2px; }
@media (min-width: 960px) { .isfo-admin-nav { display: grid; gap: 2px; flex: 1; align-content: start; } }
.isfo-admin-nav a, .isfo-admin-nav button { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; font: 600 14px/20px var(--font-sans); border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left; }
.isfo-admin-nav a:hover, .isfo-admin-nav button:hover, .isfo-admin-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.isfo-admin-nav .isfo-eyebrow { padding: var(--space-3) var(--space-3) var(--space-1); }
.isfo-admin-nav form { margin: 0; }
.isfo-admin-main { padding: var(--space-4); display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
@media (min-width: 960px) { .isfo-admin-main { padding: var(--space-6) var(--space-8); } }
.isfo-admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.isfo-admin-head h1 { font-size: 28px; line-height: 34px; }
.isfo-admin-actions form { display: inline; margin: 0; }
.isfo-admin-form { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .isfo-admin-form { grid-template-columns: minmax(0, 1fr) 300px; } }
.isfo-admin-form > aside { display: grid; gap: var(--space-4); }
.isfo-search { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.isfo-search .isfo-input, .isfo-search .isfo-select { flex: 1 1 180px; width: auto; }
.isfo-login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.isfo-login .isfo-card { width: 100%; max-width: 400px; display: grid; gap: var(--space-4); }

/* Statistiques (tableau de bord) */
.isfo-kpis { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .isfo-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.isfo-kpi { display: grid; gap: var(--space-1); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); }
.isfo-kpi__value { font: 700 28px/34px var(--font-display); font-variant-numeric: tabular-nums; }
.isfo-delta--up { color: var(--success); font-weight: 700; }
.isfo-delta--down { color: var(--danger); font-weight: 700; }
.isfo-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink); }
.isfo-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.isfo-swatch { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.isfo-swatch--views { background: var(--brand); }
.isfo-swatch--visits { background: transparent; border-top: 3px dashed var(--green); height: 0; }
.isfo-chart { position: relative; margin-top: var(--space-3); }
.isfo-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.isfo-chart__grid { stroke: var(--line); stroke-width: 1; }
.isfo-chart__axis { fill: var(--ink-muted); font: 400 11px var(--font-sans); font-variant-numeric: tabular-nums; }
.isfo-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.isfo-chart__line--views { stroke: var(--brand); }
.isfo-chart__line--visits { stroke: var(--green); stroke-dasharray: 6 4; }
.isfo-chart__cross { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.isfo-chart__dot { stroke: var(--surface-200); stroke-width: 2; }
.isfo-chart__dot--views { fill: var(--brand); }
.isfo-chart__dot--visits { fill: var(--green); }
.isfo-chart__hit { fill: transparent; cursor: crosshair; }
.isfo-chart__tip { position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-200); border: 1px solid var(--line); box-shadow: var(--shadow-raised); font-size: 14px; line-height: 20px; white-space: nowrap; }
.isfo-chart__tip[hidden] { display: none; }
.isfo-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.isfo-bars__label { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 14px; line-height: 20px; margin-bottom: var(--space-1); }
.isfo-bars__label span:first-child { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.isfo-bars__label span:last-child { color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.isfo-bars svg { display: block; width: 100%; height: 8px; }
.isfo-bars__track { fill: var(--surface-300); }
.isfo-bars__fill { fill: var(--brand); }
.isfo-details summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 14px; margin-top: var(--space-3); }

/* Équivalents en classes des styles en ligne des aperçus (la CSP interdit l'attribut style) */
.isfo-hero__eyebrow { color: inherit; opacity: .85; }
.isfo-hero h1 { margin-top: var(--space-2); }
.isfo-hero .isfo-hero__ghost { border: 1px solid var(--on-brand); }
.isfo-hero__media img { height: 100%; }
.isfo-alert__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.isfo-alert__link:hover { color: var(--brand); }
.isfo-chips--spaced { margin-bottom: var(--space-3); }
.isfo-filiere .isfo-meta { color: var(--ink); }
.isfo-releve-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.isfo-narrow { max-width: 640px; }
.isfo-detail { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .isfo-detail { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.isfo-year-title { font: 600 16px/22px var(--font-sans); color: var(--ink-muted); margin: var(--space-4) 0 var(--space-2); }

/* Groupe icône + texte dans une ligne de métadonnées (ne se sépare pas au retour à la ligne) */
.isfo-meta__item { display: inline-flex; align-items: center; gap: var(--space-1); }

/* Champ piège anti-robots du formulaire de contact : invisible pour les humains */
.isfo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pied de page : liste « Accès rapide » sur deux colonnes */
.isfo-footer__links--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }

/* Contenu riche : alignements, images et blocs produits par l'éditeur avancé */
.isfo-prose figure { margin: 0; }
.isfo-prose figcaption { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-top: var(--space-1); }
.isfo-prose .isfo-figure-logo img { width: 110px; height: 110px; border-radius: var(--radius-pill); }
.isfo-prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0; }
.isfo-prose details { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--surface-200); }
.isfo-prose summary { cursor: pointer; font-weight: 600; }
.isfo-prose a.isfo-btn { text-decoration: none; }
.isfo-prose .isfo-grid > * { min-width: 0; }
.isfo-page-after { margin-top: var(--space-8); }

/* Choix de plusieurs groupes (annonces, emplois du temps) */
.isfo-groups { border: 0; padding: 0; margin: 0; min-width: 0; }
.isfo-groups__legend { font: 600 14px/20px var(--font-sans); color: var(--ink); padding: 0; margin-bottom: var(--space-2); }
.isfo-groups__filiere { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3) var(--space-3); margin: 0 0 var(--space-2); min-width: 0; }
.isfo-groups__filiere legend { padding: 0 var(--space-1); font-weight: 600; }
.isfo-groups__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.isfo-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; }
.isfo-check:hover { background: var(--brand-soft); }
.isfo-check input { width: 18px; height: 18px; accent-color: var(--brand); }
.isfo-check--plain { padding: 0; font-size: 16px; }
.isfo-check--plain:hover { background: none; }

/* ==========================================================================
   Accueil : tuiles d'accès rapide, chiffres clés et sections « hero » par catégorie.
   Aplats des tokens uniquement (pas de dégradé, jamais de texte sur une photo).
   ========================================================================== */

/* Accès rapide : cartes de même hauteur, icône teintée, description, compteur */
.isfo-quick { display: grid; gap: var(--space-3); }
.isfo-quick__heading { font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.isfo-quick__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .isfo-quick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
.isfo-quick__grid li { display: flex; }
.isfo-quick__card--brand { --tone: var(--brand); --tone-soft: var(--brand-soft); }
.isfo-quick__card--green { --tone: var(--green); --tone-soft: var(--green-soft); }
.isfo-quick__card { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); padding: var(--space-4); min-height: 132px;
  background: var(--surface-200); border: 1px solid var(--line); border-bottom: 3px solid var(--tone); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
@media (min-width: 600px) { .isfo-quick__card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; align-content: center; min-height: 96px; } }
.isfo-quick__card:hover { border-color: var(--tone); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.isfo-quick__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--tone-soft); color: var(--tone); transition: background-color .15s, color .15s; }
.isfo-quick__icon .isfo-icon { width: 24px; height: 24px; }
.isfo-quick__card:hover .isfo-quick__icon { background: var(--tone); color: var(--on-brand); }
.isfo-quick__text { display: grid; gap: 2px; min-width: 0; }
.isfo-quick__title { font: 600 16px/20px var(--font-display); color: var(--ink); }
.isfo-quick__desc { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.isfo-quick__count { position: absolute; top: var(--space-2); right: var(--space-2); min-width: 24px; height: 24px; padding: 0 var(--space-2); display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font: 700 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.isfo-quick__arrow { display: none; color: var(--tone); transition: transform .15s; }
@media (min-width: 600px) { .isfo-quick__arrow { display: inline-flex; } }
.isfo-quick__card:hover .isfo-quick__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .isfo-quick__card, .isfo-quick__arrow { transition: none; } .isfo-quick__card:hover { transform: none; } }

/* Section « hero » de catégorie : bandeau pleine largeur, présentation à gauche, contenu à droite */
.isfo-band { padding: var(--space-8) 0; border-top: 1px solid var(--line); }
@media (min-width: 960px) { .isfo-band { padding: var(--space-12) 0; } }
.isfo-band--card { background: var(--surface-200); }
.isfo-band--brand-soft { background: var(--brand-soft); border-top-color: transparent; }
.isfo-band--green-soft { background: var(--green-soft); border-top-color: transparent; }
.isfo-band--brand { background: var(--brand); color: var(--on-brand); border-top-color: transparent; }
.isfo-band--brand h2, .isfo-band--brand h3, .isfo-band--brand .isfo-eyebrow, .isfo-band--brand .isfo-band__value { color: var(--on-brand); }
.isfo-band--brand .isfo-band__icon { background: var(--on-brand); color: var(--brand); }
.isfo-band--brand .isfo-band__intro > .isfo-btn--primary { background: var(--on-brand); color: var(--brand); }
.isfo-band__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .isfo-band__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); } }
.isfo-band__intro { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.isfo-band__head { display: flex; align-items: center; gap: var(--space-3); }
.isfo-band__icon { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: var(--radius-lg); background: var(--brand); color: var(--on-brand); }
.isfo-band__icon .isfo-icon { width: 28px; height: 28px; }
.isfo-band--green-soft .isfo-band__icon { background: var(--green); }
.isfo-band__intro h2 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.01em; }
@media (min-width: 600px) { .isfo-band__intro h2 { font-size: 30px; line-height: 36px; } }
.isfo-band__intro > p { font-size: 17px; line-height: 26px; max-width: 46ch; }
.isfo-band__figure { display: flex; align-items: baseline; gap: var(--space-2); padding-top: var(--space-1); }
.isfo-band__value { font: 700 40px/44px var(--font-display); color: var(--brand); font-variant-numeric: tabular-nums; }
.isfo-band--green-soft .isfo-band__value { color: var(--green); }
.isfo-band__label { font-size: 15px; line-height: 20px; font-weight: 600; }
.isfo-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }
.isfo-band__content { display: grid; gap: var(--space-3); min-width: 0; }
.isfo-band--brand .isfo-card { color: var(--ink); }
.isfo-band__more { justify-self: start; }
.isfo-band__media { margin: 0; display: grid; place-items: center; padding: var(--space-6); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.isfo-band__media img { width: 110px; height: 110px; border-radius: var(--radius-pill); }
.isfo-quote { margin: 0; font: 400 18px/28px var(--font-sans); color: var(--ink); border-left: 3px solid var(--green); padding-left: var(--space-4); }
.isfo-inline-form { display: grid; gap: var(--space-3); }
@media (min-width: 600px) { .isfo-inline-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .isfo-inline-form .isfo-btn { grid-column: 1 / -1; } }

/* Menu principal long (10 pages) : barre complète à partir de 1200px, bouton menu en dessous */
@media (min-width: 960px) and (max-width: 1199px) {
  .isfo-nav { display: none; }
  .isfo-menu-btn { display: inline-grid; }
  .isfo-menu-panel { display: block; }
  .isfo-menu-panel[hidden] { display: none; }
  .isfo-header__tools { margin-left: auto; }
}

/* Fichiers : boutons Aperçu + Télécharger (passent sous le titre sur petit écran) */
.isfo-edt { flex-wrap: wrap; }
.isfo-edt__actions { display: flex; gap: var(--space-1); flex: none; margin-left: auto; }
@media (max-width: 479px) { .isfo-edt__body { flex: 1 1 calc(100% - 56px); } .isfo-edt__actions { width: 100%; justify-content: flex-end; } }
/* Partager un document : menu des réseaux (details/summary) */
.isfo-share { position: relative; }
.isfo-share > summary { list-style: none; }
.isfo-share > summary::-webkit-details-marker { display: none; }
.isfo-share[open] > summary { background: var(--brand-soft); color: var(--brand); }
.isfo-share__panel { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 40; min-width: 200px; padding: var(--space-1); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); display: grid; }
.isfo-share__panel a, .isfo-share__panel button { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
.isfo-share__panel a:hover, .isfo-share__panel button:hover { background: var(--brand-soft); color: var(--brand); }
.isfo-share__panel button { border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: var(--space-1); }

/* Fenêtre d'aperçu (emplois du temps, documents) */
.isfo-viewer { width: min(100vw - 16px, 960px); height: min(100vh - 16px, 1100px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-100); color: var(--ink); box-shadow: var(--shadow-raised); }
.isfo-viewer[open] { display: flex; flex-direction: column; }
.isfo-viewer::backdrop { background: var(--ink); opacity: .6; }
.isfo-viewer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-200); border-bottom: 1px solid var(--line); }
.isfo-viewer__title { font: 600 16px/22px var(--font-sans); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 160px; }
.isfo-viewer__tools { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.isfo-viewer__body { flex: 1; overflow: auto; padding: var(--space-4); }
.isfo-viewer__status { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0 0 var(--space-2); text-align: center; }
.isfo-viewer__pages { display: grid; gap: var(--space-3); justify-items: center; }
.isfo-viewer__pages canvas, .isfo-viewer__pages img { display: block; max-width: none; background: var(--surface-200); box-shadow: var(--shadow-card); border-radius: var(--radius-sm); }

/* Pages libres (À propos…) : texte sur 80 % de la largeur à partir de la tablette */
.isfo-page-wide { width: 100%; margin: 0 auto; }
@media (min-width: 768px) { .isfo-page-wide { width: 80%; } }
.isfo-page-wide .isfo-card { padding: var(--space-6); }
@media (min-width: 960px) { .isfo-page-wide .isfo-card { padding: var(--space-8) var(--space-12); } .isfo-page-wide .isfo-prose { font-size: 17px; line-height: 28px; } }

/* Pied de page : adresse alignée sur son icône */
.isfo-footer__address { display: flex; align-items: flex-start; gap: var(--space-1); color: var(--ink-muted); }
.isfo-footer__address .isfo-icon { margin-top: 2px; }

.isfo-logo__img { object-fit: cover; }

/* Plan du site */
.isfo-sitemap { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.isfo-sitemap a { display: inline-flex; align-items: flex-start; gap: var(--space-1); min-height: 32px; color: var(--ink); text-decoration: none; }
.isfo-sitemap a .isfo-icon { margin-top: 3px; color: var(--green); }
.isfo-sitemap a:hover { color: var(--brand); text-decoration: underline; }