/* ==========================================================================
   Polices DevSource — auto-hebergees (memes fichiers que le site principal)
   Titres : Stack Sans Notch (variable 200 -> 700)
   Textes : DM Sans (variable 100 -> 1000, + italique)
   ========================================================================== */

@font-face {
    font-family: "Stack Sans Notch";
    src: url("../../assets/fonts/stack-sans-notch-var.woff2") format("woff2");
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../../assets/fonts/dm-sans-var.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../../assets/fonts/dm-sans-italic-var.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: italic;
    font-display: swap;
}

/* ==================================================================
   Outils SEO — Maxime GUINARD
   Feuille unique partagée par les 25 outils. Elle reprend la charte
   du site principal et style directement les éléments HTML, afin de
   fonctionner quel que soit le balisage propre à chaque outil.
   ================================================================== */

:root {
    --ink: #12272b;
    --ink-2: #1a3638;
    --ink-3: #284849;
    --cyan: #abd8d8;
    --cyan-soft: #d8eeee;
    --accent: #f1fd0d;
    --paper: #f0f3f1;
    --white: #ffffff;
    --muted: #647878;
    --line: rgba(18, 39, 43, .15);
    --line-light: rgba(255, 255, 255, .16);
    --radius: 18px;
    --radius-sm: 11px;
    --shadow: 0 20px 55px rgba(12, 31, 34, .1);
    --ok: #1d7a4c;
    --warn: #b8860b;
    --bad: #b03636;
    /* Piles de polices reprises telles quelles de assets/css/style.min.css :
       les outils doivent composer avec exactement les memes caracteres que
       le reste du site, sinon la difference se voit au changement de page. */
    --font-body: "DM Sans", "Stack Sans Text", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Stack Sans Notch", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --ink-deep: #0c1c1f;
    --container: 1280px;
    /* Stack Sans Notch s'arrete a 700 : pas de fausse graisse sur les titres 800/900. */
    font-synthesis-weight: none;
    font-optical-sizing: auto;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
}

/* ==================================================================
   EN-TETE ET PIED DE PAGE — repliques de maxime-guinard.fr
   Les selecteurs, les mesures et les couleurs sont ceux du site
   principal. Toute retouche ici doit etre reportee sur style.min.css,
   sinon les deux navigations divergent visuellement.
   ================================================================== */

/* Le conteneur des outils a ses propres marges : on les neutralise pour
   les blocs du chassis, qui suivent la grille du site (1280 px). */
.site-announcement > .container,
.site-header > .container,
.site-footer > .container,
.final-cta > .container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Barre d'annonce -------------------------------------- */
.site-announcement {
    background: var(--ink-deep);
    color: var(--white);
}

