/* MyGeek — feuille de style partagée */

:root {
  --bg: #17141c;
  --surface: #211d29;
  --text: #f5f1ec;
  --text-secondary: #a79db0;
  --border: #322c3d;
  --amber: #f5a93f;
  --teal: #2fd1c0;
  --coral: #f2617a;
  --blue: #3d8bfd;
  --radius: 14px;
}

/* Theme clair/sombre/auto (17 sept.) : un seul accent (teal) pilote toute l'UI ; amber/coral
   restent reserves au logo et a quelques usages semantiques ponctuels (etoiles d'avis,
   encarts "Attention"/"Important"). En clair, les trois couleurs sont assombries (pas juste
   reutilisees telles quelles) pour garder un bon contraste sur fond blanc. data-theme est pose
   sur <html> par un petit script inline en tete de chaque page (anti-flash) et mis a jour par
   le selecteur 3 positions du header (voir footer.html). "auto" suit prefers-color-scheme et
   n'a pas besoin d'etre repete ici : sans choix explicite, :root garde ses valeurs sombres. */
:root[data-theme="light"] {
  --bg: #f7f4ee;
  --surface: #ffffff;
  --text: #1c1822;
  --text-secondary: #635c6d;
  --border: #e4dfd3;
  --amber: #b96a12;
  --teal: #0e8a7d;
  --coral: #c23f57;
  --blue: #1d63d8;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #f7f4ee;
    --surface: #ffffff;
    --text: #1c1822;
    --text-secondary: #635c6d;
    --border: #e4dfd3;
    --amber: #b96a12;
    --teal: #0e8a7d;
    --coral: #c23f57;
    --blue: #1d63d8;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* Un seul accent en fond (17 sept.) : les 3 taches amber/coral/teal empilees donnaient un
     effet "fouilli" releve par Nicolas ; un unique glow teal, discret, suffit et s'adapte tout
     seul au theme clair via color-mix (pas besoin de dupliquer une valeur par theme). */
  background:
    radial-gradient(760px circle at 14% 0%, rgba(47,209,192,0.10), transparent 60%),
    var(--bg);
  /* color-mix() en 2e regle (surcharge la precedente sur les navigateurs qui le supportent,
     ignoree sans casser le fallback ci-dessus sur les autres) : garde le glow teinte du meme
     accent que le theme actif, plutot qu'une valeur fixe qui jurerait en clair. */
  background:
    radial-gradient(760px circle at 14% 0%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
/* Nicolas veut les paragraphes en justifie (6 sept.) : regle posee sur l'element p lui-meme
   (specificite la plus faible), donc toute classe plus specifique qui a deja un text-align
   (.ql-align-center/.ql-align-right dans les articles, th/td, etc.) continue a l'emporter sans
   rien y toucher. Un paragraphe d'une seule ligne n'est de toute facon jamais visuellement
   affecte par justify (seule la derniere ligne d'un paragraphe multi-lignes n'est pas etiree).
   hyphens:auto ajoute en complement : sans coupure de mots, un texte justifie sur une colonne
   etroite (mobile) cree souvent de grands trous entre les mots des qu'un mot long ne rentre pas
   sur une ligne. Fonctionne nativement en francais grace a <html lang="fr"> deja present sur
   toutes les pages. Non verifiable dans ce bac a sable (Chromium local sans dictionnaire de
   cesure), mais -webkit-hyphens est bien supporte par Safari iOS, donc actif sur l'iPhone de
   Nicolas ; ne degrade rien si un navigateur ne le supporte pas (justify seul s'applique alors). */
p { margin: 0; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header / nav */
.site-header { border-bottom: 1px solid var(--border); position: relative; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 44px 24px 24px; }
/* Logo (30 sept.) : vraie icone transparente (le symbole a 4 anneaux, nov. 2026, fichier fourni par
   Nicolas, aucune image reconstruite) + texte HTML reel pour le nom. Comme le texte suit
   var(--text), le logo s'adapte automatiquement aux themes clair/sombre/auto sans avoir
   besoin de deux fichiers separes ni de fond colle derriere - ca resout le "cadre" visible
   qu'avait l'ancienne image a fond plein. Pas d'accroche/sous-titre ici (essaye puis retire
   le 30 sept. : sur un header a 9 liens, le texte supplementaire finissait par chevaucher le
   premier lien de nav) - les 3 activites sont deja nommees dans la nav elle-meme. */
.logo {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif; color: var(--text); white-space: nowrap;
}
.logo-icon { width: 40px; height: 40px; flex-shrink: 0; }
.logo-name { font-size: 20px; font-weight: 700; }
@media (max-width: 900px) {
  /* Sur mobile, icone/nom sont reduits : liberent la place necessaire pour que le bouton
     menu (hamburger) reste visible a cote du selecteur de theme et du bouton Admin
     (verifie jusqu'a 360px de large, cf. debordement corrige le 30 sept.). */
  .logo-icon { width: 28px; height: 28px; }
  .logo-name { font-size: 15px; }
}
.site-nav { display: flex; gap: 20px; align-items: center; }
.site-nav a { font-size: 14px; color: var(--text-secondary); transition: color 0.15s; }
.site-nav a:hover, .site-nav a.is-active { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-admin {
  font-size: 13px; font-weight: 500; padding: 9px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
}
.btn-admin:hover { border-color: var(--teal); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px; cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: flex-start; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height 0.2s ease;
  }
  .site-nav.is-open { max-height: 800px; }
  .site-nav a { width: 100%; padding: 14px 24px; border-bottom: 1px solid var(--border); }
  /* Resserre le bouton Admin pour degager la place necessaire au logo agrandi ci-dessus
     (regle placee ici, apres les regles de base .header-actions/.btn-admin, pour bien les
     surcharger — un media query n'ajoute aucune specificite CSS supplementaire). */
  .header-actions { gap: 8px; }
  .btn-admin { padding: 7px 12px; font-size: 12px; }
}

/* Selecteur de theme 3 positions (clair / auto / sombre), dans le header (17 sept.) */
.theme-toggle {
  display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px; gap: 2px;
}
.theme-toggle button {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 26px;
  border-radius: 999px; border: none; background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button.is-active { background: var(--teal); color: var(--bg); }
.theme-toggle svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .theme-toggle button { width: 26px; height: 24px; }
}

/* Buttons */
.btn-primary {
  display: inline-block;
  background: var(--teal);
  color: var(--bg); padding: 14px 28px; border-radius: var(--radius);
  font-size: 15px; font-weight: 700;
}
.link-underline { border-bottom: 1px solid var(--border); padding-bottom: 2px; font-weight: 500; }

/* Hero */
/* padding-top/bottom en longhand (pas le raccourci "padding: 88px 0 80px") : ce raccourci
   remettrait aussi le padding gauche/droit a 0, ce qui annule le "padding: 0 24px" de
   .container sur tout element qui cumule les deux classes (class="hero container") — invisible
   sur grand ecran (le max-width de .container laisse de la marge de toute facon) mais donne un
   texte colle aux bords sur mobile/tablette. Meme raison pour tous les .xxx-body ci-dessous. */
.hero { position: relative; padding-top: 88px; padding-bottom: 80px; }
/* Page Actus : hero resserre pour faire remonter les articles (le contenu de la page est la
   priorite, pas l'entete). */
.actus-page .hero { padding-top: 40px; padding-bottom: 36px; }
/* Page Actus : phrase sous le titre volontairement courte (Nicolas, 16 sept.) - le plafond de
   600px de .hero p.lead (pense pour les textes plus longs des autres pages) la faisait passer
   sur 2 lignes alors qu'elle tient sur une seule des que le conteneur est plus large que ca. */
.actus-page .hero p.lead { max-width: none; }
/* Page Actus : le bandeau CTA en bas de page doit faire toute la largeur du .container
   (comme la section des articles), pas la largeur reduite (900px) de la regle .cta-banner
   de base utilisee par index.html/tag.html/videos.html. */
.actus-page .cta-banner { max-width: 1180px; }
/* Accueil : le bandeau CTA doit faire la meme largeur que la section En bref (.ai-summary, 1180px via .container). */
.home-page .cta-banner { max-width: 1180px; }
.hero-inner { display: flex; flex-direction: column; gap: 18px; }
.greeting { font-size: 16px; font-weight: 600; color: var(--text-secondary); }
.kicker {
  display: inline-flex; align-items: center; gap: 9px; width: fit-content;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary);
}
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--teal); flex: none; }
.hero h1 { font-size: 56px; line-height: 1.1; }
.hero p.lead { font-size: 19px; line-height: 1.6; color: var(--text-secondary); max-width: 600px; }
.highlight { position: relative; display: inline-block; }
.highlight::before {
  content: ""; position: absolute; left: -6px; right: -6px; bottom: 6px; height: 18px;
  background: var(--teal); opacity: 0.28; border-radius: 5px; transform: rotate(-1deg);
}
.highlight span { position: relative; }
.cta-row { display: flex; align-items: center; gap: 24px; margin-top: 12px; flex-wrap: wrap; }

