/*
  langages.css
  Style partage du mini-site "Les langages et les technologies" (en-savoir-plus).
  Famille COLORBLOCK de la boite a truc : creme, bordures noires, ombres dures,
  polices Bungee / Lilita One / Nunito, accent CYAN. MAIS chaque technologie a sa
  couleur d'accent (jaune JS, orange Java, bleu C++, etc.) pour un hub spectaculaire.
  Partage par le hub et par chaque page de technologie (lien ../decoration/ ou decoration/).
*/

:root {
  --noir: #111; --blanc: #fff; --creme: #FFF7E6;
  --cyan: #0891b2; --cyan-clair: #22d3ee;
  --terminal: #0a0d18;
  --gris-texte: #555;

  /* Couleurs par technologie */
  --js: #f7df1e;        /* jaune JavaScript */
  --js-fonce: #b8a200;
  --outils: #16a3b8;    /* cyan outils */
  --java: #f89820;      /* orange Java */
  --cpp: #4f86c6;       /* bleu C++ */
  --qt: #41cd52;        /* vert Qt */
  --autres: #b07fd8;    /* violet */
  --comparer: #e0559a;  /* magenta comparateur */
  --python: #4f86c6;    /* bleu Python (pour les etiquettes du comparateur) */
  --quantique: #6c5ce7; /* indigo electrique (calcul quantique) */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Nunito', sans-serif; font-weight: 700;
  color: var(--noir); background: var(--creme); line-height: 1.6;
  background-image:
    radial-gradient(circle at 12% 18%, #FFE8C2 0 2px, transparent 2px),
    radial-gradient(circle at 82% 28%, #CFF6FB 0 2px, transparent 2px),
    radial-gradient(circle at 46% 86%, #E7D8F3 0 2px, transparent 2px);
  background-size: 50px 50px;
}

/* ====== En-tete ====== */
#entete { padding: 46px 24px 26px; text-align: center; }
#entete .surtitre {
  display: inline-block; font-family: 'Bungee', cursive; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blanc); background: var(--cyan);
  border: 3px solid var(--noir); border-radius: 999px; padding: 6px 16px;
  box-shadow: 4px 4px 0 var(--noir); margin: 0 0 16px;
}
#entete .surtitre::before { content: "\203A_ "; }
#titre-principal { margin: 0; font-family: 'Lilita One', cursive; font-size: clamp(30px, 6vw, 54px); line-height: 1.02; }
#sous-titre { color: var(--gris-texte); max-width: 680px; margin: 14px auto 0; font-weight: 700; }

/* ====== Contenu ====== */
#contenu { max-width: 980px; margin: 0 auto; padding: 12px 24px 56px; }
.section {
  background: var(--blanc); border: 5px solid var(--noir); border-radius: 18px;
  box-shadow: 8px 8px 0 var(--cyan); padding: 24px 26px; margin: 22px 0;
}
.section-titre { margin: 0 0 10px; font-family: 'Lilita One', cursive; font-size: 1.5rem; color: var(--cyan); }
.note { color: var(--gris-texte); font-size: .95em; }

/* ====== HUB : grille de tuiles technologiques ====== */
#hub {
  max-width: 1040px; margin: 0 auto; padding: 6px 22px 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px;
}
.tuile {
  position: relative; display: flex; flex-direction: column;
  background: var(--blanc); border: 5px solid var(--noir); border-radius: 20px;
  padding: 24px 22px 20px; text-decoration: none; color: var(--noir);
  box-shadow: 9px 9px 0 var(--accent, var(--cyan));
  transition: transform .14s ease, box-shadow .14s ease;
  overflow: hidden;
}
.tuile::after {
  /* bandeau de couleur en haut de la tuile */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: var(--accent, var(--cyan)); border-bottom: 3px solid var(--noir);
}
.tuile:hover { transform: translate(-3px, -3px); box-shadow: 14px 14px 0 var(--accent, var(--cyan)); }
.tuile-illustration {
  width: 76px; height: 76px; margin: 8px 0 14px;
  border: 4px solid var(--noir); border-radius: 16px; background: var(--creme);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 4px 4px 0 var(--noir);
}
.tuile-illustration svg { width: 52px; height: 52px; display: block; }
.tuile-pastille {
  align-self: flex-start; font-family: 'Bungee', cursive; font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--noir); background: var(--accent, var(--cyan));
  border: 3px solid var(--noir); border-radius: 999px; padding: 4px 12px; box-shadow: 3px 3px 0 var(--noir);
}
.tuile-titre { margin: 12px 0 6px; font-family: 'Lilita One', cursive; font-size: 1.45rem; line-height: 1.08; }
.tuile-resume { margin: 0 0 16px; color: var(--gris-texte); font-weight: 700; font-size: .96em; flex: 1; }
.tuile-ouvrir {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: 'Lilita One', cursive; font-size: 1rem; color: var(--noir);
  background: var(--accent, var(--cyan)); border: 3px solid var(--noir); border-radius: 10px;
  padding: 8px 16px; box-shadow: 3px 3px 0 var(--noir);
}
.tuile-ouvrir svg { width: 18px; height: 18px; }
.tuile:hover .tuile-ouvrir { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--noir); }

