/*
Theme Name:   Askil — Modern Heritage
Theme URI:    https://askkil.com
Description:  Thème enfant de XTRA. Refonte de la présentation d'Askil en plateforme
              éditoriale culturelle (direction « Modern Heritage »). Aucune donnée
              éditoriale n'est modifiée par ce thème : il ne fait que changer la
              structure HTML, le CSS et les gabarits de présentation.
Author:       Studio d'audit Askil
Template:     xtra
Version:      1.0.0
Text Domain:  xtra-child
*/

/* ==========================================================================
   1. DESIGN TOKENS — direction « Modern Heritage »
   Prolonge l'identité déjà utilisée par Askil (parchemin / bleu nuit / or)
   au lieu de la remplacer.
   ========================================================================== */
:root{
  /* Couleurs */
  --ask-paper:        #f6f1e4;   /* fond principal, parchemin chaud */
  --ask-paper-raised:  #fffdf7;   /* cartes, surfaces élevées */
  --ask-paper-sunken:  #efe7d3;   /* alternance de sections */
  --ask-ink:           #1f2a3d;   /* bleu nuit — texte principal */
  --ask-ink-soft:      #52596b;   /* texte secondaire */
  --ask-ink-faint:     #8a8f7f;   /* légendes, métadonnées */
  --ask-line:          #ddd0ab;   /* bordures dorées discrètes */
  --ask-line-soft:     #e8e0c8;
  --ask-gold:          #b3822f;   /* accent principal — or/laiton */
  --ask-gold-soft:     #f1e4c3;
  --ask-gold-ink:      #7c5a1f;
  --ask-navy:          #1f2a3d;   /* accent secondaire — bleu nuit */
  --ask-navy-soft:     #e7eaf0;
  --ask-terracotta:    #8a3b2f;   /* accent d'interaction — terre cuite */
  --ask-terracotta-soft:#f3e0da;
  --ask-success:       #3f7a5c;
  --ask-success-soft:  #dcece1;
  --ask-focus:         #2f6fb3;

  /* Typographie */
  --ask-font-display: 'Amiri', 'Fraunces', Georgia, serif;
  --ask-font-body:    'Cairo', Tahoma, Arial, sans-serif;
  --ask-font-ui:      'Cairo', Tahoma, Arial, sans-serif;
  --ask-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Échelle typographique */
  --ask-fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  --ask-fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --ask-fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --ask-fs-h4: 1.1rem;
  --ask-fs-body: 1.05rem;
  --ask-fs-small: 0.88rem;
  --ask-fs-caption: 0.78rem;

  /* Espacements (échelle 8px) */
  --ask-sp-1: 8px; --ask-sp-2: 16px; --ask-sp-3: 24px; --ask-sp-4: 32px;
  --ask-sp-5: 48px; --ask-sp-6: 64px; --ask-sp-7: 96px;

  /* Grille */
  --ask-maxw: 1220px;
  --ask-maxw-read: 68ch;

  /* Rayons / ombres */
  --ask-radius-s: 6px;
  --ask-radius-m: 14px;
  --ask-radius-l: 22px;
  --ask-shadow-s: 0 1px 2px rgba(31,42,61,.06);
  --ask-shadow-m: 0 10px 30px -14px rgba(31,42,61,.28);
  --ask-shadow-l: 0 24px 60px -20px rgba(31,42,61,.35);

  /* Transitions */
  --ask-ease: cubic-bezier(.2,.7,.2,1);
  --ask-t-fast: 140ms;
  --ask-t-med: 260ms;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body{
  background: var(--ask-paper) !important;
  color: var(--ask-ink) !important;
  font-family: var(--ask-font-body) !important;
  font-size: var(--ask-fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
body.askil-app h1, body.askil-app h2, body.askil-app h3, body.askil-app h4{
  font-family: var(--ask-font-display);
  color: var(--ask-ink);
  font-weight: 700;
  line-height: 1.25;
}
body.askil-app a{ color: inherit; text-decoration: none; }
body.askil-app img{ max-width: 100%; height: auto; display:block; }
body.askil-app :focus-visible{
  outline: 3px solid var(--ask-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
body.askil-app ::selection{ background: var(--ask-gold-soft); color: var(--ask-ink); }
@media (prefers-reduced-motion: reduce){
  body.askil-app *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.askil-shell{ max-width: var(--ask-maxw); margin: 0 auto; padding: 0 var(--ask-sp-3); }
@media (max-width: 640px){ .askil-shell{ padding: 0 var(--ask-sp-2); } }

.askil-section{ padding: var(--ask-sp-6) 0; }
.askil-section.alt{ background: var(--ask-paper-sunken); }
@media (max-width: 640px){ .askil-section{ padding: var(--ask-sp-5) 0; } }

.askil-section-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; margin-bottom: var(--ask-sp-4); }
.askil-eyebrow{ font-family: var(--ask-font-ui); font-size: var(--ask-fs-caption); letter-spacing:.08em; color: var(--ask-gold-ink); font-weight:700; text-transform:none; }
.askil-eyebrow::before{ content:"◆ "; color:var(--ask-gold); }
.askil-section-head h2{ font-size: var(--ask-fs-h2); margin:0; }
.askil-section-head p{ color:var(--ask-ink-soft); max-width:60ch; margin:0; }
.askil-section-link{ font-family:var(--ask-font-ui); font-size:var(--ask-fs-small); font-weight:700; color:var(--ask-gold-ink); border-bottom:1px solid var(--ask-gold); padding-bottom:2px; transition:opacity var(--ask-t-fast) var(--ask-ease); }
.askil-section-link:hover{ opacity:.7; }

/* motif géométrique existant, réutilisé comme séparateur de section */
.askil-motif{ width:34px; height:34px; border:1.5px solid var(--ask-gold); transform:rotate(45deg); margin:0 auto var(--ask-sp-2); opacity:.55; }

/* ==========================================================================
   3. HEADER / NAVIGATION
   ========================================================================== */
.askil-header{
  position: sticky; top:0; z-index: 60;
  background: color-mix(in srgb, var(--ask-paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ask-line);
}
.askil-header-inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--ask-sp-3); padding: 11px var(--ask-sp-3); max-width: var(--ask-maxw); margin:0 auto; }
/* Logo agrandi (texte ou image) pour peser visuellement autant que les
   boutons d'action ronds (40px) à côté — la réduction du padding vertical
   ci-dessus absorbe la différence pour que le header ne grandisse pas. */
.askil-logo{ display:flex; align-items:center; gap:10px; font-family: var(--ask-font-display); font-size:1.85rem; line-height:1; font-weight:700; color:var(--ask-ink); }
.askil-logo img{ height:40px; width:auto; }
@media (max-width:480px){ .askil-logo{ font-size:1.6rem; } .askil-logo img{ height:36px; } }
.askil-nav{ display:flex; align-items:center; gap: var(--ask-sp-4); }
.askil-nav a{ font-family:var(--ask-font-ui); font-size:.95rem; font-weight:600; color:var(--ask-ink-soft); position:relative; padding:6px 2px; transition:color var(--ask-t-fast) var(--ask-ease); }
.askil-nav a:hover, .askil-nav a[aria-current="page"]{ color:var(--ask-ink); }
.askil-nav a[aria-current="page"]::after{ content:""; position:absolute; inset-inline:0; bottom:-4px; height:2px; background:var(--ask-gold); border-radius:2px; }
.askil-header-actions{ display:flex; align-items:center; gap:14px; }
.askil-icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid var(--ask-line); background:var(--ask-paper-raised); color:var(--ask-ink); transition:background var(--ask-t-fast) var(--ask-ease), transform var(--ask-t-fast) var(--ask-ease); }
.askil-icon-btn:hover{ background:var(--ask-gold-soft); }
.askil-icon-btn:active{ transform:scale(.94); }
.askil-burger{ display:none; }

@media (max-width: 900px){
  .askil-nav{ display:none; }
  .askil-burger{ display:inline-flex; }
  /* En-tête mobile allégé : l'accès au compte vit désormais dans le menu
     (voir le tiroir ci-dessous) — un seul bouton compte en trop sur un
     header déjà à 3 icônes sur petit écran. */
  .askil-account-icon{ display:none; }
}

/* Recherche — expérience dédiée, focalisée sur la saisie */
.askil-search-overlay{
  position: fixed; inset:0; z-index: 85; background: color-mix(in srgb, var(--ask-paper) 96%, transparent);
  backdrop-filter: blur(6px);
  display:flex; align-items:flex-start; justify-content:center; padding-top: 14vh;
  opacity:0; visibility:hidden; transition:opacity var(--ask-t-med) var(--ask-ease);
}
.askil-search-overlay.is-open{ opacity:1; visibility:visible; }
.askil-search-box{ width:min(640px,92vw); }
.askil-search-box form{ display:flex; align-items:center; gap:10px; border-bottom:2px solid var(--ask-ink); padding-bottom:10px; }
.askil-search-box input[type="search"]{ flex:1; border:none; background:transparent; font-family:var(--ask-font-display); font-size:1.6rem; color:var(--ask-ink); outline:none; }
.askil-search-close{ position:absolute; top:24px; inset-inline-end:24px; }

/* Menu — tiroir latéral (navigation + compte), distinct de la recherche */
.askil-menu-drawer{
  position:fixed; top:0; bottom:0; inset-inline-end:0; z-index:95;
  width:min(360px,86vw); background:var(--ask-paper-raised); box-shadow:-24px 0 60px -20px rgba(31,42,61,.4);
  display:flex; flex-direction:column; padding: var(--ask-sp-3) var(--ask-sp-3) var(--ask-sp-4);
  transform: translateX(100%); transition: transform var(--ask-t-med) var(--ask-ease);
  overflow-y:auto;
}
html[dir="rtl"] .askil-menu-drawer{ inset-inline-end:0; transform: translateX(-100%); }
.askil-menu-drawer.is-open{ transform: translateX(0); }
/* Le sélecteur RTL ci-dessus est plus spécifique que ".is-open" seul (élément
   html + attribut + classe) et l'emporterait sinon en permanence, gardant le
   tiroir hors écran même une fois ouvert — d'où cette règle dédiée. */
html[dir="rtl"] .askil-menu-drawer.is-open{ transform: translateX(0); }
.askil-menu-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom: var(--ask-sp-3); margin-bottom: var(--ask-sp-2); border-bottom:1px solid var(--ask-line); }
.askil-menu-drawer-nav{ display:flex; flex-direction:column; gap:4px; }
.askil-menu-drawer-nav a{
  font-family:var(--ask-font-display); font-size:1.15rem; font-weight:600; color:var(--ask-ink);
  padding:12px 10px; border-radius:10px; transition:background var(--ask-t-fast) var(--ask-ease);
}
.askil-menu-drawer-nav a:hover{ background:var(--ask-paper-sunken); }
.askil-menu-drawer-nav a[aria-current="page"]{ color:var(--ask-gold-ink); background:var(--ask-gold-soft); }
.askil-menu-drawer-nav--account a{ font-family:var(--ask-font-ui); font-size:.92rem; font-weight:700; color:var(--ask-ink-soft); }
.askil-menu-drawer-divider{ height:1px; background:var(--ask-line); margin: var(--ask-sp-2) 4px; }
.askil-menu-scrim{
  position:fixed; inset:0; z-index:90; background:rgba(15,20,30,.4);
  opacity:0; visibility:hidden; transition:opacity var(--ask-t-med) var(--ask-ease);
}
.askil-menu-scrim.is-open{ opacity:1; visibility:visible; }
@media (min-width:901px){ .askil-menu-drawer, .askil-menu-scrim{ display:none; } }

/* ==========================================================================
   4. HERO — carrousel des derniers écrits
   ========================================================================== */
.askil-hero-carousel{
  position:relative; overflow:hidden; border-radius: var(--ask-radius-l);
  margin: var(--ask-sp-4) var(--ask-sp-3) 0; background: var(--ask-navy); color:#f4efe0;
  min-height: 62vh;
}
@media (max-width:900px){ .askil-hero-carousel{ min-height:56vh; margin:var(--ask-sp-2); } }
/* Téléphone : le slider ne doit pas monopoliser tout l'écran d'ouverture —
   hauteur nettement réduite (min-height reste un plancher, jamais un
   plafond : si le contenu a besoin de plus de place, la boîte grandit,
   rien n'est jamais coupé). */
@media (max-width:640px){
  /* max(…) plutôt qu'un simple vh : sur un écran étroit ET peu haut (320×568
     par ex.), 44vh seul seul seul devient trop court pour le contenu même
     plafonné ci-dessous (titre sur 2 lignes + extrait + bouton) et le ferait
     chevaucher les flèches — 300px sert de plancher absolu, quelle que soit
     la hauteur réelle de l'écran. */
  .askil-hero-carousel{ min-height: max(360px, 44vh); }
}
.askil-hero-track{ position:relative; width:100%; height:100%; min-height:inherit; }
.askil-hero-slide{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  opacity:0; visibility:hidden; transition:opacity 700ms var(--ask-ease);
  pointer-events:none;
}
.askil-hero-slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){ .askil-hero-slide{ transition:none; } }
.askil-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.askil-hero-bg--fallback{ display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--ask-gold) 18%, transparent), transparent 60%), var(--ask-navy); }
.askil-hero-bg--fallback .askil-motif{ width:64px; height:64px; opacity:.35; border-color: var(--ask-gold-soft); }
.askil-hero-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,20,30,.88), rgba(15,20,30,.15) 60%); }
.askil-hero-content{ position:relative; z-index:2; padding: var(--ask-sp-6) var(--ask-sp-5); max-width:760px; }
@media (max-width:640px){
  .askil-hero-content{ padding: 44px var(--ask-sp-3) 20px; }
  .askil-hero-eyebrow{ margin-bottom:6px; }
  /* Un titre d'article peut être une phrase entière (voir "أدب الرحلة إلى
     العالم الآخر: قصيدة…") — sans plafond, il grandit jusqu'à chevaucher les
     flèches ou déborder au-dessus du carrousel (masqué par overflow:hidden).
     Plafonné à 2 lignes : le titre reste lisible (jamais coupé au milieu
     d'un mot, l'ellipse ne s'applique qu'aux titres réellement trop longs)
     et la hauteur du bloc redevient prévisible, quel que soit l'article. */
  .askil-hero-slide .askil-hero-content h1{
    margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .askil-hero-content p{
    margin-bottom:14px; font-size:.95rem;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  }
}
.askil-hero-eyebrow{ font-family:var(--ask-font-ui); font-size:.78rem; letter-spacing:.1em; color:var(--ask-gold-soft); font-weight:700; margin-bottom:10px; }
.askil-hero-slide .askil-hero-content h1{ color:#fbf6e8; font-size: var(--ask-fs-h1); margin:0 0 14px; }
.askil-hero-content h1 a{ color:inherit; }
.askil-hero-content p{ color: rgba(251,246,232,.82); max-width:56ch; margin:0 0 22px; font-size:1.05rem; }
.askil-hero-meta{ display:flex; gap:16px; flex-wrap:wrap; font-family:var(--ask-font-ui); font-size:.85rem; color:rgba(251,246,232,.8); }
.askil-hero-meta span{ display:flex; align-items:center; gap:6px; }

.askil-hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:999px; border:1px solid rgba(244,239,224,.35);
  background:rgba(23,29,42,.45); backdrop-filter:blur(6px); color:#f4efe0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background var(--ask-t-fast) var(--ask-ease), transform var(--ask-t-fast) var(--ask-ease);
}
.askil-hero-arrow:hover{ background:rgba(23,29,42,.75); }
.askil-hero-arrow:active{ transform:translateY(-50%) scale(.94); }
.askil-hero-arrow.prev{ inset-inline-start:16px; }
.askil-hero-arrow.next{ inset-inline-end:16px; }
html[dir="rtl"] .askil-hero-arrow.prev svg{ transform:scaleX(-1); }
html[dir="rtl"] .askil-hero-arrow.next svg{ transform:scaleX(-1); }
@media (max-width:640px){
  /* Sur mobile, le contenu occupe toute la hauteur de la slide : centrer les
     flèches ferait chevaucher le bouton d'action. On les remonte dans la
     zone image, au-dessus du texte. */
  .askil-hero-arrow{ width:36px; height:36px; top: var(--ask-sp-3); transform:none; }
  .askil-hero-arrow:active{ transform:scale(.94); }
}

.askil-hero-dots{ position:absolute; z-index:3; bottom:18px; inset-inline-end:20px; display:flex; gap:8px; }
.askil-hero-dot{ width:8px; height:8px; border-radius:999px; border:none; background:rgba(244,239,224,.4); cursor:pointer; padding:0; transition: background var(--ask-t-fast) var(--ask-ease), width var(--ask-t-fast) var(--ask-ease); }
.askil-hero-dot.is-active{ background:var(--ask-gold); width:22px; }
.askil-hero-dot:hover{ background:rgba(244,239,224,.7); }

/* ==========================================================================
   5. BOUTONS / CTA
   ========================================================================== */
.askil-btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--ask-font-ui); font-weight:700; font-size:.92rem;
  padding:11px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition: transform var(--ask-t-fast) var(--ask-ease), background var(--ask-t-fast) var(--ask-ease), box-shadow var(--ask-t-fast) var(--ask-ease);
}
.askil-btn.primary{ background: var(--ask-gold); color:#241a08; }
.askil-btn.primary:hover{ background:#c6963f; box-shadow: var(--ask-shadow-m); }
.askil-btn.ghost{ background:transparent; border-color: currentColor; color:inherit; }
.askil-btn.ghost:hover{ background: rgba(255,255,255,.08); }
.askil-btn.on-paper{ border-color: var(--ask-line); color:var(--ask-ink); }
.askil-btn.on-paper:hover{ background: var(--ask-gold-soft); }
.askil-btn:active{ transform: scale(.97); }

/* ==========================================================================
   6. CARTES
   ========================================================================== */
.askil-grid{ display:grid; gap: var(--ask-sp-3); }
.askil-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
.askil-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.askil-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 1000px){ .askil-grid.cols-4{ grid-template-columns: repeat(2,1fr); } .askil-grid.cols-3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .askil-grid.cols-4, .askil-grid.cols-3, .askil-grid.cols-2{ grid-template-columns: 1fr; } }

.askil-card{
  background: var(--ask-paper-raised); border:1px solid var(--ask-line-soft); border-radius: var(--ask-radius-m);
  overflow:hidden; display:flex; flex-direction:column; transition: transform var(--ask-t-med) var(--ask-ease), box-shadow var(--ask-t-med) var(--ask-ease), border-color var(--ask-t-med) var(--ask-ease);
}
.askil-card:hover{ transform: translateY(-3px); box-shadow: var(--ask-shadow-m); border-color: var(--ask-gold); }
.askil-card-media{ position:relative; aspect-ratio: 4/3; background: var(--ask-paper-sunken); overflow:hidden; }
.askil-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform 600ms var(--ask-ease); }
.askil-card:hover .askil-card-media img{ transform: scale(1.045); }
.askil-card-media.icon{ display:flex; align-items:center; justify-content:center; padding: var(--ask-sp-3); }
.askil-card-media.icon img{ width:56%; height:56%; object-fit:contain; transition: transform var(--ask-t-med) var(--ask-ease); }
.askil-card:hover .askil-card-media.icon img{ transform: scale(1.08); }
.askil-card-badge{ position:absolute; top:10px; inset-inline-start:10px; background: rgba(31,42,61,.82); color:#f4efe0; font-family:var(--ask-font-ui); font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:999px; display:flex; align-items:center; gap:5px; }
.askil-card-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.askil-card-play span{ width:46px; height:46px; border-radius:999px; background:rgba(246,241,228,.92); color:var(--ask-navy); display:flex; align-items:center; justify-content:center; box-shadow:var(--ask-shadow-m); }
.askil-card-body{ padding: var(--ask-sp-2) var(--ask-sp-2) var(--ask-sp-3); display:flex; flex-direction:column; gap:8px; flex:1; }
.askil-card-cat{ font-family:var(--ask-font-ui); font-size:.72rem; font-weight:700; color:var(--ask-gold-ink); letter-spacing:.02em; }
.askil-card-title{ font-family:var(--ask-font-display); font-size:1.12rem; line-height:1.4; color:var(--ask-ink); }
.askil-card-meta{ margin-top:auto; display:flex; align-items:center; gap:8px; font-family:var(--ask-font-ui); font-size:.78rem; color:var(--ask-ink-faint); }
.askil-card-meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; }

