/* =============================================================================
   CHARTE GRAPHIQUE — excel-tutorial.com (EN) · v1.0.2
   Adaptée de la charte excel-exercice.com pour le thème GeneratePress.
   Enqueuée par functions.php du thème enfant generatepress-child.
   -----------------------------------------------------------------------------
   PRINCIPE DE COULEUR (identique au site FR)
   - VERT  #107C41 = marque / navigation / apprentissage
   - AMBRE #8F6316 = commerce / action / premium
   - BLEU  #185ABD = couleur de Word (StyleCleaner, documents Word)
     ⛔ 19/08/2026 : ce bleu servait au BADGE IMAGE « Microsoft MVP ». Ce badge est retiré
     du site et ne revient pas. En revanche le TITRE s écrit « ex-Microsoft MVP 2010-2025 ».
   ============================================================================= */

/* ── POLICES ── Titres & corps : Inter · Labels : Space Mono */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ── TOKENS (copie conforme du site FR — source unique des couleurs) ──────── */
:root {
  --c-brand:        #107C41;
  --c-brand-dark:   #0b5a2f;
  --c-brand-soft:   #dceee3;
  --c-brand-pale:   #eef6f1;
  --c-brand-ink:    #0e3a22;

  --c-card:         #e4f5ea;
  --c-card-bd:      #c3ddc9;
  --c-niv-1:        #8ecfae;
  --c-niv-2:        #4faa7c;
  --c-niv-3:        #2b8a58;
  --c-niv-4:        #1d6b42;
  --c-medal-1:      #fdf3d2;
  --c-medal-2:      #f7e5aa;
  --c-medal-bd:     #d9ab3d;
  --c-medal-ink:    #6b4a0d;

  --c-accent:       #a8741a;
  --c-accent-dark:  #855a12;
  --c-accent-soft:  #f5ecd6;
  --c-accent-pale:  #fbf6e9;
  --c-accent-ink:   #4d370a;
  --c-btn:          #8F6316;
  --c-btn-hover:    #7B5513;
  --c-mvp:          #185ABD;
  --c-locked:       #d60a0a;

  --c-ink:          #0e1814;
  --c-text:         #36443e;
  --c-muted:        #677571;
  --c-border:       #d4dcd7;

  --c-bg:           #f7f7f7;   /* fond du body — Fred 03/11/2026 (était #F0F4F0) */
  --c-block:        #f9f4fc;   /* fond articles + widgets — Fred 03/11/2026 */
  --c-bg-alt:       #E4EBE5;
  --c-surface:      #ffffff;

  --c-dark-1:       #0e2a1c;
  --c-dark-2:       #0a1f15;
  --c-dark-gold:    #e7c982;
  --c-dark-accent:  #7bd29b;
  --c-dark-ink:     #ffffff;
  --c-dark-text:    #c3d8ca;
  --c-dark-soft:    #bfe6cf;
  --c-dark-dot:     #39d07f;
  --c-dark-film:    rgba(255,255,255,.06);
  --c-dark-line:    rgba(255,255,255,.14);

  --t-xls:  #107C41;  --t-xls-bg:  #eaf4ee;
  --t-doc:  #185ABD;  --t-doc-bg:  #eaf0f9;
  --t-ppt:  #C43E1C;  --t-ppt-bg:  #fbeee9;
  --t-pbi:  #E8B400;  --t-pbi-bg:  #fdf4c6;
  --t-quiz: #107C41;  --t-quiz-bg: #e6f3ec;

  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fs-h1: clamp(36px, 5vw, 56px);
  --fs-h2: clamp(28px, 3.4vw, 40px);
  --fs-h3: clamp(20px, 2.2vw, 26px);
  --fs-h4: 18px;
  --fs-lede: clamp(17px, 1.6vw, 19px);
  --fs-body: 16px;
  --fs-reading: 19px;
  --fs-small: 13.5px;
  --fs-label: 12px;

  --radius:    14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow:    0 1px 0 rgba(14,24,20,.03), 0 2px 4px rgba(14,24,20,.05), 0 12px 28px -16px rgba(14,24,20,.14);
  --shadow-hover: 0 12px 32px -12px rgba(14,24,20,.18);

  --maxw: 1180px;
  --gutter: 28px;
}

/* ── BASE TYPOGRAPHIQUE ──────────────────────────────────────────────────── */
html body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { text-wrap: pretty; }

