/* ------------------------------------------------------------------
   comparateur-stature.css — se-comparer.com
   Comparateur visuel de stature et d'IMC (page sante.php).
   Chargé uniquement sur la page santé.
   ------------------------------------------------------------------ */

.scs{
  --scs-col-min:96px;
  --scs-plot-h:400px;
  --scs-label-h:40px;
  --scs-values-h:74px;
  --scs-gutter:88px;
  --scs-border:#dfe7f2;

  background:#fff;
  border:1px solid var(--scs-border);
  border-radius:22px;
  box-shadow:0 14px 36px rgba(7,25,54,.07);
  padding:22px 22px 18px;
  margin:24px 0;
  position:relative;
}
.scs[hidden]{display:none!important}

/* ---------- En-tête ---------- */
.scs-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.scs-head-main{display:flex;align-items:flex-start;gap:12px;min-width:0;flex:1 1 320px}
.scs-head-main > div{min-width:0}
.scs-head-icon{
  flex:0 0 auto;
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#2f6fd0;
}
.scs-head-icon svg{width:34px;height:34px;display:block}
.scs .scs-title{
  font-size:clamp(19px,2.2vw,26px);
  line-height:1.15;
  letter-spacing:-.03em;
  font-weight:900;
  margin:0 0 4px;
  color:#071936;
}
.scs .scs-sub{margin:0;color:#5b6880;font-size:14px;line-height:1.4}

/* ---------- Partage ---------- */
.scs-share{position:relative;flex:0 0 auto}
.scs-share-btn{
  appearance:none;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid #cddcf3;
  background:#f2f7ff;
  color:#1a4fa8;
  font:inherit;font-weight:850;font-size:14px;
  border-radius:13px;
  padding:10px 16px;
  min-height:44px;
  cursor:pointer;
}
.scs-share-btn:hover{background:#e6f0ff}
.scs-share-btn:focus-visible{outline:4px solid rgba(37,99,235,.18);outline-offset:2px}
.scs-share-btn svg{width:17px;height:17px;fill:currentColor}
.scs-share-menu{
  position:absolute;right:0;top:calc(100% + 8px);
  z-index:8;
  min-width:216px;
  background:#fff;
  border:1px solid var(--scs-border);
  border-radius:15px;
  box-shadow:0 18px 44px rgba(7,25,54,.16);
  padding:7px;
}
.scs-share-menu[hidden]{display:none}
.scs-share-menu a,
.scs-share-menu button{
  display:flex;align-items:center;gap:11px;
  width:100%;
  border:0;background:transparent;
  font:inherit;font-weight:750;font-size:14px;
  color:#1f2937;
  text-align:left;
  padding:10px 11px;
  border-radius:11px;
  min-height:44px;
  cursor:pointer;
  text-decoration:none;
}
.scs-share-menu a:hover,
.scs-share-menu button:hover{background:#f2f7ff;text-decoration:none}
.scs-share-menu a:focus-visible,
.scs-share-menu button:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:-2px}
.scs-share-menu svg{width:18px;height:18px;flex:0 0 auto}
.scs-share-menu [hidden]{display:none!important}
.scs-ico-fb{fill:#1877f2}
.scs-ico-x{fill:#0f1419}
.scs-ico-wa{fill:#25d366}
.scs-ico-dl{fill:#2f6fd0}

/* ---------- Zone graphique ---------- */
.scs-chart{margin-top:18px}
.scs-chart-caption{
  font-size:12px;font-weight:800;color:#5b6880;
  margin:0 0 6px var(--scs-gutter);
}
.scs-chart-body{display:flex;align-items:flex-start;gap:0;min-width:0}

.scs-gutter{flex:0 0 var(--scs-gutter);width:var(--scs-gutter)}
.scs-gutter-label{height:var(--scs-label-h)}
.scs-ruler{position:relative;height:var(--scs-plot-h)}
/* Axe vertical de la reglette, avec ses graduations. */
.scs-ruler:after{
  content:"";
  position:absolute;right:0;top:-2px;bottom:-2px;
  width:2px;
  background:#cfd9e8;
  border-radius:2px;
}
.scs-tick{
  position:absolute;right:10px;
  transform:translateY(50%);
  font-size:11px;font-weight:800;color:#8896ac;
  line-height:1;
}
.scs-tick:after{
  content:"";
  position:absolute;right:-10px;top:50%;
  width:7px;height:2px;
  margin-top:-1px;
  background:#cfd9e8;
}

/* Pas de padding-top ici : l'etiquette de chaque colonne occupe deja
   exactement --scs-label-h en haut de la piste. */
.scs-area{flex:1 1 auto;min-width:0;position:relative}

.scs-plot{
  position:absolute;
  left:0;right:0;
  top:var(--scs-label-h);
  height:var(--scs-plot-h);
  pointer-events:none;
  z-index:0;
}
.scs-lines{position:absolute;left:0;right:0;top:0;bottom:0}
.scs-line{
  position:absolute;left:0;right:0;
  border-top:1px dashed #e2e9f4;
}
.scs-median{
  position:absolute;left:0;right:0;
  border-top:2px dashed rgba(47,111,208,.55);
}
.scs-median-tag{
  position:absolute;
  right:100%;
  bottom:-9px;
  margin-right:10px;
  text-align:right;
  white-space:nowrap;
  line-height:1.05;
}
.scs-median-tag b{display:block;font-size:13px;font-weight:900;color:#1e4fa3}
.scs-median-tag span{display:block;font-size:10px;font-weight:700;color:#7b89a0}

.scs-scroll{
  position:relative;
  z-index:1;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.scs-track{
  display:flex;
  /* Alignement par le haut : l etiquette et la zone de dessin ont une
     hauteur fixe, les pieds tombent donc tous sur le zero de la regle.
     Avec un alignement par le bas, une colonne dont le bloc de valeurs
     compte une ligne de plus remonterait toute la silhouette. */
  align-items:flex-start;
  gap:10px;
  justify-content:center;
  min-width:100%;
  width:max-content;
  margin:0;padding:0 0 4px;
  list-style:none;
}

/* ---------- Colonne / silhouette ---------- */
.scs-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:0 0 auto;
  min-width:var(--scs-col-min);
}
/* Le decalage horizontal du deplacement libre et le petit soulevement du
   survol de depot passent par des variables : les deux se combinent sans
   qu une regle ecrase l autre. */
.scs-col{
  position:relative;
  transform:translate(var(--scs-dx,0px),var(--scs-dy,0px));
  transition:transform .18s ease,opacity .18s ease;
}
.scs-col.is-dragging{opacity:.45}
.scs-col.is-drop-target{
  outline:2px dashed #2f6fd0;
  outline-offset:4px;
  border-radius:12px;
  background:rgba(47,111,208,.05);
  --scs-dy:-3px;
}

/* ---------- Deplacement libre ---------- */
.scs-col.is-free-moving{
  --scs-dy:-10px;
  z-index:6;
  cursor:grab;
  touch-action:none;
}
.scs-col.is-free-moving .scs-figure svg{
  filter:drop-shadow(0 12px 14px rgba(7,25,54,.30));
}
.scs-col.is-free-moving .scs-figure{cursor:grab}
/* Pendant le glissement, la transition ferait trainer la silhouette
   derriere le doigt : on la coupe. */
.scs-col.is-dragging-free{transition:none;cursor:grabbing}
.scs-col.is-dragging-free .scs-figure{cursor:grabbing}

/* Reperes de part et d autre, visibles seulement en deplacement libre. */
.scs-move-handle{
  display:none;
  position:absolute;
  top:calc(var(--scs-label-h) + var(--scs-plot-h) * .52);
  width:22px;height:34px;
  border-radius:8px;
  background:#2f6fd0;
  box-shadow:0 4px 10px rgba(7,25,54,.28);
  align-items:center;justify-content:center;
  pointer-events:none;
}
.scs-move-handle:before{
  content:"";
  width:0;height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.scs-move-left{left:-13px}
.scs-move-left:before{border-right:7px solid #fff}
.scs-move-right{right:-13px}
.scs-move-right:before{border-left:7px solid #fff}
.scs-col.is-free-moving .scs-move-handle{display:flex}

/* Emplacement de hauteur fixe : la pastille y est ancree en bas et peut
   deborder lateralement de sa colonne. Le script la decale vers le haut
   quand deux pastilles voisines se chevauchent. */
.scs-label-slot{
  position:relative;
  height:var(--scs-label-h);
  width:100%;
}
.scs-label{
  position:absolute;
  left:50%;bottom:0;
  transform:translateX(-50%);
  display:inline-flex;align-items:center;justify-content:center;gap:2px;
  max-width:none;
  padding:5px 10px;
  border-radius:14px;
  font-size:12.5px;font-weight:850;
  line-height:1.15;
  background:#eef2f7;color:#1f2937;
  text-align:center;
  white-space:nowrap;
}
.scs-label-text{max-width:none}
/* Seule exception : un nom compose garde le droit de passer a la ligne. */
.scs-label-wrap{white-space:normal;max-width:130px}
.scs-label-median{background:#dbeafe;color:#1e40af}
.scs-label-you{background:#e9edf3;color:#111827}
.scs-label-person{
  background:color-mix(in srgb,var(--scs-tint,#2f3743) 12%,#fff);
  color:color-mix(in srgb,var(--scs-tint,#2f3743) 82%,#000);
}
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .scs-label-person{background:#eef2f7;color:#1f2937}
}
.scs-label-close{
  appearance:none;border:0;background:transparent;
  color:inherit;opacity:.65;
  font-size:17px;line-height:1;font-weight:800;
  cursor:pointer;
  width:26px;height:26px;
  border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.scs-label-close:hover{opacity:1;background:rgba(255,255,255,.75)}
.scs-label-close:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:1px;opacity:1}

.scs-figure{
  appearance:none;border:0;background:transparent;padding:0;
  height:var(--scs-plot-h);
  width:100%;
  display:flex;align-items:flex-end;justify-content:center;
  cursor:pointer;
  border-radius:12px;
}
.scs-figure svg{display:block}
.scs-figure:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:2px}
.scs-col.is-selected .scs-figure{background:rgba(47,111,208,.06)}

.scs-values{
  min-height:var(--scs-values-h);
  padding-top:9px;
  text-align:center;
  line-height:1.25;
}
.scs-values span{display:block}
.scs-v-height{font-size:16px;font-weight:900;color:#071936;letter-spacing:-.02em}
.scs-v-weight{font-size:13.5px;font-weight:700;color:#3d4c66}
.scs-v-bmi{font-size:13px;font-weight:700;color:#5b6880}
.scs-v-note{font-size:10.5px;font-weight:600;color:#8896ac;margin-top:2px}
/* Taille, poids et IMC prennent la couleur de leur silhouette. La teinte
   est assombrie de 22 % : telles quelles, l'or et le vert de la palette
   n'atteindraient pas le contraste AA sur fond blanc. La hierarchie de
   lecture reste portee par les corps et les graisses ci-dessus.
   Sans color-mix, on garde les gris d'origine. */
@supports (color:color-mix(in srgb,#000 10%,#fff)){
  .scs-v-height,.scs-v-weight,.scs-v-bmi{
    color:color-mix(in srgb,var(--scs-tint,#071936) 78%,#000);
  }
}

/* ---------- Éditeur d'une silhouette ---------- */
/* Le bloc de reglages prend la couleur de la silhouette selectionnee,
   tres eclaircie. --scs-tint est posee par le script ; sans elle, ou
   sans color-mix, on retombe sur le bleu pale d origine. */
.scs-editor{
  margin-top:14px;
  border:1px solid #d9e4f4;
  background:#f7faff;
  border-radius:16px;
  padding:14px 16px;
}
@supports (background:color-mix(in srgb,#000 10%,#fff)){
  .scs-editor{
    background:color-mix(in srgb,var(--scs-tint,#2f6fd0) 10%,#fff);
    border-color:color-mix(in srgb,var(--scs-tint,#2f6fd0) 32%,#fff);
  }
  .scs-editor .scs-input,
  .scs-editor .scs-seg{
    background:color-mix(in srgb,var(--scs-tint,#2f6fd0) 5%,#fff);
  }
  .scs-editor .scs-editor-title{
    color:color-mix(in srgb,var(--scs-tint,#2f6fd0) 78%,#000);
  }
}
.scs-editor[hidden]{display:none}
.scs-editor-title{font-size:15px;font-weight:900;margin-bottom:10px;color:#071936}
.scs-editor-lock{margin:0 0 10px;color:#5b6880;font-size:13.5px}
.scs-editor-grid{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-start}
.scs-editor-row{display:flex;flex-direction:column;gap:5px;min-width:0}
.scs-editor-label{font-size:12px;font-weight:850;color:#5b6880}
.scs-editor-data{display:flex;gap:9px;flex-wrap:wrap}
.scs-editor-field{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;color:#5b6880}
.scs-editor-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}

/* ---------- Ajout d'une personne ---------- */
.scs-add{
  margin-top:14px;
  border:1px solid #dfe7f2;
  background:linear-gradient(180deg,#fff,#f8fbff);
  border-radius:16px;
  padding:15px 16px;
}
.scs-add-title{font-size:16px;font-weight:900;margin:0 0 11px;color:#071936}
.scs-add-grid{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.scs-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.scs-field > span{font-size:12px;font-weight:850;color:#5b6880}
.scs-field-name{flex:1 1 190px;max-width:280px}

.scs .scs-input,
.scs input[type=text].scs-input{
  width:100%;
  max-width:none;
  min-height:46px;
  border:1px solid #d7e1ef;
  border-radius:13px;
  padding:10px 12px;
  background:#fff;
  color:#071936;
  font:inherit;
  font-weight:750;
  font-size:15px;
  box-shadow:none;
}
.scs .scs-input-num{width:104px}
.scs .scs-input:focus{outline:4px solid rgba(37,99,235,.18);border-color:#2563eb}
.scs .scs-input::placeholder{color:#9aa7bc;opacity:1;font-weight:600}
.scs .scs-input.is-computed{
  background:#eef4ff;
  border-color:#c6d9f5;
  color:#1a4fa8;
}

/* Contrôle segmenté local (indépendant de celui de app.js) */
.scs-seg{
  display:inline-flex;
  gap:5px;
  padding:4px;
  background:#edf4ff;
  border:1px solid #dbe7f7;
  border-radius:14px;
}
.scs-seg button{
  appearance:none;border:0;background:transparent;
  color:#24415f;
  border-radius:10px;
  padding:8px 13px;
  min-height:38px;
  font:inherit;font-weight:850;font-size:13.5px;
  cursor:pointer;
  white-space:nowrap;
}
.scs-seg button:hover{background:rgba(255,255,255,.75)}
.scs-seg button[aria-pressed="true"]{
  background:linear-gradient(135deg,#075bd8,#16a34a);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.18);
}
.scs-seg button:focus-visible{outline:4px solid rgba(37,99,235,.18);outline-offset:2px}

/* Carré de couleur + palette */
.scs-color{position:relative}
.scs-color-btn{
  appearance:none;
  width:46px;height:46px;
  border-radius:13px;
  border:1px solid #cbd6e6;
  background:var(--scs-swatch,#2f3743);
  cursor:pointer;
  padding:0;
  box-shadow:inset 0 0 0 3px #fff;
}
.scs-color-btn:focus-visible{outline:4px solid rgba(37,99,235,.22);outline-offset:2px}
.scs-color-pop{
  position:absolute;
  left:0;top:calc(100% + 7px);
  z-index:7;
  display:flex;flex-wrap:wrap;gap:8px;
  width:158px;
  padding:10px;
  background:#fff;
  border:1px solid var(--scs-border);
  border-radius:14px;
  box-shadow:0 16px 34px rgba(7,25,54,.16);
}
.scs-color-pop[hidden]{display:none}
.scs-swatch{
  appearance:none;
  width:44px;height:44px;
  border-radius:11px;
  border:1px solid rgba(7,25,54,.14);
  background:var(--scs-swatch,#2f3743);
  cursor:pointer;
  padding:0;
}
.scs-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px #2f6fd0}
.scs-swatch:focus-visible{outline:3px solid rgba(37,99,235,.3);outline-offset:3px}

/* Boutons */
.scs-btn{
  appearance:none;border:0;
  border-radius:13px;
  font:inherit;font-weight:900;font-size:14.5px;
  padding:12px 20px;
  min-height:46px;
  cursor:pointer;
}
.scs-btn-primary{
  background:linear-gradient(135deg,#075bd8,#2f6fd0);
  color:#fff;
  box-shadow:0 12px 24px rgba(37,99,235,.2);
}
.scs-btn-primary:disabled{
  background:#d6dfec;color:#7b89a0;box-shadow:none;cursor:not-allowed;
}
.scs-btn-ghost{
  background:#fff;color:#24415f;border:1px solid #cddcf3;font-weight:800;
}
.scs-btn-ghost:disabled{opacity:.45;cursor:not-allowed}
.scs-btn-danger{
  background:#c62828;color:#fff;
  min-width:44px;
}
.scs-btn-danger:hover{background:#ad1f1f}
.scs-btn:focus-visible{outline:4px solid rgba(37,99,235,.22);outline-offset:2px}

.scs-add-error{
  margin-top:10px;
  color:#a5142c;
  background:#fdeff1;
  border:1px solid #f6cdd5;
  border-radius:11px;
  padding:9px 12px;
  font-size:13.5px;font-weight:750;
}
.scs-add-error[hidden]{display:none}
.scs-limit{
  margin-top:10px;
  color:#5b6880;
  font-size:13px;font-weight:750;
}
.scs-limit[hidden]{display:none}

/* ---------- Barre d'information ---------- */
.scs-info{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 18px;
  margin-top:14px;
  padding:12px 15px;
  background:#f2f7ff;
  border:1px solid #dbe7f7;
  border-radius:14px;
}
.scs-phrase{
  margin:0;
  display:flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:800;color:#12315e;
}
.scs-phrase[hidden]{display:none}
.scs-info-icon{flex:0 0 auto;width:19px;height:19px;color:#2f6fd0}
.scs-info-icon svg{width:19px;height:19px;fill:currentColor;display:block}
/* Couleur de la silhouette decrite, assombrie pour le contraste.
   Sans color-mix, on garde le bleu foncé d origine. */
@supports (color:color-mix(in srgb,#000 10%,#fff)){
  .scs-phrase{color:color-mix(in srgb,var(--scs-tint,#12315e) 78%,#000)}
  .scs-info-icon{color:inherit}
}
/* La mention du plafond occupe sa propre ligne : sur la largeur de la
   carte elle tient alors en une seule ligne. */
.scs-cap-note{margin:0;font-size:12px;color:#5b6880;flex:1 0 100%;max-width:none}
.scs-cap-note[hidden]{display:none}
.scs-mode-note{
  margin:10px 0 0;
  font-size:13px;color:#5b6880;
}
.scs-mode-note[hidden]{display:none}

/* ---------- Pied du composant ---------- */
.scs-footer{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;
  gap:12px 26px;
  margin-top:14px;
}
.scs-palette-row{
  display:flex;align-items:center;gap:12px;
  font-size:13px;font-weight:800;color:#3d4c66;
}
.scs-palette{display:flex;gap:9px}
.scs-palette .scs-swatch{width:34px;height:34px;border-radius:999px}
.scs-hints{
  display:flex;flex-wrap:wrap;gap:8px 22px;
  font-size:12.5px;color:#7b89a0;font-weight:650;
}
.scs-hints > span{display:inline-flex;align-items:center;gap:7px}
/* Les deux indices ne doivent jamais s afficher ensemble : le glisser-deposer
   sur grand ecran, les boutons de deplacement sur mobile. Les regles qui les
   masquent passent par " .scs-hints > " et non par la classe seule : sans le
   selecteur enfant elles seraient moins specifiques que la ligne ci-dessus,
   donc sans aucun effet. Ne pas les raccourcir. */
.scs-hints > .scs-hint-touch{display:none}
.scs-hint-icon{flex:0 0 auto;width:16px;height:16px}
.scs-hint-icon svg{width:16px;height:16px;fill:currentColor;display:block}

.scs-sr{
  position:absolute!important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .scs{--scs-plot-h:352px;--scs-gutter:72px;padding:18px 16px 16px}
  .scs-share-menu{min-width:204px}
}

@media (max-width:700px){
  .scs{--scs-plot-h:330px;--scs-gutter:46px;--scs-values-h:72px;--scs-col-min:68px;padding:16px 12px 14px}
  /* Ecran etroit : on resserre les colonnes. Une silhouette corpulente
     occupe naturellement plus de place que la voisine, l ecart minimal
     garantit qu elles ne se touchent jamais. */
  .scs-track{gap:4px;justify-content:flex-start}
  /* Le sous-titre est redondant avec le titre : on recupere sa hauteur. */
  .scs-sub{display:none}
  .scs-median-tag span{display:none}
  .scs-median-tag b{font-size:11px}
  .scs-median-tag{margin-right:6px;bottom:-7px}
  .scs-tick{right:6px;font-size:10px}
  .scs-head{flex-direction:column;align-items:stretch}
  .scs-head-main{flex:0 0 auto}
  .scs-share{align-self:flex-start}
  .scs-add-grid{flex-direction:column;align-items:stretch}
  /* En colonne, flex-grow etirerait le champ Nom sur toute la hauteur. */
  .scs-field-name{max-width:none;flex:0 0 auto}
  .scs-seg{display:flex;width:100%}
  /* Cibles tactiles : au moins 44 px de haut sur mobile. */
  .scs-seg button{flex:1 1 auto;min-width:0;min-height:44px;padding:8px 6px}
  /* Pied : le libellé de couleur passe au-dessus de ses pastilles, qui se
     replient au lieu de déborder de la carte. */
  .scs-footer{flex-direction:column;align-items:stretch;gap:14px}
  .scs-palette-row{flex-wrap:wrap;gap:8px 12px}
  .scs-palette-row > span{width:100%}
  .scs-palette{flex-wrap:wrap;gap:10px}
  .scs-label-close{width:32px;height:32px}
  .scs .scs-input-num{width:100%}
  .scs-btn-primary{width:100%}
  .scs-editor-grid{flex-direction:column;align-items:stretch}
  .scs-editor-actions .scs-btn{flex:1 1 auto}
  .scs-hints > .scs-hint-drag{display:none}
  .scs-hints > .scs-hint-touch{display:inline-flex}
  .scs-color-pop{left:auto;right:0}
}

@media (max-width:420px){
  .scs{--scs-plot-h:300px}
  .scs-label-wrap{max-width:110px}
  .scs-v-height{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .scs *{transition:none!important;animation:none!important}
}