/*
 * Passe visuelle 2026-08-28
 * Charte LPN Finance 2026 et correctifs responsive transversaux.
 * Ce fichier est chargé en dernier afin de consolider les anciens styles de page.
 */

:root {
  --ink: #25213d;
  --navy: #251c4c;
  --navy-deep: #18103f;
  --cyan: #52d6e2;
  --cyan-strong: #147681;
  --lime: #c9ef3f;
  --lime-strong: #627700;
  --teal: var(--cyan-strong);
  --teal-strong: #0d626c;
  --mint: #e4f5f3;
  --sand: #f5f0e8;
  --paper: #fbfaf7;
  --coral: #b65342;
  --gold: var(--lime);
  --mist: #e8f3f4;
  --surface-green: #e4f5f3;
  --surface-blue: #e8edf7;
  --surface-coral: #f4e7e2;
  --surface-sand: #f5f0e8;
  --line: #251c4c24;
  --muted: #5c5c70;
  --shadow-soft: 0 18px 45px #18103f14;
  --shadow-card: 0 10px 28px #18103f12;
  --content-gutter: clamp(1.1rem, 5vw, 4.6rem);
}

html {
  background: var(--paper);
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 92% 3%, #52d6e21f 0, transparent 24rem),
    var(--paper);
}

img,
svg {
  max-width: 100%;
}

::selection {
  color: var(--navy-deep);
  background: var(--cyan);
}

:focus-visible {
  outline: 3px solid #52d6e28c;
  outline-offset: 3px;
}

header {
  color: var(--ink);
  background: #fbfaf7f2;
  border-bottom-color: #251c4c12;
  box-shadow: 0 8px 28px #18103f0a;
}

header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px #18103f18;
}

header nav a:not(.nav-cta) {
  position: relative;
}

header nav a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: -.35rem;
  left: 0;
  height: 2px;
  background: var(--cyan);
  content: "";
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .18s ease, transform .18s ease;
}

header nav a:not(.nav-cta):hover::after,
header nav a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-cta,
.button {
  border-radius: 5px;
  box-shadow: 0 7px 18px #18103f1a;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.nav-cta:hover,
.button:hover {
  box-shadow: 0 11px 24px #18103f2b;
  transform: translateY(-2px);
}

.button.dark,
.nav-cta {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
}

.button.pale {
  color: var(--navy-deep);
  background: var(--mint);
  border-color: #1476812b;
}

.button.pale:hover {
  background: #d3efed;
}

.eyebrow {
  color: var(--teal-strong);
}

h1,
h2,
h3 {
  color: var(--ink);
  text-wrap: balance;
}

h1 em,
.about-hero h1 em,
.development-hero h1 em {
  color: var(--teal);
}

.trading-banner {
  border: 1px solid #251c4c24;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.home-directory,
.about-pillars,
.about-services,
.development-solutions,
.performance-comparison,
.modules {
  background: linear-gradient(145deg, var(--surface-green), var(--surface-blue));
}

/* Accueil : contraste institutionnel, sans mosaïque pastel. */
.home-directory {
  background:
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 72%, #30245f 100%);
}

.home-intro-copy {
  min-width: 0;
}

.home-video {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.35rem;
  background: var(--navy-deep);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

.home-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.home-directory-head .eyebrow {
  color: var(--cyan);
}

.home-directory-head h2 {
  color: #fff;
}

.home-directory-head > p:last-child {
  color: #dcd8ef;
}

.home-card.tone-sand,
.home-card.tone-green,
.home-card.tone-blue,
.home-card.tone-coral {
  background: #fff;
}

.home-card {
  border: 1px solid #ffffff2b;
  border-top: 4px solid var(--lime);
  box-shadow: 0 16px 36px #0d082d52;
}

.home-card:nth-child(2) {
  border-top-color: var(--cyan);
}

.home-card:nth-child(3) {
  border-top-color: var(--cyan);
}

.home-card:nth-child(4) {
  border-top-color: var(--cyan);
}

.home-card p {
  color: var(--muted);
}

.home-card b {
  color: var(--teal-strong);
}

.tone-sand,
.home-card.tone-sand {
  background: var(--surface-sand);
}

.tone-green,
.home-card.tone-green {
  background: var(--surface-green);
}

.tone-blue,
.home-card.tone-blue {
  background: var(--surface-blue);
}

.tone-coral,
.home-card.tone-coral {
  background: var(--surface-coral);
}

.home-directory .home-card,
.home-directory .home-card.tone-sand,
.home-directory .home-card.tone-green,
.home-directory .home-card.tone-blue,
.home-directory .home-card.tone-coral {
  background: #fff;
}

.home-card,
.about-pillar-grid article,
.audience-grid article,
.format-details article,
.fit-grid article,
.solution-grid article,
.achievement-project,
.product-stories article,
.institutional-explainer,
.contact-card,
.performance-sources,
.detail-metrics div {
  border-color: var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}

.home-card,
.about-pillar-grid article,
.audience-grid article,
.format-details article,
.solution-grid article,
.product-stories article {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.home-card:hover,
.about-pillar-grid article:hover,
.audience-grid article:hover,
.format-details article:hover,
.solution-grid article:hover,
.product-stories article:hover {
  border-color: #52d6e270;
  box-shadow: 0 16px 34px #18103f1c;
  transform: translateY(-3px);
}

.home-directory .home-card:hover {
  border-color: #ffffff70;
  border-top-color: var(--lime);
  box-shadow: 0 20px 44px #0d082d70;
}

.home-directory .home-card:nth-child(2):hover {
  border-top-color: var(--cyan);
}

.home-directory .home-card:nth-child(3):hover {
  border-top-color: var(--cyan);
}

.home-directory .home-card:nth-child(4):hover {
  border-top-color: var(--cyan);
}

.home-contact,
.about-cta,
.development-cta,
.institutional-conclusion {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
}

.formation-summary,
.pilot-offer,
.performance-truth,
.risk-commitment,
.achievement-bridge,
.training-contact,
.compatibility-note,
.comparison-note,
.site-footer {
  background: linear-gradient(135deg, var(--navy), var(--navy-deep));
}

.formation-summary h2,
.pilot-offer h2,
.performance-truth h2,
.risk-commitment h2,
.achievement-bridge h3,
.training-contact h2,
.home-contact h2,
.about-cta h2,
.development-cta h2 {
  color: #fff;
}

.detail-metrics div,
.tool-highlight {
  background: var(--mist);
}

.price-detail strong,
.pilot-price strong,
.bridge-flow strong,
.price span {
  color: var(--lime);
}

.contact-link:hover strong,
.performance-sources a,
.legal-section a {
  color: var(--teal-strong);
}

#formation {
  scroll-margin-top: 88px;
}

/* Une seule couleur d'accent décorative sur l'ensemble des pages. */
.about-pillar-grid article,
.products article:nth-child(n),
.solution-grid article,
.product-stories article,
.discipline-grid article {
  border-color: var(--cyan);
}

.about-pillar-grid article:first-child,
.products article:first-child,
.solution-grid article:first-child,
.product-stories article:first-child,
.discipline-grid article:first-child,
.institutional-explainer,
.performance-note {
  border-color: var(--lime);
}

/* Le corail conserve un rôle sémantique : risque, alerte et prudence. */
.risk-card,
.truth-card {
  border-left-color: var(--coral);
}

.risk-card span,
.chart-error {
  color: #ff9e88;
}

.site-footer a:hover {
  color: var(--lime);
}

/* Niveaux de surfaces sombres communs. */
.formation-points > div,
.bridge-flow,
.risk-card,
.truth-card {
  background: #30275e;
}

.formation-points a {
  background: #3a3070;
}

.formation-summary .eyebrow,
.home-contact .eyebrow,
.about-cta .eyebrow,
.development-cta .eyebrow,
.performance-truth .eyebrow,
.risk-commitment .eyebrow {
  color: var(--cyan);
}

.presentation-page .trading-banner,
.home-page .trading-banner,
.formation-page .trading-banner,
.performance-page .trading-banner,
.development-page .trading-banner,
.contact-page .trading-banner {
  background: var(--navy-deep);
}

@media (max-width: 960px) {
  .home-video {
    max-width: 720px;
  }

  header nav {
    border-radius: 7px;
    box-shadow: 0 20px 45px #18103f2b;
  }

  header nav a {
    min-height: 44px;
    padding: .7rem .8rem;
  }

  header nav a:not(.nav-cta)::after {
    top: .55rem;
    right: auto;
    bottom: .55rem;
    left: 0;
    width: 3px;
    height: auto;
    transform: scaleY(.35);
  }

  header nav a:not(.nav-cta):hover::after,
  header nav a[aria-current="page"]::after {
    transform: scaleY(1);
  }

  .menu {
    min-width: 48px;
    min-height: 44px;
    color: var(--navy-deep);
    background: #fff;
    border-color: var(--line);
    border-radius: 5px;
  }
}

@media (max-width: 720px) {
  :root {
    --content-gutter: 1.1rem;
  }

  h1,
  .detail-hero h1,
  .about-hero h1,
  .formation-hero h1,
  .performance-hero h1,
  .development-hero h1,
  .contact-intro h1,
  .legal-main h1 {
    font-size: clamp(2.25rem, 11vw, 3.15rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(1.85rem, 8.5vw, 2.55rem);
    line-height: 1.06;
  }

  h3 {
    line-height: 1.12;
  }

  .section,
  .detail-section,
  .home-intro,
  .home-directory,
  .about-hero,
  .about-welcome,
  .about-pillars,
  .about-experience,
  .about-audience,
  .about-services,
  .formation-hero,
  .performance-hero,
  .reality-section,
  .discipline-section,
  .performance-truth,
  .development-hero,
  .development-intro,
  .development-solutions,
  .development-achievements,
  .development-workshop,
  .risk-commitment,
  .contact-intro,
  .legal-main {
    padding-right: var(--content-gutter);
    padding-left: var(--content-gutter);
  }

  .trading-banner,
  .home-page .trading-banner,
  .presentation-page .trading-banner,
  .formation-page .trading-banner,
  .performance-page .trading-banner,
  .development-page .trading-banner,
  .contact-page .trading-banner {
    width: auto;
    height: clamp(180px, 52vw, 230px);
    margin: 10px var(--content-gutter) 0;
    border-radius: 6px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .home-card,
  .about-pillar-grid article,
  .audience-grid article,
  .format-details article,
  .fit-grid article,
  .solution-grid article,
  .product-stories article,
  .contact-card {
    min-height: 0;
  }

  /* L'ancien flottant créait un alignement image/texte instable sur mobile. */
  .development-workshop,
  .discipline-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .discipline-image {
    float: none;
    width: 100%;
    min-width: 0;
    max-width: 520px;
    margin: 0;
    border-radius: 6px;
    box-shadow: var(--shadow-card);
  }

  .discipline-image img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .development-steps,
  .discipline-grid {
    clear: none;
    margin-top: .4rem;
    padding-top: 0;
  }

  .curriculum-practice {
    margin-right: 0;
    margin-left: 0;
    border-radius: 6px;
  }

  .achievement-project,
  .achievement-project.media-first {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-media,
  .project-media.media-standard,
  .project-media.media-landscape,
  .project-media.media-wide {
    justify-self: stretch !important;
    width: auto;
    margin: 0 1.1rem 1.1rem;
    border-radius: 5px;
    overflow: hidden;
  }

  .project-media img {
    width: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .achievement-project.media-first .project-media {
    order: 2;
  }

  .performance-chart {
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--teal) var(--mist);
  }

  .performance-chart::after {
    display: block;
    padding: .65rem .4rem 0;
    color: var(--muted);
    content: "Faites glisser horizontalement pour voir tout le graphique →";
    font-size: .7rem;
  }

}

@media (max-width: 480px) {
  header {
    padding: .72rem 1rem;
  }

  header .logo img,
  header .logo svg {
    width: 112px;
  }

  header nav {
    right: .75rem;
    left: .75rem;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }

  .eyebrow {
    letter-spacing: .11em;
  }

  .button {
    width: 100%;
    min-height: 48px;
    padding: .78rem 1rem;
  }

  .detail-metrics,
  .fund-returns,
  .institutional-constraints,
  .formation-points,
  .truth-choices {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-metrics div {
    min-width: 0;
  }

  .price-detail strong,
  .pilot-price strong {
    overflow-wrap: anywhere;
  }

  .contact-link strong {
    font-size: 1rem;
  }

  .site-footer {
    padding: 1rem;
  }
}

@media (hover: none) {
  .home-card:hover,
  .about-pillar-grid article:hover,
  .audience-grid article:hover,
  .format-details article:hover,
  .solution-grid article:hover,
  .product-stories article:hover,
  .button:hover,
  .nav-cta:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .nav-cta,
  .home-card,
  .about-pillar-grid article,
  .audience-grid article,
  .format-details article,
  .solution-grid article,
  .product-stories article {
    transition: none;
  }
}