/* =========================================================================
   alterForge — Système de design (V4 — migration design system complète)
   --------------------------------------------------------------------------
   NOTE SUR LES VERSIONS (pour éviter toute confusion) :
   - Ce "V4" est la version ÉDITORIALE de la charte graphique (rare, humaine).
     V3 = sémantique couleur ; V4 = refonte design system (sidebar, composants af-*).
   - Le numéro qui s'incrémente à CHAQUE modif CSS/JS est ASSET_VERSION (lib/db.php),
     purement technique : il force le navigateur à recharger (cache-buster). Sans
     rapport avec ce commentaire. Les deux numéros sont indépendants, c'est normal.
   --------------------------------------------------------------------------
   - Tokens en custom properties dans :root
   - Convention BEM-light, préfixe `.af-`
   - Zéro dépendance, zéro inline style, JS séparé (voir app.js)
   - Couleurs sémantiques strictes :
       brand   (bordeaux)  → marque / nav / logo. JAMAIS sur une action.
       action  (teal)      → tous les boutons qui FONT quelque chose.
       info    (bleu)      → labels purement informatifs.
       danger  (rouge)     → suppression / destruction (discret).
       success (vert)      → présent, confirmé.
       warn    (ambre)     → retard, alerte légère.
   --------------------------------------------------------------------------
   ORGANISATION :
   1. Tokens (:root) et base
   2. Layout admin (sidebar, topbar) + composants du designer
   3. Compléments de migration alterForge (à partir de "MIGRATION alterForge")
      regroupés par page/usage.
   ========================================================================= */
   /* =====================================================================
   Correctif CSS — Alertes visuelles d'émargement
   À coller TOUT EN BAS de public_html/css/common.css
   Ce bloc surcharge l'ancien snippet sans modifier les composants partagés.
   ===================================================================== */
/* =========================================================================
   alterForge — correctif responsive socle admin v137
   -------------------------------------------------------------------------
   Objectif : utiliser toute la largeur disponible sur desktop / grand écran,
   sans refaire la version mobile et sans écraser common.css.

   À coller tout en bas de public_html/css/common.css.
   Puis incrémenter ASSET_VERSION à 137 dans public_html/lib/db.php.
   ========================================================================= */

/* 1) Le shell admin ne doit plus limiter artificiellement le contenu à 1240px.
   Les pages de pilotage, listes, banques, matières, librairie et alertes doivent
   exploiter la largeur disponible après la sidebar. */
:root {
  --af-content-max: none;
  --af-page-gutter-x: clamp(20px, 2.1vw, 44px);
  --af-page-gutter-y: clamp(24px, 2vw, 32px);
}

.af-col {
  min-width: 0;
  width: 100%;
}

.af-main {
  width: 100%;
  max-width: none !important;
  padding: var(--af-page-gutter-y) var(--af-page-gutter-x) 56px;
}

/* 2) Les grands blocs métier doivent suivre la largeur du main.
   On ne touche pas aux composants volontairement étroits comme .af-form simple,
   .af-sub ou les blocs de lecture. */
.af-titlebar,
.af-stats,
.af-tabs,
.af-summary,
.af-section--card,
.af-table,
.af-empty,
.af-flash {
  width: 100%;
  max-width: none;
}

/* 3) Les stats doivent s'adapter au nombre de cartes et à la largeur réelle.
   Cela évite les bandes trop resserrées ou les cartes bloquées en 4 colonnes. */
.af-stats {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* 4) Les formulaires larges restent lisibles et utilisent mieux l'espace. */
.af-form--wide {
  width: 100%;
  max-width: none;
}

.af-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.af-form-inline,
.af-form-inline--wide,
.af-inline-form {
  max-width: none;
}

.af-form-inline--wide .af-input--grow,
.af-form-inline .af-input--grow {
  min-width: 0;
  flex: 1 1 320px;
}

/* 5) Les tables ne doivent pas casser le layout : elles prennent la largeur
   disponible, mais peuvent scroller horizontalement si une variante possède
   beaucoup de colonnes. */
.af-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.af-row {
  min-width: 0;
}

.af-row > * {
  min-width: 0;
}

.af-row__name,
.af-muted {
  overflow-wrap: anywhere;
}

.af-row__actions,
.af-titlebar__actions,
.af-summary__actions {
  flex-wrap: wrap;
}

/* 6) Sur écran large, on garde une respiration correcte sans recréer une
   colonne vide fixe à droite. */
@media (min-width: 1600px) {
  :root {
    --af-page-gutter-x: clamp(36px, 3vw, 64px);
  }
}

/* 7) Responsive intermédiaire : pas une vraie version mobile, mais un layout
   qui se replie proprement sur laptop/tablette. */
@media (max-width: 1280px) {
  :root {
    --af-page-gutter-x: 28px;
    --af-page-gutter-y: 24px;
  }

  .af-section__head,
  .af-titlebar,
  .af-summary {
    gap: 16px;
  }
}

@media (max-width: 1080px) {
  :root {
    --af-page-gutter-x: 24px;
  }

  .af-top {
    flex-wrap: wrap;
    padding-left: var(--af-page-gutter-x);
    padding-right: var(--af-page-gutter-x);
  }

  .af-search {
    flex: 1 1 320px;
  }

  .af-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --af-page-gutter-x: 18px;
    --af-page-gutter-y: 20px;
  }

  .af-main {
    padding-bottom: 40px;
  }

  .af-titlebar,
  .af-section__head,
  .af-summary {
    flex-direction: column;
    align-items: stretch;
  }

  .af-titlebar__actions,
  .af-section__head .af-btn-primary,
  .af-section__head .af-btn-secondary,
  .af-summary__actions {
    justify-content: flex-start;
  }

  .af-search {
    order: 2;
    flex-basis: 100%;
  }

  .af-top__right {
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}


/* --- Topbar : pastille d'alerte globale ------------------------------- */
.af-top__right .af-att-alert-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 8px !important;
  min-height: 32px;
  padding: 6px 10px !important;
  border-radius: var(--af-r-pill);
  background: var(--af-danger-soft);
  border: 1px solid rgba(192, 57, 43, 0.28);
  color: var(--af-danger-ink);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.af-top__right .af-att-alert-badge:hover {
  background: #fff4f4;
  border-color: rgba(192, 57, 43, 0.42);
  color: var(--af-danger-ink);
}
.af-top__right .af-att-alert-badge svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.af-top__right .af-att-alert-badge__count {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--af-r-pill);
  background: var(--af-danger);
  color: var(--af-on-color);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
}
.af-top__right .af-att-alert-badge__label {
  display: inline-flex !important;
  align-items: center;
}

/* --- Page dédiée : respiration générale -------------------------------- */
.af-att-alerts-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.af-att-alerts-page .af-titlebar {
  margin-bottom: 4px;
}

