/* ==========================================================
   PASSE DE FINITION
   En production depuis octobre 2026. Toutes les regles sont prefixees
   par .fin (classe posee sur <html>) : retirer la classe ou le lien
   vers cette feuille rend le site d'avant.

   Un seul systeme pour tout le site :
   - trois arrondis : 10 px (cartes, boutons, panneaux),
     6 px (petits elements, champs), pilule (filtres, badges) ;
   - deux ombres : au repos, a peine posee ; au survol, levee ;
   - un liseré bleu-gris au lieu du gris neutre ;
   - une seule courbe de mouvement, plus lente.
   ========================================================== */

.fin {
  --fin-r: 10px;
  --fin-r-sm: 6px;
  --fin-filet: rgba(0, 25, 76, 0.09);
  --fin-filet-fort: rgba(0, 25, 76, 0.16);
  --fin-repos: 0 1px 2px rgba(0, 25, 76, 0.04), 0 10px 26px -16px rgba(0, 25, 76, 0.16);
  --fin-levee: 0 2px 4px rgba(0, 25, 76, 0.05), 0 24px 44px -20px rgba(0, 25, 76, 0.28);
  --fin-courbe: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 1. Titres et paragraphes ----------
   Un mot ne finit jamais seul sur sa ligne. */
.fin h1, .fin h2, .fin h3, .fin .section-title, .fin .dos-chiffre { text-wrap: balance; }
.fin p, .fin li { text-wrap: pretty; }

/* ---------- 2. Cartes claires : un seul modele ---------- */
.fin .card-bordered, .fin .testimonial, .fin .faq-item, .fin .programme-card,
.fin .video-card, .fin .celeb-quote, .fin .case-study-card, .fin .article-card,
.fin .video-resource, .fin .blog-card, .fin .sidebar-card, .fin .article-cta,
.fin .author-bio, .fin .voie, .fin .choix-col, .fin .cas-carte {
  border-radius: var(--fin-r);
  border: 1px solid var(--fin-filet);
  box-shadow: var(--fin-repos);
  transition: transform 0.55s var(--fin-courbe), box-shadow 0.55s var(--fin-courbe), border-color 0.55s ease;
}
/* seules les cartes a image rognent leur contenu : un ruban qui deborde
   (« programme-card-ribbon ») doit rester visible */
.fin .video-card, .fin .article-card, .fin .blog-card, .fin .video-resource,
.fin .case-study-card, .fin .cas-carte { overflow: hidden; }
/* au survol, la carte se leve ; son image avance a peine */
.fin .video-card:hover, .fin .programme-card:hover, .fin .article-card:hover,
.fin .video-resource:hover, .fin .blog-card:hover, .fin .case-study-card:hover,
.fin .voie:hover, .fin .cas-carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--fin-levee);
  border-color: var(--fin-filet-fort);
}
.fin .video-card img, .fin .article-card img, .fin .blog-card img,
.fin .video-resource img, .fin .case-study-card img {
  transition: transform 1.1s var(--fin-courbe), filter 0.8s ease;
}
.fin .video-card:hover img, .fin .article-card:hover img, .fin .blog-card:hover img,
.fin .video-resource:hover img, .fin .case-study-card:hover img { transform: scale(1.035); }

/* ---------- 3. Cas clients de l'accueil ----------
   L'image ne fond plus en blanc dans la carte : une vraie photo, nette,
   posee au-dessus du texte. */
.fin .cas-vue::after { display: none; }
.fin .cas-vue { border-bottom: 1px solid var(--fin-filet); }
.fin .cas-corps { padding-top: 18px; }
.fin .cas-play, .fin .seq-play {
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  color: var(--white);
}
.fin .cas-carte:hover .cas-play { background: var(--blue); box-shadow: none; }

/* ---------- 4. Vignettes video : le bouton lecture en verre ----------
   Le disque bleu plein faisait lecteur des annees 2010. */
