/* Polices hébergées localement : aucune requête vers Google à l'affichage de la page.
   Sous-ensembles latin et latin-ext uniquement (site en français).
   Régénéré depuis fonts.googleapis.com - voir CLAUDE.md. */

/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Couleurs approximées depuis l'identité visuelle fournie - à valider avec les valeurs officielles */
  --purple: #7900ff;
  --purple-2: #a500df; /* fin de dégradé, déjà utilisée sur les boutons primaires */
  --orange: #f6a51c;
  --lavender: #f1e5ff;
  --cream: #fff8ec;
  --ink: #2f2940;
  --border: #ded7e8;
  /* Accents secondaires ajoutés pour varier les icônes (dimensions, blocs "Passer à l'action") -
     purement des choix d'UI, pas des couleurs de marque officielles. */
  --pink: #e0538a;
  --indigo: #5a4bda;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--lavender), #ffffff 38%);
  position: relative;
}


h1, h2, h3, h4 {
  font-family: "Bricolage Grotesque", "Manrope", ui-sans-serif, system-ui, sans-serif;
}

p, li {
  text-align: justify;
  /* Sans césure, un texte justifié sur ~35 caractères par ligne (360px) creuse des rivières
     de blancs. La page déclare lang="fr", la coupure suit donc le français. */
  hyphens: auto;
}

.page-shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 72px; position: relative; }

/* Halos décoratifs doux, discrets, en fond du header - purement atmosphériques */
.page-shell::before, .page-shell::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: -1;
}
.page-shell::before { width: 320px; height: 320px; top: -80px; right: -60px; background: var(--purple); opacity: .12; }
.page-shell::after { width: 240px; height: 240px; top: 120px; left: -100px; background: var(--orange); opacity: .10; }
/* Sur mobile, le halo de droite (right: -60px) élargissait la page au-delà de l'écran
   (419px au lieu de 375px) : la page glissait horizontalement et le bouton Arkad sortait
   de l'écran. On garde les halos à l'intérieur de la page. */
@media (max-width: 720px) {
  /* Les halos sont purement décoratifs, mais deux couches de blur(70px) plein écran plus le
     filtre SVG du radar coûtent cher en mémoire graphique : sous pression (beaucoup d'onglets
     ouverts, appareil ancien), iOS tue le processus de rendu et l'onglet devient blanc. On les
     remplace par un dégradé radial, sans filtre, au rendu très proche. */
  .page-shell::before, .page-shell::after { filter: none; opacity: 1; }
  .page-shell::before {
    right: 0; width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(121,0,255,.16) 0%, rgba(121,0,255,0) 70%);
  }
  .page-shell::after {
    left: 0;
    background: radial-gradient(circle, rgba(246,165,28,.14) 0%, rgba(246,165,28,0) 70%);
  }
  .logo-link::before { filter: none; }
  .logo--entrehead { filter: none; }
  .radar-data { filter: none; }
}

.hero {
  display: flex; flex-direction: row; align-items: center; gap: 16px; text-align: left;
  padding: 12px 0; margin-bottom: 24px;
}
.hero-text { text-align: left; flex: 1; min-width: 0; }
.hero-text p { text-align: left; }
/* Logo à gauche, titre aligné à droite, sur le bord droit du bloc blanc */
.hero:has(> .logo-link) { display: grid; grid-template-columns: auto 1fr; }
.hero:has(> .logo-link) .logo-link { justify-self: start; }
.hero:has(> .logo-link) .hero-text,
.hero:has(> .logo-link) .hero-text p { text-align: right; }
.logo-link { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; line-height: 0; }
.logo-link::before { content: ""; position: absolute; left: 50%; margin-left: -55px; border-radius: 50%; filter: blur(24px); pointer-events: none; z-index: -1; }
.logo-link--entrehead::before { width: 110px; height: 110px; background: var(--purple); opacity: .14; }
.logo { object-fit: contain; position: relative; transition: transform .15s ease; }
.logo-link:hover .logo { transform: scale(1.04); }
.logo--entrehead { height: 50px; filter: drop-shadow(0 8px 14px rgba(50,20,80,.14)); }
@media (max-width: 720px) {
  .logo--entrehead { height: 32px; }
  .logo-link--entrehead::before { width: 66px; height: 66px; }
}