/* --- Bandeau résumé ---------------------------------------------------- */
.af-att-alert-summary {
  margin-bottom: 0 !important;
  align-items: center;
}
.af-att-alert-summary .af-summary__main {
  flex: 0 0 auto;
}
.af-att-alert-summary__kpis {
  display: flex !important;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  flex: 1 1 440px;
  min-width: 280px;
}
.af-att-alert-kpi {
  min-width: 118px;
  padding: 0 22px;
  border-left: 1px solid rgba(192, 57, 43, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.af-summary--warn .af-att-alert-kpi {
  border-left-color: rgba(184, 134, 11, 0.22);
}
.af-att-alert-kpi strong {
  font-family: var(--af-font-serif);
  font-size: 23px;
  line-height: 1;
  font-weight: 500;
  color: var(--af-ink);
}
.af-att-alert-kpi span {
  font-size: 13px;
  color: var(--af-ink-2);
  white-space: nowrap;
}
.af-att-alert-summary .af-summary__actions {
  margin-left: auto;
}
.af-att-alert-summary .af-summary__actions .af-btn-ghost {
  white-space: nowrap;
}

/* --- Filtres : grille desktop plus compacte ---------------------------- */
.af-att-alert-filters {
  padding: 22px 24px !important;
}
.af-att-alert-filters__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 18px 20px !important;
  align-items: end;
}
.af-att-alert-filters__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.af-att-alert-filters .af-field {
  min-width: 0;
}
.af-att-alert-filters .af-select {
  width: 100%;
}

/* --- Table : correction des chevauchements de colonnes ------------------ */
.af-att-alert-table .af-row--attendance-alerts {
  grid-template-columns:
    minmax(105px, 0.75fr)
    minmax(260px, 2fr)
    minmax(105px, 0.75fr)
    minmax(130px, 0.85fr)
    minmax(150px, 0.9fr)
    minmax(120px, 0.75fr)
    minmax(130px, 0.75fr) !important;
  gap: 16px !important;
  align-items: center;
}
.af-att-alert-table .af-row--attendance-alerts > span {
  min-width: 0;
}
.af-alert-severity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
}
.af-alert-severity__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--af-r-pill);
  flex: 0 0 9px;
}
.af-alert-severity--critical { color: var(--af-danger-ink); }
.af-alert-severity--critical .af-alert-severity__dot { background: var(--af-danger); }
.af-alert-severity--warning { color: var(--af-warn-ink); }
.af-alert-severity--warning .af-alert-severity__dot { background: var(--af-warn); }

.af-att-alert-course,
.af-att-alert-time {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.af-att-alert-course strong,
.af-att-alert-time strong {
  display: block;
  max-width: 100%;
  color: var(--af-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-att-alert-course span,
.af-att-alert-course small,
.af-att-alert-time span,
.af-att-alert-muted {
  color: var(--af-ink-2);
  font-size: 13px;
}
.af-att-alert-course small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-att-alert-table .af-pill {
  max-width: 100%;
  white-space: nowrap;
}
.af-att-alert-table .af-row__actions {
  justify-content: flex-end;
}
.af-att-alert-table .af-row__actions .af-btn-secondary {
  justify-content: center;
  min-width: 112px;
  white-space: nowrap;
}
.af-att-alert-empty {
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-xl);
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .af-att-alert-filters__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .af-att-alert-table .af-row--attendance-alerts {
    grid-template-columns:
      minmax(100px, 0.8fr)
      minmax(240px, 2fr)
      minmax(125px, 0.9fr)
      minmax(145px, 1fr)
      minmax(120px, 0.8fr)
      minmax(126px, 0.8fr) !important;
  }
  .af-att-alert-table .af-row--attendance-alerts > span:nth-child(3) {
    display: none;
  }
}

@media (max-width: 900px) {
  .af-top__right .af-att-alert-badge__label {
    display: none !important;
  }
  .af-att-alert-summary__kpis {
    flex-basis: 100%;
  }
  .af-att-alert-summary .af-summary__actions {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .af-att-alert-filters__grid {
    grid-template-columns: 1fr;
  }
  .af-att-alert-kpi {
    min-width: 50%;
    padding: 10px 14px;
    border-left: 0;
    border-top: 1px solid rgba(192, 57, 43, 0.14);
  }
  .af-att-alert-table .af-row--attendance-alerts {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start;
  }
  .af-att-alert-table .af-row--attendance-alerts.af-row--head {
    display: none;
  }
  .af-att-alert-table .af-row--attendance-alerts > span:nth-child(3) {
    display: inline-flex;
  }
  .af-att-alert-table .af-row__actions {
    justify-content: flex-start;
  }
}

/* ---------- 1. Reset minimal -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- 2. Design tokens -------------------------------------------- */
:root {
  /* Fonds neutres (papier chaud — pas de sens sémantique) */
  --af-bg:            #F6F3EE;
  --af-surface:       #FFFFFF;
  --af-surface-soft:  #FBF9F5;
  --af-surface-mute:  #F4F0E8;

  /* Encres */
  --af-ink:           #1A1816;
  --af-ink-2:         #4A4641;
  --af-ink-3:         #807A72;
  --af-on-color:      #FFFFFF;

  /* Lignes */
  --af-line:          #E7E2DA;
  --af-line-2:        #EFEBE3;

  /* —— Couleurs sémantiques —————————————————————————————— */
  /* Brand — bordeaux (identité, nav, logo) */
  --af-brand:         #9B2C2C;
  --af-brand-ink:     #7A2222;
  --af-brand-soft:    #F4E6E6;

  /* Action — teal (boutons, CTA, "gérer", "créer"...) */
  --af-action:        #0D9488;
  --af-action-hover:  #0B7C72;
  --af-action-soft:   #E6F5F3;

  /* Information — bleu froid (codes, labels neutres) */
  --af-info:          #1E6091;
  --af-info-ink:      #154A70;
  --af-info-soft:     #E8F0F6;

  /* Danger — rouge (suppression) */
  --af-danger:        #C0392B;
  --af-danger-ink:    #9A2C21;
  --af-danger-soft:   #FDECEC;

  /* Succès — vert (présent, confirmé) */
  --af-success:       #2D6A4F;
  --af-success-ink:   #1F4D38;
  --af-success-soft:  #EEF6ED;

  /* Avertissement — ambre */
  --af-warn:          #B8860B;
  --af-warn-ink:      #8C6608;
  --af-warn-soft:     #FBF3E0;

  /* Neutre (statut fermé, badge gris) */
  --af-neutral-soft:  #EEEAE3;
  --af-neutral-ink:   #6C645A;

  /* Typographie */
  --af-font-sans:   'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --af-font-serif:  'Newsreader', 'Source Serif Pro', Georgia, serif;
  --af-font-mono:   'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rayons */
  --af-r-sm: 6px;
  --af-r-md: 8px;
  --af-r-lg: 10px;
  --af-r-xl: 14px;
  --af-r-pill: 999px;

  /* Élévations */
  --af-shadow-sm:  0 1px 0 rgba(0, 0, 0, 0.04);
  --af-shadow-cta: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 16px -8px rgba(13, 148, 136, 0.55);
  --af-shadow-pop: 0 10px 28px -10px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);

  /* Mesures */
  --af-side-w: 240px;
  --af-content-max: 1240px;
}

/* ---------- 3. Page shell ----------------------------------------------- */
body {
  background: var(--af-bg);
  color: var(--af-ink);
  font-family: var(--af-font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.af-app {
  display: grid;
  grid-template-columns: var(--af-side-w) 1fr;
  min-height: 100vh;
}

/* ---------- 4. Sidebar -------------------------------------------------- */
.af-side {
  background: var(--af-surface);
  border-right: 1px solid var(--af-line);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.af-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 14px;
  border-bottom: 1px solid var(--af-line-2);
}
.af-brand__mark { color: var(--af-brand); display: flex; }
.af-brand__word {
  font-family: var(--af-font-serif);
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--af-ink);
}
.af-brand__word b { font-weight: 600; }

.af-side__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--af-ink-3);
  padding: 14px 10px 6px;
}
.af-nav { display: flex; flex-direction: column; gap: 2px; }
.af-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--af-r-md);
  color: var(--af-ink-2);
  font-size: 13.5px;
  font-weight: 500;
}
.af-nav__item:hover { background: var(--af-bg); color: var(--af-ink); }
.af-nav__item--active {
  background: var(--af-brand-soft);
  color: var(--af-brand-ink);
}
.af-nav__item--active::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--af-brand);
  transform: translateY(-50%);
}