.announcement-inner {
    display: flex;
    height: 34px;
    align-items: center;
    justify-content: space-between;
    font-size: .71rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.announcement-inner b { font-weight: 800; }
.announcement-inner a { color: var(--cyan); font-weight: 800; text-decoration: none; }
.announcement-inner a:hover { color: var(--accent); }

/* ---------- En-tête ---------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(18, 39, 43, .94);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(16px);
}

.header-inner {
    display: flex;
    height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; }
.brand-mark img { display: block; width: 46px; height: 46px; }
.brand-copy strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.28rem;
    letter-spacing: -.03em;
    line-height: 1.1;
}
.brand-copy small {
    display: block;
    color: var(--cyan);
    font-size: .65rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.main-nav { display: flex; align-items: center; gap: 26px; }

.main-nav > a,
.nav-dropdown > button {
    padding: 28px 0;
    border: 0;
    background: none;
    color: var(--white);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.main-nav > a:hover,
.nav-dropdown > button:hover { color: var(--cyan); }

/* Selecteur compose : sinon la regle .main-nav > a ci-dessus, plus
   specifique, remettrait le fond a « none » et le bouton disparaitrait. */
.main-nav > a.nav-cta {
    padding: 13px 17px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--ink);
    white-space: nowrap;
}
.main-nav > a.nav-cta:hover { background: #e4ef00; color: var(--ink); }

/* ---------- Panneaux déroulants ---------------------------------- */
.nav-dropdown { position: relative; }

.nav-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 70;
    width: 650px;
    padding: 28px;
    border-radius: 0 0 20px 20px;
    background: var(--white);
    box-shadow: var(--shadow);
    color: var(--ink);
    /* Ferme par defaut : l'ouverture est pilotee par aria-expanded. */
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav-dropdown > button[aria-expanded="true"] + .nav-panel {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.nav-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.nav-panel-intro .eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--ink-2);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.nav-panel-intro p { color: var(--ink-3); font-size: .89rem; line-height: 1.55; }

.nav-panel-intro > a {
    display: inline-block;
    margin-top: 4px;
    color: var(--ink);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}
.nav-panel-intro > a:hover { text-decoration: underline; }

.nav-hub-links { display: grid; gap: 4px; margin: 14px 0 16px; }
.nav-hub-links a {
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
}
.nav-hub-links a:hover { background: var(--ink); color: var(--white); }
.nav-hub-links strong { display: block; font-family: var(--font-display); font-size: .92rem; letter-spacing: -.02em; }
.nav-hub-links small { display: block; color: var(--muted); font-size: .73rem; }
.nav-hub-links a:hover small { color: var(--cyan); }

.nav-service-list,
.nav-agency-list { display: grid; align-content: start; gap: 2px; }

.nav-service-list a,
.nav-agency-list a {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 0 10px;
    padding: 10px 6px;
    border-radius: 9px;
    color: var(--ink);
    font-size: 1.03rem;
    text-decoration: none;
}

.nav-service-list a:hover,
.nav-agency-list a:hover { background: var(--paper); }

.nav-service-list span,
.nav-agency-list span {
    grid-row: span 2;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.nav-service-list strong,
.nav-agency-list strong { font-family: var(--font-display); font-size: .96rem; letter-spacing: -.02em; }

.nav-service-list small,
.nav-agency-list small { color: var(--muted); font-size: .76rem; line-height: 1.4; }

/* ---------- Menu mobile ------------------------------------------ */
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.menu-toggle i { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--white); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Fil d'Ariane ----------------------------------------- */
.tool-breadcrumb {
    max-width: var(--container);
    margin: 0 auto;
    padding: 22px 24px 18px;
    color: var(--muted);
    font-size: .78rem;
}

.tool-breadcrumb a { color: var(--ink-3); text-decoration: none; }
.tool-breadcrumb a:hover { text-decoration: underline; }
.tool-breadcrumb span { margin: 0 7px; opacity: .5; }
.tool-breadcrumb em { font-style: normal; color: var(--ink); font-weight: 600; }

/* ---------- Appel à l'action final -------------------------------- */
.final-cta { margin-top: 60px; padding: 60px 0; background: var(--ink-2); color: var(--white); }

.final-cta-grid { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 90px; }

.eyebrow-light {
    display: block;
    margin-bottom: 14px;
    color: var(--cyan);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.final-cta-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.4vw, 4rem);
    letter-spacing: -.055em;
    line-height: .95;
}

.final-cta-copy p { color: rgba(255, 255, 255, .62); }

.button-accent {
    display: inline-block;
    padding: 14px 23px;
    border-radius: 12px;
    background: var(--accent);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 750;
    text-decoration: none;
}
.button-accent:hover { background: #e4ef00; }

/* ---------- Pied de page ----------------------------------------- */
.site-footer { background: var(--ink-deep); color: var(--white); }

.footer-grid {
    display: grid;
    grid-template-columns: 2.33fr 1fr 1fr 1fr;
    gap: 60px;
    padding: 80px 24px 70px !important;
}

.footer-brand .brand-footer { margin-bottom: 18px; }
.footer-brand p { max-width: 420px; color: rgba(255, 255, 255, .62); font-size: .9rem; }
.footer-contact { display: grid; gap: 4px; }
.footer-contact a { color: var(--cyan); font-size: .92rem; font-weight: 700; text-decoration: none; }
.footer-contact a:hover { color: var(--accent); }

.footer-heading {
    margin-bottom: 14px;
    color: var(--cyan);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 8px; }
.site-footer ul a { color: rgba(255, 255, 255, .62); font-size: .86rem; text-decoration: none; }
.site-footer ul a:hover { color: var(--white); }

/* Bandeau des plateformes : sans intitule, sur toute la largeur du
   conteneur, entrees reparties d'un bord a l'autre comme la grille de
   liens au-dessus. */
.footer-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 18px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 30px 24px 34px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-platforms span {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, .74);
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
}
.footer-platforms img { flex: none; width: 34px; height: 34px; }

@media (max-width: 900px) { .footer-platforms { justify-content: flex-start; gap: 18px 26px; } }
@media (max-width: 560px) {
    .footer-platforms span { font-size: .86rem; gap: 9px; }
    .footer-platforms img { width: 28px; height: 28px; }
}

.footer-bottom {
    padding: 22px 24px !important;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .76);
    font-size: .72rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--cyan); text-decoration: none; }

