/* ═══════════════════════════════════════════════════════════════
   morykadoch.com — tools-shell.css
   Surcharges ciblées de tools.css pour les pages outils
   (sidebar claire, canvas sur --paper-2, angles droits, bouton
   Export PNG jaune, WebMockup). Chargé après tools.css, uniquement
   quand `is_tool` est vrai (brief 3.8).
   L'intérieur exporté (#xxx-canvas et ses enfants, thèmes, polices
   d'export, cadres d'appareils de WebMockup) n'est JAMAIS touché :
   aucun sélecteur ci-dessous n'atteint l'intérieur d'un canvas.
   Sommaire
     01 Zone de travail, kicker du canvas, note de confidentialité
     02 Sidebars et barres d'outils (fond blanc, filets --line)
     03 Libellés, séparateurs, textes secondaires
     04 Boutons, champs, sélecteurs, pastilles (radius 0, état actif)
     05 Bouton Export PNG (primaire jaune)
     06 Enveloppes de canvas (fond --paper-2)
     07 Toast
     08 WebMockup (champ URL, résultats)
     09 Bloc pédagogique (_tool_footer.html)
     10 Responsive (couleurs et rayons uniquement)
   ═══════════════════════════════════════════════════════════════ */


/* ═══ 01 · ZONE DE TRAVAIL ══════════════════════════════════════ */
.tool-work { padding-block: var(--s-6) var(--s-8); }

.tool-canvas-kicker { margin-bottom: 12px; }
.tool-privacy { margin-top: 12px; color: var(--muted); }


/* ═══ 02 · SIDEBARS ET BARRES D'OUTILS ══════════════════════════ */
.swot-sidebar, .scp-sidebar, .persona-sidebar, .ansoff-sidebar,
.mix4p-sidebar, .mapping-sidebar, [class$="-sidebar"],
.pestel-toolbar, .porter-controls, .bmc-toolbar {
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-family: var(--font-text);
}
.swot-sidebar, .scp-sidebar, .persona-sidebar, .ansoff-sidebar,
.mix4p-sidebar, .mapping-sidebar, [class$="-sidebar"] { top: calc(var(--nav-h) + 16px); }


/* ═══ 03 · LIBELLÉS, SÉPARATEURS, TEXTES SECONDAIRES ════════════ */
.sb-label, .sb-section-title, .pt-label, .pc-label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: .7rem;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 1;
}
.sb-sep, .pt-sep, .pc-sep { background: var(--line); }
.sb-color-row span, .sb-range-row span, .sb-unit,
.sb-check, .pt-check, .pc-check, .pc-check:hover {
    color: var(--ink);
    opacity: 1;
}


/* ═══ 04 · BOUTONS, CHAMPS, SÉLECTEURS, PASTILLES ═══════════════ */
/* Tous les boutons de disposition / couleur / thème / police des 9 outils */
.sb-btn, .sb-toggle, .sb-font-btn, .sb-btn-danger,
.pt-btn, .pt-color-btn, .pt-btn-reset,
.pc-layout-btn, .pc-theme-btn, .pc-btn-reset,
.swot-layout-btn, .swot-color-btn,
.ansoff-color-btn, .mix4p-color-btn, .scp-color-btn, .persona-color-btn, .seuil-color-btn {
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-text);
    transform: none;
}
.sb-btn:hover, .sb-toggle:hover, .sb-font-btn:hover, .sb-btn-danger:hover,
.pt-btn:hover, .pt-color-btn:hover, .pt-btn-reset:hover,
.pc-layout-btn:hover, .pc-theme-btn:hover, .pc-btn-reset:hover,
.swot-layout-btn:hover, .swot-color-btn:hover,
.ansoff-color-btn:hover, .mix4p-color-btn:hover, .scp-color-btn:hover, .persona-color-btn:hover, .seuil-color-btn:hover {
    background: var(--paper-2);
    color: var(--ink);
    border-color: var(--ink);
    transform: none;
}
/* État actif : double filet encre (bordure + outline interne), jamais de fond coloré */
.sb-btn.active, .sb-toggle.active,
.pt-btn.active, .pt-color-btn.active,
.pc-layout-btn.active, .pc-theme-btn.active,
.swot-layout-btn.active, .swot-color-btn.active,
.ansoff-color-btn.active, .mix4p-color-btn.active, .scp-color-btn.active, .persona-color-btn.active, .seuil-color-btn.active {
    background: var(--white);
    color: var(--ink);
    border-color: var(--ink);
    outline: 1px solid var(--ink);
    outline-offset: -3px;
}
.sb-btn.active:focus-visible, .sb-toggle.active:focus-visible,
.pt-btn.active:focus-visible, .pt-color-btn.active:focus-visible,
.pc-layout-btn.active:focus-visible, .pc-theme-btn.active:focus-visible,
.swot-layout-btn.active:focus-visible, .swot-color-btn.active:focus-visible,
.ansoff-color-btn.active:focus-visible, .mix4p-color-btn.active:focus-visible,
.scp-color-btn.active:focus-visible, .persona-color-btn.active:focus-visible, .seuil-color-btn.active:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}
.sb-btn svg, .sb-btn.active svg, .sb-font-btn svg,
.swot-layout-btn svg, .pt-btn svg, .pc-layout-btn svg { opacity: 1; }
.pc-layouts { background: transparent; border-radius: 0; padding: 0; gap: 4px; }
.pc-layout-btn { padding: 5px 10px; }