/* ---------- 5. Top bar -------------------------------------------------- */
.af-col { display: flex; flex-direction: column; min-width: 0; }
.af-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  background: var(--af-surface);
  border-bottom: 1px solid var(--af-line);
}
.af-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 420px;
  padding: 8px 12px;
  background: var(--af-bg);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-lg);
  color: var(--af-ink-3);
}
.af-search input {
  border: 0;
  outline: 0;
  background: transparent;
  flex: 1;
  font-size: 13.5px;
  color: var(--af-ink);
}
.af-kbd {
  font-family: var(--af-font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: 5px;
  color: var(--af-ink-3);
}
.af-top__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.af-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-md);
  color: var(--af-ink-2);
  font-size: 12.5px;
  font-weight: 500;
}
.af-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 4px 4px;
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-pill);
}
.af-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--af-brand);
  color: var(--af-on-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.af-user__name { display: flex; flex-direction: column; line-height: 1.15; }
.af-user__name strong { font-size: 13px; font-weight: 500; color: var(--af-ink); }
.af-user__name span  { font-size: 11px; color: var(--af-ink-3); }

/* ---------- 6. Layout main --------------------------------------------- */
.af-main { padding: 28px 40px 48px; max-width: var(--af-content-max); width: 100%; }
.af-titlebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.af-titlebar__text { min-width: 0; flex: 1; }
.af-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.af-h1 {
  font-family: var(--af-font-serif);
  font-size: 34px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.4px;
  color: var(--af-ink);
}
.af-h2 {
  font-family: var(--af-font-serif);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
  color: var(--af-ink);
}
.af-sub {
  margin: 6px 0 0;
  color: var(--af-ink-3);
  font-size: 13.5px;
  max-width: 560px;
}
.af-crumbs {
  font-size: 12.5px;
  color: var(--af-ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.af-crumbs a:hover { color: var(--af-ink); text-decoration: underline; }
.af-crumbs__sep { color: var(--af-ink-3); opacity: 0.5; }

/* ---------- 7. Buttons (système complet) ------------------------------- */
.af-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--af-r-md);
  font-size: 13.5px;
  font-weight: 500;
  background: transparent;
  color: var(--af-ink);
  line-height: 1.2;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.af-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.af-btn-primary {
  background: var(--af-action);
  color: var(--af-on-color);
  padding: 10px 16px;
  border-radius: var(--af-r-lg);
  font-size: 14px;
  font-weight: 500;
  border: 0;
  box-shadow: var(--af-shadow-cta);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.af-btn-primary:hover { background: var(--af-action-hover); }

.af-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--af-action-soft);
  color: var(--af-action-hover);
  border: 1px solid transparent;
  border-radius: var(--af-r-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.af-btn-secondary:hover {
  background: var(--af-action);
  color: var(--af-on-color);
}

.af-btn-ghost {
  padding: 7px 12px;
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-md);
  color: var(--af-ink-2);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.af-btn-ghost:hover { color: var(--af-ink); border-color: var(--af-ink-3); }

.af-btn-danger {
  background: var(--af-danger-soft);
  color: var(--af-danger);
  border: 1px solid transparent;
  padding: 7px 12px;
  border-radius: var(--af-r-md);
  font-size: 13px;
  font-weight: 500;
}
.af-btn-danger:hover { background: var(--af-danger); color: var(--af-on-color); }

/* Icon-only button (32×32, neutre par défaut) */
.af-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-md);
  color: var(--af-ink-3);
  cursor: pointer;
}
.af-icon-btn:hover { color: var(--af-ink); border-color: var(--af-ink-3); }
.af-icon-btn--ghost { background: transparent; border-color: transparent; }
.af-icon-btn--ghost:hover { background: var(--af-bg); }
.af-icon-btn--danger { color: var(--af-danger); }
.af-icon-btn--danger:hover { background: var(--af-danger-soft); border-color: var(--af-danger-soft); color: var(--af-danger-ink); }

/* ---------- 8. Stat strip ---------------------------------------------- */
.af-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.af-stat {
  padding: 16px 18px;
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: 12px;
}
.af-stat__k { font-family: var(--af-font-serif); font-size: 28px; font-weight: 500; line-height: 1; color: var(--af-ink); }
.af-stat__l { font-size: 12.5px; font-weight: 500; color: var(--af-ink-2); margin-top: 8px; }
.af-stat__s { font-size: 11.5px; color: var(--af-ink-3); margin-top: 2px; }

/* ---------- 9. Tabs ---------------------------------------------------- */
/* 9a. Filter tabs (segmented pill — pour filtrer une liste) */
.af-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-lg);
  margin-bottom: 14px;
}
.af-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--af-ink-2);
  font-size: 13px;
  font-weight: 500;
}
.af-tab:hover { color: var(--af-ink); }
.af-tab--active { background: var(--af-ink); color: var(--af-on-color); }
.af-tab__count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--af-r-pill);
  background: rgba(0, 0, 0, 0.06);
}
.af-tab--active .af-tab__count { background: rgba(255, 255, 255, 0.18); color: inherit; }
.af-tools { margin-left: auto; display: flex; gap: 8px; }

/* 9b. Page tabs (underline — pour naviguer dans une page de détail) */
.af-tabs-page {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--af-line);
  margin-bottom: 22px;
}
.af-tab-page {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  color: var(--af-ink-3);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.af-tab-page:hover { color: var(--af-ink-2); }
.af-tab-page--active {
  color: var(--af-ink);
  border-bottom-color: var(--af-ink);
}
.af-tab-page__count {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--af-r-pill);
  background: var(--af-surface-mute);
  color: var(--af-ink-2);
}

/* ---------- 10. Table -------------------------------------------------- */
.af-table {
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-xl);
  overflow: hidden;
}
.af-row {
  display: grid;
  grid-template-columns: 130px 1.4fr 150px 120px 90px 120px 110px;
  align-items: center;
  padding: 14px 18px;
  gap: 14px;
  font-size: 14px;
}
.af-row + .af-row { border-top: 1px solid var(--af-line-2); }
.af-row--head {
  padding: 11px 18px;
  background: var(--af-surface-soft);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--af-ink-3);
}
.af-row__name { font-weight: 500; color: var(--af-ink); }
.af-row__teams { color: var(--af-ink-2); display: inline-flex; align-items: center; gap: 6px; }
.af-row__updated { color: var(--af-ink-3); font-size: 13px; }
.af-row__actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

/* Variantes de grille pour autres tables */
.af-row--students {
  grid-template-columns: 40px minmax(160px, 1.4fr) minmax(180px, 1fr) minmax(105px, .7fr) minmax(90px, .65fr) 72px 120px;
}

/* ---------- 11. Code / theme / pills ----------------------------------- */
.af-code {
  font-family: var(--af-font-mono);
  font-size: 12.5px;
  color: var(--af-ink);
  background: var(--af-surface-mute);
  padding: 3px 7px;
  border-radius: var(--af-r-sm);
  border: 1px solid var(--af-line);
}
.af-theme {
  font-family: var(--af-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.4px;
  color: var(--af-info);
  text-transform: uppercase;
}

.af-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--af-r-pill);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.af-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}
.af-pill--open    { background: var(--af-success-soft); color: var(--af-success); }
.af-pill--draft   { background: var(--af-warn-soft);    color: var(--af-warn-ink); }
.af-pill--closed  { background: var(--af-neutral-soft); color: var(--af-neutral-ink); }
.af-pill--info    { background: var(--af-info-soft);    color: var(--af-info); }
.af-pill--present { background: var(--af-success-soft); color: var(--af-success); }
.af-pill--absent  { background: var(--af-danger-soft);  color: var(--af-danger); }
.af-pill--late    { background: var(--af-warn-soft);    color: var(--af-warn-ink); }

/* ---------- 12. Detail-page header ------------------------------------- */
.af-detail-header {
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-xl);
  padding: 24px 26px;
  margin-bottom: 22px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.af-detail-header__main { flex: 1; min-width: 0; }
