/* ============================================================================
   03-excel-ai-analysis.css  v4.1 — CHARTE MENTHE-VIOLET (EN uniquement)
   QUIZ RESULTS PAGE — #excel-ai-analysis block injected by JS
   To paste in: /wp-content/themes/infinite-child/css/quiz_ai/03-excel-ai-analysis.css

   v4.1 (06/08/2026) : fonds éclaircis, valeurs choisies par Fred —
   zone d analyse #E7F5EC -> #F4FBF7, fond upsell + texte gras du CTA
   #F0E9FC -> #F1EDF8. Rien d autre ne bouge.
   v4.0 (06/08/2026) : charte MENTHE-VIOLET (CHARTE-EN-MENTHE-VIOLET.md,
   validée par Fred le 06/08) : zone d analyse menthe pâle #E7F5EC,
   jauge pass #2FBF8F / warn #8A6A1F (statut, conservé) / fail #8A4A23,
   upsell VIOLET (#F0E9FC + filet #7C4DDB, CTA #7C4DDB), badge premium
   violet, liens texte #14785A, bouton verrouillé #191C10.
   MÉCANIQUE INCHANGÉE (ordre, scénarios, free/premium, flou).
   v3.0 (05/08/2026) : passage à la charte olive, section 8 de
   CHARTE-EN-OLIVE.md (validée par Fred le 04/08/2026) :
   · zone d'analyse : fond #F7F8EF (le bloc DORÉ du 03/08 ne vaut plus
     que pour le site FR — sur l'EN l'ambre est réservé aux montants)
   · barres verticales : menthe #1F7355 = acquis · ambre #8A6A1F = à revoir
   · Archivo = titres et chiffre du score · IBM Plex Sans = texte et labels
   · border-radius:0 partout (sauf la jauge, ronde par nature), 0 ombre
   · la MÉCANIQUE est inchangée : ordre des blocs, scénarios pass/fail,
     visibilité free/premium, flou des sections verrouillées.
   v2.0 : port FR (bloc doré, Inter/Space Mono) — remplacé.
   ============================================================================ */

/* === Reset du conteneur === */
#excel-ai-analysis{
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  text-align:left !important;
  font-family:'IBM Plex Sans', system-ui, sans-serif !important;
}
#excel-ai-analysis *{text-align:left !important}

