/* ===========================================================================
   style.css — Version complète (Doseur de spaghetti visuel)
   Portée principale sous .spg pour éviter tout conflit global
   Thème clair, moderne, pastel (pas sombre)
   =========================================================================== */

/* ---------------------- Reset minimal & base ---------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif; background:#ffffff; color:#1f1f1f; }
img,svg,video,canvas{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }

/* ---------------------- Portée / Tokens .spg ---------------------- */
.spg{
  --ink:#1f1f1f;
  --muted:#6f7480;

  --panel:#ffffff;
  --border:#ece6ef;

  --brand:#ff4f93;      /* rose spaghetti */
  --brand-2:#8AC6D0;    /* bleu-vert pastel */
  --brand-3:#ECBABE;    /* rose pâle */

  --radius:16px;
  --radius-lg:22px;
  --radius-xl:28px;

  --shadow:0 10px 30px rgba(0,0,0,.06);
  --shadow-lg:0 20px 50px rgba(0,0,0,.08);

  --max:1120px;
  --h1:clamp(1.7rem,1.15rem + 2.2vw,2.3rem);
  --h2:clamp(1.25rem,1rem + .9vw,1.6rem);
  --h3:1.15rem;
  --small:.94rem;
}

.spg{ margin:0 auto; max-width:var(--max); padding:18px; color:var(--ink); }
.spg *{ box-sizing:border-box; }
.spg h1,.spg h2,.spg h3{ line-height:1.25; margin:0 0 8px 0; }
.spg p{ margin:0 0 10px 0; }
.spg ul{ margin:6px 0 10px 18px; }
.spg .spg-muted{ color:var(--muted); }
.spg .spg-small{ font-size:var(--small); }
.spg .spg-sr{ position:absolute !important; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }

/* ---------------------- Hero ---------------------- */
.spg-hero{
  background:
    radial-gradient(900px 420px at 10% -40%, rgba(255,79,147,.12) 0%, transparent 60%),
    radial-gradient(900px 420px at 110% -10%, rgba(138,198,208,.20) 0%, transparent 60%),
    #fff;
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:22px;
  box-shadow:var(--shadow);
}
.spg-hero h1{ font-size:var(--h1); }

/* ---------------------- Layout calculateur ---------------------- */
.spg-calc{ display:grid; gap:16px; margin-top:14px; }
@media (min-width:920px){ .spg-calc{ grid-template-columns:1fr 380px; align-items:start; } }

.spg-panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:16px;
  box-shadow:var(--shadow-lg);
}

.spg-grid2{ display:grid; gap:12px; }
@media (min-width:700px){ .spg-grid2{ grid-template-columns:1fr 1fr; } }

