/* ============================================================================
   ayoubtrhaiti.fr — theme.css
   ----------------------------------------------------------------------------
   CE FICHIER NE CONTIENT QUE DES VARIABLES. Aucune règle de mise en page.
   Pour changer une couleur, une taille ou une durée : ici, et nulle part
   ailleurs. Les composants ne connaissent que les rôles déclarés ici.

   Direction « Dojo » (maquette du 17/10/2026, planches 01 à 04) :
   le lavis d'encre des scènes de stream. Pas d'aplat : un dégradé indigo →
   prune éclairé par deux halos, des tuiles translucides posées dessus.

   Modes :
   - sans attribut sur <html>     → SOMBRE (mode par défaut, choix d'Ayoub)
   - <html data-mode="clair">     → clair (choisi, ou suivi du système en « auto »)
   L'attribut est posé par assets/js/mode.js avant le premier rendu.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Fond : trois teintes du dégradé + deux halos ----------------------- */
  --fond-a: #1b1532;                    /* indigo, départ du dégradé (haut gauche) */
  --fond-b: #2b1638;                    /* prune, à 55 % */
  --fond-c: #3b1a3c;                    /* prune claire, arrivée (bas droite) */
  --fond: linear-gradient(135deg, var(--fond-a), var(--fond-b) 55%, var(--fond-c));
  --fond-uni: #241a3a;                  /* teinte moyenne : derrière une étiquette qui coupe un filet */
  --halo-magenta: rgba(200, 60, 140, .42);   /* haut droit */
  --halo-violet:  rgba(130, 60, 190, .35);   /* bas gauche */

  /* ---- Surfaces ------------------------------------------------------------ */
  --tuile:          rgba(27, 21, 50, .35);
  --tuile-bordure:  rgba(242, 238, 247, .16);
  --tuile-survol:   rgba(242, 238, 247, .06);
  --cadre-fond:     transparent;                 /* cadre photo : passe-partout */
  --cadre-bordure:  rgba(242, 238, 247, .22);
  --champ:          rgba(27, 21, 50, .5);        /* champs de formulaire */
  --champ-bordure:  rgba(242, 238, 247, .22);
  --filet:          rgba(242, 238, 247, .14);
  --filet-faible:   rgba(242, 238, 247, .10);
  --filigrane:      rgba(242, 238, 247, .07);    /* contour du kanji géant */
  --reserve:        linear-gradient(135deg, #241933, #3a2547);   /* image manquante */
  --voile-photo:    linear-gradient(180deg, rgba(27, 21, 50, 0) 0%, rgba(27, 21, 50, .9) 100%);

  /* ---- Texte ------------------------------------------------------------- */
  --texte:     #f2eef7;   /* 15,2:1 sur le fond */
  --texte-2:   #d4cae2;   /* paragraphes, 11,4:1 */
  --etiquette: #b9aecb;   /* mono, capitales, 8,2:1 */
  --texte-3:   #9d93b3;   /* appoint (copyright, notes), 5:1 */
  --sur-photo:   #f2eef7; /* texte posé sur une photo voilée, dans les deux modes */
  --sur-photo-2: #c4b5fd;

  /* ---- Accents ------------------------------------------------------------- */
  --accent:          #c4b5fd;   /* liens, actif, numéros de chapitre : lavande */
  --accent-2:        #d9468f;   /* DÉCORATIF seulement : enso, progression, liseré */
  --accent-2-texte:  #f27ab8;   /* la même famille, lisible en petit (5,7:1) */
  --sceau:     #7c4dff;         /* le sceau 熊, identique dans les deux modes */
  --sur-sceau: #ffffff;
  --discord:        #5865f2;    /* charte Discord : liseré, étiquette */
  --discord-bouton: #4752c4;    /* bouton plein, blanc dessus 6,5:1 */
  --sur-discord:    #ffffff;
  --en-ligne:   #3ba55d;
  --hors-ligne: #8a7fa0;
  --erreur:     #ff8aa5;

  /* ---- Boutons ------------------------------------------------------------- */
  --bouton:         #c4b5fd;
  --sur-bouton:     #1b1532;
  --bouton-survol:  #d7ccff;
  --bouton-contour: rgba(242, 238, 247, .3);

  /* ---- Vitrine des logos partenaires ------------------------------------------ */
  /* Les kits fournis (Hostinger, Instant Gaming, Elementor) sont dessinés pour un
     fond sombre : vitrine sombre par défaut, blanche pour un logo prévu sur clair. */
  --logo-fond:         #1b1532;
  --logo-bordure:      rgba(242, 238, 247, .2);
  --logo-fond-clair:   #ffffff;
  --logo-bordure-clair:rgba(27, 21, 50, .14);

  /* ---- Tuiles colorées ------------------------------------------------------- */
  --discord-tuile-bordure: rgba(88, 101, 242, .5);
  --discord-tuile-fond:    linear-gradient(160deg, rgba(88, 101, 242, .16), transparent 70%);
  --vedette-bordure:       rgba(196, 181, 253, .5);
  --vedette-fond:          linear-gradient(160deg, rgba(124, 77, 255, .22), transparent 70%);
  --partenaire-bordure:    rgba(217, 70, 143, .5);
  --partenaire-fond:       linear-gradient(160deg, rgba(217, 70, 143, .18), transparent 70%);

  /* ---- Enso, progression, ours ------------------------------------------------ */
  --enso-a: #f2eef7;
  --enso-b: #c4b5fd;
  --enso-c: #d9468f;
  --progression:      linear-gradient(90deg, #c4b5fd, #d9468f);
  --progression-fond: rgba(242, 238, 247, .10);
  --ours-ombre: drop-shadow(0 0 40px rgba(185, 163, 255, .22));   /* lueur lavande diffuse */
  --sceau-ombre: 0 8px 24px rgba(124, 77, 255, .35);

  /* ---- Barre et rail ------------------------------------------------------------ */
  --rail-fond:     rgba(27, 21, 50, .94);
  --rail-bordure:  rgba(242, 238, 247, .16);
  --rail-actif:    rgba(242, 238, 247, .10);
  --rail-ombre:    0 12px 32px rgba(10, 6, 24, .35);
  --bascule-actif: rgba(242, 238, 247, .12);

  /* ---- Typographie : trois voix (planche 03) ---------------------------------- */
  --police-titre: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  --police-texte: "IBM Plex Sans", "Shippori Mincho", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --police-mono:  "IBM Plex Mono", "Shippori Mincho", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-display:   clamp(64px, 8vw, 120px);   /* AyoubTRHX, 404 */
  --t-h2:        clamp(36px, 4vw, 52px);    /* titres de chapitre */
  --t-h3:        clamp(20px, 1.7vw, 24px);  /* titres de tuile */
  --t-h3-grand:  clamp(28px, 2.6vw, 36px);  /* tuile vedette */
  --t-kanji-cote: 22px;
  --t-corps:     18px;
  --t-corps-mobile: 17px;
  --t-petit:     14px;
  --t-mini:      13px;
  --t-etiquette: 11px;
  --t-rail:      12px;
  --t-code:      15px;

  --il-display: .9;
  --il-h2:      1.05;
  --il-h3:      1.2;
  --il-corps:   1.65;
  --il-petit:   1.55;
  --esp-display:   -.02em;
  --esp-etiquette: .26em;
  --esp-rail:      .14em;
  --esp-code:      .14em;
  --mesure: 62ch;

  /* ---- Espacements (base 4) -------------------------------------------------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;
  --gouttiere: clamp(20px, 4.4vw, 64px);   /* marge latérale de la page */
  --cote-l: 40px;                          /* largeur de la bande kanji latérale */

  /* ---- Rayons -------------------------------------------------------------------- */
  --r-sceau: 10px;
  --r-m:     12px;   /* boutons, champs, images dans leur cadre */
  --r-l:     20px;   /* tuiles, cadres, rail mobile */
  --r-xl:    24px;
  --r-rond:  999px;

  /* ---- Gabarit ------------------------------------------------------------------- */
  --barre-h:       56px;   /* barre de navigation desktop (bas d'écran) */
  --barre-marge:   24px;   /* distance de la barre au bord bas */
  --progression-h: 3px;
  --rail-mobile-h: 64px;   /* pilule de navigation tablette/mobile */
  --cible:   44px;         /* minimum tactile */
  --bouton-h: 50px;
  --bouton-h-petit: 36px;

  /* ---- Mouvement (planche 04) : une courbe, deux durées ------------------------------ */
  --courbe:     cubic-bezier(.22, 1, .36, 1);
  --d-micro:    240ms;    /* survol, bascule de mode, copie */
  --d-entree:   600ms;    /* entrées de chapitre */
  /* Transition d'un chapitre à l'autre (prototype navigable BearSensei) : le rouleau glisse en 1,05 s
     avec une courbe lente-rapide-lente, puis le contenu du chapitre atteint se révèle en cascade */
  --d-chapitre:      1050ms;
  --courbe-chapitre: cubic-bezier(.77, 0, .18, 1);
  --d-revele:        800ms;
  --courbe-revele:   cubic-bezier(.2, .8, .2, 1);
  --revele-depart:   450ms;   /* premier élément révélé, après le départ du glissement */
  --revele-pas:      150ms;   /* écart entre deux éléments */
  --d-mode:     240ms;
  --cascade:    60ms;     /* écart entre deux tuiles d'un bento */
  --parallaxe-fond:   .85;
  --parallaxe-visuel: 1.06;
}

/* ---- MODE CLAIR : « le même lavis, sur papier washi » (planche 01) -------------- */
:root[data-mode="clair"] {
  color-scheme: light;

  --fond-a: #f4f1f8;
  --fond-b: #f4f1f8;
  --fond-c: #f4f1f8;
  --fond: #f4f1f8;
  --fond-uni: #f4f1f8;
  --halo-magenta: rgba(200, 60, 140, .16);
  --halo-violet:  rgba(130, 60, 190, .14);

  --tuile:         rgba(255, 255, 255, .72);
  --tuile-bordure: rgba(27, 21, 50, .14);
  --tuile-survol:  #ffffff;
  --cadre-fond:    rgba(255, 255, 255, .6);
  --cadre-bordure: rgba(27, 21, 50, .18);
  --champ:         #ffffff;
  --champ-bordure: rgba(27, 21, 50, .2);
  --filet:         rgba(27, 21, 50, .14);
  --filet-faible:  rgba(27, 21, 50, .10);
  --filigrane:     rgba(27, 21, 50, .08);

  --texte:     #1b1532;   /* encre, 15,6:1 */
  --texte-2:   #5b5470;   /* 6,4:1 */
  --etiquette: #6f6886;   /* 4,7:1 */
  --texte-3:   #6f6886;

  --accent:         #5a3dd8;   /* 6,3:1 */
  --accent-2:       #b8347a;
  --accent-2-texte: #b8347a;   /* 5,5:1 */
  --en-ligne:   #2b8a4b;   /* 3,6:1 sur washi */
  --hors-ligne: #8a7fa0;
  --erreur:     #c0254f;

  --bouton:         #1b1532;
  --sur-bouton:     #ffffff;
  --bouton-survol:  #2b2350;
  --bouton-contour: rgba(27, 21, 50, .22);

  --logo-bordure: rgba(27, 21, 50, .14);

  --discord-tuile-fond: linear-gradient(160deg, rgba(88, 101, 242, .14), rgba(255, 255, 255, .6));
  --vedette-fond:       linear-gradient(160deg, rgba(124, 77, 255, .14), rgba(255, 255, 255, .7));
  --partenaire-fond:    linear-gradient(160deg, rgba(217, 70, 143, .12), rgba(255, 255, 255, .75));

  --enso-a: #1b1532;
  --enso-b: #7c4dff;
  --enso-c: #d9468f;
  --progression-fond: rgba(27, 21, 50, .10);
  --ours-ombre: drop-shadow(0 24px 32px rgba(22, 19, 43, .18));   /* ombre portée douce */
  --sceau-ombre: 0 8px 20px rgba(124, 77, 255, .25);

  --rail-fond:     rgba(244, 241, 248, .96);
  --rail-bordure:  rgba(27, 21, 50, .14);
  --rail-actif:    #1b1532;
  --rail-ombre:    0 12px 32px rgba(27, 21, 50, .14);
  --bascule-actif: rgba(27, 21, 50, .08);
}

/* ---- Mouvement réduit : tout se fige, rien ne casse ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 0ms; --d-entree: 0ms; --d-chapitre: 0ms; --d-mode: 0ms; --cascade: 0ms; --d-revele: 0ms; --revele-depart: 0ms; --revele-pas: 0ms;
  }
}