/* Pastilles de couleur : carrés */
.swot-color-preview span, .ansoff-color-preview span, .mix4p-color-preview span,
.scp-color-preview span, .persona-color-preview span,
.pt-color-dots span, .pc-theme-dot { border-radius: 0; }

/* Champs texte, sélecteurs, recherche de police */
.sb-select, .sb-input, .sb-font-search, .pt-input, .pc-input {
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-text);
}
.sb-select:hover, .sb-input:hover, .pt-input:hover, .pc-input:hover { border-color: var(--ink); }
.sb-select:focus, .sb-input:focus, .pt-input:focus, .pc-input:focus {
    border-color: var(--ink);
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.sb-font-search { border-width: 0 0 1px; }
.sb-font-search:focus { outline: none; border-bottom-color: var(--ink); }
.sb-font-search::placeholder, .sb-input::placeholder, .pt-input::placeholder, .pc-input::placeholder { color: var(--muted); }

/* Liste déroulante des polices */
.sb-font-dropdown {
    background: var(--white);
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
}
.sb-font-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
.sb-font-opt { border-radius: 0; color: var(--ink); }
.sb-font-opt:hover { background: var(--paper-2); color: var(--ink); }
.sb-font-opt.active { background: var(--paper-2); color: var(--ink); font-weight: 600; }

/* Sélecteurs de couleur natifs : carrés, filet --line */
.sb-color-row input[type="color"], .sb-field input[type="color"],
.pt-color-input, .pc-color-input {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 2px;
}
.sb-color-row input[type="color"]:hover, .sb-field input[type="color"]:hover,
.pt-color-input:hover, .pc-color-input:hover { border-color: var(--ink); }
.sb-color-row input[type="color"]::-webkit-color-swatch,
.sb-field input[type="color"]::-webkit-color-swatch,
.pt-color-input::-webkit-color-swatch,
.pc-color-input::-webkit-color-swatch { border: none; border-radius: 0; }

/* Cases à cocher et curseurs */
.sb-check input[type="checkbox"], .pt-check input[type="checkbox"], .pc-check input,
.sb-range-row input[type="range"] { accent-color: var(--ink); }


/* ═══ 05 · BOUTON EXPORT PNG (primaire jaune) ═══════════════════ */
.sb-btn-export, .pt-btn-export, .pc-btn-export,
#btn-export, #swot-export, #pestel-export, #porter-export, #bmc-export,
#ansoff-export, #mix4p-export, #scp-export, #persona-export {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    background: var(--spot);
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 14px 16px;
    padding-top: calc(14px + .06em);
    opacity: 1;
    filter: none;
    white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.sb-btn-export:hover, .pt-btn-export:hover, .pc-btn-export:hover,
#btn-export:hover, #swot-export:hover, #pestel-export:hover, #porter-export:hover, #bmc-export:hover,
#ansoff-export:hover, #mix4p-export:hover, #scp-export:hover, #persona-export:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    opacity: 1;
    filter: none;
}
.sb-btn-export svg, .pt-btn-export svg, .pc-btn-export svg { width: 16px; height: 16px; opacity: 1; }
/* Dans les barres d'outils horizontales (PESTEL, BMC, Porter), le bouton garde sa largeur naturelle */
.pt-btn-export, .pc-btn-export, #pestel-export, #bmc-export, #porter-export { width: auto; }


