/* Écusson : direction artistique « campus et badges de compétence ».
   Violet profond et mandarine sur crème clair, sans aucun dégradé ni flou.
   Chaque formation a son écusson festonné et cousu ; onglets de classeur, étiquettes et pages de carnet structurent les contenus.
   Titres en Bricolage Grotesque (caractère, opsz display), texte en Figtree.
   Ombres franches décalées façon autocollant pour les boutons et les cartes : dynamique, pédagogique, jamais scolaire. */

:root {
  --violet: #2B1650;
  --violet-2: #3B2170;
  --violet-deep: #1C0E36;
  --violet-link: #4B23A0;
  --mandarine: #FF7A1A;
  --mandarine-ink: #A93D08;
  --mandarine-soft: #FFE7D3;
  --lilas: #E4DAF5;
  --lilas-soft: #F3EEFB;
  --creme: #FBF6EC;
  --creme-2: #F3EADB;

  --bg: var(--creme);
  --surface: #FFFDF9;
  --surface-2: var(--creme-2);
  --ink: #1F1236;
  --ink-2: #3E3352;
  --muted: #5E5470;
  --line: #E1D5C1;
  --accent: var(--mandarine);
  --accent-ink: var(--violet-link);
  --accent-soft: var(--mandarine-soft);
  --on-accent: #1F1236;
  --ok: #1E6B43; --ok-bg: #E7F3EC;
  --warn: #8A4B00; --warn-bg: #FFF1DF;
  --ko: #A1271A; --ko-bg: #FDECEA;
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --head-weight: 800;
  --head-tracking: -0.025em;
  --radius: 18px;
  --radius-btn: 12px;
  --shadow: 0 1px 0 rgba(43, 22, 80, .05), 0 14px 32px -18px rgba(43, 22, 80, .35);
  --sticker: 4px 4px 0 var(--violet);
  --maxw: 1180px;
  --header-bg: var(--creme);
  --header-ink: var(--violet);
  --footer-bg: var(--violet-deep);
  --footer-ink: #D8CFEA;
  --footer-strong: #FFFFFF;
  --dots: radial-gradient(rgba(43, 22, 80, .14) 1.1px, transparent 1.4px);
}

/* ---------- Base ---------- */
body { font-size: 17px; line-height: 1.65; background: var(--bg); color: var(--ink); font-optical-sizing: auto; }
h1, h2, h3, h4 { color: var(--violet); font-optical-sizing: auto; }
h3 { font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--violet-link); text-decoration-color: color-mix(in srgb, var(--mandarine) 80%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--violet); text-decoration-color: var(--mandarine); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.stats :focus-visible, .lead :focus-visible, .site-footer :focus-visible, .side-box :focus-visible, .diag-card :focus-visible { outline-color: var(--mandarine); }
.skip:focus { background: var(--violet); color: #fff; border-radius: 8px; }
::selection { background: var(--mandarine); color: var(--ink); }
strong { font-weight: 700; }

/* ---------- Boutons : autocollants à ombre franche ---------- */
.btn { background: var(--mandarine); color: var(--on-accent); border: 2px solid var(--violet); border-radius: var(--radius-btn); padding: 11px 20px; min-height: 46px; font: 700 16px/1.2 var(--font-body); box-shadow: var(--sticker); transition: transform .15s, box-shadow .15s, background-color .15s; }
.btn:hover { filter: none; background: #FF8A33; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--violet); color: var(--on-accent); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--violet); }
.btn-big { padding: 14px 24px; min-height: 54px; font-size: 17px; }
.btn-ghost { background: var(--surface); color: var(--violet); }
.btn-ghost:hover { background: var(--lilas-soft); color: var(--violet); }

/* ---------- En-tête ---------- */
.site-header { background: var(--header-bg); border-bottom: 2px solid var(--violet); }
.header-in { min-height: 76px; }
.brand { gap: 12px; }
.brand-logo { width: 46px; height: 46px; transition: transform .3s; }
.brand:hover .brand-logo { transform: rotate(-12deg); }
.brand-name { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--violet); line-height: 1; }
.brand-tagline { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 3px; }
.nav { gap: 6px; }
.nav a { opacity: 1; color: var(--violet); font-weight: 600; font-size: 15px; padding: 10px 11px; border-radius: 10px; }
.nav a:not(.btn):hover { background: var(--lilas-soft); text-decoration: underline; text-decoration-color: var(--mandarine); }
.nav a.btn { margin-left: 10px; padding: 9px 18px; min-height: 44px; font-size: 15px; }
.nav-toggle { border: 2px solid var(--violet); border-radius: 10px; width: 46px; height: 44px; color: var(--violet); background: var(--surface); }
@media (max-width: 1180px) and (min-width: 941px) { .brand-tagline { display: none; } .nav a { padding: 10px 8px; } }
@media (max-width: 940px) {
  .nav { background: var(--creme); border-bottom: 2px solid var(--violet); padding: 6px 16px 18px; box-shadow: 0 18px 30px -20px rgba(43, 22, 80, .45); }
  .nav a { padding: 13px 4px; border-radius: 0; border-bottom: 1.5px dashed var(--line); font-size: 16px; }
  .nav a.btn { margin: 14px 0 0; border: 2px solid var(--violet); border-radius: var(--radius-btn); }
  .brand-logo { width: 40px; height: 40px; }
  .brand-name { font-size: 23px; }
}

/* ---------- Étiquettes et onglets ---------- */
.tag-label { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px 7px 10px; background: var(--surface); border: 2px solid var(--violet); border-radius: 999px; color: var(--violet); font-size: 14px; font-weight: 700; line-height: 1.3; box-shadow: 3px 3px 0 var(--lilas); }
.tag-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--mandarine); border: 2px solid var(--violet); flex: none; }
.sec-head { position: relative; border-top: 3px solid var(--violet); padding-top: 26px; margin: 34px 0 34px; max-width: 860px; }
.sec-head .tab-label { position: absolute; top: -3px; left: 0; transform: translateY(-100%); margin: 0; background: var(--violet); color: var(--creme); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; padding: 8px 16px 6px; border-radius: 12px 12px 0 0; }
.sec-head h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.04; margin: 0 0 14px; }
.sec-head p { color: var(--ink-2); font-size: 18px; margin: 0; max-width: 720px; }
.section { padding: 76px 0; }
.link-arrow { font-weight: 700; }
.link-arrow::after { content: " →"; color: var(--mandarine-ink); }

