:root{
  /* surfaces */
  --bg: #F3F7F3;
  --surface: #FFFFFF;
  --surface-alt: #EBF1EC;
  --border: #DCE6DD;

  /* texte */
  --ink: #16241F;
  --ink-soft: #54655D;
  --ink-faint: #84968C;

  /* marque */
  --primary: #1F6F54;
  --primary-ink: #FFFFFF;
  --accent: #FF8552;

  /* catégories IMC */
  --cat-low: #5E8FCB;
  --cat-normal: #1F6F54;
  --cat-over: #E3A93B;
  --cat-obese1: #E07B3E;
  --cat-obese2: #CC4B3C;

  /* échelle typographique */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;

  --shadow-card: 0 1px 2px rgba(22,36,31,.04), 0 12px 28px -16px rgba(22,36,31,.18);

  --maxw: 1080px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --bg: #10160F;
  --surface: #161F19;
  --surface-alt: #1C2620;
  --border: #283A30;

  --ink: #ECF3EE;
  --ink-soft: #A9BBAF;
  --ink-faint: #6E8276;

  --primary: #57D6A8;
  --primary-ink: #0E1C16;
  --accent: #FFA374;

  --cat-low: #7FACE6;
  --cat-normal: #57D6A8;
  --cat-over: #F0C25C;
  --cat-obese1: #F0975C;
  --cat-obese2: #E36A58;

  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 18px 36px -18px rgba(0,0,0,.6);
}


*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
img,svg{ display:block; max-width:100%; }
h1,h2,h3{ font-family: var(--font-display); margin: 0 0 .5em; color: var(--ink); }
p{ margin: 0 0 1em; color: var(--ink-soft); }
a{ color: var(--primary); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background: var(--primary); color: var(--primary-ink);
  padding: 12px 18px; border-radius: 0 0 var(--radius-s) 0; z-index: 100;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}


.site-header{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 64px;
}
.brand{
  display:flex; align-items:center; gap:.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: .9rem;
  transform: rotate(45deg);
}

.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink);
}
.theme-toggle .icon{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }


.hero{ padding: 40px 0 36px; }
.hero-grid{
  display:grid;
  gap: 28px;
}
@media (min-width: 880px){
  .hero{ padding: 72px 0 56px; }
  .hero-grid{
    grid-template-columns: 1.05fr .95fr;
    align-items: start;
    gap: 56px;
  }
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 .9em;
  font-weight: 500;
}
.hero-copy h1{
  font-size: clamp(1.9rem, 4.6vw + .6rem, 2.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.lead{ font-size: 1.05rem; max-width: 34em; }
.hero-note{
  font-size: .85rem;
  color: var(--ink-faint);
  display:flex; align-items:center; gap:.5em;
}
.hero-note::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--primary); flex-shrink:0;
}
.hero-jump{
  display:none;
  margin-top: 1.4em;
  font-weight: 600;
  text-decoration:none;
  font-size: .95rem;
}
@media (max-width: 879px){
  .hero-jump{ display:inline-flex; align-items:center; gap:.4em; }
}

/* carte calculateur */
.calc-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 22px;
  box-shadow: var(--shadow-card);
  display:flex; flex-direction:column; gap: 20px;
}
@media (min-width:560px){ .calc-card{ padding: 28px; } }

.field-group{ display:flex; flex-direction:column; gap:.55em; }
.field-label, .field-label-row label{
  font-size: .82rem; font-weight: 600; color: var(--ink-soft);
}
#sexe-label{ font-size:.82rem; font-weight:600; color: var(--ink-soft); }

.field-label-row{ display:flex; align-items:baseline; justify-content:space-between; gap: 1em; }
.field-value{
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .92rem;
  color: var(--primary);
  white-space: nowrap;
}

/* segmented control sexe */
.segmented{
  display:grid; grid-template-columns: 1fr 1fr;
  background: var(--surface-alt);
  border-radius: var(--radius-s);
  padding: 4px;
  position: relative;
}
.segmented input{
  position:absolute; opacity:0; width:1px; height:1px;
}
.segmented label{
  position:relative; z-index:1;
  text-align:center;
  padding: 11px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .2s var(--ease);
}
.segmented input:checked + label{
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.segmented input:focus-visible + label{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* champs nombre + curseur combinés */
.field-control{ display:flex; flex-direction:column; gap: 10px; }
.number-input{
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  width: 100%;
  min-height: 48px;
  -moz-appearance: textfield;
}
.number-input::-webkit-outer-spin-button,
.number-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height: 28px;
  background: transparent;
  margin:0;
}
input[type="range"]::-webkit-slider-runnable-track{
  height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary) var(--fill,50%), var(--border) var(--fill,50%));
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--primary);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  cursor: pointer;
}
input[type="range"]::-moz-range-track{
  height: 6px; border-radius: 4px; background: var(--border);
}
input[type="range"]::-moz-range-progress{
  height: 6px; border-radius: 4px; background: var(--primary);
}
input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--primary);
  cursor: pointer;
}

