/* 4Call World — machines a sous. Design system propre au site.
   Palette emeraude/or, Fraunces + Public Sans, mise en page editoriale. */

:root{
  --emerald:#0f5132; --emerald-dp:#0a3a24; --emerald-lt:#1a7a4c;
  --gold:#c8961e; --gold-lt:#e3b23c; --gold-dp:#9a7114;
  --ink:#16211c; --ink-soft:#44544c; --ink-faint:#71837a;
  --paper:#f7f4ec; --paper-2:#efeadd; --card:#fffdf8;
  --rule:#ddd6c4; --rule-soft:#e8e2d4;
  --ok:#1a7a4c; --warn:#a8600f;
  --r:4px; --r-lg:10px;
  --shadow:0 1px 2px rgba(22,33,28,.06),0 8px 24px -12px rgba(22,33,28,.18);
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.68; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--emerald); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--emerald-lt)}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:600; color:var(--ink); line-height:1.18; margin:0 0 .5em; letter-spacing:-.012em}
h1{font-size:clamp(2rem,4.6vw,3.1rem); font-weight:700}
h2{font-size:clamp(1.5rem,2.9vw,2.1rem)}
h3{font-size:1.22rem}
h4{font-size:1.04rem; font-family:"Public Sans",sans-serif; font-weight:700; letter-spacing:.01em}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.narrow{max-width:760px}

/* ---------- masthead ---------- */
.masthead{position:sticky; top:0; z-index:60; background:rgba(247,244,236,.94); backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--rule)}
.masthead-in{display:flex; align-items:center; gap:28px; height:68px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.brand img{width:34px; height:34px}
.brand-name{font-family:"Fraunces",serif; font-weight:700; font-size:1.2rem; letter-spacing:-.02em; line-height:1}
.brand-sub{display:block; font-family:"Public Sans",sans-serif; font-size:9.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--gold-dp); margin-top:3px}
.nav{display:flex; gap:4px; margin-left:auto; align-items:center}
.nav a{font-size:14.5px; font-weight:500; color:var(--ink-soft); text-decoration:none; padding:8px 12px; border-radius:var(--r)}
.nav a:hover{color:var(--emerald); background:var(--paper-2)}
.nav a.on{color:var(--emerald); font-weight:700; box-shadow:inset 0 -2px 0 var(--gold)}
.burger{display:none; margin-left:auto; width:40px; height:40px; border:1px solid var(--rule); background:var(--card); border-radius:var(--r); cursor:pointer; padding:10px}
.burger span{display:block; height:1.5px; background:var(--ink); margin:4px 0; transition:.2s}
.drawer{display:none; border-bottom:1px solid var(--rule); background:var(--card)}
.drawer.open{display:block}
.drawer a{display:block; padding:13px 24px; border-bottom:1px solid var(--rule-soft); color:var(--ink); text-decoration:none; font-size:15px}
.drawer a:last-child{border-bottom:0}

/* ---------- lede ---------- */
.lede{padding:56px 0 44px; border-bottom:1px solid var(--rule)}
.lede-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:14px}
.lede p.sub{font-size:1.14rem; color:var(--ink-soft); max-width:50ch; margin-bottom:22px}
.lede-img{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--rule); box-shadow:var(--shadow)}
.facts{display:flex; gap:28px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--rule)}
.fact-n{font-family:"Fraunces",serif; font-size:1.62rem; font-weight:700; color:var(--emerald); line-height:1}
.fact-l{font-size:12.5px; color:var(--ink-faint); margin-top:4px}

/* ---------- boutons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:"Public Sans",sans-serif;
  font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:var(--r); text-decoration:none; border:1px solid transparent; cursor:pointer; transition:.15s; white-space:nowrap}
.btn-main{background:var(--emerald); color:#fff}
.btn-main:hover{background:var(--emerald-dp); color:#fff}
.btn-gold{background:var(--gold); color:#2a1f05}
.btn-gold:hover{background:var(--gold-lt); color:#2a1f05}
.btn-ghost{border-color:var(--rule); color:var(--ink); background:var(--card)}
.btn-ghost:hover{border-color:var(--emerald); color:var(--emerald)}
.btn-lg{font-size:15.5px; padding:14px 26px}
.btn-sm{font-size:13px; padding:8px 14px}

/* ---------- sections ---------- */
.sec{padding:60px 0; border-bottom:1px solid var(--rule)}
.sec-alt{background:var(--paper-2)}
.sec-head{max-width:66ch; margin-bottom:34px}
.sec-head p{color:var(--ink-soft); margin:0}

