/* ==========================================================================
   SKYVISION : outils gratuits, surcharges de production
   Charge tokens.css puis shared.css AVANT ce fichier.
   1. Surcharges (plus de bandeau maquette)
   2. Composants ajoutés à la construction (langue, erreurs de formulaire,
      correspondance de colonnes, attente pilotée par le JS, module DSP)
   3. Classes des rapports, reprises des <style> des maquettes, pour que le
      rendu du rapport (lib/report/render.js) et la page P2 les trouvent ici
   4. Page confidentialité
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Surcharges
   -------------------------------------------------------------------------- */
:root { --mock-h: 0px; }

/* --------------------------------------------------------------------------
   2. Composants de production
   -------------------------------------------------------------------------- */

/* Bascule FR / EN (P2), dans la pilule de navigation */
.sv-lang {
  flex: none; display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--sv-radius-pill);
}
.sv-lang button {
  border: 0; background: transparent; color: #fff; cursor: pointer;
  font-family: var(--sv-font-title); font-weight: 700; font-size: 12px; letter-spacing: 1px;
  padding: 6px 10px; border-radius: var(--sv-radius-pill);
}
.sv-lang button[aria-pressed="true"] { background: #fff; color: var(--sv-navy); }

/* Erreur globale du formulaire (réseau, serveur, limite) */
.sv-form-alert { margin: 0 0 14px; }
.sv-form-alert a { color: inherit; }

/* Bouton en cours d'envoi */
.sv-btn[aria-busy="true"] { cursor: progress; opacity: .75; }

/* Fichier reconnu : bouton « Changer de fichier » */
.sv-file-ok__change {
  margin-left: auto; border: 1px dashed rgba(255,255,255,.8); background: none; color: #fff;
  border-radius: var(--sv-radius-pill); padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.sv-file-ok__change:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.sv-file-ok__text { min-width: 0; overflow-wrap: anywhere; }

/* Lecture du fichier en cours */
.sv-reading { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text-muted-dark); margin-top: 10px; }
.sv-reading::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.25); border-top-color: var(--sv-gold);
  animation: sv-spin .8s linear infinite;
}
@keyframes sv-spin { to { transform: rotate(360deg); } }

/* Correspondance manuelle des colonnes (P2) */
.sv-map { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03); }
.sv-map__title { font-size: 14px; font-weight: 500; color: #fff; }
.sv-map__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: center; }
.sv-map__row label { font-size: 14px; color: rgba(255,255,255,.9); }
.sv-select {
  width: 100%; height: 40px; padding: 0 36px 0 14px;
  border-radius: var(--sv-radius-pill); border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.02) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
  color: #fff; font-family: var(--sv-font-text); font-size: 14px;
  -webkit-appearance: none; appearance: none;
}
.sv-select option { color: var(--sv-navy); background: #fff; }
.sv-select:focus-visible { outline: 2px solid var(--sv-purple); outline-offset: 2px; }
@media (max-width: 479px) { .sv-map__row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Attente (②) pilotée par le JS : étapes cochées au fil du relevé */
.wait-steps li.is-active { color: rgba(255,255,255,.88); }
.wait-steps li.is-active::before { border-color: var(--sv-gold); animation: wait-pulse 1.4s ease-in-out infinite; }
.wait-steps li.is-done { color: #fff; }
.wait-steps li.is-done::before {
  border-color: transparent; background-color: var(--sv-purple);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@keyframes wait-pulse { 50% { transform: scale(.82); opacity: .7; } }
.wait-bar span { transition: width .9s var(--ease-out); }
.wait-msg { margin-top: 22px; }
.wait-msg .sv-btn { margin-top: 14px; }

/* Aperçu (③) */
.pv-more { font-size: 15px; color: var(--text-muted-dark); margin-top: -8px; margin-bottom: 26px; }
.pv-serp { --n: 6; margin-top: 16px; }
.pv-serp .serp__slot { min-height: 64px; overflow-wrap: anywhere; }
.pv-serp .serp__slot--other { background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.1); }
.pv-serp .serp__slot--ad { background: rgba(254,189,104,.16); border-color: rgba(254,189,104,.4); color: #fff; }
.pv-serp .serp__slot--youad { background: rgba(115,93,208,.35); border-color: rgba(185,170,255,.5); color: #fff; }
.pv-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 15px; color: rgba(255,255,255,.8); }
.serp--10 { --n: 10; }
.serp--dark .serp__slot { background: rgba(255,255,255,.05); color: rgba(255,255,255,.62); border-color: rgba(255,255,255,.1); min-height: 58px; }
.serp--dark .serp__slot--ad { background: rgba(254,189,104,.16); border-color: rgba(254,189,104,.45); color: #fff; }

/* Module DSP après envoi (P3) */
.dsp-module { max-width: 680px; margin: 40px auto 0; }
.pv-card ~ [data-dsp-slot] .dsp-module { max-width: 820px; }
.dsp-module .sv-panel { margin: 0; padding: 22px; }
.dsp-module .sv-check { margin-bottom: 6px; }
.dsp-q { margin-bottom: 16px; }
.dsp-q legend { font-size: 14.5px; }
.dsp-q .sv-choice > span { min-height: 34px; padding: 6px 12px; font-size: 13.5px; }
.dsp-module .dsp-verdict { margin-top: 18px; color: var(--sv-navy); }
.dsp-module .dsp-verdict p { color: #25323d; }
.dsp-module .dsp-verdict .sv-btn { margin-top: 6px; }

/* --------------------------------------------------------------------------
   3. Classes des rapports (reprises des maquettes p1, p2, p3)
   -------------------------------------------------------------------------- */

/* P1 */
.rp-searches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 991px) { .rp-searches { grid-template-columns: minmax(0, 1fr); } }
.rp-absent { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; color: #8f1d15; background: #fde8e6; border-radius: 20px; padding: 2px 10px; font-size: 14px; }
.fiche td:first-child { font-weight: 500; white-space: nowrap; }

/* P2 */
.kpi-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px 40px; align-items: end; padding: 28px; }
.kpi-hero .rp-kpi__n { font-size: clamp(40px, 6vw, 60px); }
.kpi-hero .sv-split { background: rgba(255,255,255,.14); position: relative; z-index: 1; }
.kpi-hero__legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,.8); position: relative; z-index: 1; }
@media (max-width: 767px) { .kpi-hero { grid-template-columns: minmax(0, 1fr); } }
.neg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.neg-card { border: 1px solid var(--line-light); border-radius: var(--sv-radius-card); padding: 22px; }
.neg-card h3 { font-size: 18px; line-height: 1.3; margin-bottom: 14px; }
.neg-card ul { list-style: none; display: grid; gap: 10px; }
.neg-card li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 15px; padding-bottom: 10px; border-bottom: 1px dashed var(--line-light); }
.neg-card li:last-child { border-bottom: 0; padding-bottom: 0; }
.neg-card li b { font-weight: 500; overflow-wrap: anywhere; }
.neg-card li span { color: var(--text-muted-light); font-size: 13.5px; grid-column: 1 / -1; }
.neg-card li em { font-style: normal; font-variant-numeric: tabular-nums; }
.rp-callout { position: relative; margin-top: 18px; padding: 16px 18px 16px 50px; border-radius: 16px; font-size: 15px; line-height: 1.55; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--sv-gradient) border-box; }
.rp-callout::before { content: ""; position: absolute; left: 17px; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--sv-gradient); }
.rp-callout::after { content: ""; position: absolute; left: 23px; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
@media (max-width: 767px) { .neg-grid { grid-template-columns: minmax(0, 1fr); } }
.cmp { display: grid; gap: 14px; margin-top: 22px; max-width: 640px; }
.cmp__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 64px; gap: 14px; align-items: center; font-size: 15px; }
.cmp__row .sv-bar { height: 14px; }
.cmp__row b { font-family: var(--sv-font-title); font-weight: 700; text-align: right; }
@media (max-width: 479px) { .cmp__row { grid-template-columns: 1fr 58px; } .cmp__row .sv-bar { grid-column: 1 / -1; grid-row: 2; } }
.conc { max-width: 640px; margin-top: 8px; }
.conc .sv-bar { height: 16px; }
.conc__legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13.5px; color: var(--text-muted-light); }
.acos-scale { display: flex; justify-content: space-between; font-size: 12px; color: #6a7580; margin: 4px 78px 0 164px; }
@media (max-width: 479px) { .acos-scale { margin: 4px 0 0; } }

/* P3 */
.sellers { display: grid; gap: 10px; margin: 0 0 20px; max-width: 640px; }
.sellers .sv-split { height: 16px; background: var(--line-light); }
.sellers__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--text-muted-light); }
.sellers__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rp-search--single { max-width: none; }
@media (min-width: 768px) { .rp-search--single dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; align-items: start; } }
.dsp-box { display: grid; gap: 14px; }
/* P2 « Copier » (28/09): the button, its status, and the list shown when the browser refuses the clipboard */