.af-detail-header__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Editable title (h1 + bouton crayon ; passe en input quand actif) */
.af-editable {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.af-editable__title {
  font-family: var(--af-font-serif);
  font-size: 32px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.4px;
  color: var(--af-ink);
  line-height: 1.15;
}
.af-editable__edit {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--af-r-md);
  color: var(--af-ink-3);
  cursor: pointer;
  flex-shrink: 0;
}
.af-editable__edit:hover { color: var(--af-action); background: var(--af-action-soft); }
.af-editable__input {
  font-family: var(--af-font-serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--af-ink);
  background: var(--af-surface);
  border: 1px solid var(--af-action);
  border-radius: var(--af-r-md);
  padding: 4px 10px;
  width: 100%;
  outline: none;
  box-shadow: 0 0 0 3px var(--af-action-soft);
}
.af-editable--editing .af-editable__title,
.af-editable--editing .af-editable__edit { display: none; }
.af-editable:not(.af-editable--editing) .af-editable__input,
.af-editable:not(.af-editable--editing) .af-editable__save,
.af-editable:not(.af-editable--editing) .af-editable__cancel { display: none; }
.af-editable__save, .af-editable__cancel {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--af-r-sm);
  border: 1px solid var(--af-line);
  background: var(--af-surface);
  color: var(--af-ink-2);
  cursor: pointer;
  flex-shrink: 0;
}
.af-editable__save { background: var(--af-action); color: var(--af-on-color); border-color: var(--af-action); }
.af-editable__save:hover { background: var(--af-action-hover); }

/* Metadata row (code · thème · dates · statut) */
.af-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--af-ink-2);
  font-size: 13px;
}
.af-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.af-meta__sep { color: var(--af-ink-3); opacity: 0.5; }
.af-meta__icon { color: var(--af-ink-3); display: inline-flex; }

/* Définition list de l'en-tête de détail (alternative à .af-meta) */
.af-defs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px 24px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--af-line-2);
}
.af-defs__item dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--af-ink-3);
  margin-bottom: 4px;
}
.af-defs__item dd {
  margin: 0;
  font-size: 14px;
  color: var(--af-ink);
  font-weight: 500;
}

/* ---------- 13. Section / Card ----------------------------------------- */
.af-section { margin-bottom: 28px; }
.af-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.af-section__title {
  font-family: var(--af-font-serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.2px;
}
.af-section__sub { color: var(--af-ink-3); font-size: 13px; margin: 4px 0 0; }
.af-card {
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-xl);
  padding: 22px 24px;
}

/* ---------- 14. Empty state ------------------------------------------- */
.af-empty {
  background: var(--af-surface);
  border: 1px dashed var(--af-line);
  border-radius: var(--af-r-xl);
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.af-empty__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--af-bg);
  border-radius: var(--af-r-pill);
  color: var(--af-ink-3);
  margin-bottom: 6px;
}
.af-empty__title {
  font-family: var(--af-font-serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: var(--af-ink);
}
.af-empty__sub {
  margin: 0 0 14px;
  color: var(--af-ink-3);
  font-size: 13.5px;
  max-width: 360px;
}

/* ---------- 15. Formulaires (système générique) ----------------------- */
.af-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}
.af-form--wide { max-width: 100%; }

.af-form__section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--af-line-2);
}
.af-form__section:last-of-type { border-bottom: 0; padding-bottom: 0; }
.af-form__section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--af-ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
}
.af-form__section-sub {
  font-size: 13px;
  color: var(--af-ink-3);
  margin: 0 0 8px;
}

/* Grille 2 colonnes pour formulaire dense */
.af-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.af-form-grid--full { grid-column: 1 / -1; }

/* Field : groupe label + input + help/error */
.af-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.af-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--af-ink-2);
}
.af-field--required .af-label::after {
  content: ' *';
  color: var(--af-danger);
}
.af-help {
  font-size: 12.5px;
  color: var(--af-ink-3);
  margin: 0;
}
.af-error {
  font-size: 12.5px;
  color: var(--af-danger);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Inputs / select / textarea */
.af-input,
.af-select,
.af-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-md);
  font-size: 14px;
  color: var(--af-ink);
  font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.af-input::placeholder,
.af-textarea::placeholder { color: var(--af-ink-3); }
.af-input:hover,
.af-select:hover,
.af-textarea:hover { border-color: var(--af-ink-3); }
.af-input:focus,
.af-select:focus,
.af-textarea:focus {
  outline: none;
  border-color: var(--af-action);
  box-shadow: 0 0 0 3px var(--af-action-soft);
}
.af-textarea { min-height: 96px; resize: vertical; }
.af-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%23807A72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='m6 8 4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* État erreur — appliqué au .af-field parent */
.af-field--error .af-input,
.af-field--error .af-select,
.af-field--error .af-textarea {
  border-color: var(--af-danger);
  background: var(--af-danger-soft);
}
.af-field--error .af-input:focus,
.af-field--error .af-select:focus,
.af-field--error .af-textarea:focus {
  box-shadow: 0 0 0 3px var(--af-danger-soft);
}

/* Hint inline à droite du label (ex : "Optionnel") */
.af-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.af-label-row .af-help { font-size: 11.5px; }

/* Form actions (bottom bar de boutons) */
.af-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}
.af-form-actions__spacer { margin-left: auto; }

/* Checkbox + radio (rendu uniforme léger) */
.af-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--af-ink-2);
  cursor: pointer;
}
.af-check input { accent-color: var(--af-action); width: 16px; height: 16px; }

/* ---------- 16. Confirmation popover (delete) ------------------------- */
.af-confirm {
  position: absolute;
  z-index: 30;
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-lg);
  box-shadow: var(--af-shadow-pop);
  padding: 14px 14px 12px;
  width: 280px;
}
.af-confirm__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--af-ink);
  margin: 0 0 4px;
}
.af-confirm__text { font-size: 12.5px; color: var(--af-ink-3); margin: 0 0 12px; }
.af-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- 17. Avatars (liste personnes) ----------------------------- */
.af-avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--af-surface-mute);
  color: var(--af-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

/* ---------- 18. Focus visible (a11y) ---------------------------------- */
:where(button, a, [role="tab"], [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--af-action);
  outline-offset: 2px;
  border-radius: var(--af-r-md);
}
.af-input:focus-visible,
.af-select:focus-visible,
.af-textarea:focus-visible { outline: none; } /* géré via box-shadow */

/* ---------- 18b. Page sommaire (handoff/index.html) ------------------ */
.af-handoff-main { max-width: 920px; margin: 0 auto; }
.af-link-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.af-link-list .af-btn-secondary { justify-content: flex-start; }
.af-file-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--af-font-mono); font-size: 13px; }

/* ---------- 19. Utilitaires accessibilité ---------------------------- */
.af-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 20. Responsive ------------------------------------------- */
@media (max-width: 1080px) {
  .af-app { grid-template-columns: 1fr; }
  .af-side { display: none; } /* JS : transformer en drawer */
  .af-burger { display: inline-flex !important; } /* visible seulement ici */
  /* Sidebar en drawer : s'ouvre par-dessus le contenu quand data-open */
  .af-side[data-open] {
    display: flex; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: var(--af-side-w); box-shadow: 0 0 40px rgba(0,0,0,.18);
  }
  .af-stats { grid-template-columns: repeat(2, 1fr); }
  .af-row { grid-template-columns: 110px 1fr 110px 100px; gap: 10px; }
  .af-row__theme, .af-row__teams, .af-row__updated { display: none; }
  .af-form-grid { grid-template-columns: 1fr; }
  .af-detail-header { flex-direction: column; }
}
@media (max-width: 640px) {
  .af-main { padding: 20px; }
  .af-titlebar { flex-direction: column; align-items: flex-start; }
  .af-stats { grid-template-columns: 1fr 1fr; }
  .af-editable__title, .af-editable__input { font-size: 26px; }
}

/* █████████████████████████████████████████████████████████████████████████
   MIGRATION alterForge — compléments ajoutés lors du passage au design system.
   Classes regroupées par page/usage. Ajoutées au fil de la migration des pages
   (dashboard, classes, sessions, feedback, émargement, projection, étudiant).
   █████████████████████████████████████████████████████████████████████████ */

