/* Même monde que la landing : polices servies depuis heymossy.com, jamais un hébergeur de
   polices, c'est la promesse « zéro requête tierce ». Palette reprise de site/index.html. */
@font-face{font-family:"Zen Maru";src:url(/police/zen-maru-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Zen Maru";src:url(/police/zen-maru-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --sol:#F2F7E6; --sol2:#E4EFD2; --soleil:#FFF9DE;
  --encre:#152318; --encre2:#3E5540; --encre3:#5E7460;
  --vert:#1E7A57; --vert2:#175F44; --vert-pale:#DCF0E4;
  --f5:#22482E; --f3:#74A85D;
  --bord:rgba(21,35,24,.14); --bord2:rgba(21,35,24,.08);
  --affiche:"Zen Maru",-apple-system,BlinkMacSystemFont,"Hiragino Maru Gothic ProN","Segoe UI",sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,sans-serif;
  --prose:100%;
  --lecture:min(680px,100% - 44px);
  --debord:clamp(0px,(100vw - 44px - 680px) / 2,150px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Le sol peint de la landing, repris tel quel : l'article se tient sur le sol de la clairière,
   pas sur une feuille opaque. */
body{margin:0;color:var(--encre);font-family:var(--ui);font-size:17.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(90% 40% at 78% 0%, rgba(255,249,222,.9) 0%, rgba(255,249,222,0) 60%),
    radial-gradient(120% 70% at 12% 2%, #E7F2D6 0%, #F1F7E4 52%, #E9F2DA 100%) fixed;}
img,svg{max-width:100%;height:auto}
::selection{background:var(--vert-pale);color:var(--encre)}
:focus-visible{outline:2.5px solid var(--vert);outline-offset:3px;border-radius:4px}

/* ── la canopée, en bandeau : on lève les yeux, puis on redescend lire ─────── */
.cime{position:relative;height:clamp(132px,19vw,186px);overflow:hidden;
  background:var(--f5) center/cover}
.cime img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
/* Le dégradé vers le sol : sans lui le bandeau se termine par une ligne nette et l'article a
   l'air collé sous une photo. */
.cime::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(14,34,20,.62) 0%,rgba(14,34,20,.16) 36%,rgba(14,34,20,0) 54%),
    linear-gradient(to bottom,rgba(241,247,228,0) 38%,#EFF5E1 96%)}
.entete{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-start;
  justify-content:space-between;gap:16px;
  width:min(980px,100% - 44px);margin:0 auto;padding:18px 0 0}
.entete a{text-decoration:none;color:#F4F9EA;text-shadow:0 1px 10px rgba(14,34,20,.55)}
.marque{font-family:var(--affiche);font-weight:700;font-size:20px;letter-spacing:-.01em}
.retour{font-size:14.5px;font-weight:600;padding-top:4px}
.retour:hover{text-decoration:underline;text-underline-offset:3px}

main{width:var(--lecture);margin:0 auto;padding:0 0 84px}
article>*{max-width:var(--prose)}
h1{font-family:var(--affiche);font-weight:700;font-size:clamp(31px,4.6vw,46px);line-height:1.1;
  letter-spacing:-.02em;margin:-14px 0 18px;text-wrap:balance;position:relative;z-index:3}
h2{font-family:var(--affiche);font-weight:700;font-size:clamp(21px,2.6vw,27px);line-height:1.25;
  margin:52px 0 14px;letter-spacing:-.012em;text-wrap:balance}
h3{font-size:17.5px;font-weight:700;margin:28px 0 6px}
p{margin:0 0 19px}
a{color:var(--vert2);text-underline-offset:2.5px;text-decoration-thickness:1.5px}
a:hover{color:var(--vert)}
b{font-weight:700}
.chapo{font-size:20px;line-height:1.55}
.signe{font-size:14.5px;line-height:1.5;color:var(--encre3);margin:0 0 8px}

/* ── le verdict : une condition, une réponse. Ce n'est pas une grille de cartes, c'est la
      liste qu'on lit en diagonale quand on est déjà venu pour décider. ───────── */
.choix{border-top:1px solid var(--bord);margin:0 0 34px;max-width:var(--prose)}
.choix div{display:flex;gap:18px;align-items:baseline;justify-content:space-between;
  padding:11px 2px;border-bottom:1px solid var(--bord2)}
.choix span{color:var(--encre2);font-size:16px}
.choix b{font-family:var(--affiche);font-size:16.5px;white-space:nowrap}
.choix em{font-style:normal;color:var(--encre3);font-weight:400;font-size:14.5px}

/* ── le tableau : la pièce maîtresse, donc il sort de la colonne de texte ──── */
.comparatif{max-width:none;width:calc(100% + 2 * var(--debord));
  margin:0 0 14px calc(-1 * var(--debord));overflow-x:auto}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:15.5px;background:#fff;
  border:1px solid var(--bord);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 38px -30px rgba(21,48,31,.5)}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--bord2);vertical-align:top}
thead th{background:var(--sol2);font-weight:700;font-size:13px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--encre2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
.app{font-family:var(--affiche);font-weight:700;font-size:17px;white-space:nowrap}
.app small{display:block;font-weight:400;color:var(--encre3);font-size:12.5px;white-space:normal;
  margin-top:2px}
/* Le schéma vaut la colonne : un rectangle, et ce qui s'y passe à l'échéance. */
.chiffre{font-variant-numeric:tabular-nums;white-space:nowrap}
.mien-ligne td{background:var(--vert-pale)}
.note{font-size:14.5px;color:var(--encre3);margin:0 0 8px}
.note.sous-table{width:calc(100% + 2 * var(--debord));margin-left:calc(-1 * var(--debord));
  max-width:none;padding:0 2px}

.mien{background:#fff;border:1px solid var(--bord);border-radius:14px;padding:15px 18px;
  margin:0 0 19px;font-size:16.5px;color:var(--encre2)}
.fin{border-top:1px solid var(--bord);margin-top:56px;padding-top:28px;max-width:var(--prose)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--vert);color:#fff;
  text-decoration:none;font-family:var(--affiche);font-weight:700;border-radius:13px;
  padding:15px 24px;font-size:17.5px;box-shadow:0 12px 26px -16px rgba(23,95,68,.9);
  transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--vert2);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.pomme{width:17px;height:auto;flex:none;margin-top:-2px}
.sous-btn{font-size:15px;color:var(--encre2);margin:14px 0 0}

/* ── le téléphone : le comparatif ne défile pas latéralement, il devient des fiches ──
   Une table qui déborde est illisible sur un écran de 390 px, et c'est justement là que se
   prend la décision. Même contenu, même source, présentation empilée. */
@media (max-width:900px){
  :root{--debord:0px;--lecture:min(680px,100% - 32px)}
  body{font-size:17px}
  main{padding-bottom:64px}
  .choix div{flex-direction:column;gap:2px;align-items:flex-start}
  .comparatif table,.comparatif tbody,.comparatif tr,.comparatif td{display:block;width:100%}
  .comparatif thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);white-space:nowrap}
  .comparatif table{border:0;background:none;box-shadow:none;border-radius:0}
  .comparatif tr{background:#fff;border:1px solid var(--bord);border-radius:14px;
    padding:6px 2px;margin:0 0 12px;box-shadow:0 14px 30px -26px rgba(21,48,31,.5)}
  .comparatif td{border-bottom:1px solid var(--bord2);padding:11px 15px}
  .comparatif tr td:last-child{border-bottom:0}
  .comparatif td[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--encre3);font-weight:700;
    margin-bottom:4px}
  .comparatif .app{font-size:18px;white-space:normal}
  .mien-ligne{background:var(--vert-pale)}
  .mien-ligne td{background:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── l'index du blog : une liste de décisions, pas une grille de vignettes ── */
.intro{font-size:19px;line-height:1.55;color:var(--encre2);margin:0 0 34px}
.liste{list-style:none;padding:0;margin:0}
.liste li{border-top:1px solid var(--bord);padding:22px 0 20px}
.liste a{font-family:var(--affiche);font-weight:700;font-size:clamp(20px,2.4vw,24px);
  line-height:1.22;letter-spacing:-.012em;text-decoration:none;display:inline-block;
  margin-bottom:6px}
.liste a:hover{text-decoration:underline;text-underline-offset:3px}
.liste p{margin:0;color:var(--encre2);font-size:16.5px}
.liste .quand{display:block;margin-top:7px;font-size:14.5px;color:var(--encre3)}
.suite{border-top:1px solid var(--bord);margin-top:48px;padding-top:22px;font-size:16px;
  color:var(--encre2)}