/* =========================
   QFDmV — Global stylesheet (psy-safe palette)
   ========================= */
/* ------ Light mode (calme & pro) ------ */
:root{
    /* Neutres */
    --bg:#f7f9fc;            /* fond doux, réduit la fatigue visuelle */
    --surface:#ffffff;       /* cartes / surfaces */
    --text:#0f172a;          /* texte principal (slate-900) */
    --muted:#475569;         /* texte secondaire (slate-600) */
    --line:#e5e7eb;          /* séparateurs légers */

    /* Couleurs émotionnelles */
    --brand:#2563eb;         /* bleu confiance (CTA/links) */
    --brand-2:#0ea5a7;       /* teal apaisant (accents) */
    --accent:#f59e0b;        /* ambre chaleureux (surbrillance douce) */

    --shadow:0 1px 2px rgba(15,23,42,.06);
    --radius:16px;--radius-sm:12px;--container:min(1100px,92vw);
}

/* ------ Dark mode (clair, lisible, neutre) ------ */
@media (prefers-color-scheme:dark){
    :root{
        --bg:#1f2227;          /* gris anthracite clair */
        --surface:#2a2e36;     /* cartes plus claires que le fond */
        --text:#f5f7fa;        /* texte principal */
        --muted:#d1d5db;       /* texte secondaire */
        --line:#3a3f47;        /* séparateurs visibles mais doux */

        --brand:#4ea8ff;       /* bleu lumineux lisible sur fond sombre */
        --brand-2:#5fd4c4;     /* teal pastel apaisant */
        --accent:#f8d479;      /* ambre clair (surlignage) */

        --shadow:0 1px 3px rgba(0,0,0,.40);
    }
}

/* ---------- Reset & base ---------- */
*,:before,:after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
    font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand)} a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}
.container{width:var(--container);margin-inline:auto}
.center{text-align:center}

/* Typography */
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-size:clamp(1.9rem,2.8vw,2.6rem)}
h2{font-size:clamp(1.4rem,2.2vw,2rem);margin-top:1.6rem}
h3{font-size:clamp(1.15rem,1.6vw,1.35rem);margin-top:1rem}
.lead{font-size:clamp(1.05rem,1.2vw,1.15rem);color:var(--muted)}
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:1rem;top:1rem;padding:.5rem .75rem;background:#fff;border:2px dashed var(--brand-2);z-index:9999}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 0}
.logo{font-weight:800;letter-spacing:.2px;color:var(--text)}
.menu{list-style:none;display:flex;gap:.5rem;margin:0;padding:0}
.menu a{padding:.45rem .65rem;border-radius:10px;display:inline-block}
.menu a[aria-current="page"]{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.hamburger{display:none;background:transparent;border:0;padding:.4rem;border-radius:10px;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;transition:transform .2s ease,opacity .2s ease}
@media (max-width:900px){
    .hamburger{display:inline-block}
    .menu{
        position:absolute;left:0;right:0;top:calc(100% + 1px);
        background:var(--surface);border-bottom:1px solid var(--line);
        display:grid;transform-origin:top;transform:scaleY(0);transition:transform .2s ease
    }
    .menu.open{transform:scaleY(1)}
    .menu li{border-top:1px solid var(--line)}
    .menu a,.menu .btn{padding:.9rem 1.1rem;width:100%;border-radius:0}
}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-weight:700;letter-spacing:.2px;border-radius:12px;padding:.7rem 1rem;box-shadow:var(--shadow);border:1px solid transparent}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:color-mix(in srgb,var(--brand) 86%,#000 14%);text-decoration:none}
.btn--ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn--ghost:hover{background:color-mix(in srgb,var(--brand) 10%,transparent);text-decoration:none}

/* ---------- Hero ---------- */
.hero{
    background:
            linear-gradient(135deg,color-mix(in srgb,#fff 70%,var(--brand-2) 30%) 0%,
            color-mix(in srgb,#eef2ff 70%,var(--brand) 30%) 100%);
    border-bottom:1px solid var(--line)
}
@media (prefers-color-scheme:dark){
    .hero{background:linear-gradient(135deg,
    color-mix(in srgb,var(--bg) 60%,var(--brand-2) 40%) 0%,
    color-mix(in srgb,var(--surface) 70%,var(--brand) 30%) 100%)}
}
.hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:1.6rem;padding:1.8rem 0}
.hero__cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.trust-bullets{display:flex;gap:.8rem;flex-wrap:wrap;padding:0;margin:.8rem 0 0;color:var(--muted);list-style:none}
.hero__image img{border-radius:16px;aspect-ratio:4/3;object-fit:cover;max-height:320px;width:100%}
@media (max-width:900px){.hero__inner{grid-template-columns:1fr}
    .hero__image img{max-height:none}
}

/* TOC + tiny note */
.toc{display:flex;gap:.6rem;flex-wrap:wrap;margin:.8rem 0 0}
.toc a{display:inline-block;padding:.35rem .6rem;border:1px solid var(--line);border-radius:10px;color:var(--text)}
.tiny-note{margin-top:.5rem;color:var(--muted);font-size:.9rem}

/* ---------- Sections ---------- */
.section{padding:1.8rem 0}
.section__intro{max-width:760px;color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media (max-width:980px){.grid-3{grid-template-columns:1fr}}
.card,.feature{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.9rem;box-shadow:var(--shadow)}

/* -------- Cartes avec images compactes (ACCUEIL) -------- */
.features .feature img,
.usecases .feature img{
    border-radius:12px;aspect-ratio:3/2;object-fit:cover;max-height:200px;width:100%;
}
@media (max-width:768px){
    .features .feature img,.usecases .feature img{max-height:150px}
}

/* Ressources */
.ressources .card{display:grid;grid-template-rows:auto auto 1fr}
.ressources .card img{
    width:100%;aspect-ratio:3/2;max-height:180px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:.6rem
}
@media (max-width:768px){.ressources .card img{max-height:150px}}

/* Témoignages */
.testimonials .post{
    display:grid;grid-template-columns:200px 1fr;gap:1rem;align-items:center;border-radius:16px;overflow:hidden
}
.testimonials .post__thumb img{aspect-ratio:4/3;object-fit:cover;max-height:220px;width:100%}
@media (max-width:900px){.testimonials .post{grid-template-columns:1fr}
    .testimonials .post__thumb img{max-height:200px}}
@media (max-width:768px){.testimonials .post__thumb img{max-height:180px}}

/* Blog previews (accueil + blog) */
.posts{display:grid;grid-template-columns:1fr;gap:.9rem}
.post{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.post__content{padding:1rem}
.post__readmore{display:inline-block;margin-top:.3rem;font-weight:700}

/* ---------- How ---------- */
.steps{padding-left:1.2rem;counter-reset:step}
.steps li{margin:.6rem 0}
.steps strong{display:inline-block;margin-bottom:.2rem}

/* ---------- FAQ ---------- */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;margin:.5rem 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--text)}
.faq p{margin:.5rem 0 0;color:var(--muted)}

/* ---------- CTA ---------- */
.cta{padding:0}
.cta__inner{
    background:linear-gradient(135deg,var(--brand) 0%,color-mix(in srgb,var(--brand),var(--brand-2)) 100%);
    color:#fff;border-radius:16px;padding:1.4rem;text-align:center
}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);margin-top:1.6rem}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.footer__inner a{color:inherit}
@media (max-width:720px){.footer__inner{flex-direction:column;text-align:center}}

/* Utilities */
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== Conseils pratiques — refonte lisible ===== */
.advice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1rem}
.advice-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.advice-icon{font-size:1.5rem;line-height:1;margin-bottom:.5rem}
.advice-list{margin:.5rem 0 0 1.1rem}
.advice-list li{margin:.25rem 0}
.advice-inline{margin:.4rem 0;color:var(--muted)}
.tip-box{background:color-mix(in srgb,var(--brand-2) 12%,transparent);border-left:4px solid var(--brand-2);padding:.9rem 1rem;border-radius:var(--radius-sm);margin:1rem 0 0}
.tip-box h4{margin:0 0 .4rem;font-size:1.05rem}
.tip-box ul{margin:.4rem 0 0 1.1rem}
.tip-box li{margin:.25rem 0}
.tip-warning{background:color-mix(in srgb,var(--accent) 18%,transparent);border-left-color:var(--accent)}
.conseils .section__intro{margin-bottom:.6rem}
.conseils .advice-card h3{margin-top:0}
.advice-card ul,.advice-card li{text-align:left}
.advice-card ul{padding-left:1.2rem;margin:0}
.advice-card li{margin-bottom:.3rem}
.advice-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.advice-card h3{margin:0}