/* ---------- classement en lignes ---------- */
.ranks{border-top:1px solid var(--rule)}
.rank{display:grid; grid-template-columns:44px 136px 1fr auto; gap:22px; align-items:center;
  padding:22px 20px; border-bottom:1px solid var(--rule); background:var(--card); transition:.15s}
.rank:hover{background:#fff}
.rank-n{font-family:"Fraunces",serif; font-size:1.7rem; font-weight:700; color:var(--rule); text-align:center}
.rank:first-child .rank-n{color:var(--gold)}
.rank-logo{display:flex; align-items:center; justify-content:center; height:52px; background:var(--paper); border:1px solid var(--rule-soft); border-radius:var(--r); padding:7px}
.rank-logo img{max-height:38px; width:auto; object-fit:contain}
.rank-name{font-family:"Fraunces",serif; font-size:1.14rem; font-weight:700; margin:0 0 3px}
.rank-for{font-size:13.5px; color:var(--gold-dp); font-weight:600; margin:0 0 5px}
.rank-why{font-size:14.5px; color:var(--ink-soft); margin:0; max-width:62ch}
.rank-act{display:flex; flex-direction:column; gap:7px; align-items:stretch; min-width:168px}
.pill{display:inline-block; background:var(--emerald); color:#fff; font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:100px; text-align:center}

/* ---------- blocs mecanique ---------- */
.mech{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden}
.mech > div{background:var(--card); padding:26px 22px}
.mech-ico{width:46px; height:46px; margin-bottom:13px; opacity:.95}
.mech h4{color:var(--emerald); margin-bottom:8px}
.mech p{font-size:14.5px; color:var(--ink-soft); margin:0}

/* ---------- index des guides ---------- */
.guides{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.guide{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:.15s}
.guide:hover{border-color:var(--emerald); box-shadow:var(--shadow)}
.guide img{aspect-ratio:16/10; object-fit:cover; border-bottom:1px solid var(--rule)}
.guide-b{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.guide h3{font-size:1.1rem; margin-bottom:7px}
.guide h3 a{text-decoration:none; color:var(--ink)}
.guide h3 a:hover{color:var(--emerald)}
.guide p{font-size:14.2px; color:var(--ink-soft); margin:0 0 14px}
.guide .more{margin-top:auto; font-size:13.5px; font-weight:600; color:var(--emerald); text-decoration:none}

/* ---------- article ---------- */
.article{display:grid; grid-template-columns:230px 1fr; gap:56px; padding:48px 0 64px; align-items:start}
.toc{position:sticky; top:92px; font-size:14px}
.toc-t{font-size:11px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px}
.toc a{display:block; padding:6px 0 6px 13px; border-left:2px solid var(--rule); color:var(--ink-soft); text-decoration:none}
.toc a:hover{border-left-color:var(--gold); color:var(--emerald)}
.prose{max-width:72ch}
.prose h2{margin-top:2em; padding-top:.3em}
.prose h2:first-child{margin-top:0}
.prose > p:first-of-type{font-size:1.13rem; color:var(--ink-soft)}
.prose figure{margin:2em 0}
.prose figure img{border-radius:var(--r-lg); border:1px solid var(--rule)}
.callout{background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--gold); border-radius:var(--r); padding:22px 26px; margin:2em 0}
.callout h4{color:var(--gold-dp); margin-bottom:9px}
.callout p:last-child{margin-bottom:0}
.keypoints{background:var(--emerald); color:#e9f2ec; border-radius:var(--r-lg); padding:28px 30px; margin:2.4em 0}
.keypoints h4{color:#fff; margin-bottom:14px; font-size:1rem}
.keypoints ul{margin:0; padding-left:20px}
.keypoints li{margin-bottom:9px; font-size:15px}
.keypoints li::marker{color:var(--gold-lt)}

/* ---------- avis ---------- */
.verdict{display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; background:var(--card);
  border:1px solid var(--rule); border-radius:var(--r-lg); padding:26px 30px; margin-bottom:34px}
.verdict-logo{width:128px; height:62px; display:flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--rule-soft); border-radius:var(--r); padding:9px}
.verdict-logo img{max-height:44px; width:auto; object-fit:contain}
.verdict p{margin:0; color:var(--ink-soft); font-size:15px}
.specs{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; margin:2em 0}
.specs > div{background:var(--card); padding:17px 18px}
.spec-l{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint)}
.spec-v{font-family:"Fraunces",serif; font-size:1.06rem; font-weight:600; margin-top:4px}
.pc{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:2em 0}
.pc > div{border:1px solid var(--rule); border-radius:var(--r-lg); padding:22px 24px; background:var(--card)}
.pc-up{border-top:3px solid var(--ok)}
.pc-dn{border-top:3px solid var(--warn)}
.pc h4{margin-bottom:11px}
.pc ul{margin:0; padding-left:19px}
.pc li{margin-bottom:7px; font-size:14.5px; color:var(--ink-soft)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule); margin-top:2.4em}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; padding:17px 34px 17px 0; font-weight:600; font-size:16px; list-style:none; position:relative; font-family:"Fraunces",serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); color:var(--gold-dp); font-size:21px; font-family:"Public Sans",sans-serif}
.faq details[open] summary::after{content:"\2212"}
.faq-a{padding:0 34px 20px 0; color:var(--ink-soft); font-size:15.5px}
.faq-a p:last-child{margin-bottom:0}