/* ---------- Héros ---------- */
.hero { background-color: var(--creme); background-image: var(--dots); background-size: 22px 22px; padding: 60px 0 84px; border-bottom: 2px solid var(--violet); overflow: hidden; }
.hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; } }
.hero h1 { font-size: clamp(40px, 5.1vw, 66px); line-height: 1; letter-spacing: -0.035em; margin: 0 0 24px; }
.hl { background: linear-gradient(transparent 64%, var(--mandarine) 64%, var(--mandarine) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; }
.hero-lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 600px; margin: 0 0 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--ink); font-weight: 600; font-size: 15px; }
.hero-ticks li { display: flex; align-items: center; gap: 8px; }
.hero-ticks li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23FF7A1A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }

.hero-visual { position: relative; isolation: isolate; padding: 30px 12px 10px 0; }
.hero-visual::before { content: ""; position: absolute; inset: 52px -6px -14px 22px; background: var(--mandarine); border: 2px solid var(--violet); border-radius: 26px; transform: rotate(3.5deg); z-index: -1; }
.board { position: relative; background: var(--surface); border: 2px solid var(--violet); border-radius: 26px; padding: 40px 22px 18px; box-shadow: 8px 8px 0 var(--violet); }
.board::before { content: ""; position: absolute; inset: 10px; border: 1.6px dashed color-mix(in srgb, var(--violet) 35%, transparent); border-radius: 18px; pointer-events: none; }
.board-tab { position: absolute; top: -2px; left: 30px; transform: translateY(-100%); margin: 0; background: var(--violet); color: var(--creme); font: 800 15px/1 var(--font-head); letter-spacing: .01em; padding: 11px 18px 9px; border-radius: 12px 12px 0 0; }
.board-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px 4px; }
.board-grid li { grid-column: span 2; }
.board-grid li:nth-child(5) { grid-column: 2 / span 2; }
.board-grid a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--violet); font-weight: 700; font-size: 13.5px; text-align: center; line-height: 1.2; padding: 4px 2px 6px; border-radius: 14px; min-height: 44px; }
.board-grid img { width: 100%; max-width: 108px; height: auto; display: block; transition: transform .25s; }
.board-grid li:nth-child(odd) img { transform: rotate(-7deg); }
.board-grid li:nth-child(even) img { transform: rotate(6deg); }
.board-grid a:hover img, .board-grid a:focus-visible img { transform: rotate(0) scale(1.08); }
.board-grid a:hover span { text-decoration: underline; text-decoration-color: var(--mandarine); text-decoration-thickness: 2px; }
.board-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: 14px 4px 0; padding-top: 12px; border-top: 1.6px dashed color-mix(in srgb, var(--violet) 35%, transparent); font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
@media (prefers-reduced-motion: no-preference) {
  .board-grid li { animation: stamp .55s cubic-bezier(.2, 1.4, .4, 1) both; }
  .board-grid li:nth-child(2) { animation-delay: .06s; } .board-grid li:nth-child(3) { animation-delay: .12s; } .board-grid li:nth-child(4) { animation-delay: .18s; }
  .board-grid li:nth-child(5) { animation-delay: .24s; } .board-grid li:nth-child(6) { animation-delay: .3s; } .board-grid li:nth-child(7) { animation-delay: .36s; }
}
@keyframes stamp { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .hero { padding: 36px 0 64px; }
  .hero h1 { font-size: 40px; }
  .hero-lede { font-size: 17.5px; }
  .hero-cta .btn { width: 100%; }
  .board { padding: 34px 12px 14px; }
  .board-grid { gap: 8px 2px; }
  .board-grid a { font-size: 12px; }
  .hero-visual { padding-right: 6px; }
}

