/*
Theme Name:   Le code c'est le code
Description:  Thème enfant Divi de lecodecestlecode.site. Polices auto-hébergées, variables de design et styles des tutos.
Author:       Laetitia Pottiez
Template:     Divi
Version:      1.0.0
Text Domain:  lecode
*/

/* ==========================================================
   1. Polices auto-hébergées (aucun appel à Google)
   ========================================================== */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");}

/* ==========================================================
   2. Variables de design
   Mêmes valeurs que dans le Variable Manager de Divi.
   Changer une valeur ici met à jour tous les tutos.
   ========================================================== */
:root{
  --lc-fond:#FFFFFF;
  --lc-encre:#111111;
  --lc-gris:#5F5F5F;
  --lc-filet:#D9D9D9;
  --lc-code:#F4F4F2;
  --lc-accent:#D10F0A;

  --lc-police:"Schibsted Grotesk", system-ui, sans-serif;
  --lc-mono:"JetBrains Mono", ui-monospace, monospace;

  --lc-esp-1:8px;
  --lc-esp-2:16px;
  --lc-esp-3:32px;
  --lc-esp-4:64px;

  --lc-rayon:4px;
  --lc-lecture:720px;
}

/* ==========================================================
   3. Socle
   Divi garde la main sur les modules : ceci pose juste
   une base propre en dessous.
   ========================================================== */
body{background:var(--lc-fond);color:var(--lc-encre);font-family:var(--lc-police);-webkit-font-smoothing:antialiased;}
::selection{background:var(--lc-encre);color:var(--lc-fond);}
:focus-visible{outline:2px solid var(--lc-accent);outline-offset:3px;}

code,kbd,pre,samp{font-family:var(--lc-mono);}
:not(pre) > code{background:var(--lc-code);padding:.1em .35em;border-radius:var(--lc-rayon);font-size:.92em;}
pre{background:var(--lc-code);color:var(--lc-encre);border-radius:var(--lc-rayon);padding:20px 24px;overflow-x:auto;font-size:15px;line-height:1.7;}

/* ==========================================================
   4. Tutos (dans un module Code, conteneur .lc-tuto)
   ========================================================== */
.lc-tuto{max-width:var(--lc-lecture);margin:0 auto;font-family:var(--lc-police);font-size:17px;line-height:1.6;color:var(--lc-encre);}
.lc-tuto *{box-sizing:border-box;}
.lc-tuto h2,.lc-tuto h3{font-family:var(--lc-police);font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--lc-encre);padding:0;}
.lc-tuto h2{font-size:30px;margin:var(--lc-esp-4) 0 var(--lc-esp-2);}
.lc-tuto h3{font-size:21px;margin:var(--lc-esp-3) 0 var(--lc-esp-1);}
.lc-tuto p{margin:0 0 var(--lc-esp-2);padding:0;}
.lc-tuto a{color:var(--lc-encre);text-decoration:underline;text-decoration-color:var(--lc-accent);text-underline-offset:3px;}

/* Petite étiquette mono : « divi · bases », « S1 », etc. */
.lc-etiquette{font-family:var(--lc-mono);font-size:13px;color:var(--lc-gris);}

/* Bloc « Objectif » en tête de tuto */
.lc-objectif{border-top:2px solid var(--lc-encre);border-bottom:1px solid var(--lc-filet);padding:var(--lc-esp-2) 0;margin:var(--lc-esp-3) 0;}

/* Étapes numérotées 01, 02, 03 */
.lc-etapes{list-style:none;counter-reset:etape;margin:var(--lc-esp-3) 0;padding:0;}
.lc-etapes > li{counter-increment:etape;position:relative;padding:0 0 var(--lc-esp-3) 56px;margin:0;}
.lc-etapes > li::before{content:counter(etape,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:var(--lc-mono);font-weight:700;font-size:14px;color:var(--lc-accent);}
.lc-etapes > li > strong:first-child{display:block;font-size:19px;margin-bottom:4px;}

/* Encadrés : <div class="lc-note attention"> ou <div class="lc-note astuce"> */
.lc-note{background:var(--lc-code);border-radius:var(--lc-rayon);padding:var(--lc-esp-2) 20px;margin:var(--lc-esp-3) 0;}
.lc-note::before{display:block;font-family:var(--lc-mono);font-size:13px;font-weight:700;margin-bottom:4px;}
.lc-note.attention::before{content:"Attention";color:var(--lc-accent);}
.lc-note.astuce::before{content:"Astuce";color:var(--lc-encre);}

/* Captures d'écran */
.lc-tuto figure{margin:var(--lc-esp-3) 0;}
.lc-tuto figure img{display:block;max-width:100%;height:auto;border:1px solid var(--lc-filet);border-radius:var(--lc-rayon);}
.lc-tuto figcaption{font-family:var(--lc-mono);font-size:13px;color:var(--lc-gris);margin-top:var(--lc-esp-1);}

/* Bloc de code avec bouton Copier : <div class="lc-code"><pre>...</pre></div> */
.lc-code{position:relative;}
.lc-code button{position:absolute;top:8px;right:8px;min-height:36px;padding:0 12px;font-family:var(--lc-mono);font-size:12px;background:var(--lc-fond);color:var(--lc-encre);border:1px solid var(--lc-filet);border-radius:var(--lc-rayon);cursor:pointer;}
.lc-code button:hover{border-color:var(--lc-encre);}