/* ==========================================================
   rattachement.fr — feuille de style de la page d'accueil
   Autonome. Ne remplace pas /assets/style.css (autres pages).
   ========================================================== */

:root{
  --rouge:#C8102E;
  --rouge-clair:#E8636F;
  --bleu:#1A2432;
  --bleu-fonce:#131C28;
  --ambre:#E8A33C;
  --papier:#F7F6F2;
  --papier-2:#EFEDE6;
  --carte:#FDFCFA;
  --ligne:#E3DFD5;
  --texte:#1A2432;
  --texte-2:#4A5766;
  --texte-3:#6A7788;
  --texte-4:#8A95A3;
  --clair-1:#D6DFE8;
  --clair-2:#C2CEDA;
  --clair-3:#AEBCCA;
  --max:1150px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.6;color:var(--texte);
  background:var(--papier);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:4.5rem 0}
.section--papier{background:var(--papier)}
.section--papier2{background:var(--papier-2);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.section--bleu{background:var(--bleu)}
.center{text-align:center}

/* ---------- Typographie ---------- */
.kicker{
  font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--rouge);margin-bottom:.55rem;font-weight:600;
}
.kicker--ambre{color:var(--ambre)}
h1{
  font-size:clamp(2.5rem,5vw,4rem);line-height:1.03;font-weight:600;
  letter-spacing:-.042em;margin-bottom:1.3rem;
}
h2{
  font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.12;font-weight:600;
  letter-spacing:-.035em;margin-bottom:.6rem;
}
h3{font-size:1.35rem;line-height:1.28;font-weight:500;letter-spacing:-.018em}
h4{font-size:.95rem;font-weight:600;line-height:1.35}
.sous-titre{font-size:1.18rem;color:var(--texte-2);line-height:1.62}
.note{font-size:1rem;color:var(--texte-3)}
.blanc{color:#fff}
.blanc-2{color:var(--clair-2)}
.sous-titre--clair{color:var(--clair-1)}
.contact-ligne{margin-top:1.4rem;font-size:.98rem;color:var(--clair-1)}
.contact-ligne a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px}
.lien--ambre{color:var(--ambre);border-color:var(--ambre)}

/* ---------- En-tête ---------- */
.tete{
  position:sticky;top:0;z-index:60;background:var(--bleu);
}
.tete-in{
  max-width:var(--max);margin:0 auto;padding:.75rem 24px;
  display:flex;align-items:center;gap:1rem;
}
.filet{height:4px;background:linear-gradient(90deg,var(--rouge) 0,var(--rouge) 62%,var(--ambre) 62%,var(--ambre) 100%)}