/* carte auteur */
.askil-author-card{ text-align:center; padding: var(--ask-sp-3) var(--ask-sp-2); background:var(--ask-paper-raised); border:1px solid var(--ask-line-soft); border-radius:var(--ask-radius-m); transition: box-shadow var(--ask-t-med) var(--ask-ease), transform var(--ask-t-med) var(--ask-ease); }
.askil-author-card:hover{ box-shadow:var(--ask-shadow-m); transform:translateY(-3px); }
.askil-author-card img{ width:88px; height:88px; border-radius:999px; object-fit:cover; margin:0 auto 14px; border:3px solid var(--ask-paper); box-shadow:0 0 0 1px var(--ask-line); }
.askil-author-card h3{ font-size:1.05rem; margin:0 0 4px; }
.askil-author-card .role{ font-family:var(--ask-font-ui); font-size:.8rem; color:var(--ask-gold-ink); font-weight:700; }

/* Grille des auteurs — reste sur 2 colonnes sur mobile (les cartes sont
   compactes : photo + nom + fonction, sans long texte) au lieu de s'empiler
   sur une seule colonne comme les grilles d'articles, pour éviter le long
   défilement signalé. Sur l'accueil, seuls 4 des 8 auteurs mis en avant
   restent visibles sur petit écran — les autres restent dans le HTML
   (référencement, pas de contenu supprimé) et « كل الكتاب » mène à la page
   qui les liste tous. */