/* Carte "tutos" à côté du hero (accueil) */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); gap: 36px; align-items: start; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-learn-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px; display: flex; flex-direction: column; gap: 12px; margin-top: 6px;
  box-shadow: 0 20px 40px -20px rgba(47,209,192,0.35); transition: transform 0.15s, border-color 0.15s;
  /* min-width:0 indispensable : .hero-learn-card est un item de la grille .hero-grid, et un item
     de grille/flex a par defaut une largeur minimale automatique basee sur son contenu. Or
     .hero-article-text h4 est en white-space:nowrap (pour l'ellipse "...") : un titre d'article
     long et non coupable pousse alors TOUTE la largeur minimale de la carte (et donc de la colonne
     de grille partagee avec .hero-inner, en layout mobile 1 colonne) bien au-dela de l'ecran,
     provoquant un debordement horizontal de toute la colonne de gauche du hero. */
  min-width: 0;
}
.hero-learn-card:hover { transform: translateY(-3px); border-color: var(--teal); }
.hero-learn-kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal);
}
.hero-learn-card h2 { font-size: 21px; line-height: 1.25; }
.hero-learn-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }

/* Photo hero (17 sept.) : remplace la carte "derniers articles" du hero (voir index.html) */
.hero-photo-panel { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; min-width: 0; }
.hero-photo-panel img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--border); display: block;
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
}

/* Aperçus dynamiques des derniers articles, dans la carte "blog" du hero */
.hero-article-list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.hero-article-card {
  display: flex; gap: 12px; align-items: center; padding: 8px; margin: -8px;
  border-radius: 10px; transition: background 0.15s, transform 0.15s;
}
.hero-article-card:hover { background: rgba(255,255,255,0.05); transform: translateX(2px); }
.hero-article-thumb {
  width: 46px; height: 46px; flex: none; border-radius: 8px; overflow: hidden; background: var(--bg);
}
.hero-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-article-thumb .actus-cover-placeholder { min-height: 0; width: 100%; height: 100%; }
.hero-article-thumb .actus-cover-placeholder svg { width: 18px; height: 18px; }
.hero-article-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-article-text h4 {
  font-size: 13.5px; line-height: 1.3; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-article-card:hover h4 { color: var(--teal); }
.hero-article-text .actus-date { font-size: 11px; }

/* Petites animations d'entree discretes (desactivees si l'utilisateur prefere moins de mouvement) */
@media (prefers-reduced-motion: no-preference) {
  .hero-inner, .hero-learn-card { animation: hero-fade-up 0.6s ease-out both; }
  .hero-learn-card { animation-delay: 0.12s; }
  @keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Breadcrumb (theme pages) */
.breadcrumb { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.breadcrumb:hover { color: var(--text); }

/* Poles grid (homepage) */
.poles { padding-bottom: 100px; display: flex; flex-direction: column; gap: 32px; }
.poles-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.poles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { .poles-grid { grid-template-columns: 1fr; } }

.pole-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 36px 30px; display: flex; flex-direction: column; gap: 16px;
}
.pole-card.amber { box-shadow: 0 20px 40px -20px rgba(245,169,63,0.35); }
.pole-card.teal { box-shadow: 0 20px 40px -20px rgba(47,209,192,0.35); }
.pole-card.coral { box-shadow: 0 20px 40px -20px rgba(242,97,122,0.35); }

.icon-badge {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: 42% 58% 60% 40% / 50% 45% 55% 50%;
}
.icon-badge.amber { background: rgba(245,169,63,0.16); box-shadow: 0 0 24px rgba(245,169,63,0.25); color: var(--amber); transform: rotate(-6deg); }
.icon-badge.teal { background: rgba(47,209,192,0.16); box-shadow: 0 0 24px rgba(47,209,192,0.25); color: var(--teal); transform: rotate(5deg); }
.icon-badge.coral { background: rgba(242,97,122,0.16); box-shadow: 0 0 24px rgba(242,97,122,0.25); color: var(--coral); transform: rotate(-4deg); }
.icon-badge svg { transform: rotate(6deg); }

.pole-card h3 { font-size: 20px; }
.pole-card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.pole-link { font-size: 14px; font-weight: 600; margin-top: 4px; }
.pole-link.amber { color: var(--amber); }
.pole-link.teal { color: var(--teal); }
.pole-link.coral { color: var(--coral); }

/* Two-column services grid (homepage) */
.poles-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .poles-grid.cols-2 { grid-template-columns: 1fr; } }

/* Generic info sections (homepage: comment ça marche, matériel...) */
.info-section { padding-bottom: 90px; }
.section-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; }
.info-section h2 { font-size: 28px; margin-bottom: 14px; max-width: 720px; }
.info-section .lead-sm { font-size: 16px; color: var(--text-secondary); line-height: 1.7; max-width: 680px; margin-bottom: 8px; }

/* Process steps */
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }
.process-step { display: flex; flex-direction: column; gap: 10px; }
.step-number {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: var(--teal);
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.process-step h3 { font-size: 16px; }
.process-step p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

/* Materiel / matériaux */
.materiel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 28px; }
@media (max-width: 700px) { .materiel-grid { grid-template-columns: 1fr; } }
.materiel-heading { font-size: 16px; margin-bottom: 4px; }
.materiel-note { font-size: 13.5px; color: var(--text-secondary); margin-top: 12px; font-style: italic; }

/* Generic bullet list (reusable outside .theme-page) */
.bullet-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bullet-list li { font-size: 15px; color: var(--text); padding-left: 22px; position: relative; line-height: 1.5; }
.bullet-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }

/* CTA banner */
.cta-banner {
  text-align: center; padding: 64px 24px; margin: 0 auto 100px; max-width: 900px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.cta-banner h2 { font-size: 26px; }
.cta-banner p { font-size: 15.5px; color: var(--text-secondary); max-width: 480px; }
.cta-banner .btn-primary { margin-top: 6px; }

/* Actus — press-style landing page */
.actus-body { padding-bottom: 110px; display: flex; flex-direction: column; gap: 56px; }
.actus-own-wrap { display: flex; flex-direction: column; gap: 28px; }

/* Filtre par tag + recherche (page Actus) — barre persistante au-dessus de la grille/liste,
   masquee (display:none, voir actus.js) sur le detail d'un article et la vue Archives. */
.actus-search-row { display: flex; }
.actus-search-input {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 11px 18px; color: var(--text); font-family: inherit; font-size: 14.5px;
}
.actus-search-input::placeholder { color: var(--text-secondary); }
.actus-search-input:focus { outline: none; border-color: var(--teal); }
.actus-filter-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.actus-filter-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.02em;
  color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.actus-filter-chip:hover { border-color: var(--teal); color: var(--text); }
.actus-filter-chip.is-active { background: var(--teal); border-color: var(--teal); color: var(--bg); }
.actus-archived-badge {
  display: inline-block; margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary);
  background: rgba(255,255,255,0.06); border-radius: 999px; padding: 2px 8px;
}

