/* Design 2026 InfoPlus - feuille partagée par toutes les pages du site.
   Un seul endroit à modifier ; penser à incrémenter ?v= dans les pages
   si un cache agressif traîne. */

    :root {
      --default-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
      --heading-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
      --nav-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    }

    body { letter-spacing: -0.005em; }

    /* --- Titres de section : kicker discret + grand titre en bas-de-casse --- */
    .section-title h2 {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2.4px;
      line-height: 1;
      color: color-mix(in srgb, var(--accent-color), #64748b 35%);
    }
    .section-title p {
      text-transform: none;
      font-size: clamp(1.9rem, 3.4vw, 2.5rem);
      font-weight: 700;
      letter-spacing: -0.025em;
      line-height: 1.15;
    }

    /* --- Navigation : pilule moderne --- */
    .navmenu a { font-weight: 600; letter-spacing: -0.01em; }
    .btn-getstarted {
      border-radius: 999px !important;
      font-weight: 700;
      letter-spacing: -0.01em;
      padding: 10px 26px !important;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .btn-getstarted:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 26px color-mix(in srgb, var(--accent-color) 35%, transparent);
    }

    /* --- Cartes : rayons généreux, ombres douces, survol vivant --- */
    .courses .course-item,
    .trainers-index .member,
    .trainers .member,
    .why-us .icon-box,
    .features .features-item {
      border-radius: 22px;
      border: 1px solid rgba(15, 23, 42, 0.07);
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    }
    .courses .course-item:hover,
    .trainers-index .member:hover,
    .why-us .icon-box:hover,
    .features .features-item:hover {
      transform: translateY(-6px);
      border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
      box-shadow: 0 26px 54px rgba(15, 23, 42, 0.12);
    }
    .courses .course-content { padding: 20px; }
    .courses .course-content h3 { font-weight: 700; letter-spacing: -0.015em; }
    .trainers-index .member img,
    .trainers .member img { margin-bottom: 22px; }

    /* --- Compteurs : chiffres display serrés --- */
    .counts .stats-item span {
      font-weight: 800;
      letter-spacing: -0.03em;
      font-size: clamp(2.4rem, 4vw, 3.2rem);
    }
    .counts .stats-item p {
      font-weight: 600;
      letter-spacing: 0.4px;
      color: color-mix(in srgb, var(--default-color), transparent 35%);
    }

    /* --- Bandeau anniversaire : carte arrondie cohérente --- */
    .anniversary-celebration .anniversary-banner,
    .anniversary-celebration .anniversary-content {
      border-radius: 24px;
      overflow: hidden;
    }

    /* --- Boutons génériques des sections --- */
    .why-us .icon-box,
    .features .features-item {
      border-radius: 22px;
    }
    .read-more, .buy-now {
      border-radius: 999px !important;
      font-weight: 700;
    }

    /* ==================== MODE SOMBRE ====================
       Le template roule sur des variables CSS : on les rebascule sous
       [data-theme="dark"], transitions douces sur les surfaces. */
    body,
    .header,
    section,
    .courses .course-item,
    .trainers-index .member,
    .trainers .member,
    .why-us .icon-box,
    .features .features-item,
    .why-box,
    .va-footer,
    .va-footer-right {
      transition: background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease;
    }

    [data-theme="dark"] {
      color-scheme: dark;
      --background-color: #0b1220;
      --default-color: rgba(226, 232, 240, 0.85);
      --heading-color: #ffffff;
      --surface-color: #131d36;
      --contrast-color: #ffffff;
      --nav-color: rgba(255, 255, 255, 0.85);
      --nav-hover-color: #7fb5f5;
      --nav-mobile-background-color: #0e1730;
      --nav-dropdown-background-color: #101a33;
      /* Les liens du menu mobile utilisent cette variable : sans elle,
         texte sombre sur panneau sombre = menu invisible. */
      --nav-dropdown-color: rgba(255, 255, 255, 0.88);
      --nav-dropdown-hover-color: #7fb5f5;
    }

    [data-theme="dark"] .light-background {
      --background-color: #0e1730;
      --surface-color: #16213c;
    }

    /* PIÈGE : backdrop-filter fait du header le conteneur de ses enfants en
       position:fixed → le panneau du menu mobile (fixed, overflow hidden) se
       retrouvait enfermé dans les 90 px du header, invisible. Le flou n'est
       donc appliqué qu'en desktop, où le menu n'est pas fixed. */
    [data-theme="dark"] .header {
      background-color: rgba(11, 18, 32, 0.96);
    }
    @media (min-width: 1200px) {
      [data-theme="dark"] .header {
        background-color: rgba(11, 18, 32, 0.86);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }
    }

    [data-theme="dark"] .courses .course-item,
    [data-theme="dark"] .trainers-index .member,
    [data-theme="dark"] .trainers .member,
    [data-theme="dark"] .why-us .icon-box,
    [data-theme="dark"] .features .features-item {
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
    }

    [data-theme="dark"] .section-title h2 { color: rgba(255, 255, 255, 0.5); }

    [data-theme="dark"] .anniversary-banner {
      background: linear-gradient(120deg, #1a2440, #232f52) !important;
      color: #ffd666 !important;
    }

    /* Section anniversaire : son dégradé clair est codé en dur → variante nuit */
    [data-theme="dark"] .anniversary-celebration {
      background: linear-gradient(135deg, #0e1730, #0b1220);
    }
    [data-theme="dark"] .video-wrapper {
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    /* Footer premium : variante sombre (mêmes valeurs que la landing du portail) */
    [data-theme="dark"] .va-footer { background: #0b0916; }
    [data-theme="dark"] .va-footer-right { background: rgba(255, 255, 255, 0.055); box-shadow: none; }
    [data-theme="dark"] .va-footer-col-title { color: rgba(255, 255, 255, 0.45); }
    [data-theme="dark"] .va-footer-col a { color: rgba(255, 255, 255, 0.85); }
    [data-theme="dark"] .va-footer-col a:hover { color: #a8c3f0; }
    [data-theme="dark"] .va-footer-copy { color: rgba(255, 255, 255, 0.4); }
    [data-theme="dark"] .va-footer-cta h4 { color: rgba(255, 255, 255, 0.6); }
    [data-theme="dark"] .va-footer-cta strong { color: #ffffff; }
    [data-theme="dark"] .va-watermark text { fill: rgba(255, 255, 255, 0.045); }
    [data-theme="dark"] .va-footer-news .va-news-hint { color: rgba(255, 255, 255, 0.5); }
    [data-theme="dark"] .va-news-row input[type="email"] {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.16);
      color: #ffffff;
    }
    [data-theme="dark"] .va-footer-left-veil {
      background: linear-gradient(180deg, rgba(11, 27, 61, 0.3) 0%, rgba(11, 27, 61, 0.12) 40%, rgba(11, 27, 61, 0.62) 100%);
    }

    /* Bouton bascule clair/sombre dans le header */
    .theme-switch {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.14);
      background: transparent;
      color: var(--nav-color);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 12px;
      cursor: pointer;
      font-size: 1.02rem;
      flex-shrink: 0;
      transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    }
    .theme-switch:hover {
      color: var(--accent-color);
      border-color: var(--accent-color);
      transform: rotate(12deg);
    }
    [data-theme="dark"] .theme-switch { border-color: rgba(255, 255, 255, 0.22); }

    /* Sous 1200 px le template réordonne le header (logo 1, bouton 2, menu 3) :
       sans ordre, la lune sautait à gauche du logo. Logo seul à gauche,
       lune collée au burger à droite. */
    @media (max-width: 1200px) {
      .theme-switch {
        order: 2;
        margin-left: auto;
        margin-right: 10px;
      }
    }

    /* Mobile : la barre respire — le bouton Inscription passe dans le menu
       burger (le héro garde son « S'inscrire » plein écran). */
    .menu-inscription-mobile { display: none; }
    @media (max-width: 767px) {
      .btn-getstarted { display: none; }
      .menu-inscription-mobile { display: block; }
      .menu-inscription-mobile a {
        color: var(--accent-color) !important;
        font-weight: 700 !important;
      }
    }

    /* ============ MODALES CARTES (programmes & formateurs) ============
       Carte cliquée → grand plan en modale (fond flouté, entrée en zoom). */
    .courses .course-item, .trainers-index .member { cursor: pointer; }

    .hc-modal {
      position: fixed;
      inset: 0;
      z-index: 4000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 22px;
    }
    .hc-modal[hidden] { display: none; }
    .hc-modal-veil {
      position: absolute;
      inset: 0;
      background: rgba(8, 12, 25, 0.62);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .hc-modal-card {
      position: relative;
      width: min(680px, 94vw);
      max-height: 88vh;
      overflow: auto;
      background: var(--surface-color);
      color: var(--default-color);
      border-radius: 26px;
      box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45);
      opacity: 0;
      transform: translateY(18px) scale(0.94);
      transition: opacity 0.35s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .hc-modal.ouvert .hc-modal-veil { opacity: 1; }
    .hc-modal.ouvert .hc-modal-card { opacity: 1; transform: translateY(0) scale(1); }
    .hc-modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 2;
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: none;
      background: rgba(8, 12, 25, 0.45);
      color: #ffffff;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      transition: background 0.25s ease, transform 0.25s ease;
    }
    .hc-modal-close:hover { background: rgba(8, 12, 25, 0.72); transform: rotate(90deg); }
    .hc-modal-media { height: clamp(190px, 34vh, 300px); overflow: hidden; }
    .hc-modal-media img { width: 100%; height: 100%; object-fit: cover; }
    .hc-modal-body { padding: 26px 28px 30px; }
    .hc-modal-kicker {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2.2px;
      color: var(--accent-color);
      margin-bottom: 10px;
    }
    .hc-modal-body h3 {
      font-size: 1.55rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--heading-color);
      margin: 0 0 12px;
    }
    .hc-modal-texte { margin: 0 0 22px; line-height: 1.75; }
    .hc-modal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hc-modal-actions .hc-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 15px 32px;
      border-radius: 999px;
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .hc-modal-actions .hc-btn:hover { transform: translateY(-2px); }
    .hc-modal-actions .hc-btn-solid {
      background: var(--accent-color);
      color: #ffffff;
      box-shadow: 0 12px 30px color-mix(in srgb, var(--accent-color) 35%, transparent);
    }
    .hc-modal-actions .hc-btn-ligne {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 15px 32px;
      border-radius: 999px;
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      border: 1px solid color-mix(in srgb, var(--default-color), transparent 72%);
      color: var(--heading-color);
      transition: border-color 0.25s ease, transform 0.25s ease;
    }
    .hc-modal-actions .hc-btn-ligne:hover { border-color: var(--accent-color); transform: translateY(-2px); }
    body.hc-modal-verrou { overflow: hidden; }

    /* Boucle du héro vidéo : deux lecteurs du même fichier en fondu croisé —
       la fin de l'un se dissout directement dans le début de l'autre. */
    .hc-video-jour.hc-video-fondu { opacity: 0; }

    /* ============ CARTES FORMATEURS (page Formateurs) ============ */
    .trainers .member { padding: 26px 22px 24px; text-align: center; }
    .trainers .member .member-img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto 18px;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
    }
    .trainers .member .member-img img { width: 100%; height: 100%; object-fit: cover; }
    .trainers .member h4 { font-weight: 700; letter-spacing: -0.015em; margin-bottom: 4px; }
    .trainers .member .member-info span,
    .trainers .member span {
      display: block;
      font-family: 'Source Serif 4', Georgia, serif;
      font-style: italic;
      color: var(--accent-color);
      margin-bottom: 10px;
    }
    .trainers .member p { font-size: 0.92rem; line-height: 1.65; }

    /* ============ CARTES D'INFOS DES PAGES DÉTAIL (.details-item) ============ */
    .details-item {
      background: var(--surface-color);
      border: 1px solid rgba(15, 23, 42, 0.07);
      border-radius: 18px;
      padding: 26px 24px;
      height: 100%;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.7s ease, border-color 0.7s ease;
    }
    .details-item:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1); }
    .details-item i {
      display: inline-flex;
      width: 46px;
      height: 46px;
      align-items: center;
      justify-content: center;
      background: color-mix(in srgb, var(--accent-color) 12%, transparent);
      color: var(--accent-color) !important;
      border-radius: 14px;
      font-size: 20px;
      margin-bottom: 14px;
    }
    .details-item h4 { font-weight: 700; letter-spacing: -0.015em; }
    [data-theme="dark"] .details-item { border-color: rgba(255, 255, 255, 0.08); }

    /* ============ SOMBRE : boîtes custom des pages (fonds clairs codés en dur) ============ */
    [data-theme="dark"] .info-section,
    [data-theme="dark"] .highlight-box,
    [data-theme="dark"] .advantage-item,
    [data-theme="dark"] .cert-item,
    [data-theme="dark"] .math-formula,
    [data-theme="dark"] .next-step-box,
    [data-theme="dark"] .program-item,
    [data-theme="dark"] .chapter-importance,
    [data-theme="dark"] .gratuit-bonus,
    [data-theme="dark"] .chef-bonus {
      background: #131d36 !important;
      color: var(--default-color) !important;
    }
    [data-theme="dark"] .info-section h4,
    [data-theme="dark"] .cert-item h5,
    [data-theme="dark"] .cert-item h4 { color: var(--heading-color) !important; }
    [data-theme="dark"] .cert-item { border-color: rgba(255, 255, 255, 0.12) !important; }

    /* ============ SOMBRE : formulaires, picker et dialogues ============ */
    [data-theme="dark"] .form-control,
    [data-theme="dark"] .form-select,
    [data-theme="dark"] .custom-dropdown-input,
    [data-theme="dark"] .search-box input {
      background-color: #0e1730 !important;
      color: var(--default-color) !important;
      border-color: rgba(255, 255, 255, 0.16) !important;
    }
    [data-theme="dark"] .form-control::placeholder,
    [data-theme="dark"] .custom-dropdown-input::placeholder,
    [data-theme="dark"] .search-box input::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
    [data-theme="dark"] .form-check-input {
      background-color: #0e1730;
      border-color: rgba(255, 255, 255, 0.35);
    }
    [data-theme="dark"] .dropdown-content {
      background: #0e1730 !important;
      border-color: rgba(255, 255, 255, 0.14) !important;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
    }
    [data-theme="dark"] .dropdown-content div,
    [data-theme="dark"] .dropdown-content label,
    [data-theme="dark"] .dropdown-content option { color: var(--default-color) !important; }
    [data-theme="dark"] .dropdown-content div:hover { background: #16213c !important; }
    [data-theme="dark"] .modal-content {
      background: #131d36 !important;
      color: var(--default-color) !important;
    }
    [data-theme="dark"] .modal-header,
    [data-theme="dark"] .modal-footer { border-color: rgba(255, 255, 255, 0.12) !important; }
    [data-theme="dark"] .modal .btn-close { filter: invert(1) grayscale(100%) brightness(180%); }

    /* ============ BANNIÈRE DE TITRE DES PAGES (photo + voile) ============ */
    .page-title {
      background-color: #0a1120 !important;
      background-image:
        linear-gradient(180deg, rgba(5, 8, 20, 0.5) 0%, rgba(5, 8, 20, 0.58) 60%, rgba(5, 8, 20, 0.74) 100%),
        url('/portail/images/infoplus-facade.jpg');
      background-size: cover;
      background-position: center 12%;
    }
    [data-theme="dark"] .page-title {
      background-image:
        linear-gradient(180deg, rgba(5, 8, 20, 0.38) 0%, rgba(5, 8, 20, 0.46) 60%, rgba(5, 8, 20, 0.68) 100%),
        url('/portail/images/infoplus-nuit.jpg');
    }
    .page-title .heading { padding: 76px 0 58px; }
    .page-title h1 {
      font-weight: 700;
      letter-spacing: -0.03em;
      font-size: clamp(2.1rem, 4.6vw, 3.2rem);
      text-shadow: 0 2px 26px rgba(5, 8, 20, 0.55);
    }
    .page-title p {
      color: rgba(255, 255, 255, 0.85);
      max-width: 660px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.7;
      text-shadow: 0 1px 14px rgba(5, 8, 20, 0.5);
    }
    .page-title .breadcrumbs {
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .page-title .breadcrumbs a { color: rgba(255, 255, 255, 0.72); }
    .page-title .breadcrumbs a:hover { color: #ffffff; }
    .page-title .breadcrumbs .current,
    .page-title .breadcrumbs li:last-child { color: #ffffff; font-weight: 600; }

    /* Bannières : bouton toujours lisible sur la photo + gouttières formateurs */
    .page-title .btn {
      background: #ffffff !important;
      border-color: #ffffff !important;
      color: #0a1120 !important;
      border-radius: 999px !important;
      font-weight: 700;
      padding: 12px 28px !important;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .page-title .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
      color: #0a1120 !important;
    }
    /* Les cartes formateurs sont enfants directs de la row (pas de col-*) :
       on passe la row en grille avec un vrai espacement. */
    .trainers .row.gy-5 {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 28px;
    }
    .trainers .row.gy-5 > * { margin-top: 0; width: auto; }

    /* Préloader : jamais blanc en sombre (filet html inclus), quel que soit
       l'ordre de chargement. */
    html[data-theme="dark"] { background-color: #0b1220; }
    #preloader { background: var(--background-color) !important; }
    [data-theme="dark"] #preloader { background: #0b1220 !important; }
    [data-theme="dark"] #preloader::after { color: #ffffff; }

    /* Aucune transition pendant le premier rendu (classe posee par l'anti-FOUC) */
    .theme-init, .theme-init *, .theme-init *::before, .theme-init *::after { transition: none !important; }

    /* ============ CHARGEMENT premium (préloader) ============ */
    #preloader::after {
      content: "infoplus.";
      position: fixed;
      top: calc(50% - 74px);
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Inter', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--heading-color);
    }
    #preloader::before {
      border-width: 3px !important;
      width: 46px !important;
      height: 46px !important;
      top: calc(50% - 23px) !important;
      left: calc(50% - 23px) !important;
    }
  
/* ============ TEMOIGNAGES (accueil) ============ */
.temoignages-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}
.temoignage-carte {
  background: var(--surface-color);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
  text-align: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background-color 0.7s ease, border-color 0.7s ease;
}
.temoignage-carte:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
  box-shadow: 0 26px 54px rgba(15, 23, 42, 0.12);
}
.temoignage-carte .guillemet {
  font-size: 26px;
  color: var(--accent-color);
  opacity: 0.55;
  margin-bottom: 10px;
}
.temoignage-carte blockquote {
  margin: 0 0 18px;
  line-height: 1.75;
  font-size: 0.96rem;
  border: none;
  padding: 0;
}
.temoignage-auteur { display: flex; align-items: center; gap: 12px; }
.temoignage-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  color: var(--accent-color);
  font-weight: 800;
  flex-shrink: 0;
}
.temoignage-auteur strong { display: block; font-size: 0.93rem; letter-spacing: -0.01em; }
.temoignage-auteur span {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}
[data-theme="dark"] .temoignage-carte { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42); }

