:root{
    --encre:#16231D;
    --sapin:#0F5C45;
    --sapin-fonce:#0A4232;
    --sapin-pale:#E3EFE8;
    --etiquette:#FFD43B;
    --fond:#F3F5F1;
    --blanc:#FFFFFF;
    --gris:#55625B;
    --ligne:#D7DFD9;
    --titre:'Bricolage Grotesque',system-ui,sans-serif;
    --texte:'Source Sans 3',system-ui,sans-serif;
    --largeur:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.wop{margin:0;background:var(--blanc);color:var(--encre);font-family:var(--texte);font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased}
:where(.wop) img{max-width:100%}
:where(.wop) a{color:inherit}
:where(.wop) h1,:where(.wop) h2,:where(.wop) h3{font-family:var(--titre);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0}
:where(.wop) h1{font-size:clamp(2.4rem,5.2vw,4.1rem)}
:where(.wop) h2{font-size:clamp(1.9rem,3.6vw,2.75rem)}
:where(.wop) h3{font-size:1.3rem;font-weight:600;letter-spacing:-.01em}
:where(.wop) p{margin:0}
.conteneur{max-width:var(--largeur);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wop :focus-visible{outline:3px solid var(--etiquette);outline-offset:3px;border-radius:6px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--texte);font-weight:700;font-size:1.05rem;text-decoration:none;border-radius:10px;padding:.9em 1.5em;border:2px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,transform .15s}
.btn-plein{background:var(--sapin);color:#fff}
.btn-plein:hover{background:var(--sapin-fonce)}
.btn-contour{border-color:var(--ligne);color:var(--encre);background:transparent}
.btn-contour:hover{border-color:var(--encre)}
.btn-jaune{background:var(--etiquette);color:var(--encre)}
.btn-jaune:hover{background:#FFE170}
.btn:active{transform:translateY(1px)}

/* Navigation */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.defile{border-bottom-color:var(--ligne)}
.nav .conteneur{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--titre);font-weight:800;font-size:1.25rem;text-decoration:none;letter-spacing:-.02em}
.logo-marque{width:28px;height:28px;border-radius:7px;background:var(--sapin);position:relative;flex:none}
.logo-marque::after{content:"";position:absolute;left:6px;right:6px;top:7px;height:4px;border-radius:2px;background:var(--etiquette);box-shadow:0 7px 0 #fff,0 13px 0 rgba(255,255,255,.55)}
.nav-liens{display:flex;align-items:center;gap:28px;font-size:1rem}
.nav-liens a:not(.btn){text-decoration:none;color:var(--gris)}
.nav-liens a:not(.btn):hover{color:var(--encre)}
.nav .btn{padding:.6em 1.1em;font-size:.98rem}

/* Hero */
.hero{padding:56px 0 96px}
.hero-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.hero h1{max-width:13ch}
.hero-intro{margin-top:24px;font-size:1.25rem;color:var(--gris);max-width:34rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.garanties{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:10px;font-size:1.02rem}
.garanties li{display:flex;align-items:center;gap:10px}
.garanties svg{flex:none;color:var(--sapin)}
.compteur{margin-top:28px;font-size:.98rem;color:var(--gris)}
.compteur strong{color:var(--encre)}

/* Aperçu en direct */
.apercu{position:relative}
.onglets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.onglet{font-family:var(--texte);font-size:.95rem;font-weight:600;color:var(--gris);background:transparent;border:1.5px solid var(--ligne);border-radius:999px;padding:.38em .95em;cursor:pointer;transition:all .15s}
.onglet:hover{color:var(--encre);border-color:var(--encre)}
.onglet[aria-selected="true"]{background:var(--encre);border-color:var(--encre);color:#fff}
.navigateur{border-radius:14px;background:var(--blanc);border:1px solid var(--ligne);box-shadow:0 30px 60px -30px rgba(22,35,29,.35),0 2px 6px rgba(22,35,29,.06);overflow:hidden}
.navigateur-barre{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--fond);border-bottom:1px solid var(--ligne)}
.navigateur-points{display:flex;gap:6px}
.navigateur-points span{width:10px;height:10px;border-radius:50%;background:var(--ligne)}
.navigateur-adresse{flex:1;display:flex;align-items:center;gap:8px;background:var(--blanc);border:1px solid var(--ligne);border-radius:7px;padding:4px 12px;font-size:.88rem;color:var(--gris);min-width:0}
.navigateur-adresse span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecran{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--fond)}
.ecran iframe{position:absolute;top:0;left:0;width:1280px;border:0;transform-origin:0 0}
.apercu-pied{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:14px;font-size:.95rem;color:var(--gris)}
.apercu-pied a{color:var(--sapin);font-weight:700;text-underline-offset:3px}
.apercu-pied .liens{display:flex;gap:18px}
.etiquette{position:absolute;right:-18px;top:34px;z-index:3;background:var(--etiquette);color:var(--encre);padding:14px 18px 14px 26px;border-radius:6px 12px 12px 6px;transform:rotate(4deg);box-shadow:0 10px 20px -10px rgba(22,35,29,.45);font-family:var(--titre);line-height:1.05;text-align:left}
.etiquette::before{content:"";position:absolute;left:9px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--blanc);box-shadow:inset 0 0 0 1.5px rgba(22,35,29,.25)}
.etiquette small{display:block;font-family:var(--texte);font-weight:600;font-size:.8rem}
.etiquette b{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.02em}

/* Sections */
.section{padding:96px 0}
.section-fond{background:var(--fond)}
.entete{max-width:40rem;margin-bottom:48px}
.entete p{margin-top:16px;color:var(--gris);font-size:1.2rem}

/* Étapes */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:etape}
.etape{position:relative;padding-top:64px}
.etape::before{counter-increment:etape;content:counter(etape);position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--titre);font-weight:800;font-size:1.2rem;background:var(--blanc);border:2px solid var(--encre)}
.etape:not(:last-child)::after{content:"";position:absolute;top:22px;left:56px;right:-20px;height:2px;background:repeating-linear-gradient(90deg,var(--ligne) 0 8px,transparent 8px 14px)}
.etape p{margin-top:10px;color:var(--gris)}
.etape-cle::before{background:var(--etiquette);border-color:var(--etiquette)}