.actus-featured {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: inherit; margin-bottom: 32px; transition: border-color 0.15s ease;
}
.actus-featured:hover { border-color: var(--teal); }
@media (max-width: 780px) { .actus-featured { grid-template-columns: 1fr; } }
.actus-featured-media { position: relative; min-height: 260px; }
.actus-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actus-cover-placeholder {
  width: 100%; height: 100%; min-height: 260px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--teal), var(--amber));
}
.actus-cover-placeholder::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1.5px);
  background-size: 14px 14px; opacity: 0.2; mix-blend-mode: overlay;
}
.actus-cover-placeholder svg { position: relative; color: rgba(255,255,255,0.9); }
.actus-featured-body { padding: 36px 36px 36px 0; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
@media (max-width: 780px) { .actus-featured-body { padding: 0 28px 32px; } }
.actus-date { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-secondary); }
.actus-featured-body h2 { font-size: 26px; line-height: 1.25; }
.actus-featured-body p { font-size: 15.5px; color: var(--text-secondary); line-height: 1.6; }

#home-actus-grid { margin-bottom: 24px; }
.actus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .actus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .actus-grid { grid-template-columns: 1fr; } }
.actus-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
/* La carte n'est plus elle-meme un <a> : les tags (voir plus bas) sont des liens propres
   vers tag.html, places a cote de ce lien plutot qu'imbriques dedans (un <a> dans un <a>
   n'est pas valide en HTML et donnerait un comportement de clic imprevisible). */
.actus-card-link { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.actus-card-media { aspect-ratio: 16 / 10; }
.actus-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actus-card-media .actus-cover-placeholder { min-height: 0; aspect-ratio: 16 / 10; }
.actus-card-body { padding: 4px 20px 10px; display: flex; flex-direction: column; gap: 8px; }
.actus-card h3 { font-size: 16.5px; line-height: 1.35; }
.actus-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.actus-card > .tag-chip-list { padding: 0 20px 18px; }

/* Tags des articles : chips cliquables vers une page dediee par tag (tag.html), utilises
   sur les cartes de la grille, la sidebar, et l'entete d'un article. */
.tag-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  display: inline-flex; align-items: center; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.02em; color: var(--teal); background: rgba(47,209,192,0.12);
  border-radius: 999px; padding: 3px 10px; text-decoration: none; transition: background 0.15s, color 0.15s;
}
.tag-chip:hover { background: var(--teal); color: var(--bg); }

/* Page actus : colonne principale + colonne latérale miniatures (articles < 3 mois, non "à la une") */
.actus-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
/* .actus-layout est imbrique dans .actus-body.container : sans ce contrepoids, son bord visible
   (colonne principale + sidebar) s'arrete 24px avant celui de .cta-banner/.ai-summary juste en
   dessous, qui eux PORTENT directement la classe .container (leur propre padding EST leur bord
   visible). Neutralise ici le padding herite de .actus-body pour que les deux bords coincident
   exactement, seulement a partir du meme seuil que le passage 2 colonnes -> 1 colonne ci-dessous
   (sous 960px, .actus-body garde son padding normal, indispensable sur mobile/tablette). */
@media (min-width: 961px) { .actus-layout { width: calc(100% + 48px); margin: 0 -24px; } }
@media (max-width: 960px) { .actus-layout { grid-template-columns: 1fr; } }
.actus-main .actus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .actus-main .actus-grid { grid-template-columns: 1fr; } }

/* La colonne "Aussi récemment" ne doit jamais rendre la page plus longue que la colonne "à la
   une" a cote d'elle (16 sept.). align-items: start (ci-dessus) est indispensable : une grille
   CSS en align-items: stretch calcule la hauteur de la ligne a partir du contenu "naturel" des
   DEUX colonnes AVANT de les etirer - si la sidebar contient un element a defilement dont le
   contenu grandit avec le nombre d'articles, la ligne (donc .actus-main aussi) s'etirerait a la
   hauteur du contenu deroulant, ce qui est l'inverse de l'effet recherche. .actus-main garde
   donc sa hauteur naturelle, et actus.js (voir syncSidebarHeight) mesure cette hauteur en JS et
   la reporte comme max-height sur .actus-sidebar, dont seule .actus-sidebar-list defile. En
   layout mobile empile (960px), il n'y a plus de colonne voisine a mesurer : on limite alors la
   colonne entiere a une hauteur fixe raisonnable, avec le meme defilement interne. */
.actus-sidebar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 20px;
  display: flex; flex-direction: column; min-height: 0;
}
@media (max-width: 960px) { .actus-sidebar { max-height: 420px !important; } }
.actus-sidebar-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 16px;
}
.actus-sidebar-list {
  display: flex; flex-direction: column; gap: 16px;
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding-right: 6px; margin-right: -6px;
}
.actus-sidebar-card { display: flex; gap: 12px; align-items: flex-start; }
.actus-sidebar-thumb {
  width: 64px; height: 64px; flex: none; border-radius: 10px; overflow: hidden; background: var(--bg);
}
.actus-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.actus-sidebar-thumb .actus-cover-placeholder { min-height: 0; width: 100%; height: 100%; }
.actus-sidebar-thumb .actus-cover-placeholder svg { width: 22px; height: 22px; }
.actus-sidebar-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.actus-sidebar-text h4 { font-size: 14px; line-height: 1.35; font-weight: 600; }
.actus-sidebar-card:hover h4 { color: var(--teal); }
.actus-sidebar-text .actus-date { font-size: 11.5px; }

.actus-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; }
.actus-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.actus-list li:first-child { border-top: 1px solid var(--border); }
.actus-list a { font-size: 15.5px; font-weight: 500; color: var(--text); }
.actus-list a:hover { color: var(--teal); }
.actus-list .actus-date { white-space: nowrap; }
@media (max-width: 480px) { .actus-list li { flex-direction: column; gap: 4px; } }

.actus-archives-link { display: inline-block; margin-top: 28px; }
.actus-archives-title { font-size: 22px; margin: 0 0 4px; }

.actus-empty { color: var(--text-secondary); font-size: 15px; padding: 30px 0; }

/* Videos hub — grouped by playlist */
.playlist-section { padding-bottom: 54px; }
.playlist-heading { font-size: 21px; margin-bottom: 20px; }
.video-card-media { position: relative; }
.video-play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(9,7,13,0.18);
}
.video-play-badge svg {
  width: 46px; height: 46px; color: rgba(255,255,255,0.95);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.4));
}
.videos-empty { color: var(--text-secondary); font-size: 15px; padding: 10px 0 40px; }

/* Theme pages */
.theme-page .hero { padding-bottom: 40px; }
.theme-body { padding-bottom: 100px; display: flex; flex-direction: column; gap: 40px; max-width: 1080px; }
.theme-section h2 { font-size: 24px; margin-bottom: 14px; }
/* Numeros d'index (17 sept.) : petite touche editoriale devant les titres de section (page
   Machines), dans le meme esprit que les etapes numerotees de "Comment ça marche". */
.theme-section-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 14px; }
.theme-section-head h2 { margin-bottom: 0; }
.index-num { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 34px; color: var(--teal); opacity: 0.4; line-height: 1; }
.theme-section p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); }
.theme-section ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.theme-section li {
  font-size: 15px; color: var(--text); padding-left: 22px; position: relative; line-height: 1.5;
}
.theme-section li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px;
}
.theme-page.amber .theme-section li::before { background: var(--amber); }
.theme-page.teal .theme-section li::before { background: var(--teal); }
.theme-page.coral .theme-section li::before { background: var(--coral); }
/* Pages activite (30 sept.) : Pupitreur (amber) et Technicien lumiere (coral) reprennent le
   meme gabarit que Machines (teal) mais avec leur propre couleur d'accent - kicker, numeros
   d'index et bouton principal - pour que chaque page "activite" ait sa propre identite au sein
   du meme systeme graphique (voir aussi .pole-card/.icon-badge/.pole-link.amber|coral, deja
   utilises sur l'accueil, et le logo "3 activites" qui associe ces memes couleurs aux 3 metiers). */