/* ===== Compléments alterForge (ajouts à l'intégration) ===== */
/* Message flash (confirmation d'action) */
.af-flash{background:var(--af-success-soft);color:var(--af-success-ink);border:1px solid var(--af-success);
  border-radius:var(--af-r-md);padding:10px 14px;margin:0 0 18px;font-size:14px;}
/* Titre de carte */
.af-card__title{font-family:var(--af-font-serif);font-size:18px;margin:0 0 14px;color:var(--af-ink);}
/* Formulaire en ligne (champs + bouton sur une rangée) */
.af-form-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
/* Texte discret */
.af-muted{color:var(--af-ink-3);}
/* Grille table : référentiel modules (Code, Intitulé, Action) */
.af-row--modules{grid-template-columns:160px 1fr 90px;}
/* Grille table : liste des classes (Nom, Étudiants, Action) */
.af-row--classes{grid-template-columns:1.6fr 120px 200px;}

/* ===== Impression (feuille d'émargement) ===== */
@media print {
  .af-side, .af-top, .af-noprint { display: none !important; }
  .af-app { grid-template-columns: 1fr !important; }
  .af-col { display: block !important; }
  .af-main { padding: 0 !important; }
  body { background: #fff !important; }
  .af-table, .af-row { box-shadow: none !important; border-color: #ccc !important; }
}
.af-sig-mini { height: 40px; }
/* Grille feuille d'émargement (créneau) : Nom, Prénom, Statut, Signature, Heure, [action] */
.af-row--sheet { grid-template-columns: 1.2fr 1.2fr 100px 140px 70px 130px; }
.af-row--slots { grid-template-columns: 1.4fr 1fr 130px 110px 80px 110px 110px; }

/* Bouton burger : masqué par défaut (grand écran), affiché en responsive (voir @media 1080px) */
.af-burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--af-line);border-radius:var(--af-r-md);background:var(--af-surface);
  color:var(--af-ink-2);cursor:pointer;}
.af-burger:hover{background:var(--af-surface-soft);}

/* ===== Page gestion de session ===== */
/* Bloc équipe */
.af-team-block{border:1px solid var(--af-line);border-radius:var(--af-r-lg);padding:14px 16px;margin:0 0 14px;background:var(--af-surface);}
.af-team-block__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.af-team-block__actions{display:flex;gap:6px;align-items:center;}
/* Liste de membres / animateurs */
.af-members{list-style:none;margin:8px 0 0;padding:0;}
.af-members__item{padding:10px 0;border-top:1px dashed var(--af-line-2);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.af-member-edit summary{cursor:pointer;color:var(--af-action);font-size:13px;}
/* Carte danger */
.af-card--danger{border-color:var(--af-danger-soft);}
/* Modale (QR) */
.af-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;align-items:center;justify-content:center;display:flex;}
.af-modal{background:var(--af-surface);border-radius:var(--af-r-xl);padding:24px;text-align:center;max-width:360px;}
/* Message flash erreur (rouge) */
.af-flash--error{background:var(--af-danger-soft);color:var(--af-danger-ink);border-color:var(--af-danger);}