@media (max-width:620px){
  .askil-grid--authors{ grid-template-columns: repeat(2,1fr) !important; gap: var(--ask-sp-2); }
  .askil-grid--authors:not(.askil-grid--authors-full) .askil-author-card:nth-child(n+5){ display:none; }
  .askil-author-card{ padding: var(--ask-sp-2) 10px; }
  .askil-author-card img{ width:64px; height:64px; margin-bottom:10px; }
  .askil-author-card h3{ font-size:.92rem; }
}

/* ==========================================================================
   7. LECTEUR AUDIO
   ========================================================================== */
.askil-audio{
  display:flex; align-items:center; gap: var(--ask-sp-2); background: var(--ask-navy); color:#f4efe0;
  border-radius: var(--ask-radius-m); padding: var(--ask-sp-2); margin: var(--ask-sp-3) 0;
}
.askil-audio-art{ width:64px; height:64px; border-radius:var(--ask-radius-s); object-fit:cover; flex-shrink:0; background:var(--ask-gold-soft); }
.askil-audio-play{ width:46px; height:46px; border-radius:999px; background:var(--ask-gold); color:#241a08; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:none; cursor:pointer; transition:transform var(--ask-t-fast) var(--ask-ease); }
.askil-audio-play:hover{ transform:scale(1.06); }
.askil-audio-body{ flex:1; min-width:0; }
.askil-audio-title{ font-family:var(--ask-font-display); font-size:1rem; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.askil-audio-progress{ height:4px; border-radius:2px; background:rgba(244,239,224,.25); overflow:hidden; }
.askil-audio-progress span{ display:block; height:100%; width:0; background:var(--ask-gold); }
.askil-audio-time{ font-family:var(--ask-font-mono); font-size:.7rem; color:rgba(244,239,224,.7); margin-top:6px; }
.askil-audio audio{ display:none; }

/* Galerie des médias joints par un contributeur (image/audio/vidéo en plus
   de l'image mise en avant et du texte) — n'apparaît que si l'article en
   contient réellement, sans effet sur les articles existants. */
.askil-media-gallery{ display:flex; flex-direction:column; gap: var(--ask-sp-2); margin: var(--ask-sp-3) 0; }
.askil-media-gallery figure{ margin:0; }
.askil-media-gallery img{ width:100%; max-height:60vh; object-fit:cover; border-radius: var(--ask-radius-l); box-shadow: var(--ask-shadow-l); display:block; }
.askil-media-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius: var(--ask-radius-l); overflow:hidden; box-shadow: var(--ask-shadow-l); background:var(--ask-navy); }
.askil-media-video video{ width:100%; height:100%; object-fit:contain; display:block; }
/* Le lecteur vidéo natif de WordPress (mediaelement.js, via [video]) impose
   une largeur/hauteur fixes en style inline : on les force à occuper tout
   le cadre responsive ci-dessus plutôt que de réécrire le lecteur. */
.askil-media-video .mejs-container,
.askil-media-video .mejs-container video,
.askil-media-video .wp-video,
.askil-media-video .wp-video-shortcode{ width:100% !important; height:100% !important; }
@media (max-width:640px){ .askil-media-gallery img{ max-height:42vh; } }

/* ==========================================================================
   8. ARTICLE — expérience de lecture
   ========================================================================== */
.askil-article-head{ max-width: 820px; margin: var(--ask-sp-5) auto var(--ask-sp-4); padding: 0 var(--ask-sp-3); text-align:center; }
.askil-article-head .askil-card-cat{ justify-content:center; display:flex; }
.askil-article-head h1{ font-size: var(--ask-fs-h1); margin: 10px 0 16px; }
.askil-article-meta{ display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; font-family:var(--ask-font-ui); font-size:.86rem; color:var(--ask-ink-soft); }
.askil-article-meta img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.askil-article-figure{ max-width:980px; margin: 0 auto var(--ask-sp-5); padding:0 var(--ask-sp-3); }
/* Les photos sources ont des proportions très variables (portrait, très
   grandes...) : on cadre l'image à une hauteur maîtrisée (object-fit, pas
   de recadrage du fichier) pour que la mise en page reste régulière d'un
   article à l'autre, sans jamais déformer l'image elle-même. */
.askil-article-figure img{ width:100%; max-height:62vh; object-fit:cover; border-radius: var(--ask-radius-l); box-shadow: var(--ask-shadow-l); }
@media (max-width:640px){ .askil-article-figure img{ max-height:42vh; } }
.askil-article-body{ max-width: var(--ask-maxw-read); margin:0 auto; padding: 0 var(--ask-sp-3) var(--ask-sp-6); font-size:1.14rem; line-height:2; }
.askil-article-body p{ margin: 0 0 1.5em; }
.askil-article-body h2{ margin: 1.6em 0 .7em; font-size:1.5rem; }
.askil-article-body h3{ margin: 1.4em 0 .6em; font-size:1.25rem; }
.askil-article-body blockquote{ border-inline-start:3px solid var(--ask-gold); margin: 1.6em 0; padding-block:.2em; padding-inline-start:1.2em; font-family:var(--ask-font-display); font-size:1.2rem; color:var(--ask-ink); text-align:start; }
.askil-article-body img{ border-radius: var(--ask-radius-m); }
/* Présentation éditoriale RTL — le sens de lecture (dir="rtl", voir
   functions.php) gère déjà l'alignement par défaut ("start" = à droite) ;
   ceci ajoute la justification demandée pour les paragraphes longs, sans
   toucher aux titres (une justification sur 1-2 lignes de titre n'a pas de
   sens) ni au contenu lui-même. */
.askil-article-body p, .askil-author-bio{ text-align:justify; text-align-last:start; }

/* Habillage des blocs hérités des pages À propos/Contact (shortcodes
   d'origine, contenu inchangé) pour qu'ils suivent le même système visuel
   que le reste du site : uniquement présentation, aucune donnée touchée. */
.askil-article-body .wpb_row{ display:flex; flex-wrap:wrap; gap: var(--ask-sp-3); margin:0 0 var(--ask-sp-3); }
.askil-article-body .wpb_column{ flex:1 1 260px; min-width:0; }
.askil-article-body [class*="cz_team"]{ display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--ask-paper-raised); border:1px solid var(--ask-line-soft); border-radius: var(--ask-radius-m); padding: var(--ask-sp-3) var(--ask-sp-2); margin:0 0 var(--ask-sp-2) !important; width:auto !important; float:none !important; transition: box-shadow var(--ask-t-med) var(--ask-ease), transform var(--ask-t-med) var(--ask-ease); }
.askil-article-body [class*="cz_team"]:hover{ box-shadow: var(--ask-shadow-m); transform: translateY(-2px); }
.askil-article-body .cz_team_img{ width:96px !important; height:96px !important; margin:0 auto 14px !important; border-radius:999px !important; overflow:hidden; }
.askil-article-body .cz_team_img img{ width:96px !important; height:96px !important; max-width:96px !important; object-fit:cover; border-radius:999px !important; }
.askil-article-body .cz_team_content{ width:auto !important; }
.askil-article-body .cz_team_content h4{ font-family:var(--ask-font-display); font-size:1.02rem; margin:0 0 4px; }
.askil-article-body .cz_team_content h4 a, .askil-article-body .cz_team_content h4 strong{ color:var(--ask-ink); font-weight:700; }
.askil-article-body .cz_team_content p{ margin:0; font-size:.82rem; }
.askil-article-body .cz_team_content span{ font-family:var(--ask-font-ui) !important; color:var(--ask-gold-ink) !important; font-weight:700; font-size:.8rem !important; }
.askil-article-body .cz_team_social{ margin-top:8px; }
.askil-article-body .cz_team_social:has(.cz_team_social_in:empty){ display:none; }