.theme-page.amber .btn-primary { background: var(--amber); }
.theme-page.coral .btn-primary { background: var(--coral); }
.theme-page.amber .kicker::before { background: var(--amber); }
.theme-page.coral .kicker::before { background: var(--coral); }
.theme-page.amber .index-num { color: var(--amber); }
.theme-page.coral .index-num { color: var(--coral); }
.theme-page.amber .breadcrumb:hover { color: var(--amber); }
.theme-page.coral .breadcrumb:hover { color: var(--coral); }
.theme-cta { margin-top: 8px; }

/* Page Machines — layout "panneau + sommaire" (17 sept.) : une colonne de sommaire ancre,
   collante (sticky) pendant le defilement, a gauche ; les panneaux "fiche technique" a droite.
   Le lien actif est mis en surbrillance au scroll par IntersectionObserver (voir materiel.html) ;
   sans JS ce sont de simples liens d'ancre qui fonctionnent normalement. */
.materiel-layout { display: grid; grid-template-columns: 190px 1fr; gap: 40px; align-items: start; }
.materiel-toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; }
.materiel-toc-link {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none;
  border: 1px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.materiel-toc-link .index-num { font-size: 15px; opacity: 0.55; }
.materiel-toc-link:hover { background: var(--surface); color: var(--text); }
.materiel-toc-link.is-active { background: var(--surface); border-color: var(--border); color: var(--text); }
.materiel-toc-link.is-active .index-num { opacity: 1; }

.materiel-panels { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.materiel-panels .theme-section { scroll-margin-top: 96px; }
.materiel-panels .theme-section h2 { font-size: 22px; margin-bottom: 12px; }
.materiel-panels .theme-section .hero-chips { margin-top: 18px; }
/* Vrais onglets (17 sept., v2) : un seul panneau affiche a la fois, pour ne pas melanger les
   caracteristiques des differentes machines et laisser de la place a plus de detail par machine.
   La classe .js-tabs n'est posee qu'en JS (voir materiel.html) : sans JavaScript cette regle ne
   s'applique jamais et les panneaux restent tous visibles en flux normal (fallback accessible). */
.materiel-layout.js-tabs .materiel-panels .theme-section { display: none; }
.materiel-layout.js-tabs .materiel-panels .theme-section.is-active { display: block; }

/* Fiches materiaux detaillees (17 sept., v3) : remplace la grille 4 colonnes (1 ligne par
   materiau) par des fiches plus completes (temps d'impression + caracteristiques + usages),
   a la demande de Nicolas. 2 colonnes desktop, 1 en mobile (voir media query plus bas). */
.materiaux-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
.materiau-item { display: flex; flex-direction: column; gap: 10px; }
.materiau-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.materiau-head h3 { font-size: 16.5px; }
.materiau-head .hero-chips { gap: 6px; }
.materiau-item p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.materiaux-note { margin-top: 20px; font-size: 14px; color: var(--text-secondary); }
/* Petit intitule "Ce qu'elle permet" au-dessus des points forts de chaque machine (K1 Max /
   K2 Plus) : reutilise .section-label (deja utilise ailleurs sur le site) avec un espacement
   propre a son usage ici, dans un panneau plutot qu'en tete de grande section. */
.panel-subhead { margin: 20px 0 0; }

@media (max-width: 780px) {
  .materiel-layout { grid-template-columns: 1fr; }
  .materiel-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .materiaux-list { grid-template-columns: 1fr; }
}

.note-box {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px;
  font-size: 15px; color: var(--text-secondary); background: var(--surface);
}

/* Contact page — 2 colonnes (infos / formulaire), refonte du 17 sept. */
.contact-page .hero { padding-bottom: 60px; }
.contact-body { padding-bottom: 120px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 48px; align-items: start; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-email {
  display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600;
  font-family: 'Space Grotesk', sans-serif; width: fit-content;
}
/* Numero de telephone (17 sept.) : meme gabarit que .contact-email mais plus discret (couleur
   texte secondaire plutot que la couleur d'accent), pour rester secondaire par rapport a l'email. */
.contact-phone {
  display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600;
  font-family: 'Space Grotesk', sans-serif; width: fit-content; color: var(--text-secondary);
}
.contact-phone:hover { color: var(--text); }
.contact-links { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.contact-links a { font-size: 15px; color: var(--text-secondary); }
.contact-links a:hover { color: var(--text); }

.contact-form { display: flex; flex-direction: column; gap: 12px; }
.contact-form h3 { font-size: 16px; margin-bottom: -2px; }
.contact-form input, .contact-form textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
  color: var(--text); font-family: inherit; font-size: 14.5px; resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--teal); }

/* Bloc "En bref" (17 sept.) : resume factuel visible en haut de chaque page principale, pense
   pour les moteurs de recherche et les IA generatives (voir commentaires HTML sur ce meme bloc
   dans index.html/contact.html/etc. et injectActusOwn-style dans server.js). Volontairement
   sobre : pas une bannière criarde, juste un encart net qui se distingue du reste du texte. */
.ai-summary { margin: 0 auto 40px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ai-summary-label { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal); margin-bottom: 8px; }
.ai-summary p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.ai-summary a { color: var(--teal); }

/* Footer — 3 colonnes (marque / navigation / contact), refonte du 17 sept. */
.site-footer { padding: 64px 0 0; border-top: 1px solid var(--border); }
.footer-columns { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-heading { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; }
.footer-blurb { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; max-width: 320px; text-align: left; }
.footer-locality { font-size: 13.5px; color: var(--text-secondary); }
.footer-col-title {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-link { font-size: 14.5px; color: var(--text-secondary); width: fit-content; }
.footer-link:hover { color: var(--text); }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-email { font-size: 15px; color: var(--teal); font-weight: 600; border-bottom: 1px solid var(--teal); padding-bottom: 2px; }
.footer-phone { font-size: 14.5px; color: var(--text-secondary); font-weight: 500; }
.footer-phone:hover { color: var(--teal); }
.footer-social { display: flex; align-items: center; gap: 14px; }
.footer-social-link { display: inline-flex; color: var(--text-secondary); transition: color 0.15s; }
.footer-social-link:hover { color: var(--teal); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 22px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-secondary);
}
.footer-bottom a { color: var(--text-secondary); }
.footer-bottom a:hover { color: var(--text); }

@media (max-width: 600px) {
  .hero h1 { font-size: 40px; }
  .hero p.lead { font-size: 17px; }
  .footer-columns { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- Videos hub: card media sizing (reuses .actus-card) ---- */
.video-card-media { aspect-ratio: 16 / 10; }
.video-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card-media .actus-cover-placeholder { min-height: 0; aspect-ratio: 16 / 10; }
.videos-body { padding-bottom: 110px; }

/* ---- Actus: single article view ---- */
.actus-subnav { display: flex; justify-content: flex-end; margin-bottom: -20px; }
.actus-article { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.actus-article h1 { font-size: 32px; line-height: 1.2; }
.actus-article-body { font-size: 16.5px; line-height: 1.75; color: var(--text); }
.actus-article-body h1, .actus-article-body h2, .actus-article-body h3, .actus-article-body h4 {
  font-family: 'Space Grotesk', sans-serif; margin: 32px 0 14px; letter-spacing: -0.01em;
}
.actus-article-body h1:first-child, .actus-article-body h2:first-child { margin-top: 0; }
/* Titre en double dans les articles (6 sept.) : Nicolas retape systematiquement le titre de
   l'article en Titre 1 (h1) tout en haut du contenu BookStack (souvent mis en couleur/centre via
   Quill), en plus du titre affiche par le site via <h1>{article.name}</h1> (voir actus.js). Un
   premier correctif masquait ce h1 du corps pour ne garder que le titre du site — mais Nicolas
   veut au contraire garder SA mise en forme (couleur, centrage) et voir disparaitre le titre
   "neutre" du site. On masque donc ici le h1 du template (`.actus-article > h1`, celui pose par
   actus.js) des que le corps de l'article contient lui-meme un h1 — les h1 ne servent JAMAIS a
   une vraie sous-partie de l'article (Nicolas utilise systematiquement h2 pour ses sections, ex.
   "Ce que dit le texte", "En resume"), donc tout h1 present dans .actus-article-body est forcement
   ce titre retape, quel que soit sa position exacte (parfois precede d'un encadre "kicker" avant
   le h1, ex. un article avec un bandeau "GUIDE DEBUTANT"). Si un futur article n'a pas de h1 dans
   son corps (Nicolas arrete cette habitude), le titre du site reste affiche normalement — aucun
   article ne se retrouve donc sans titre visible. */
.actus-article:has(.actus-article-body h1) > h1 { display: none; }
/* Nettoyage du paragraphe vide que Nicolas laisse souvent juste apres son titre (simple ligne
   d'espacement) : on ne le masque que s'il est reellement vide (juste un <br>), jamais un vrai
   chapo/texte d'intro qui suivrait directement le titre. */
.actus-article-body h1 + p:has(> br:only-child) { display: none; }
.actus-article-body p { margin: 0 0 16px; }
.actus-article-body ul, .actus-article-body ol { margin: 0 0 16px; padding-left: 24px; }
.actus-article-body li { margin-bottom: 8px; }
.actus-article-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.actus-article-body img { max-width: 100%; border-radius: var(--radius); margin: 10px 0; }
.actus-article-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14.5px; }
.actus-article-body th, .actus-article-body td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.actus-article-body code { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; background: var(--surface); padding: 2px 6px; border-radius: 4px; }
.actus-article-body pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; overflow-x: auto; margin: 0 0 20px; }
.actus-article-body pre code { background: none; padding: 0; }
.actus-article-body blockquote { border-left: 3px solid var(--teal); margin: 0 0 20px; padding: 4px 0 4px 20px; color: var(--text-secondary); }
.actus-article-body hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.actus-article-body .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.actus-article-body .ql-font-monospace { font-family: 'IBM Plex Mono', monospace; }
.actus-article-body .ql-callout {
  border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; margin: 0 0 20px; background: var(--surface);
}
.actus-article-body .ql-callout::before {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 6px; color: var(--text-secondary);
}
.actus-article-body .ql-callout.ql-callout-tip { border-left-color: var(--teal); }
.actus-article-body .ql-callout.ql-callout-tip::before { content: "Conseil"; color: var(--teal); }
.actus-article-body .ql-callout.ql-callout-warning { border-left-color: var(--amber); }
.actus-article-body .ql-callout.ql-callout-warning::before { content: "Attention"; color: var(--amber); }
.actus-article-body .ql-callout.ql-callout-important { border-left-color: var(--coral); }
.actus-article-body .ql-callout.ql-callout-important::before { content: "Important"; color: var(--coral); }
.actus-article-body .ql-box {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 4px; margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.14);
}
.actus-article-body .ql-box .ql-box { background: rgba(255, 255, 255, 0.14); }
.actus-article-body .ql-box > *:last-child { margin-bottom: 18px; }
.actus-article-body .ql-align-center { text-align: center; }
.actus-article-body .ql-align-right { text-align: right; }
.actus-article-body .ql-align-justify { text-align: justify; }

/* ---- Galerie par dossiers (public, 14 sept.) ---- */
.gallery-body { padding-bottom: 110px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } }

.gallery-card {
  display: flex; flex-direction: column; gap: 0; text-align: left; cursor: pointer;
  background: none; border: none; overflow: visible;
  font: inherit; color: inherit; padding: 0; transition: transform 0.15s;
}
.gallery-card:hover { transform: translateY(-2px); }
.gallery-card-body { padding: 14px 4px 0; display: flex; flex-direction: column; gap: 8px; }
.gallery-card-caption { font-size: 15px; font-weight: 600; }
.gallery-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--text-secondary); }