/* ---------- Bandeau de chiffres ---------- */
.stats { background: var(--violet); color: var(--creme); padding: 56px 0 60px; }
.stats-title { color: var(--creme); font: 600 15px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 26px; display: flex; align-items: center; gap: 14px; }
.stats-title::after { content: ""; flex: 1; border-top: 1.6px dashed rgba(251, 246, 236, .35); }
.stats-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.stats-grid li { display: flex; flex-direction: column; gap: 8px; padding: 4px 22px 4px 22px; border-left: 1.6px dashed rgba(251, 246, 236, .3); }
.stats-grid li:first-child { border-left: 0; padding-left: 0; }
.stat-num { font: 800 clamp(34px, 3.6vw, 50px)/1 var(--font-head); color: var(--mandarine); letter-spacing: -0.03em; white-space: nowrap; }
.stat-txt { font-size: 15px; line-height: 1.5; color: #EDE6F7; }
.stat-ref { margin-top: auto; align-self: flex-start; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--creme); border: 1.5px solid rgba(251, 246, 236, .45); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 1000px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .stats-grid li { padding: 0 16px; }
  .stats-grid li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats-grid li:last-child { grid-column: 1 / -1; }
}

/* ---------- Catalogue ---------- */
.catalogue { padding-top: 92px; }
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 62px 24px; margin-top: 60px; }
@media (min-width: 720px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } .cat-grid > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1060px) {
  .cat-grid { grid-template-columns: repeat(6, 1fr); }
  .cat-card { grid-column: span 2; }
  .cat-card.cat-wide { grid-column: span 3; }
  .cat-grid > :last-child { grid-column: span 3; }
}
.cat-card { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 2px solid var(--violet); border-radius: 0 20px 20px 20px; padding: 26px 24px 20px; transition: transform .2s, box-shadow .2s; scroll-margin-top: 120px; }
.cat-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--violet); }
.cat-card:target { box-shadow: 7px 7px 0 var(--mandarine); }
.cat-tab { position: absolute; top: -2px; left: -2px; transform: translateY(-100%); margin: 0; background: var(--violet); color: var(--creme); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 7px 14px 5px; border-radius: 11px 11px 0 0; border: 2px solid var(--violet); border-bottom: 0; }
.cat-tab.tab-o { background: var(--mandarine); color: var(--ink); }
.cat-tab.tab-l { background: var(--lilas); color: var(--violet); }
.cat-badge { position: absolute; top: -34px; right: 16px; width: 92px; height: 92px; transform: rotate(9deg); transition: transform .3s; filter: drop-shadow(3px 3px 0 rgba(43, 22, 80, .18)); }
.cat-card:hover .cat-badge { transform: rotate(-4deg) scale(1.05); }
.cat-card h3 { font-size: 24px; line-height: 1.12; margin: 6px 96px 0 0; font-weight: 800; letter-spacing: -0.02em; }
.cat-desc { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.cat-specs { margin: 4px 0 0; border-top: 1.6px dashed var(--line); }
.cat-specs div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1.6px dashed var(--line); }
.cat-specs dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: 3px; }
.cat-specs dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.cat-links { margin: auto 0 0; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.cat-links a:not(.cat-cta) { font-weight: 600; padding: 10px 0; }
.cat-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--violet); color: var(--creme); font-weight: 700; text-decoration: none; transition: background-color .15s; }
.cat-cta::after { content: "→"; margin-left: 8px; color: var(--mandarine); }
.cat-cta:hover { background: var(--violet-2); color: #fff; }
.cat-note { margin: 34px 0 0; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 600px) { .cat-specs div { grid-template-columns: 92px 1fr; } .cat-card h3 { font-size: 22px; margin-right: 84px; } .cat-badge { width: 80px; height: 80px; } }

/* ---------- Intra / inter : tickets ---------- */
.formats { background: var(--creme-2); border-top: 2px solid var(--violet); border-bottom: 2px solid var(--violet); }
.tickets { display: grid; gap: 26px; }
@media (min-width: 860px) { .tickets { grid-template-columns: 1fr 1fr; gap: 30px; } }
.ticket { position: relative; background: var(--surface); border: 2px solid var(--violet); border-radius: 20px; box-shadow: var(--sticker); }
.ticket-head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: var(--lilas); border-radius: 18px 18px 0 0; border-bottom: 2px dashed var(--violet); }
.ticket-o .ticket-head { background: var(--mandarine-soft); }
.ticket-head img { width: 52px; height: 52px; flex: none; background: var(--surface); border: 2px solid var(--violet); border-radius: 50%; padding: 6px; }
.ticket-kicker { margin: 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--violet); }
.ticket-head h3 { margin: 2px 0 0; font-size: 23px; font-weight: 800; line-height: 1.15; }
.ticket ul { margin: 0; padding: 20px 24px 6px 46px; }
.ticket li { margin: 0 0 10px; color: var(--ink-2); }
.ticket li::marker { color: var(--mandarine-ink); }
.ticket-ideal { margin: 0 24px 22px; padding: 12px 14px; background: var(--creme); border-radius: 12px; font-size: 15px; color: var(--ink-2); }
.ticket-ideal strong { color: var(--violet); }
.formats-note { margin: 30px 0 0; padding: 16px 20px; border: 2px dashed var(--violet); border-radius: 16px; background: var(--surface); font-size: 16px; }