.spg-label{ font-weight:800; margin-bottom:6px; }
.spg-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.spg-tools{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

.spg-flag{
  align-self:center; white-space:nowrap;
  padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff;
  font-weight:700; box-shadow:0 3px 8px rgba(0,0,0,.03);
}

/* ---------------------- Zone visuelle (stage) ---------------------- */
.spg-stage{
  display:grid; place-items:center; min-height:56vh;
  border:1px dashed var(--border); border-radius:var(--radius-xl);
  background:
    radial-gradient(1100px 700px at 120% -10%, #fff7fb 0%, transparent 55%),
    repeating-conic-gradient(from 0deg, #fafafa 0 12deg, #ffffff 12deg 24deg);
  box-shadow:var(--shadow);
}
.spg-ring{
  inline-size:100px; block-size:100px;
  border-radius:9999px; border:3px solid var(--brand);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.85), 0 10px 30px rgba(0,0,0,.06);
  background: radial-gradient(circle at 50% 50%, #fff 0 45%, transparent 46% 100%);
  transition: inline-size .08s ease, block-size .08s ease;
}

/* ---------------------- Readouts ---------------------- */
.spg-readouts{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.spg-chip{
  border:1px solid var(--border); border-radius:999px; padding:6px 10px; background:#fff;
  font-size:.95rem; box-shadow:0 3px 8px rgba(0,0,0,.03);
}
.spg-chip--accent{ background:linear-gradient(180deg,#fff,#fff7fb); border-color:#ffd3e6; font-weight:800; color:#8a2050; }
.spg-chip-note{ color:var(--muted); font-weight:600; }

/* ---------------------- Boutons / Tabs ---------------------- */
.spg-btn{
  appearance:none; border:1px solid var(--border);
  background:#fff; color:var(--ink);
  padding:8px 12px; border-radius:12px; cursor:pointer; font-weight:700;
  transition:transform .06s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.spg-btn:hover{ background:#fff8fb; border-color:#ffd3e6; }
.spg-btn:active{ transform:translateY(1px) scale(.98); }
.spg-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,79,147,.25); }
.spg-primary{ background:linear-gradient(180deg,#fff,#fff4f9); border-color:#ffd3e6; color:#7a1b47; }

.spg-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.spg-active{
  background:linear-gradient(180deg,#ffffff,#f3fbff);
  border-color:#bfe5ee; color:#0a4152;
}

/* ---------------------- Range (cross-browser) ---------------------- */
#spgDiamSlider,#spgOneSlider{ width:220px; height:34px; background:transparent; cursor:pointer; }
@media (max-width:480px){ #spgDiamSlider,#spgOneSlider{ width:160px; } }

/* WebKit track */
input[type="range"]::-webkit-slider-runnable-track{
  height:8px; border-radius:999px;
  background:linear-gradient(90deg,#ffd3e6,#c8eef4);
  border:1px solid var(--border);
}
/* Firefox track */
input[type="range"]::-moz-range-track{
  height:8px; border-radius:999px;
  background:linear-gradient(90deg,#ffd3e6,#c8eef4);
  border:1px solid var(--border);
}

/* WebKit thumb */
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid #bfe5ee; margin-top:-6px;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
}
/* Firefox thumb */
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid #bfe5ee;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
}

/* ---------------------- Contenu / FAQ ---------------------- */
.spg-content,.spg-faq{
  margin-top:18px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow);
}
.spg-content h2{ font-size:var(--h2); }
.spg-content h3{ margin-top:12px; font-size:var(--h3); }

.spg-faq-item{
  border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden;
  margin:10px 0; box-shadow:0 3px 14px rgba(0,0,0,.03);
}
.spg-faq-q{
  width:100%; text-align:left; padding:14px 16px; background:transparent; border:0; cursor:pointer;
  font-weight:800; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.spg-chev{ transition:transform .2s ease; }
.spg-faq-a{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  border-top:1px dashed var(--border); background:#fff;
}
.spg-faq-item.spg-open .spg-chev{ transform:rotate(180deg); }
.spg-faq-item.spg-open .spg-faq-a{ max-height:220px; }
.spg-faq-a p{ margin:12px 16px; }

/* ---------------------- Footer ---------------------- */
.spg-footer{ margin-top:22px; text-align:center; color:var(--muted); }

/* ---------------------- Réduire mouvements ---------------------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---------------------- Impression ---------------------- */
@media print{
  .spg-hero,.spg-faq,.spg-content .kpis,.spg-footer{ display:none !important; }
  .spg-panel,.spg-content{ box-shadow:none; border-color:#ddd; }
}

/* === FIX : "Base actuelle" sous le bouton, alignée à gauche === */
.spg .spg-factor{
  display: flex;
  flex-wrap: wrap;          /* permet de passer à la ligne */
  align-items: flex-start;
  gap: 12px;
}

.spg .spg-factor > div{
  order: 1;                 /* bloc réglages en premier */
  flex: 1 1 320px;
  min-width: 280px;
}

.spg .spg-flag{
  order: 2;                 /* badge après les réglages */
  flex-basis: 100%;         /* occupe sa propre ligne */
  margin-left: 0;           /* plus d’alignement à droite */
  margin-top: 8px;
  align-self: flex-start;   /* bord gauche */
  position: static;         /* pas d’overlay */
}
/* === QuickSet en plein large, 1 ligne horizontale sous le slider === */
@media (min-width:700px){
  /* Place le bloc "Aller vite" sur une ligne à lui, plein large */
  .spg-grid2 > div:nth-child(2){ grid-column: 1 / -1; }
}

#spgQuickSet{
  display:flex;           /* horizontaux */
  flex-wrap:nowrap;       /* 1 seule ligne */
  gap:8px;
  overflow-x:clip;        /* pas de scroll */
  margin-top:4px;
}

#spgQuickSet .spg-btn{
  flex:0 0 36px;          /* largeur compacte qui tient dans 380px */
  padding:8px 0;
  text-align:center;
}

/* Option mobile : passe en 4x2 si l’écran est trop étroit */
@media (max-width:480px){
  #spgQuickSet{ flex-wrap:wrap; }
  #spgQuickSet .spg-btn{ flex:0 0 calc(25% - 6px); }
}

/* 1) Fond plus discret */
.spg-stage{
  background:
    radial-gradient(1100px 700px at 120% -10%, #fff7fb 0%, transparent 55%),
    repeating-conic-gradient(from 0deg, rgba(250,250,250,.75) 0 12deg, rgba(255,255,255,.9) 12deg 24deg);
}

/* 2) Bouts + crédibles (variations & micro-ombre) */
.spg .spg-tips{
  left:8%; right:8%; bottom:8%;
  height:clamp(10px, 22%, 48px);
  position:absolute; border-radius:12px; pointer-events:none;
  transform:translateY(2%) rotate(-1deg);
  /* strates : relief vertical + 2 tapis de spaghetti avec irrégularités + micro rainures */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(255,255,255,.06) 35%, transparent 70%),
    repeating-linear-gradient(90deg,
      #d8b46a 0 2px, #f3e1b2 2px 6px,  /* 2/4 px */
      #d6b160 6px 8px, #f6e6bf 8px 11px /* 2/3 px */
    ),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.10) 0 1px, transparent 1px 9px
    );
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.18),  /* bord supérieur */
    0 1px 0 rgba(255,255,255,.35);    /* liseré lumière */
  filter:saturate(.98) contrast(1.04);
}

/* 3) Ombre interne du ring pour “poser” l’objet */
.spg-ring{
  background:transparent;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.55),
    inset 0 12px 22px rgba(0,0,0,.06),
    0 10px 30px rgba(0,0,0,.06);
}