/* Les blocs [cz_gap] hérités (espaceurs vides du page builder d'origine)
   empilent souvent plusieurs paliers (50px, 70px…) pensés pour un habillage
   très différent — cause exacte des grands vides observés sur les pages
   À propos/Contact. On plafonne leur hauteur au lieu de les supprimer du
   contenu (qui n'est jamais touché), pour retrouver une respiration cohérente
   avec le reste du site sans rien enlever à la page elle-même. */
.askil-article-body [class*="cz_gap"]{ height:20px !important; }
.askil-article-body .vc_row{ margin-bottom:0; }
@media (max-width:640px){ .askil-article-body [class*="cz_gap"]{ height:14px !important; } }
@media (min-width:620px){
	.askil-article-body .vc_row:has([class*="cz_team"]){ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap: var(--ask-sp-2); }
	.askil-article-body .vc_row:has([class*="cz_team"]) .wpb_column{ width:auto !important; flex:none !important; }
}
.askil-progress{ position:fixed; top:0; inset-inline:0; height:3px; background: var(--ask-gold); z-index:90; width:0; transform-origin: left; }
html[dir="rtl"] .askil-progress{ transform-origin: right; }

.askil-related{ background:var(--ask-paper-sunken); padding: var(--ask-sp-5) 0; }