/* Offres */
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.offre{display:flex;flex-direction:column;background:var(--blanc);border:1.5px solid var(--ligne);border-radius:16px;padding:32px 28px}
.offre-vedette{border:2px solid var(--sapin);box-shadow:0 24px 48px -28px rgba(15,92,69,.55);position:relative}
.offre-badge{position:absolute;top:-14px;left:28px;background:var(--sapin);color:#fff;font-size:.88rem;font-weight:700;padding:4px 12px;border-radius:999px}
.offre-pour{margin-top:6px;color:var(--gris);font-size:1.02rem;min-height:3.2em}
.prix{margin:22px 0 4px;display:flex;align-items:baseline;gap:6px}
.prix b{font-family:var(--titre);font-size:3.2rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.prix span{font-size:1.4rem;font-weight:700}
.prix-note{font-size:.95rem;color:var(--gris)}
.inclus{list-style:none;padding:0;margin:24px 0 28px;display:grid;gap:11px;font-size:1.02rem;flex:1}
.inclus li{display:flex;gap:10px;align-items:flex-start}
.inclus svg{flex:none;margin-top:4px}
.inclus .oui svg{color:var(--sapin)}
.inclus .non{color:#97A29C}
.inclus .non span{text-decoration:line-through;text-decoration-color:rgba(151,162,156,.6)}
.offre .btn{width:100%}
.offres-note{margin-top:28px;color:var(--gris);font-size:1rem}

/* Calcul */
.calcul{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.calcul .entete{margin-bottom:0}
.barres{display:grid;gap:22px}
.barre-ligne{display:grid;gap:8px}
.barre-libelle{display:flex;justify-content:space-between;gap:12px;font-size:1.02rem}
.barre-libelle b{font-family:var(--titre);font-size:1.35rem;white-space:nowrap}
.barre{height:18px;border-radius:5px;background:var(--ligne)}
.barre-nous{background:var(--sapin)}
.barres small{color:var(--gris);font-size:.92rem}

/* Après l'achat */
.apres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.apres-bloc{border-top:3px solid var(--encre);padding-top:20px}
.apres-bloc p{margin-top:10px;color:var(--gris)}
.apres-aide{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;background:var(--sapin-pale);border-radius:14px;padding:24px 28px}
.apres-aide p{max-width:36rem}

/* Sur mesure */
.mesure{border-top:1.5px solid var(--ligne)}
.mesure-ligne{display:grid;grid-template-columns:190px minmax(0,1fr) 190px max-content;gap:24px;align-items:center;padding:22px 0;border-bottom:1.5px solid var(--ligne)}
.mesure-ligne p{color:var(--gris)}
.mesure-prix{font-weight:700;white-space:nowrap}
.mesure-ligne a{color:var(--sapin);font-weight:700;white-space:nowrap;text-underline-offset:3px}

/* FAQ */
.faq-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px}
.faq-liste{border-top:1.5px solid var(--ligne)}
.faq-liste details{border-bottom:1.5px solid var(--ligne)}
.faq-liste summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font-weight:700;font-size:1.12rem}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{content:"";flex:none;width:12px;height:12px;border-right:2.5px solid var(--encre);border-bottom:2.5px solid var(--encre);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq-liste details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq-liste details p{padding:0 40px 22px 0;color:var(--gris)}

/* Appel final */
.final{background:var(--sapin);color:#fff;padding:88px 0}
.final .conteneur{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.final h2{max-width:18ch}
.final p{margin-top:14px;color:rgba(255,255,255,.82);font-size:1.15rem}

/* Pied de page */
.pied{background:var(--encre);color:rgba(255,255,255,.72);padding:56px 0 32px;font-size:1rem}
.pied-grille{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.pied .logo{color:#fff}
.pied-titre{font-family:var(--texte);font-size:1rem;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:0}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pied a{text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:24px;font-size:.92rem}
.pied-bas nav{display:flex;flex-wrap:wrap;gap:20px}
.pied-texte{margin-top:12px;max-width:26rem}

/* Responsive */
@media (max-width:980px){
    .hero-grille,.calcul,.faq-grille{grid-template-columns:1fr;gap:40px}
    .etiquette{right:10px;top:auto;bottom:70px}
    .offres{grid-template-columns:1fr;max-width:520px}
    .offre-pour{min-height:0}
    .mesure-ligne{grid-template-columns:1fr auto;gap:6px 16px}
    .mesure-ligne p{grid-column:1/-1;grid-row:2}
    .mesure-ligne .mesure-prix{grid-column:2;grid-row:1}
    .mesure-ligne a{grid-column:1/-1;grid-row:3}
    .pied-grille{grid-template-columns:1fr 1fr}
    .pied-grille > div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
    .section{padding:72px 0}
    .hero{padding:32px 0 64px}
    .etapes,.apres{grid-template-columns:1fr;gap:28px}
    .etape:not(:last-child)::after{display:none}
    .etiquette{transform:rotate(3deg) scale(.85);transform-origin:right bottom}
    .ecran{aspect-ratio:4/5}
}
@media (max-width:420px){
    .conteneur{padding:0 16px}
    .hero-actions .btn{width:100%}
    .navigateur-points{display:none}
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{transition:none!important}
}

/* ===== Éléments communs aux pages intérieures ===== */
.lien-evitement{position:absolute;left:16px;top:-60px;z-index:100;background:var(--encre);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:700}
.lien-evitement:focus{top:12px}
.page-tete{padding:56px 0 8px}
.page-tete p{margin-top:14px;color:var(--gris);font-size:1.2rem;max-width:40rem}
.fil{font-size:.98rem;color:var(--gris);margin-bottom:18px}
.fil a{color:var(--sapin);font-weight:600;text-underline-offset:3px}
.page-corps{padding:40px 0 96px}

/* Formulaires */
.formulaire{display:grid;gap:20px}
.formulaire .deux{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.champ{display:grid;gap:6px}
.champ label{font-weight:700;font-size:1rem}
.champ .facultatif{font-weight:400;color:var(--gris)}
.champ input,.champ select,.champ textarea{width:100%;font:inherit;font-size:1.05rem;color:var(--encre);background:var(--blanc);border:1.5px solid var(--ligne);border-radius:10px;padding:.7em .85em;transition:border-color .15s,box-shadow .15s}
.champ textarea{resize:vertical;min-height:140px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--sapin);box-shadow:0 0 0 3px var(--sapin-pale)}
.champ [aria-invalid="true"]{border-color:#B42318}
.champ .message-erreur{color:#B42318;font-size:.95rem}
.alerte{border-radius:12px;padding:16px 20px;font-size:1.02rem}
.alerte-ok{background:var(--sapin-pale);color:var(--sapin-fonce)}
.alerte-erreur{background:#FDECEA;color:#8A1C12}
.alerte strong{display:block;margin-bottom:2px}

/* Panneau */
.panneau{background:var(--blanc);border:1.5px solid var(--ligne);border-radius:16px;padding:32px}

/* Pages de texte (mentions légales, CGV…) */
.prose{max-width:44rem}
.prose h2{font-size:1.45rem;margin:36px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:#33413A}
.prose p+p{margin-top:12px}
.prose ul{padding-left:1.2em;margin:10px 0 0;display:grid;gap:6px}
.prose a{color:var(--sapin);font-weight:600;text-underline-offset:3px}
.maj{margin-top:40px;font-size:.95rem;color:var(--gris)}

/* Page centrée (paiement, erreurs) */
.centre{min-height:calc(100vh - 68px);display:flex;align-items:center;padding:56px 0}
.centre .conteneur{width:100%}
.carte-centre{max-width:640px}
.pastille{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:24px}
.pastille-ok{background:var(--sapin);color:#fff}
.pastille-attente{background:var(--etiquette);color:var(--encre)}
.carte-centre h1{font-size:clamp(2rem,4.5vw,3rem)}
.carte-centre .intro{margin-top:14px;color:var(--gris);font-size:1.2rem}
.recap{margin:28px 0;border-top:1.5px solid var(--ligne)}
.recap div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1.5px solid var(--ligne)}
.recap dt{color:var(--gris)}
.recap dd{margin:0;font-weight:700;text-align:right;word-break:break-word}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.actions-pleine .btn{flex:1 1 220px}
.note{margin-top:14px;font-size:.98rem;color:var(--gris)}
.guide{margin-top:48px;padding-top:32px;border-top:1.5px solid var(--ligne)}
.guide h2{font-size:1.5rem}
.guide ol{margin:18px 0 0;padding-left:1.3em;display:grid;gap:12px;color:#33413A}
.guide li::marker{font-family:var(--titre);font-weight:800;color:var(--sapin)}
.code-erreur{font-family:var(--titre);font-weight:800;font-size:clamp(4rem,12vw,7rem);line-height:1;color:var(--sapin-pale);-webkit-text-stroke:2px var(--sapin);margin-bottom:16px}

/* Choix du design et de la formule */
.etape-titre{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.etape-titre .num{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--encre);color:#fff;font-family:var(--titre);font-weight:800;font-size:1.05rem;transform:translateY(-3px)}
.etape-titre h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.choix-design{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
.liste-designs{display:grid;gap:10px;border:0;margin:0;padding:0}
.option-design{position:relative;display:flex;align-items:center;gap:14px;border:1.5px solid var(--ligne);border-radius:12px;padding:14px 16px;cursor:pointer;background:var(--blanc);transition:border-color .15s}
.option-design:hover{border-color:var(--encre)}
.option-design input{position:absolute;opacity:0;pointer-events:none}
.option-design .rond{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--ligne);display:grid;place-items:center}
.option-design .rond::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--sapin);transform:scale(0);transition:transform .15s}
.option-design .nuancier{flex:none;width:36px;height:24px;border-radius:6px}
.option-design b{display:block;font-size:1.05rem}
.option-design small{display:block;color:var(--gris);font-size:.95rem}
.option-design:has(input:checked){border-color:var(--sapin);background:var(--sapin-pale)}
.option-design:has(input:checked) .rond{border-color:var(--sapin)}
.option-design:has(input:checked) .rond::after{transform:scale(1)}
.option-design:has(input:focus-visible){outline:3px solid var(--etiquette);outline-offset:3px}
.bloc-formules{margin-top:72px}
.offre .rappel{margin-top:-14px;margin-bottom:22px;font-size:.95rem;color:var(--gris)}
.offre .rappel b{color:var(--encre)}

@media (max-width:980px){
    .choix-design{grid-template-columns:1fr}
    .liste-designs{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
    .formulaire .deux{grid-template-columns:1fr}
    .liste-designs{grid-template-columns:1fr}
    .panneau{padding:22px}
}

/* ===== v2 : navigation, comptes, guide ===== */
.menu-bouton{display:none;font:inherit;font-weight:700;font-size:.98rem;background:transparent;border:1.5px solid var(--ligne);border-radius:9px;padding:.45em .9em;cursor:pointer;color:var(--encre)}
.nav-langue{font-weight:700;letter-spacing:.02em;border:1.5px solid var(--ligne);border-radius:7px;padding:.15em .5em;font-size:.9rem}
.nav-liens a.nav-langue:hover{border-color:var(--encre)}
.nav-compte{font-weight:600}
@media (max-width:1240px){
    .menu-bouton{display:inline-flex}
    .nav .conteneur{position:relative}
    .nav-liens{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--blanc);border-bottom:1.5px solid var(--ligne);padding:8px 24px 18px;box-shadow:0 18px 30px -20px rgba(22,35,29,.35)}
    .nav-liens.ouvert{display:flex}
    .nav-liens a{padding:12px 0;border-bottom:1px solid var(--fond)}
    .nav-liens a.nav-langue{border:0;padding:12px 0;font-size:1rem}
    .nav-liens .btn{margin-top:12px;justify-content:center;border-bottom:0}
}
.messages{display:grid;gap:10px;padding-top:20px}
.alerte-info{background:#E8F0FB;color:#1F3B63}
.lien-bouton{font:inherit;background:none;border:0;padding:0;color:var(--sapin);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lien-discret{font-size:.95rem;color:var(--sapin);font-weight:600;justify-self:start;text-underline-offset:3px}
.btn-large{width:100%;padding:.95em 1.4em}
.btn-danger{background:#B42318;color:#fff}
.btn-danger:hover{background:#912018}
.champ-mdp{position:relative}
.champ-mdp input{padding-right:5.5em}
.bouton-oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:inherit;font-size:.9rem;font-weight:700;color:var(--sapin);background:var(--blanc);border:0;padding:.35em .6em;border-radius:6px;cursor:pointer}
.case{display:flex;gap:10px;align-items:flex-start;font-size:1rem}
.case input{margin-top:5px;width:18px;height:18px;flex:none;accent-color:var(--sapin)}
.case a{color:var(--sapin);font-weight:600}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.auth{padding:48px 0 96px}
.auth-carte{max-width:460px;margin:0 auto;background:var(--blanc);border:1.5px solid var(--ligne);border-radius:18px;padding:36px 32px}
.auth-carte h1{font-size:2rem}
.auth-carte .intro{color:var(--gris);margin:10px 0 22px}
.auth-carte .alerte{margin-bottom:16px}
.auth-pied{margin-top:22px;font-size:1rem;color:var(--gris)}
.auth-pied a{color:var(--sapin);font-weight:700}

.encart{margin-top:32px;background:var(--sapin-pale);border-radius:14px;padding:22px 24px;display:grid;gap:10px;justify-items:start}
.encart h2{font-size:1.3rem}
.encart p{color:#33413A}
.encart-ok{background:var(--sapin-pale)}
.encart-attente{background:#FFF6D9;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:0 0 28px}
.encart-attente h2{font-size:1.15rem}
.guide-encart{margin-top:40px;padding-top:28px;border-top:1.5px solid var(--ligne);display:grid;gap:10px;justify-items:start}
.guide-encart h2{font-size:1.4rem}
.guide-encart .note a{color:var(--sapin);font-weight:600}

.outils{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.outil{display:grid;gap:8px;align-content:start;border:1.5px solid var(--ligne);border-radius:14px;padding:22px;text-decoration:none;color:var(--encre);background:var(--blanc);transition:border-color .15s}
.outil:hover{border-color:var(--encre)}
.outil p{color:var(--gris)}
.outil-lien{color:var(--sapin);font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-top:6px}

.compte{padding-top:40px}
.compte-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px;padding-bottom:20px;border-bottom:1.5px solid var(--ligne)}
.compte-tete h1{font-size:clamp(1.8rem,3.5vw,2.4rem)}
.compte-email{color:var(--gris);margin-top:4px}
.compte-nav{display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-weight:600}
.compte-nav a{color:var(--gris);text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent}
.compte-nav a[aria-current="page"]{color:var(--encre);border-bottom-color:var(--sapin)}
.compte-grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.section-titre-ligne{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.section-titre-ligne h2{font-size:1.5rem}
.mes-sites{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mon-site{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;background:var(--blanc);border:1.5px solid var(--ligne);border-radius:14px;padding:18px 20px}
.mon-site h3{font-size:1.2rem}
.mon-site p{color:var(--gris);font-size:.98rem;margin-top:2px}
.mon-site-actions{display:flex;gap:10px}
.vide{border:1.5px dashed var(--ligne);border-radius:14px;padding:32px;display:grid;gap:10px;justify-items:start}
.vide p{color:var(--gris)}
.boite-outils{background:var(--fond);border-radius:14px;padding:22px}
.boite-outils h2{font-size:1.2rem}
.boite-outils p{color:var(--gris);font-size:.98rem;margin:4px 0 12px}
.boite-outils ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.boite-outils a{color:var(--sapin);font-weight:600;text-underline-offset:3px}
.profil-grille{display:grid;gap:20px;max-width:640px}
.panneau h2{font-size:1.3rem}
.panneau-danger{border-color:#F3C9C4}
.panneau-danger p{color:var(--gris)}

.guide-grille{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;align-items:start}
.guide-sommaire{position:sticky;top:90px;font-size:.98rem}
.guide-sommaire-titre{font-weight:700;margin-bottom:8px}
.guide-sommaire ol{margin:0;padding-left:1.1em;display:grid;gap:6px}
.guide-sommaire a{color:var(--gris);text-decoration:none}
.guide-sommaire a:hover{color:var(--sapin);text-decoration:underline}
.guide-texte{max-width:46rem}
.guide-texte h2{scroll-margin-top:90px}
.guide-texte h3{font-size:1.2rem;margin-bottom:10px}
.guide-texte code{background:var(--fond);border-radius:5px;padding:.08em .35em;font-size:.92em}
.tableau-defilant{overflow-x:auto;margin:14px 0}
.tableau{border-collapse:collapse;width:100%;font-size:.98rem}
.tableau th,.tableau td{border-bottom:1.5px solid var(--ligne);padding:10px 12px;text-align:left;vertical-align:top}
.tableau thead th{font-size:.92rem;color:var(--gris)}
.tableau tbody th{font-weight:700;white-space:nowrap}
.encart-texte{background:#FFF6D9;border-radius:10px;padding:12px 14px;margin-top:14px;font-size:.98rem}
.guide-onglets{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0}
.guide-onglets button{font:inherit;font-weight:700;font-size:.98rem;color:var(--gris);background:var(--blanc);border:1.5px solid var(--ligne);border-bottom:0;border-radius:10px 10px 0 0;padding:.55em 1em;cursor:pointer}
.guide-onglets button[aria-selected="true"]{color:var(--encre);background:var(--fond);border-color:var(--ligne)}
.guide-panneau{background:var(--fond);border:1.5px solid var(--ligne);border-radius:0 12px 12px 12px;padding:20px 22px}
.etapes-guide{margin:0;padding-left:1.3em;display:grid;gap:10px}
.etapes-guide li::marker{font-family:var(--titre);font-weight:800;color:var(--sapin)}
.pied-yokkod a{color:#fff;text-decoration:underline;text-underline-offset:3px}

@media (max-width:980px){
    .outils{grid-template-columns:1fr}
    .compte-grille,.guide-grille{grid-template-columns:minmax(0,1fr)}
    .guide-sommaire{position:static}
}
@media (max-width:560px){
    .auth-carte{padding:26px 20px;border-radius:14px}
    .mon-site-actions{width:100%}
    .mon-site-actions .btn{flex:1}
}
.guide-texte code{overflow-wrap:anywhere}

/* ===== v2.1 : textes de l'accueil, sur mesure, référencement ===== */
.nav-liens{gap:22px}
.nav-liens a{white-space:nowrap}
.pourqui{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pourqui-carte{display:flex;align-items:center;gap:14px;border:1.5px solid var(--ligne);border-radius:12px;padding:16px 18px;background:var(--blanc);color:var(--encre);text-decoration:none;transition:border-color .15s}
.pourqui-carte:hover{border-color:var(--encre)}
.pourqui-carte .nuancier{flex:none;width:40px;height:28px;border-radius:7px}
.pourqui-carte b{display:block;font-size:1.05rem;line-height:1.3}
.pourqui-carte small{display:block;color:var(--gris);font-size:.92rem;margin-top:2px}
.liste-inclus{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.liste-inclus li{display:flex;gap:12px;align-items:flex-start}
.liste-inclus svg{flex:none;color:var(--sapin);margin-top:3px}
.liste-inclus b{display:block;font-family:var(--titre);font-size:1.15rem;margin-bottom:4px}
.liste-inclus li > span{color:var(--gris)}
.liste-inclus b{color:var(--encre)}
.liste-inclus-simple{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px;font-size:1.08rem}
.liste-inclus-simple li > span{color:var(--encre)}
.liste-inclus-simple a{color:var(--sapin);text-underline-offset:3px}
.liste-inclus-une-colonne{grid-template-columns:minmax(0,1fr)}
.risque{margin-top:32px}
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.service-carte{display:grid;gap:10px;align-content:start;border:1.5px solid var(--ligne);border-radius:16px;padding:28px;background:var(--blanc);color:var(--encre);text-decoration:none;transition:border-color .15s}
.service-carte:hover{border-color:var(--encre)}
.service-carte h3{font-size:1.4rem}
.service-carte p{color:var(--gris);font-size:1.05rem}
.section-serre{padding-top:56px}
.page-tete-service{padding-bottom:24px}
.page-tete-service .hero-actions{align-items:center;margin-top:28px}
.note-cta{color:var(--gris)}
.etapes-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.outils-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-seo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
.service-seo .entete{margin-bottom:0}
.service-seo .btn{margin-top:24px}
.service-prix{font-family:var(--titre);font-weight:800;font-size:1.5rem!important;color:var(--encre)!important}
.service-seo .liste-inclus{background:var(--fond);border-radius:16px;padding:28px}
.honnete{margin-top:0}
.honnete p{max-width:none}
@media (max-width:980px){
    .pourqui,.liste-inclus:not(.liste-inclus-une-colonne){grid-template-columns:repeat(2,minmax(0,1fr))}
    .etapes-4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .etapes-4 .etape::after{display:none}
    .service-seo{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:760px){
    .pourqui,.liste-inclus,.liste-inclus-simple,.services,.outils-4,.etapes-4{grid-template-columns:minmax(0,1fr)}
    .service-carte{padding:22px}
}

/* ===== Boutique Express : éditeur ===== */
.bx-tete{padding:40px 0 28px;border-bottom:1.5px solid var(--ligne)}
.bx-tete-grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px;align-items:end}
.bx-surtitre{font-weight:700;color:var(--sapin);letter-spacing:.04em;text-transform:uppercase;font-size:.9rem;margin-bottom:8px}
.bx-tete h1{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.bx-intro{margin-top:12px;color:var(--gris);font-size:1.12rem;max-width:36rem}
.bx-atouts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bx-atouts li{background:var(--fond);border-radius:12px;padding:12px 16px;color:var(--gris);font-size:.98rem}
.bx-atouts b{display:block;color:var(--encre)}
.bx-zone{background:var(--fond);padding:28px 0 0}
.bx-grille{max-width:1440px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(360px,5fr) minmax(0,7fr);gap:28px;align-items:start}
.bx-panneau{display:grid;gap:14px;padding-bottom:40px;min-width:0}
.bx-bloc{background:var(--blanc);border:1.5px solid var(--ligne);border-radius:14px}
.bx-bloc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 20px;font-family:var(--titre);font-weight:800;font-size:1.15rem}
.bx-bloc>summary::-webkit-details-marker{display:none}
.bx-bloc>summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2px solid var(--gris);border-bottom:2px solid var(--gris);transform:rotate(45deg);transition:transform .15s}
.bx-bloc[open]>summary::after{transform:rotate(-135deg)}
.bx-num{width:28px;height:28px;border-radius:50%;background:var(--encre);color:#fff;display:grid;place-items:center;font-size:.9rem;flex:none}
.bx-compte{font-family:var(--texte);font-weight:600;font-size:.95rem;color:var(--gris)}
.bx-champs{display:grid;gap:14px;padding:0 20px 20px}
.bx-champ{display:grid;gap:6px;min-width:0;border:0;margin:0;padding:0}
.bx-champ>span,.bx-champ>legend{font-weight:700;font-size:.95rem;padding:0}
.bx-champ em{font-style:normal;font-weight:400;color:var(--gris)}
.bx-champ small{color:var(--gris);font-size:.88rem}
.bx-champ input[type=text],.bx-champ input[type=email],.bx-champ input[type=tel],.bx-champ input[type=url],.bx-champ textarea,.bx-champ select{font:inherit;font-size:1rem;width:100%;border:1.5px solid var(--ligne);border-radius:10px;padding:10px 12px;background:var(--blanc);color:var(--encre)}
.bx-champ input:focus,.bx-champ textarea:focus,.bx-champ select:focus{outline:none;border-color:var(--sapin);box-shadow:0 0 0 3px var(--sapin-pale)}
.bx-deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.bx-deux-serre{gap:10px}
.bx-aide{color:var(--gris);font-size:.95rem;margin:0}
.bx-aide a{color:var(--sapin)}
.bx-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bx-theme{position:relative;display:grid;gap:8px;justify-items:center;text-align:center;border:1.5px solid var(--ligne);border-radius:12px;padding:12px 8px;cursor:pointer;font-weight:600;font-size:.95rem}
.bx-theme input{position:absolute;opacity:0;pointer-events:none}
.bx-theme:has(input:checked){border-color:var(--sapin);background:var(--sapin-pale)}
.bx-theme:has(input:focus-visible){outline:3px solid var(--etiquette);outline-offset:2px}
.bx-theme-vignette{width:100%;height:46px;border-radius:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px}
.bx-theme-vignette i{border-radius:4px}
.bx-theme-epure .bx-theme-vignette{background:#F5F5F3}.bx-theme-epure i{background:#fff;border:1px solid #E3E3E0}
.bx-theme-chaleureux .bx-theme-vignette{background:#F3EADD}.bx-theme-chaleureux i{background:#FFFDF9;border-radius:9px}
.bx-theme-audacieux .bx-theme-vignette{background:#111214}.bx-theme-audacieux i{background:#2C2D33;border-radius:2px}
.bx-couleur{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bx-couleur input[type=color]{width:48px;height:40px;border:1.5px solid var(--ligne);border-radius:10px;padding:3px;background:var(--blanc);cursor:pointer}
.bx-pastilles{display:flex;gap:6px;flex-wrap:wrap}
.bx-pastille{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--ligne);cursor:pointer}
.bx-image{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bx-image img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1.5px solid var(--ligne)}
.bx-bouton-image{display:inline-flex;align-items:center;border:1.5px dashed var(--ligne);border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:600;font-size:.95rem;background:var(--fond)}
.bx-bouton-image:hover{border-color:var(--encre)}
.bx-bouton-image:focus-within{outline:3px solid var(--etiquette);outline-offset:2px}
.bx-option{display:grid;gap:10px;border:1.5px solid var(--ligne);border-radius:12px;padding:14px}
.bx-case{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}
.bx-case input{width:20px;height:20px;accent-color:var(--sapin)}
.bx-encart{background:var(--sapin-pale);border-radius:12px;padding:14px 16px;font-size:.95rem}
.bx-encart p{margin:0 0 6px}.bx-encart a{color:var(--sapin);font-weight:700}
.bx-produits{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bx-produit{border:1.5px solid var(--ligne);border-radius:12px;background:var(--blanc)}
.bx-produit summary{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer}
.bx-produit summary::-webkit-details-marker{display:none}
.bx-produit details[open] summary{border-bottom:1px solid var(--ligne);margin-bottom:14px}
.bx-produit .bx-champs{padding:0 14px 14px}
.bx-produit-vignette{width:44px;height:44px;border-radius:8px;background:var(--fond);display:grid;place-items:center;font-weight:800;color:var(--gris);overflow:hidden;flex:none}
.bx-produit-vignette img{width:100%;height:100%;object-fit:cover}
.bx-produit-titre{display:grid;min-width:0;flex:1}
.bx-produit-titre b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-produit-titre small{color:var(--gris)}
.bx-produit-actions{display:flex;gap:4px}
.bx-produit-actions button{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--ligne);background:var(--blanc);cursor:pointer;font-size:1rem;color:var(--encre)}
.bx-produit-actions button:hover:not(:disabled){border-color:var(--encre)}
.bx-produit-actions button:disabled{opacity:.35;cursor:default}
.bx-brouillon{margin:0;color:var(--gris);font-size:.9rem;min-height:1.2em}
.bx-droite{position:sticky;top:88px;min-width:0}
.bx-apercu-barre{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700}
.bx-ecrans{display:inline-flex;border:1.5px solid var(--ligne);border-radius:10px;overflow:hidden;background:var(--blanc)}
.bx-ecrans button{font:inherit;font-weight:600;font-size:.92rem;border:0;background:none;padding:7px 14px;cursor:pointer;color:var(--gris)}
.bx-ecrans button[aria-pressed=true]{background:var(--encre);color:#fff}
.bx-cadre{background:var(--blanc);border:1.5px solid var(--ligne);border-radius:14px;overflow:hidden;height:calc(100vh - 230px);min-height:520px;margin:0 auto;transition:max-width .2s}
.bx-cadre.mobile{max-width:400px}
.bx-cadre iframe{width:100%;height:100%;border:0;display:block}
.bx-barre{position:sticky;bottom:0;z-index:30;background:var(--blanc);border-top:1.5px solid var(--ligne);box-shadow:0 -10px 24px -18px rgba(22,35,29,.35);margin-top:8px}
.bx-barre-in{max-width:1440px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:flex-end;gap:12px 20px;flex-wrap:wrap}
.bx-barre-texte{margin:0;color:var(--gris)}.bx-barre-texte b{color:var(--encre);font-size:1.2rem}
.bx-erreurs{flex-basis:100%;background:#FDECEA;color:#8A1C12;border-radius:10px;padding:10px 14px;font-weight:600}
.bx-erreurs ul{margin:0;padding-left:1.1em}
@media (max-width:1100px){
    .bx-grille{grid-template-columns:minmax(0,1fr)}
    .bx-droite{position:static;order:-1}
    .bx-cadre{height:70vh;min-height:420px}
    .bx-tete-grille{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:560px){
    .bx-grille{padding:0 16px}
    .bx-deux,.bx-themes{grid-template-columns:minmax(0,1fr)}
    .bx-themes{grid-template-columns:repeat(3,minmax(0,1fr))}
    .bx-barre-in{padding:10px 16px;justify-content:space-between;flex-wrap:nowrap}
    .bx-barre-texte span{display:none}
    .bx-cadre{height:60vh}
    .bx-erreurs{position:absolute;bottom:100%;left:16px;right:16px;margin-bottom:8px}
    .bx-barre{position:sticky}
    .bx-barre-in form{flex:1}.bx-barre-in .btn{width:100%}
    .bx-champs{padding:0 14px 16px}
}
.services-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-carte-vedette{border-color:var(--sapin);background:var(--sapin-pale)}
.service-badge{justify-self:start;background:var(--etiquette);color:var(--encre);font-weight:700;font-size:.85rem;border-radius:999px;padding:3px 10px}
@media (max-width:980px){.services-3{grid-template-columns:minmax(0,1fr)}}
.bx-apercu-barre{flex-wrap:wrap;gap:8px}
.bx-barre-in .btn{white-space:nowrap}
.bx-credit{align-items:flex-start;font-weight:600;background:var(--blanc);border:1.5px solid var(--ligne);border-radius:12px;padding:12px 14px}
.bx-credit small{display:block;font-weight:400;color:var(--gris);font-size:.88rem}

/* ===== Guides (articles) ===== */
.conteneur-article{max-width:780px}
.article-tete{padding:48px 0 8px}
.article-fil{margin:0 0 10px;font-weight:700}.article-fil a{color:var(--sapin);text-underline-offset:3px}
.article-tete h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.article-date{color:var(--gris);margin-top:12px}
.article-corps{padding-top:24px;padding-bottom:96px}
.article-corps h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin:40px 0 12px}
.article-corps h3{font-size:1.15rem;margin:22px 0 6px}
.article-corps p{font-size:1.1rem;line-height:1.75;color:#33413A;margin:0 0 12px}
.article-reponse{background:var(--sapin-pale);border-radius:14px;padding:18px 22px;color:var(--encre)!important}
.article-source{font-size:.92rem!important;color:var(--gris)!important}
.article-source a,.article-corps p a{color:var(--sapin);text-underline-offset:3px}
.article-cta{margin-top:40px;background:var(--fond);border-radius:14px;padding:22px 24px;display:grid;gap:14px}
.article-autres ul{padding-left:1.1em;display:grid;gap:8px}.article-autres a{color:var(--sapin);font-weight:600;text-underline-offset:3px}
.guides-liste{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:820px}
.guides-liste h2{font-size:1.35rem}
.essai-gratuit{display:flex;align-items:flex-start;gap:12px;background:var(--etiquette);color:var(--encre);border-radius:14px;padding:16px 20px;margin:0 0 28px;font-size:1.08rem;max-width:760px}
.essai-gratuit svg{flex:none;margin-top:3px}

/* ============================================================
   Checklist gratuite (/checklist-site, /en/website-checklist)
   ============================================================ */
.cl-tete{padding-bottom:0}
.cl-tete h1{font-size:clamp(2rem,4.4vw,3.3rem);max-width:22ch}
.cl-surtitre{display:inline-block;margin:0 0 16px!important;background:var(--sapin-pale);color:var(--sapin-fonce)!important;font-weight:700;font-size:.95rem!important;border-radius:999px;padding:.3em .9em}
.cl-tete .cl-reponse{font-size:1.2rem;color:#33413A;max-width:44rem}
.cl-tete .cl-consigne{display:inline-block;margin-top:18px;background:#FFF6D9;color:var(--encre);border-radius:10px;padding:10px 14px;font-weight:600;font-size:1.05rem}
.cl-actions{margin-top:26px}
.cl-erreur-resume{margin-top:20px;max-width:44rem}
.cl-erreur-resume a{color:inherit;font-weight:700}
.cl-corps{padding-top:36px}
.cl-grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.cl-principal{min-width:0;max-width:760px}
.cl-questions{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:none}
.cl-question{background:var(--blanc);border:1.5px solid var(--ligne);border-radius:16px;padding:22px 24px;scroll-margin-top:90px;transition:border-color .15s}
.cl-question.repondue{border-color:#B9D3C4}
.cl-question fieldset{border:0;margin:0;padding:0;min-width:0}
.cl-question legend{padding:0;font-family:var(--titre);font-weight:600;font-size:1.22rem;line-height:1.3;letter-spacing:-.01em;color:var(--encre)}
.cl-num{display:inline-block;margin-right:10px;background:var(--sapin);color:#fff;font-family:var(--texte);font-weight:700;font-size:.85rem;letter-spacing:.02em;border-radius:7px;padding:.18em .55em;vertical-align:.18em}
.cl-choix{display:flex;gap:10px;margin-top:16px}
.cl-choix label{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;min-width:118px;padding:0 18px 0 14px;border:1.5px solid var(--ligne);border-radius:12px;font-weight:700;font-size:1.05rem;cursor:pointer;background:var(--blanc);transition:border-color .15s,background-color .15s,color .15s}
.cl-choix label:hover{border-color:var(--encre)}
.cl-choix input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cl-boite{width:24px;height:24px;flex:none;display:grid;place-items:center;border:2px solid #9AA8A0;border-radius:6px;color:transparent;background:var(--blanc)}
.cl-choix label:has(input:focus-visible){outline:3px solid var(--etiquette);outline-offset:3px}
.cl-oui:has(input:checked){background:var(--sapin);border-color:var(--sapin);color:#fff}
.cl-oui:has(input:checked) .cl-boite{border-color:#fff;color:var(--sapin)}
.cl-non:has(input:checked){background:var(--encre);border-color:var(--encre);color:#fff}
.cl-non:has(input:checked) .cl-boite{border-color:#fff;color:var(--encre)}
.cl-pourquoi{margin-top:16px!important;color:#33413A;font-size:1.02rem}
.cl-verifier{margin-top:10px!important;background:var(--fond);border-radius:10px;padding:10px 14px;color:#33413A;font-size:.98rem}
.cl-pourquoi strong,.cl-verifier strong{color:var(--encre)}
.cl-sans-js{margin-top:24px}
.cl-js .cl-sans-js{display:none}

/* Score toujours visible : colonne à droite sur ordinateur, barre en bas sur téléphone */
.cl-score{position:sticky;top:92px;background:var(--encre);color:#fff;border-radius:16px;padding:18px 20px;display:grid;gap:12px}
.cl-score[hidden]{display:none}
.cl-score-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cl-score-libelle{font-weight:600;color:rgba(255,255,255,.75)}
.cl-score b{font-family:var(--titre);font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.cl-jauge{height:8px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.cl-jauge span{display:block;height:100%;background:var(--etiquette);border-radius:4px;transition:width .2s}
.cl-score-bas{font-size:.95rem;color:rgba(255,255,255,.8)}
.cl-score-bas a{color:var(--etiquette);font-weight:700;text-underline-offset:3px;white-space:nowrap}

/* Résultat */
.cl-resultat{margin-top:48px;scroll-margin-top:90px}
.cl-resultat h2,.cl-recevoir h2,.cl-sources h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.cl-score-grand{margin-top:12px!important;font-family:var(--titre);font-weight:800;font-size:3.6rem;line-height:1;letter-spacing:-.03em}
.cl-score-grand small{font-size:1.6rem;color:var(--gris)}
.cl-repondues{margin-top:8px!important;color:var(--gris)}
.cl-paliers{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.cl-palier{position:relative;border:1.5px solid var(--ligne);border-left-width:6px;border-radius:12px;padding:16px 18px;background:var(--blanc)}
.cl-palier b{font-family:var(--titre);font-size:1.15rem}
.cl-palier p{margin-top:4px;color:#33413A}
.cl-palier-0{border-left-color:#D9534F}
.cl-palier-1{border-left-color:#E0A800}
.cl-palier-2{border-left-color:var(--sapin)}
.cl-palier-badge{display:none;float:right;margin-left:10px;background:var(--encre);color:#fff;font-size:.82rem;font-weight:700;border-radius:999px;padding:2px 10px}
.cl-palier.actif{border-color:var(--encre);box-shadow:0 12px 26px -18px rgba(22,35,29,.5)}
.cl-palier-0.actif{border-left-color:#D9534F}
.cl-palier-1.actif{border-left-color:#E0A800}
.cl-palier-2.actif{border-left-color:var(--sapin)}
.cl-palier.actif .cl-palier-badge{display:inline-block}

/* Envoi par e-mail */
.insecable{white-space:nowrap}
.cl-recevoir{margin-top:48px;scroll-margin-top:90px;display:grid;gap:16px}
.cl-recevoir .alerte{margin:0}
.cl-recevoir-texte{color:#33413A}
.cl-recevoir .champ input{max-width:420px}
.cl-recevoir .case{line-height:1.45}
.cl-recevoir .case input{width:22px;height:22px;margin:1px 0 0}
.cl-recevoir .note{margin-top:0}
.cl-recevoir .note a{color:var(--sapin);font-weight:600}
.cl-conseils-note{margin:6px 0 0 32px!important;font-size:.92rem;color:var(--gris)}
.cl-erreur-case{margin:6px 0 0 32px!important}

/* Sources */
.cl-sources{margin-top:48px}
.cl-sources ul{margin:14px 0 0;padding-left:1.2em;display:grid;gap:8px;color:#33413A;font-size:.98rem}
.cl-sources a{color:var(--sapin);text-underline-offset:3px;overflow-wrap:anywhere}
.cl-maj{margin-top:14px!important;color:var(--gris);font-size:.92rem}
.cl-fin{margin-top:40px}

/* Version imprimable (?print=1) */
.cl-outils-impression{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;padding-top:18px!important;padding-bottom:18px!important;border-bottom:1.5px solid var(--ligne)}
.cl-outils-impression a{color:var(--sapin);font-weight:700;text-underline-offset:3px}
.cl-outils-impression span{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.cl-outils-impression small{color:var(--gris);font-size:.92rem}
.cl-outils-impression .btn{padding:.55em 1em;font-size:.98rem}
.cl-logo-impression{display:flex;align-items:center;gap:10px;margin:0 0 14px!important;font-family:var(--titre);font-weight:800;color:var(--encre)!important;font-size:1.05rem!important}
.cl-score-impression{font-family:var(--titre);font-weight:800;color:var(--encre)!important}
.cl-impression .cl-grille{grid-template-columns:minmax(0,1fr)}
.cl-impression .cl-principal{max-width:860px}

/* Lien du menu : « Checklist » sur ordinateur (place limitée), « Checklist gratuite » dans le menu du téléphone */
.nav .logo{white-space:nowrap}
.nav-checklist .nav-texte-long{display:none}
@media (max-width:1240px){
    .nav-checklist .nav-texte-long{display:inline}
    .nav-checklist .nav-texte-court{display:none}
}

/* Bloc d'accueil et lien des guides */
.cl-accueil{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;background:var(--fond);border:1.5px solid var(--ligne);border-radius:16px;padding:26px 28px}
.cl-accueil h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}
.cl-accueil p{margin-top:6px;color:#33413A;max-width:40rem}
.cl-lien-guide{margin:28px 0 0!important;background:var(--sapin-pale);border-radius:12px;padding:14px 18px;font-size:1.05rem!important;color:var(--encre)!important}
.cl-lien-guide a{color:var(--sapin);font-weight:700;text-underline-offset:3px}
.guides-liste + .cl-lien-guide{max-width:820px}
.cl-succes{margin-top:28px;display:block;background:var(--sapin-pale);border-radius:14px;padding:18px 22px;color:var(--sapin-fonce);font-weight:700;text-decoration:none;font-size:1.08rem;line-height:1.45}
.cl-succes:hover{background:#D3E7DB}

@media (max-width:980px){
    .cl-grille{grid-template-columns:minmax(0,1fr);gap:0}
    .cl-principal{max-width:none}
    /* Sur téléphone, la barre de score reste collée en bas de l'écran pendant les questions. */
    .cl-score{position:sticky;top:auto;bottom:10px;z-index:20;margin-top:24px;padding:12px 16px;gap:8px;border-radius:14px;box-shadow:0 12px 30px -12px rgba(22,35,29,.55)}
    .cl-score b{font-size:1.5rem}
    .cl-score{transition:opacity .2s,transform .2s}
    .cl-score.cl-score-loin{opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden}
}
@media (max-width:560px){
    .cl-question{padding:18px 16px}
    .cl-question legend{font-size:1.12rem}
    .cl-choix label{flex:1;min-width:0;justify-content:center}
    .cl-accueil{padding:22px 18px}
    .cl-accueil .btn{width:100%}
    .cl-score-grand{font-size:3rem}
}

@media print{
    @page{margin:14mm}
    body.wop{font-size:11pt;background:#fff;color:#000}
    .nav,.pied,.lien-evitement,.messages,.cl-actions,.cl-reponse,.cl-sans-js,.cl-score,.cl-recevoir,.cl-fin,.cl-outils-impression,.cl-erreur-resume{display:none!important}
    .page-tete,.page-corps,.cl-corps{padding:0!important}
    .conteneur{padding:0!important;max-width:none!important}
    .cl-tete h1{font-size:20pt;max-width:none}
    .cl-surtitre{display:none!important}
    .cl-tete .cl-consigne{background:none;padding:0;margin-top:6pt}
    .cl-grille{display:block}
    .cl-principal{max-width:none}
    .cl-questions{gap:6pt;margin-top:10pt}
    .cl-question{break-inside:avoid;border:1px solid #999;border-radius:6pt;padding:8pt 10pt}
    .cl-question legend{font-size:12pt}
    .cl-num{background:none;color:#000;border:1px solid #000;padding:0 4pt}
    .cl-choix{margin-top:6pt}
    .cl-choix label{min-height:0;min-width:0;padding:0;border:0;background:none!important;color:#000!important;font-size:11pt}
    .cl-boite{width:13pt;height:13pt;border:1.5pt solid #000;border-radius:2pt;background:#fff!important}
    .cl-oui:has(input:checked) .cl-boite,.cl-non:has(input:checked) .cl-boite{color:#000;border-color:#000}
    .cl-pourquoi,.cl-verifier{margin-top:4pt!important;font-size:9.5pt;padding:0;background:none}
    .cl-resultat{margin-top:14pt;break-inside:avoid}
    .cl-sources{margin-top:14pt}
    .cl-score-grand{font-size:22pt}
    .cl-palier{break-inside:avoid;padding:6pt 8pt;box-shadow:none!important}
    .cl-palier-badge{border:1px solid #000;background:none;color:#000}
    .cl-sources a{color:#000;text-decoration:none}
    .cl-sources a::after{content:" (" attr(href) ")";font-size:8.5pt;color:#333}
}
.section-checklist{padding:72px 0 0}
@media (max-width:760px){.section-checklist{padding-top:56px}}

/* Coûts à prévoir sous les formules */
.offres-a-prevoir{max-width:760px;margin:22px auto 0;text-align:center;font-size:.95rem;line-height:1.55;color:#4b5563}
.offres-a-prevoir a{white-space:nowrap}