/*
  donnees.css
  Style partage du mini-site "Les technologies de donnees" (en-savoir-plus).
  Meme famille COLORBLOCK que "langages-et-technologies" : creme, bordures noires,
  ombres dures, polices Bungee / Lilita One / Nunito. Accent de base TEAL (donnees),
  et chaque famille de technologie a sa propre couleur d'accent pour un hub vivant.
  Partage par le hub et par chaque page de techno (lien ../decoration/ ou decoration/).
*/

:root {
  --noir: #111; --blanc: #fff; --creme: #FFF7E6;
  --teal: #0d9488; --teal-clair: #2dd4bf;
  --terminal: #0a0d18;
  --gris-texte: #555;

  /* Couleurs par famille de technologie de donnees */
  --relationnel: #4f86c6;  /* bleu SQL */
  --nosql: #41cd52;        /* vert NoSQL */
  --semantique: #b07fd8;   /* violet web semantique */
  --fichiers: #16a3b8;     /* cyan bases fichiers */
  --services: #f89820;     /* orange services / ESB */
  --blockchain: #f4b400;   /* or decentralise */
  --cloud: #38bdf8;        /* bleu ciel nuage */
  --datalake: #e0559a;     /* magenta datalake */
  --mer: #1d4e89;          /* bleu ocean profond (la mer de donnees) */
}

* { 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%, #C7F0EA 0 2px, transparent 2px),
    radial-gradient(circle at 82% 28%, #CFE5FB 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(--teal);
  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: 700px; 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(--teal); padding: 24px 26px; margin: 22px 0;
}
.section-titre { margin: 0 0 10px; font-family: 'Lilita One', cursive; font-size: 1.5rem; color: var(--teal); }
.note { color: var(--gris-texte); font-size: .95em; }

/* ====== HUB : grille de tuiles ====== */
#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(--teal));
  transition: transform .14s ease, box-shadow .14s ease;
  overflow: hidden;
}
.tuile::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background: var(--accent, var(--teal)); border-bottom: 3px solid var(--noir);
}
.tuile:hover { transform: translate(-3px, -3px); box-shadow: 14px 14px 0 var(--accent, var(--teal)); }
.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(--teal));
  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(--teal)); 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-relationnel { --accent: var(--relationnel); }
.accent-nosql       { --accent: var(--nosql); }
.accent-semantique  { --accent: var(--semantique); }
.accent-fichiers    { --accent: var(--fichiers); }
.accent-services    { --accent: var(--services); }
.accent-blockchain  { --accent: var(--blockchain); }
.accent-cloud       { --accent: var(--cloud); }
.accent-datalake    { --accent: var(--datalake); }
.accent-mer         { --accent: var(--mer); }

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

/* ====== Bandeau d'en-tete colore par page ====== */
#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(--teal)); 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(--teal-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(--teal); margin-bottom: 4px; }

/* ====== Grille de cartes-liens (outils, services reels) ====== */
.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(--accent, var(--teal)); 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(--accent, var(--teal)); }
.carte-outil-domaine { font-family: 'Bungee', cursive; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); 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(--teal)); 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); }

/* ====== Bac a sable / demo ====== */
.demo { margin-top: 16px; }
.demo-titre { margin: 0 0 12px; font-family: 'Bungee', cursive; font-size: .78rem; color: var(--teal); text-transform: uppercase; letter-spacing: .06em; }
.action {
  font-family: 'Lilita One', cursive; font-size: .98rem; cursor: pointer;
  background: var(--teal); 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); }
.champs {
  width: 100%; font-family: 'DejaVu Sans Mono', 'Courier New', monospace; font-size: 13.5px;
  background: var(--terminal); color: #e8ecf4; border: 4px solid var(--noir); border-radius: 12px;
  box-shadow: 5px 5px 0 var(--noir); padding: 14px 16px; resize: vertical; line-height: 1.6;
}
.sortie {
  margin-top: 14px; background: var(--blanc); border: 4px solid var(--noir); border-radius: 12px;
  box-shadow: 5px 5px 0 var(--noir); padding: 14px 16px; min-height: 40px; overflow-x: auto;
}

/* ====== 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(--teal); text-decoration: none; }
#retour a:hover { text-decoration: underline; }