/* ═══ 06 · ENVELOPPES DE CANVAS (l'intérieur n'est pas touché) ══ */
.swot-canvas-wrap, .scp-canvas-wrap, .porter-canvas-wrap, .pestel-canvas-wrap,
.persona-canvas-wrap, .bmc-canvas-wrap, .ansoff-canvas-wrap, .mix4p-canvas-wrap,
[class$="-canvas-wrap"], #mapping-canvas-outer {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 24px;
}
/* Largeur des conteneurs spécifiques (tools.css : pestel 1200, porter 1100, bmc 1400)
   élargie pour que l'élément exporté garde au moins la largeur de la baseline
   (pestel 1152, porter 1052, bmc 1352 px à 1440, soit ×2 dans le PNG) malgré le
   padding-inline du .container du site (72 px à 1440) et celui de l'enveloppe (24 px). */
.tool-work .pestel-container { max-width: 1400px; }
.tool-work .porter-container { max-width: 1300px; }
.tool-work .bmc-container { max-width: none; padding-inline: var(--gutter); }
.bmc-canvas-wrap { padding: 12px; }
/* Mapping : le damier (mode fond transparent) reste aligné sur le canvas, pas sur le padding */
#mapping-canvas-outer > .mapping-checkerboard { inset: 24px; }


/* ═══ 06b · PORTER : PANNEAU « INTENSITÉ DES FORCES » ══════════
   Hors du canvas exporté (#porter-canvas) : soumis aux règles de la coquille
   (angles droits, aucune ombre, aucun dégradé, encre / filets). Les pastilles
   .porter-panel-dot gardent leur couleur de force (écho au radar). Les badges
   de niveau et les pastilles de thème reçoivent leurs couleurs en style inline
   depuis porter.js / porter.html : !important nécessaire. */