/* ==========================================================================
   9. AUTEUR — page biographie
   ========================================================================== */
.askil-author-hero{ text-align:center; padding: var(--ask-sp-6) var(--ask-sp-3) var(--ask-sp-4); }
.askil-author-hero img{ width:140px; height:140px; border-radius:999px; object-fit:cover; margin:0 auto var(--ask-sp-2); box-shadow: var(--ask-shadow-m); border:4px solid var(--ask-paper-raised); }
.askil-author-hero h1{ font-size: var(--ask-fs-h2); }
.askil-author-hero .role{ font-family:var(--ask-font-ui); color:var(--ask-gold-ink); font-weight:700; margin-bottom: var(--ask-sp-2); }
.askil-author-bio{ max-width:70ch; margin:0 auto; color:var(--ask-ink-soft); font-size:1.05rem; line-height:1.9; white-space:pre-line; }

/* ==========================================================================
   10. ARCHIVES / EXPLORER / RECHERCHE
   ========================================================================== */
.askil-archive-head{ text-align:center; padding: var(--ask-sp-5) var(--ask-sp-3) var(--ask-sp-3); }
.askil-archive-head h1{ font-size: var(--ask-fs-h2); }
.askil-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: 0 auto var(--ask-sp-4); max-width:900px; padding:0 var(--ask-sp-3); }
.askil-filter{ font-family:var(--ask-font-ui); font-size:.85rem; font-weight:600; padding:8px 16px; border-radius:999px; border:1px solid var(--ask-line); background:var(--ask-paper-raised); color:var(--ask-ink-soft); transition: all var(--ask-t-fast) var(--ask-ease); }
.askil-filter:hover{ border-color:var(--ask-gold); color:var(--ask-ink); }
.askil-filter.is-active{ background:var(--ask-ink); border-color:var(--ask-ink); color:var(--ask-paper); }
.askil-filter-group{ margin-bottom: var(--ask-sp-4); }
.askil-filter-group h4{ font-family:var(--ask-font-ui); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ask-ink-faint); text-align:center; margin-bottom:10px; }