/* ---------- Retour en haut ---------------------------------------- */
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 50;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }

/* ---------- Adaptation mobile du châssis -------------------------- */
@media (max-width: 1040px) {
    .menu-toggle { display: block; }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 24px 24px;
        background: var(--ink);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .main-nav.is-open { display: flex; }
    .main-nav > a, .nav-dropdown > button { padding: 13px 0; text-align: left; width: 100%; }

    .nav-panel {
        position: static;
        display: none;
        width: auto;
        transform: none;
        grid-template-columns: 1fr;
        margin-bottom: 10px;
    }

    .nav-dropdown > button[aria-expanded="true"] + .nav-panel { display: grid; transform: none; }
    .nav-cta { text-align: center; margin-top: 10px; }

    .final-cta-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding: 54px 24px 40px !important; }
}

@media (max-width: 620px) {
    .announcement-inner { font-size: .62rem; letter-spacing: .05em; }
    .announcement-inner span:first-child b { display: none; }
    .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Structure de page ------------------------------------ */
.container,
.wrapper,
main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 24px 40px;
}

h1 {
    margin: 8px 0 10px;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    letter-spacing: -.035em;
    line-height: 1.1;
}

h2 {
    margin: 34px 0 14px;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    letter-spacing: -.025em;
}

h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.08rem; letter-spacing: -.015em; }

p { margin: 0 0 14px; }

a { color: var(--ink-3); }

.tool-intro {
    max-width: 760px;
    margin-bottom: 28px;
    color: var(--ink-3);
    font-size: 1.03rem;
}

/* ---------- Blocs et cartes -------------------------------------- */
.calculator, .card, .panel, .input-group, .tool-card, .result-block, section.box {
    padding: 26px 28px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}

.input-group { margin-bottom: 18px; }
.input-group h2 { margin-top: 0; font-size: 1.15rem; }

/* ---------- Formulaires ------------------------------------------ */
label { display: block; margin-bottom: 6px; color: var(--ink-3); font-size: .86rem; font-weight: 600; }

.input-field { margin-bottom: 16px; }

input[type="text"], input[type="number"], input[type="url"], input[type="email"],
input[type="search"], input[type="tel"], input[type="date"], select, textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font-family: inherit;
    font-size: .95rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--ink);
    outline: none;
    box-shadow: 0 0 0 3px rgba(18, 39, 43, .1);
}

textarea { min-height: 130px; resize: vertical; line-height: 1.55; }

input[type="range"] { width: 100%; accent-color: var(--ink); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--ink); }

/* ---------- Boutons ---------------------------------------------- */
button, .btn, .button, input[type="submit"], input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--white);
    cursor: pointer;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

button:hover, .btn:hover, .button:hover { transform: translateY(-2px); background: var(--ink-2); }
button:disabled { cursor: not-allowed; opacity: .5; transform: none; }

button.secondary, .btn-secondary {
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
}