.form-hint{
  font-size: .78rem; color: var(--ink-faint); margin:0;
}


.result{ padding: 8px 0 56px; }
.result-top{
  display:grid; gap: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 28px 22px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 720px){
  .result-top{
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 32px 36px;
  }
}

.result-main{ text-align:center; }
@media (min-width:720px){ .result-main{ text-align:left; } }

.result-label{
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing:.09em; text-transform:uppercase;
  color: var(--ink-faint); margin:0 0 .3em;
}
.result-number{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(3.2rem, 8vw, 4.6rem);
  line-height: 1;
  margin: 0;
  color: var(--ink);
  letter-spacing: -.02em;
}
.result-category{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  margin: .5em 0 0;
  font-weight: 600;
}
@media (min-width:720px){ .result-category{ justify-content:flex-start; } }
.category-dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--category-color, var(--primary));
  flex-shrink:0;
}

.gauge-wrap{ display:flex; flex-direction:column; gap: 10px; }
.gauge{ width:100%; height:auto; overflow:visible; }
#gauge-marker{ transition: transform .5s var(--ease); }
#gauge-marker line{ stroke: var(--ink); stroke-width: 2; }
#gauge-marker polygon{ fill: var(--ink); }
#gauge-marker text{
  font-family: var(--font-mono); font-size: 13px; font-weight:700;
  fill: var(--ink);
}

.gauge-legend{
  display:flex; flex-wrap:wrap; gap: 14px 18px;
  font-size: .76rem; color: var(--ink-faint);
}
.gauge-legend span{ display:flex; align-items:center; gap:.4em; }
.gauge-legend i{
  width:8px; height:8px; border-radius:50%; background: var(--c);
  display:inline-block;
}

/* poids idéal — cartes formules */
.ideal-weight{ margin-top: 36px; }
.ideal-weight h2{ font-size: 1.4rem; }
.section-intro{ max-width: 42em; }

.formula-grid{
  display:grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px){
  .formula-grid{ grid-template-columns: repeat(4, 1fr); }
}
.formula-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 16px;
}
.formula-name{
  font-size: .78rem; font-weight:600; color: var(--ink-soft);
  margin: 0 0 .5em;
}
.formula-value{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary);
  margin:0;
}
.formula-note{
  font-size: .72rem; color: var(--ink-faint); margin: .4em 0 0;
}

.about{ padding: 8px 0 56px; }
.two-col{
  display:grid; gap: 32px;
}
@media (min-width: 780px){
  .two-col{ grid-template-columns: 1fr 1fr; gap: 48px; }
}
.about h2{ font-size: 1.25rem; }

.ranges-list{ display:flex; flex-direction:column; gap: 10px; margin-top: 1em; }
.ranges-list li{
  display:flex; align-items:center; gap: .65em;
  font-size: .92rem; color: var(--ink-soft);
}
.ranges-list strong{ color: var(--ink); }
.dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--c); flex-shrink:0;
}


.faq{ padding: 8px 0 64px; }
.faq h2{ font-size: 1.4rem; margin-bottom: .9em; }

.accordion-item{
  border-bottom: 1px solid var(--border);
}
.accordion-item:first-child{ border-top: 1px solid var(--border); }
.accordion-heading{ margin:0; }

.accordion-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap: 1em;
  background:none; border:none;
  padding: 18px 4px;
  text-align:left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor:pointer;
}
.accordion-trigger::after{
  content:"+";
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--primary);
  flex-shrink:0;
  transition: transform .25s var(--ease);
}
.accordion-trigger[aria-expanded="true"]::after{ transform: rotate(45deg); }

.accordion-panel{ padding: 0 4px 18px; }
.accordion-panel p{ margin:0; max-width: 50em; }

.site-footer{
  border-top: 1px solid var(--border);
  padding: 26px 0 40px;
}
.site-footer p{ font-size: .82rem; color: var(--ink-faint); margin:0 0 .4em; }
.footer-meta{ margin:0; }