/* couleurs d'accent par tuile/page */
.accent-js      { --accent: var(--js); }
.accent-outils  { --accent: var(--cyan-clair); }
.accent-java    { --accent: var(--java); }
.accent-cpp     { --accent: var(--cpp); }
.accent-autres  { --accent: var(--autres); }
.accent-comparer { --accent: var(--comparer); }
.accent-3d { --accent: #2bb673; }
.accent-jeux { --accent: #ff5a5f; }
.accent-quantique { --accent: var(--quantique); }

/* la couleur d'ombre des sections suit l'accent de la page */
.page-accent .section { box-shadow: 8px 8px 0 var(--accent, var(--cyan)); }
.page-accent .section-titre { color: var(--accent-fonce, var(--cyan)); }

/* ====== Bandeau d'en-tete colore par page de techno ====== */
#ruban-techno {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--blanc); border: 4px solid var(--noir); border-radius: 18px;
  box-shadow: 6px 6px 0 var(--accent, var(--cyan)); padding: 10px 18px; margin-bottom: 6px;
}
#ruban-techno .ruban-illustration { width: 46px; height: 46px; }
#ruban-techno .ruban-illustration svg { width: 46px; height: 46px; }
#ruban-techno .ruban-nom { font-family: 'Bungee', cursive; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }

/* ====== Code ====== */
code {
  font-family: 'DejaVu Sans Mono', 'Courier New', monospace; background: var(--terminal);
  color: var(--cyan-clair); padding: 2px 8px; border-radius: 6px; font-size: .88em;
}
.code-bloc {
  display: block; background: var(--terminal); border: 4px solid var(--noir); border-radius: 12px;
  box-shadow: 5px 5px 0 var(--noir); padding: 16px 18px; overflow-x: auto;
  font-family: 'DejaVu Sans Mono', 'Courier New', monospace; font-size: 13.5px; line-height: 1.6;
  color: #e8ecf4; white-space: pre; margin: 14px 0;
}
.code-bloc .commentaire { color: #6a7aa0; }
.code-bloc .motcle { color: #ffb86b; }
.code-bloc .chaine { color: #6bffb0; }

/* ====== Tableaux ====== */
.tableau { width: 100%; border-collapse: collapse; margin-top: 14px; }
.tableau th, .tableau td { border: 3px solid var(--noir); padding: 11px 13px; text-align: left; vertical-align: top; font-weight: 700; }
.tableau th { background: var(--noir); color: var(--blanc); font-family: 'Bungee', cursive; font-size: .72rem; letter-spacing: .04em; }
.tableau td.critere { background: var(--creme); }

/* ====== Encadre ====== */
.encadre {
  border: 4px solid var(--noir); border-left-width: 10px; background: var(--creme);
  border-radius: 0 14px 14px 0; padding: 14px 18px; margin: 18px 0; box-shadow: 5px 5px 0 var(--noir);
}
.encadre-titre { font-family: 'Lilita One', cursive; font-size: 1.1rem; color: var(--cyan); margin-bottom: 4px; }

/* ====== Demo / bac a sable ====== */
.demo { margin-top: 16px; }
.demo-titre { margin: 0 0 12px; font-family: 'Bungee', cursive; font-size: .78rem; color: var(--cyan); text-transform: uppercase; letter-spacing: .06em; }
.action {
  font-family: 'Lilita One', cursive; font-size: .98rem; cursor: pointer;
  background: var(--cyan); color: var(--blanc); border: 4px solid var(--noir);
  border-radius: 10px; box-shadow: 4px 4px 0 var(--noir); padding: 10px 18px;
  transition: transform .1s ease, box-shadow .1s ease;
}
.action:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--noir); }
.action:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--noir); }
.exemple-bouton {
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: .9rem; cursor: pointer;
  background: var(--blanc); color: var(--noir); border: 3px solid var(--noir);
  border-radius: 999px; padding: 8px 15px; box-shadow: 3px 3px 0 var(--noir); transition: transform .1s ease;
}
.exemple-bouton:hover { transform: translate(-1px, -1px); }