/* ---------- Étapes ---------- */
.steps-line { list-style: none; margin: 50px 0 0; padding: 0; display: grid; gap: 30px; position: relative; }
@media (min-width: 900px) {
  .steps-line { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .steps-line::before { content: ""; position: absolute; top: 37px; left: 40px; right: calc(25% - 59px); border-top: 2.5px dashed var(--violet); z-index: 0; }
}
.steps-line li { position: relative; z-index: 1; }
.step-ic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--surface); border: 2px solid var(--violet); box-shadow: 4px 4px 0 var(--mandarine); margin-bottom: 16px; }
.step-ic img { width: 44px; height: 44px; }
.step-n { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--mandarine-ink); }
.steps-line h3 { font-size: 21px; font-weight: 800; line-height: 1.2; margin: 0 0 8px; }
.steps-line p:not(.step-n) { margin: 0; font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 899px) {
  .steps-line { padding-left: 0; }
  .steps-line li { display: grid; grid-template-columns: 76px 1fr; column-gap: 18px; }
  .steps-line li > :not(.step-ic) { grid-column: 2; }
  .step-ic { grid-row: 1 / span 3; margin: 0; }
  .steps-line::before { content: ""; position: absolute; left: 37px; top: 20px; bottom: 30px; border-left: 2.5px dashed var(--violet); }
}
.pledge { display: grid; gap: 30px; margin-top: 58px; padding: 30px; background: var(--lilas-soft); border: 2px solid var(--violet); border-radius: 22px; }
@media (min-width: 900px) { .pledge { grid-template-columns: 1fr 1.1fr; gap: 44px; padding: 36px 40px; } }
.pledge h3 { font-size: 22px; font-weight: 800; margin: 0 0 12px; }
.pledge p { margin: 0 0 12px; color: var(--ink-2); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 34px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23FF7A1A' stroke='%232B1650' stroke-width='2'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%232B1650' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.checks strong { color: var(--violet); }

/* ---------- OPCO : page de carnet ---------- */
.opco { background: var(--lilas); border-top: 2px solid var(--violet); border-bottom: 2px solid var(--violet); }
.opco-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 960px) { .opco-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.opco-txt .sec-head { margin-top: 30px; }
.opco-txt > p { color: var(--ink-2); }
.notebook { position: relative; background: var(--surface); border: 2px solid var(--violet); border-radius: 6px 22px 22px 6px; padding: 24px 26px 20px 66px; box-shadow: 8px 8px 0 var(--violet); }
.notebook::before { content: ""; position: absolute; top: 0; bottom: 0; left: 46px; border-left: 2px solid var(--mandarine); }
.notebook::after { content: ""; position: absolute; top: 18px; bottom: 18px; left: 14px; width: 14px; background: radial-gradient(circle, var(--lilas) 0 5px, var(--violet) 5px 6.6px, transparent 7px) 0 0 / 14px 36px repeat-y; }
.notebook-title { font: 800 23px/1.2 var(--font-head); color: var(--violet); margin: 0 0 6px; }
.notebook ol { list-style: none; margin: 0; padding: 0; counter-reset: dossier; }
.notebook li { counter-increment: dossier; display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1.5px dashed var(--line); font-weight: 600; color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.notebook li::before { content: counter(dossier); flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 0; border-radius: 7px; border: 2px solid var(--violet); background: var(--mandarine-soft); font: 800 13px/1 var(--font-head); color: var(--violet); }
.notebook-foot { margin: 14px 0 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mandarine-ink); }
@media (max-width: 600px) { .notebook { padding: 20px 16px 16px 54px; } .notebook::before { left: 38px; } .notebook::after { left: 10px; } }

/* ---------- Prix et diagnostic ---------- */
.prices-grid { display: grid; gap: 40px; align-items: start; }
.prices-grid > * { min-width: 0; }
@media (min-width: 980px) { .prices-grid { grid-template-columns: 1.45fr .85fr; gap: 56px; } .diag-card { margin-top: 64px; } }
.prices-main > p { color: var(--ink-2); max-width: 720px; }
.prices .table-wrap, .table-wrap { border: 2px solid var(--violet); border-radius: 16px; background: var(--surface); margin: 22px 0 22px; }
th { background: var(--violet); color: var(--creme); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; padding: 12px 16px; }
td { padding: 12px 16px; border-bottom: 1.5px dashed var(--line); }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--creme) 70%, white); }
.prices td + td { font: 700 16px/1.4 var(--font-head); color: var(--violet); }
@media (max-width: 600px) { th { font-size: 11.5px; letter-spacing: .04em; padding: 10px 10px; } td { padding: 10px 10px; font-size: 14.5px; } .prices td + td { font-size: 14.5px; } }
@media (min-width: 600px) { .prices td + td { white-space: nowrap; } }
.diag-card { position: relative; background: var(--violet); color: #EDE6F7; border-radius: 22px; padding: 30px 28px 30px; box-shadow: 8px 8px 0 var(--mandarine); }
.diag-badges { display: flex; margin: -62px 0 14px; }
.diag-badges img { width: 66px; height: 66px; margin-right: -10px; }
.diag-badges img:nth-child(1) { transform: rotate(-10deg); } .diag-badges img:nth-child(3) { transform: rotate(8deg); }
.diag-kicker { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--mandarine); }
.diag-title { font: 800 27px/1.12 var(--font-head); color: #fff; margin: 0 0 12px; letter-spacing: -0.02em; }
.diag-card p:not(.diag-kicker):not(.diag-title) { margin: 0 0 22px; font-size: 15.5px; }
.diag-card .btn { box-shadow: 4px 4px 0 var(--creme); border-color: var(--creme); }
.diag-card .btn:hover { box-shadow: 6px 6px 0 var(--creme); }

/* ---------- Repères réglementaires ---------- */
.reperes { background: var(--surface); border-top: 2px solid var(--violet); }
.reperes-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 980px) { .reperes-grid { grid-template-columns: .95fr 1.25fr; gap: 56px; } .reperes-bref { position: sticky; top: 104px; } }
.reperes-txt h3 { font-size: 22px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.015em; }
.reperes-txt h3:not(:first-child) { margin-top: 30px; }
.reperes-txt p { margin: 0; color: var(--ink-2); }