/* Pile de photos façon Apple Photos : jusqu'à 3 couches en éventail, la plus récente dessus. */
.gallery-stack { position: relative; aspect-ratio: 4 / 3; }
.gallery-stack-layer {
  position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 10px 22px -10px rgba(0,0,0,0.5);
  transform: rotate(calc(var(--depth) * 2deg)) translate(calc(var(--depth) * 6px), calc(var(--depth) * -4px));
  transition: transform 0.2s ease;
}
.gallery-stack-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card:hover .gallery-stack-layer {
  transform: rotate(calc(var(--depth) * 3deg)) translate(calc(var(--depth) * 9px), calc(var(--depth) * -6px));
}
.gallery-stack-extra {
  position: absolute; bottom: 8px; right: 8px; background: rgba(9,7,13,0.75); color: var(--text);
  border-radius: 999px; font-size: 12px; font-weight: 600; padding: 3px 9px; z-index: 5;
}

.stars-display { color: var(--amber); letter-spacing: 1px; }
.stars-display.stars-empty { color: var(--text-secondary); letter-spacing: normal; font-size: 12.5px; }
.stars-value { font-size: 12px; color: var(--text-secondary); }

/* Popup album façon publication : photo à gauche (carrousel), panneau d'avis à droite. */
.gallery-modal-overlay {
  position: fixed; inset: 0; background: rgba(9,7,13,0.78); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; overflow-y: auto;
}
.gallery-modal {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  width: 100%; max-width: 980px; height: 86vh; max-height: 760px;
  display: flex; overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
}
.gallery-modal-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(9,7,13,0.55); border: none; color: var(--text); font-size: 16px; cursor: pointer; z-index: 4;
}
.gallery-modal-photo-pane {
  position: relative; flex: 1 1 58%; min-width: 0; background: #0b0910;
  display: flex; align-items: center; justify-content: center;
}
.gallery-modal-image { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.gallery-modal-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  background: rgba(9,7,13,0.55); border: none; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2;
}
.gallery-modal-nav-prev { left: 14px; }
.gallery-modal-nav-next { right: 14px; }
.gallery-modal-counter {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(9,7,13,0.6); color: var(--text); font-size: 12.5px; padding: 4px 12px; border-radius: 999px;
}
.gallery-modal-side { flex: 0 0 380px; max-width: 42%; border-left: 1px solid var(--border); overflow: hidden; display: flex; }
.gallery-modal-side-scroll { flex: 1; overflow-y: auto; padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 16px; }
.gallery-modal-title { font-size: 19px; }
.gallery-modal-description { font-size: 14.5px; color: var(--text-secondary); line-height: 1.5; margin: -8px 0 0; }
.gallery-modal-meta { margin-top: -6px; }

.gallery-avis-section { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.gallery-avis-section h3 { font-size: 15px; }

.gallery-comments { display: flex; flex-direction: column; gap: 14px; }
.gallery-comment-item { display: flex; flex-direction: column; gap: 4px; }
.gallery-comment-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.gallery-comment-item p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.5; }
.gallery-comment-date { font-size: 12px; color: var(--text-secondary); }

.gallery-comment-form { display: flex; flex-direction: column; gap: 10px; }
.gallery-comment-form input[type="text"], .gallery-comment-form textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
  color: var(--text); font-family: inherit; font-size: 14.5px; resize: vertical;
}
.gallery-comment-form input[type="text"]:focus, .gallery-comment-form textarea:focus { outline: none; border-color: var(--teal); }
.star-picker { display: flex; gap: 4px; }
.star-picker-btn {
  background: none; border: none; font-size: 24px; color: var(--border); cursor: pointer; padding: 0; line-height: 1;
}
.star-picker-btn.is-selected { color: var(--amber); }
.gallery-comment-success { font-size: 14px; color: var(--teal); }

@media (max-width: 760px) {
  .gallery-modal { flex-direction: column; height: 92vh; max-height: none; }
  .gallery-modal-photo-pane { flex: 0 0 40vh; }
  .gallery-modal-side { flex: 1; max-width: none; border-left: none; border-top: 1px solid var(--border); }
}

/* Formulaire de soumission d'un album par un visiteur (14 sept.) */
#gallery-submit { padding-bottom: 100px; }
/* Panneau plein (17 sept.) : le formulaire de depot d'album passe dans un encart .form-panel
   (meme traitement que les autres surfaces du site), avec le champ fichier restyle. */