/* ========== 1. HERO RESULT (gauge + status + summary) ========== */
.ai-hero{
  padding:34px 36px 28px !important;
  border-bottom:1px solid #DBDCD0 !important;
  background:#FFFFFF !important;
  display:grid !important;
  grid-template-columns: auto 1fr !important;
  gap:32px !important;
  align-items:center !important;
}
body[data-scenario="pass"] .ai-hero{
  background:#FFFFFF !important;
}
@media (max-width:680px){
  .ai-hero{grid-template-columns:1fr !important; padding:28px 22px !important; gap:20px !important; justify-items:center !important}
  .ai-hero *{text-align:center !important}
}
.ai-gauge{position:relative; width:172px; height:172px}
.ai-gauge svg{transform:rotate(-90deg); display:block}
.ai-gauge .track{fill:none; stroke:#EDEEE4; stroke-width:14}
.ai-gauge .fill{
  fill:none; stroke:#8A4A23; stroke-width:14; stroke-linecap:butt;
  stroke-dasharray: 502; stroke-dashoffset: 401;
  transition:stroke-dashoffset .8s ease, stroke .3s;
}
.ai-gauge.pass .fill{stroke:#2FBF8F}
.ai-gauge.warn .fill{stroke:#8A6A1F}
.ai-gauge .center{position:absolute; inset:0; display:grid; place-items:center; text-align:center !important}
.ai-gauge .center *{text-align:center !important}
.ai-gauge .score{
  font-family:'Archivo', sans-serif !important;
  font-size:54px !important; line-height:1 !important; font-weight:700 !important;
  color:#191C10 !important; letter-spacing:-.03em !important;
  margin:0 !important;
}
.ai-gauge .score .denom{font-size:22px; color:#6E7263; font-weight:500}
.ai-gauge .pct{
  margin-top:4px !important;
  font-family:'IBM Plex Sans', sans-serif !important;
  font-size:11px !important; font-weight:600 !important; color:#6E7263 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important;
}

.ai-status{
  display:inline-flex !important;
  align-items:center; gap:8px;
  background:rgba(138,74,35,.12); color:#7a3727;
  padding:6px 12px; border-radius:0;
  font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  margin:0 !important;
}
.ai-status.pass{background:#DFF7EC; color:#14785A}
.ai-status.warn{background:rgba(138,106,31,.12); color:#8A6A1F}
.ai-status .ai-dot{width:6px; height:6px; border-radius:0; background:currentColor}

.ai-headline{
  font-family:'Archivo', sans-serif !important;
  font-size:clamp(24px,2.6vw,30px) !important;
  font-weight:700 !important; line-height:1.15 !important;
  letter-spacing:-.02em !important;
  color:#191C10 !important;
  margin:12px 0 6px !important;
  text-wrap:balance;
}
.ai-subhead{
  color:#3C4033 !important; font-size:15px !important; line-height:1.6 !important;
  max-width:52ch; margin:0 !important;
}
.ai-subhead b, .ai-subhead strong{font-weight:600; color:#191C10}
.ai-target{
  margin-top:14px !important;
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; color:#6E7263;
  padding:7px 12px;
  background:#fff; border:1px solid #DBDCD0;
  border-radius:0;
}
.ai-target b{color:#191C10; font-weight:600}

/* ========== 2. GENERIC SECTIONS ========== */
.ai-section{
  padding:30px 36px !important;
  background:#fff !important;
  border-bottom:1px solid #DBDCD0 !important;
  margin:0 !important;
}
/* Zone d'analyse — menthe pâle #E7F5EC (charte menthe-violet du 06/08).
   Pas de doré sur l'EN — le doré reste la règle du FR. */
.ai-section.tinted{
  background:#F4FBF7 !important;
  border-top:1px solid #BFE2CE !important;
  border-bottom:1px solid #BFE2CE !important;
}
@media (max-width:680px){.ai-section{padding:24px 22px !important}}

.ai-section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:14px; flex-wrap:wrap;
}
.ai-section-head h3{
  font-family:'Archivo', sans-serif !important;
  font-size:20px !important; font-weight:700 !important; letter-spacing:-.015em !important;
  color:#191C10 !important;
  margin:0 !important;
  padding:0 !important;
}
.ai-badge-premium{
  display:inline-flex !important; align-items:center; gap:6px;
  font-family:'IBM Plex Sans', sans-serif !important;
  font-size:10px !important; font-weight:600 !important; letter-spacing:.08em !important;
  text-transform:uppercase !important;
  background:rgba(124,77,219,.12) !important;
  color:#7C4DDB !important;
  padding:4px 9px !important; border-radius:0 !important;
  margin:0 !important;
}

/* ========== AI ANALYSIS ========== */
.ai-analysis{
  display:grid !important;
  grid-template-columns: auto 1fr !important;
  gap:22px !important;
}
@media (max-width:680px){.ai-analysis{gap:14px !important}}
.ai-ai-icon{
  width:44px; height:44px;
  background:#2FBF8F; color:#fff;
  border-radius:0;
  display:grid; place-items:center;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px; font-weight:700;
  box-shadow:none;
  position:relative;
}
.ai-ai-icon::after{content:none}
.ai-analysis-label{
  font-size:11px !important; font-weight:600 !important; letter-spacing:.12em !important;
  text-transform:uppercase !important; color:#6E7263 !important;
  margin:0 0 4px !important;
}
/* Taille 16.5px conservée (demande de Fred du 03/08 : lisibilité). */
.ai-analysis-body{font-size:16.5px !important; line-height:1.65 !important; color:#3C4033 !important}
.ai-analysis-body p{margin:0 0 10px !important; padding:0 !important}
.ai-analysis-body p:last-child{margin-bottom:0 !important}
.ai-analysis-body b, .ai-analysis-body strong{color:#191C10; font-weight:600}
.ai-analysis-body ul{margin:6px 0 10px !important; padding:0 !important; list-style:none !important}
.ai-analysis-body ul li{
  padding:8px 12px !important; margin:0 0 6px !important;
  background:#fff;
  border-left:3px solid #2FBF8F;
  border-radius:0;
  font-size:14px;
}
.ai-analysis-body ul li b{display:block; margin-bottom:2px}

.ai-disclaimer{
  margin-top:12px !important;
  font-size:11.5px; color:#6E7263;
  display:flex; align-items:center; gap:8px;
  font-style:italic;
}
.ai-disclaimer .by{
  font-style:normal; font-family:'IBM Plex Sans', sans-serif; font-weight:600;
  color:#3C4033;
}

/* ========== ANSWER REPLAY (premium) ========== */
.ai-review-list{display:flex; flex-direction:column; gap:8px; margin-top:14px !important}
.ai-q{
  border:1px solid #DBDCD0;
  border-radius:0;
  overflow:hidden;
  background:#fff;
  margin:0 !important;
}
.ai-q[open]{border-color:#BFE2CE}
.ai-q summary{
  list-style:none; cursor:pointer;
  padding:14px 18px;
  display:grid; grid-template-columns: auto 1fr auto; gap:14px;
  align-items:center;
}
.ai-q summary::-webkit-details-marker{display:none}
.ai-q .qnum{
  width:30px; height:30px; border-radius:0;
  background:#DFF7EC; color:#14785A;
  display:grid; place-items:center;
  font-family:'IBM Plex Sans', sans-serif; font-size:12px; font-weight:700;
}
.ai-q.ko .qnum{background:rgba(138,74,35,.12); color:#7a3727}
.ai-q .qtxt{font-size:14.5px; color:#191C10; font-weight:500; line-height:1.4}
.ai-q .qtag{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 9px; border-radius:0;
  background:#DFF7EC; color:#14785A;
  white-space:nowrap;
}
.ai-q.ko .qtag{background:rgba(138,74,35,.12); color:#7a3727}
.ai-q .qbody{padding:0 18px 18px; border-top:1px dashed #DBDCD0; margin-top:0}
.ai-q .qrow{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 0; border-bottom:1px dashed #DBDCD0;
  font-size:14px;
}
.ai-q .qrow:last-child{border-bottom:none}
.ai-q .qrow .qlbl{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:10.5px; font-weight:600;
  color:#6E7263; text-transform:uppercase; letter-spacing:.06em;
  min-width:88px; padding-top:3px;
}
.ai-q .qrow.user .qval{color:#8A4A23; font-weight:500}
.ai-q .qrow.ok .qval{color:#14785A; font-weight:600}
.ai-q .qrow.expl .qval{color:#3C4033; line-height:1.55}
.ai-q .qrow.expl .qval a{
  color:#14785A; font-weight:600; text-decoration:underline; text-underline-offset:3px;
}

/* ========== RECOMMENDED COURSES / NEXT QUIZ ========== */
.ai-section.alt{background:#FAF9F2 !important}
.ai-courses{
  display:grid !important; gap:12px !important;
  margin-top:14px !important;
}
.ai-courses[data-count="3"]{grid-template-columns:1fr 1fr 1fr}
.ai-courses[data-count="2"]{grid-template-columns:1fr 1fr; max-width:760px}
.ai-courses[data-count="1"]{grid-template-columns:1fr; max-width:520px}
@media (max-width:780px){.ai-courses{grid-template-columns:1fr !important}}
.ai-course{
  display:block !important;
  padding:18px !important;
  background:#fff;
  border:1px solid #DBDCD0;
  border-radius:0;
  transition:border-color .15s;
  color:inherit !important;
  margin:0 !important;
  text-decoration:none;
}
.ai-course:hover{
  border-color:#2FBF8F;
  background:#fff;
}
.ai-course-kicker{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:10.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:#14785A;
  margin:0 0 10px !important;
}
.ai-course-kicker::before{content:""; width:14px; height:1.5px; background:#2FBF8F}
.ai-course-title{
  font-family:'Archivo', sans-serif !important;
  font-size:17px !important; font-weight:600 !important; letter-spacing:-.015em !important;
  color:#191C10 !important;
  line-height:1.2; margin:0 0 6px !important;
}
.ai-course-desc{
  font-size:13px !important; color:#6E7263 !important;
  line-height:1.5; margin:0 !important;
}
.ai-course-foot{
  margin-top:14px !important; padding-top:12px;
  border-top:1px dashed #DBDCD0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px;
}
.ai-course-foot .meta{color:#6E7263}
.ai-course-foot .meta b{color:#3C4033; font-weight:600}
.ai-course-foot .go{color:#14785A; font-weight:600}

.ai-next{
  background:#DFF7EC !important;
  border:1px solid #BFE2CE;
  border-radius:0;
  padding:22px 26px !important;
  display:grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap:22px !important; align-items:center !important;
  margin-top:14px !important;
}
@media (max-width:680px){
  .ai-next{grid-template-columns:1fr !important; padding:20px !important; gap:14px !important}
  .ai-next *{text-align:center !important}
}
.ai-next-ic{
  width:56px; height:56px; border-radius:0;
  background:#2FBF8F; color:#fff;
  display:grid; place-items:center;
  font-family:'Archivo', sans-serif; font-size:24px; font-weight:700;
  box-shadow:none;
}
.ai-next-label{
  font-family:'IBM Plex Sans', sans-serif !important;
  font-size:10.5px !important; font-weight:600 !important; letter-spacing:.1em !important;
  text-transform:uppercase !important; color:#14785A !important;
  margin:0 0 4px !important;
}
.ai-next h4{
  font-family:'Archivo', sans-serif !important;
  font-size:21px !important; color:#191C10 !important; font-weight:700 !important;
  letter-spacing:-.015em !important;
  margin:0 0 6px !important;
}
.ai-next p{color:#3C4033 !important; font-size:13.5px !important; margin:0 !important; line-height:1.5 !important}
.ai-next .ai-cta{
  background:#2FBF8F; color:#fff !important;
  padding:0 20px; height:42px;
  border-radius:0;
  font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
  text-decoration:none;
}
.ai-next .ai-cta:hover{background:#27A67B}

/* ========== PREMIUM UPSELL (free tier) ==========
   Famille ACHAT : carte violet pâle à filet violet (charte menthe-violet). */
.ai-upsell-wrap{padding:0; margin:0;}
.ai-upsell{
  background:#F1EDF8 !important;
  border:1px solid #D6C6F2;
  border-left:4px solid #7C4DDB;
  border-radius:0;
  padding:22px 26px !important;
  display:grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap:20px !important; align-items:center !important;
  margin:24px 36px !important;
}
@media (max-width:680px){
  .ai-upsell{grid-template-columns:1fr !important; padding:20px !important; margin:22px !important; gap:14px !important}
  .ai-upsell *{text-align:center !important}
}
.ai-upsell-ic{
  width:52px; height:52px; border-radius:0;
  background:#fff; border:1px solid #DBDCD0;
  display:grid; place-items:center; font-size:24px;
}
.ai-upsell h4{
  font-family:'Archivo', sans-serif !important;
  font-size:19px !important; color:#191C10 !important; font-weight:700 !important;
  letter-spacing:-.015em !important;
  margin:0 0 4px !important;
}
.ai-upsell p{color:#3C4033 !important; font-size:13.5px !important; margin:0 !important; line-height:1.5 !important}
.ai-upsell .ai-cta-dark{
  background:#7C4DDB; color:#fff !important;
  padding:0 20px; height:42px;
  border-radius:0;
  font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  text-decoration:none;
}
.ai-upsell .ai-cta-dark:hover{background:#6A3DC4}
.ai-upsell .ai-cta-dark b{color:#F1EDF8; font-weight:600}

/* ========== SCORE SCALE ========== */
.ai-scale-track{
  position:relative;
  margin:22px 0 8px;
  height:14px;
  border-radius:0;
  background:linear-gradient(to right,
    #8A4A23 0%, #8A4A23 40%,
    #8A6A1F 40%, #8A6A1F 70%,
    #2FBF8F 70%, #2FBF8F 100%
  );
  border:1px solid #DBDCD0;
}
.ai-scale-marker{
  position:absolute; top:50%; left:20%;
  width:24px; height:24px;
  transform:translate(-50%, -50%);
  background:#191C10; color:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:10px; font-weight:700;
  border:3px solid #fff;
  box-shadow:none;
  transition:left .4s ease;
}
.ai-scale-marker .ai-scale-lbl{
  position:absolute; top:-44px; left:50%;
  transform:translateX(-50%);
  background:#191C10; color:#fff;
  padding:3px 8px; border-radius:0;
  font-size:11px; font-weight:600;
  white-space:nowrap;
  font-family:'IBM Plex Sans', sans-serif;
  letter-spacing:0;
}
.ai-scale-marker .ai-scale-lbl::after{
  content:""; position:absolute;
  bottom:-5px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #191C10;
}
.ai-scale-ticks{
  display:grid;
  grid-template-columns:40% 30% 30%;
  font-size:12.5px;
  margin-top:14px;
}
.ai-scale-ticks > div{
  border-top:1px solid #DBDCD0;
  padding:10px 12px 0;
  display:flex; flex-direction:column; gap:2px;
}
.ai-scale-ticks .ai-zone-label{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:11px; font-weight:600; color:#3C4033;
  letter-spacing:.04em;
}
.ai-scale-ticks .ai-zone-desc{color:#6E7263; font-size:12.5px; line-height:1.4}
.ai-scale-ticks .current{position:relative}
.ai-scale-ticks .current .ai-zone-label{color:#8A4A23}
.ai-scale-ticks .current::before{
  content:""; position:absolute; top:-1px; left:0; right:0;
  height:2px; background:#8A4A23;
}
body[data-scenario="pass"] .ai-scale-ticks .current .ai-zone-label{color:#14785A}
body[data-scenario="pass"] .ai-scale-ticks .current::before{background:#2FBF8F}

/* ========== DISPLAY ORDER ========== */
.ays_quiz_results_page{display:flex !important; flex-direction:column}
#excel-ai-analysis[data-qai-root]{display:contents !important}
#excel-ai-analysis:not([data-qai-root]){display:none !important}
.ai-hero                      { order:1 }
.ai-section#echelle           { order:2 }
.ays_quiz_results_page > h2   { order:3 }
.ays_result_by_cats           { order:4 }
.ai-section.tinted            { order:5 }
.ai-upsell-wrap               { order:6 }
.ai-section#replay            { order:7 }
.ai-section.alt#cours         { order:8 }
.ays_score_message            { display:none !important; order:90 }
.ays_message                  { order:91 }
.ays_score                    { order:92 }
.ays_average                  { order:93 }
.ays-quiz-social-shares       { order:94 }
.ays_restart_button_p         { order:95 }

/* ========== SCENARIO switching ========== */
body[data-scenario="pass"] .scenario-fail{display:none !important}
body:not([data-scenario="pass"]) .scenario-pass{display:none !important}
.ai-courses[data-count="1"] [data-slot="2"],
.ai-courses[data-count="1"] [data-slot="3"],
.ai-courses[data-count="2"] [data-slot="3"]{display:none !important}

/* ========== FREE / PREMIUM VISIBILITY ========== */
body[data-tier="free"]    .premium-only{display:none !important}
body[data-tier="premium"] .free-only{display:none !important}

/* ========== LOCKED PREMIUM SECTIONS ========== */

/* Blur the "What your score means" text */
#analyse .ai-analysis-body {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}

/* "Answer detail" button - locked style (valeur du header #191C10) */
.ai-locked-btn {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: #191C10 !important;
  color: #fff !important;
  padding: 14px 18px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: 'IBM Plex Sans', sans-serif !important;
  margin-top: 12px !important;
  position: relative;
}

.ai-locked-btn:hover {
  background: #1E3A2F !important;
}

.ai-locked-btn .lock-ic {
  font-size: 16px;
  display: inline-block;
  min-width: 20px;
}

.ai-locked-btn .lock-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  text-align: left;
}

.ai-locked-btn .lock-title {
  font-weight: 600;
  font-size: 14px;
  display: block;
}

.ai-locked-btn .lock-sub {
  font-size: 11px;
  color: #C9CBBD;
  font-weight: 400;
  display: block;
}

.ai-locked-btn .lock-arrow {
  font-size: 18px;
  margin-left: auto;
}

/* ========== MASK NATIVE AYS MESSAGE ========== */
.qai-native-msg,
.excel-ai-notice,
.excel-ai-loading{ display:none !important; }