.fin .video-facade { border-radius: 0; }
.fin .video-facade::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 11, 32, 0) 55%, rgba(3, 11, 32, 0.28) 100%);
  transition: opacity 0.6s ease;
}
.fin .video-facade .play-btn {
  width: 58px; height: 58px; z-index: 2;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 10px 30px rgba(3, 11, 32, 0.25);
  transition: transform 0.55s var(--fin-courbe), background 0.4s ease, box-shadow 0.4s ease;
}
.fin .video-facade:hover .play-btn,
.fin .video-card:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--blue);
  box-shadow: 0 12px 34px rgba(0, 70, 255, 0.4);
}

/* ---------- 5. Boutons ---------- */
.fin .btn {
  border-radius: var(--fin-r);
  transition: transform 0.45s var(--fin-courbe), box-shadow 0.45s var(--fin-courbe), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.fin .btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 8px 22px -10px rgba(0, 70, 255, 0.55); }
.fin .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 16px 30px -12px rgba(0, 70, 255, 0.6); }
.fin .btn:active { transform: translateY(0); transition-duration: 0.1s; }
.fin .btn-show-more { border-radius: var(--fin-r); border-color: var(--fin-filet-fort); }

/* ---------- 6. Petits elements et champs ---------- */
.fin .newsletter-input, .fin .newsletter-form input[type="email"],
.fin .optin-form input, .fin .optin-fermer, .fin .dossier-fermer,
.fin .card-icon, .fin .team-pole-icon, .fin .tp,
.fin .guide-card-visual img, .fin .sidebar-guide-cover {
  border-radius: var(--fin-r-sm);
}
.fin input, .fin textarea, .fin select { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.fin input:focus, .fin textarea:focus, .fin select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 70, 255, 0.12);
}
/* filtres et etiquettes : de vraies pilules, sans bordure epaisse */
.fin .filter-tab, .fin .topic-tab, .fin .sect-btn {
  border-radius: 999px;
  border-width: 1px;
  border-color: var(--fin-filet-fort);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.fin .filter-tab:hover, .fin .topic-tab:hover, .fin .sect-btn:hover { border-color: var(--navy); }

/* ---------- 7. Panneaux et fenetres ---------- */
.fin .cta-panneau, .fin .dossier-boite, .fin .optin-boite, .fin .video-modal-content iframe {
  border-radius: var(--fin-r);
}
.fin .cta-panneau { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(3, 11, 32, 0.6); }

/* ---------- 8. Accessibilite : un focus clavier net et uniforme ---------- */
.fin a:focus-visible, .fin button:focus-visible, .fin [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 9. Espacements ----------
   Le bouton « Voir tous les parcours » touchait le bas des cartes. */
/* (apercu uniquement) */
.fin #cas-clients .cas-zone + .container { margin-top: 34px; }

/* ---------- 10. Le badge d'apercu (absent du site normal) ---------- */
.fin-badge {
  position: fixed; left: 16px; bottom: 16px; z-index: 2000;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(3, 11, 32, 0.9); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 30px rgba(3, 11, 32, 0.35);
  font: 600 12px/1 var(--font-body, system-ui, sans-serif);
}
.fin-badge i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; }
.fin-badge a { color: #9fb9ff; text-decoration: none; font-weight: 500; }

/* ---------- 11. Menu « Résultats » : le panneau des parcours ----------
   Trois temps : ce que l'on trouve, un client filme et son chiffre,
   les secteurs. Le survol d'un secteur change le client. */
@media (min-width: 901px) {
  .fin .nav-sub.fin-mega {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 48px;
    padding-top: 28px; padding-bottom: 30px;
    align-items: stretch;
  }
  .fin .fm-titre {
    margin: 0 0 12px;
    font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700;
    line-height: 1.2; letter-spacing: -0.02em; color: var(--navy);
  }
  .fin .fm-texte { margin: 0 0 22px; font-size: 0.875rem; line-height: 1.6; color: var(--gray-500); max-width: 30ch; }
  .fin .navbar .navbar-links .fin-mega a.fm-voir {
    display: inline-flex; gap: 8px; padding: 0;
    font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: var(--blue);
  }
  .fin .navbar .navbar-links .fin-mega a.fm-voir span { transition: transform 0.4s var(--fin-courbe); }
  .fin .navbar .navbar-links .fin-mega a.fm-voir:hover span { transform: translateX(4px); }

  /* la sequence : quelques secondes du temoignage, chiffre pose en bas a gauche */
  .fin .fm-vue { position: relative; height: 100%; min-height: 0; border-radius: var(--fin-r); overflow: hidden; background: #0b1430; isolation: isolate; }
  .fin .fm-vue::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
  .fin .navbar .navbar-links .fin-mega a.fm-img { position: absolute; inset: 0; display: block; padding: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s; }
  .fin .navbar .navbar-links .fin-mega a.fm-img.is-on { opacity: 1; visibility: inherit; }
  /* inherit et non visible : un enfant en visible reste survolable dans un
     panneau ferme, et ouvrait Resultats quand la souris descendait d'un autre menu */
  .fin .fm-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transform: scale(1.06); transition: transform 1.6s var(--fin-courbe); }
  .fin .fm-img.is-on video { transform: scale(1); }
  .fin .fm-img:hover video { transform: scale(1.03); }
  .fin .fm-img::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3, 11, 32, 0.28) 0%, rgba(3, 11, 32, 0) 26%, rgba(3, 11, 32, 0) 46%, rgba(3, 11, 32, 0.86) 100%); }
  /* l'etiquette en verre, en haut a gauche */
  .fin .fm-tag {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px 5px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    font-family: var(--font-body); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  }
  .fin .fm-tag i { width: 6px; height: 6px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.6); animation: finPouls 2s ease-out infinite; }
  @keyframes finPouls { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 90, 90, 0); } }
  /* le chiffre arrive avec la sequence */
  .fin .fm-cap { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; color: #fff; }
  .fin .fm-cap > * { display: block; opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity 0.6s var(--fin-courbe), transform 0.7s var(--fin-courbe), filter 0.6s var(--fin-courbe); }
  .fin .fm-img.is-on .fm-cap > * { opacity: 1; transform: none; filter: none; }
  .fin .fm-img.is-on .fm-cap > :nth-child(2) { transition-delay: 70ms; }
  .fin .fm-img.is-on .fm-cap > :nth-child(3) { transition-delay: 140ms; }
  .fin .fm-cap b { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .fin .fm-cap span { margin-top: 5px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.86); }
  .fin .fm-cap em { margin-top: 9px; font-style: normal; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb9ff; }
  /* la boucle se lit : un filet qui avance au pied de la carte */
  .fin .fm-barre { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; background: rgba(255, 255, 255, 0.14); }
  .fin .fm-barre::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }

  /* les secteurs : des rangees nettes, le chiffre en pastille */
  .fin .fm-label { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); }
  .fin .navbar .navbar-links .fin-mega a.fm-row {
    display: flex; align-items: center; gap: 10px;
    position: relative;
    padding: 10px 14px; margin: 0 -14px;
    border-radius: var(--fin-r-sm);
    font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--navy);
  }
  .fin .fin-mega a.fm-row + a.fm-row::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--fin-filet); transition: opacity 0.25s ease; }
  .fin .fin-mega a.fm-row i {
    font-style: normal; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600;
    min-width: 22px; text-align: center; font-variant-numeric: tabular-nums;
    padding: 3px 7px; border-radius: 999px; background: rgba(0, 70, 255, 0.08); color: var(--blue);
    transition: background-color 0.25s ease, color 0.25s ease;
  }
  .fin .fin-mega a.fm-row svg { margin-left: auto; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.4s var(--fin-courbe); }
  .fin .navbar .navbar-links .fin-mega a.fm-row:hover,
  .fin .navbar .navbar-links .fin-mega a.fm-row.is-on { background: var(--gray-50); color: var(--blue); }
  .fin .fin-mega a.fm-row:hover::before, .fin .fin-mega a.fm-row.is-on::before,
  .fin .fin-mega a.fm-row:hover + a.fm-row::before, .fin .fin-mega a.fm-row.is-on + a.fm-row::before { opacity: 0; }
  .fin .fin-mega a.fm-row:hover svg, .fin .fin-mega a.fm-row.is-on svg { opacity: 1; transform: none; }
  .fin .fin-mega a.fm-row:hover i, .fin .fin-mega a.fm-row.is-on i { background: var(--blue); color: #fff; }
}
/* sur telephone : le simple lien Resultats, comme sur le site actuel ;
   le filtre par secteur est deja en tete de la page */