/* ---------- appel final ---------- */
.cta{background:var(--emerald); color:#fff; border-radius:var(--r-lg); padding:40px 44px; text-align:center}
.cta h2,.cta h3{color:#fff}
.cta p{color:#c9ddd2; max-width:58ch; margin:0 auto 22px}
.cta-row{display:flex; gap:11px; justify-content:center; flex-wrap:wrap}

/* ---------- avertissement ---------- */
.warn{background:#fdf6e8; border:1px solid #ecd9a8; border-radius:var(--r); padding:15px 20px; font-size:14px; color:#6a4e10; margin:2em 0}
.warn strong{color:#4d3808}

/* ---------- pied ---------- */
.foot{background:var(--ink); color:#aebcb4; padding:52px 0 26px; font-size:14.5px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:34px; border-bottom:1px solid #2b3a33}
.foot h4{color:#fff; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
.foot a{color:#aebcb4; text-decoration:none}
.foot a:hover{color:var(--gold-lt)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:9px}
.foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.foot-brand img{width:30px; height:30px}
.foot-brand span{font-family:"Fraunces",serif; font-size:1.1rem; font-weight:700; color:#fff}
.foot-note{padding:22px 0; border-bottom:1px solid #2b3a33; color:#8b9a92; font-size:13.5px}
.foot-bot{display:flex; justify-content:space-between; gap:16px; padding-top:22px; flex-wrap:wrap; color:#8b9a92; font-size:13px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .lede-grid{grid-template-columns:1fr; gap:32px}
  .article{grid-template-columns:1fr; gap:0}
  .toc{display:none}
  .mech{grid-template-columns:repeat(2,1fr)}
  .guides{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:768px){
  body{font-size:16px}
  .nav{display:none}
  .burger{display:block}
  .wrap{padding:0 16px}
  .sec{padding:44px 0}
  .rank{grid-template-columns:38px 1fr; gap:14px; padding:18px 14px}
  .rank-logo{grid-column:2; justify-content:flex-start; height:44px; width:118px}
  .rank-body{grid-column:2}
  .rank-act{grid-column:2; min-width:0; flex-direction:row; flex-wrap:wrap}
  .pc{grid-template-columns:1fr}
  .verdict{grid-template-columns:1fr; gap:16px; text-align:left}
  .cta{padding:30px 22px}
}
@media (max-width:560px){
  .mech,.guides,.specs,.foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* icones des blocs mecanique, dessinees par le DGX */
.mech > div{display:flex; flex-direction:column}