/* ===== Vitrine JBC : le style de la page Formation IA, partagé par tout le site (Julien, 02/10/2026) =====
   Grille de petits carrés fondue, dégradés, noir dégradé, vraie texture papier, icônes Tabler dans les pastilles.
   Une définition par composant, préfixe v- (aucune collision avec les feuilles des pages), paliers en fin de feuille.
   Pied commun : _outils/vitrine/pied.html, posé dans chaque page par _outils/vitrine/poser-pied.py. */
:root {
  --v-jaune: #FFD600;
  --v-noir: #111;
  --v-creme: #FBF7EA;
  --v-jaune-pale: #FFF8D6;
  --v-texte-doux: #3F4653;
  --v-trait: #E7E5DF;
  --v-grille-trait: rgba(17, 17, 17, .06);
  --v-grille-trait-clair: rgba(255, 255, 255, .05);
  --v-degrade-noir: radial-gradient(ellipse 60% 55% at 12% 8%, rgba(255, 214, 0, .08), transparent 70%), radial-gradient(ellipse 45% 70% at 100% 45%, rgba(64, 120, 255, .10), transparent 70%), radial-gradient(ellipse 55% 60% at 88% 100%, rgba(255, 214, 0, .045), transparent 70%), linear-gradient(160deg, #1d1d1d 0%, #111 45%, #070707 100%);
  --v-degrade-creme: linear-gradient(180deg, #fff, var(--v-creme) 14%, var(--v-jaune-pale) 50%, var(--v-creme) 86%, #fff);
  --v-ombre: 0 22px 44px -18px rgba(17, 17, 17, .28);
  --v-r: 16px;
  --v-r-lg: 22px;
  --v-pill: 999px;
  --v-transition: .18s ease;
}

.v-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.v-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* fonds : grille fondue, crème/jaune dégradé, noir dégradé, papier (12 %, fondu haut et bas) */
.v-grille { position: relative; isolation: isolate; }
.v-grille::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--v-grille-trait) 1px, transparent 1px), linear-gradient(90deg, var(--v-grille-trait) 1px, transparent 1px); background-size: 44px 44px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 85%); mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 85%); }
.v-creme { background: var(--v-degrade-creme); }
.v-sombre { position: relative; isolation: isolate; background: var(--v-degrade-noir); color: #fff; }
.v-sombre.v-grille::before { background-image: linear-gradient(var(--v-grille-trait-clair) 1px, transparent 1px), linear-gradient(90deg, var(--v-grille-trait-clair) 1px, transparent 1px); }
.v-papier { position: relative; isolation: isolate; }
.v-papier::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .12; mix-blend-mode: multiply; background: url('/assets/textures/coton-creme-multiply.webp') repeat; background-size: 640px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.v-sombre.v-papier::after { mix-blend-mode: screen; background-image: url('/assets/textures/coton-creme-screen.webp'); }

/* pastille de titre : noire, texte jaune, icône dans un rond jaune (sur fond sombre : l'inverse) */
.v-pastille { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: var(--v-pill); background: var(--v-noir); color: var(--v-jaune); font-family: 'Inter', -apple-system, sans-serif; font-size: 12.5px; line-height: 1.3; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.v-pastille .v-ic { width: 16px; height: 16px; padding: 4px; box-sizing: content-box; border-radius: var(--v-pill); background: var(--v-jaune); color: var(--v-noir); }
.v-sombre .v-pastille { background: var(--v-jaune); color: var(--v-noir); }
.v-sombre .v-pastille .v-ic { background: var(--v-noir); color: var(--v-jaune); }

/* boutons pilule : noir/jaune, clair, jaune ; au survol on soulève, jamais de changement de couleur */
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-family: 'Inter', -apple-system, sans-serif; font-weight: 800; font-size: 14px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; text-align: center; border: 0; border-radius: var(--v-pill); padding: 14px 24px; background: var(--v-noir); color: var(--v-jaune); cursor: pointer; transition: transform var(--v-transition); }
.v-btn:hover { transform: translateY(-2px); }
.v-btn--clair { background: #fff; color: var(--v-noir); box-shadow: inset 0 0 0 2px var(--v-noir); }
.v-btn--jaune { background: var(--v-jaune); color: var(--v-noir); }

/* ===== Pied commun ===== */
.site-pied { margin-top: auto; font-family: 'Inter', -apple-system, sans-serif; line-height: 1.5; padding: 72px 24px 0; text-align: left; }
.site-pied-wrap { max-width: 1200px; margin: 0 auto; }
.site-pied-haut { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: 40px; padding-bottom: 48px; }
.site-pied-logo { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 800; font-size: 18px; }
.site-pied-logo img { width: 40px; height: 40px; border-radius: 50%; }
.site-pied-marque p { margin: 16px 0 22px; font-size: 15.5px; line-height: 1.6; color: #D9D9D9; }
.site-pied-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--v-jaune); }
.site-pied-titre .v-ic { width: 16px; height: 16px; padding: 5px; box-sizing: content-box; border-radius: var(--v-pill); background: var(--v-jaune); color: var(--v-noir); }
.site-pied-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-pied-col > a { color: #D9D9D9; text-decoration: none; font-size: 15.5px; transition: color var(--v-transition); }
.site-pied-col > a:hover { color: var(--v-jaune); }
.site-pied-texte { margin: 0 0 6px; font-size: 15.5px; line-height: 1.55; color: #D9D9D9; }
.site-pied-form { display: flex; width: 100%; margin: 0; border-radius: 12px; overflow: hidden; border: 2px solid var(--v-jaune); background: #fff; }
.site-pied-form input[type="email"] { flex: 1; min-width: 0; padding: 13px 16px; border: 0; background: transparent; color: var(--v-noir); font-size: 16px; font-family: inherit; outline: none; }
.site-pied-form button { padding: 13px 18px; border: 0; background: var(--v-jaune); color: var(--v-noir); font-family: inherit; font-weight: 800; font-size: 14px; white-space: nowrap; cursor: pointer; }
.site-pied-form button:disabled { opacity: .6; cursor: wait; }
.site-pied-hp { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; font-size: 16px; }
.site-pied-ok { display: none; margin: 0; font-weight: 700; color: var(--v-jaune); }
.site-pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; color: #9A9A9A; }
.site-pied-bas a { color: #BDBDBD; text-decoration: none; }
.site-pied-bas a:hover { color: var(--v-jaune); }
.site-pied-lieu { display: inline-flex; align-items: center; gap: 8px; }
.site-pied-lieu .v-ic { width: 16px; height: 16px; color: var(--v-jaune); }

/* ===== Paliers ===== */
@media (max-width: 1024px) {
  .site-pied { padding: 56px 16px 0; }
  .site-pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
}
@media (max-width: 640px) {
  .v-btn { padding: 13px 20px; }
  .site-pied-haut { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .site-pied-col { align-items: center; }
  .site-pied-titre { justify-content: center; }
  .site-pied-form { flex-direction: column; }
  .site-pied-form input[type="email"] { text-align: center; }
  .site-pied-bas { flex-direction: column; text-align: center; }
}