.form-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; }
.gallery-submit-form {
  display: flex; flex-direction: column; gap: 12px; max-width: 480px; margin-top: 20px;
}
.gallery-submit-form input, .gallery-submit-form textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
  color: var(--text); font-family: inherit; font-size: 14.5px; resize: vertical;
}
.gallery-submit-form input:focus, .gallery-submit-form textarea:focus { outline: none; border-color: var(--teal); }
.gallery-submit-form input[type="file"] {
  padding: 9px 12px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer;
}
.gallery-submit-form input[type="file"]::file-selector-button {
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; margin-right: 12px;
  border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer;
}
.gallery-submit-form input[type="file"]::file-selector-button:hover { border-color: var(--teal); }

/* ===== Page MyLearn (nov. 2026) =====
   Styles propres a cette page, construits sur les variables de
   styles.css. Le violet est la couleur de l'anneau central du logo MyLearn (le reste du logo
   reprend l'ambre et le corail de MyGeek). */
.mylearn-page { --violet: #a48bff; }
:root[data-theme="light"] .mylearn-page { --violet: #6b4fd8; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .mylearn-page { --violet: #6b4fd8; } }

.mylearn-page .ml-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mylearn-page .ml-brand img { width: 56px; height: 56px; }
.mylearn-page .ml-brand-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -0.01em; color: var(--text); }
.mylearn-page .ml-badge { font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--violet); border: 1px solid var(--violet); border-radius: 999px; padding: 3px 10px; }

.mylearn-page .ml-hero-visual { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mylearn-page .hero-photo-panel .ml-hero-visual > img { width: min(220px, 60%); height: auto; aspect-ratio: 1 / 1; object-fit: contain; border: 0; border-radius: 0; }
.mylearn-page .ml-week { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.mylearn-page .ml-week-row { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text-secondary); }
.mylearn-page .ml-week-row b { color: var(--text); font-weight: 600; }
.mylearn-page .ml-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.mylearn-page .icon-badge.violet { background: color-mix(in srgb, var(--violet) 16%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--violet) 25%, transparent); color: var(--violet); transform: rotate(4deg); }
.mylearn-page .pole-card.violet { box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--violet) 40%, transparent); }
.mylearn-page .pole-card { cursor: default; }

.mylearn-page .ml-prereq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.mylearn-page .ml-prereq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 20px; }
.mylearn-page .ml-prereq-item h3 { font-size: 17px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.mylearn-page .ml-prereq-item p, .mylearn-page .ml-prereq-item li { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.mylearn-page .ml-prereq-item ul { margin: 8px 0 0; padding-left: 18px; }
.mylearn-page .ml-check { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--teal) 18%, transparent); color: var(--teal); flex: none; }
.mylearn-page .ml-key { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--amber) 55%, var(--border)); }
.mylearn-page .ml-key .ml-check { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.mylearn-page .ml-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.mylearn-page .ml-compare div { border-radius: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; background: var(--bg); border: 1px solid var(--border); color: var(--text-secondary); }
.mylearn-page .ml-compare strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 15px; margin-bottom: 4px; }
.mylearn-page .ml-yes strong { color: var(--teal); }
.mylearn-page .ml-no strong { color: var(--coral); }

.mylearn-page .ml-beta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 48px; align-items: start; margin-top: 28px; }
.mylearn-page .ml-beta-grid > * { min-width: 0; }
.mylearn-page .contact-form input, .mylearn-page .contact-form select, .mylearn-page .contact-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.mylearn-page .contact-form .ml-consent input { width: auto; }
.mylearn-page .contact-form select { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text); font-family: inherit; font-size: 14.5px; }
.mylearn-page .contact-form select:focus { outline: none; border-color: var(--teal); }
.mylearn-page .contact-form label.ml-field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-secondary); }
.mylearn-page .contact-form .ml-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.mylearn-page .contact-form .ml-consent input { margin-top: 3px; accent-color: var(--teal); }
.mylearn-page .ml-form-error { font-size: 14px; color: var(--coral); }

.mylearn-page .ml-faq { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.mylearn-page .ml-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.mylearn-page .ml-faq summary { cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px; color: var(--text); }
.mylearn-page .ml-faq p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 900px) {
  .mylearn-page .ml-prereq, .mylearn-page .ml-compare, .mylearn-page .ml-beta-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Menu simplifie (nov. 2026) : « Activites » (menu deroulant) + Actus, Videos, Contact.
   Le menu complet s'affiche des 901 px ; en dessous : bouton menu, activites deja ouvertes. */
.header-inner { gap: 28px; }
.site-nav { gap: 26px; }
.site-nav a, .nav-group-btn { font-size: 14.5px; white-space: nowrap; }
.btn-admin { padding: 9px 16px; }
.nav-group { position: relative; }
.nav-group-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: color 0.15s;
}
.nav-group-btn:hover, .nav-group-btn.is-active, .nav-group.is-open .nav-group-btn { color: var(--text); }
.nav-chevron { transition: transform 0.15s; }
.nav-group.is-open .nav-chevron { transform: rotate(180deg); }
.nav-panel {
  display: none; position: absolute; top: 100%; left: -16px; min-width: 270px; z-index: 30;
  margin-top: 14px; padding: 8px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-group.is-open .nav-panel { display: block; }
@media (hover: hover) and (min-width: 901px) { .nav-group:hover .nav-panel { display: block; } .nav-group:hover .nav-chevron { transform: rotate(180deg); } }
.site-nav .nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  font-size: 14.5px; color: var(--text);
}
.site-nav .nav-item img { width: 28px; height: 28px; flex: none; }
.site-nav .nav-item:hover, .site-nav .nav-item.is-active { background: var(--bg); }
.site-nav .nav-item.nav-sub { padding: 2px 12px 8px 52px; font-size: 13px; color: var(--text-secondary); }
.site-nav .nav-item.nav-sub:hover { background: transparent; color: var(--text); }
.site-nav .nav-item.nav-sub.is-active { background: transparent; color: var(--text); }
@media (max-width: 900px) {
  .header-inner { gap: 12px; }
  .btn-admin { padding: 7px 12px; }
  .site-nav { padding: 6px 0; gap: 0; }
  .nav-group { width: 100%; }
  .nav-group-btn { width: 100%; padding: 14px 24px 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); pointer-events: none; cursor: default; }
  .nav-chevron { display: none; }
  .nav-panel, .nav-group.is-open .nav-panel { display: block; position: static; min-width: 0; margin: 0; padding: 0 12px 6px; border: 0; box-shadow: none; background: transparent; border-radius: 0; }
  .nav-panel::before { display: none; }
  .site-nav .nav-item { width: auto; padding: 11px 12px; border-bottom: 0; }
  .site-nav .nav-item.nav-sub { padding: 0 12px 8px 52px; }
}

/* Page MyLearn : alignements du formulaire beta (nov. 2026) -- hauteur identique champs/listes
   (Safari rendait les listes plus basses), fleche des listes dessinee en CSS, case a cocher a
   sa taille normale (elle s'affichait comme un point) et espace au-dessus de l'encart. */
.mylearn-page .ml-beta-grid .note-box { margin-top: 24px; }
.mylearn-page .contact-form input:not([type="checkbox"]), .mylearn-page .contact-form select { height: 42px; padding: 0 14px; line-height: 1.2; }
.mylearn-page .contact-form select {
  -webkit-appearance: none; appearance: none; background-color: var(--bg); padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.mylearn-page .contact-form .ml-consent input { -webkit-appearance: checkbox; appearance: auto; width: 18px; height: 18px; padding: 0; margin: 2px 0 0; flex: none; }

/* MyLearn : hero plus aere (colonne de texte plus large, ecart plus grand) et mention de disponibilite */
@media (min-width: 981px) {
  .mylearn-page .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 72px; }
  .mylearn-page .hero h1 { font-size: clamp(36px, 4.2vw, 52px); }
}
.mylearn-page .ml-hero-visual { padding: 28px 24px; gap: 20px; }
.mylearn-page .chip.ml-chip-avail { color: var(--violet); border-color: var(--violet); }
.mylearn-page .ml-avail { font-family: 'IBM Plex Mono', monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--violet); margin-bottom: 14px; }