button.secondary:hover, .btn-secondary:hover { background: var(--paper); }

.cta-button, #ctaButton { background: var(--accent) !important; color: var(--ink) !important; font-weight: 800; }
.cta-button:hover, #ctaButton:hover { background: #e4ef00 !important; }

/* ---------- Résultats -------------------------------------------- */
.results, .result-grid, .output-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.result-item, .result-card, .stat {
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cyan-soft);
}

.result-item h3 { color: var(--ink-3); font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.result-item p { margin: 0; font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -.03em; }

.is-good { color: var(--ok); }
.is-warn { color: var(--warn); }
.is-bad { color: var(--bad); }

/* ---------- Tableaux --------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }

th, td { padding: 13px 17px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

thead th {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: .8rem;
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(171, 216, 216, .16); }

/* ---------- Barre d'export --------------------------------------- */
.tool-export {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    margin: 20px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
}

.tool-export-label { margin: 0; margin-right: auto; color: var(--ink-3); font-size: .82rem; font-weight: 700; }

.tool-export button {
    padding: 9px 17px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font-size: .82rem;
}

.tool-export button:hover { background: var(--ink); color: var(--white); }

/* ---------- Encart de conversion --------------------------------- */
.cta-section {
    max-width: 1180px;
    margin: 40px auto 0;
    padding: 32px 30px;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--white);
    text-align: center;
}

.cta-section h3 { color: var(--white); font-size: 1.4rem; }
.cta-section p { max-width: 620px; margin: 0 auto 18px; color: rgba(255, 255, 255, .74); }
.cta-section a { text-decoration: none; }

/* ---------- Messages --------------------------------------------- */
.alert, .message, .notice {
    padding: 14px 18px;
    margin: 16px 0;
    border-left: 4px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: .9rem;
}

.alert-success, .success { border-left-color: var(--ok); }
.alert-error, .error { border-left-color: var(--bad); }
.alert-warning, .warning { border-left-color: var(--warn); }

/* ---------- Blocs de code ---------------------------------------- */
pre, code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: .85rem;
}

pre {
    padding: 18px 20px;
    overflow-x: auto;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--cyan-soft);
    line-height: 1.55;
}

code:not(pre code) { padding: 2px 6px; border-radius: 5px; background: var(--cyan-soft); color: var(--ink); }

/* ---------- Responsive ------------------------------------------- */
@media (max-width: 760px) {
    .tool-header-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .container, .wrapper, main { padding: 20px 16px 32px; }
    .calculator, .card, .panel, .input-group { padding: 20px 18px; }
    th, td { padding: 11px 13px; }
}

