:root {
      --texte: #1a1c2e;
      --texte-doux: #4a506b;
      --border: #e2eaf7;
    }

    body { background: #fff; color: var(--texte); }

    /* SKIP */
    .skip-link {
      position: absolute; top: -100px; left: 1rem;
      background: var(--jaune); color: var(--bleu-sombre);
      padding: 8px 16px; font-weight: 700; border-radius: 4px;
      text-decoration: none; z-index: 9999; transition: top .2s;
    }
    .skip-link:focus { top: 1rem; }

    /* HERO */
    .hero-tag {
      background: var(--jaune-clair);
      font-size: .72rem;
      padding: 5px 14px;
    }
    .hero h1 {
      font-size: clamp(2rem, 4.5vw, 3.2rem);
      margin-bottom: 1.25rem;
    }
    .hero h1 em { color: var(--jaune); }
    .hero-sub {
      font-size: 1.02rem; line-height: 1.75;
      max-width: 560px;
    }
	/* ANCRES DE NAVIGATION — formations */
	.hero-anchors {
	  display: flex; flex-wrap: wrap; gap: .75rem;
	  margin-bottom: 2.5rem;
	}
	.hero-anchor {
	  background: var(--bleu-tres-clair); border: 1px solid var(--bleu-clair);
      color: var(--bleu); font-family: var(--font); font-size: .8rem; font-weight: 600;
      padding: 6px 16px; border-radius: 100px; cursor: pointer; white-space: nowrap;
      transition: background .2s, color .2s, border-color .2s;
	  text-decoration: none; white-space: nowrap;
	  transition: background .2s, border-color .2s;
	}
	.hero-anchor:hover {
	 background: var(--bleu); color: #fff; border-color: var(--bleu);
	}
	.hero-anchor::after { content: '↓'; font-size: .75rem; opacity: .7; }
		/* STATS HERO */
		.hero-stats {
		  display: flex; gap: 3rem; flex-wrap: wrap;
		  padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,.12);
		}
		.hero-stat-number {
		  font-size: 2rem; font-weight: 800; color: var(--jaune);
		  letter-spacing: -.04em; display: block;
		}
    .hero-stat-label { font-size: .83rem; color: rgba(255,255,255,.55); margin-top: .2rem; }

    /* GRILLE FORMATIONS */
    .section-formations {
      padding: 70px 5vw 100px;
      background: var(--bleu-tres-clair);
    }
    .section-formations-inner { max-width: 1100px; margin: 0 auto; }

    .section-label {
      margin-bottom: .6rem;
    }
    .section-title {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      margin-bottom: 3rem;
    }

    .formations-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    .formation-card {
      background: #fff; border: 1px solid var(--border);
      border-radius: 12px; overflow: hidden;
      display: flex; flex-direction: column;
      transition: box-shadow .25s, transform .2s;
    }
    .formation-card:hover {
      box-shadow: 0 10px 40px rgba(0,51,140,.12);
      transform: translateY(-4px);
    }

    .formation-card-top {
      padding: 1.75rem 1.75rem 0;
    }
    .formation-picto {
      width: 48px; height: 48px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; margin-bottom: 1.2rem;
    }
    .picto-vert { background: var(--vert-clair); }
    .picto-bleu { background: var(--bleu-clair); }
    .picto-jaune { background: var(--jaune-clair); }

    .formation-niveau {
      display: inline-block; font-size: .68rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      padding: 3px 10px; border-radius: 100px; margin-bottom: .9rem;
    }
    .niveau-fondamentaux { background: var(--vert-clair); color: #2a6b29; }
    .niveau-avance { background: var(--bleu-clair); color: var(--bleu); }
    .niveau-expert { background: var(--jaune-clair); color: #7a5a00; }

    .formation-card h3 {
      font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em;
      color: var(--bleu-sombre); margin-bottom: .65rem; line-height: 1.3;
    }
    .formation-card p {
      font-size: .88rem; line-height: 1.65; color: var(--texte-doux);
    }

    .formation-card-meta {
      padding: 1.25rem 1.75rem;
      display: flex; flex-direction: column; gap: .5rem;
      border-top: 1px solid var(--border); margin-top: 1.5rem;
    }
    .meta-row {
      display: flex; align-items: center; gap: .6rem;
      font-size: .82rem; color: var(--texte-doux);
    }
    .meta-icon { font-size: 1rem; flex-shrink: 0; }
    .meta-value { font-weight: 600; color: var(--texte); }

    .formation-card-footer {
      padding: 1.25rem 1.75rem 1.75rem;
      margin-top: auto;
    }
	
	/* Liens vers type de formation */
    .btn-card {
      display: inline-flex; align-items: center; gap: .4rem;
      background: var(--bleu-sombre); color: #fff;
      font-family: var(--font); font-size: .85rem; font-weight: 700;
      padding: 11px 20px; border-radius: 6px; text-decoration: none;
      transition: background .2s, transform .15s;
    }
    .btn-card:hover { background: var(--bleu); transform: translateY(-1px); }
    .btn-card::after { content: '→'; transition: transform .2s; }
    .btn-card:hover::after { transform: translateX(3px); }

    /* CARTE FEATURED */
    .formation-card.featured {
      grid-column: span 2;
      flex-direction: row;
    }
    .formation-card.featured .formation-card-top {
      flex: 1; padding: 2rem;
    }
    .formation-card.featured .formation-card-side {
      width: 220px; flex-shrink: 0;
      background: var(--bleu-sombre);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 2rem 1.5rem; gap: 1.25rem; text-align: center;
    }
    .formation-card.featured .formation-card-side p {
      font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.5;
    }
    .btn-featured {
      background: var(--jaune); color: var(--bleu-sombre);
      font-family: var(--font); font-size: .85rem; font-weight: 700;
      padding: 11px 20px; border-radius: 6px; text-decoration: none;
      transition: background .2s;
    }
    .btn-featured:hover { background: #ffe76a; }

    /* SECTION PEDAGOGIE */
    .section-pedago {
      padding: 100px 5vw;
      background: #fff;
    }
    .section-pedago-inner {
      max-width: 1100px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
    }
    .pedago-content .section-title { margin-bottom: 1.5rem; }
    .pedago-content p {
      font-size: .975rem; line-height: 1.8; color: var(--texte-doux); margin-bottom: 1.25rem;
    }
    .pedago-steps { display: flex; flex-direction: column; gap: 1.25rem; }
    .pedago-step {
      display: flex; gap: 1.25rem; align-items: flex-start;
    }
    .step-num {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--bleu-sombre); color: #fff;
      font-size: .8rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .step-text h4 { font-size: .95rem; font-weight: 700; margin-bottom: .3rem; color: var(--bleu-sombre); }
    .step-text p { font-size: .87rem; line-height: 1.6; color: var(--texte-doux); }

    /* SECTION CTA BANDE */
    .btn-primary {
      white-space: nowrap;
    }

    
    /* RESPONSIVE */
    @media (max-width: 1000px) {
      .formation-card.featured { grid-column: span 1; flex-direction: column; }
      .formation-card.featured .formation-card-side { width: 100%; flex-direction: row; justify-content: space-between; }
      .formations-grid { grid-template-columns: repeat(2, 1fr); }
      .section-pedago-inner { grid-template-columns: 1fr; gap: 3rem; }
    }
    @media (max-width: 640px) {
      .formations-grid { grid-template-columns: 1fr; }
      .hero-stats { gap: 2rem; }
    }