.porter-panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-text);
}
.porter-panel-title {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.porter-panel-dot { border-radius: 0; }
.porter-panel-name {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    font-family: var(--font-text);
}
.porter-panel-name:focus { border-color: var(--ink); outline: none; }
.porter-panel-name:focus-visible { outline: 1px solid var(--ink); outline-offset: -2px; }
.porter-slider {
    border-radius: 0;
    background: var(--line);
    background-image: none;
    accent-color: var(--ink);
}
.porter-slider::-webkit-slider-thumb {
    border-radius: 0;
    background: var(--white);
    border: 1px solid var(--ink);
    box-shadow: none;
}
.porter-slider::-webkit-slider-thumb:hover { border-color: var(--ink); background: var(--paper-2); }
.porter-slider::-moz-range-thumb {
    border-radius: 0;
    background: var(--white);
    border: 1px solid var(--ink);
    box-shadow: none;
}
.porter-slider:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.porter-panel-level {
    background: transparent !important;
    border: 1px solid var(--ink);
    border-radius: 0;
    color: var(--ink) !important;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: .08em;
}
.porter-panel-val { color: var(--ink) !important; font-family: var(--font-mono); font-weight: 500; }
/* Pastilles de thème : à plat, première couleur du thème (l'écho au thème du canvas reste lisible) */
.pc-theme-dot { background-image: none !important; }
.pc-theme-btn[data-theme="corporate"] .pc-theme-dot { background-color: #3b82f6 !important; }
.pc-theme-btn[data-theme="sunset"]    .pc-theme-dot { background-color: #f97316 !important; }
.pc-theme-btn[data-theme="forest"]    .pc-theme-dot { background-color: #22c55e !important; }
.pc-theme-btn[data-theme="night"]     .pc-theme-dot { background-color: #8b5cf6 !important; }
.pc-theme-btn[data-theme="mono"]      .pc-theme-dot { background-color: #64748b !important; }


/* Note (A6) : l'ombre portée de la racine exportée #xxx-canvas n'est PAS
   neutralisée ici : un export avant/après (SWOT, Persona, Ansoff) montre que
   dom-to-image la peint dans l'angle arrondi transparent du PNG (≈ 220 px
   différents en haut à gauche) ; la retirer changerait le livrable. */


/* ═══ 06c · AUCUNE ICÔNE DÉCORATIVE DANS LA COQUILLE (brief 4.5) ═
   Les boutons portent tous un libellé texte ; les pictos (disposition, vue,
   corbeille, flèche de téléchargement) et les émojis du panneau Porter sont
   masqués. Le chevron du sélecteur de police (.sb-font-btn) reste : il signale
   la liste déroulante. Les pastilles de couleur sont des aperçus, pas des icônes. */
.porter-panel-emoji,
.sb-btn svg, .sb-btn-danger svg, .sb-btn-export svg,
.swot-layout-btn svg, .pt-btn svg, .pc-layout-btn svg,
.pt-btn-reset svg, .pc-btn-reset svg,
.pt-btn-export svg, .pc-btn-export svg { display: none; }
/* Les boutons « Réinitialiser » des barres horizontales (PESTEL, BMC, Porter) étaient icône seule : libellé texte. */
.pt-btn-reset, .pc-btn-reset {
    width: auto; height: auto;
    padding: 6px 10px;
    font-family: var(--font-text);
    font-size: .82rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}
.pt-btn-reset:hover, .pc-btn-reset:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }
/* Alignement des colonnes : le haut de la sidebar sur le haut de l'enveloppe du canvas
   (kicker « Aperçu de l'export » : 16,8 px + 12 px de marge). */
@media (min-width: 901px) {
    .swot-layout > .swot-sidebar, .scp-layout > .scp-sidebar, .persona-layout > .persona-sidebar,
    .ansoff-layout > .ansoff-sidebar, .mix4p-layout > .mix4p-sidebar, .mapping-layout > .mapping-sidebar,
    .seuil-layout > .seuil-sidebar { margin-top: calc(.75rem * 1.4 + 12px); }
}


/* ═══ 07 · TOAST ════════════════════════════════════════════════ */
.toast {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-text);
    font-size: .9375rem;
}
.toast--error, .toast.error { border-color: var(--signal); }


/* ═══ 08 · WEBMOCKUP ════════════════════════════════════════════ */
.mockup-form { max-width: 640px; margin: var(--s-4) 0 0; }
.mockup-form-hero { margin-top: var(--s-4); }
.mockup-form .kicker { margin-bottom: var(--s-2); }
.mockup-form-hero .mockup-input-group, .mockup-input-group {
    background: var(--white);
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-height: 56px;
    gap: 0;
}
.mockup-form-hero .mockup-input-group:focus-within, .mockup-input-group:focus-within {
    background: var(--white);
    border-color: var(--ink);
    box-shadow: none;
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.input-icon { display: none; }
.mockup-form-hero #url-input, #url-input {
    color: var(--ink);
    background: var(--white);
    font-family: var(--font-text);
    font-size: 1.0625rem;
    padding: 0 16px;
    min-height: 54px;
    text-align: left;
}
.mockup-form-hero #url-input::placeholder, #url-input::placeholder { color: var(--muted); }
.mockup-input-group .btn {
    align-self: stretch;
    border-width: 0 0 0 1px;
    padding-block: 0;
    justify-content: flex-start;
    min-height: 54px;
}
.page-hero .mockup-form + .caption { margin-top: 12px; color: var(--muted); }

/* Résultats */
.captured-url { color: var(--muted); word-break: break-all; }
.devices-grid { gap: var(--s-3); }
.device-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    align-items: flex-start;
    padding: var(--s-4) var(--s-3) var(--s-3);
    transition: none;
}
.device-card:hover { border-color: var(--line); box-shadow: none; }
.device-info { text-align: left; }
.device-info h3 { font-size: 1rem; margin-bottom: 12px; }
.download-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 12px 16px;
    padding-top: calc(12px + .06em);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.download-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.download-btn:disabled { color: var(--muted); border-color: var(--line); background: var(--paper-2); }
.download-btn svg { display: none; }
.device-error { color: var(--signal); text-align: left; padding: var(--s-3) 0; }


/* ═══ 09 · BLOC PÉDAGOGIQUE (_tool_footer.html) ════════════════ */
.tool-footer h3 { margin-bottom: 0; }
.tool-nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    border-top: 1px solid var(--line);
    padding-top: var(--s-3);
}
.tool-footer-line { border-top: 1px solid var(--line); padding-top: var(--s-3); align-items: baseline; }
.tool-footer-line p { margin: 0; max-width: 62ch; }


/* ═══ 10 · RESPONSIVE (couleurs et rayons uniquement) ═══════════ */
@media (max-width: 900px) {
    .swot-sidebar, .scp-sidebar, .persona-sidebar, .ansoff-sidebar,
    .mix4p-sidebar, .mapping-sidebar, [class$="-sidebar"],
    .pestel-toolbar, .bmc-toolbar { border-radius: 0; }
    .sb-btn-export, #btn-export, #swot-export, #ansoff-export, #mix4p-export, #scp-export, #persona-export, #seuil-export { width: auto; }
    .sb-sep { background: var(--line); }
}
@media (max-width: 800px) {
    /* Porter, panneau « Intensité des forces » : le champ de nom garde une largeur lisible
       (pastille + emoji + nom sur une ligne, curseur + niveau + note sur la suivante). */
    .porter-panel-row { flex-wrap: wrap; }
    .porter-panel-name { flex: 1 1 140px; width: auto; min-width: 140px; }
    .porter-panel-val { text-align: left; }
}
@media (max-width: 719.98px) {
    /* Panneau mobile : plus de traits verticaux isolés ; chaque groupe libellé + contrôles sur sa propre ligne. */
    .sb-sep, .pt-sep, .pc-sep { display: none; }
    /* Barres d'outils à libellés (PESTEL, BMC…) : les boutons passent à la ligne au lieu de déborder. */
    .pt-group, .pt-btns, .pc-group, .pc-btns { flex-wrap: wrap; }
    .pt-group, .pc-group { flex: 1 1 100%; }
    .pt-btn, .pc-layout-btn { flex: 0 1 auto; }
    /* Panneau Porter : nom de la force sur toute la largeur, curseur + niveau + note sur la rangée suivante. */
    .porter-panel-name { flex: 1 1 100%; min-width: 0; }
    [class$="-sidebar"] .sb-section { flex: 1 1 100%; align-items: flex-start; }
    [class$="-sidebar"] .sb-section > .sb-label { width: 100%; }
}
@media (max-width: 640px) {
    .swot-canvas-wrap, .scp-canvas-wrap, .porter-canvas-wrap, .pestel-canvas-wrap,
    .persona-canvas-wrap, .bmc-canvas-wrap, .ansoff-canvas-wrap, .mix4p-canvas-wrap,
    [class$="-canvas-wrap"], #mapping-canvas-outer { padding: 12px; }
    #mapping-canvas-outer > .mapping-checkerboard { inset: 12px; }
    .mockup-form-hero .mockup-input-group, .mockup-input-group {
        border: 0;
        padding: 0;
        gap: 12px;
        min-height: 0;
    }
    .mockup-form-hero .mockup-input-group:focus-within, .mockup-input-group:focus-within { outline: none; }
    .mockup-form-hero #url-input, #url-input {
        width: 100%;
        border: 1px solid var(--ink);
        min-height: 56px;
        text-align: left;
    }
    #url-input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
    .mockup-input-group .btn {
        width: 100%;
        border-width: 1px;
        min-height: 56px;
        justify-content: flex-start;
    }
}

/* ── Partage d'une grille par lien ───────────────────────────── */
.tool-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-3);
}
.tool-share-note { margin: 0; color: var(--muted); }
.tool-privacy { margin-top: var(--s-2); }

/* Bandeau affiché quand on ouvre la grille de quelqu'un d'autre. */
.tool-shared {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
    margin-bottom: var(--s-4);
    padding: 12px 16px;
    border: 1px solid var(--ink);
    background: var(--spot);
}
.tool-shared p { margin: 0; font-weight: 600; color: var(--ink); }