/* L'essentiel : étiquette à onglet */
.bref { position: relative; margin: 44px 0 30px; padding: 24px 24px 16px; background: var(--creme); border: 2px solid var(--violet); border-left-width: 2px; border-radius: 0 18px 18px 18px; }
.reperes .bref { margin-top: 40px; box-shadow: var(--sticker); }
.bref-title { position: absolute; top: -2px; left: -2px; transform: translateY(-100%); margin: 0; background: var(--violet); color: var(--creme); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 7px 14px 5px; border-radius: 11px 11px 0 0; }
.bref ul { list-style: none; padding: 0; margin: 0; }
.bref li { position: relative; padding: 0 0 12px 26px; margin: 0 0 12px; border-bottom: 1.5px dashed var(--line); font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.bref li:last-child { border-bottom: 0; margin-bottom: 0; }
.bref li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--mandarine); border: 2px solid var(--violet); }
.bref strong { color: var(--violet); }

/* ---------- Cartes de guides ---------- */
.guides { padding-top: 40px; }
.related h2, .faq h2, .sources h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 24px; }
.guides .related { margin-top: 0; }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; }
.card { position: relative; border: 2px solid var(--violet); border-radius: 18px; padding: 20px 20px 22px; background: var(--surface); gap: 8px; transition: transform .2s, box-shadow .2s; }
.card:hover { border-color: var(--violet); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--violet); }
.card-kind { align-self: flex-start; font-size: 11.5px; letter-spacing: .08em; color: var(--violet); background: var(--lilas); padding: 4px 10px; border-radius: 999px; }
.card-tool .card-kind { background: var(--mandarine); color: var(--ink); }
.card-service .card-kind { background: var(--violet); color: var(--creme); }
.card-title { font: 800 19px/1.2 var(--font-head); color: var(--violet); letter-spacing: -0.01em; padding-right: 50px; }
.card-desc { color: var(--muted); font-size: 14.5px; }
.card::after { content: ""; position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; background: center/contain no-repeat; }
.card[href="/formation-sst-obligatoire"]::after { background-image: url(/assets/badge-sst.svg); }
.card[href="/habilitation-electrique-recyclage"]::after { background-image: url(/assets/badge-elec.svg); }
.card[href="/formation-gestes-et-postures"]::after { background-image: url(/assets/badge-gestes.svg); }
.card[href="/formation-incendie-obligatoire"]::after { background-image: url(/assets/badge-incendie.svg); }
.card[href="/referent-harcelement-sexuel-cse"]::after { background-image: url(/assets/badge-referent.svg); }
.card[href="/financement-formation-opco"]::after { background-image: url(/assets/ic-opco.svg); }
.card[href="/quelles-formations-obligatoires"]::after { background-image: url(/assets/ic-selection.svg); }
.card[href="/tarifs"]::after { background-image: url(/assets/ic-besoin.svg); }

