/* ==========================================================
   Doxa Formation — Test « Profil d'équipe »
   Grammaire graphique du fanzine : crème / noir / rouge / jaune / sarcelle
   Pour changer une couleur ou une police : modifier les variables ci-dessous.
   ========================================================== */

:root {
  --paper:  #F7F4E9;
  --ink:    #111111;
  --red:    #E8341C;
  --yellow: #F5C21B;
  --teal:   #0E8A6A;
  --grey:   #6b675d;
  --line:   #111111;

  --font-title: "Newsreader", "Times New Roman", Georgia, serif;
  --font-poster: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: 20px;
  --maxw: 1040px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
h1:focus, h2:focus { outline: none; }

/* ---------- Bandeau « contenu d'exemple » ---------- */
.ribbon-exemple {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  background: var(--red); color: #fff; text-align: center;
  font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 10px;
}

/* ---------- En-tête ---------- */
.masthead {
  max-width: var(--maxw); margin: 0 auto;
  padding: 18px var(--gutter) 0;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font: 400 22px/1 var(--font-poster); letter-spacing: .02em; }
.brand-bar { width: 34px; height: 9px; background: var(--red); display: block; }
.brand-sub {
  font: 600 10px/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Structure ---------- */
#app { max-width: var(--maxw); margin: 0 auto; padding: 22px var(--gutter) 56px; }
.screen { animation: enter .35s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.narrow { max-width: 620px; margin: 0 auto; }

/* ---------- Typo éditoriale ---------- */
.display {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(38px, 11vw, 66px);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 18px 0 16px;
  text-wrap: balance;
}
.display-m { font-size: clamp(32px, 8.6vw, 50px); }
.display-s { font-size: clamp(26px, 7vw, 36px); line-height: 1.02; }
.lead {
  font-family: var(--font-title); font-size: 21px; line-height: 1.3; margin: 0 0 18px;
  max-width: 30ch;
}
.lead-s { font-family: var(--font-title); font-size: 19px; line-height: 1.4; margin: 0 0 14px; }
.body-serif { font-family: var(--font-title); font-size: 17px; line-height: 1.5; margin: 18px 0 26px; max-width: 46ch; }
.rule-red { display: block; width: 34px; height: 3px; background: var(--red); margin: 0 0 4px; }

/* « LE JEU ———— » : étiquette encadrée + filet */
.tag-line { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; }
.tag {
  border: 1px solid var(--ink); padding: 5px 9px 4px;
  font: 700 10.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.tag-rule { flex: 1; height: 1px; background: var(--ink); }

/* Liste à puces rouges */
.dots { list-style: none; margin: 0; padding: 0; }
.dots li { position: relative; padding-left: 20px; margin: 0 0 9px; font-size: 13px; line-height: 1.35; }
.dots li::before {
  content: ""; position: absolute; left: 0; top: .36em; width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
}
.dots.dots-ink li::before { background: var(--ink); }
.dots.dots-yellow li::before { background: var(--yellow); box-shadow: 0 0 0 1px var(--ink); }

/* ---------- Boutons ---------- */
.cta-box, .btn { transition: background .15s, color .15s, transform .1s; }
.cta-box {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%;
  background: transparent; border: 1.5px solid var(--ink); padding: 16px 18px; text-align: left;
  font: 700 14px/1.25 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
}
.cta-box small { display: block; margin-top: 3px; font: 500 12px/1 var(--font-body); letter-spacing: .06em; opacity: .7; }
.cta-box .cta-arrow { font-size: 26px; line-height: 1; }
.cta-box:hover, .cta-box:focus-visible { background: var(--ink); color: var(--paper); }
.cta-box:active { transform: translateY(1px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1.5px solid var(--ink); background: transparent; padding: 15px 22px;
  font: 700 13px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover:not(:disabled), .btn-primary:focus-visible { background: var(--red); border-color: var(--red); }
.btn-ghost:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.btn-link {
  border: 0; padding: 10px 0; text-decoration: underline; text-underline-offset: 4px;
  letter-spacing: .04em; text-transform: none; font-weight: 600; font-size: 14px;
}
.btn-link:hover { color: var(--red); }

/* ---------- Collages N&B ---------- */
.collage { mix-blend-mode: multiply; }

/* ---------- ACCUEIL ---------- */
.home-grid { display: grid; gap: 22px; }
.home-visual { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.collage-hands { width: 100%; }
.quick-list { padding-bottom: 10px; }
.quick-title { margin: 0 0 10px; font: 400 15px/1.15 var(--font-poster); letter-spacing: .02em; text-transform: uppercase; }

/* ---------- QUESTIONS ---------- */
.screen-quiz { position: relative; }
.q-bleed { /* conteneur qui rogne le cercle au bord de l'écran : pas de défilement horizontal */
  position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
  overflow: hidden; pointer-events: none;
}
.q-circle { position: absolute; right: -36px; top: 20px; width: 110px; height: 110px; border-radius: 50%; } /* mobile : reste au-dessus du titre de la question */
.q-circle.is-red    { background: var(--red); }
.q-circle.is-yellow { background: var(--yellow); }
.q-wrap { max-width: 640px; margin: 0 auto; position: relative; }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.q-back {
  background: none; border: 0; padding: 8px 0; font: 600 13px/1 var(--font-body); letter-spacing: .04em;
  text-decoration: underline; text-underline-offset: 4px;
}
.q-back[disabled] { visibility: hidden; }
.q-count { font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.q-count b { font: 400 18px/1 var(--font-poster); letter-spacing: .02em; color: var(--red); margin-right: 2px; }

.progress { display: flex; gap: 4px; margin: 10px 0 0; }
.progress span { flex: 1; height: 5px; background: rgba(17,17,17,.14); transition: background .25s; }
.progress span.is-done { background: var(--ink); }
.progress span.is-current { background: var(--red); }

.q-num { display: block; font: 400 clamp(54px, 15vw, 84px)/.9 var(--font-poster); color: var(--red); margin: 26px 0 6px; }
.q-text {
  font-family: var(--font-title); font-weight: 700; font-size: clamp(25px, 6.6vw, 36px);
  line-height: 1.08; letter-spacing: -.02em; margin: 0 0 22px; text-wrap: balance;
}
.options { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.opt { display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-body {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1.5px solid var(--ink); background: #fbf9f1; padding: 14px 15px;
  transition: background .12s, transform .12s, box-shadow .12s;
}
.opt-letter { font: 400 24px/1 var(--font-poster); color: var(--red); min-width: 22px; padding-top: 1px; }
.opt-text { font-size: 16px; line-height: 1.4; }
.opt:hover .opt-body { background: #f8ecc0; }
.opt input:focus-visible + .opt-body { outline: 3px solid var(--red); outline-offset: 2px; }
.opt input:checked + .opt-body { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.opt input:checked + .opt-body .opt-letter { color: var(--ink); }
.q-actions { margin-top: 22px; display: flex; justify-content: flex-end; }

/* ---------- PROFIL ---------- */
.result-grid { display: grid; gap: 22px; }
.result-name { margin-top: 14px; }
.result-tagline { font-family: var(--font-title); font-style: italic; font-size: 22px; line-height: 1.25; margin: 0 0 16px; }
.result-visual { display: flex; justify-content: center; }
.result-visual img { max-height: 300px; max-width: 280px; width: auto; }
.result-portrait { font-family: var(--font-title); font-size: 18px; line-height: 1.5; margin: 16px 0 0; }

.sw { display: grid; gap: 22px; margin: 34px 0 0; }
.sw h3, .section-title {
  margin: 0 0 12px; font: 400 17px/1.1 var(--font-poster); letter-spacing: .03em; text-transform: uppercase;
}
.sw .dots li { font-size: 15px; }

.section { margin-top: 38px; }
.section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.section-head .tag-rule { flex: 1; }

/* Graphique des dimensions */
.chart { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.bar { display: grid; grid-template-columns: 38px 1fr auto; column-gap: 12px; row-gap: 5px; align-items: end; }
.bar-num { grid-row: 1 / 3; font: 400 32px/1 var(--font-poster); color: var(--red); align-self: center; }
.bar-label { font-weight: 600; font-size: 14px; line-height: 1.2; }
.bar-label em {
  font-style: normal; margin-left: 8px; background: var(--ink); color: var(--paper);
  font: 700 9.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px 2px; white-space: nowrap;
  vertical-align: 1px;
}
.bar-score { font: 400 26px/1 var(--font-poster); text-align: right; grid-row: 1 / 3; grid-column: 3; align-self: center; min-width: 40px; }
.bar-score small { font: 700 11px/1 var(--font-body); margin-left: 1px; }
.bar-track { grid-column: 2; height: 14px; border: 1.5px solid var(--ink); position: relative; background: rgba(255,255,255,.4); }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.bar-track::after { /* repère 50 % */
  content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1px; background: var(--ink); opacity: .35;
}
.bar.is-priority .bar-track { border-width: 2.5px; }
.chart-note { margin: 12px 0 0; font-size: 12px; color: var(--grey); }

/* Recommandation */
.reco { border: 1.5px solid var(--ink); padding: 22px 20px 20px; position: relative; background: rgba(255,255,255,.3); }
.reco::before { content: ""; position: absolute; right: 18px; top: -12px; width: 24px; height: 24px; background: var(--red); border-radius: 50%; }
.reco-dim { margin: 0 0 4px; font: 700 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.reco h3 { font-family: var(--font-title); font-weight: 700; font-size: 29px; line-height: 1.04; letter-spacing: -.02em; margin: 6px 0 12px; }
.reco p { margin: 0 0 14px; font-family: var(--font-title); font-size: 18px; line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.chips li { border: 1px solid var(--ink); padding: 5px 9px 4px; font: 700 10.5px/1.1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.first-step { background: var(--yellow); padding: 14px 16px; margin: 0; }
.first-step b { display: block; font: 400 14px/1 var(--font-poster); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.first-step span { font-size: 15px; line-height: 1.4; }

.result-cta { margin-top: 38px; display: grid; gap: 6px; justify-items: start; }
.result-cta .cta-box { background: var(--ink); color: var(--paper); }
.result-cta .cta-box:hover, .result-cta .cta-box:focus-visible { background: var(--red); border-color: var(--red); }
.result-cta p { margin: 0 0 8px; font-family: var(--font-title); font-size: 18px; line-height: 1.35; }

.sources { margin-top: 30px; font-size: 13px; color: var(--grey); }
.sources summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.sources ul { margin: 10px 0 0; padding-left: 18px; }
.sources li { margin-bottom: 4px; }

/* ---------- FORMULAIRE ---------- */
.form-profile { margin: 14px 0 0; font: 700 11px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.form-profile span { display: inline-block; background: var(--yellow); padding: 4px 8px 3px; margin-left: 4px; }
#lead-form { margin-top: 22px; display: grid; gap: 18px; }
.field { display: grid; gap: 4px; }
.field label:not(.check) { font: 700 10.5px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.field input[type=text], .field input[type=email], .field select {
  width: 100%; appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  padding: 8px 0 8px; font: 500 20px/1.2 var(--font-title); outline: none;
}
.field select {
  padding-right: 26px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.field input:focus, .field select:focus { background-color: rgba(245,194,27,.25); border-bottom-color: var(--red); }
.field.has-error input, .field.has-error select { border-bottom-color: var(--red); }
.field-error { margin: 0; min-height: 0; font-size: 13px; font-weight: 600; color: var(--red); }
.field-error:empty { display: none; }
.field-row { display: grid; gap: 18px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check-box { width: 22px; height: 22px; border: 2px solid var(--ink); display: block; position: relative; margin-top: 2px; background: rgba(255,255,255,.4); }
.check input:checked + .check-box { background: var(--ink); }
.check input:checked + .check-box::after {
  content: ""; position: absolute; left: 6px; top: 1px; width: 6px; height: 12px; border: solid var(--yellow); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.check input:focus-visible + .check-box { outline: 3px solid var(--red); outline-offset: 2px; }
.check-text { font-size: 13px; line-height: 1.45; }
.field-consent.has-error .check-box { border-color: var(--red); }

.form-error { border: 1.5px solid var(--red); background: rgba(232,52,28,.08); padding: 12px 14px; }
.form-error p { margin: 0; font-size: 14px; }
.form-error-alt { margin-top: 6px !important; }
.form-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
.form-actions .btn-primary { width: 100%; }

/* ---------- MERCI ---------- */
.thanks-grid { display: grid; gap: 14px; }
.contact-box { border: 1.5px solid var(--ink); padding: 18px 18px 16px; margin: 22px 0 18px; background: rgba(255,255,255,.3); }
.contact-title { margin: 0 0 14px; font: 400 clamp(26px, 7.4vw, 34px)/1.02 var(--font-poster); text-transform: uppercase; letter-spacing: .01em; }
.contact-phone { display: inline-block; font: 400 clamp(28px, 8.4vw, 38px)/1.1 var(--font-poster); color: var(--red); text-decoration: none; letter-spacing: .01em; }
.contact-phone:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-web { display: block; margin-top: 6px; font: 600 16px/1.2 var(--font-body); }
.thanks-visual { display: none; }
.test-note { margin: 10px 0 4px; padding: 8px 10px; background: var(--yellow); font-size: 13px; font-weight: 600; }

/* ---------- Pied de page ---------- */
.site-footer {
  max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter) 70px; border-top: 1px solid var(--ink);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px;
}
.site-footer a { font-weight: 600; }

/* ==========================================================
   ≥ 720 px : tablette / bureau
   ========================================================== */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  #app { padding-top: 34px; }
  .brand-name { font-size: 26px; }
  .home-grid { grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; min-height: 520px; }
  .home-visual { grid-template-columns: 1fr; gap: 20px; }
  .quick-list { max-width: 360px; }
  .lead { font-size: 24px; }
  .display { font-size: clamp(54px, 6.4vw, 78px); }
  .display-m { font-size: clamp(40px, 4.6vw, 56px); }

  .q-bleed { left: 0; right: 0; }
  .q-circle { width: 260px; height: 260px; right: 0; top: 10px; }
  .q-wrap { padding-top: 10px; }
  .q-text { font-size: 38px; }
  .options { gap: 12px; }

  .result-grid { grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
  .result-visual img { max-height: 430px; max-width: 100%; }
  .sw { grid-template-columns: 1fr 1fr; gap: 40px; }
  .results-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .results-lower .section { margin-top: 38px; }

  .field-row { grid-template-columns: 1fr 1fr; }
  .form-actions { flex-direction: row; align-items: center; gap: 28px; }
  .form-actions .btn-primary { width: auto; }

  .thanks-grid { grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; }
  .thanks-visual { display: flex; justify-content: center; }
  .thanks-visual img { max-height: 520px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bar-fill { transition: none !important; }
}

/* ==========================================================
   Compléments (textes d'écran v1.1)
   ========================================================== */
.hint-box { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--red); font-size: 13.5px; line-height: 1.5; max-width: 46ch; }
.cta-box small { text-transform: none; letter-spacing: .01em; font-size: 12.5px; line-height: 1.3; }

.q-midway { margin: 22px 0 0; font: 400 15px/1.1 var(--font-poster); letter-spacing: .04em; text-transform: uppercase; color: var(--red); }
.q-midway + .q-text { margin-top: 10px; }
.q-reminder { margin: -12px 0 18px; font-size: 13px; color: var(--grey); font-style: italic; }
.q-transition { min-height: 52vh; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; }
.q-transition p { margin: 0; font: 700 clamp(26px, 7vw, 38px)/1.1 var(--font-title); letter-spacing: -.02em; }
.q-dot { width: 54px; height: 54px; border-radius: 50%; background: var(--red); animation: pulse .9s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(.7); background: var(--yellow); } to { transform: scale(1.05); background: var(--red); } }

.bar-label { display: block; }
.bar-desc { display: block; margin-top: 3px; font: 400 12px/1.3 var(--font-body); color: var(--grey); }
.bar.is-priority .bar-num, .bar.is-priority .bar-score { color: var(--red); }
.bar.is-priority .bar-label { color: var(--red); }
.bar.is-priority .bar-desc { color: var(--grey); }

.reco .first-step { margin: 0 0 18px; }
.domains-label { margin: 0 0 8px !important; font: 600 13px/1.3 var(--font-body) !important; }

.rgpd { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--grey); }
.rgpd a { color: var(--ink); }
.contact-rdv { margin-top: 14px; display: inline-flex; }