/* --------------------------------------------------------------------------
   4. Page confidentialité
   -------------------------------------------------------------------------- */
.legal-hero { padding-top: calc(var(--nav-h) + 28px + 72px); padding-bottom: 72px; }
.legal-hero .sv-h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.05; }
.legal-hero p { margin-top: 18px; max-width: 40em; color: var(--text-muted-dark); font-size: 17px; }
.legal { max-width: 46em; margin: 0 auto; }
.legal h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; margin: 40px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.6; color: #25323d; }
.legal ul { padding-left: 1.2em; display: grid; gap: 8px; margin: 0 0 1em; }
.legal a { color: #4b3aa6; text-underline-offset: 3px; }
.legal__date { margin-top: 40px; font-size: 14px; color: var(--text-muted-light); }

/* guide des fiches (29/09) : chapitres numérotés par la CSS, sources discrètes */
.legal-hero .sv-eyebrow { margin-bottom: 14px; }
.guide { counter-reset: guide-ch; }
.guide-ch { counter-increment: guide-ch; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-light); }
.guide-ch h2 { margin-top: 0; }
.guide-ch h2::before { content: counter(guide-ch, decimal-leading-zero); display: block; margin-bottom: 6px; font-family: var(--sv-font-title); font-size: 15px; letter-spacing: .12em; background: var(--sv-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.guide-ch--prio h2::before, .guide-ch--check h2::before, .guide-ch--next h2::before { content: none; }
.guide-ch--prio, .guide-ch--check, .guide-ch--next { counter-increment: none; }
.guide .fig { font-weight: 600; color: #14212b; }
.guide-src { margin-top: 14px; font-size: 13.5px !important; color: var(--text-muted-light) !important; }
.guide-order { padding-left: 1.4em; display: grid; gap: 10px; margin: 0 0 1em; }
.guide-order li { font-size: 16.5px; line-height: 1.6; color: #25323d; }
.guide-check { list-style: none; padding-left: 0 !important; }
.guide-check li { position: relative; padding-left: 30px; }
.guide-check li::before { content: ''; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #735dd0; }
.guide-ch--next { margin-top: 56px; padding: 28px; border: 1px solid var(--line-light); border-radius: var(--sv-radius-card); background: #f6f4fd; }
@media print { .sv-nav-wrap, .sv-footer, .skip-link { display: none !important; } .legal-hero { padding: 0 0 16px; background: #fff !important; color: #14212b !important; } .legal-hero .sv-horizon { display: none; } .guide-ch { break-inside: avoid-page; } }