/* Logo Arkad flottant, façon bouton de chat : en haut à droite sur ordinateur, en bas à droite
   sur mobile (pour ne pas chevaucher le titre). Au survol / focus, une bulle "Développé par
   Arkad" sort à gauche ; sur la page d'accueil (--intro), elle s'affiche aussi quelques
   secondes à l'ouverture, pour être découverte sur mobile où il n'y a pas de survol. */
.arkad-float {
  position: fixed; right: 20px; top: 12px; z-index: 50;
  width: 72px; height: 72px; border-radius: 50%;
  background: white; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(50,20,80,.25);
  text-decoration: none; color: var(--ink);
  transition: box-shadow .15s ease;
}
.arkad-float:hover { box-shadow: 0 14px 34px rgba(50,20,80,.32); }
.arkad-float img { width: 66%; height: 66%; object-fit: contain; transition: transform .2s ease; }
.arkad-float:hover img { transform: scale(1.08) rotate(-6deg); }
.arkad-float-cta {
  position: absolute; right: calc(100% + 12px); top: 50%;
  width: max-content; max-width: min(250px, calc(100vw - 110px));
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  background: white; box-shadow: 0 10px 30px rgba(50,20,80,.22);
  font-size: .8rem; line-height: 1.35; text-align: left;
  opacity: 0; transform: translate(8px, -50%) scale(.96); transform-origin: right center;
  pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.arkad-float-cta strong { font-family: "Bricolage Grotesque", sans-serif; font-size: .9rem; color: var(--purple); }
.arkad-float-cta span { color: #6b6478; }
.arkad-float:hover .arkad-float-cta, .arkad-float:focus-visible .arkad-float-cta {
  opacity: 1; transform: translate(0, -50%) scale(1); pointer-events: auto; animation: none;
}
.arkad-float--intro .arkad-float-cta { animation: arkadCtaIntro 5s ease 1s both; }
@keyframes arkadCtaIntro {
  0% { opacity: 0; transform: translate(8px, -50%) scale(.96); }
  8%, 88% { opacity: 1; transform: translate(0, -50%) scale(1); }
  100% { opacity: 0; transform: translate(8px, -50%) scale(.96); }
}
@media (max-width: 720px) {
  .arkad-float { width: 56px; height: 56px; right: 14px; top: auto; bottom: 14px; }
  .arkad-float-cta { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .arkad-float-cta, .arkad-float img { transition: none; }
  .arkad-float--intro .arkad-float-cta { animation: none; }
}
.site-footer { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; font-size: .78rem; opacity: .55; }
.site-footer img { width: 14px; height: auto; transition: transform .2s ease; }
.site-footer a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--purple); text-decoration: underline; }
.site-footer a:hover img { transform: rotate(12deg); }
.eyebrow { margin: 0 0 4px; color: var(--purple); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
h1 { margin: 0; font-size: clamp(1.3rem, 3.2vw, 1.9rem); line-height: 1.15; }
.intro { margin: 10px 0 0; opacity: .8; }
.card { overflow-wrap: break-word; background: rgba(255,255,255,.97); border: 1px solid var(--border); border-radius: 28px; padding: 26px 24px; margin-top: 18px; box-shadow: 0 24px 60px rgba(50, 20, 80, .09); }
.warning h3 { margin: 20px 0 8px; font-size: 1.1rem; }
.warning ul:not(.dim-list) { margin: 0 0 12px; padding-left: 20px; }
.warning li { margin-bottom: 6px; line-height: 1.5; }
.contact-footer { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: .88rem; opacity: .8; text-align: center; }
.contact-footer a { color: var(--purple); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.footer-links .secondary { display: inline-block; padding: 8px 16px; font-size: .85rem; border-radius: 999px; text-decoration: none; text-align: center; }

.dim-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.dim-list li { display: flex; align-items: center; gap: 12px; text-align: left; hyphens: manual; }
.dim-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: white;
}
.dim-icon svg { width: 19px; height: 19px; }

.toggle-row { display: flex; gap: 10px; margin: 10px 0 8px; }
.toggle-btn { flex: 1; padding: 14px; border-radius: 16px; border: 1.5px solid var(--border); background: white; font-weight: 700; font-size: 1rem; cursor: pointer; transition: .15s ease; }
.toggle-btn[aria-pressed="true"] { border-color: var(--purple); background: var(--lavender); box-shadow: inset 0 0 0 1.5px var(--purple); color: var(--purple); }
#consent-error { margin: 0; }
#consent-continue { width: 100%; margin-top: 4px; }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.section-title h2 { margin: 0; min-width: 0; flex: 1 1 auto; text-align: center; overflow-wrap: break-word; hyphens: auto; }
.step { flex: 0 0 auto; display: inline-block; background: var(--lavender); color: var(--purple-2); border-radius: 999px; padding: 7px 16px; font-weight: 800; font-size: .82rem; }
#dimension-description { margin-top: 8px; }
.question { border: 0; border-top: 1px solid var(--border); padding: 22px 0; margin: 0; }
.question:first-child { border-top: 0; }
.question legend { display: flex; align-items: flex-start; gap: 10px; padding: 0; margin: 0 0 16px; }
.question-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; font-size: .72rem; font-weight: 800; margin-top: 2px; }
.question-text { font-size: 1.05rem; font-weight: 700; }
/* app.js donne le focus au titre à chaque étape, pour les lecteurs d'écran : avec :focus, le
   contour violet s'affichait donc pour tout le monde, à chaque question. :focus-visible ne le
   montre qu'à qui navigue au clavier. */
#dimension-title:focus-visible, #restitution h2:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; border-radius: 4px; }

/* Fil de progression des 5 dimensions, au-dessus de la carte de question */
.dim-stepper { position: relative; margin: 4px 0 22px; padding: 0 2px; }
.dim-stepper-track { position: absolute; left: 22px; right: 22px; top: 22px; height: 3px; background: var(--border); border-radius: 2px; }
.dim-stepper-track-fill { position: absolute; left: 0; top: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--purple), var(--orange)); border-radius: 2px; transition: width .3s ease; }
.dim-stepper-items { position: relative; display: flex; justify-content: space-between; }
.dim-stepper-item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 13%; border: 0; background: none; padding: 0; font: inherit; cursor: default; }
.dim-stepper-item.is-clickable { cursor: pointer; }
.dim-stepper-item.is-clickable:hover .dim-stepper-icon { box-shadow: 0 0 0 4px rgba(121,0,255,.12); }
.dim-stepper-item.is-clickable:hover .dim-stepper-label { color: var(--purple-2); }
.dim-stepper-icon { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lavender); color: #c3b6dd; transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
.dim-stepper-icon svg { width: 19px; height: 19px; }
.dim-stepper-item.is-done .dim-stepper-icon, .dim-stepper-item.is-current .dim-stepper-icon, .dim-stepper-item.is-reachable .dim-stepper-icon { color: white; }
.dim-stepper-item.is-current .dim-stepper-icon { box-shadow: 0 0 0 5px rgba(121,0,255,.15); }
.dim-stepper-check { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); display: none; align-items: center; justify-content: center; border: 2px solid var(--cream); }
.dim-stepper-check svg { width: 9px; height: 9px; }
.dim-stepper-item.is-done .dim-stepper-check { display: flex; }
.dim-stepper-label { font-size: .68rem; font-weight: 700; color: #8b7fa3; text-align: center; line-height: 1.25; }
.dim-stepper-item.is-current .dim-stepper-label { color: var(--purple-2); font-weight: 800; }
@media (max-width: 720px) {
  .dim-stepper-track { left: 10px; right: 10px; top: 21px; }
  /* Le libellé étant masqué, la pastille de 20px était toute la cible tactile : on garde la
     pastille visible mais on rend l'ensemble du pas cliquable sur 44px de haut. */
  .dim-stepper-item { min-height: 44px; justify-content: center; }
  .dim-stepper-icon { width: 20px; height: 20px; }
  .dim-stepper-icon svg, .dim-stepper-check { display: none; }
  .dim-stepper-item.is-current .dim-stepper-icon { box-shadow: 0 0 0 4px rgba(121,0,255,.15); }
  .dim-stepper-label { display: none; }
}

/* Échelle de réponse à noeuds connectés */
.options { display: flex; gap: 6px; }
.option { position: relative; flex: 1; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option label {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 2px; border-radius: 12px; cursor: pointer; background: transparent;
  font-size: .72rem; font-weight: 600; color: #8b7fa3; text-align: center; transition: background .15s ease;
}
.option-dot {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: white; border: 2px solid var(--border); transition: .15s ease;
}
.option-check { width: 16px; height: 16px; display: none; }
.option.filled .option-dot { background: rgba(121,0,255,.08); border-color: rgba(121,0,255,.4); }
.option input:checked + label .option-dot {
  background: linear-gradient(135deg, var(--purple-2), var(--orange));
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(165,0,223,.35);
}
.option input:checked + label .option-check { display: block; }
.option input:checked + label .option-text { color: var(--purple-2); font-weight: 800; }

/* Barre de progression de la dimension en cours */
.form-progress { margin: 18px 0 4px; }
.form-progress-labels { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 700; color: #8b7fa3; margin-bottom: 6px; }
.form-progress-track { position: relative; height: 6px; border-radius: 4px; background: var(--lavender); overflow: hidden; }
.form-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--purple), var(--orange)); transition: width .3s ease; }