/* ====== Grille d'outils (cartes-liens) ====== */
.grille-outils { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin-top: 16px; }
.carte-outil {
  display: block; background: var(--blanc); border: 4px solid var(--noir); border-radius: 14px;
  box-shadow: 6px 6px 0 var(--cyan); padding: 16px; text-decoration: none; color: var(--noir);
  transition: transform .12s ease, box-shadow .12s ease;
}
.carte-outil:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--cyan); }
.carte-outil-domaine { font-family: 'Bungee', cursive; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.carte-outil-nom { font-family: 'Lilita One', cursive; font-size: 1.2rem; margin-bottom: 4px; }
.carte-outil-desc { font-size: .92em; color: var(--gris-texte); font-weight: 700; }
.lien-essayer {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: 'Lilita One', cursive; font-size: .98rem; color: var(--noir);
  background: var(--accent, var(--cyan)); border: 3px solid var(--noir); border-radius: 10px;
  padding: 9px 16px; box-shadow: 3px 3px 0 var(--noir); text-decoration: none;
  transition: transform .1s ease, box-shadow .1s ease;
}
.lien-essayer:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--noir); }

/* ====== Vignettes de sites (captures d'ecran) ====== */
.grille-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 16px; }
.vignette-site {
  display: flex; flex-direction: column; background: var(--blanc); border: 4px solid var(--noir);
  border-radius: 16px; box-shadow: 7px 7px 0 var(--accent, var(--cyan)); overflow: hidden;
  text-decoration: none; color: var(--noir); transition: transform .12s ease, box-shadow .12s ease;
}
.vignette-site:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--accent, var(--cyan)); }
.vignette-apercu { width: 100%; height: 158px; object-fit: cover; object-position: top center; display: block; border-bottom: 4px solid var(--noir); background: var(--terminal); }
.vignette-apercu-dessin {
  width: 100%; height: 158px; border-bottom: 4px solid var(--noir); display: flex; align-items: center; justify-content: center;
  font-family: 'Lilita One', cursive; font-size: 1.8rem; color: var(--blanc);
}
.vignette-corps { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.vignette-domaine { font-family: 'Bungee', cursive; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); margin-bottom: 5px; }
.vignette-nom { font-family: 'Lilita One', cursive; font-size: 1.22rem; margin-bottom: 5px; }
.vignette-desc { font-size: .9em; color: var(--gris-texte); font-weight: 700; flex: 1; }
.vignette-lien { margin-top: 12px; font-family: 'Lilita One', cursive; font-size: .92rem; color: var(--noir); }
.badge-quebec { display: inline-block; font-family: 'Bungee', cursive; font-size: .55rem; letter-spacing: .05em; background: #0048ff; color: #fff; border: 2px solid var(--noir); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }

/* ====== Pied / navigation retour ====== */
#retour { max-width: 980px; margin: 0 auto; padding: 14px 24px 50px; text-align: center; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
#retour a { font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--cyan); text-decoration: none; }
#retour a:hover { text-decoration: underline; }