.fin .fm-lien { display: none; }
@media (max-width: 900px) {
  .fin .fm-li > .nav-parent, .fin .fm-li > .fin-mega { display: none !important; }
  .fin .fm-li > .fm-lien { display: block; }
}

/* ---------- 12. Apparitions ----------
   Les blocs montent depuis un leger flou, plus lentement ; les titres
   se composent mot a mot ; les cartes d'une meme grille arrivent en cascade. */
.fin .reveal {
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 1.1s var(--fin-courbe), transform 1.1s var(--fin-courbe), filter 0.9s var(--fin-courbe);
}
.fin .reveal.visible { transform: none; filter: none; }
/* titre decoupe : le bloc reste en place, ce sont ses mots qui arrivent */
.fin .reveal.fin-mots { opacity: 1; transform: none; filter: none; }
.fin .fin-mots .fw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(6px);
  transition: opacity 0.9s var(--fin-courbe), transform 0.9s var(--fin-courbe), filter 0.7s var(--fin-courbe);
  transition-delay: calc(var(--i) * 55ms);
}
.fin .fin-mots.visible .fw { opacity: 1; transform: none; filter: none; }

/* ---------- 13. Survols ---------- */
/* la fleche des boutons part devant */
.fin .btn-arrow::after { display: inline-block; transition: transform 0.45s var(--fin-courbe); }
.fin .btn-arrow:hover::after { transform: translateX(5px); }
/* le filet de survol des liens de texte glisse depuis la gauche */
.fin .navbar-links li:not(.navbar-cta) > a::after { transition: transform 0.5s var(--fin-courbe), opacity 0.3s ease; }