.primary { border: 0; border-radius: 16px; background: linear-gradient(100deg, var(--purple), var(--purple-2)); color: white; padding: 16px 18px; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 14px 30px rgba(121,0,255,.28); }
.primary:disabled { background: var(--border); color: var(--ink); opacity: .55; cursor: not-allowed; box-shadow: none; }
.secondary { border: 1.5px solid var(--border); border-radius: 16px; background: white; color: var(--ink); padding: 16px 18px; font-size: 1rem; font-weight: 700; cursor: pointer; }
.nav-buttons { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.nav-buttons .primary { flex: 1; }
.nav-buttons .primary, .nav-buttons .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.status { min-height: 24px; font-weight: 700; }
.status.error { color: #a32626; }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.data-table th, .data-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); font-weight: 400; white-space: nowrap; }
.data-table thead th { font-weight: 800; }

.score-list { margin: 4px 0 0; }
.score-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.score-label { width: 42%; min-width: 120px; font-size: .82rem; font-weight: 700; color: #463f57; flex: 0 0 auto; }
.score-track { flex: 1; height: 10px; border-radius: 999px; background: var(--lavender); overflow: hidden; }
.score-fill { height: 100%; border-radius: 999px; }
.score-fill.c1 { background: var(--purple); }
.score-fill.c2 { background: var(--purple-2); }
.score-fill.c3 { background: var(--orange); }
.score-fill.c4 { background: var(--pink); }
.score-fill.c5 { background: var(--indigo); }
.score-val { width: 52px; text-align: right; font-size: .82rem; font-weight: 800; color: var(--ink); flex: 0 0 auto; }
.score-total { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.score-total strong:last-child { font-size: 1.15rem; color: var(--purple); }

.radar-chart { display: flex; justify-content: center; margin: 16px 0 8px; }
.radar-chart svg { width: 100%; max-width: 640px; height: auto; }
/* Radar façon ECharts (voir public/radar.js) : anneaux de niveau adoucis, lignes blanches fines */
.radar-grid { fill: none; stroke: #fff; stroke-width: 1.5; }
.radar-axis { stroke: #fff; stroke-width: 1.25; }
.radar-data { stroke: var(--purple); stroke-width: 2.5; stroke-linejoin: round; }
.radar-dot { stroke: white; stroke-width: 2.5; }
.radar-label { font-size: 12px; font-family: "Manrope", sans-serif; fill: var(--ink); font-weight: 700; }
.radar-label-score { fill: var(--purple); font-weight: 800; font-size: 12.5px; }
/* Version compacte (petits écrans, voir radar.js) : le SVG est réduit à ~300px de large,
   libellés courts et agrandis pour rester lisibles */
.radar-compact .radar-label, .radar-compact .radar-label-score { font-size: 23px; }
/* La version compacte est dessinée pour ~300-420px : au-delà, ses libellés deviendraient
   énormes (le viewBox est deux fois plus petit que celui de la version large). */
.radar-chart svg.radar-compact { max-width: 420px; }

/* La forme des réponses "pousse" depuis le centre, comme l'animation d'entrée d'ECharts */
.radar-animate .radar-series { animation: radarGrow .7s cubic-bezier(.2, .8, .3, 1.1) both; }
@keyframes radarGrow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .radar-animate .radar-series { animation: none; }
}

/* Bloc d'inscription à la journée du 2 octobre (HelloAsso), affiché après la synthèse :
   pastille "calendrier" à gauche, texte et bouton à droite (empilés sur mobile). */
.event-cta {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 22px;
  margin-top: 24px; padding: 26px 26px; border-radius: 26px;
  background-color: #2b0b52;
  background-image:
    radial-gradient(120% 140% at 8% 0%, rgba(121,0,255,.95), transparent 55%),
    radial-gradient(110% 130% at 100% 100%, rgba(246,165,28,.85), transparent 52%),
    linear-gradient(120deg, #3a0f6b, #2b0b52);
  color: white;
  box-shadow: 0 24px 50px rgba(43, 11, 82, .32), inset 0 0 0 1px rgba(255,255,255,.14);
}
/* Fine trame de points, pour donner de la matière au fond */
.event-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 16px 16px; opacity: .5;
  mask-image: linear-gradient(105deg, #000 25%, transparent 75%);
}
.event-cta > * { position: relative; }

/* Pastille façon page de calendrier */
.event-cta-date {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 92px; padding: 14px 0 12px; border-radius: 20px;
  background: rgba(255,255,255,.96); color: var(--purple);
  box-shadow: 0 14px 30px rgba(20,4,40,.35);
}
.event-cta-day { font-family: "Bricolage Grotesque", sans-serif; font-size: 2.5rem; font-weight: 800; line-height: .9; }
.event-cta-month { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.event-cta-year { font-size: .7rem; font-weight: 700; color: #6b6478; }

.event-cta-body { min-width: 0; }
.event-cta-eyebrow {
  margin: 0 0 6px; text-align: left; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.event-cta h3 { margin: 0 0 8px; font-size: 1.45rem; line-height: 1.15; }
.event-cta-text { margin: 0; text-align: left; font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.88); }
.event-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 15px 26px; border-radius: 16px; background: white; color: var(--purple);
  font-weight: 800; text-decoration: none;
  box-shadow: 0 14px 28px rgba(20,4,40,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.event-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(20,4,40,.42); }
.event-cta-btn .btn-icon { transition: transform .2s ease; }
.event-cta-btn:hover .btn-icon { transform: translateX(4px); }
.event-cta-note { margin: 10px 0 0; text-align: left; font-size: .72rem; color: rgba(255,255,255,.6); }

@media (max-width: 620px) {
  .event-cta { flex-direction: column; text-align: center; gap: 16px; padding: 24px 20px; }
  .event-cta-text, .event-cta-note { text-align: center; }
  /* La pastille donne déjà la date : on évite de la répéter trois fois sur mobile */
  .event-cta-eyebrow { display: none; }
  .event-cta-date { flex-direction: row; align-items: baseline; gap: 6px; width: auto; padding: 8px 18px; border-radius: 999px; }
  .event-cta-day { font-size: 1.5rem; }
  .event-cta-month, .event-cta-year { margin-top: 0; }
  .event-cta h3 { font-size: 1.25rem; }
  .event-cta-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .event-cta-btn, .event-cta-btn .btn-icon { transition: none; }
}

/* Ligne de crédits imprimée à la fin de la synthèse (masquée à l'écran) */
.print-credits { display: none; }

.final-note {
  margin: 26px 0 0; padding: 16px 18px; border-radius: 16px;
  background: var(--cream); border-left: 3px solid var(--orange);
  font-size: .92rem; line-height: 1.55; text-align: left;
}

.synthese-explanation { margin-top: 18px; }
.synthese-explanation p { margin: 0 0 12px; line-height: 1.55; }

.action-section { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; }
.action-section .intro { opacity: .75; font-size: .92rem; }
.action-block { background: white; border: 1px solid var(--border); border-radius: 20px; padding: 18px; margin-top: 14px; box-shadow: 0 16px 40px rgba(50, 20, 80, .06); }
.action-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.action-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; }
.action-icon svg { width: 17px; height: 17px; }
.action-block h4 { margin: 0; font-size: .98rem; }
.action-block p { margin: 0 0 12px; font-size: .9rem; opacity: .85; }
.action-block ul { margin: 0; padding-left: 18px; font-size: .9rem; }
.action-block label { display: block; font-weight: 700; font-size: .88rem; margin-top: 10px; }
.action-block input, .action-block textarea, .action-block select { width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); font: inherit; font-weight: 400; color: var(--ink); background: white; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; }
.action-block textarea { resize: vertical; }
.action-block textarea.auto-grow { resize: none; overflow-y: auto; line-height: 1.45; min-height: 88px; }
.print-value { display: none; }
.action-block select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f2940' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
.action-block input:focus, .action-block textarea:focus, .action-block select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(121, 0, 255, .15);
}

@media (max-width: 720px) {
  .options { flex-direction: column; gap: 8px; }
  .option label {
    flex-direction: row; justify-content: flex-start; text-align: left;
    padding: 12px 16px; border: 2px solid var(--border); border-radius: 14px; background: white; gap: 12px;
  }
  .option-dot { width: 22px; height: 22px; }
  .option.filled .option-dot { background: rgba(121,0,255,.08); border-color: rgba(121,0,255,.4); }
  .option input:checked + label { background: linear-gradient(135deg, var(--purple-2), var(--orange)); border-color: transparent; }
  .option input:checked + label .option-dot { background: rgba(255,255,255,.25); box-shadow: none; }
  .option input:checked + label .option-text { color: white; }
  /* Cibles tactiles : 44px minimum sur les liens du bas de page. */
  .footer-links .secondary { padding: 13px 18px; }
  .contact-sep { display: none; }
  .contact-footer .contact-email { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .score-row { flex-wrap: wrap; }
  .score-label { width: 100%; min-width: 0; margin-bottom: 4px; }

  /* Champs "Action" : 16px minimum, sinon Safari iOS zoome à chaque tap dans le champ et la
     page reste zoomée ensuite (le `font: inherit` les mettait à 14px via le <label>). */
  .action-block input, .action-block textarea, .action-block select { font-size: 16px; }

  /* WebKit calcule pour les champs date une largeur intrinsèque, sur "jj/mm/aaaa" plus l'icône
     du calendrier, et ignore width: 100% : à 16px le champ débordait de la carte vers la
     droite sur iPhone. appearance: none le fait rentrer dans le flux normal. */
  .action-block input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
  }

  /* "Envoyer mes réponses" : moins massif, et surtout sur une seule ligne. À côté d'un
     "Précédent" en toutes lettres il ne restait que 135px de large, donc un libellé sur deux
     lignes et un bouton de 79px de haut. Le chevron suffit pour revenir en arrière. */
  .nav-buttons .primary, .nav-buttons .secondary { padding: 14px 12px; font-size: .9rem; }
  .nav-buttons .secondary { flex: 0 0 auto; }
  .nav-buttons .secondary span { display: none; }

  /* Le titre de dimension passait sous le badge "1 / 5" : à 360px il ne lui reste qu'environ
     160px, et "professionnelle" (dimension 1) comme "psychologique" (dimension 5) sont plus
     larges que ça à la taille h2 par défaut du navigateur. */
  .section-title h2 { font-size: 1.15rem; text-align: left; }
  .step { padding: 6px 12px; font-size: .78rem; }

  /* Le bouton Arkad flottant (56px, à 14px du bord) recouvrait le coin droit de
     "Envoyer mes réponses" : un tap y ouvrait arkad-consulting.com au lieu d'envoyer les
     30 réponses. On le retire pendant le questionnaire et on réserve sa place ailleurs. */
  .page-shell { padding-bottom: 96px; }
  .arkad-float { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* La bulle de présentation ne doit jamais intercepter un tap : sur écran tactile, un tap
     près du bouton déclenche le :hover et la bulle de 250px restait posée par-dessus le bas
     de page. Le bouton lui-même reste entièrement cliquable. */
  .arkad-float-cta { pointer-events: none !important; }
}

/* Impression de la synthèse (bouton "Imprimer ma synthèse", window.print()) : le PDF garde
   l'en-tête, les scores, le radar, le texte explicatif et "Passer à l'action". Les champs
   s'impriment comme des lignes ; vides (data-empty, posé par app.js), ils restent à remplir à la main. */
.print-block { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 20px; text-align: center; }
.print-block p { text-align: center; opacity: .8; font-size: .92rem; }
.print-block .print-hint { margin: 14px 0 0; font-size: .82rem; opacity: .65; }

@media print {
  @page { margin: 14mm; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page-shell { width: 100%; padding: 0; }
  .page-shell::before, .page-shell::after,
  .dim-stepper, #consent-screen, form, #demo-notice, .print-block,
  .site-footer, .arkad-float, .event-cta { display: none !important; }
  .card { box-shadow: none; border: 0; padding: 0; margin-top: 8px; }
  .logo-link::before { display: none; }
  #restitution h3 { break-after: avoid; }
  /* Le rendu d'impression de WebKit sur iOS est fragile avec les filtres et les animations :
     on les neutralise pour la génération du PDF. Le filtre du radar est un attribut SVG, que
     cette règle CSS surcharge. */
  .radar-data { filter: none !important; }
  .radar-animate .radar-series { animation: none !important; }
  * { transition: none !important; }
  .radar-chart { break-inside: avoid; margin: 0 auto; }
  .radar-chart svg { max-width: 540px; margin: 0 auto; display: block; }
  .synthese-explanation { break-inside: avoid; }
  /* "Passer à l'action" commence toujours sur une nouvelle page, pour que le titre et
     l'introduction ne restent jamais seuls en bas de page, séparés des blocs. */
  .action-section { break-before: page; border-top: 0; padding-top: 0; margin-top: 0; }
  .action-section > h3 { break-after: avoid; }
  .action-block { box-shadow: none; break-inside: avoid; padding: 9px 13px; margin-top: 7px; }
  .action-block label { margin-top: 2px; }
  .action-block p { margin-bottom: 4px; }
  .action-section .intro { margin-bottom: 2px; }
  .action-block input::-webkit-calendar-picker-indicator { display: none; }
  .action-block input, .action-block select, .action-block textarea {
    border: 0; border-bottom: 1px solid #9b93aa; border-radius: 0;
    padding: 3px 0; min-height: 24px; background-image: none;
  }
  .action-block [data-empty] { color: transparent; }
  /* Champs "Action" : le texte est imprimé via .print-value (voir app.js), en entier */
  .action-block textarea.auto-grow { display: none; }
  .action-block .print-value {
    display: block; margin-top: 3px; padding: 3px 0; min-height: 24px;
    white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 600; line-height: 1.45;
    border-bottom: 1px solid #9b93aa;
  }
  /* Vide : trois lignes pour écrire à la main. Tracées avec des bordures (et non un fond),
     car certains navigateurs n'impriment pas les arrière-plans. */
  .action-block .print-value[data-empty] { position: relative; min-height: 62px; }
  .action-block .print-value[data-empty]::before,
  .action-block .print-value[data-empty]::after {
    content: ""; position: absolute; left: 0; right: 0; border-top: 1px solid #9b93aa;
  }
  .action-block .print-value[data-empty]::before { top: 22px; }
  .action-block .print-value[data-empty]::after { top: 42px; }
  .print-credits { display: block; margin-top: 6px; text-align: center; font-size: 8pt; color: #8b8397; }
  .print-credits img { width: 10px; height: auto; vertical-align: -1px; margin: 0 2px; }
  .final-note { break-inside: avoid; margin-top: 10px; padding: 8px 11px; font-size: .78rem; }
}

/* ---- Animations du formulaire ---------------------------------------------------------- */
/* Entrée d'une dimension : glisse dans le sens de la navigation, questions en cascade */
.step-enter-forward .section-title, .step-enter-forward #dimension-description { animation: slideInRight .45s cubic-bezier(.2, .8, .3, 1) both; }
.step-enter-back .section-title, .step-enter-back #dimension-description { animation: slideInLeft .45s cubic-bezier(.2, .8, .3, 1) both; }
.step-enter-forward .question, .step-enter-back .question {
  animation: questionIn .5s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(80ms + var(--i, 0) * 60ms);
}
@keyframes slideInRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes questionIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Réponse choisie : le point rebondit, les points précédents se remplissent en vague */
.option-dot { transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .15s ease; transition-delay: calc(var(--o, 0) * 35ms); }
/* Sur un écran tactile, :hover reste appliqué après le tap ("hover collant") : l'option
   touchée juste avant restait surlignée. Réservé aux appareils avec un vrai pointeur. */
@media (hover: hover) {
  .option label:hover { background: var(--lavender); }
  .option label:hover .option-dot { transform: scale(1.08); }
  #next-btn:hover { transform: translateY(-1px); }
}
.option label:active .option-dot { transform: scale(.92); }
.option input:checked + label .option-dot { animation: dotPop .4s cubic-bezier(.3, 1.6, .5, 1); }
.option input:checked + label .option-check { animation: checkIn .3s ease-out .08s both; }
@keyframes dotPop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes checkIn { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }

/* Question répondue : son numéro se colore */
.question-num { transition: background .3s ease, color .3s ease, transform .3s ease; }
.question.answered .question-num { background: var(--dim-color) !important; color: white !important; animation: numPop .35s ease-out; }
@keyframes numPop { 50% { transform: scale(1.25); } }

/* Dimension complète : reflet sur la barre, bouton "Suivant" qui invite à continuer */
.form-progress-fill.is-complete::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-100%); animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
#next-btn { transition: transform .15s ease, box-shadow .2s ease; }
#next-btn.is-ready { animation: readyPulse 1.8s ease-in-out infinite; }
#next-btn.is-ready .btn-icon { animation: nudge 1.8s ease-in-out infinite; }
@keyframes readyPulse { 0%, 100% { box-shadow: 0 14px 30px rgba(121,0,255,.28); } 50% { box-shadow: 0 14px 30px rgba(121,0,255,.28), 0 0 0 7px rgba(121,0,255,.14); } }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }

/* Étape en cours du fil de progression : halo qui respire */
.dim-stepper-item.is-current .dim-stepper-icon { animation: currentHalo 2.4s ease-in-out infinite; }
@keyframes currentHalo { 50% { box-shadow: 0 0 0 9px rgba(121,0,255,.08); } }

@media (prefers-reduced-motion: reduce) {
  .step-enter-forward *, .step-enter-back *, .option-dot, .option-check, .question-num,
  .form-progress-fill::after, #next-btn, #next-btn .btn-icon, .dim-stepper-icon {
    animation: none !important; transition: none !important;
  }
}