/* ---------- Impression (export PDF) ------------------------------ */
@media print {
    @page { margin: 14mm; }

    body { background: #fff; color: #000; font-size: 11pt; }

    .tool-header,
    .tool-footer,
    .tool-breadcrumb,
    .tool-export,
    .cta-section,
    button,
    .btn,
    .no-print { display: none !important; }

    .container, .wrapper, main { max-width: none; padding: 0; }

    .calculator, .card, .panel, .input-group, .result-item, .table-wrap {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
        background: #fff;
    }

    h1, h2, h3 { break-after: avoid; }
    table { font-size: 9.5pt; }
    thead { display: table-header-group; }
    tr { break-inside: avoid; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }

    .print-only { display: block !important; }
}

.print-only { display: none; }

/* ==================================================================
   COMPOSANTS PARTAGES PAR LES OUTILS REFONDUS
   Boutons, pastilles de gravite, filtres, cartouches et FAQ. Places
   ici plutot que dupliques dans chaque outil : une seule definition,
   donc une seule verite visuelle.
   ================================================================== */

.tool-eyebrow {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ---------- Boutons ----------------------------------------------- */
.btn-principal {
    padding: 14px 26px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--accent);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.btn-principal:hover { background: var(--ink-2); }

.btn-fichier {
    display: inline-block;
    padding: 13px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
}
.btn-fichier:hover { border-color: var(--ink); }

.btn-lien {
    border: 0;
    background: none;
    color: var(--ink-3);
    font: inherit;
    font-size: .86rem;
    text-decoration: underline;
    cursor: pointer;
}
.btn-lien:hover { color: var(--ink); }

/* ---------- Pastilles de gravité ---------------------------------- */
.pastille {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}
.pastille-bloquant,
.pastille-critique { background: #fbe9e9; color: #7d1f1f; }
.pastille-important { background: #fdf3dd; color: #6d4f06; }
.pastille-mineur,
.pastille-surveiller { background: #eef2f2; color: #3b4d4f; }
.pastille-ok { background: #e4f4ea; color: #145c36; }
.pastille-na { background: var(--paper); color: var(--muted); }

/* ---------- Filtres ------------------------------------------------ */
.filtres-rapport { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.filtre {
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-3);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
.filtre:hover { border-color: var(--ink); }
.filtre.est-actif { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---------- Cartouches de synthèse -------------------------------- */
.cartouches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.cartouche {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
}

.cartouche-cle {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cartouche-val {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: -.035em;
    line-height: 1;
}

.cartouche-note { margin: 8px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }

/* ---------- Messages ---------------------------------------------- */
.tool-message { margin: 0; font-size: .85rem; min-height: 1.2em; }
.tool-message[data-type="erreur"] { color: var(--bad); font-weight: 600; }
.tool-message[data-type="succes"] { color: var(--ok); font-weight: 600; }

/* ---------- FAQ éditoriale ---------------------------------------- */
.faq-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; font-family: var(--font-display); font-size: 1rem; letter-spacing: -.015em; }
.faq-item p { margin: 10px 0 0; color: var(--ink-3); }

.tool-copy code { padding: 1px 5px; border-radius: 4px; background: var(--paper); font-size: .88em; }

/* ==================================================================
   BLOCS DE PIED D'OUTIL — appel a l'action et outils complementaires
   Chaque outil embarquait le meme <style> herite : conteneur a 900 px,
   texte centre et boutons bleus. C'est ce qui ecrasait les formulaires
   et jurait avec la charte. Les 22 blocs sont supprimes et remplaces
   par ces regles uniques.
   ================================================================== */

.cta-section {
    max-width: var(--container);
    margin: 44px auto 0;
    padding: 40px;
    border-radius: var(--radius);
    background: var(--ink);
    color: rgba(255, 255, 255, .76);
    text-align: left;
}

.cta-section h3 {
    margin: 0 0 10px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    letter-spacing: -.03em;
}

.cta-section p { max-width: 640px; margin: 0 0 22px; font-size: .95rem; line-height: 1.6; }

.cta-button,
.cta-section .cta-button {
    padding: 14px 24px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    text-transform: none;
    cursor: pointer;
}
.cta-button:hover { background: #e4ef00; }

/* Outils complementaires : des cartes sobres, pas des pavés bleus. */
.tool-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    padding: 0;
    margin-top: 6px;
}

.tool-list a {
    display: block;
    min-width: 0;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font-size: .9rem;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}
.tool-list a:hover { border-color: var(--ink); transform: translateY(-2px); }

/* ==================================================================
   FORMULAIRES — largeur utile
   Les gabarits herites centraient le texte et bridaient les champs a
   quelques dizaines de pixels : « la place est minuscule ». On rend
   aux champs toute la largeur de leur conteneur.
   ================================================================== */

.container,
.wrapper,
main { text-align: left; }

input[type="text"],
input[type="url"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
    max-width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
}

/* Un champ seul dans son bloc occupe la largeur disponible : une URL
   ou une requete ne se saisit pas dans une boite de 120 px. */
input[type="url"],
input[type="search"],
input[type="email"] { width: 100%; min-width: 0; }

textarea { width: 100%; min-height: 120px; line-height: 1.55; resize: vertical; }

input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

label { font-size: .86rem; }

/* Groupes de champs : une colonne fluide plutot qu'une ligne serree. */
.input-group,
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.input-group label,
.form-group label { font-weight: 700; }
.input-group input,
.input-group textarea,
.input-group select,
.form-group input,
.form-group textarea,
.form-group select { width: 100%; }

/* ------------------------------------------------------------------
   Rangées de saisie : le champ principal avant la liste déroulante.
   Sans largeur imposée, un <select> se dimensionne sur son option la
   plus longue et absorbe toute la ligne — le champ d'URL tombait alors
   à 30 px. On borne le select et on donne un plancher au champ texte.
   ------------------------------------------------------------------ */

select { width: auto; max-width: 280px; }

form input[type="url"],
form input[type="text"],
form input[type="search"],
.test-form input,
.search-box input,
.input-wrapper input,
.add-form input[type="url"],
.add-form input[type="text"] { min-width: 240px; flex: 1 1 auto; }

/* Les rangées doivent pouvoir passer à la ligne sur petit écran plutôt
   que de comprimer leurs champs. */
.test-form,
.search-box,
.input-wrapper,
.add-form { flex-wrap: wrap; gap: 10px; }

@media (max-width: 620px) {
    form input[type="url"],
    form input[type="text"],
    form input[type="search"],
    .test-form input,
    .search-box input,
    .input-wrapper input { min-width: 100%; }
    select { max-width: 100%; width: 100%; }
}

/* ==================================================================
   ONGLETS — composant partagé
   Plusieurs outils héritaient d'une règle « button { color: white } »
   qui rendait les onglets inactifs blancs sur fond blanc, donc
   invisibles. On redéfinit les deux états explicitement.
   ================================================================== */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.tabs .tab-btn,
.tab-btn {
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink-3);
    font: inherit;
    font-size: .86rem;
    font-weight: 650;
    text-transform: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.tabs .tab-btn:hover,
.tab-btn:hover { border-color: var(--ink); background: var(--white); color: var(--ink); }

.tabs .tab-btn.active,
.tab-btn.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ==================================================================
   REALIGNEMENT DES VARIABLES PROPRES A CHAQUE OUTIL
   Les 24 outils ont ete ecrits separement : chacun declare ses propres
   --primary-color, --text-color, --border-color, avec des bleus et des
   indigos sans rapport avec la charte. Cette feuille etant chargee
   apres la leur, redefinir les memes noms sur :root suffit a tout
   realigner, sans toucher aux 24 fichiers.

   Les valeurs choisies restent lisibles sur fond clair : la couleur
   d'accent (jaune) n'est jamais affectee a du texte.
   ================================================================== */

:root {
    --primary-color: #12272b;
    --primary-hover: #1a3638;
    --secondary-color: #284849;
    --accent-color: #1a3638;

    --text-color: #12272b;
    --text-primary: #12272b;
    --text-secondary: #284849;
    --text-light: #647878;

    --background-color: #f0f3f1;
    --bg-color: #f0f3f1;
    --background: #f0f3f1;
    --surface-color: #ffffff;
    --card-bg: #ffffff;
    --input-bg: #ffffff;

    --border-color: rgba(18, 39, 43, .15);

    --success-color: #1d7a4c;
    --warning-color: #b8860b;
    --error-color: #b03636;
    --danger-color: #b03636;

    --border-radius: 11px;
    --radius-md: 11px;
    --box-shadow: 0 20px 55px rgba(12, 31, 34, .1);
    --shadow-sm: 0 2px 8px rgba(12, 31, 34, .06);
    --shadow-md: 0 12px 30px rgba(12, 31, 34, .09);
    --shadow-lg: 0 20px 55px rgba(12, 31, 34, .1);
}

/* Cartes et surfaces héritées : bordure fine plutôt qu'ombre portée
   lourde, pour rester dans le registre visuel du site. */
.card,
.result-card,
.result-section,
.stat-card,
.metric-card,
.panel,
.box { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }

/* Titres et boutons génériques des outils. */
h1, h2, h3, h4 { color: var(--ink); }

button:not(.tab-btn):not(.btn-lien):not([data-export]):not(.filtre) {
    border-radius: var(--radius-sm);
    font-weight: 700;
}