/* ---------- 14. Ouverture des menus ----------
   Le panneau descend, puis son contenu arrive en cascade. */
@media (min-width: 901px) {
  .fin .nav-sub { transition: opacity 0.3s ease, transform 0.45s var(--fin-courbe), visibility 0.3s; }
  .fin .nav-sub > li {
    opacity: 0; transform: translateY(10px); filter: blur(4px);
    transition: opacity 0.5s var(--fin-courbe), transform 0.6s var(--fin-courbe), filter 0.5s var(--fin-courbe);
  }
  .fin .navbar-links .nav-has-sub:hover > .nav-sub > li,
  .fin .navbar-links .nav-has-sub:focus-within > .nav-sub > li,
  .fin .navbar-links .nav-has-sub[data-open="true"] > .nav-sub > li { opacity: 1; transform: none; filter: none; }
  .fin .nav-sub > li:nth-child(2) { transition-delay: 50ms; }
  .fin .nav-sub > li:nth-child(3) { transition-delay: 100ms; }
  .fin .nav-sub > li:nth-child(4) { transition-delay: 150ms; }
  .fin .nav-sub > li:nth-child(5) { transition-delay: 200ms; }
  /* dans le panneau Resultats, les secteurs arrivent un par un */
  .fin .fin-mega a.fm-row { opacity: 0; transform: translateX(-8px); transition: opacity 0.5s var(--fin-courbe), transform 0.6s var(--fin-courbe), background-color 0.25s ease, color 0.25s ease; }
  .fin .navbar-links .fm-li:hover a.fm-row,
  .fin .navbar-links .fm-li:focus-within a.fm-row,
  .fin .navbar-links .fm-li[data-open="true"] a.fm-row { opacity: 1; transform: none; }
  .fin .fin-mega a.fm-row:nth-of-type(2) { transition-delay: 140ms, 140ms, 0s, 0s; }
  .fin .fin-mega a.fm-row:nth-of-type(3) { transition-delay: 180ms, 180ms, 0s, 0s; }
  .fin .fin-mega a.fm-row:nth-of-type(4) { transition-delay: 220ms, 220ms, 0s, 0s; }
  .fin .fin-mega a.fm-row:nth-of-type(5) { transition-delay: 260ms, 260ms, 0s, 0s; }
  .fin .fin-mega a.fm-row:nth-of-type(1) { transition-delay: 100ms, 100ms, 0s, 0s; }
}