a { color: var(--c-brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
strong, b { font-weight: 600; color: var(--c-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   INTÉGRATION GENERATEPRESS
   GP est léger : peu de surcharges nécessaires, sélecteurs natifs GP.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── EN-TÊTE : surface blanche, liseré doux ──────────────────────────────── */
.site-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.main-title a, .site-branding .main-title a { color: var(--c-ink); }

/* Menu principal : encre → vert marque au survol (comme le FR) */
.main-navigation { background: var(--c-surface); }
.main-navigation .main-nav ul li a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--c-brand);
}

/* Sous-menus : carte blanche, survol vert pâle (recette FR) */
.main-navigation ul ul {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(14,24,20,.08);
}
.main-navigation ul ul li a { color: var(--c-text); }
.main-navigation ul ul li a:hover { color: var(--c-brand); background: var(--t-xls-bg); }

/* ── ARTICLES (zone de lecture) ──────────────────────────────────────────── */
/* Cadre article = carte blanche sur fond gris-vert (décision FR conservée) */
.site-content .content-area .site-main article,
.single .inside-article, .page .inside-article {
  background: var(--c-block);
}

/* Titres d'articles : vert de marque + Inter (décision Fred 04/06/2026) */
h1.entry-title,
.entry-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--c-brand);
  font-family: var(--font-display);
}

/* Corps d'article : taille de lecture confortable */
.entry-content,
.entry-content p,
.entry-content li {
  font-size: var(--fs-reading);
  font-family: var(--font-body);
}
.entry-content :is(ul, ol, li) { color: var(--c-text); }

/* Blocs de code (=IF(...)…) : Space Mono */
.entry-content code, .entry-content pre { font-family: var(--font-mono); }

/* ── SIDEBAR : widgets en cartes blanches.
   ⚠️ MEDIAVINE : ne styliser QUE .widget, JAMAIS les conteneurs de pub. ───── */
.sidebar .widget {
  background: var(--c-block);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}

/* ── FOOTER (contenu injecté par functions.php, hook GP) ─────────────────── */
/* Le plugin Themify Builder Pro injecte encore son gabarit de footer (28552,
   avec l'ancien copyright excel-exercice.com/2024) même sous GeneratePress.
   On le masque ici, côté thème enfant uniquement — le site Themify actuel
   n'est pas concerné. Le plugin sera désactivé après la bascule. */
#themify_builder_content-28552 { display: none; }
.site-footer { background: var(--c-bg-alt); }
.et-footer {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-muted);
  padding: 26px 16px;
}
.et-footer a { color: var(--c-brand-dark); font-weight: 500; }
.et-footer .et-footer-links { margin-bottom: 8px; }
.et-footer .et-footer-links a { margin: 0 12px; }

/* ── COMPOSANTS CHARTE (identiques au FR : réutilisables partout) ────────── */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
  color: var(--c-brand-dark); background: var(--c-brand-soft);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand); }
.pill.pill--accent { color: var(--c-accent-dark); background: var(--c-accent-soft); }
.pill.pill--accent .dot { background: var(--c-accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  padding: 13px 24px; border-radius: var(--radius-sm); border: none;
  cursor: pointer; text-decoration: none;
  transition: box-shadow .15s, transform .15s; /* jamais background-color (bug Chrome + vars) */
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--brand { background: var(--c-brand); color: #fff; box-shadow: 0 8px 22px -6px rgba(16,124,65,.45); }
.btn--brand:hover { background: var(--c-brand-dark); }
.btn--buy { background: var(--c-btn); color: #fff; box-shadow: 0 8px 22px -6px rgba(143,99,22,.45); }
.btn--buy:hover { background: var(--c-btn-hover); }
.btn--ghost { background: transparent; color: var(--c-accent-dark); border: 1px solid rgba(0,0,0,.18); }
.btn--ghost:hover { color: var(--c-accent); border-color: var(--c-accent); background: transparent; }
.btn--disabled, .btn:disabled { background: #c8d0cb; color: #fff; box-shadow: none; cursor: not-allowed; pointer-events: none; }

.card {
  position: relative; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--c-accent); box-shadow: var(--shadow-hover); }

.text-muted { color: var(--c-muted); }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--c-text); }
.mono { font-family: var(--font-mono); }
.wrap, .container-charte { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }