:root {
  color-scheme: dark;
  --nuit: #121A2C;
  --nuit-2: #1B253D;
  --ligne: #2C3956;
  --clair: #F1EBDF;
  --cendre: #AEB5C4;
  --parchemin: #F1EBDF;
  --parchemin-2: #E6DDCD;
  --encre: #18213A;
  --encre-doux: #4A5163;
  --ligne-claire: #D3C8B4;
  --feu: #C23D2C;
  --feu-sombre: #A3301F;
  --or: #E3B04B;
  --sur-feu: #FFFFFF;
  --display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --texte: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--nuit); color: var(--clair); font-family: var(--texte); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--or); }
.sec--clair a:hover { color: var(--feu); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.etroit { max-width: 860px; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; background: var(--or); color: var(--encre); padding: 8px 14px; z-index: 10; }
.entete { border-bottom: 1px solid var(--ligne); }
.entete .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--clair); }
.marque:hover { color: var(--clair); }
.marque__nom { font-family: var(--display); font-weight: 500; font-size: 1.6rem; line-height: 1; letter-spacing: -0.01em; }
.marque__ia { font-family: var(--texte); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.18em; color: var(--or); margin-left: 4px; }
.nav-large { display: none; }
.nav-large ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; font-size: 0.97rem; font-weight: 500; }
.nav-large a { text-decoration: none; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--clair); border-radius: 999px; font-weight: 500; }
.menu summary::-webkit-details-marker { display: none; }
.menu { position: relative; }
.menu ul { list-style: none; margin: 0; padding: 8px 18px; display: flex; flex-direction: column; position: absolute; right: 0; top: calc(100% + 10px); width: min(280px, calc(100vw - 32px)); background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 8px; z-index: 5; }
.menu li a { display: block; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--ligne); }
.menu li:last-child a { border-bottom: 0; }
@media (min-width: 1000px) { .nav-large { display: block; } .menu { display: none; } }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--feu); color: var(--sur-feu); font-weight: 600; text-decoration: none; }
.btn:hover { background: var(--feu-sombre); color: var(--sur-feu); }
.lien-fort { font-weight: 600; }
.heros .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; padding-block: clamp(56px, 9vw, 104px) clamp(64px, 9vw, 112px); }
@media (min-width: 900px) { .heros .wrap { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.heros h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: 0.98; letter-spacing: -0.02em; }
.heros__texte { display: flex; flex-direction: column; gap: 26px; }
.chapo { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--cendre); max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.heros__mythe { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.heros__mythe p { font-family: var(--display); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--cendre); max-width: 22em; }
.flamme-grande { width: min(200px, 30vw); height: auto; }
.flamme-grande .langue { transform-origin: 50% 100%; animation: vacille 3.6s ease-in-out infinite; }
.flamme-grande .coeur { transform-origin: 50% 100%; animation: vacille 2.4s ease-in-out infinite reverse; }
@keyframes vacille { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 35% { transform: scale(0.98, 1.04) skewX(-1.6deg); } 70% { transform: scale(1.01, 0.98) skewX(1.2deg); } }
@media (prefers-reduced-motion: reduce) { .flamme-grande .langue, .flamme-grande .coeur { animation: none; } html { scroll-behavior: auto; } }
.sec { padding-block: clamp(64px, 10vw, 112px); }
.sec--clair { background: var(--parchemin); color: var(--encre); }
.sec--nuit-2 { background: var(--nuit-2); }
.titre-sec { margin: 0 0 clamp(28px, 4vw, 48px); font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -0.01em; }
.doux { color: var(--encre-doux); }
.sec:not(.sec--clair) .doux { color: var(--cendre); }
.constat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 72px; }
@media (min-width: 900px) { .constat { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.constat__phrase { font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.18; max-width: 20ch; }
.constat__detail { display: flex; flex-direction: column; gap: 16px; max-width: 34em; padding-top: 8px; }
.offres { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ligne-claire); }
.offre { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 48px; padding-block: 36px; border-top: 1px solid var(--ligne-claire); }
@media (min-width: 900px) { .offre { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 190px; } }
.offre h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.1; }
.offre__corps { display: flex; flex-direction: column; gap: 10px; max-width: 36em; }
.offre__formats { font-size: 0.97rem; }
.offre__liens { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 4px; }
.offre__prix { font-family: var(--display); font-size: 1.35rem; line-height: 1.3; }
@media (min-width: 900px) { .offre__prix { text-align: right; } }
.exemple-outil { border-left: 3px solid var(--feu); padding: 10px 0 10px 16px; font-style: italic; color: var(--encre-doux); }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 800px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etapes li { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; border-top: 2px solid var(--ligne); position: relative; }
.etapes li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--or); }
.etapes .num { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--or); }
.etapes h3 { margin: 0; font-size: 1.2rem; font-weight: 600; }
.deux-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 72px; }
@media (min-width: 900px) { .deux-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.deux-col .titre-sec { margin-bottom: 0; }
.liste-def { margin: 0; display: flex; flex-direction: column; gap: 22px; }
.liste-def dt { font-weight: 600; font-size: 1.15rem; }
.liste-def dd { margin: 4px 0 0; }
.apropos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 72px; align-items: center; }
@media (min-width: 900px) { .apropos { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.portrait { aspect-ratio: 4 / 5; max-width: 100%; border: 1.5px dashed var(--cendre); display: flex; align-items: center; justify-content: center; color: var(--cendre); font-size: 0.95rem; }
.apropos__texte { display: flex; flex-direction: column; gap: 18px; max-width: 34em; }
.apropos__texte .titre-sec { margin-bottom: 0; }
.faq details { border-top: 1px solid var(--ligne-claire); padding-block: 20px; }
.faq details:last-child { border-bottom: 1px solid var(--ligne-claire); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.15rem; }
.faq details p { margin-top: 10px; }
.contact .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.contact h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.8rem, 7vw, 6rem); line-height: 0.98; max-width: 12ch; }
.coordonnees { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 1.1rem; }
.coordonnees span { color: var(--cendre); margin-right: 8px; }
.pied { background: #0D1322; color: var(--cendre); font-size: 0.93rem; border-top: 1px solid var(--ligne); }
.pied .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 56px; padding-block: 48px; }
@media (min-width: 900px) { .pied .wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.pied__infos { display: flex; flex-direction: column; gap: 10px; max-width: 40em; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; align-content: flex-start; }
.pied a { color: var(--clair); }
.fil { font-size: 0.93rem; color: var(--cendre); padding-block: 28px 0; }
.page-titre { padding-block: 40px clamp(48px, 7vw, 80px); }
.page-titre h1 { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.01em; max-width: 18ch; }
.page-titre .chapo { margin-top: 22px; }
.entete-formation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 64px; align-items: start; }
@media (min-width: 960px) { .entete-formation { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.fiche { background: var(--parchemin); color: var(--encre); border-radius: 4px; padding: 26px 28px; }
.fiche h2 { margin: 0 0 14px; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.6rem; }
.fiche dl { margin: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px 16px; font-size: 0.97rem; }
.fiche dt { color: var(--encre-doux); }
.fiche dd { margin: 0; }
.fiche .btn { margin-top: 22px; width: 100%; }
.bloc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 64px; padding-block: 44px; border-top: 1px solid var(--ligne-claire); }
@media (min-width: 900px) { .bloc { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }
.bloc h2 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 2.2rem; line-height: 1.05; }
.bloc__corps { display: flex; flex-direction: column; gap: 14px; max-width: 40em; }
.bloc__corps ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.bloc__corps h3 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.deux-sous { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 700px) { .deux-sous { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.deux-sous > div { display: flex; flex-direction: column; gap: 10px; }
.texte-legal h2 { margin: 36px 0 8px; font-size: 1.3rem; font-weight: 600; }
.texte-legal p, .texte-legal ul { max-width: 42em; }
.texte-legal ul { padding-left: 22px; }
.tableau { overflow-x: auto; }
.tableau table { width: 100%; min-width: 620px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--ligne-claire); }
.tableau th { border-bottom: 2px solid var(--encre); }
.a-venir { color: var(--encre-doux); }
.note { font-size: 0.93rem; }