/* ===== Design system ===== */
:root{
  --bg: radial-gradient(1200px 700px at 10% -10%, #ffe6f1 0%, transparent 60%),
        radial-gradient(1400px 900px at 110% 20%, #fff3cf 0%, transparent 55%),
        radial-gradient(1000px 700px at 50% 120%, #e6fff6 0%, transparent 55%),
        #fff;
  --ink:#17181b; --muted:#6f7480;

  /* brand foncé (meilleur contraste) */
  --brand:#c2185b;
  --brand-rgb:194,24,91;

  --brand-2:#ff7aaf; --success:#27c49a; --warn:#ffb300;
  --panel:#ffffff; --border:#f2dbe6;
  --radius:16px; --radius-xl:28px;
  --shadow-lg:0 20px 50px rgba(var(--brand-rgb),.15), 0 4px 12px rgba(0,0,0,.06);
  --shadow:0 14px 30px rgba(var(--brand-rgb),.12), 0 2px 8px rgba(0,0,0,.05);
  --focus:0 0 0 3px rgba(var(--brand-rgb),.25);
}

/* ===== Reset & fonts ===== */
*,*::before,*::after{ box-sizing:border-box }
html,body{ min-height:100%; width:100%; overflow-x:clip }
img,svg,video{ display:block; max-width:100%; height:auto }
button{ font:inherit }
input,select,textarea{ font:inherit }

@font-face{
  font-family: 'Inter';
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* … autres graisses Inter éventuelles: 500/600/700/800 … */

body{
  margin:0;
  color:var(--ink);
  font:16px/1.65 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing:antialiased;
  background:none; position:relative;
}
/* APRÈS */
h1,h2,h3,h4{ font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial }
.site-title, .wordmark{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-weight:800; font-size:20px; letter-spacing:.2px;
}
/* Fond */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--bg); background-repeat:no-repeat; background-attachment:fixed;
}
@media (max-width:768px){ body::before{ background-attachment:scroll } }

/* Layout */
.container{ max-width:1200px; margin:0 auto; padding:20px 24px }
.header{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:4px 0 16px }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit }
.logo{
  width:42px; height:42px; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #f7cfa4 0 40%, transparent 41% 100%),
              radial-gradient(circle at 50% 50%, #ff9bc0 0 52%, #ff6aa1 53% 100%);
  border:1px solid #ffd0df;
  box-shadow:inset 0 6px 10px rgba(255,255,255,.45), 0 8px 20px rgba(var(--brand-rgb),.25);
}
.site-title{ font-weight:700; font-size:20px; letter-spacing:.2px }
.badge{ padding:.35rem .6rem; border-radius:999px; border:1px solid var(--border); background:#fff; color:#9a4f6d; font-weight:800 }

/* ===== Hero compact (1 colonne) ===== */
.hero{
  background:linear-gradient(180deg,#fff,#fff8fb);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:18px 18px 16px;
  max-width:100%;
}
.hero-compact h1{
  margin:0 0 6px;
  font-size:clamp(26px, 2.2vw + 18px, 36px);
  line-height:1.15;
  letter-spacing:.2px;
  font-weight:800;
}
.hero p{
  margin:0 0 6px;
  color:var(--muted);
  max-width:68ch;
}
.hero-compact h2{
  margin:0;
  font-size:clamp(18px, 1.1vw + 13px, 22px);
  font-weight:700;
  color:#222;
}

/* ===== Calculator ===== */
.calc{ margin:18px 0; display:grid; grid-template-columns:1.15fr .85fr; gap:22px; max-width:100% }
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow); max-width:100% }
.panel h3{ margin:0 0 10px; font-size:20px; font-weight:700 }
.small{ color:var(--muted); font-size:.92rem; margin-top:4px }

.shape-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; max-width:100% }
.btn{
  appearance:none; border:1px solid var(--brand); border-radius:12px; padding:.6rem .85rem;
  font-weight:800; cursor:pointer; transition:transform .06s ease, filter .2s ease, box-shadow .2s ease;
  background:#fff; color:var(--brand); min-width:0; max-width:100%;
}
.btn:hover{ background:#fff5fa }
.btn.active{ background:var(--brand); color:#fff; box-shadow:0 8px 18px rgba(var(--brand-rgb),.2) }
.btn.primary{ background:var(--brand); color:#fff }
.btn.primary:hover{ filter:brightness(.98) }

.grid-2{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px; max-width:100%;
}
.grid-2 > *{ min-width:0 }

.label{ font-weight:700; margin-bottom:4px }
.input, .select{
  width:100%; padding:.6rem .7rem; border:1px solid #e9e9eb; border-radius:12px; font:inherit; background:#fff;
  display:block; min-height:44px;
}
.input:focus, .select:focus{ outline:none; box-shadow:var(--focus); border-color:var(--brand) }

.shape-visual{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:8px; max-width:100% }
.shape-visual picture{ display:none; border:1px solid #ffe0ec; border-radius:14px; overflow:hidden; background:#fff }
.shape-visual picture.active{ display:block }

/* Factor pill */
.factor{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px;
  border:1px dashed var(--border); background:#fff; border-radius:14px; padding:10px 12px;
}
.factor .value{ font-weight:800; font-size:22px }
.factor .hint{ color:var(--muted) }
.factor .flag{ padding:.25rem .55rem; border-radius:999px; font-weight:700; border:1px solid #ffe1ec; background:#fff8fb }

/* Table ingrédients */
.table-wrap{ border:1px solid var(--border); border-radius:16px; overflow:auto; background:#fff; margin-top:10px; max-width:100% }
table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed }
thead th{
  position:sticky; top:0; background:linear-gradient(180deg,#fff,#fff8fb);
  border-bottom:1px solid var(--border); text-align:left; font-size:.92rem; padding:10px; z-index:1;
  white-space:normal;
}
tbody td{ padding:8px 10px; border-bottom:1px solid #f4edf1; word-break:break-word }
tbody tr:last-child td{ border-bottom:none }
tbody tr:hover{ background:#fffdf7 }
td input{
  width:100%; border:1px solid #e6e7ea; border-radius:10px; padding:.5rem .6rem; font:inherit; background:#fff;
  display:block; min-height:42px;
}
td input:focus{ outline:none; box-shadow:var(--focus); border-color:var(--brand) }
td .x{ cursor:pointer; border:0; background:transparent; font-size:18px; line-height:1 }
tfoot td{ padding:10px; border-top:1px solid var(--border); background:#fffefc; font-weight:800 }

.tools{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }

/* Notes & tips */
.kpis{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px }
.kpi{ border:1px dashed var(--border); border-radius:14px; padding:10px; background:#fff }
.kpi h4{ margin:0 0 6px; font-size:15px; font-weight:700 }
.note-warn{ color:#7a4b00 }

/* SEO section */
.content{
  margin:26px 0; background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow);
  padding:18px; max-width:100%;
}
.content h2{ margin:0 0 10px; font-size:24px; font-weight:700 }
.content h3{ margin:16px 0 8px; font-size:18px; font-weight:700 }

/* FAQ */
.faq{ margin:18px 0 }
.faq-item{ border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden; margin-bottom:10px }
.faq-q{
  width:100%; text-align:left; padding:12px 14px; border:0; background:#fff;
  font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
}
.faq-q:focus{ outline:none; box-shadow:var(--focus) }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 14px }
.faq-item.open .faq-a{ max-height:400px; padding:0 14px 12px }
.faq-item .chev{ transition:transform .25s ease }
.faq-item.open .chev{ transform:rotate(180deg) }

.footer{ margin:22px 0 12px; text-align:center; color:#6f7480; font-size:.95rem }

/* ===== Responsive ===== */
@media (max-width:1000px){
  .calc{ grid-template-columns:1fr }
  .kpis{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .grid-2{ grid-template-columns:1fr; row-gap:10px }
  .hero-compact h1{ font-size:30px }
}

/* ===== Table -> cartes sur mobile ===== */
th, td{ word-break:break-word }

@media (max-width:560px){
  .table-wrap{ border:0; background:transparent; overflow:hidden }

  #tbl{ width:100%; border-collapse:separate; border-spacing:0; display:block }
  #tbl thead{ display:none }

  #tbl tbody{ display:block }
  #tbl tbody tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    gap:8px 10px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    margin-bottom:10px;
    position:relative;
    box-sizing:border-box;
    max-width:100%;
  }
  #tbl tbody td{ border:0; padding:0; min-width:0 }

  #tbl tbody td:nth-child(1){ grid-column:1 / -1; grid-row:1 }
  #tbl tbody td:nth-child(2){ grid-column:1; grid-row:2 }
  #tbl tbody td:nth-child(3){
    grid-column:2; grid-row:2; text-align:right; align-self:center; font-weight:800; white-space:nowrap; min-width:0;
  }
  #tbl tbody td:nth-child(4){
    position:absolute; top:10px; right:10px; padding:0; margin:0; grid-column:auto; grid-row:auto; z-index:1;
  }

  #tbl tfoot{ display:block; max-width:100% }
  #tbl tfoot tr{
    display:flex; justify-content:space-between; gap:10px;
    border:1px solid var(--border); border-radius:12px; background:#fff;
    padding:10px; margin-top:6px; box-sizing:border-box;
  }
  #tbl tfoot td{ border:0; padding:0 }
}

/* Affinages */
td input{ font-size:clamp(14px,3.8vw,16px) }
.tools{ row-gap:6px }

/* Anti-overflow */
html, body { overflow-x: clip; }
.container, .hero, .calc, .panel, .content, .table-wrap { max-width: 100%; }
.grid-2, .shape-tabs { min-width: 0; }
.grid-2 > *, .shape-tabs > * { min-width: 0; }

/* Sécurité mobile + anti-scroll */
@media (max-width: 768px){
  body::before { background-attachment: scroll; }
  html, body{ overflow-x:hidden; }
  #params{
    inline-size:100%;
    max-inline-size:100vw;
    overflow-x:clip;
    contain:inline-size;
    position:relative;
  }
  @supports not (overflow: clip){ #params{ overflow-x:hidden; } }
  #params *{ min-width:0 }
  .calc, .panel, .table-wrap{ max-width:100vw; overflow-x:clip; contain:inline-size; }
  .shape-tabs, .tools, .grid-2{ min-width:0; }
  #tbl, #tbl tbody tr{ max-width:100%; min-width:0; }
  #tbl tbody td:nth-child(3){ min-width:0; word-break:break-word; }
  #tbl tbody td:nth-child(4){ right:8px; }
  .input:focus, .select:focus, td input:focus{
    outline:none; box-shadow:0 0 0 2px rgba(var(--brand-rgb),.20) inset;
  }
}

/* Fix chevauchements mobile */
@media (max-width: 560px){
  .factor{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .factor .value{ font-size: clamp(18px, 6vw, 22px); }
  #tbl tbody tr{ grid-template-columns: minmax(0,1fr) minmax(0,10ch); }
  #tbl tbody td:nth-child(3){ justify-self:end; text-align:right; min-width:0; }
  #tbl tbody td:nth-child(3) input{ width:100%; max-width:10ch; min-width:0; }
  #tbl tbody td:nth-child(4){ right:8px; }
}

/* ===== Header 2026 ===== */
.header-2026{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:4px 0 14px;
}
.brand.v2026{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit }
.logo-ring{
  inline-size:36px; block-size:36px; border-radius:50%;
  filter: drop-shadow(0 6px 12px rgba(var(--brand-rgb),.25));
  transition: transform .25s ease, filter .25s ease;
}
.wordmark{
  font-family:"Inter","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-weight:800; letter-spacing:.2px; font-size:20px;
}
.brand.v2026:hover .logo-ring{ transform:translateY(-1px) scale(1.02) }
@media (prefers-reduced-motion: reduce){
  .brand.v2026:hover .logo-ring{ transform:none }
}

/* === Logo ring visible (compat avec le header actuel) === */
.brand .logo{
  width:36px; height:36px; border-radius:50%;
  /* anneau : cercle blanc au centre + dégradé de la brand */
  background:
    radial-gradient(circle at 50% 50%, #fff 0 46%, transparent 47% 100%),
    linear-gradient(90deg, var(--brand), #ffe6f1);
  border:1px solid #ffd0df;
  box-shadow: inset 0 6px 10px rgba(255,255,255,.45), 0 8px 20px rgba(var(--brand-rgb),.25);
}
.site-title{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-weight:800; font-size:20px; letter-spacing:.2px;
}