.logo{display:inline-flex;align-items:center;gap:.5rem}
.logo img{width:34px;height:34px}
.logo-txt{color:#fff;font-size:1.2rem;letter-spacing:-.02em;font-weight:500}
.logo-txt span{color:var(--rouge-clair)}

.menu{margin-left:auto;display:flex;gap:1.5rem;font-size:.95rem;color:var(--clair-1)}
.menu a{padding-bottom:3px;transition:color .15s}
.menu a:hover{color:#fff}
.menu a.actif{color:#fff;border-bottom:2px solid var(--rouge)}

.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;margin-left:auto;padding:4px}
.burger span{width:20px;height:1.5px;background:#fff;display:block}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;font-size:1.02rem;font-weight:500;padding:.9rem 1.6rem;
  border-radius:7px;border:1px solid transparent;cursor:pointer;transition:.15s;
}
.btn--rouge{background:var(--rouge);color:#fff}
.btn--rouge:hover{background:#A60D26}
.btn--ligne{border-color:var(--bleu);color:var(--bleu)}
.btn--ligne:hover{background:var(--bleu);color:#fff}
.btn--clair{background:#fff;color:var(--rouge)}
.lien{font-size:1.02rem;color:var(--rouge);border-bottom:1px solid var(--rouge);padding-bottom:1px}

/* ---------- Bloc 1 ---------- */
.hero{display:grid;grid-template-columns:1.25fr .82fr;gap:2.6rem;align-items:center}
.hero-txt{max-width:36rem}
.indics{list-style:none;margin:1.6rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--ligne);display:flex;gap:1.8rem;flex-wrap:wrap}
.indics li{display:flex;gap:.7rem;align-items:flex-start;flex:1;min-width:11rem}
.indics b{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.035em;line-height:1.1;margin-bottom:.2rem}
.indics span{display:block;font-size:.88rem;color:var(--texte-3);line-height:1.45}

.quiz-bloc{background:var(--bleu);border-radius:12px;padding:2rem 1.7rem;text-align:center}
.quiz-intro{font-size:.95rem;color:var(--clair-2);margin-bottom:1.4rem}
.quiz-q{font-size:1rem;color:#fff;margin-bottom:.9rem}
.quiz-q--sombre{color:var(--texte-2)}
.quiz-opt{
  display:block;width:100%;border:1px solid rgba(255,255,255,.22);border-radius:8px;
  padding:1.05rem;font-size:1.02rem;color:#fff;background:none;cursor:pointer;
  margin-bottom:.5rem;transition:.15s;font-family:inherit;
}
.quiz-opt:hover{border-color:var(--ambre);background:rgba(232,163,60,.1)}
.jauge{display:flex;gap:5px;align-items:center;justify-content:center;margin-top:.9rem}
.jauge i{height:3px;width:34px;background:rgba(255,255,255,.2);border-radius:2px;display:block}
.jauge i.on{background:var(--rouge)}
.jauge em{font-size:.8rem;color:var(--clair-3);font-style:normal;margin-left:.4rem}

/* ---------- Icones ---------- */
.ico-s,.ico-l,.ico-xl{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;display:block}
.ico-s{width:17px;height:17px;display:inline-block;vertical-align:-3px;margin-right:.45rem}
.ico-l{width:34px;height:34px}
.ico-xl{width:52px;height:52px;margin:0 auto 1.1rem}
.ico-rouge{color:var(--rouge)}
.ico-bleu{color:var(--bleu)}
.ico-ambre{color:var(--ambre)}
.ico-or{color:#B8891A}

/* ---------- Grilles ---------- */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.g4--filet{gap:0}
.g4--filet>*{padding:0 1rem;border-right:1px solid rgba(255,255,255,.13)}
.g4--filet>*:last-child{border-right:0}

/* ---------- Mémo ---------- */
.memo{text-align:center}

.memo h3{color:#fff;font-size:1.25rem;font-weight:500;margin-bottom:.55rem;letter-spacing:-.015em}
.memo p{font-size:1rem;color:var(--clair-1);line-height:1.62}

/* ---------- Chronologie ---------- */
.chrono{margin-top:2.2rem;padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.13)}
.chrono-t{font-size:1.05rem;color:var(--clair-3);text-align:center;margin-bottom:1.7rem}
.frise{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.frise li{display:grid;grid-template-rows:auto auto auto;text-align:center;
  padding:0 .8rem;position:relative}
.frise-date{font-size:1rem;color:var(--ambre);font-weight:600;letter-spacing:.02em;
  margin-bottom:1rem;display:block;white-space:nowrap}
.frise-point{width:15px;height:15px;border-radius:50%;background:var(--bleu);
  border:2px solid var(--clair-3);margin:0 auto 1rem;position:relative;z-index:2}
.frise li::after{content:"";position:absolute;top:calc(1rem + 1.5rem + 6px);
  left:50%;right:-50%;height:2px;background:rgba(255,255,255,.18);z-index:1}
.frise li:last-child::after{display:none}
.frise-txt{font-size:.95rem;color:var(--clair-1);line-height:1.55;display:block}
.frise--on .frise-date{color:#fff}
.frise--on .frise-point{background:var(--rouge);border-color:var(--rouge);
  box-shadow:0 0 0 5px rgba(200,16,46,.28)}
.frise--on .frise-txt{color:#fff;font-weight:500}

/* ---------- Tuiles ---------- */
.tuile{
  background:var(--carte);border:1px solid var(--ligne);border-radius:0 0 10px 10px;
  padding:2.1rem 1.6rem;display:flex;flex-direction:column;text-align:center;
}
.tuile--rouge{border-top:3px solid var(--rouge)}
.tuile--bleu{border-top:3px solid var(--bleu)}
.tuile--ambre{border-top:3px solid var(--ambre)}
.tuile>i{font-size:4rem;display:block;margin-bottom:1rem}
.tuile h3{margin-bottom:.6rem}
.tuile p{font-size:1.02rem;color:var(--texte-3);line-height:1.65}
.tuile-tags{
  font-size:.95rem;color:var(--texte-4);line-height:1.8;
  padding-top:1rem;margin-top:1rem;border-top:1px solid var(--ligne);
}
.tuile-pied{margin-top:auto;padding-top:1.1rem}

/* ---------- Plateformes ---------- */
.plateforme{
  background:var(--carte);border:1px solid var(--ligne);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;
}
.plateforme-tete{background:#fff;border-bottom:1px solid var(--ligne);padding:1.3rem;
  display:flex;align-items:center;justify-content:center;min-height:76px}
.plateforme-tete img{height:30px;width:auto}
.plateforme-corps{padding:1.35rem 1.25rem;display:flex;flex-direction:column;flex:1;text-align:center}
.taux{font-size:3.1rem;color:var(--rouge);letter-spacing:-.04em;line-height:1.05;font-weight:500}
.taux-lib{font-size:.92rem;color:var(--texte-4);margin:.35rem 0 1rem}
.plateforme-corps p{font-size:1.02rem;color:var(--texte-3);line-height:1.6}

/* ---------- Simulateur ---------- */
.simu{background:var(--bleu);border-radius:14px;padding:2rem}
.simu-reglages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.3rem 2.2rem;margin-bottom:1.6rem}
.reglage label{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;font-size:.95rem;color:var(--clair-1);margin-bottom:.6rem}
.reglage label b{color:#fff;font-weight:600;font-size:1.05rem;white-space:nowrap}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;
  background:rgba(255,255,255,.2);border-radius:3px;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--ambre);cursor:pointer;border:0;
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--ambre);cursor:pointer;border:0;
}
input[type=range]:focus-visible{outline:2px solid var(--ambre);outline-offset:4px}

.simu-encaisse{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1rem 1.2rem;margin-bottom:1.2rem;border-radius:9px;
  background:rgba(255,255,255,.07);font-size:.98rem;color:var(--clair-1);
}
.simu-encaisse b{color:#fff;font-size:1.5rem;font-weight:600;letter-spacing:-.03em}

.simu-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.col-simu{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:1.3rem}
.col-simu--on{border-color:var(--ambre);background:rgba(232,163,60,.09)}
.col-simu h3{color:#fff;font-size:1.12rem;margin-bottom:.9rem;
  padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.14)}
.col-simu--on h3{color:var(--ambre)}
.col-simu dl{margin:0}
.col-simu dl div{display:flex;justify-content:space-between;gap:.8rem;padding:.34rem 0}
.col-simu dt{font-size:.9rem;color:var(--clair-2)}
.col-simu dd{font-size:.95rem;color:#fff;margin:0;font-weight:500;white-space:nowrap}
.col-net{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  margin-top:.8rem;padding-top:.8rem;border-top:2px solid rgba(255,255,255,.22)}
.col-net span{font-size:.95rem;color:var(--clair-1)}
.col-net b{font-size:1.7rem;color:#fff;font-weight:600;letter-spacing:-.035em}
.col-simu--on .col-net b{color:var(--ambre)}
.col-note{font-size:.82rem;color:var(--clair-3);line-height:1.55;margin-top:.9rem}
.simu-avert{font-size:.82rem;color:var(--clair-3);line-height:1.6;
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14)}

.outil{
  border:1px solid var(--ligne);background:var(--carte);border-radius:9px;
  padding:1.25rem .85rem;text-align:center;
}
.outil i{font-size:2.7rem;color:var(--rouge);display:block;margin-bottom:.75rem}
.outil h3{font-size:1.1rem;margin-bottom:.35rem}
.outil p{font-size:.92rem;color:var(--texte-4);line-height:1.5}

/* ---------- Blog ---------- */
.article{
  background:var(--carte);border:1px solid var(--ligne);border-radius:10px;
  padding:1.8rem;display:flex;flex-direction:column;
}
.article-meta{font-size:.85rem;color:var(--rouge);letter-spacing:.1em;margin-bottom:.7rem;font-weight:600}
.article h3{margin-bottom:.75rem;font-size:1.4rem;line-height:1.28}
.article p{font-size:1.02rem;color:var(--texte-3);line-height:1.6}

/* ---------- Qui ---------- */
.qui{display:grid;grid-template-columns:1fr 1.1fr;gap:2.1rem;align-items:center}
.presta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.presta>div{text-align:center;padding:1rem}
.presta>div:nth-child(1),.presta>div:nth-child(2){border-bottom:1px solid var(--ligne)}
.presta>div:nth-child(odd){border-right:1px solid var(--ligne)}
.presta i{font-size:2.8rem;color:var(--rouge);display:block;margin-bottom:.75rem}
.presta h3{font-size:1.1rem;margin-bottom:.35rem}
.presta p{font-size:.92rem;color:var(--texte-4);line-height:1.5}

/* ---------- Formulaire final ---------- */
.form-bloc{max-width:33rem;margin:0 auto;background:var(--papier);border-radius:12px;padding:1.5rem;text-align:center}
.form-opt{
  display:block;width:100%;border:1px solid #D9D4C8;border-radius:8px;padding:1.05rem;
  font-size:1.02rem;color:var(--texte);background:#fff;cursor:pointer;margin-bottom:.55rem;
  font-family:inherit;transition:.15s;
}
.form-opt:hover{border-color:var(--rouge)}
.jauge--clair i{background:var(--ligne)}
.jauge--clair i.on{background:var(--rouge)}
.jauge--clair em{color:var(--texte-4)}

/* ---------- Pied ---------- */
.pied{background:var(--bleu-fonce);padding:2rem 0}
.pied-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:1.25rem;padding-bottom:1.1rem;border-bottom:1px solid rgba(255,255,255,.1)}
.pied-grid p{font-size:.92rem;color:var(--clair-3);line-height:1.65}
.pied-col h4{font-size:.85rem;color:var(--ambre);letter-spacing:.09em;margin-bottom:.7rem;font-weight:600}
.pied-col a{display:block;font-size:.95rem;color:var(--clair-1);line-height:2;transition:color .15s}
.pied-col a:hover{color:#fff}
.pied-bas{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding-top:.9rem}
.pied-bas p{font-size:.95rem;color:var(--clair-1);margin:0}
.pied-bas .droite{margin-left:auto;font-size:.82rem;color:rgba(255,255,255,.45)}
.pied-bas a{color:inherit;border-bottom:1px solid transparent}
.pied-bas a:hover{border-bottom-color:currentColor;color:#fff}
.pied-wa{margin-left:1.6rem}

/* ---------- Bulle WhatsApp ---------- */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:80;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 14px rgba(0,0,0,.3);transition:transform .15s;
}
.wa:hover{transform:scale(1.06)}
.wa svg{width:32px;height:32px;color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .pied-grid{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4--filet>*:nth-child(2n){border-right:0}
  .g4--filet>*{padding-bottom:1.5rem}
}
@media(max-width:720px){
  .section{padding:2.6rem 0}
  body{font-size:17px}
  .wrap{padding:0 16px}
  .menu{display:none}
  .menu.ouvert{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--bleu);padding:1rem 16px;gap:.85rem;border-top:1px solid rgba(255,255,255,.12);
  }
  .burger{display:flex}
  .hero,.qui,.simu-grid,.g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr}
  .g4--filet>*{border-right:0;border-bottom:1px solid rgba(255,255,255,.13);padding:1.2rem 0}
  .g4--filet>*:last-child{border-bottom:0}
  .indics{flex-direction:column;gap:1.1rem}
  .frise{grid-template-columns:1fr;gap:0}
  .frise li{grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    text-align:left;padding:0 0 1.4rem 0;column-gap:1rem}
  .frise-point{grid-row:1/3;grid-column:1;margin:.3rem 0 0}
  .frise-date{grid-column:2;margin-bottom:.3rem}
  .frise-txt{grid-column:2}
  .frise li::after{top:1.6rem;bottom:0;left:7px;right:auto;width:2px;height:auto}
  .presta{grid-template-columns:1fr}
  .presta>div{border-right:0 !important;border-bottom:1px solid var(--ligne)}
  .presta>div:last-child{border-bottom:0}
  .simu{padding:1.3rem}
  .simu-reglages{grid-template-columns:1fr;gap:1.1rem}
  .simu-cols{grid-template-columns:1fr}
  .ico-xl{width:44px;height:44px}
  .tete{position:relative}
}


/* ==========================================================
   Logo inline, questionnaire, tableau comparatif
   ========================================================== */
.logo-img{width:34px;height:34px;flex:0 0 auto;display:block}
.sr-seul{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap--etroit{max-width:50rem}

/* ---------- Questionnaire ---------- */
.quiz2{background:var(--carte);border:1px solid var(--ligne);border-radius:14px;
  padding:2rem;margin-top:1rem}
.quiz2-tete{margin-bottom:1.8rem}
.quiz2-barre{height:6px;background:var(--ligne);border-radius:3px;overflow:hidden}
.quiz2-barre span{display:block;height:100%;background:var(--rouge);
  border-radius:3px;transition:width .3s ease}
.quiz2-compteur{font-size:.88rem;color:var(--texte-4);margin-top:.6rem;text-align:right}

.q2{border:0;padding:0;margin:0}
.q2 legend{font-size:1.4rem;font-weight:600;letter-spacing:-.025em;
  line-height:1.25;margin-bottom:1.4rem;color:var(--texte);padding:0}
.q2-opt{
  display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--ligne);border-radius:10px;
  padding:1.1rem 1.3rem;margin-bottom:.7rem;transition:.15s;
}
.q2-opt:hover{border-color:var(--rouge);transform:translateX(3px)}
.q2-opt.choisi{border-color:var(--rouge);background:rgba(200,16,46,.05)}
.q2-opt b{display:block;font-size:1.08rem;font-weight:600;color:var(--texte);margin-bottom:.2rem}
.q2-opt span{display:block;font-size:.92rem;color:var(--texte-3);line-height:1.5}

.q2-form{display:flex;flex-direction:column;gap:1rem}
.q2-form label{display:flex;flex-direction:column;gap:.4rem;
  font-size:.95rem;color:var(--texte-2);font-weight:500}
.q2-form input[type=text],.q2-form input[type=tel],.q2-form input[type=email]{
  font-family:inherit;font-size:1.05rem;padding:.85rem 1rem;
  border:1px solid var(--ligne);border-radius:9px;background:#fff;color:var(--texte);
}
.q2-form input:focus{outline:2px solid var(--rouge);outline-offset:2px;border-color:transparent}
.q2-consent{flex-direction:row !important;align-items:flex-start;gap:.7rem !important}
.q2-consent input{margin-top:.3rem;width:18px;height:18px;flex:0 0 auto;accent-color:var(--rouge)}
.q2-consent span{font-size:.9rem;font-weight:400;line-height:1.55;color:var(--texte-3)}
.q2-err{color:var(--rouge);font-size:.92rem}
.btn--large{width:100%;padding:1.05rem;font-size:1.08rem;font-weight:600}
.btn--large:disabled{opacity:.6;cursor:wait}

.q2-retour{
  display:block;margin:1.4rem auto 0;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:.92rem;color:var(--texte-4);
  text-decoration:underline;text-underline-offset:3px;
}
.q2-retour:hover{color:var(--rouge)}

/* ---------- Résultat ---------- */
.q2-res .ico-xl{margin:0 auto 1rem}
.q2-res h2{margin-bottom:1rem}
.res-texte{font-size:1.08rem;line-height:1.7;color:var(--texte-2);margin-bottom:1.6rem}
.res-etapes{list-style:none;margin:0 0 1.8rem;padding:1.4rem;
  background:var(--papier);border-radius:10px}
.res-etapes li{display:flex;gap:.8rem;align-items:flex-start;
  padding:.6rem 0;font-size:1rem;line-height:1.55;color:var(--texte-2)}
.res-etapes li .ico-s{margin-top:.25rem}

.res-cta{background:var(--bleu);border-radius:12px;padding:1.8rem;text-align:center}
.res-cta-t{font-size:1.3rem;font-weight:600;color:#fff;margin-bottom:.5rem;letter-spacing:-.02em}
.res-cta-s{font-size:.98rem;color:var(--clair-1);line-height:1.6;margin-bottom:1.4rem}
.res-btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.res-btns .btn{display:inline-flex;align-items:center;gap:.2rem}
.btn--wa{background:#25D366;color:#0A3A1E;font-weight:600}
.btn--wa:hover{background:#1FB959;color:#0A3A1E}
.res-cta .btn--ligne{border-color:rgba(255,255,255,.5);color:#fff}
.res-cta .btn--ligne:hover{background:#fff;color:var(--bleu)}
.res-lire{margin-top:1.4rem;font-size:.98rem;color:var(--texte-3)}

/* ---------- Tableau comparatif ---------- */
.tableau-simu{overflow-x:auto;margin:1.4rem 0 0;
  border:1px solid rgba(255,255,255,.14);border-radius:10px}
.t-simu{width:100%;border-collapse:collapse;font-size:.95rem;min-width:44rem}
.t-simu th,.t-simu td{padding:.7rem .85rem;text-align:right;
  border-bottom:1px solid rgba(255,255,255,.1)}
.t-simu thead th{background:rgba(255,255,255,.08);color:#fff;
  font-size:.95rem;font-weight:600;text-align:right;white-space:nowrap}
.t-simu thead th:first-child,.t-simu tbody th{text-align:left}
.t-simu tbody th{color:var(--clair-1);font-weight:400;font-size:.92rem;white-space:nowrap}
.t-simu td{color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-simu .col-coop{background:rgba(232,163,60,.1)}
.t-simu thead .col-coop{background:rgba(232,163,60,.2);color:var(--ambre)}
.t-simu .t-net th,.t-simu .t-net td{border-top:2px solid rgba(255,255,255,.25);
  padding-top:.9rem;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.t-simu .t-net th{font-size:1rem;color:#fff}
.t-simu .t-an th,.t-simu .t-an td{font-size:.9rem;color:var(--clair-2);border-bottom:0}
.t-simu td.meilleur{color:var(--ambre)}

.reglage-note{font-size:.82rem;color:var(--clair-3);margin-top:.5rem;line-height:1.5}

/* ---------- Protection ---------- */
.protection-bloc{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.14)}
.protection-t{font-size:1rem;color:#fff;font-weight:600;margin-bottom:.9rem}
.protection-grille{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem}
.protection-grille>div{background:rgba(255,255,255,.05);border-radius:8px;padding:.85rem}
.protection-grille>div.col-coop{background:rgba(232,163,60,.12)}
.protection-grille b{display:block;font-size:.92rem;color:#fff;margin-bottom:.3rem}
.protection-grille span{display:block;font-size:.85rem;color:var(--clair-2);line-height:1.5}

/* ---------- Coûts de création ---------- */
.couts{margin-top:3rem}
.cout{background:var(--carte);border:1px solid var(--ligne);border-radius:10px;
  padding:1.4rem;text-align:center}
.cout h3{font-size:1.08rem;margin-bottom:.6rem}
.cout-prix{font-size:1.9rem;font-weight:600;color:var(--rouge);
  letter-spacing:-.035em;margin-bottom:.6rem}
.cout p{font-size:.9rem;color:var(--texte-3);line-height:1.55}

.bandeau-cta{background:var(--bleu);border-radius:14px;padding:2.4rem 1.8rem;margin-top:3rem}

@media(max-width:900px){
  .protection-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .quiz2{padding:1.3rem}
  .q2 legend{font-size:1.2rem}
  .q2-opt{padding:1rem}
  .res-btns .btn{width:100%;justify-content:center}
  .protection-grille{grid-template-columns:1fr}
  .t-simu{font-size:.88rem}
  .res-cta{padding:1.3rem}
  .bandeau-cta{padding:1.6rem 1.2rem}
}


/* ==========================================================
   v6 — couleurs par statut, animations, pastilles, badges
   ========================================================== */
:root{
  --st-micro:#1E7A4C;
  --st-ei:#0F6E7A;
  --st-eurl:#4A3D9E;
  --st-sasu:#1A2432;
  --st-coop:#B8891A;
  --vert:#1E7A4C;
  --vert-clair:#E8F3ED;
  --rouge-clair-bg:#FBEAED;
}

/* ---------- Icônes animées ---------- */
@keyframes respire{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.14)}
}
.ico-anim{animation:respire 3.2s ease-in-out infinite;transform-origin:center}
.tuile:nth-child(2) .ico-anim{animation-delay:.5s}
.tuile:nth-child(3) .ico-anim{animation-delay:1s}
.memo:nth-child(2) .ico-anim{animation-delay:.4s}
.memo:nth-child(3) .ico-anim{animation-delay:.8s}
.memo:nth-child(4) .ico-anim{animation-delay:1.2s}
.memo:nth-child(5) .ico-anim{animation-delay:1.6s}
@media(prefers-reduced-motion:reduce){.ico-anim{animation:none}}

/* ---------- Mémo : titres ambre en gras ---------- */
.memo h3{color:var(--ambre) !important;font-weight:700 !important;letter-spacing:-.01em}
.memo p b{color:#fff;font-weight:600}

/* ---------- Tuiles entourées ---------- */
.tuile{border:2px solid var(--ligne);border-radius:12px;transition:.2s}
.tuile:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(26,36,50,.1)}
.tuile--rouge{border-color:rgba(200,16,46,.35);border-top:4px solid var(--rouge)}
.tuile--bleu{border-color:rgba(26,36,50,.3);border-top:4px solid var(--bleu)}
.tuile--ambre{border-color:rgba(184,137,26,.4);border-top:4px solid var(--ambre)}
.tuile p b,.tuile-tags b{font-weight:700;color:var(--texte)}

/* ---------- Pourcentages animés ---------- */
.taux{font-variant-numeric:tabular-nums;transition:none}
.taux-anim{color:var(--rouge);font-weight:700}
.taux-bande{height:6px;background:var(--ligne);border-radius:3px;overflow:hidden;margin:.6rem 0 .3rem}
.taux-bande span{display:block;height:100%;background:var(--rouge);border-radius:3px;transition:width .12s linear}
.taux-bornes{display:flex;justify-content:space-between;font-size:.8rem;color:var(--texte-4);margin-bottom:1rem}

/* ---------- Labels et badges du simulateur ---------- */
.col-simu{position:relative;border-width:2px}
.col-label{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;text-align:center;padding:.45rem;
  border-radius:8px 8px 0 0;margin:-1.3rem -1.3rem 1rem;
}
.col-badge{
  position:absolute;top:-.8rem;right:.8rem;background:var(--ambre);color:#12161C;
  font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.25);
  opacity:0;transform:translateY(4px);transition:.25s;pointer-events:none;
}
.col-badge.actif{opacity:1;transform:translateY(0)}

.st-micro{--st:var(--st-micro)}
.st-ei{--st:var(--st-ei)}
.st-eurl{--st:var(--st-eurl)}
.st-sasu{--st:#5B6B7E}
.st-coop{--st:var(--st-coop)}
.col-simu[class*="st-"]{border-color:var(--st);background:rgba(255,255,255,.05)}
.col-simu[class*="st-"] .col-label{background:var(--st);color:#fff}
.col-simu[class*="st-"] h3{color:#fff}
.col-simu .btn{width:100%;margin-top:1rem;text-align:center;font-size:.92rem;padding:.75rem}

/* ---------- Outils : vrais boutons ---------- */
.outil{
  border:2px solid var(--ligne);background:var(--carte);border-radius:12px;
  padding:1.4rem 1rem;text-align:center;display:flex;flex-direction:column;
  transition:.2s;text-decoration:none;
}
.outil:hover{border-color:var(--rouge);transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(26,36,50,.1)}
.outil .btn{margin-top:auto;padding-top:0}
.outil-btn{
  display:inline-block;margin-top:.9rem;background:var(--rouge);color:#fff;
  font-size:.88rem;font-weight:600;padding:.6rem 1.1rem;border-radius:7px;
}
.outil:hover .outil-btn{background:#A60D26}

/* ---------- Pastilles avantages / inconvénients ---------- */
.pc-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.6rem 0}
.pc{background:var(--carte);border:2px solid var(--ligne);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column}
.pc-tete{padding:1rem 1.2rem;color:#fff}
.pc-tete h3{color:#fff;margin:0;font-size:1.15rem}
.pc-tete p{font-size:.85rem;opacity:.9;margin-top:.2rem}
.pc--micro .pc-tete{background:var(--st-micro)}
.pc--ei .pc-tete{background:var(--st-ei)}
.pc--eurl .pc-tete{background:var(--st-eurl)}
.pc--sasu .pc-tete{background:var(--st-sasu)}
.pc--coop .pc-tete{background:var(--st-coop)}
.pc-corps{padding:1.2rem;flex:1}
.pc-liste{list-style:none;margin:0 0 1rem;padding:0}
.pc-liste li{display:flex;gap:.6rem;align-items:flex-start;
  font-size:.92rem;line-height:1.55;color:var(--texte-2);padding:.35rem 0}
.pastille-v,.pastille-r{
  width:18px;height:18px;border-radius:50%;flex:0 0 auto;margin-top:.15rem;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;
}
.pastille-v{background:var(--vert)}
.pastille-r{background:var(--rouge)}
.pc-sep{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texte-4);margin:.9rem 0 .5rem;padding-top:.9rem;border-top:1px solid var(--ligne)}
.pc-liste li:first-child .pc-sep{border-top:0}
.pc-pied{padding:0 1.2rem 1.2rem}
.pc-pied .btn{width:100%;text-align:center}

/* ---------- Blog coloré ---------- */
.article{border:2px solid var(--ligne);border-radius:12px;transition:.2s}
.article:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(26,36,50,.1)}
.article--loi{border-top:4px solid var(--rouge)}
.article--loi .article-meta{color:var(--rouge)}
.article--statut{border-top:4px solid var(--st-eurl)}
.article--statut .article-meta{color:var(--st-eurl)}
.article--coop{border-top:4px solid var(--st-coop)}
.article--coop .article-meta{color:#96700F}
.article--outil{border-top:4px solid var(--st-micro)}
.article--outil .article-meta{color:var(--st-micro)}
.article--bientot{border-top:4px solid var(--texte-4);background:var(--papier-2)}
.article--bientot .article-meta{color:var(--texte-4)}
.article .btn{width:100%;text-align:center}

/* ---------- Bloc anonymat ---------- */
.anonyme{
  display:flex;gap:.8rem;align-items:flex-start;background:var(--vert-clair);
  border:1px solid rgba(30,122,76,.3);border-radius:10px;padding:1rem 1.2rem;margin-bottom:1.6rem;
}
.anonyme svg{color:var(--vert);width:22px;height:22px;flex:0 0 auto;margin-top:.15rem}
.anonyme p{font-size:.92rem;line-height:1.55;color:#14532D;margin:0}
.anonyme b{font-weight:700}

/* ---------- Nos frais ---------- */
.cout{border:2px solid var(--ligne);border-radius:12px;display:flex;flex-direction:column}
.cout--nous{border-color:var(--rouge);background:#fff}
.cout-etiq{font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--rouge);color:#fff;padding:.35rem;border-radius:9px 9px 0 0;margin:-1.4rem -1.4rem 1rem}
.cout .btn{margin-top:auto;width:100%;text-align:center}

/* ---------- Menu ---------- */
.burger{display:flex !important}
.menu{gap:1.2rem}

@media(max-width:1080px){.menu{display:none}}
@media(max-width:900px){
  .pc-grille{grid-template-columns:1fr}
}
@media(max-width:720px){
  .col-label{margin:-1.3rem -1.3rem .9rem}
  .pc-grille{grid-template-columns:1fr}
}

.simu-cols--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem}
.simu-cols--5 .col-simu{padding:1.1rem .9rem}
.simu-cols--5 .col-label{font-size:.68rem;margin:-1.1rem -.9rem .9rem;line-height:1.3;padding:.4rem .3rem}
.simu-cols--5 .col-simu dt{font-size:.82rem}
.simu-cols--5 .col-simu dd{font-size:.86rem}
.simu-cols--5 .col-net b{font-size:1.35rem}
.simu-cols--5 .col-badge{font-size:.66rem;padding:.25rem .5rem;right:.4rem}
@media(max-width:1080px){.simu-cols--5{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}}
@media(max-width:720px){.simu-cols--5{grid-template-columns:1fr}}


/* ==========================================================
   v7 — scène animée, carrousel, formulaire, newsletter
   ========================================================== */

/* ---------- Berline animée (page de résultat) ---------- */
@keyframes rb-route{from{background-position-x:0}to{background-position-x:-240px}}
@keyframes rb-arbres{from{transform:translateX(0)}to{transform:translateX(-320px)}}
@keyframes rb-roue{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes rb-susp{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.scene{position:relative;height:190px;border-radius:12px;overflow:hidden;
  background:linear-gradient(#1A2432 0%,#243244 58%,#243244 100%);margin-bottom:1.6rem}
.scene-arbres{position:absolute;bottom:52px;left:0;width:200%;height:70px;
  animation:rb-arbres 4s linear infinite}
.scene-bitume{position:absolute;bottom:0;left:0;right:0;height:52px;background:#39424E}
.scene-bande{position:absolute;bottom:24px;left:0;right:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--ambre) 0 60px,transparent 60px 120px);
  background-size:240px 4px;animation:rb-route 1.1s linear infinite}
.scene-voiture{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  animation:rb-susp 1.3s ease-in-out infinite}
.roue{animation:rb-roue .5s linear infinite;transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){
  .scene-arbres,.scene-bande,.scene-voiture,.roue{animation:none}}
@media(max-width:720px){.scene{height:150px}.scene-voiture svg{width:170px;height:54px}}

/* ---------- Résultat du questionnaire ---------- */
.merci{text-align:center;margin-bottom:.4rem}
.merci h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.6rem}
.merci-s{font-size:1.1rem;color:var(--texte-2);line-height:1.6;max-width:36rem;margin:0 auto 1.6rem}
.orientation-bloc{border:2px solid var(--ligne);border-radius:12px;overflow:hidden;
  background:var(--carte);margin-bottom:1.6rem}
.orientation-tete{background:var(--bleu);padding:1.1rem 1.4rem}
.orientation-tete p{font-size:.78rem;color:var(--ambre);letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;margin-bottom:.3rem}
.orientation-tete h3{color:#fff;font-size:1.35rem;margin:0}
.orientation-corps{padding:1.4rem}

/* ---------- Encadré tranche d'impôt ---------- */
.simu-bandes{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.2rem}
.simu-bande{flex:1;min-width:14rem;display:flex;justify-content:space-between;
  align-items:baseline;gap:.7rem;padding:.85rem 1.1rem;border-radius:9px;
  background:rgba(255,255,255,.07);font-size:.98rem;color:var(--clair-1);margin:0}
.simu-bande b{color:#fff;font-size:1.4rem;font-weight:600;letter-spacing:-.03em}
.simu-bande--tmi{background:rgba(232,163,60,.14);color:var(--ambre)}

/* ---------- En-têtes de tuile pleins ---------- */
.col-simu{padding:0;overflow:hidden}
.col-tete{padding:.85rem 1.1rem}
.col-tete p{font-size:.76rem;color:rgba(255,255,255,.85);letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;margin-bottom:.2rem}
.col-tete h3{color:#fff;font-size:1.22rem;margin:0;border:0;padding:0;font-weight:600}
.col-corps{padding:1.1rem}
.st-micro .col-tete{background:var(--st-micro)}
.st-ei .col-tete{background:var(--st-ei)}
.st-eurl .col-tete{background:var(--st-eurl)}
.st-sasu .col-tete{background:#5B6B7E}
.st-coop .col-tete{background:var(--st-coop)}
.col-simu .col-badge{top:-.6rem}

/* ---------- Carrousel ---------- */
.carrousel{display:flex;gap:.8rem;overflow-x:auto;padding:.3rem .3rem 1rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.carrousel>*{flex:0 0 19rem;scroll-snap-align:start}
.carrousel::-webkit-scrollbar{height:8px}
.carrousel::-webkit-scrollbar-track{background:var(--ligne);border-radius:4px}
.carrousel::-webkit-scrollbar-thumb{background:var(--texte-4);border-radius:4px}
.carrousel-tete{display:flex;align-items:baseline;margin-bottom:.4rem}
.carrousel-tete .lien{margin-left:auto}

/* ---------- Formulaire de contact ---------- */
.contact-bloc{max-width:40rem;margin:0 auto;background:var(--carte);
  border:2px solid var(--ligne);border-radius:12px;padding:1.6rem}
.contact-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-bottom:.8rem}
.contact-bloc label{display:block;margin-bottom:.8rem}
.contact-bloc label span{display:block;font-size:.92rem;color:var(--texte-2);
  font-weight:500;margin-bottom:.35rem}
.contact-bloc input,.contact-bloc textarea{
  width:100%;font-family:inherit;font-size:1rem;padding:.8rem;
  border:1px solid var(--ligne);border-radius:9px;background:#fff;color:var(--texte);
}
.contact-bloc textarea{min-height:6rem;resize:vertical}
.contact-bloc input:focus,.contact-bloc textarea:focus{
  outline:2px solid var(--rouge);outline-offset:2px;border-color:transparent}
.contact-bloc .btn{width:100%;text-align:center;font-size:1.02rem;font-weight:600;padding:.9rem}
.contact-ok{background:var(--vert-clair);border:1px solid rgba(30,122,76,.3);
  border-radius:9px;padding:1rem;color:#14532D;font-size:.95rem;margin-top:.9rem}
.contact-err{color:var(--rouge);font-size:.92rem;margin-top:.6rem}

/* ---------- Newsletter ---------- */
.news{background:var(--bleu);border-top:4px solid var(--rouge);padding:1.8rem 0}
.news-in{max-width:40rem;margin:0 auto;text-align:center;padding:0 24px}
.news-in h2{color:#fff;font-size:1.3rem;margin-bottom:.4rem}
.news-in p{font-size:.98rem;color:var(--clair-2);line-height:1.55;margin-bottom:1.1rem}
.news-form{display:flex;gap:.6rem;max-width:28rem;margin:0 auto;flex-wrap:wrap}
.news-form input{flex:1;min-width:12rem;font-family:inherit;font-size:1rem;padding:.8rem;
  border:1px solid rgba(255,255,255,.25);border-radius:9px;
  background:rgba(255,255,255,.06);color:#fff}
.news-form input::placeholder{color:var(--clair-3)}
.news-form input:focus{outline:2px solid var(--ambre);outline-offset:2px}
.news-form button{background:var(--ambre);color:#12161C;font-family:inherit;
  font-size:1rem;font-weight:600;padding:.8rem 1.4rem;border:0;border-radius:9px;cursor:pointer}
.news-form button:hover{background:#D99628}

@media(max-width:720px){
  .contact-grille{grid-template-columns:1fr}
  .carrousel>*{flex:0 0 16rem}
  .simu-bande{min-width:100%}
}