/* ==========================================================================
   FM6PSH — Mises en page et composants de pages
   ========================================================================== */

/* --- Utilitaires de mise en page ---------------------------------------- */
.sec { padding-block: clamp(56px, 8vw, 112px); position: relative; }
.sec--tint { background: var(--blue-50); }
.on-dark { background: var(--night); color: #D6E4F7; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }
.on-dark .muted, .on-dark .sec-intro { color: #B9CDE8; }
.sec-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head h2 { font-size: var(--fs-2xl); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-intro { font-size: var(--fs-lg); color: var(--ink-2); margin-top: 14px; }
.display-2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); }
.display-3 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.25; color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
html[dir="rtl"] .display-3 { font-family: var(--font-ar-display); line-height: 1.6; letter-spacing: 0; }
.h2 { font-size: var(--fs-2xl); } .h3 { font-size: var(--fs-xl); margin-bottom: 14px; } .h4 { font-size: var(--fs-lg); margin-bottom: 12px; }
.sp-top { margin-top: 40px; }
.muted { color: var(--muted); } .small { font-size: var(--fs-sm); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.center-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.note { color: var(--muted); font-size: var(--fs-sm); max-width: 620px; }
.notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: var(--r-md); background: var(--info-bg); color: var(--blue-800); margin-bottom: 24px; }
.notice p { margin: 0; } .notice .ico { margin-top: 3px; }
.notice--demo { background: repeating-linear-gradient(135deg, var(--yellow-100) 0 10px, #FFEDB8 10px 20px); color: var(--yellow-ink); border: 1px solid #F3D27A; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 48px 20px; color: var(--muted); }
.empty > .ico { width: 40px; height: 40px; color: var(--sky-2); }
.big-empty { min-height: 50vh; justify-content: center; }
.nf-arc { width: 120px; }
.success-box { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px; }
.success-box > .ico { width: 56px; height: 56px; color: var(--success); }
.code { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: .06em; color: var(--blue); background: var(--blue-50); border: 2px dashed var(--sky); padding: 6px 18px; border-radius: 12px; display: inline-block; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 18px 0; }
.facts > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.facts dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
html[dir="rtl"] .facts dt { letter-spacing: 0; }
.facts dd { margin: 4px 0 0; font-weight: 700; }
.check-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .ico { color: var(--success); margin-top: 4px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.mi-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--blue-100); color: var(--blue); display: grid; place-items: center; flex: none; }
.doc-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.doc-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.doc-item:hover { border-color: var(--sky); box-shadow: var(--shadow-1); }
.doc-item > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.doc-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--yellow-100); color: var(--yellow-ink); display: grid; place-items: center; flex: none; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: start; }
.data-table thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.data-table .num { text-align: end; }
.th-sort { border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; display: inline-flex; gap: 4px; align-items: center; padding: 4px; }
.th-sort .ico { width: 14px; height: 14px; } .th-sort.asc .ico { transform: rotate(180deg); }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row svg:not(.ico) { width: 18px; height: 18px; }
.opt { display: flex; align-items: center; gap: 12px; }