/* ===== Header en dark mode — lisibilité renforcée ===== */
@media (prefers-color-scheme: dark) {
    .site-header{
        background: color-mix(in srgb,var(--surface) 92%,transparent);
        backdrop-filter: saturate(120%) blur(6px);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 1px 0 rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.35);
    }
    .logo{ color:var(--text); text-decoration:none }
    .hamburger span{ background:var(--text) }
    .menu a{ color:#e6f0ff; text-decoration:none; border-radius:10px }
    .menu a:hover{ background: color-mix(in srgb,var(--brand) 22%,transparent); color:#fff }
    .menu a:focus-visible{ outline:3px solid var(--brand-2); outline-offset:2px }
    .menu a[aria-current="page"]{ background: color-mix(in srgb,var(--brand) 32%,transparent); color:#fff }
    .btn--primary{ background:var(--brand) }
    .btn--primary:hover{ background:color-mix(in srgb,var(--brand) 86%,#000 14%) }
}
.menu a{text-decoration:none}
.menu a:hover{text-decoration:underline;text-underline-offset:3px}

/* ======== IMAGES DANS LES ARTICLES (désécrasées) ======== */
.prose img{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:unset;border-radius:var(--radius);display:block}
.prose .feature img{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:unset;border-radius:var(--radius)}
.prose .feature{margin:1.5rem 0}
.prose .feature img{margin:0 auto}

/* ===== Sections blog / latest ===== */
.posts img{width:100%;object-fit:cover;max-height:500px}
.latest .posts .post__thumb img{aspect-ratio:3/2;max-height:400px;object-fit:cover;width:100%}
@media (prefers-color-scheme:dark){
    :root{
        --bg:#2c2f36;        /* gris doux clair, fond général */
        --surface:#3a3f47;   /* cartes légèrement plus claires */
        --text:#fafbfc;      /* texte quasi blanc */
        --muted:#e0e3e7;     /* texte secondaire clair */
        --line:#4a5059;      /* séparateurs discrets mais visibles */

        --brand:#339cff;     /* bleu clair dynamique pour liens */
        --brand-2:#5fd4c4;   /* teal lumineux apaisant */
        --accent:#ffd480;    /* ambre clair chaleureux */

        --shadow:0 1px 3px rgba(0,0,0,.25);
    }
}