/* ============ COMMENT S'INSCRIRE : 3 ETAPES ============ */
.etapes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
.etape-carte {
  position: relative;
  background: var(--surface-color);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 22px;
  padding: 30px 26px 26px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background-color 0.7s ease, border-color 0.7s ease;
}
.etape-carte:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(15, 23, 42, 0.11); }
.etape-numero {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 16px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color) 35%, transparent);
}
.etape-carte h4 { font-weight: 700; letter-spacing: -0.015em; font-size: 1.08rem; margin-bottom: 8px; }
.etape-carte p { margin: 0; line-height: 1.7; font-size: 0.93rem; }
[data-theme="dark"] .etape-carte { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42); }

/* ============ CTA FLOTTANT « S'inscrire » (pages formation) ============ */
.cta-flottant {
  position: fixed;
  right: 16px;
  bottom: 74px;
  z-index: 990;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--accent-color);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--accent-color) 45%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: hc-rise 0.5s ease 0.4s backwards;
}
.cta-flottant:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--accent-color) 55%, transparent);
  color: #ffffff;
}
@media (max-width: 576px) { .cta-flottant { right: 12px; bottom: 66px; padding: 12px 20px; } }

/* ============ ACCESSIBILITE : focus clavier visibles ============ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
  border-radius: 4px;
}
.hc-btn:focus-visible, .btn-getstarted:focus-visible, .theme-switch:focus-visible,
.cta-flottant:focus-visible, .page-title .btn:focus-visible { outline-offset: 4px; border-radius: 999px; }

/* Logo en casse de marque : InfoPlus (I et P majuscules seulement) */
.header .logo h1,
.header .sitename {
  text-transform: none !important;
  letter-spacing: -0.02em;
}

/* Bandeau d'evaluation : styles autonomes (present sur toutes les pages). */
#bandeau-eval {
  background: linear-gradient(120deg, #4A90E2, #5b9df0);
  color: #ffffff;
  text-align: center;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: filter 0.25s ease, background-color 0.7s ease;
}
#bandeau-eval:hover { filter: brightness(1.07); }

/* Preloader a apparition differee : invisible pendant 350 ms — sur une
   connexion rapide la page arrive avant et il ne flashe jamais ; il ne
   devient visible que si le chargement traine vraiment. */
#preloader {
  opacity: 0;
  animation: preloader-apparition 0.25s ease 0.35s forwards;
}
@keyframes preloader-apparition {
  to { opacity: 1; }
}