.askil-breadcrumb{ font-family:var(--ask-font-ui); font-size:.8rem; color:var(--ask-ink-faint); display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding: var(--ask-sp-2) 0; }
.askil-breadcrumb a{ color:var(--ask-ink-faint); }
.askil-breadcrumb a:hover{ color:var(--ask-gold-ink); }

.askil-pagination{ display:flex; justify-content:center; gap:8px; margin: var(--ask-sp-4) 0; }
.askil-pagination a, .askil-pagination span{ min-width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-family:var(--ask-font-mono); font-size:.85rem; border:1px solid var(--ask-line); color:var(--ask-ink-soft); }
.askil-pagination .current{ background:var(--ask-ink); border-color:var(--ask-ink); color:var(--ask-paper); }
.askil-pagination a:hover{ border-color:var(--ask-gold); color:var(--ask-ink); }

.askil-empty{ text-align:center; padding: var(--ask-sp-6) var(--ask-sp-3); color:var(--ask-ink-faint); }
.askil-empty .askil-motif{ opacity:.35; }

.askil-search-form-inline{ max-width:640px; margin:0 auto var(--ask-sp-4); display:flex; gap:10px; padding:0 var(--ask-sp-3); }
.askil-search-form-inline input[type="search"]{ flex:1; padding:12px 18px; border-radius:999px; border:1px solid var(--ask-line); background:var(--ask-paper-raised); font-family:var(--ask-font-ui); font-size:1rem; }
.askil-search-form-inline input[type="search"]:focus{ outline:none; border-color:var(--ask-gold); }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.askil-footer{ background: var(--ask-navy); color: rgba(244,239,224,.86); padding: var(--ask-sp-6) 0 0; margin-top: var(--ask-sp-6); }
.askil-footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--ask-sp-4); padding-bottom: var(--ask-sp-4); }
@media (max-width:1100px){ .askil-footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; } }

.askil-footer-col--about{ padding-bottom: var(--ask-sp-2); }
.askil-footer-logo{ display:block; font-family:var(--ask-font-display); font-size:1.5rem; font-weight:700; color:#f4efe0; margin-bottom:12px; }
/* Le widget texte hérite de marges/paddings et d'un titre vide du thème
   parent (XTRA/Codevz) : le logo au-dessus tient déjà lieu de titre, donc
   ce résidu n'apporte rien et n'est ici que de l'espace non justifié. */
.askil-footer-col--about .footer_widget{ margin:0; padding:0; }
.askil-footer-col--about .codevz-widget-title{ display:none; }
.askil-footer p{ color:rgba(244,239,224,.72); max-width:60ch; font-size:.92rem; }
.askil-footer a{ color:rgba(244,239,224,.85); text-decoration:none; }
.askil-footer a:hover{ color:var(--ask-gold-soft); }

/* Colonnes : <details> ouvertes par défaut — sur desktop elles se
   comportent comme de simples blocs (le triangle et le clic sont
   neutralisés) ; sur mobile, seules celles qui restent (تواصل/الحساب)
   deviennent des blocs compacts toujours ouverts — trop courtes pour
   justifier un accordéon. */
.askil-footer-col summary{
  color:#f4efe0; font-family:var(--ask-font-display); font-size:1.05rem; font-weight:700;
  margin-bottom:12px; cursor:default; list-style:none;
}
.askil-footer-col summary::-webkit-details-marker{ display:none; }
.askil-footer-col nav{ display:flex; flex-direction:column; gap:9px; }
.askil-footer-col nav a{ font-size:.88rem; }

/* Mobile : footer réduit à l'identité, au contact et au compte —
   المدونة/التصفح et التصنيفات n'y apparaissent plus (toujours accessibles
   depuis le menu principal). Rien n'est supprimé du site, seulement de
   ce panneau, pour un pied de page court et lisible d'un coup d'œil. */
@media (max-width:720px){
  .askil-footer{ padding-top: var(--ask-sp-4); }
  .askil-footer-grid{ grid-template-columns: 1fr; gap:0; padding-bottom: var(--ask-sp-2); }
  .askil-footer-col--hide-mobile{ display:none; }
  .askil-footer-col--about{ padding-bottom: var(--ask-sp-3); }
  .askil-footer-col--compact{ border-top:1px solid rgba(244,239,224,.15); padding:14px 0; }
  .askil-footer-col--compact summary{ font-size:.95rem; margin-bottom:8px; }
  .askil-footer-col--compact:last-of-type{ border-bottom:1px solid rgba(244,239,224,.15); }
  .askil-footer-col--compact nav{ gap:7px; }
}

.askil-footer-bottom{
  border-top:1px solid rgba(244,239,224,.15); padding: var(--ask-sp-2) 0 calc(var(--ask-sp-2) + env(safe-area-inset-bottom));
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:var(--ask-font-ui); font-size:.78rem; color:rgba(244,239,224,.55);
}
.askil-footer-tag{ direction:rtl; }
@media (max-width:480px){ .askil-footer-bottom{ justify-content:center; text-align:center; } }

/* Réseaux sociaux + email — bloc compact dans la bande basse du footer,
   toujours groupé (Instagram — Facebook — Email) quel que soit l'écran. */
/* Ordre naturel (milieu de la barre) : le bouton flottant « retour en haut »
   du thème parent occupe en permanence l'angle bas-droit de l'écran — les
   icônes ne doivent jamais s'y superposer. */
.askil-footer-social{ display:flex; align-items:center; gap:8px; }
.askil-footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  background:rgba(244,239,224,.08);
  color:rgba(244,239,224,.75);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.askil-footer-social svg{ width:17px; height:17px; fill:currentColor; }
.askil-footer-social a:hover,
.askil-footer-social a:focus-visible{
  background:var(--ask-gold);
  color:var(--ask-navy);
  transform:translateY(-1px);
}
.askil-footer-social a:focus-visible{ outline:2px solid var(--ask-gold-soft); outline-offset:2px; }
@media (max-width:480px){
  .askil-footer-bottom{ padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); gap:6px; }
  .askil-footer-social{ width:100%; justify-content:center; order:0; }
  .askil-footer-social a{ width:32px; height:32px; }
  .askil-footer-social svg{ width:15px; height:15px; }
}