/* MyLearn : section bêta, respiration de la colonne de gauche */
.mylearn-page .ml-beta-grid .bullet-list { gap: 16px; margin-top: 22px; }
.mylearn-page .ml-beta-grid .note-box { margin-top: 28px; }
@media (min-width: 1101px) {
  .mylearn-page .ml-beta-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 72px; }
}
@media (min-width: 1101px) {
  .mylearn-page .ml-beta-grid > div:first-child { position: sticky; top: 110px; }
}

/* MyLearn : champ piege anti-robots (invisible, hors ecran) */
.mylearn-page .ml-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Developpement evenementiel : 4e couleur d'activite, le bleu (nov. 2026). Meme gabarit que les
   pages Pupitreur (ambre) et Technicien lumiere (corail). */
.theme-page.blue .theme-section li::before { background: var(--blue); }
.theme-page.blue .btn-primary { background: var(--blue); color: #fff; }
.theme-page.blue .kicker::before { background: var(--blue); }
.theme-page.blue .index-num { color: var(--blue); }
.theme-page.blue .breadcrumb:hover { color: var(--blue); }
.dev-projects { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 18px; }
.dev-project { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: var(--radius); padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.dev-project h3 { font-size: 18px; }
.dev-project p { font-size: 15px; line-height: 1.6; }
@media (max-width: 760px) { .dev-projects { grid-template-columns: 1fr; } }

/* Accueil : rangee des activites, un logo par activite avec son nom et sa description (nov. 2026) */
.activities { padding-bottom: 100px; display: flex; flex-direction: column; gap: 32px; }
.activities-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.activity {
  height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 20px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  transition: transform 0.15s, border-color 0.15s;
}
.activity:hover { transform: translateY(-3px); }
.activity-logo { width: 104px; height: 104px; object-fit: contain; margin-bottom: 6px; }
.activity h3 { font-size: 18px; }
.activity p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); text-align: center; }
.activity-link { font-size: 13.5px; font-weight: 600; margin-top: auto; padding-top: 6px; }
.activity.teal { box-shadow: 0 20px 40px -24px rgba(47,209,192,0.4); } .activity.teal:hover { border-color: var(--teal); } .activity.teal .activity-link { color: var(--teal); }
.activity.amber { box-shadow: 0 20px 40px -24px rgba(245,169,63,0.4); } .activity.amber:hover { border-color: var(--amber); } .activity.amber .activity-link { color: var(--amber); }
.activity.coral { box-shadow: 0 20px 40px -24px rgba(242,97,122,0.4); } .activity.coral:hover { border-color: var(--coral); } .activity.coral .activity-link { color: var(--coral); }
.activity.blue { box-shadow: 0 20px 40px -24px rgba(61,139,253,0.4); } .activity.blue:hover { border-color: var(--blue); } .activity.blue .activity-link { color: var(--blue); }
.activity.violet { box-shadow: 0 20px 40px -24px rgba(164,139,255,0.4); } .activity.violet:hover { border-color: #a48bff; } .activity.violet .activity-link { color: #a48bff; }
:root[data-theme="light"] .activity.violet .activity-link { color: #6b4fd8; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .activity.violet .activity-link { color: #6b4fd8; } }
@media (max-width: 1100px) { .activities-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .activities-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .activities-row { grid-template-columns: 1fr; } }
.theme-section ul + p { margin-top: 16px; }

/* Accueil : les activites passent tout en haut (avant le hero) */
.home-page .activities { padding-top: 56px; padding-bottom: 0; }
.home-page .activities + .hero { padding-top: 72px; }
@media (max-width: 460px) {
  /* Mobile : cartes compactes (logo a gauche, texte a droite) pour ne pas repousser le hero trop bas */
  .home-page .activity { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; text-align: left; padding: 20px 18px; }
  .home-page .activity-logo { grid-row: 1 / span 3; width: 64px; height: 64px; margin: 0; }
  .home-page .activity h3, .home-page .activity p { text-align: left; }
  .home-page .activity-link { margin-top: 0; padding-top: 2px; }
  .home-page .activities { padding-top: 36px; }
  .home-page .activities + .hero { padding-top: 48px; }
}

.dev-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.dev-shots figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dev-shots img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; }
.dev-shots figcaption { font-size: 13px; color: var(--text-secondary); }
@media (max-width: 560px) { .dev-shots { grid-template-columns: 1fr; } }

/* Illustrations d'interface */
.dev-shots-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .dev-shots-3 { grid-template-columns: 1fr; } }
.ml-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.ml-shots figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ml-shots .ml-shot-main { grid-column: 1 / -1; }
.ml-shots img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--border); }
.ml-shots figcaption { font-size: 14px; color: var(--text-secondary); }
@media (max-width: 700px) { .ml-shots { grid-template-columns: 1fr; } }

/* MyLearn = une activite comme les autres : couleur de la page = violet (anneau interieur du
   logo), au lieu du turquoise par defaut. Reste isole sous .mylearn-page pour pouvoir
   detacher la page en vitrine independante plus tard. */