/* ===== Page bugs (suivi des signalements) ===== */
.af-bug-filters{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 18px;}
.af-bug-filters a{font-size:14px;text-decoration:none;color:var(--af-ink-3);}
.af-bug-filters a.on{color:var(--af-action);font-weight:700;}
.af-bug{border:1px solid var(--af-line);border-radius:var(--af-r-lg);padding:16px;margin:12px 0;background:var(--af-surface);}
.af-bug__sev{display:inline-block;padding:2px 10px;border-radius:var(--af-r-pill);font-size:12px;color:#fff;}
.af-bug__meta{font-size:12px;color:var(--af-ink-3);margin:6px 0;}
.af-bug pre{background:var(--af-surface-mute);padding:8px;border-radius:6px;overflow:auto;font-size:12px;max-height:200px;}
.af-bug details summary{cursor:pointer;color:var(--af-action);font-size:13px;margin-top:6px;}

/* ===== Page feedback (critères + notes) ===== */
.af-subject{border:1px solid var(--af-line);border-radius:var(--af-r-lg);padding:14px 16px;margin:12px 0;background:var(--af-surface);}
.af-crit-table{width:100%;border-collapse:collapse;}
.af-crit-table td{padding:4px 6px;}
.af-crit-table th{padding:4px 6px;text-align:left;font-size:13px;color:var(--af-ink-3);font-weight:600;}
/* Grille créneaux émargement session (Label, Date, Mode, Présents, Ouvert, Action) */
.af-row--slots2{grid-template-columns:1.4fr 130px 110px 80px 110px 140px;}
/* Barre projection : grouper langue + imprimer à droite */
.af-qr-bar__right{display:flex;align-items:center;gap:16px;}

/* Bibliothèque de grilles (modèles) dans feedback.php */
.af-tpl-bar{margin-top:18px;padding-top:16px;border-top:1px dashed var(--af-line);display:flex;flex-direction:column;gap:12px;}
.af-tpl-load,.af-tpl-save{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.af-tpl-bar label{font-size:13px;}

/* Évaluations (feedback.php) : en-tête de carte avec action + champs étiquetés */
.af-card__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px;}
.af-card__head .af-card__title{margin:0;}
.af-field-mini{display:flex;flex-direction:column;gap:2px;font-size:12px;}
.af-field-mini span{font-size:11px;}

/* Liste des évaluations (feedback.php) : nom · type · date · notes · actions */
.af-row--evals{grid-template-columns:1.6fr 150px 120px 80px 160px;}

/* Formulaire vertical (création d'évaluation, etc.) */
.af-stack{display:flex;flex-direction:column;gap:14px;max-width:520px;}
.af-stack .af-label{display:flex;flex-direction:column;gap:4px;font-weight:500;}


/* La ligne dépliée (mise en avant) */
.af-row--att.af-row--editing { background: var(--af-surface-soft); }
.af-row--editing .af-att-edit { display: grid; }

@media (max-width: 1080px) {
  .af-row--att { grid-template-columns: 1.4fr 120px 90px 150px; }
  .af-row--att .af-att-sig, .af-row--att .af-att-col-sig { display: none; }
  .af-att-summary { grid-template-columns: auto 1fr; }
  .af-att-summary__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 720px) {
  .af-att-edit { grid-template-columns: 1fr; align-items: stretch; }
  .af-att-edit__actions { justify-content: flex-end; }
}
/* =====================================================================
   alterForge — Correctif layout alertes émargement / absences v135
   À coller TOUT EN BAS de public_html/css/common.css
   Objectif : stabiliser le bandeau résumé après ajout du KPI
   "absences à statuer" et corriger l'affichage topbar/table.
   ===================================================================== */

/* --- Topbar : sécurise l'affichage de la pastille --------------------- */
.af-top .af-att-alert-badge,
.af-top__right .af-att-alert-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 7px !important;
  min-height: 32px;
  padding: 6px 10px !important;
  border-radius: var(--af-r-pill);
  background: var(--af-danger-soft);
  border: 1px solid rgba(192, 57, 43, 0.28);
  color: var(--af-danger-ink, var(--af-danger));
  font-size: 12.5px;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.af-top .af-att-alert-badge:hover,
.af-top__right .af-att-alert-badge:hover {
  background: #fff4f4;
  border-color: rgba(192, 57, 43, 0.42);
  color: var(--af-danger-ink, var(--af-danger));
}
.af-top .af-att-alert-badge svg,
.af-top__right .af-att-alert-badge svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.af-top .af-att-alert-badge__count,
.af-top__right .af-att-alert-badge__count {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--af-r-pill);
  background: var(--af-danger);
  color: var(--af-on-color, #fff);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
}
.af-top .af-att-alert-badge__label,
.af-top__right .af-att-alert-badge__label {
  display: inline-flex !important;
  align-items: center;
}

/* --- Bandeau résumé : passage en grille robuste ----------------------- */
.af-att-alert-summary.af-summary,
.af-summary.af-att-alert-summary {
  display: grid !important;
  grid-template-columns: minmax(255px, 0.95fr) minmax(0, 2.1fr) auto;
  column-gap: 24px;
  row-gap: 16px;
  align-items: center;
  padding: 20px 28px !important;
}

.af-att-alert-summary .af-summary__main {
  min-width: 0;
  width: 100%;
  padding-right: 24px;
  border-right: 1px solid rgba(192, 57, 43, 0.18);
}
.af-summary--warn.af-att-alert-summary .af-summary__main {
  border-right-color: rgba(184, 134, 11, 0.20);
}
.af-att-alert-summary .af-summary__big {
  line-height: 1;
}
.af-att-alert-summary .af-summary__text {
  min-width: 0;
}
.af-att-alert-summary .af-summary__title,
.af-att-alert-summary .af-summary__breakdown {
  max-width: 100%;
}

.af-att-alert-summary__kpis {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 !important;
  flex: none !important;
  flex-basis: auto !important;
  width: 100%;
  min-width: 0;
}
.af-att-alert-kpi {
  min-width: 0 !important;
  padding: 0 14px !important;
  border-left: 1px solid rgba(192, 57, 43, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.af-summary--warn .af-att-alert-kpi {
  border-left-color: rgba(184, 134, 11, 0.20);
}
.af-att-alert-kpi:first-child {
  border-left: 0;
}
.af-att-alert-kpi strong {
  display: block;
  font-family: var(--af-font-serif);
  font-size: 24px;
  line-height: 1;
  font-weight: 500;
  color: var(--af-ink);
}
.af-att-alert-kpi span {
  display: block;
  color: var(--af-ink-2);
  font-size: 13px;
  line-height: 1.25;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.af-att-alert-kpi--absence strong {
  color: var(--af-warn);
}
.af-att-alert-kpi--absence span {
  color: var(--af-warn-ink, var(--af-warn));
}
.af-att-alert-summary .af-summary__actions {
  margin-left: 0 !important;
  justify-self: end;
  align-self: center;
  min-width: max-content;
}
.af-att-alert-summary .af-summary__actions .af-btn-ghost {
  white-space: nowrap;
}

/* --- Table alertes : évite les collisions entre badge et rappel -------- */
.af-att-alert-table .af-row--attendance-alerts {
  grid-template-columns:
    minmax(110px, 0.75fr)
    minmax(280px, 2fr)
    minmax(110px, 0.75fr)
    minmax(135px, 0.85fr)
    minmax(150px, 0.9fr)
    minmax(125px, 0.8fr)
    minmax(130px, 0.75fr) !important;
  gap: 18px !important;
  align-items: center;
}
.af-att-alert-table .af-row--attendance-alerts > span {
  min-width: 0;
}
.af-att-alert-table .af-pill {
  max-width: 100%;
  white-space: nowrap;
}
.af-att-alert-table .af-att-alert-muted {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.af-att-alert-table .af-row__actions {
  justify-content: flex-end;
}
.af-att-alert-table .af-row__actions .af-btn-secondary {
  min-width: 112px;
  justify-content: center;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

/* --- Responsive résumé ------------------------------------------------- */
@media (max-width: 1240px) {
  .af-att-alert-summary.af-summary,
  .af-summary.af-att-alert-summary {
    grid-template-columns: 1fr;
  }
  .af-att-alert-summary .af-summary__main {
    padding-right: 0;
    border-right: 0;
  }
  .af-att-alert-summary .af-summary__actions {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .af-top .af-att-alert-badge__label,
  .af-top__right .af-att-alert-badge__label {
    display: none !important;
  }
  .af-att-alert-summary__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .af-att-alert-kpi {
    padding: 10px 14px !important;
    border-left: 0;
    border-top: 1px solid rgba(192, 57, 43, 0.14);
  }
}

@media (max-width: 560px) {
  .af-att-alert-summary.af-summary,
  .af-summary.af-att-alert-summary {
    padding: 18px !important;
  }
  .af-att-alert-summary__kpis {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   AF GLOBAL STYLE PASS — 2026-06-16
   --------------------------------------------------------------------------
   Objectif : common.css redevient le point d'entrée CSS stable de la plateforme.
   Les composants historiquement chargés à part restent disponibles dans /css/components,
   mais leurs règles utiles sont consolidées ici pour éviter les oublis de chargement.
   ========================================================================== */


/* ---- consolidated from css/components/af-pill.css ---- */
/* ====================================================================
   css/components/af-pill.css — Composant « pastille de statut ».
   Déplacé depuis common.css SANS changement visuel (mêmes tokens).
   Règle : ce fichier ne style QUE le préfixe .af-pill. Rien d'autre.
   ==================================================================== */

.af-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--af-r-pill);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.af-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}
/* Variante sans pastille (nouvelle, additive — n'affecte pas l'existant). */
.af-pill--no-dot::before { display: none; }

.af-pill--open    { background: var(--af-success-soft); color: var(--af-success); }
.af-pill--draft   { background: var(--af-warn-soft);    color: var(--af-warn-ink); }
.af-pill--closed  { background: var(--af-neutral-soft); color: var(--af-neutral-ink); }
.af-pill--info    { background: var(--af-info-soft);    color: var(--af-info); }
.af-pill--present { background: var(--af-success-soft); color: var(--af-success); }
.af-pill--absent  { background: var(--af-danger-soft);  color: var(--af-danger); }
.af-pill--late    { background: var(--af-warn-soft);    color: var(--af-warn-ink); }
.af-pill--warn    { background: var(--af-warn-soft);    color: var(--af-warn-ink); }

/* ---- consolidated from css/components/af-card.css ---- */
/* ====================================================================
   css/components/af-card.css — Composant « carte conteneur ».
   Déplacé depuis common.css SANS changement visuel (mêmes tokens).
   Règle : ce fichier ne style QUE le préfixe .af-card. Rien d'autre.
   ==================================================================== */

.af-card {
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-xl);
  padding: 22px 24px;
}
.af-card--danger { border-color: var(--af-danger-soft); }

.af-card__title {
  font-family: var(--af-font-serif);
  font-size: 18px;
  margin: 0 0 14px;
  color: var(--af-ink);
}

.af-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.af-card__head .af-card__title { margin: 0; }

/* ---- consolidated from css/components/af-confirm.css ---- */
/* ====================================================================
   css/components/af-confirm.css — Popover de confirmation (interactif).
   Ne style QUE le prefixe .af-confirm. Rien d'autre.
   ==================================================================== */

/* x-cloak global (utile pour d'autres composants ; le popover ne s'en sert plus). */
[x-cloak] { display: none !important; }

.af-confirm-wrap { position: relative; display: inline-block; }
.af-confirm__form { display: inline; }

/* Fond transparent plein ecran : capte le clic exterieur pour fermer.
   Remplace @click.outside (qui posait probleme avec x-cloak). */
.af-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: transparent;
}

.af-confirm {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  background: var(--af-surface);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-lg);
  box-shadow: var(--af-shadow-pop);
  padding: 14px 14px 12px;
  width: 280px;
}
.af-confirm__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--af-ink);
  margin: 0 0 4px;
}
.af-confirm__text { font-size: 12.5px; color: var(--af-ink-3); margin: 0 0 12px; }
.af-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- consolidated from css/components/af-drawer.css ---- */
/* ====================================================================
   css/components/af-drawer.css — Volet lateral (interactif).
   Repris a l'identique de planning_course.css pour etre disponible
   PARTOUT (pas seulement sur le planning). Ne style que .af-drawer /
   .af-scrim / .af-drawer-wrap.
   ==================================================================== */

.af-drawer-wrap { display: contents; }

.af-scrim {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 22, 0.38);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 40;
}
.af-scrim--open { opacity: 1; visibility: visible; }

.af-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: var(--af-surface);
  border-left: 1px solid var(--af-line);
  box-shadow: var(--af-shadow-pop);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  z-index: 41;
  display: flex;
  flex-direction: column;
}
.af-drawer--open { transform: translateX(0); }

