/* ============================================================
   LIY10.LEARNING — JETONS DE DESIGN
   ------------------------------------------------------------
   C’EST LE SEUL FICHIER A CHANGER POUR TOUCHER AUX COULEURS.
   Tout le reste (site + application) ne lit que ces variables :
   aucune couleur n’est ecrite en dur ailleurs.

   PARTI PRIS : fond NOIR, et ce sont LES COULEURS DES QUATRE
   LOGICIELS qui portent l’interface. Il n’y a pas de couleur de
   marque inventee — l’application prend la couleur du parcours
   dans lequel on se trouve.
   ============================================================ */

:root {
  /* ---------- fonds et surfaces ---------- */
  --fond:        #000000;
  --fond-2:      #07090A;
  --surface:     #101315;
  --surface-2:   #171B1E;
  --surface-3:   #1F2428;
  --bord:        #272D31;
  --bord-fort:   #3A4247;

  /* ---------- texte ---------- */
  --texte:       #FFFFFF;
  --texte-2:     #9AA4AA;
  --texte-3:     #69737A;

  /* ---------- LES LOGICIELS ---------- */
  --excel:       #1FBF74;
  --word:        #2E8BE0;
  --ppt:         #F2762F;
  --pbi:         #E8B412;
  --sur-pbi:     #181203;
  --pbi-sourd:   #75590A;
  --access:      #E0457B;
  --sql:         #CC2927;
  --automate:    #7A5CFA;
  --fabric:      #14B8A6;

  /* ---------- l’accent courant ----------
     Repeint a chaque parcours (voir [data-parcours] plus bas).
     Hors parcours, on prend le vert : c’est la premiere serie. */
  --accent:      var(--excel);
  --accent-sourd: #0E5836;
  --sur-accent:  #04120B;

  /* le degrade des quatre, pour tout ce qui n’appartient
     a aucun logiciel en particulier (logo, accueil, ligues) */
  --quatre: linear-gradient(100deg, #1FBF74 0%, #2E8BE0 34%, #F2762F 68%, #E8B412 100%);

  /* ---------- jeu ---------- */
  --or:          #F5C242;
  --flamme:      #FF8A3D;
  --vie:         #4FB8FF;
  --succes:      #1FBF74;
  --danger:      #E5484D;

  /* ---------- typographie ---------- */
  --police: 'Poppins', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --police-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;

  /* ---------- formes ---------- */
  --r-s:  10px;
  --r-m:  16px;
  --r-l:  22px;
  --r-xl: 30px;

  /* ---------- ombres ---------- */
  --ombre-1: 0 2px 8px rgba(0, 0, 0, .6);
  --ombre-2: 0 12px 32px rgba(0, 0, 0, .7);
  --ombre-3: 0 26px 64px rgba(0, 0, 0, .8);

  /* ---------- mesures ---------- */
  --barre-haute: 64px;
  --barre-basse: 70px;
  --large-max: 1180px;

  --transition: 180ms cubic-bezier(.4, 0, .2, 1);
  --ressort: cubic-bezier(.2, 1.4, .4, 1);
  --doux: cubic-bezier(.16, .84, .3, 1);

  /* ---------- l’editeur de code (exercices « Exécuter ») ----------
     TOUJOURS SOMBRE, quel que soit le theme : c’est l’editeur. */
  --ide-fond:    #0D1117;
  --ide-tete:    #161B22;
  --ide-bord:    #30363D;
  --ide-texte:   #E6EDF3;
  --ide-ligne:   #6E7681;
  --c-mot:       #FF7B72;
  --c-fn:        #D2A8FF;
  --c-txt:       #A5D6FF;
  --c-num:       #79C0FF;
  --c-com:       #8B949E;
  --c-col:       #FFA657;
  --c-tab:       #7EE787;

  /* ---------- ce qui sort : TOUJOURS CLAIR, comme le logiciel ---------- */
  --sortie-fond:  #FFFFFF;
  --sortie-toile: #F3F2F1;
  --sortie-texte: #201F1E;
  --sortie-pale:  #605E5C;
  --sortie-bord:  #D4D4D4;
  --grille-tete:  #F3F3F3;
  --grille-ecrite:#E6F4EA;
  --grille-cadre: #107C41;
  --msg-tete:     #FFFFFF;
  --msg-bouton:   #0067C0;
  --pbi-carte:    #FFFFFF;
  --pbi-barre:    #118DFF;
  --erreur-fond:  #FDE7E9;
  --erreur-texte: #A4262C;
}

/* ============================================================
   L’APPLICATION SE RECOLORE SELON LE PARCOURS
   Une seule ligne de JavaScript pose l’attribut sur <body>, et
   toute l’interface suit : boutons, barre du bas, chemin,
   bonnes reponses, barres de progression.
   ============================================================ */
[data-parcours="excel"]      { --accent: var(--excel); --accent-sourd: #0E5836; --sur-accent: #04120B; }
[data-parcours="word"]       { --accent: var(--word);  --accent-sourd: #14446E; --sur-accent: #04121E; }
[data-parcours="powerpoint"] { --accent: var(--ppt);   --accent-sourd: #7A3A14; --sur-accent: #1A0C04; }
[data-parcours="powerbi"]    { --accent: var(--pbi);   --accent-sourd: #75590A; --sur-accent: #181203; }
[data-parcours="access"]     { --accent: var(--access); --accent-sourd: #7A1E3F; --sur-accent: #FFFFFF; }
[data-parcours="sql"]        { --accent: var(--sql);   --accent-sourd: #6E1E1C; --sur-accent: #FFFFFF; }
[data-parcours="automate"]   { --accent: var(--automate); --accent-sourd: #3F2A99; --sur-accent: #FFFFFF; }
[data-parcours="fabric"]     { --accent: var(--fabric); --accent-sourd: #0A5F56; --sur-accent: #04150F; }

/* ============================================================
   LE THEME CLAIR
   ------------------------------------------------------------
   L’application suit le reglage du telephone : sombre si le
   telephone est en sombre, clair s’il est en clair. On peut
   aussi forcer l’un ou l’autre depuis le Profil.

   C’est JavaScript qui tranche et qui pose data-theme sur
   <html> (voir appareil.js). Aucune media-query ici : une
   valeur explicite est plus simple a comprendre, et elle rend
   le reglage manuel gratuit.

   LE SITE SUIT LUI AUSSI LE TELEPHONE (demande de Cedric, 01/10/2026) :
   clair en clair, sombre en sombre.

   Les couleurs des logiciels sont FONCEES ici : le jaune de
   Power BI sur fond blanc ne se lit pas. Et le texte pose SUR
   un accent passe au blanc.
   ============================================================ */
:root[data-theme="clair"] {
  --fond:        #FFFFFF;
  --fond-2:      #F7F8F9;
  --surface:     #F4F6F7;
  --surface-2:   #EDF0F2;
  --surface-3:   #DFE5E9;
  --bord:        #D6DDE2;
  --bord-fort:   #AEB9C0;

  --texte:       #0C1013;
  --texte-2:     #4A555C;
  --texte-3:     #77838A;

  --excel:       #0F9A5C;
  --word:        #1C6DBC;
  --ppt:         #C45312;
  --pbi:         #8F6B06;
  --sur-pbi:     #FFFFFF;
  --pbi-sourd:   #5A4304;
  --access:      #B0285A;
  --sql:         #A32220;
  --automate:    #5B3FD6;
  --fabric:      #0B7C70;

  --accent:       var(--excel);
  --accent-sourd: #0A6E41;
  --sur-accent:   #FFFFFF;

  --or:          #B07C06;
  --flamme:      #C85A18;
  --vie:         #1B7FC4;
  --succes:      #0F9A5C;
  --danger:      #C42127;

  --ombre-1: 0 2px 8px rgba(12, 16, 19, .10);
  --ombre-2: 0 12px 32px rgba(12, 16, 19, .13);
  --ombre-3: 0 26px 64px rgba(12, 16, 19, .16);
}

:root[data-theme="clair"] [data-parcours="excel"]      { --accent: var(--excel); --accent-sourd: #0A6E41; --sur-accent: #FFFFFF; }
:root[data-theme="clair"] [data-parcours="word"]       { --accent: var(--word);  --accent-sourd: #14508B; --sur-accent: #FFFFFF; }
:root[data-theme="clair"] [data-parcours="powerpoint"] { --accent: var(--ppt);   --accent-sourd: #8E3B0C; --sur-accent: #FFFFFF; }
:root[data-theme="clair"] [data-parcours="powerbi"]    { --accent: var(--pbi);   --accent-sourd: #6B5004; --sur-accent: #FFFFFF; }
:root[data-theme="clair"] [data-parcours="access"]     { --accent: var(--access); --accent-sourd: #7E1C40; --sur-accent: #FFFFFF; }
:root[data-theme="clair"] [data-parcours="sql"]        { --accent: var(--sql);   --accent-sourd: #8F2A22; --sur-accent: #FFFFFF; }
:root[data-theme="clair"] [data-parcours="automate"]   { --accent: var(--automate); --accent-sourd: #3B2896; --sur-accent: #FFFFFF; }
:root[data-theme="clair"] [data-parcours="fabric"]     { --accent: var(--fabric); --accent-sourd: #075349; --sur-accent: #FFFFFF; }

/* Le titre d’une tuile prend la couleur VIVE du logiciel, posee
   en style en ligne par le JavaScript : sur fond blanc, le jaune
   de Power BI devient illisible. En clair, on garde la couleur
   sur la barre et la pastille, et le titre passe en noir. */
:root[data-theme="clair"] .tuile-parcours h3 { color: var(--texte); }

/* Le bandeau « rien ne s’enregistre » suit lui aussi le theme. */
:root[data-theme="clair"] .bandeau-appareil {
  background: #FFF8E6;
  border-top-color: #E8D9A8;
  color: #4A3B10;
}
:root[data-theme="clair"] .bandeau-appareil .fermer {
  border-color: #E8D9A8;
  color: #4A3B10;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overscroll-behavior-y: none; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

* { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--accent); color: var(--sur-accent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bord); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--bord-fort); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}