.mylearn-page .kicker::before { background: var(--violet); }
.mylearn-page .btn-primary { background: var(--violet); color: #17141c; }
:root[data-theme="light"] .mylearn-page .btn-primary { color: #fff; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .mylearn-page .btn-primary { color: #fff; } }
.mylearn-page .highlight::before { background: var(--violet); }
.mylearn-page .ml-check { background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--violet); }
.mylearn-page .contact-form select:focus { border-color: var(--violet); }
.mylearn-page .contact-form .ml-consent input { accent-color: var(--violet); }
.mylearn-page .contact-form .ml-consent a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.mylearn-page .ml-legal-links { margin: 18px 0 0; font-size: 14px; color: var(--text-secondary); }
.mylearn-page .ml-legal-links a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.mylearn-page .cta-banner .btn-primary { background: var(--violet); }
.mylearn-page .bullet-list li::before { background: var(--violet); }

/* MyLearn : communaute, encart « Bientot », tarifs (nov. 2026) */
.mylearn-page .ml-wide { grid-column: 1 / -1; }
.mylearn-page .ml-soon { margin-top: 24px; border: 1px dashed color-mix(in srgb, var(--violet) 60%, var(--border)); border-radius: var(--radius); padding: 22px 24px 8px; background: color-mix(in srgb, var(--violet) 6%, transparent); }
.mylearn-page .ml-soon-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mylearn-page .ml-soon-head h3 { font-size: 19px; margin: 0; }
.mylearn-page .ml-soon-note { font-size: 14.5px; color: var(--text-secondary); margin: 8px 0 14px; }
.mylearn-page .ml-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.mylearn-page .ml-price { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mylearn-page .ml-price-main { border-color: var(--violet); box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--violet) 55%, transparent); }
.mylearn-page .ml-price-name { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
.mylearn-page .ml-price-amount { font-family: 'Space Grotesk', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.1; }
.mylearn-page .ml-price-amount span { font-family: 'Work Sans', sans-serif; font-size: 15px; font-weight: 500; color: var(--text-secondary); }
.mylearn-page .ml-price p { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.mylearn-page .ml-price-total { margin-top: 20px; padding: 16px 20px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
.mylearn-page .ml-price-total strong { color: var(--text); }
@media (max-width: 900px) { .mylearn-page .ml-pricing { grid-template-columns: minmax(0, 1fr); } }

/* Agrandissement des images (nov. 2026) : voir lightbox.js */
.ml-shots img, .dev-shots img, .actus-article-body img, #hero-photo-img, [data-lightbox] img { cursor: zoom-in; }
.ml-shots img:focus-visible, .dev-shots img:focus-visible, #hero-photo-img:focus-visible, [data-lightbox] img:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.lb-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 7, 11, 0.96); display: flex; align-items: center; justify-content: center; padding: 56px 72px; }
.lb-overlay[hidden] { display: none; }
html.lb-open { overflow: hidden; }
.lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); background: #17141c; }
.lb-caption { color: #e8e3ee; font-size: 14.5px; text-align: center; max-width: 80ch; }
.lb-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(30, 26, 38, 0.8); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.lb-btn:hover { background: rgba(60, 52, 76, 0.95); border-color: rgba(255, 255, 255, 0.6); }
.lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-btn[hidden] { display: none; }
.lb-close { top: 14px; right: 14px; font-size: 18px; }
.lb-nav { top: 50%; transform: translateY(-50%); font-size: 30px; padding-bottom: 4px; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #d9d3e0; background: rgba(30, 26, 38, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 4px 14px; }
.lb-count[hidden] { display: none; }
@media (max-width: 700px) {
  .lb-overlay { padding: 64px 10px 72px; }
  .lb-nav { top: auto; bottom: 10px; transform: none; width: 44px; height: 44px; }
  .lb-prev { left: 16px; }
  .lb-next { right: 16px; }
  .lb-count { bottom: 20px; }
  .lb-img { max-height: calc(100vh - 190px); }
}
.mylearn-page .ml-beta-next { margin-top: 18px; }

/* MyLearn : section « Travailler avec votre promo » et nouvelles fonctions (nov. 2026) */
.mylearn-page .ml-promo-grid { margin-top: 28px; }
.mylearn-page .ml-promo-note { margin: 24px 0 0; max-width: 720px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.mylearn-page .ml-promo-note strong { color: var(--text); font-weight: 600; }

/* MyLearn : onglets, carrousels et galerie de captures (nov. 2026) */
.mylearn-page .ml-tabs { margin-top: 26px; }
.mylearn-page .ml-tablist { display: none; }
.mylearn-page .ml-tabs.is-ready > .ml-tablist {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 2px 2px 12px; margin: 0 -2px 8px;
}
.mylearn-page .ml-tablist::-webkit-scrollbar { display: none; }
.mylearn-page .ml-tab {
  flex: none; cursor: pointer; font: 600 14.5px/1 'Space Grotesk', sans-serif; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 11px 18px;
  transition: color .15s, border-color .15s, background-color .15s;
}
.mylearn-page .ml-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--violet) 55%, var(--border)); }
.mylearn-page .ml-tab[aria-selected="true"] {
  color: var(--text); border-color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent);
}
.mylearn-page .ml-tab:focus-visible, .mylearn-page .ml-car-btn:focus-visible, .mylearn-page .ml-dot-btn:focus-visible,
.mylearn-page .ml-gal-arrow:focus-visible, .mylearn-page .ml-thumb:focus-visible, .mylearn-page .ml-track:focus-visible,
.mylearn-page .ml-gallery-stage:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.mylearn-page .ml-tabpanel[hidden] { display: none; }
.mylearn-page .ml-tabs:not(.is-ready) .ml-tabpanel::before {
  content: attr(data-label); display: block; margin: 30px 0 14px;
  font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary);
}
.mylearn-page .ml-tabs .ml-prereq { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
.mylearn-page .ml-tabs .ml-faq { margin-top: 6px; }
.mylearn-page .ml-panel-title { font-size: 19px; margin: 6px 0 6px; }
.mylearn-page .ml-tabpanel > .lead-sm { margin-bottom: 4px; }
.mylearn-page .ml-tabpanel .ml-promo-note { margin-top: 8px; }

/* Carrousel : defilement natif avec accroche (scroll-snap), fleches et points ajoutes par le script */
.mylearn-page .ml-carousel { margin-top: 18px; }
.mylearn-page .ml-track {
  position: relative; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  padding: 12px 6px 46px; margin: -12px -6px -24px;
}
.mylearn-page .ml-track::-webkit-scrollbar { display: none; }
.mylearn-page .ml-track > * { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; scroll-snap-align: start; }
.mylearn-page .ml-track > .ml-prereq-item { display: flex; flex-direction: column; }
.mylearn-page .ml-track .pole-card { padding: 30px 26px; }
.mylearn-page .ml-carousel-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; position: relative; }
.mylearn-page .ml-carousel-ctrl[hidden] { display: none; }
.mylearn-page .ml-car-btn, .mylearn-page .ml-gal-arrow {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  width: 42px; height: 42px; border-radius: 50%; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  transition: border-color .15s, color .15s, opacity .15s, transform .15s;
}
.mylearn-page .ml-car-btn:hover:not(:disabled), .mylearn-page .ml-gal-arrow:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); }
.mylearn-page .ml-car-btn:disabled, .mylearn-page .ml-gal-arrow:disabled { opacity: .35; cursor: default; }
.mylearn-page .ml-dots { display: flex; align-items: center; gap: 8px; }
.mylearn-page .ml-dot-btn {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--text-secondary) 45%, transparent); transition: width .2s, background-color .2s;
}
.mylearn-page .ml-dot-btn[aria-current="true"] { width: 26px; background: var(--violet); }
@media (max-width: 900px) {
  .mylearn-page .ml-track > * { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
  .mylearn-page .ml-track { gap: 14px; }
  .mylearn-page .ml-track > * { flex-basis: 86%; }
  .mylearn-page .ml-tab { padding: 10px 15px; font-size: 14px; }
}

/* Galerie de captures : grande image, miniatures, zoom au clic (lightbox.js) */
.mylearn-page .ml-gallery { margin-top: 28px; max-width: 980px; margin-left: auto; margin-right: auto; }
.mylearn-page .ml-gallery-frame {
  position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--violet) 60%, transparent);
}
.mylearn-page .ml-gallery-stage.ml-shots {
  display: flex; grid-template-columns: none; gap: 0; margin: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mylearn-page .ml-gallery-stage::-webkit-scrollbar { display: none; }
.mylearn-page .ml-gallery-stage.ml-shots figure { flex: 0 0 100%; min-width: 0; gap: 0; position: relative; scroll-snap-align: center; scroll-snap-stop: always; }
.mylearn-page .ml-gallery-stage.ml-shots img { border: 0; border-radius: 0; cursor: zoom-in; width: 100%; height: auto; display: block; }
.mylearn-page .ml-gallery-stage.ml-shots figcaption {
  padding: 13px 20px 15px; font-size: 15px; font-weight: 500; color: var(--text); border-top: 1px solid var(--border); background: var(--surface);
}
.mylearn-page .ml-gal-arrow { position: absolute; top: 44%; transform: translateY(-50%); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(4px); }
.mylearn-page .ml-gal-prev { left: 14px; }
.mylearn-page .ml-gal-next { right: 14px; }
.mylearn-page .ml-gallery-count {
  position: absolute; top: 14px; right: 14px; padding: 5px 11px; border-radius: 999px; font: 500 12px 'IBM Plex Mono', monospace;
  letter-spacing: .05em; color: #fff; background: rgba(10, 8, 14, .6); pointer-events: none;
}
.mylearn-page .ml-gallery-thumbs {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; position: relative; padding: 16px 4px 6px; justify-content: safe center;
}
.mylearn-page .ml-gallery-thumbs::-webkit-scrollbar { display: none; }
.mylearn-page .ml-thumb {
  flex: none; width: 112px; padding: 0; cursor: pointer; overflow: hidden; border-radius: 10px; background: var(--surface);
  border: 2px solid transparent; opacity: .55; transition: opacity .15s, border-color .15s, transform .15s;
}
.mylearn-page .ml-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1047; object-fit: cover; }
.mylearn-page .ml-thumb:hover { opacity: .9; }
.mylearn-page .ml-thumb[aria-current="true"] { opacity: 1; border-color: var(--violet); transform: translateY(-2px); }
.mylearn-page .ml-gallery-hint { text-align: center; margin: 8px 0 0; font-size: 13.5px; color: var(--text-secondary); }
@media (max-width: 600px) {
  .mylearn-page .ml-gal-arrow { width: 36px; height: 36px; }
  .mylearn-page .ml-gal-prev { left: 8px; }
  .mylearn-page .ml-gal-next { right: 8px; }
  .mylearn-page .ml-gallery-stage.ml-shots figcaption { padding: 10px 14px 12px; font-size: 13.5px; }
  .mylearn-page .ml-thumb { width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .mylearn-page .ml-track, .mylearn-page .ml-gallery-stage, .mylearn-page .ml-gallery-thumbs { scroll-behavior: auto; }
  .mylearn-page .ml-thumb, .mylearn-page .ml-dot-btn, .mylearn-page .ml-tab { transition: none; }
}