/* ==========================================================================
   12. COMPTES — inscription / connexion / mon espace / proposer un article
   ========================================================================== */
.askil-auth-wrap{ display:flex; justify-content:center; padding: var(--ask-sp-6) var(--ask-sp-3); }
@media (max-width:640px){ .askil-auth-wrap{ padding: var(--ask-sp-4) var(--ask-sp-2); } }
.askil-auth-card{
  width:100%; max-width:440px; background:var(--ask-paper-raised); border:1px solid var(--ask-line);
  border-radius: var(--ask-radius-l); padding: var(--ask-sp-5) var(--ask-sp-4); box-shadow: var(--ask-shadow-m); text-align:center;
}
@media (max-width:480px){ .askil-auth-card{ padding: var(--ask-sp-4) var(--ask-sp-2); } }
.askil-auth-card h1{ font-size: 1.7rem; margin-top:6px; }
.askil-auth-sub{ color:var(--ask-ink-soft); margin: 6px 0 var(--ask-sp-3); }
.askil-auth-switch{ margin-top: var(--ask-sp-3); font-family:var(--ask-font-ui); font-size:.9rem; color:var(--ask-ink-soft); }
.askil-auth-switch a{ color:var(--ask-gold-ink); font-weight:700; }

/* Saisie LTR dans les formulaires de compte (inscription/connexion/mot de
   passe oublié/réinitialisation) uniquement : nom affiché, identifiant,
   e-mail, mots de passe. Le reste de la page (libellés, titres, boutons)
   reste en arabe/RTL — seule la zone de saisie change de sens, pour que
   la ponctuation finale (point, @, etc.) tapée par l'utilisateur se
   place du bon côté. N'affecte ni le header/footer, ni les articles/
   biographies (hors du périmètre de .askil-auth-card), ni wp-admin. */
.askil-auth-card input[type="text"],
.askil-auth-card input[type="email"],
.askil-auth-card input[type="password"]{
  direction: ltr;
  text-align: left;
}
/* Le bouton "afficher/masquer" (👁) garde la position que lui donne le
   sens RTL de la page (inset-inline-end, non touché ci-dessus) : on
   aligne la réserve d'espace du champ mot de passe sur sa position
   réelle plutôt que sur le sens — désormais LTR — du champ lui-même. */
.askil-auth-card .askil-password-wrap input[type="password"]{
  padding-inline-end: 14px !important;
  padding-left: 44px !important;
}

.askil-form{ display:flex; flex-direction:column; gap:16px; text-align:start; }
.askil-field{ display:flex; flex-direction:column; gap:6px; }
.askil-field > span, .askil-field legend{ font-family:var(--ask-font-ui); font-size:.85rem; font-weight:700; color:var(--ask-ink); padding:0; }
.askil-field input[type="text"], .askil-field input[type="email"], .askil-field input[type="password"], .askil-field input[type="search"], .askil-field textarea, .askil-field input[type="file"]{
  border:1px solid var(--ask-line); border-radius:10px; padding:12px 14px; font-family:var(--ask-font-ui); font-size:1rem;
  background:var(--ask-paper); color:var(--ask-ink); width:100%;
}
.askil-field textarea{ resize:vertical; font-family:var(--ask-font-body); line-height:1.7; }
.askil-field input:focus, .askil-field textarea:focus{ outline:none; border-color:var(--ask-gold); box-shadow:0 0 0 3px var(--ask-gold-soft); }
.askil-field-hint{ font-size:.78rem; color:var(--ask-ink-faint); }
.askil-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .askil-field-row{ grid-template-columns:1fr; } }
.askil-checkbox{ display:flex; align-items:flex-start; gap:9px; font-family:var(--ask-font-ui); font-size:.86rem; color:var(--ask-ink-soft); cursor:pointer; }
.askil-checkbox input{ margin-top:3px; width:18px; height:18px; flex-shrink:0; accent-color:var(--ask-gold); }
.askil-checkbox-group{ display:flex; flex-direction:column; gap:10px; }
.askil-btn--block{ width:100%; justify-content:center; }
.askil-form-actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:480px){ .askil-form-actions{ flex-direction:column; } .askil-form-actions .askil-btn{ width:100%; justify-content:center; } }

/* Champ « Ajouter des fichiers » — zone tactile large (mobile), remplace
   visuellement l'input natif sans changer son comportement. */