@media (min-width: 1100px) { .guides .cards { grid-template-columns: repeat(4, 1fr); } }
.guides .related > h2 { position: relative; border-top: 3px solid var(--violet); padding-top: 26px; margin-top: 34px; max-width: 860px; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.04; }
.guides .related > h2::before { content: "Guides"; position: absolute; top: -3px; left: 0; transform: translateY(-100%); background: var(--violet); color: var(--creme); font: 700 12.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .09em; padding: 9px 16px 7px; border-radius: 12px 12px 0 0; }

/* ---------- FAQ ---------- */
.faq-zone { padding-top: 20px; }
.faq { max-width: 860px; }
.faq details { border: 0; border-top: 2px dashed color-mix(in srgb, var(--violet) 30%, transparent); border-radius: 0; background: transparent; margin: 0; }
.faq details:last-of-type { border-bottom: 2px dashed color-mix(in srgb, var(--violet) 30%, transparent); }
.faq summary { padding: 18px 56px 18px 0; font: 600 19px/1.35 var(--font-head); color: var(--violet); letter-spacing: -0.01em; min-height: 44px; }
.faq summary::after { content: "+"; top: 50%; right: 4px; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--mandarine); border: 2px solid var(--violet); color: var(--violet); font: 800 20px/1 var(--font-body); transition: transform .2s; }
.faq details[open] summary::after { content: "–"; background: var(--lilas); }
.faq details > div { padding: 0 56px 20px 0; font-size: 16.5px; }

/* ---------- Sources ---------- */
.sources ul { padding-left: 0; list-style: none; }
.sources li { padding-left: 22px; position: relative; margin: 8px 0; }
.sources li::before { content: "§"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--mandarine-ink); }
.home-sources { padding-bottom: 56px; }
.home-sources .sources { margin-top: 52px; }

/* ---------- Formulaire de devis ---------- */
.lead { background: var(--violet); border-top: 0; padding: 84px 0; color: var(--creme); }
.lead h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -0.03em; }
.lead-head::before { content: ""; display: block; width: 322px; max-width: 100%; height: 40px; margin-bottom: 24px; background:
  url(/assets/badge-sst.svg) 0 0 / 40px no-repeat, url(/assets/badge-elec.svg) 47px 0 / 40px no-repeat, url(/assets/badge-gestes.svg) 94px 0 / 40px no-repeat,
  url(/assets/badge-incendie.svg) 141px 0 / 40px no-repeat, url(/assets/badge-hauteur.svg) 188px 0 / 40px no-repeat, url(/assets/badge-conduite.svg) 235px 0 / 40px no-repeat, url(/assets/badge-referent.svg) 282px 0 / 40px no-repeat; }