/* Visuels de remplacement (photos à fournir) */
.visual { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--blue-100); }
.visual > svg { width: 100%; height: 100%; display: block; }
.visual-tag .ico { width: 14px; height: 14px; }
.visual-tag { position: absolute; inset-inline-start: 12px; bottom: 12px; display: inline-flex; gap: 6px; align-items: center; background: rgba(255, 255, 255, .9); color: var(--ink-2); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visual-icon { position: absolute; inset-inline-end: 16px; top: 16px; width: 56px; height: 56px; border-radius: 18px; background: rgba(255, 255, 255, .92); color: var(--blue); display: grid; place-items: center; }
.visual-icon .ico { width: 28px; height: 28px; }

/* --- En-tête de page ----------------------------------------------------- */
.page-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--blue-50) 0%, #fff 60%); padding-block: clamp(40px, 6vw, 80px) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-hero-bg { position: absolute; inset: 0; pointer-events: none; color: var(--sky); }
.ph-arc { position: absolute; }
.ph-arc-1 { width: 540px; inset-inline-end: -140px; top: -160px; color: var(--sky); animation: spin 90s linear infinite; }
.ph-arc-2 { width: 300px; inset-inline-end: 120px; bottom: -150px; color: var(--yellow); opacity: .8; animation: spin 70s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.page-hero-inner { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.page-hero h1 { font-size: var(--fs-3xl); max-width: 16ch; }
html[dir="rtl"] .page-hero h1 { max-width: 20ch; }
.page-hero-intro { font-size: var(--fs-lg); color: var(--ink-2); max-width: 640px; margin-top: 18px; }
.page-hero-icon { width: 150px; height: 150px; border-radius: 44px; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 20px 50px rgba(0, 73, 161, .3); transform: rotate(-6deg); }
.page-hero-icon .ico { width: 64px; height: 64px; }
.page-hero--compact h1 { font-size: var(--fs-2xl); }
.page-hero--compact .page-hero-icon { width: 104px; height: 104px; border-radius: 32px; }
.page-hero--compact .page-hero-icon .ico { width: 44px; height: 44px; }
.page-hero--domain { background: linear-gradient(160deg, var(--night), var(--blue)); color: #D6E4F7; }
.page-hero--domain h1, .page-hero--domain .crumbs a, .page-hero--domain .crumbs li { color: #fff; }
.page-hero--domain .page-hero-intro { color: #D6E4F7; }
.page-hero--domain .eyebrow { color: var(--yellow); }
.page-hero--domain .page-hero-icon { background: var(--yellow); color: var(--night); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: var(--fs-sm); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-inline-end: 6px; opacity: .6; }
.crumbs a { color: var(--ink-2); }
.identity-card { margin: 0; background: #fff; border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-2); width: 300px; text-align: center; }
.identity-card img { width: 220px; height: auto; margin: 0 auto 12px; }
.identity-card figcaption strong { display: block; } .identity-card figcaption span { font-size: var(--fs-xs); color: var(--muted); }

/* ==========================================================================
   ACCUEIL
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding-block: clamp(32px, 5vw, 64px) clamp(70px, 8vw, 110px); background: radial-gradient(1200px 600px at 85% 20%, var(--blue-100), transparent 60%), linear-gradient(180deg, var(--ivory), #fff 70%); }
html[dir="rtl"] .hero { background: radial-gradient(1200px 600px at 15% 20%, var(--blue-100), transparent 60%), linear-gradient(180deg, var(--ivory), #fff 70%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-title { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.4rem); letter-spacing: -.035em; line-height: .98; font-weight: 800; }
html[dir="rtl"] .hero-title { line-height: 1.25; font-weight: 700; font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4.6rem); }
.hero-title .em { color: var(--blue); }
.hero-lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); color: var(--ink-2); max-width: 560px; margin: 22px 0 28px; }
.persona-label { font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.persona .chip[aria-checked="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; max-width: 620px; }
.quick-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-1); position: relative; animation: quickIn .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
@keyframes quickIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.quick-card:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: var(--shadow-2); color: var(--ink); }
.quick-card strong { display: block; font-size: var(--fs-sm); } .quick-card span span { font-size: var(--fs-xs); color: var(--muted); }
.qc-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
.quick-card:hover .qc-icon { background: var(--yellow); color: var(--ink); }
.qc-go { margin-inline-start: auto; color: var(--muted); }

.hero-art { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin-inline: auto; }
.orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.o-ring { fill: none; stroke: var(--line-2); stroke-width: 1.2; stroke-dasharray: 3 7; }
.o-ring-2 { stroke: var(--sky); stroke-dasharray: none; }
.o-arc { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s var(--ease) forwards; }
.o-arc-1 { stroke: var(--blue); stroke-width: 16; }
.o-arc-2 { stroke: var(--yellow); stroke-width: 10; animation-delay: .5s; }
.o-arc-3 { stroke: var(--sky-2); stroke-width: 6; animation-delay: .8s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.o-sun { transform-origin: 280px 280px; animation: spin 60s linear infinite; }
.o-sun circle { fill: var(--yellow); opacity: .95; }
.o-sun line { stroke: var(--yellow); stroke-width: 7; stroke-linecap: round; }
.hero-core { position: absolute; inset: 50% auto auto 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 18px 40px rgba(0, 73, 161, .35), 0 0 0 10px rgba(255, 255, 255, .6); }
.hero-core .ico { width: 48%; height: 48%; }
.sat { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 8px 16px 8px 8px; box-shadow: var(--shadow-2); text-decoration: none; color: var(--ink); font-weight: 700; font-size: var(--fs-sm); animation: float 6s ease-in-out infinite; transition: transform .25s, background .25s; border: 1px solid var(--line); }
html[dir="rtl"] .sat { padding: 8px 8px 8px 16px; }
.sat:hover { background: var(--night); color: #fff; animation-play-state: paused; }
.sat-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--blue-100); color: var(--blue); display: grid; place-items: center; }
.sat:hover .sat-ic { background: var(--yellow); color: var(--ink); }
.sat-1 { top: 2%; inset-inline-start: 38%; animation-delay: 0s; }
.sat-2 { top: 26%; inset-inline-end: -4%; animation-delay: -1.2s; }
.sat-3 { bottom: 26%; inset-inline-end: -2%; animation-delay: -2.4s; }
.sat-4 { bottom: 12%; inset-inline-start: 2%; animation-delay: -3.6s; }
.sat-5 { top: 28%; inset-inline-start: -6%; animation-delay: -4.8s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.slot-card { position: absolute; bottom: -18px; inset-inline-start: 26%; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 22px; padding: 14px 16px; box-shadow: var(--shadow-3); text-decoration: none; color: var(--ink); border: 1px solid var(--line); transition: transform .25s var(--ease); }
.slot-card:hover { transform: translateY(-4px); color: var(--ink); }
.slot-card small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.slot-card strong { display: block; font-size: var(--fs-sm); } .slot-card span span { font-size: var(--fs-xs); color: var(--ink-2); }
.slot-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(27, 127, 75, .5); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(27, 127, 75, 0); } 100% { box-shadow: 0 0 0 0 rgba(27, 127, 75, 0); } }
.slot-demo { position: absolute; top: -10px; inset-inline-end: 12px; font-size: 10px; }
.scroll-cue { position: absolute; bottom: 18px; inset-inline-start: 50%; transform: translateX(-50%); border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
html[dir="rtl"] .scroll-cue { transform: translateX(50%); }
.scroll-cue .ico { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* Mission / valeurs */
.mission-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.mission-copy { position: sticky; top: calc(var(--header-h) + 24px); }
.values { display: flex; gap: 10px; height: 420px; }
.value { flex: 1; border-radius: var(--r-lg); overflow: hidden; position: relative; transition: flex .6s var(--ease); background: var(--blue-100); display: flex; flex-direction: column; }
.value:nth-child(1) { background: var(--night); color: #fff; }
.value:nth-child(2) { background: var(--blue); color: #fff; }
.value:nth-child(3) { background: var(--sky); }
.value:nth-child(4) { background: var(--yellow); }
.value.is-open { flex: 3.2; }
.value-btn { border: 0; background: none; color: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; text-align: start; flex: 1; width: 100%; justify-content: space-between; }
.value-ic { width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; }
.value:nth-child(3) .value-ic, .value:nth-child(4) .value-ic { background: rgba(10, 31, 68, .1); }
.value-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; writing-mode: vertical-rl; transform: rotate(180deg); transition: all .4s; }
html[dir="rtl"] .value-name { font-family: var(--font-ar-display); transform: none; }
.value.is-open .value-name { writing-mode: horizontal-tb; transform: none; font-size: 2rem; }
.value-body { padding: 0 24px 26px; opacity: 0; max-height: 0; transition: opacity .4s .15s; }
.value.is-open .value-body { opacity: 1; max-height: 200px; }
.value-body p { font-size: var(--fs-lg); margin: 0; }

/* Explorateur de domaines */
.domains-sec { background: var(--ivory); }
.dom-explorer { display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: stretch; }
.dom-tabs { display: flex; flex-direction: column; gap: 6px; }
.dom-tab { display: flex; gap: 14px; align-items: center; text-align: start; padding: 14px 16px; border-radius: 18px; border: 1px solid transparent; background: none; transition: background .25s, border-color .25s; }
.dom-tab strong { display: block; } .dom-tab span span { font-size: var(--fs-xs); color: var(--muted); }
.dt-ic { width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--blue); display: grid; place-items: center; flex: none; transition: all .25s; }
.dom-tab:hover { background: #fff; }
.dom-tab[aria-selected="true"] { background: #fff; border-color: var(--line); box-shadow: var(--shadow-1); }
.dom-tab[aria-selected="true"] .dt-ic { background: var(--blue); color: #fff; border-color: var(--blue); }
.dom-panel { background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-2); display: grid; grid-template-columns: 220px 1fr; overflow: hidden; min-height: 420px; }
.dom-panel.swap .dp-body, .tl-panel.swap, .journey-panel.swap { animation: pageIn .45s var(--ease) both; }
.dp-art { background: linear-gradient(170deg, var(--hue), var(--night)); position: relative; display: grid; place-items: center; color: #fff; overflow: hidden; }
.dp-art > span { width: 96px; height: 96px; border-radius: 30px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; position: relative; z-index: 1; }
.dp-art > span .ico { width: 48px; height: 48px; }
.dp-arc { position: absolute; width: 260px; inset-inline-start: -60px; bottom: -70px; animation: spin 40s linear infinite; }
.dp-body { padding: clamp(24px, 3vw, 40px); }
.dp-body h3 { font-size: var(--fs-xl); margin-bottom: 12px; }
.dp-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
.dp-list li { display: flex; gap: 12px; } .dp-list .ico { color: var(--blue); margin-top: 4px; }
.dp-services { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: var(--fs-sm); }

/* Carte d'accueil */
.map-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.map-copy h2 { font-size: var(--fs-2xl); margin-bottom: 16px; }
.map-stats { display: flex; gap: 28px; margin: 28px 0 18px; flex-wrap: wrap; }
.map-stats div { display: flex; flex-direction: column-reverse; }
.map-stats dt { font-size: var(--fs-sm); color: #B9CDE8; }
.map-stats dd { margin: 0; font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--yellow); line-height: 1; }
.map-frame { border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); border: 6px solid rgba(255, 255, 255, .08); }
.map-box { width: 100%; height: 520px; background: var(--blue-50); position: relative; z-index: 0; }
.map-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center; padding: 20px; background: var(--blue-50); }
.map-loading .ico { width: 36px; height: 36px; color: var(--sky-2); }
.map-error .ico { color: var(--danger); }
.pin-wrap { background: none; border: 0; }
.pin { width: 40px; height: 40px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(10, 31, 68, .35); border: 3px solid #fff; transition: transform .2s, background .2s; }
.pin .ico { transform: rotate(45deg); width: 18px; height: 18px; }
.pin--formation { background: #2D6CC0; } .pin--orientation { background: var(--night); } .pin--mobile { background: #0B6E99; }
.leaflet-marker-icon.is-hover .pin, .leaflet-marker-icon:focus .pin { transform: rotate(-45deg) scale(1.18); }
.leaflet-marker-icon.is-active .pin { background: var(--yellow); color: var(--ink); transform: rotate(-45deg) scale(1.25); }
.leaflet-container { font-family: var(--font-body); }
.leaflet-container a.leaflet-control-zoom-in, .leaflet-container a.leaflet-control-zoom-out { width: 36px; height: 36px; line-height: 36px; }

/* Indicateurs */
.impact-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.impact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; align-items: stretch; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kpis--4 { grid-template-columns: repeat(4, 1fr); }
.kpi { border-radius: var(--r-lg); padding: 22px; background: var(--blue-50); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.on-dark .kpi { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.kpi-v { font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -.02em; }
.on-dark .kpi-v { color: var(--yellow); }
.kpi-l { color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm); }
.on-dark .kpi-l { color: #D6E4F7; }
.impact-chart { margin: 0; }
.impact-chart figcaption, .dash-card figcaption { font-weight: 700; margin-bottom: 8px; display: flex; flex-direction: column; }
.dash-card figcaption small { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }

/* Parcours : arc */
.journey-sec { background: linear-gradient(180deg, #fff, var(--blue-50)); }
.journey { position: relative; }
.journey-arc { height: 200px; margin-bottom: -150px; }
.journey-arc svg { width: 100%; height: 100%; }
.ja-track { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-dasharray: 4 8; vector-effect: non-scaling-stroke; }
.ja-fill { fill: none; stroke: var(--yellow); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--ease); vector-effect: non-scaling-stroke; }
.journey-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; position: relative; }
.journey-steps li:nth-child(1), .journey-steps li:nth-child(6) { margin-top: 70px; }
.journey-steps li:nth-child(2), .journey-steps li:nth-child(5) { margin-top: 10px; }
.journey-steps li:nth-child(3), .journey-steps li:nth-child(4) { margin-top: -20px; }
.js-step { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; padding: 8px; border-radius: 18px; text-align: center; }
.js-num { font-size: 12px; font-weight: 800; color: var(--muted); }
.js-ic { width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); color: var(--blue); display: grid; place-items: center; transition: all .3s var(--ease); box-shadow: var(--shadow-1); }
.js-step.is-done .js-ic { border-color: var(--yellow); }
.js-step[aria-selected="true"] .js-ic { background: var(--blue); color: #fff; border-color: var(--blue); transform: scale(1.12); box-shadow: 0 10px 30px rgba(0, 73, 161, .35); }
.js-name { font-weight: 700; font-size: var(--fs-sm); }
.journey-panel { margin: 36px auto 0; max-width: 760px; background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-2); padding: 28px; display: flex; gap: 22px; align-items: flex-start; }
.jp-ic { width: 64px; height: 64px; border-radius: 20px; background: var(--yellow); color: var(--ink); display: grid; place-items: center; flex: none; }
.jp-ic .ico { width: 30px; height: 30px; }
.jp-step { font-size: var(--fs-xs); font-weight: 800; color: var(--blue); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 4px; }
.journey-panel h3 { font-size: var(--fs-xl); margin-bottom: 8px; }

/* Carrousel */
.carousel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.carousel-ctrl { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.car-pos { font-weight: 700; font-size: var(--fs-sm); color: var(--muted); min-width: 120px; text-align: center; }
.car-track { list-style: none; padding: 0 0 12px; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 82%); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.car-slide { scroll-snap-align: start; }
.prog-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; height: 100%; transition: transform .3s var(--ease), box-shadow .3s; }
.prog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.prog-card .visual { border-radius: 0; }
.prog-body { padding: 22px 24px 26px; }
.prog-body h3 { font-size: var(--fs-lg); margin: 10px 0 8px; }

/* Magazine */
.mag { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }
.mag-feature { display: block; text-decoration: none; color: var(--ink); border-radius: var(--r-xl); overflow: hidden; background: var(--night); color: #fff; position: relative; }
.mag-feature .visual { border-radius: 0; aspect-ratio: 16 / 9; }
.mag-f-body { padding: 26px 28px 30px; }
.mag-f-body h3 { color: #fff; font-size: var(--fs-xl); margin: 12px 0 10px; }
.mag-f-body p { color: #C9D8EE; }
.mag-meta { display: inline-flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--yellow); font-weight: 700; }
.mag-feature:hover h3 { text-decoration: underline; }
.mag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.mag-item { display: flex; gap: 18px; align-items: center; padding: 22px 6px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: background .2s, padding .3s var(--ease); border-radius: 12px; }
.mag-item:hover { background: var(--blue-50); padding-inline: 14px; color: var(--ink); }
.mag-item strong { display: block; margin-top: 6px; line-height: 1.35; }
.mag-item > .ico { margin-inline-start: auto; color: var(--muted); }
.mag-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; height: 64px; border-radius: 16px; background: var(--yellow-100); color: var(--yellow-ink); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.mag-date b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--ink); }

/* Bande boutique */
.shop-band { background: var(--ivory); }
.shop-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; align-items: center; }
.shop-copy h2 { font-size: var(--fs-2xl); margin-bottom: 14px; }
.shop-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mini-product { background: #fff; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); position: relative; transition: transform .3s var(--ease), box-shadow .3s; }
.mini-product:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--shadow-2); }
.mp-art { display: block; aspect-ratio: 1; }
.mp-art svg { width: 100%; height: 100%; }
.mp-body { padding: 12px 14px 16px; display: flex; flex-direction: column; font-size: var(--fs-sm); }
.mp-body span { color: var(--blue); font-weight: 700; }
.mp-add { position: absolute; top: 10px; inset-inline-end: 10px; background: var(--yellow); border-color: var(--yellow); }

/* Partenaires */
.marquee { overflow: hidden; padding-block: 8px 24px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { list-style: none; display: flex; gap: 16px; padding: 0; margin: 0; width: max-content; animation: marquee 40s linear infinite; }
html[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
.logo-slot { width: 200px; height: 104px; border-radius: 20px; border: 2px dashed var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; background: #fff; text-align: center; padding: 8px; }
.logo-slot .ico { width: 26px; height: 26px; color: var(--sky-2); }

/* Aide rapide */
.help-sec { background: linear-gradient(135deg, var(--blue), var(--night)); padding-block: 72px; }
.help-title { color: #fff; font-size: var(--fs-2xl); margin-bottom: 28px; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.help-tile { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--r-xl); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; transition: background .25s, transform .25s var(--ease); }
.help-tile .ico { width: 34px; height: 34px; color: var(--yellow); }
.help-tile strong { font-size: var(--fs-lg); } .help-tile span { color: #C9D8EE; }
.help-tile:hover { background: rgba(255, 255, 255, .16); transform: translateY(-4px); color: #fff; }
.help-tile--accent { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.help-tile--accent .ico, .help-tile--accent span { color: var(--ink); }
.help-tile--accent:hover { background: #FFC933; color: var(--ink); }
.kbd-list { display: grid; gap: 10px; margin: 0; }
.kbd-list div { display: flex; gap: 14px; align-items: center; } .kbd-list dd { margin: 0; }

/* ==========================================================================
   GRAPHIQUES
   ========================================================================== */
.chart { position: relative; }
.chart-plot { width: 100%; overflow: hidden; }
.chart svg .grid { stroke: #E6ECF4; stroke-width: 1; }
.chart svg .baseline { stroke: var(--line-2); stroke-width: 1.5; }
.chart svg .axis { fill: var(--muted); font-size: 12px; font-family: var(--font-body); }
.chart svg .line { stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart svg .crosshair { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 4; }
.chart svg .dot-last { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.chart svg .hover-dot { fill: var(--yellow); stroke: var(--night); stroke-width: 2; }
.chart svg .hit:focus { outline: none; }
.chart svg .hit:focus-visible { stroke: var(--blue); stroke-width: 2; }
.chart svg .bar { fill: var(--blue); transition: fill .2s; }
.chart svg .col.is-hl .bar { fill: var(--night); }
.chart svg .col:hover .bar, .chart svg .col:focus .bar { fill: var(--blue-700); }
.chart svg .col:focus { outline: none; } .chart svg .col:focus-visible rect { stroke: var(--blue); stroke-width: 2; }
.chart-tip { position: absolute; z-index: 5; background: var(--night); color: #fff; border-radius: 12px; padding: 10px 14px; pointer-events: none; display: flex; flex-direction: column; min-width: 140px; box-shadow: var(--shadow-2); font-size: var(--fs-xs); }
.chart-tip[hidden] { display: none; }
.chart-tip strong { font-size: var(--fs-sm); } .chart-tip span { color: #B9CDE8; } .chart-tip b { font-size: var(--fs-lg); color: var(--yellow); }
.chart-table { margin-top: 10px; font-size: var(--fs-sm); }
.chart-table summary { cursor: pointer; display: inline-flex; gap: 8px; align-items: center; color: var(--blue); font-weight: 700; padding: 6px 0; border-radius: 8px; }
.hb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.hb-row { width: 100%; display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 12px; align-items: center; border: 0; background: none; padding: 6px 8px; border-radius: 10px; text-align: start; font-size: var(--fs-sm); }
.hb-row:hover { background: var(--blue-50); }
.hb-row.is-sel { background: var(--yellow-100); }
.hb-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-track { height: 14px; background: var(--blue-50); border-radius: 4px; overflow: hidden; display: block; }
.hb-fill { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 0 4px 4px 0; transition: width 1s var(--ease); }
html[dir="rtl"] .hb-fill { border-radius: 4px 0 0 4px; margin-inline-start: 0; }
.hbars.is-drawn .hb-fill { width: var(--w); }
.hb-row.is-sel .hb-fill { background: var(--night); }
.hb-val { font-weight: 700; min-width: 64px; text-align: end; }

/* ==========================================================================
   LA FONDATION
   ========================================================================== */
.mvo { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; margin-top: 28px; }
.mvo-mission { background: var(--yellow-100); border-radius: var(--r-xl); padding: 36px; }
.mvo-col { padding: 8px; }
.mvo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.mvo-list li { display: flex; gap: 14px; } .mvo-list strong { display: block; } .mvo-list span span { color: var(--muted); font-size: var(--fs-sm); }
.timeline { position: relative; margin-top: 20px; }
.tl-rail { height: 4px; background: rgba(255, 255, 255, .15); border-radius: 4px; position: absolute; top: 31px; inset-inline: 30px; }
.tl-progress { display: block; height: 100%; background: var(--yellow); border-radius: 4px; width: 0; transition: width .7s var(--ease); }
.tl-years { display: flex; justify-content: space-between; position: relative; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.tl-year { border: 0; background: none; color: #B9CDE8; display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); padding: 14px 10px; border-radius: 14px; min-width: 72px; }
.tl-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--night); border: 3px solid rgba(255, 255, 255, .3); transition: all .3s; }
.tl-year.is-past .tl-dot { border-color: var(--yellow); background: var(--yellow); }
.tl-year[aria-selected="true"] { color: #fff; }
.tl-year[aria-selected="true"] .tl-dot { transform: scale(1.4); box-shadow: 0 0 0 6px rgba(253, 186, 3, .25); }
.tl-panel { margin-top: 32px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; background: rgba(255, 255, 255, .06); border-radius: var(--r-xl); padding: 32px; border: 1px solid rgba(255, 255, 255, .12); }
.tl-big { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 5vw, 6rem); font-weight: 800; color: var(--yellow); line-height: 1; margin: 0; }
.tl-panel h3 { font-size: var(--fs-xl); margin-bottom: 8px; }
.rings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ring { margin: 0; position: relative; text-align: center; }
.ring svg { width: 160px; height: 160px; margin: 0 auto; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--blue-100); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--blue); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease); }
.ring.is-drawn .ring-fg { stroke-dashoffset: calc(100 - var(--p)); }
.ring:nth-child(even) .ring-fg { stroke: var(--yellow); }
.ring-v { position: absolute; top: 80px; inset-inline-start: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--ink); }
html[dir="rtl"] .ring-v { transform: translate(50%, -50%); }
.ring figcaption { margin-top: 14px; } .ring figcaption strong { display: block; } .ring figcaption span { font-size: var(--fs-sm); color: var(--muted); }
.org { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.org-level { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; position: relative; }
.org-l0::after, .org-l1::after { content: ""; position: absolute; bottom: -28px; inset-inline-start: 50%; width: 2px; height: 28px; background: var(--line-2); }
.org-l2 { border-top: 2px solid var(--line-2); padding-top: 22px; }
.org-node { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 16px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 700; transition: all .25s; }
.org-l0 .org-node { background: var(--night); color: #fff; border-color: var(--night); }
.org-l1 .org-node { background: var(--blue); color: #fff; border-color: var(--blue); }
.org-node:hover, .org-node[aria-expanded="true"] { border-color: var(--yellow); box-shadow: 0 0 0 4px var(--yellow-100); }
.org-detail { min-height: 80px; width: 100%; max-width: 640px; }
.org-card { display: flex; gap: 16px; align-items: flex-start; background: var(--yellow-100); border-radius: var(--r-lg); padding: 20px 24px; animation: pageIn .4s var(--ease); }
.org-card > .ico { width: 30px; height: 30px; color: var(--yellow-ink); }
.org-card h3 { font-size: var(--fs-lg); margin-bottom: 4px; }
.gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery li:first-child { grid-column: span 2; grid-row: span 2; }
.g-item { border: 0; padding: 0; background: none; width: 100%; height: 100%; border-radius: var(--r-md); overflow: hidden; display: block; }
.g-item .visual { border-radius: var(--r-md); height: 100%; aspect-ratio: auto; min-height: 110px; transition: transform .4s var(--ease); }
.g-item:hover .visual { transform: scale(1.04); }
.g-item .visual-tag { font-size: 11px; }
.lightbox .visual { aspect-ratio: 16 / 9; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .lb-bar p { margin: 0; }

/* ==========================================================================
   NOS CENTRES
   ========================================================================== */
.centres-app { padding-top: 32px; }
.filters { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) auto auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-1); }
.filters--ga { grid-template-columns: 1.4fr 1fr 1fr; box-shadow: none; padding: 0; border: 0; margin-bottom: 14px; }
.filters--tr { grid-template-columns: 1.4fr repeat(3, 1fr); box-shadow: none; padding: 0; border: 0; margin-bottom: 14px; }
.results-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0; }
.results-count { margin: 0; font-weight: 700; }
.view-toggle { margin-inline-start: auto; display: none; }
.view-toggle button { display: inline-flex; gap: 6px; align-items: center; }
.centres-layout { display: grid; grid-template-columns: 420px 1fr; gap: 20px; height: 680px; }
.centre-list { list-style: none; padding: 0 6px 0 0; margin: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.centre-map { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); position: sticky; top: calc(var(--header-h) + 16px); }
.centre-map .map-box { height: 100%; }
.centre-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; position: relative; }
.centre-item:hover, .centre-item:focus-within { border-color: var(--sky-2); box-shadow: var(--shadow-1); }
.centre-item.is-active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); }
.ci-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--blue); }
.ci-ic.pin--formation { background: #2D6CC0; } .ci-ic.pin--orientation { background: var(--night); } .ci-ic.pin--mobile { background: #0B6E99; }
.ci-title { font-size: var(--fs-md); margin-bottom: 4px; line-height: 1.3; }
.ci-meta { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 8px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ci-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.ci-access { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; color: var(--blue); }
.ci-access > span { width: 28px; height: 28px; border-radius: 8px; background: var(--blue-50); display: grid; place-items: center; }
.ci-access .ico { width: 16px; height: 16px; }
.ci-open { grid-column: 1 / -1; justify-self: start; }
.access-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.access-grid li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); }
.access-grid li span { flex: 1; } .access-grid .st { width: 20px; height: 20px; }
.access-grid .ok { background: var(--success-bg); border-color: #BFE3CD; } .access-grid .ok .st { color: var(--success); }
.access-grid .ko { color: var(--muted); } .access-grid .ko .st { color: var(--danger); }

/* ==========================================================================
   DOMAINES
   ========================================================================== */
.dom-rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.dom-row { display: grid; grid-template-columns: 64px 1.2fr 1.4fr 1.6fr 40px; gap: 24px; align-items: center; padding: 28px 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); position: relative; transition: background .3s, padding .3s var(--ease); overflow: hidden; }
.dom-row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--hue); transition: width .5s var(--ease); z-index: -1; }
.dom-row:hover { color: #fff; padding-inline: 24px; }
.dom-row:hover::before { width: 100%; }
.dom-row:hover .dr-short, .dom-row:hover .dr-go { color: #fff; }
.dom-row:hover .badge { background: rgba(255, 255, 255, .18); color: #fff; }
.dr-ic { width: 60px; height: 60px; border-radius: 18px; background: var(--blue-100); color: var(--blue); display: grid; place-items: center; transition: all .3s; }
.dom-row:hover .dr-ic { background: var(--yellow); color: var(--ink); }
.dr-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.15; }
html[dir="rtl"] .dr-title { font-family: var(--font-ar-display); }
.dr-short { color: var(--muted); }
.dr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-go { width: 28px; height: 28px; color: var(--blue); }
.schema-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.orbit-schema { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.orbit-schema svg { width: 100%; height: 100%; }
.os-ring { fill: none; stroke: var(--sky); stroke-width: 2; stroke-dasharray: 5 7; }
.os-ray { stroke: var(--line-2); stroke-width: 2; transition: stroke .3s, stroke-width .3s; }
.os-ray.on { stroke: var(--yellow); stroke-width: 5; }
.os-center { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--night); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px; font-weight: 700; font-size: var(--fs-sm); box-shadow: 0 0 0 12px var(--blue-100); }
.os-center .ico { width: 34px; height: 34px; color: var(--yellow); }
.os-node { position: absolute; transform: translate(-50%, -50%); width: 130px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--ink); font-weight: 700; font-size: var(--fs-xs); line-height: 1.25; }
.os-node .ico { width: 58px; height: 58px; padding: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--line-2); color: var(--blue); box-shadow: var(--shadow-1); transition: all .25s; }
.os-node:hover .ico, .os-node:focus-visible .ico { background: var(--blue); color: #fff; border-color: var(--blue); transform: scale(1.1); }
.dd-key { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 16px; align-items: stretch; }
.dd-k { background: var(--blue-50); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.dd-k--badge { background: none; border: 0; justify-content: center; }
.dd-progs { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; margin-top: 20px; }
.dd-prog { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.dd-prog--lead { grid-row: span 2; padding: 0; overflow: hidden; } .dd-prog--lead > div { padding: 0 24px 24px; }
.dd-prog--lead .visual { border-radius: 0; }
.dd-prog h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: f; }
.flow li { position: relative; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; color: #fff; font-weight: 700; font-size: var(--fs-lg); }
.flow li:not(:last-child)::after { content: ""; position: absolute; inset-inline-end: -14px; top: 50%; width: 12px; height: 12px; border-top: 3px solid var(--yellow); border-inline-end: 3px solid var(--yellow); transform: translateY(-50%) rotate(45deg); }
html[dir="rtl"] .flow li:not(:last-child)::after { transform: translateY(-50%) rotate(-45deg); }
.flow-n { width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-family: var(--font-display); }
.mini-centres { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; }
.mini-centres a { display: inline-flex; gap: 8px; align-items: center; }
.news-mini { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.news-mini a { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 20px; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line); text-decoration: none; color: var(--ink); height: 100%; transition: transform .25s var(--ease), box-shadow .25s; }
.news-mini a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); color: var(--ink); }
.other-domains { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.other-domains a { display: inline-flex; gap: 10px; align-items: center; padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--line-2); text-decoration: none; color: var(--ink); font-weight: 700; }
.other-domains a:hover { background: var(--night); color: #fff; border-color: var(--night); }

/* ==========================================================================
   PARTENAIRES
   ========================================================================== */
.filter-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filter-row .search-input { min-width: 260px; }
.partner-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.partner-card { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; text-align: start; transition: all .25s; }
.partner-card:hover { border-color: var(--blue); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.pc-logo { width: 100%; height: 90px; border-radius: 14px; border: 2px dashed var(--line-2); display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-weight: 800; letter-spacing: .14em; font-size: 12px; background: var(--surface-2); }
.pc-logo--lg { height: 140px; margin-bottom: 16px; }
.collab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.collab-card { background: #fff; border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--line); }
.collab-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); margin-bottom: 16px; }
.collab-card h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.form-card { padding: clamp(20px, 3vw, 32px); }

/* ==========================================================================
   SERVICES NUMÉRIQUES
   ========================================================================== */
.app-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.app-tile { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 24px; border-radius: var(--r-xl); border: 1px solid var(--line); background: linear-gradient(160deg, #fff, var(--blue-50)); transition: transform .3s var(--ease), box-shadow .3s; align-items: center; }
.app-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.app-tile--lg { background: linear-gradient(160deg, var(--night), var(--blue)); color: #D6E4F7; border: 0; }
.app-tile--lg h2 { color: #fff; } .app-tile--lg .muted { color: #B9CDE8; }
.app-tile--lg .btn { --btn-bg: var(--yellow); --btn-bd: var(--yellow); --btn-fg: var(--ink); }
.app-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.app-info h2 { margin: 6px 0 2px; }
.app-phone { width: 160px; height: 300px; border-radius: 30px; background: #fff; border: 8px solid var(--night); box-shadow: var(--shadow-2); padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; transform: rotate(-4deg); transition: transform .4s var(--ease); }
.app-tile:hover .app-phone { transform: rotate(0) translateY(-4px); }
.pp-top { display: flex; align-items: center; gap: 6px; color: var(--blue); } .pp-top span { flex: 1; height: 8px; border-radius: 4px; background: var(--blue-100); }
.pp-row { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 10px; background: var(--surface-2); }
.pp-row b { width: 20px; height: 20px; border-radius: 6px; background: var(--sky); flex: none; } .pp-row span { flex: 1; height: 7px; border-radius: 4px; background: var(--line); }
.pp-row--hl { background: var(--yellow-100); } .pp-row--hl b { background: var(--yellow); }
.pp-btn { margin-top: auto; height: 26px; border-radius: 99px; background: var(--blue); }
.pp-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pp-cal i { aspect-ratio: 1; border-radius: 4px; background: var(--blue-50); } .pp-cal i.on { background: var(--yellow); } .pp-cal i.off { background: var(--line); }
.other-apps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.other-apps li { display: flex; gap: 12px; align-items: center; padding: 18px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); font-weight: 700; }
.other-apps .ico { color: var(--blue); width: 26px; height: 26px; }
.app-sec { padding-top: 32px; }
.app-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.app-side { display: grid; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
.side-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.side-links a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: var(--fs-sm); }
.side-links a:hover { background: #fff; }
.side-links a[aria-current="page"] { background: var(--blue); color: #fff; }
.stepper { list-style: none; padding: 0; margin: 0 0 24px; display: flex; gap: 6px; }
.stepper li { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); position: relative; }
.stepper li::before { content: ""; height: 4px; border-radius: 4px; background: var(--line); }
.stepper li.done::before { background: var(--blue); } .stepper li.cur::before { background: var(--yellow); }
.stepper li.cur { color: var(--ink); }
.st-n { display: none; }
.pbar { display: block; height: 8px; background: var(--blue-100); border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.pbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--sky-2)); border-radius: 99px; transition: width .6s var(--ease); }
.pbar--lg { height: 12px; margin: 0; }
.wizard fieldset { border: 0; padding: 0; margin: 0; }
.wizard legend { margin-bottom: 18px; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.opt-grid--2 { grid-template-columns: 1fr 1fr; }
.opt-card { position: relative; cursor: pointer; }
.opt-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt-card > span { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; border: 2px solid var(--line-2); font-weight: 700; transition: all .2s; min-height: 64px; justify-content: center; }
.opt-card > span small { font-weight: 400; color: var(--muted); }
.opt-card:hover > span { border-color: var(--blue); }
.opt-card input:checked + span { border-color: var(--blue); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue); }
.opt-card input:checked + span::after { content: "✓"; position: absolute; top: 10px; inset-inline-end: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 13px; }
.opt-card input:focus-visible + span { box-shadow: var(--focus); }
.wiz-err { color: var(--danger); font-weight: 700; min-height: 1.5em; margin: 12px 0 0; }
.wiz-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.result h3 { display: flex; gap: 10px; align-items: center; font-size: var(--fs-xl); color: var(--blue); }
.result h4 { margin: 22px 0 10px; font-size: var(--fs-lg); }
.reco { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.reco a { display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: var(--blue-50); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.reco a:hover { border-color: var(--blue); color: var(--ink); } .reco strong { display: block; } .reco span span { font-size: var(--fs-xs); color: var(--muted); }
.cal { max-width: 460px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head h3 { font-size: var(--fs-lg); text-transform: capitalize; margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-wd { text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: capitalize; padding-bottom: 4px; }
.cal-day { aspect-ratio: 1; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; min-height: 44px; }
.cal-day.avail:hover { border-color: var(--blue); background: var(--blue-50); }
.cal-day.full { background: repeating-linear-gradient(135deg, #fff 0 5px, var(--blue-50) 5px 10px); color: var(--muted); text-decoration: line-through; cursor: not-allowed; }
.cal-day.closed { color: #A6B2C4; background: var(--surface-2); cursor: not-allowed; border-style: dashed; }
.cal-day.sel { background: var(--blue); color: #fff; border-color: var(--blue); }
.cal-legend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; }
.lg { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line); display: inline-block; margin-inline-start: 8px; }
.lg.full { background: repeating-linear-gradient(135deg, #fff 0 3px, var(--blue-100) 3px 6px); } .lg.closed { background: var(--surface-2); border-style: dashed; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot { min-height: 48px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.slot:hover:not(:disabled) { border-color: var(--blue); }
.slot:disabled { color: #A6B2C4; text-decoration: line-through; background: var(--surface-2); cursor: not-allowed; }
.slot.sel { background: var(--blue); color: #fff; border-color: var(--blue); }
.summary-chip { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--yellow-100); color: var(--yellow-ink); font-weight: 700; font-size: var(--fs-sm); margin-bottom: 18px; }
.track-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.track-form .field { flex: 1; min-width: 220px; margin: 0; }
.track-out { margin-top: 20px; }
.vtimeline { list-style: none; padding: 0; margin: 16px 0 20px; }
.vtimeline li { display: flex; gap: 16px; position: relative; padding-bottom: 22px; }
.vtimeline li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 17px; top: 36px; bottom: 0; width: 2px; background: var(--line); }
.vtimeline li.done::before { background: var(--blue); }
.vt-dot { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; display: grid; place-items: center; flex: none; }
.vtimeline .done .vt-dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.vtimeline .cur .vt-dot { background: var(--yellow); border-color: var(--yellow); color: var(--ink); box-shadow: 0 0 0 6px var(--yellow-100); }
.vtimeline li div { display: flex; flex-direction: column; padding-top: 6px; }
.vtimeline li:not(.done):not(.cur) strong { color: var(--muted); }
.ga-feat { border: 0; padding: 0; margin: 0 0 6px; } .ga-feat legend { font-weight: 700; margin-bottom: 8px; }
.place-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.place { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 18px; }
.place > div { display: flex; flex-direction: column; gap: 2px; }
.place .ci-access { margin-top: 6px; }
.score { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; padding-top: 18px; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; border: 5px solid; }
.score small { font-size: 11px; color: var(--muted); font-family: var(--font-body); }
.score.hi { border-color: var(--success); color: var(--success); } .score.mid { border-color: var(--yellow); color: var(--yellow-ink); } .score.lo { border-color: #E08A3C; color: #9A4C0B; }
.train-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.train { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; transition: box-shadow .3s; }
.train h3 { font-size: var(--fs-lg); margin: 4px 0; }
.train.is-enrolled { border-color: var(--success); background: var(--success-bg); }
.train.is-flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 6px var(--yellow); } 100% { box-shadow: none; } }
.train-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--blue); color: #fff; display: grid; place-items: center; }
.train-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.train-meta span { display: inline-flex; gap: 4px; align-items: center; }
.train .btn, .train .badge--success { margin-top: auto; }
.opt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); font-weight: 700; cursor: pointer; font-size: var(--fs-sm); }
.opt-chip input { accent-color: var(--blue); width: 18px; height: 18px; }
.opt-chip:has(input:checked) { border-color: var(--blue); background: var(--blue-50); color: var(--blue); }
fieldset.field { border: 0; padding: 0; }
fieldset.field legend { margin-bottom: 8px; }

/* ==========================================================================
   ESPACE BÉNÉFICIAIRE
   ========================================================================== */
.login-sec { background: linear-gradient(160deg, var(--blue-50), #fff); }
.login-grid { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center; }
.login-copy h1 { font-size: var(--fs-3xl); }
.login-card { padding: 32px; box-shadow: var(--shadow-3); border: 0; }
.login-card img { margin-bottom: 16px; }
.espace { background: var(--surface-2); padding-block: 28px 80px; min-height: 80vh; }
.espace-grid { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.es-side { position: sticky; top: calc(var(--header-h) + 16px); background: var(--night); color: #D6E4F7; border-radius: var(--r-xl); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.es-user { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.es-user strong { display: block; color: #fff; }
.es-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; flex: none; }
.es-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.es-nav a { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; color: #D6E4F7; text-decoration: none; font-weight: 700; font-size: var(--fs-sm); }
.es-nav a span:first-of-type { flex: 1; }
.es-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.es-nav a[aria-current="page"] { background: #fff; color: var(--night); }
.count { min-width: 22px; height: 22px; border-radius: 99px; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; padding: 0 6px; }
.count--soft { background: rgba(255, 255, 255, .18); color: #fff; }
.es-nav a[aria-current="page"] .count--soft { background: var(--blue-100); color: var(--blue); }
.es-side .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .3); }
.es-side .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-fg: #fff; }
.es-main { min-width: 0; }
.es-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.es-head h1 { font-size: var(--fs-2xl); }
.es-head .eyebrow { margin-bottom: 6px; }
.es-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.es-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s; }
.es-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); color: var(--ink); }
.es-card strong { font-size: var(--fs-xl); font-family: var(--font-display); }
.es-card--hero { background: linear-gradient(150deg, var(--blue), var(--night)); color: #fff; border: 0; grid-row: span 1; }
.es-card--hero:hover { color: #fff; } .es-card--hero .es-card-l { color: var(--yellow); }
.es-card-l { display: inline-flex; gap: 8px; align-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.mini-prog { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); } .mini-prog .pbar { margin: 0; }
.mini-steps { list-style: none; display: flex; gap: 4px; padding: 0; margin: 6px 0; }
.mini-steps li { flex: 1; height: 6px; border-radius: 4px; background: var(--line); }
.mini-steps .done { background: var(--blue); } .mini-steps .cur { background: var(--yellow); }
.req-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.req-card { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.req-card .link-arrow { align-self: flex-start; }
.req-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.req-card .code { font-size: 1rem; padding: 2px 10px; }
.req-warn { display: flex; gap: 8px; align-items: center; color: var(--yellow-ink); background: var(--yellow-100); padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: var(--fs-sm); margin: 4px 0; }
.rdv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rdv-row { display: flex; align-items: center; gap: 16px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; flex-wrap: wrap; }
.rdv-row > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 180px; }
.rdv-row.cancel { opacity: .6; } .rdv-row.past { background: var(--surface-2); }
.rdv-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.rdv-date b { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
.rdv-act { display: flex; gap: 8px; }
.my-trainings { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.my-trainings li { display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: 16px; align-items: center; }
.my-trainings li > div:first-child { display: flex; flex-direction: column; }
.notif-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.notif button { width: 100%; display: flex; gap: 14px; align-items: center; text-align: start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.notif button > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.notif.unread button { border-color: var(--sky-2); background: var(--blue-50); }
.notif.unread strong { color: var(--ink); } .notif:not(.unread) strong { font-weight: 400; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-100); }
.es-centre { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.es-map { height: 100%; min-height: 380px; border-radius: var(--r-lg); overflow: hidden; }
.chat { display: flex; flex-direction: column; gap: 12px; }
.chat-log { list-style: none; padding: 8px; margin: 0; height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); border-radius: 16px; }
.msg { max-width: 78%; padding: 12px 16px; border-radius: 18px; font-size: var(--fs-sm); animation: pop .3s var(--ease); }
.msg--bot { background: #fff; border: 1px solid var(--line); border-end-start-radius: 4px; align-self: flex-start; }
.msg--me { background: var(--blue); color: #fff; border-end-end-radius: 4px; align-self: flex-end; }
.chat-form { display: flex; gap: 8px; }

/* ==========================================================================
   IMPACT — tableau de bord
   ========================================================================== */
.dash-sec { padding-top: 32px; }
.dash-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; box-shadow: var(--shadow-1); }
.dash-filters { display: flex; gap: 14px; flex-wrap: wrap; }
.dash-filters .field { margin: 0; min-width: 200px; }
.dash-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0; }
.dash-kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.dash-kpi .kpi-l { order: -1; }
.delta { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-xs); font-weight: 700; padding: 3px 8px; border-radius: 99px; align-self: flex-start; }
.delta.up { background: var(--success-bg); color: var(--success); } .delta.down { background: var(--danger-bg); color: var(--danger); }
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dash-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; min-width: 0; }
.dash-card.span-2 { grid-column: span 2; }
.dash-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.dash-split .map-box { height: 420px; border-radius: var(--r-md); overflow: hidden; }
.dash-split .table-wrap { max-height: 420px; overflow-y: auto; }

/* ==========================================================================
   BOUTIQUE
   ========================================================================== */
.shop-hero-art { position: relative; width: 320px; height: 260px; }
.sha { position: absolute; width: 170px; height: 170px; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-2); background: #fff; }
.sha svg { width: 100%; height: 100%; }
.sha-0 { top: 0; inset-inline-start: 0; transform: rotate(-8deg); } .sha-1 { top: 40px; inset-inline-end: 0; transform: rotate(6deg); } .sha-2 { bottom: 0; inset-inline-start: 70px; transform: rotate(-2deg); }
.ateliers-sec { background: var(--ivory); }
.ateliers { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ateliers li { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.ateliers li span:last-child { font-size: var(--fs-sm); color: var(--muted); }
.shop-bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.shop-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.shop-tools .search-input { min-width: 240px; }
.product-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.product { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.pr-art { border: 0; padding: 0; background: none; aspect-ratio: 1; display: block; width: 100%; overflow: hidden; }
.pr-art svg { width: 100%; height: 100%; transition: transform .5s var(--ease); }
.product:hover .pr-art svg { transform: scale(1.06); }
.pr-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pr-atelier { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
html[dir="rtl"] .pr-atelier { letter-spacing: 0; }
.pr-body h3 { font-size: var(--fs-md); margin: 0; }
.pr-name { border: 0; background: none; padding: 0; text-align: start; font: inherit; font-weight: 700; color: var(--ink); }
.pr-name:hover { color: var(--blue); text-decoration: underline; }
.pr-meta { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 10px; }
.pr-price { font-family: var(--font-display); font-weight: 800; color: var(--blue); font-size: var(--fs-lg); }
.pr-stock { font-size: var(--fs-xs); color: var(--success); font-weight: 700; } .pr-stock.low { color: var(--yellow-ink); }
.product .btn { margin-top: auto; }
.pm { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pm-art { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1; }
.pm-art svg { width: 100%; height: 100%; }
.pm-body { display: flex; flex-direction: column; gap: 12px; }
.pm-price { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--blue); margin: 0; }
.pm-impact { display: flex; gap: 12px; padding: 16px; background: var(--yellow-100); border: 0; }
.pm-impact > .ico { color: var(--yellow-ink); width: 28px; height: 28px; }
.pm-impact p { margin: 4px 0 0; font-size: var(--fs-sm); }
.pm-buy { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; gap: 8px; }
.qty output { min-width: 28px; text-align: center; font-weight: 800; }
.qty .icon-btn { width: 36px; height: 36px; }
.cart-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cart-thumb { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; } .cart-thumb svg { width: 100%; height: 100%; }
.cart-info { display: flex; flex-direction: column; gap: 4px; } .cart-info > span { color: var(--blue); font-weight: 700; font-size: var(--fs-sm); }
.cart-impact { display: flex; gap: 12px; background: var(--yellow-100); border-radius: 16px; padding: 14px 16px; font-size: var(--fs-sm); }
.cart-impact .ico { color: var(--yellow-ink); } .cart-impact p { margin: 0; }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: var(--fs-lg); }
.checkout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.co-side { position: sticky; top: calc(var(--header-h) + 16px); }
.co-lines { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; font-size: var(--fs-sm); }
.co-lines li, .co-row { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.co-total { border-top: 1px solid var(--line); padding-top: 12px; font-size: var(--fs-lg); }
.co-mode { margin-top: 16px; }

/* ==========================================================================
   ACTUALITÉS / ARTICLE
   ========================================================================== */
.news-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.news-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.news-card--lead { grid-column: span 2; grid-row: span 2; background: var(--night); border: 0; }
.news-card--lead .nc-title { color: #fff; font-size: var(--fs-2xl); } .news-card--lead p { color: #C9D8EE; } .news-card--lead .muted { color: #B9CDE8; }
.news-card--lead .visual { border-radius: 0; margin: -24px -24px 6px; }
.news-card--event { border-top: 5px solid var(--yellow); }
.nc-link { display: flex; flex-direction: column; gap: 10px; padding: 24px; text-decoration: none; color: var(--ink); flex: 1; }
.nc-link:hover .nc-title { text-decoration: underline; }
.nc-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.nc-title { font-size: var(--fs-lg); line-height: 1.25; }
.nc-meta { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-sm); color: var(--blue); font-weight: 700; margin-top: auto; }
.news-card--lead .nc-meta { color: var(--yellow); }
.news-card > .btn { margin: 0 24px 22px; align-self: flex-start; }
.video-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.video-tile { border: 0; padding: 0; background: none; color: #fff; text-align: start; display: flex; flex-direction: column; gap: 12px; width: 100%; position: relative; }
.video-tile .visual { aspect-ratio: 16 / 9; }
.play { position: absolute; top: 28%; inset-inline-start: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .25s; }
html[dir="rtl"] .play { transform: translate(50%, -50%); }
.video-tile:hover .play { transform: translate(-50%, -50%) scale(1.12); }
.player-screen { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.player-screen .visual { aspect-ratio: 16 / 9; border-radius: 0; }
.captions { position: absolute; bottom: 56px; inset-inline: 10%; text-align: center; background: rgba(0, 0, 0, .78); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: var(--fs-sm); margin: 0; }
.player-bar { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.player-bar .pbar { flex: 1; margin: 0; }
.read-progress { position: fixed; top: 0; inset-inline: 0; height: 4px; z-index: 70; background: transparent; }
.read-progress span { display: block; height: 100%; width: 0; background: var(--yellow); }
.narrow { max-width: 820px; }
.article-head { background: linear-gradient(180deg, var(--blue-50), #fff); padding-block: 48px 32px; }
.article-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.article-tags a.badge { text-decoration: none; }
.article-head h1 { font-size: var(--fs-3xl); margin: 18px 0; }
.article-lead { font-size: var(--fs-xl); color: var(--ink-2); line-height: 1.5; }
.article-meta { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: var(--fs-sm); flex-wrap: wrap; }
.article-body { padding-block: 24px 64px; font-size: 1.15rem; line-height: 1.8; }
.article-body .visual { margin-bottom: 32px; aspect-ratio: 16 / 8; }
.article-body h2 { margin-top: 36px; }
.dropcap::first-letter { font-family: var(--font-display); float: inline-start; font-size: 4.2em; line-height: .85; padding-inline-end: 10px; color: var(--blue); font-weight: 800; }
html[dir="rtl"] .dropcap::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; font-weight: inherit; }
.pull { margin: 40px 0; padding: 28px 32px; border-inline-start: 6px solid var(--yellow); background: var(--ivory); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
html[dir="rtl"] .pull { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.pull .ico { width: 32px; height: 32px; color: var(--yellow); }
.pull p { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.35; font-weight: 600; margin: 10px 0; color: var(--ink); }
html[dir="rtl"] .pull p { font-family: var(--font-ar-display); }
.pull cite { font-size: var(--fs-sm); color: var(--muted); font-style: normal; }
.event-box { background: var(--yellow-100); border-radius: var(--r-lg); padding: 20px 24px; margin-bottom: 28px; }
.event-box .facts > div { background: #fff; }
.article-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 40px; }

/* ==========================================================================
   RESSOURCES
   ========================================================================== */
.res-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.res-filters { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 18px; }
.res-filters fieldset { border: 0; padding: 0; margin: 0; } .res-filters legend { font-weight: 700; margin-bottom: 6px; }
.res-filters .check span { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-sm); }
.res-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.res-item { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.res-item:hover { border-color: var(--sky-2); box-shadow: var(--shadow-1); }
.res-ic { width: 56px; height: 68px; border-radius: 10px 18px 10px 10px; display: grid; place-items: center; background: var(--blue-100); color: var(--blue); }
.res-ic--video { background: var(--night); color: var(--yellow); border-radius: 14px; }
.res-ic--guide, .res-ic--accessibilite { background: var(--yellow-100); color: var(--yellow-ink); }
.res-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.res-title { font-size: var(--fs-md); line-height: 1.35; }
.res-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.res-act { display: flex; gap: 8px; align-items: center; }
.doc-preview { display: grid; grid-template-columns: 260px 1fr; gap: 28px; }
.doc-page { aspect-ratio: 1 / 1.414; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); border-radius: 6px; padding: 22px 18px; display: flex; flex-direction: column; gap: 9px; }
.doc-page b { font-family: var(--font-display); color: var(--blue); font-size: 13px; line-height: 1.3; margin: 6px 0; }
.doc-page i { display: block; height: 6px; border-radius: 3px; background: var(--line); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.path-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.path-tabs a { display: flex; gap: 12px; align-items: center; padding: 18px 20px; border-radius: var(--r-lg); border: 1.5px solid var(--line-2); text-decoration: none; color: var(--ink); font-weight: 700; transition: all .2s; }
.path-tabs a:hover { border-color: var(--blue); }
.path-tabs a[aria-current="page"] { background: var(--night); color: #fff; border-color: var(--night); }
.path-tabs a[aria-current="page"] .ico { color: var(--yellow); }
.contact-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.contact-side { display: grid; gap: 16px; }
.channels { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.channels li { display: flex; gap: 12px; } .channels li > span { display: flex; flex-direction: column; } .channels .ico { color: var(--blue); margin-top: 3px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 14px 4px; font-weight: 700; border-radius: 8px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform .3s; flex: none; }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq details p { padding: 0 4px 14px; color: var(--ink-2); margin: 0; }

/* ==========================================================================
   DESIGN SYSTEM
   ========================================================================== */
.swatches { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.swatch { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; }
.swatch > *:not(.sw-chip) { padding-inline: 14px; }
.sw-chip { height: 92px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.swatch code { font-size: var(--fs-xs); color: var(--muted); }
.sw-r { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.type-specimen { display: grid; gap: 14px; }
.ts-display { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; line-height: 1; margin: 0; letter-spacing: -.03em; }
.ts-h2 { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; margin: 0; }
.ts-h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin: 0; }
.ts-body { font-size: 1.0625rem; margin: 0; }
.ts-ar { font-family: var(--font-ar-display); font-size: 1.8rem; font-weight: 600; margin: 0; }
.ts-ar-body { font-family: var(--font-ar-body); font-size: 1.1rem; margin: 0; }
.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ds-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.ds-tokens { display: flex; gap: 16px; flex-wrap: wrap; }
.ds-tokens span { width: 90px; height: 90px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.ds-logo { margin-top: 20px; }
.ds-arc { position: relative; aspect-ratio: 1; max-width: 360px; margin-inline: auto; }
.ds-arc-svg { position: absolute; inset: 0; width: 100%; } .ds-arc-2 { transform: scale(.66) rotate(150deg); }
.icon-grid { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.icon-grid li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border: 1px solid var(--line); border-radius: 12px; font-size: 11px; color: var(--muted); text-align: center; word-break: break-all; }
.icon-grid .ico { width: 24px; height: 24px; color: var(--blue); }
.palette-hint { padding: 10px 22px 16px; margin: 0; font-size: var(--fs-xs); color: var(--muted); display: flex; gap: 6px; align-items: center; }
.palette-empty { padding: 20px; color: var(--muted); }

/* ==========================================================================
   RESPONSIVE — mobile repensé, pas seulement réduit
   ========================================================================== */
@media (max-width: 1100px) {
  .filters { grid-template-columns: 1fr 1fr 1fr; }
  .filters .filt-q { grid-column: 1 / -1; }
  .ateliers { grid-template-columns: repeat(3, 1fr); }
  .dom-row { grid-template-columns: 56px 1fr 1fr 32px; } .dr-tags { display: none; }
  .mvo { grid-template-columns: 1fr 1fr; } .mvo-mission { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .hero-grid, .mission-grid, .map-grid, .impact-grid, .mag, .shop-grid, .two-col, .schema-grid, .login-grid, .checkout, .contact-grid, .res-layout, .app-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-art { max-width: 400px; margin-top: 10px; }
  .sat { font-size: 12px; padding: 6px 12px 6px 6px; } .sat-ic { width: 30px; height: 30px; }
  .hero-art { margin-bottom: 96px; }
  .slot-card { inset-inline: 0; bottom: -92px; margin-inline: auto; width: fit-content; max-width: 100%; }
  .ph-arc-2 { display: none; } .ph-arc-1 { opacity: .5; }
  .mission-copy { position: static; }
  .dom-explorer { grid-template-columns: 1fr; }
  .dom-tabs { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .dom-tab { flex: none; scroll-snap-align: start; background: #fff; border-color: var(--line); }
  .dom-tab span span { display: none; }
  .map-box { height: 380px; }
  .kpis--4, .dash-kpis { grid-template-columns: 1fr 1fr; }
  .rings { grid-template-columns: 1fr 1fr; }
  .espace-grid { grid-template-columns: minmax(0, 1fr); }
  .es-side, .es-side nav, .es-main { min-width: 0; }
  .es-side { position: static; flex-direction: row; flex-wrap: wrap; padding: 12px; border-radius: var(--r-lg); align-items: center; }
  .es-side nav { width: 100%; order: 3; }
  .es-user { border: 0; padding: 0; flex: 1; }
  .es-nav { display: flex; overflow-x: auto; gap: 6px; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .es-nav li { flex: none; scroll-snap-align: start; }
  .es-nav a { white-space: nowrap; background: rgba(255, 255, 255, .06); }
  .centres-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .centres-layout[data-view="list"] .centre-map { display: none; }
  .centres-layout[data-view="map"] .centre-list { display: none; }
  .centres-layout[data-view="map"] .centre-map { height: 70vh; position: relative; top: 0; }
  .view-toggle { display: inline-flex; }
  .centre-list { overflow: visible; padding: 0; }
  .app-side { position: static; }
  .res-filters, .co-side, .dash-bar { position: static; }
  .news-grid, .video-row { grid-template-columns: 1fr 1fr; }
  .news-card--lead { grid-column: 1 / -1; grid-row: auto; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li::after { display: none; }
  .dd-progs { grid-template-columns: 1fr; } .dd-prog--lead { grid-row: auto; }
  .dd-key { grid-template-columns: 1fr 1fr; }
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-aside { display: flex; justify-content: center; }
  .page-hero-icon { display: none; }
  .collab, .other-apps { grid-template-columns: 1fr 1fr; }
  .shop-row { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; } .dash-card.span-2 { grid-column: auto; } .dash-split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .values { flex-direction: column; height: auto; }
  .value-name, .value.is-open .value-name { writing-mode: horizontal-tb; transform: none; font-size: 1.3rem; }
  .value-btn { flex-direction: row; align-items: center; padding: 16px 18px; }
  .value.is-open .value-name { font-size: 1.5rem; }
  .journey-arc { display: none; }
  .journey-steps { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .journey-steps li { margin-top: 0 !important; }
  .js-ic { width: 52px; height: 52px; }
  .journey-panel { flex-direction: column; padding: 22px; }
  .app-grid, .ateliers, .collab, .other-apps, .es-cards, .es-centre, .path-tabs, .ds-grid, .access-grid { grid-template-columns: 1fr; }
  .app-tile { grid-template-columns: 1fr; } .app-phone { display: none; }
  .help-grid { grid-template-columns: 1fr; }
  .mvo { grid-template-columns: 1fr; }
  .dom-panel { grid-template-columns: 1fr; } .dp-art { height: 140px; }
  .dom-row { grid-template-columns: 48px 1fr 28px; gap: 14px; padding: 20px 6px; } .dr-short { display: none; } .dr-ic { width: 48px; height: 48px; }
  .tl-panel { grid-template-columns: 1fr; gap: 10px; padding: 22px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .news-grid, .video-row { grid-template-columns: 1fr; }
  .my-trainings li { grid-template-columns: 1fr auto; } .my-trainings .pbar { grid-column: 1 / -1; order: 3; }
  .pm, .doc-preview { grid-template-columns: 1fr; }
  .doc-page { max-width: 220px; }
  .filters, .filters--ga, .filters--tr { grid-template-columns: 1fr 1fr; }
  .filters .filt-q, .filters--ga .search-input, .filters--tr .search-input { grid-column: 1 / -1; }
  .res-item { grid-template-columns: auto 1fr; } .res-act { grid-column: 1 / -1; }
  .score { width: 56px; height: 56px; padding-top: 12px; font-size: 1.15rem; border-width: 4px; }
  .rdv-act { width: 100%; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .quick-grid { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
  .modal-head, .modal-body { padding-inline: 18px; }
  .flow { grid-template-columns: 1fr; }
  .filter-row .search-input, .shop-tools, .shop-tools .search-input { min-width: 0; width: 100%; }
  .shop-hero-art { width: 260px; height: 220px; } .sha { width: 140px; height: 140px; }
  .sr-only-sm { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .orbit-schema .os-node span { display: none; }
}
@media (max-width: 420px) {
  .kpis--4, .dash-kpis, .kpis, .rings, .dd-key { grid-template-columns: 1fr; }
  .sat-l { display: none; } .sat { padding: 6px; }
  .filters, .filters--ga, .filters--tr { grid-template-columns: 1fr; }
}

/* Contraste élevé : renforcer les surfaces décoratives */
html[data-contrast="high"] .hero, html[data-contrast="high"] .page-hero { background: #fff; }
html[data-contrast="high"] .on-dark, html[data-contrast="high"] .help-sec, html[data-contrast="high"] .es-side { background: #000; }
html[data-contrast="high"] .badge--demo, html[data-contrast="high"] .notice--demo, html[data-contrast="high"] .demo-bar { background: #FFE08A; }