.askil-media-drop{
  display:flex; align-items:center; gap:12px; border:1.5px dashed var(--ask-line); border-radius:12px;
  padding:16px; cursor:pointer; color:var(--ask-ink-soft); font-family:var(--ask-font-ui); font-size:.92rem;
  transition:border-color var(--ask-t-fast) var(--ask-ease), background var(--ask-t-fast) var(--ask-ease);
}
.askil-media-drop:hover, .askil-media-drop:focus-within{ border-color:var(--ask-gold); background:var(--ask-gold-soft); }
.askil-media-drop svg{ flex-shrink:0; color:var(--ask-gold-ink); }
.askil-media-drop input[type="file"]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}
.askil-media-list{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.askil-media-list li{
  display:flex; align-items:center; gap:10px; background:var(--ask-paper-raised); border:1px solid var(--ask-line);
  border-radius:9px; padding:9px 12px; font-family:var(--ask-font-ui); font-size:.85rem;
}
.askil-media-list .name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ask-ink); }
.askil-media-list .meta{ color:var(--ask-ink-faint); font-family:var(--ask-font-mono); font-size:.72rem; white-space:nowrap; }
.askil-media-list .remove{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:none; background:transparent; color:var(--ask-ink-faint);
  cursor:pointer; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.askil-media-list .remove:hover{ background:var(--ask-gold-soft); color:var(--ask-gold-ink); }
.askil-media-error{ color:#a3382c; font-size:.82rem; margin:0; }
@media (max-width:480px){ .askil-media-drop{ padding:14px 12px; font-size:.86rem; } }

.askil-notice{ border-radius:10px; padding:12px 16px; font-size:.9rem; margin-bottom:16px; text-align:start; }
.askil-notice--error{ background:var(--critical-soft,#f6e0dc); color:#a92e23; border:1px solid #e4b6ac; }
.askil-notice--success{ background:var(--ask-low-soft,#dcece1); color:#2f6349; border:1px solid #a9d3bb; }
.askil-notice--info{ background:var(--ask-gold-soft); color:var(--ask-gold-ink); border:1px solid var(--ask-line); font-size:.82rem; word-break:break-all; }

.askil-dashboard-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: var(--ask-sp-4); }
.askil-proposals{ display:flex; flex-direction:column; gap:10px; margin-bottom: var(--ask-sp-3); }
.askil-proposal-row{ border:1px solid var(--ask-line-soft); border-radius:12px; padding:14px 16px; background:var(--ask-paper-raised); }
.askil-proposal-main{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.askil-proposal-title{ font-family:var(--ask-font-display); font-size:1.02rem; flex:1; min-width:160px; }
.askil-proposal-date{ font-family:var(--ask-font-mono); font-size:.74rem; color:var(--ask-ink-faint); }
.askil-editor-note{ margin-top:10px; padding:10px 12px; background:var(--ask-paper-sunken); border-radius:8px; font-size:.86rem; color:var(--ask-ink-soft); }
.askil-proposal-actions{ margin-top:8px; }

.askil-status-badge{ font-family:var(--ask-font-ui); font-size:.68rem; font-weight:700; padding:4px 11px; border-radius:999px; flex-shrink:0; }
.askil-status-badge--draft{ background:var(--ask-paper-sunken); color:var(--ask-ink-soft); }
.askil-status-badge--pending{ background:var(--ask-gold-soft); color:var(--ask-gold-ink); }
.askil-status-badge--correction{ background:#fde3c7; color:#8a4b00; }
.askil-status-badge--refused{ background:var(--terracotta-soft,#f3e0da); color:var(--ask-terracotta); }
.askil-status-badge--published{ background:var(--low-soft,#dcece1); color:var(--ask-success,#2f6349); }

.askil-password-wrap{ position:relative; display:block; }
.askil-password-wrap input{ padding-inline-end:44px !important; }
.askil-password-toggle{ position:absolute; inset-inline-end:6px; top:50%; transform:translateY(-50%); border:none; background:none; font-size:1.05rem; opacity:.55; cursor:pointer; padding:6px; line-height:1; }
.askil-password-toggle:hover{ opacity:1; }

.askil-reminder{ display:flex; gap:10px; align-items:flex-start; background:var(--ask-gold-soft); border:1px solid var(--ask-line); border-radius:10px; padding:12px 14px; font-size:.85rem; color:var(--ask-gold-ink); margin-top:4px; }
.askil-reminder svg{ flex-shrink:0; margin-top:2px; }

.askil-alert-banner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fde3c7; border:1px solid #e8b877; color:#7a4400; border-radius:12px; padding:14px 18px; margin-bottom: var(--ask-sp-3); }
.askil-alert-banner strong{ color:#5c3300; }
.askil-alert-banner a{ margin-inline-start:auto; }

.askil-account-summary{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; background:var(--ask-paper-raised); border:1px solid var(--ask-line); border-radius:14px; padding:16px 20px; margin-bottom: var(--ask-sp-3); }
.askil-account-summary .avatar{ width:52px; height:52px; border-radius:999px; background:var(--ask-gold-soft); color:var(--ask-gold-ink); display:flex; align-items:center; justify-content:center; font-family:var(--ask-font-display); font-size:1.3rem; font-weight:700; flex-shrink:0; }
.askil-account-summary .who{ flex:1; min-width:160px; }
.askil-account-summary .who strong{ font-family:var(--ask-font-display); font-size:1.1rem; display:block; }
.askil-account-summary .who span{ font-size:.82rem; color:var(--ask-ink-faint); }
.askil-stats{ display:flex; gap:18px; flex-wrap:wrap; }
.askil-stats .stat{ text-align:center; }
.askil-stats .stat b{ display:block; font-family:var(--ask-font-display); font-size:1.3rem; color:var(--ask-ink); }
.askil-stats .stat span{ font-family:var(--ask-font-ui); font-size:.7rem; color:var(--ask-ink-faint); }

.askil-status-legend{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin: var(--ask-sp-2) 0 var(--ask-sp-4); }
.askil-status-legend .item{ display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--ask-ink-soft); }
.askil-status-legend .item b{ color:var(--ask-ink); }

.askil-preview-pane{ background:var(--ask-paper-raised); border:1px dashed var(--ask-gold); border-radius:14px; padding: var(--ask-sp-3); }
.askil-preview-pane .askil-article-head h1{ font-size:1.8rem; }

/* ==========================================================================
   13. UTILITAIRES / ÉTATS
   ========================================================================== */
.askil-visually-hidden{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Filet de sécurité : la barre de navigation fixe du thème parent XTRA
   (« la barre noire ») est déjà retirée à la source (functions.php,
   dequeue de codevz-mobile-fixed-nav) — cette règle garantit qu'elle ne
   s'affiche jamais, même si un plugin la réimprime malgré tout. */
.xtra-fixed-mobile-nav, .xtra-fixed-mobile-nav-e{ display:none !important; }
body.askil-app{ padding-bottom:0 !important; }
.skip-link{ position:absolute; inset-inline-start:8px; top:-60px; background:var(--ask-ink); color:var(--ask-paper); padding:10px 16px; border-radius:8px; z-index:200; transition: top var(--ask-t-fast) var(--ask-ease); }
.skip-link:focus{ top:8px; }