.af-drawer__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--af-line);
}
.af-drawer__head-text { flex: 1; min-width: 0; }
.af-drawer__eyebrow {
  font-family: var(--af-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--af-ink-3);
  margin: 0 0 4px;
}
.af-drawer__title {
  font-family: var(--af-font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--af-ink);
  margin: 0;
  line-height: 1.2;
}
.af-drawer__close {
  width: 32px;
  height: 32px;
  border-radius: var(--af-r-md);
  border: 1px solid var(--af-line);
  background: var(--af-surface);
  color: var(--af-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.af-drawer__close:hover { border-color: var(--af-ink-3); color: var(--af-ink); }

.af-drawer__body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.af-drawer__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--af-line);
  background: var(--af-surface-soft);
}
.af-drawer__foot-spacer { flex: 1; }

@media (max-width: 560px) {
  .af-drawer { width: 100%; max-width: 100%; }
}

/* ---- Small utilities used to absorb former one-off inline styles ------ */
.af-u-m0 { margin: 0 !important; }
.af-u-mt-4 { margin-top: 4px !important; }
.af-u-mt-6 { margin-top: 6px !important; }
.af-u-mt-8 { margin-top: 8px !important; }
.af-u-mt-10 { margin-top: 10px !important; }
.af-u-mt-12 { margin-top: 12px !important; }
.af-u-mt-16 { margin-top: 16px !important; }
.af-u-mt-18 { margin-top: 18px !important; }
.af-u-mt-20 { margin-top: 20px !important; }
.af-u-mb-16 { margin-bottom: 16px !important; }
.af-u-flex { display: flex !important; }
.af-u-inline-flex { display: inline-flex !important; }
.af-u-flex-wrap { flex-wrap: wrap !important; }
.af-u-flex-col { flex-direction: column !important; }
.af-u-align-center { align-items: center !important; }
.af-u-align-end { align-items: flex-end !important; }
.af-u-align-start { align-items: flex-start !important; }
.af-u-justify-end { justify-content: flex-end !important; }
.af-u-justify-between { justify-content: space-between !important; }
.af-u-gap-4 { gap: 4px !important; }
.af-u-gap-6 { gap: 6px !important; }
.af-u-gap-8 { gap: 8px !important; }
.af-u-gap-10 { gap: 10px !important; }
.af-u-gap-12 { gap: 12px !important; }
.af-u-text-center { text-align: center !important; }
.af-u-text-right { text-align: right !important; }
.af-u-full-row { grid-column: 1 / -1 !important; }
.af-u-hidden { display: none !important; }
.af-u-contents { display: contents !important; }
.af-u-word-break { word-break: break-all !important; }
.af-u-nowrap { white-space: nowrap !important; }
.af-u-w-90 { width: 90px !important; }
.af-u-maxw-200 { max-width: 200px !important; }
.af-u-maxw-240 { max-width: 240px !important; }
.af-u-maxw-260 { max-width: 260px !important; }
.af-u-maxw-320 { max-width: 320px !important; }
.af-u-maxw-560 { max-width: 560px !important; }
.af-u-maxw-640 { max-width: 640px !important; }
.af-u-flex-1 { flex: 1 1 0 !important; }
.af-u-flex-2 { flex: 2 1 0 !important; }
.af-u-minw-110 { min-width: 110px !important; }
.af-u-minw-120 { min-width: 120px !important; }
.af-u-minw-140 { min-width: 140px !important; }
.af-u-minw-160 { min-width: 160px !important; }
.af-u-minw-200 { min-width: 200px !important; }
.af-u-minw-220 { min-width: 220px !important; }
.af-u-ml-auto { margin-left: auto !important; }
.af-u-mr-4 { margin-right: 4px !important; }
.af-u-muted-small { font-size: 12px !important; color: var(--af-ink-3) !important; }