.lead-intro { color: #E6DDF4; font-size: 17.5px; }
.lead-points li { color: #F4EFFB; font-weight: 500; padding-left: 32px; }
.lead-points li::before { width: 20px; height: 20px; top: 3px; background: var(--mandarine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232B1650' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.lead-form { background: var(--creme); color: var(--ink); border: 2px solid var(--creme); border-radius: 22px; padding: 28px; box-shadow: 8px 8px 0 var(--mandarine); }
.field label { color: var(--violet); font-weight: 700; font-size: 14.5px; }
.field input, .field select, .field textarea, .tool input:not([type=radio]):not([type=checkbox]), .tool select { border: 2px solid #CBBFDD; border-radius: 11px; background: #fff; color: var(--ink); min-height: 48px; }
.field input:focus, .field select:focus, .field textarea:focus, .tool input:not([type=radio]):not([type=checkbox]):focus, .tool select:focus { border-color: var(--violet); outline: 3px solid var(--lilas); }
.consent { color: var(--ink-2); }
.consent input { accent-color: var(--violet); }
.form-note { color: var(--muted); }
.form-success { background: var(--lilas-soft); border: 2px solid var(--violet); color: var(--ink); border-radius: 18px; }
.success-title { color: var(--violet); font-family: var(--font-head); font-weight: 800; }
@media (max-width: 600px) { .lead { padding: 60px 0; } .lead-form { padding: 20px; box-shadow: 5px 5px 0 var(--mandarine); } }

/* ---------- Pages standard ---------- */
.page-head { background-color: var(--creme); background-image: var(--dots); background-size: 22px 22px; border-bottom: 2px solid var(--violet); padding: 34px 0 44px; }
.page-head .wrap { position: relative; }
.page-head h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.02; letter-spacing: -0.03em; margin: 16px 0 14px; max-width: 860px; }
.page-head .lede { color: var(--ink-2); font-size: 19px; max-width: 760px; }
.meta { color: var(--muted); font-weight: 600; font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; }
.crumbs { font-size: 14px; gap: 6px; align-items: center; }
.crumbs a { color: var(--violet); font-weight: 700; text-decoration: none; background: var(--surface); border: 2px solid var(--violet); border-radius: 999px; padding: 3px 12px; }
.crumbs a:hover { background: var(--lilas-soft); }
.crumbs span:last-child { color: var(--ink-2); font-weight: 600; }
.page-head .wrap::after { content: ""; position: absolute; right: 16px; top: -12px; width: 60px; height: 60px; transform: rotate(8deg); background: url(/favicon.svg) center/contain no-repeat; }
@media (min-width: 1000px) {
  .page-head .wrap::after { right: 24px; top: 50%; width: 168px; height: 168px; transform: translateY(-50%) rotate(8deg); }
  .page-head h1, .page-head .lede { max-width: min(860px, calc(100% - 220px)); }
}
.page-formation-sst-obligatoire .page-head .wrap::after { background-image: url(/assets/badge-sst.svg); }
.page-habilitation-electrique-recyclage .page-head .wrap::after { background-image: url(/assets/badge-elec.svg); }
.page-formation-gestes-et-postures .page-head .wrap::after { background-image: url(/assets/badge-gestes.svg); }
.page-formation-incendie-obligatoire .page-head .wrap::after { background-image: url(/assets/badge-incendie.svg); }
.page-referent-harcelement-sexuel-cse .page-head .wrap::after { background-image: url(/assets/badge-referent.svg); }
.kind-legal .page-head .wrap::after { display: none; }

.content-wrap { padding-top: 44px; padding-bottom: 64px; }
@media (min-width: 1000px) { .content-grid.has-side { grid-template-columns: minmax(0, 1fr) 320px; gap: 60px; } }
.prose { font-size: 17.5px; line-height: 1.72; }
.prose h2 { font-size: clamp(26px, 2.8vw, 32px); line-height: 1.15; margin: 52px 0 14px; padding-top: 18px; border-top: 2px dashed color-mix(in srgb, var(--violet) 28%, transparent); }
.prose h3 { font-size: 21px; font-weight: 800; }
.prose ul li::marker { color: var(--mandarine-ink); }
.prose ol { padding-left: 26px; }
.prose ol li::marker { color: var(--violet); font-weight: 800; font-family: var(--font-head); }
.prose strong { color: var(--violet); }
.page-tarifs .prose td:nth-child(3), .page-tarifs .prose td:nth-child(4) { font-family: var(--font-head); font-weight: 700; color: var(--violet); }
.prose blockquote { border-left: 4px solid var(--mandarine); background: var(--mandarine-soft); }

.cta-box { position: relative; background: var(--mandarine-soft); border: 2px solid var(--violet); border-radius: 18px; padding: 20px 22px 20px 86px; margin: 36px 0; box-shadow: var(--sticker); }
.cta-box::before { content: ""; position: absolute; left: 20px; top: 50%; width: 50px; height: 50px; transform: translateY(-50%) rotate(-8deg); background: url(/favicon.svg) center/contain no-repeat; }
.cta-title { font: 800 20px/1.25 var(--font-head); color: var(--violet); letter-spacing: -0.01em; }
@media (max-width: 600px) { .cta-box { padding: 72px 18px 18px; } .cta-box::before { left: 18px; top: 16px; transform: rotate(-8deg); } .cta-box .btn { width: 100%; } }

.sidebar { top: 104px; }
.side-box { position: relative; background: var(--violet); color: #E6DDF4; border: 0; border-radius: 22px; padding: 30px 24px 24px; box-shadow: 7px 7px 0 var(--mandarine); gap: 14px; margin-top: 30px; }
.side-box::before { content: ""; position: absolute; top: -30px; right: 18px; width: 64px; height: 64px; background: url(/favicon.svg) center/contain no-repeat; transform: rotate(10deg); }
.side-title { font: 800 23px/1.15 var(--font-head); color: #fff; letter-spacing: -0.02em; padding-right: 40px; }
.side-text { color: #E6DDF4; font-size: 15px; }
.side-box .btn { border-color: var(--creme); box-shadow: 4px 4px 0 var(--creme); }
.side-box .btn:hover { box-shadow: 6px 6px 0 var(--creme); }
.side-link { color: #fff; font-weight: 600; text-align: center; padding: 8px 0 0; }
.side-link:hover { color: #fff; }

/* ---------- Outil de diagnostic ---------- */
.tool { position: relative; margin: 56px 0 36px; background: var(--surface); border: 2px solid var(--violet); border-radius: 0 22px 22px 22px; padding: 30px 28px 28px; box-shadow: 8px 8px 0 var(--violet); }
.tool::before { content: "Diagnostic gratuit"; position: absolute; top: -2px; left: -2px; transform: translateY(-100%); background: var(--violet); color: var(--creme); font: 700 12.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; padding: 10px 16px 8px; border-radius: 12px 12px 0 0; }
.tool .q > label, .tool .q-label, .tool .row label { display: block; color: var(--violet); font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.tool .q { margin-bottom: 22px; }
.tool .hint { color: var(--muted); }
.choices { gap: 10px; }
.choices label { border: 2px solid #CFC3E0; border-radius: 12px; padding: 9px 14px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--ink); background: #fff; transition: border-color .15s, background-color .15s; }
.choices label:hover { border-color: var(--violet); }
.choices label:has(input:checked) { border-color: var(--violet); background: var(--lilas); color: var(--violet); box-shadow: 2px 2px 0 var(--violet); }
.choices input, .tool input[type=radio], .tool input[type=checkbox] { accent-color: var(--violet); width: 18px; height: 18px; }
.tool > form > .btn, #fo-calc { margin-top: 6px; }
.result { margin-top: 28px; padding: 24px; border-radius: 18px; background: var(--creme); border: 2px solid var(--violet); }
.result.ok { background: var(--creme); border-color: var(--violet); color: var(--ink); }
.result.ko { background: var(--mandarine-soft); border-color: var(--mandarine-ink); color: var(--ink); }
.result-title { font: 800 22px/1.2 var(--font-head); color: var(--violet); }
.result-big { font: 800 46px/1 var(--font-head); color: var(--violet); letter-spacing: -0.03em; margin: 8px 0 6px; }
.fo-group { margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; font: 800 17px/1.3 var(--font-head); color: var(--violet); }
.fo-group::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--violet); flex: none; }
.fo-g-oblig::before { background: var(--violet); }
.fo-g-cond::before { background: var(--mandarine); }
.fo-g-reco::before { background: var(--surface); }
.result ul.fo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fo-item { position: relative; background: var(--surface); border: 2px solid var(--violet); border-radius: 14px; padding: 16px 18px 14px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.fo-item.has-badge { padding-right: 82px; }
.fo-item img { position: absolute; top: 12px; right: 12px; width: 56px; height: 56px; transform: rotate(8deg); }
.fo-cond { border-color: var(--mandarine-ink); border-style: dashed; }
.fo-reco { border-color: #B9ABD0; }
.fo-item-title { margin: 0 0 6px !important; font: 800 17px/1.3 var(--font-head); color: var(--violet); }
.fo-item p { margin: 0 0 4px; }
.fo-item strong { color: var(--violet); }
.fo-note { color: var(--muted); }
.result .hint { margin-top: 20px; color: var(--muted); font-size: 14px; }
.result .btn { margin-top: 6px; }
@media (max-width: 600px) { .tool { padding: 22px 16px 20px; box-shadow: 5px 5px 0 var(--violet); } .result { padding: 18px 14px; } .result-big { font-size: 38px; } .fo-item.has-badge { padding-right: 18px; padding-top: 16px; } .fo-item img { width: 44px; height: 44px; top: -14px; right: 10px; } }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); border-top: 8px solid var(--mandarine); padding: 60px 0 30px; }
.footer-grid { gap: 40px; }
.brand-footer .brand-name { color: #fff; font-size: 28px; }
.brand-footer .brand-logo { width: 52px; height: 52px; }
.footer-text { opacity: 1; color: var(--footer-ink); max-width: 440px; }
.footer-title { color: var(--mandarine); font: 700 13px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-block; padding: 6px 0; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--mandarine); }
.disclaimer { border-top: 1.6px dashed rgba(216, 207, 234, .3); opacity: 1; color: #BFB3D6; font-size: 13.5px; line-height: 1.6; }
.disclaimer a { text-decoration: underline; text-decoration-color: rgba(255, 122, 26, .7); }
.legal-links { font-size: 13.5px; }
.legal-links a { padding: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .cat-card, .cat-badge, .board-grid img, .brand-logo { transition: none !important; }
}