/* ---- Utility layer v172 — remplacement des anciens styles inline statiques ---- */
.af-u-mt-0 { margin-top: 0 !important; }
.af-u-mt-14 { margin-top: 14px !important; }
.af-u-mt-24 { margin-top: 24px !important; }
.af-u-mb-6 { margin-bottom: 6px !important; }
.af-u-mb-8 { margin-bottom: 8px !important; }
.af-u-mb-10 { margin-bottom: 10px !important; }
.af-u-mb-12 { margin-bottom: 12px !important; }
.af-u-mb-14 { margin-bottom: 14px !important; }
.af-u-my-8 { margin-top: 8px !important; margin-bottom: 8px !important; }
.af-u-my-2 { margin-top: 2px !important; margin-bottom: 2px !important; }
.af-u-p-8 { padding: 8px !important; }
.af-u-pt-12 { padding-top: 12px !important; }
.af-u-pt-16 { padding-top: 16px !important; }
.af-u-pt-40 { padding-top: 40px !important; }
.af-u-bt-line { border-top: 1px solid var(--af-line) !important; }
.af-u-bt-line-2 { border-top: 1px solid var(--af-line-2) !important; }
.af-u-bt-dashed { border-top: 1px dashed var(--af-line-2) !important; }
.af-u-hr { border: 0 !important; border-top: 1px solid var(--af-line-2) !important; margin: 18px 0 !important; }
.af-u-fs-11 { font-size: 11px !important; }
.af-u-fs-12 { font-size: 12px !important; }
.af-u-fs-13 { font-size: 13px !important; }
.af-u-fs-14 { font-size: 14px !important; }
.af-u-fs-15 { font-size: 15px !important; }
.af-u-italic { font-style: italic !important; }
.af-u-danger-text { color: var(--af-danger) !important; }
.af-u-info-link { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; margin-bottom: 10px !important; color: var(--af-info) !important; text-decoration: none !important; }
.af-u-block { display: block !important; }
.af-u-inline { display: inline !important; }
.af-u-inline-block { display: inline-block !important; }
.af-u-justify-center { justify-content: center !important; }
.af-u-va-middle { vertical-align: middle !important; }
.af-u-w-full { width: 100% !important; }
.af-u-w-72 { width: 72px !important; }
.af-u-w-80 { width: 80px !important; }
.af-u-w-8p { width: 8% !important; }
.af-u-w-14p { width: 14% !important; }
.af-u-w-48p { width: 48% !important; }
.af-u-maxw-150 { max-width: 150px !important; }
.af-u-maxw-180 { max-width: 180px !important; }
.af-u-minw-130 { min-width: 130px !important; }
.af-u-minw-180 { min-width: 180px !important; }
.af-u-minw-240 { min-width: 240px !important; }
.af-u-flex-1-4 { flex: 1.4 1 0 !important; }
.af-u-flex-1-min-120 { flex: 1 1 0 !important; min-width: 120px !important; }
.af-u-flex-1-min-130 { flex: 1 1 0 !important; min-width: 130px !important; }
.af-u-flex-1-min-140 { flex: 1 1 0 !important; min-width: 140px !important; }
.af-u-flex-1-min-160 { flex: 1 1 0 !important; min-width: 160px !important; }
.af-u-flex-1-min-180 { flex: 1 1 0 !important; min-width: 180px !important; }
.af-u-flex-1-min-200 { flex: 1 1 0 !important; min-width: 200px !important; }
.af-u-flex-1-min-220 { flex: 1 1 0 !important; min-width: 220px !important; }
.af-u-flex-2-min-160 { flex: 2 1 0 !important; min-width: 160px !important; }
.af-u-flex-2-min-220 { flex: 2 1 0 !important; min-width: 220px !important; }
.af-u-minh-80 { min-height: 80px !important; }
.af-u-maxh-160 { max-height: 160px !important; }
.af-u-centered-flex { display: flex !important; justify-content: center !important; }
.af-u-action-border { border-color: var(--af-action) !important; }
.af-u-info-flash { background: var(--af-info-soft) !important; color: var(--af-info-ink) !important; border-color: var(--af-info) !important; }
.af-u-break-small { font-size: 12px !important; margin-top: 10px !important; word-break: break-all !important; }
.af-u-muted-12-mt8 { font-size: 12px !important; margin-top: 8px !important; }
.af-u-muted-12-mt10 { font-size: 12px !important; margin-top: 10px !important; }
.af-u-muted-12-mt12 { font-size: 12px !important; margin-top: 12px !important; }
.af-u-muted-13 { font-size: 13px !important; }
.af-u-form-actions-inline { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.af-u-form-actions-right { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
.af-u-flex-end-wrap { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: flex-end !important; }
.af-u-flex-end-wrap-8 { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: flex-end !important; }
.af-u-inline-form-wide { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: flex-end !important; }
.af-u-center-actions { margin-top: 14px !important; display: flex !important; gap: 8px !important; justify-content: center !important; }
.af-u-flex-chip-row { display: flex !important; gap: .35rem !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; }
.af-u-att-summary-inline { margin: .15rem 0 .9rem !important; display: flex !important; gap: .4rem !important; flex-wrap: wrap !important; align-items: center !important; }
.af-u-qr-box { display: none !important; text-align: center !important; margin-top: 16px !important; }
.af-u-card-max-560 { max-width: 560px !important; }
.af-u-card-max-640 { max-width: 640px !important; }
.af-u-account-title { margin: 22px 2px 6px !important; }
.af-u-account-sub { margin: 0 2px 14px !important; }
.af-u-row-actions-col { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.af-u-edit-separator { margin-top: 16px !important; padding-top: 12px !important; border-top: 1px solid var(--af-line) !important; }
.af-u-heavy-separator { margin-top: 20px !important; padding-top: 16px !important; border-top: 2px solid var(--af-line) !important; }
.af-u-dashed-box { margin: 8px 0 !important; padding: 8px !important; border-top: 1px dashed var(--af-line-2) !important; }

.af-u-relative { position: relative !important; }
.af-u-ml-8 { margin-left: 8px !important; }
.af-u-mb-4 { margin-bottom: 4px !important; }
.af-u-p-30 { padding: 30px !important; }

.af-u-mail-muted { color: #666 !important; }
.af-link-brand { color: var(--af-brand) !important; text-decoration: none !important; }

.af-u-ml-24 { margin-left: 24px !important; }
.af-u-wp-0 { width: 0% !important; }
.af-u-wp-1 { width: 1% !important; }
.af-u-wp-2 { width: 2% !important; }
.af-u-wp-3 { width: 3% !important; }
.af-u-wp-4 { width: 4% !important; }
.af-u-wp-5 { width: 5% !important; }
.af-u-wp-6 { width: 6% !important; }
.af-u-wp-7 { width: 7% !important; }
.af-u-wp-8 { width: 8% !important; }
.af-u-wp-9 { width: 9% !important; }
.af-u-wp-10 { width: 10% !important; }
.af-u-wp-11 { width: 11% !important; }
.af-u-wp-12 { width: 12% !important; }
.af-u-wp-13 { width: 13% !important; }
.af-u-wp-14 { width: 14% !important; }
.af-u-wp-15 { width: 15% !important; }
.af-u-wp-16 { width: 16% !important; }
.af-u-wp-17 { width: 17% !important; }
.af-u-wp-18 { width: 18% !important; }
.af-u-wp-19 { width: 19% !important; }
.af-u-wp-20 { width: 20% !important; }
.af-u-wp-21 { width: 21% !important; }
.af-u-wp-22 { width: 22% !important; }
.af-u-wp-23 { width: 23% !important; }
.af-u-wp-24 { width: 24% !important; }
.af-u-wp-25 { width: 25% !important; }
.af-u-wp-26 { width: 26% !important; }
.af-u-wp-27 { width: 27% !important; }
.af-u-wp-28 { width: 28% !important; }
.af-u-wp-29 { width: 29% !important; }
.af-u-wp-30 { width: 30% !important; }
.af-u-wp-31 { width: 31% !important; }
.af-u-wp-32 { width: 32% !important; }
.af-u-wp-33 { width: 33% !important; }
.af-u-wp-34 { width: 34% !important; }
.af-u-wp-35 { width: 35% !important; }
.af-u-wp-36 { width: 36% !important; }
.af-u-wp-37 { width: 37% !important; }
.af-u-wp-38 { width: 38% !important; }
.af-u-wp-39 { width: 39% !important; }
.af-u-wp-40 { width: 40% !important; }
.af-u-wp-41 { width: 41% !important; }
.af-u-wp-42 { width: 42% !important; }
.af-u-wp-43 { width: 43% !important; }
.af-u-wp-44 { width: 44% !important; }
.af-u-wp-45 { width: 45% !important; }
.af-u-wp-46 { width: 46% !important; }
.af-u-wp-47 { width: 47% !important; }
.af-u-wp-48 { width: 48% !important; }
.af-u-wp-49 { width: 49% !important; }
.af-u-wp-50 { width: 50% !important; }
.af-u-wp-51 { width: 51% !important; }
.af-u-wp-52 { width: 52% !important; }
.af-u-wp-53 { width: 53% !important; }
.af-u-wp-54 { width: 54% !important; }
.af-u-wp-55 { width: 55% !important; }
.af-u-wp-56 { width: 56% !important; }
.af-u-wp-57 { width: 57% !important; }
.af-u-wp-58 { width: 58% !important; }
.af-u-wp-59 { width: 59% !important; }
.af-u-wp-60 { width: 60% !important; }
.af-u-wp-61 { width: 61% !important; }
.af-u-wp-62 { width: 62% !important; }
.af-u-wp-63 { width: 63% !important; }
.af-u-wp-64 { width: 64% !important; }
.af-u-wp-65 { width: 65% !important; }
.af-u-wp-66 { width: 66% !important; }
.af-u-wp-67 { width: 67% !important; }
.af-u-wp-68 { width: 68% !important; }
.af-u-wp-69 { width: 69% !important; }
.af-u-wp-70 { width: 70% !important; }
.af-u-wp-71 { width: 71% !important; }
.af-u-wp-72 { width: 72% !important; }
.af-u-wp-73 { width: 73% !important; }
.af-u-wp-74 { width: 74% !important; }
.af-u-wp-75 { width: 75% !important; }
.af-u-wp-76 { width: 76% !important; }
.af-u-wp-77 { width: 77% !important; }
.af-u-wp-78 { width: 78% !important; }
.af-u-wp-79 { width: 79% !important; }
.af-u-wp-80 { width: 80% !important; }
.af-u-wp-81 { width: 81% !important; }
.af-u-wp-82 { width: 82% !important; }
.af-u-wp-83 { width: 83% !important; }
.af-u-wp-84 { width: 84% !important; }
.af-u-wp-85 { width: 85% !important; }
.af-u-wp-86 { width: 86% !important; }
.af-u-wp-87 { width: 87% !important; }
.af-u-wp-88 { width: 88% !important; }
.af-u-wp-89 { width: 89% !important; }
.af-u-wp-90 { width: 90% !important; }
.af-u-wp-91 { width: 91% !important; }
.af-u-wp-92 { width: 92% !important; }
.af-u-wp-93 { width: 93% !important; }
.af-u-wp-94 { width: 94% !important; }
.af-u-wp-95 { width: 95% !important; }
.af-u-wp-96 { width: 96% !important; }
.af-u-wp-97 { width: 97% !important; }
.af-u-wp-98 { width: 98% !important; }
.af-u-wp-99 { width: 99% !important; }
.af-u-wp-100 { width: 100% !important; }