/* Fiche d'un outil du répertoire */

.tool-detail-hero {
    background: var(--degrade-marine);
    color: #fff;
    padding: 3rem 0 3.5rem;
}

.tool-detail-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.tool-detail-icon {
    font-size: 2.6rem;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tool-detail-headings {
    min-width: 0;
}

/* Pastille translucide sur le marine du bandeau : le texte blanc y garde plus
   de 10:1. */
.tool-detail-category {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.25rem 0.85rem;
    font-family: var(--font-titres);
    font-size: 0.8rem;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
}

.tool-detail-quebec {
    margin-left: 0.4rem;
}

.tool-detail-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: var(--fw-medium);
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.tool-detail-lead {
    font-size: 1.15rem;
    font-weight: var(--fw-book);
    line-height: 1.65;
    max-width: 62ch;
    margin-bottom: 2rem;
}

/* Appel à l'action vers le site de l'éditeur — un bouton de la charte : vert,
   carré, texte blanc en capitales, vert foncé au survol. L'adresse du site
   reste en minuscules, telle qu'on la tape. */
.tool-detail-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    background: var(--vert);
    color: #fff;
    padding: 0.9rem 1.75rem;
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: var(--transition);
    min-height: 44px;
}

.tool-detail-cta:hover {
    background: var(--vert-fonce);
}

.tool-detail-cta-host {
    font-size: 0.8rem;
    font-weight: var(--fw-book);
    text-transform: none;
    letter-spacing: 0;
}

.tool-detail-nolink {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.8rem 1.25rem;
    font-size: 0.95rem;
}

/* Corps de la fiche */
.tool-detail-body {
    padding: 3rem 24px 4rem;
    max-width: 860px;
}

.tool-detail-section {
    margin-bottom: 2.75rem;
}

.tool-detail-section h2 {
    font-size: 1.3rem;
    font-weight: var(--fw-heavy);
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--border-light);
}

/* Tableau « en bref » — 175px permet aux quatre encadrés de tenir sur une
   seule rangée dans la colonne de 812px, au lieu de 3 + 1 orphelin. */
.tool-detail-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(175px, 100%), 1fr));
    gap: 1rem;
}

/* Marge latérale d'un rem plutôt que d'un rem et quart : sur quatre colonnes,
   il reste ainsi 152px de texte utile, de quoi tenir la valeur la plus longue
   du répertoire (« Gratuit/16$/mois », 146px) sur une seule ligne. Avec
   1.25rem elle passait à 143px et `overflow-wrap: anywhere` la coupait au
   milieu d'un mot — « moi / s ». */
.tool-detail-facts > div {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    padding: 1rem;
}

.tool-detail-facts dt {
    font-family: var(--font-titres);
    font-size: 0.78rem;
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

/* La valeur se lit comme celle d'une statistique : Futura, comme les chiffres
   de la section « À propos ». La largeur de colonne calculée plus haut
   (« Gratuit/16$/mois » sur une ligne) l'a été dans cette police. */
.tool-detail-facts dd {
    font-family: var(--font-titres);
    font-size: 1.05rem;
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* La fonction d'IA ouvre l'encadré : c'est elle qui vaut à l'outil sa place
   au répertoire. Filet vert à gauche, comme les accents de la charte. */
.tool-detail-facts > .tool-detail-fact-ia {
    border-left: 4px solid var(--vert);
}

/* Outil de l'AERMQ ou de l'un de ses partenaires : filet marine. */
.tool-detail-facts > .tool-detail-fact-aermq {
    border-left: 4px solid var(--marine);
}

/* Seconde ligne d'une valeur : ville de l'éditeur, précision sur la langue. */
.tool-detail-origine {
    display: inline-block;
    margin-top: 0.2rem;
    font-family: var(--font-texte);
    font-size: 0.85rem;
    font-weight: var(--fw-book);
    color: var(--text-secondary);
    line-height: 1.45;
}

.tool-detail-disclaimer {
    margin-top: 1rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Fonctionnalités */
.tool-detail-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 0.75rem;
}

.tool-detail-features li {
    position: relative;
    padding: 0.85rem 1rem 0.85rem 2.5rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.tool-detail-features li::before {
    content: '✓';
    position: absolute;
    left: 1rem;
    color: var(--vert-fonce);
    font-weight: var(--fw-heavy);
}

/* Outils apparentés */
.tool-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1rem;
}

.tool-related-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: var(--transition);
    min-height: 44px;
}

.tool-related-card:hover {
    border-color: var(--vert);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.tool-related-icon {
    font-size: 1.5rem;
}

.tool-related-name {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    line-height: 1.35;
}

.tool-related-pricing {
    font-size: 0.85rem;
    color: var(--marine);
    font-weight: var(--fw-medium);
}

/* Retour au répertoire */
.tool-detail-back {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.tool-detail-back a {
    color: var(--marine);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.tool-detail-back a:hover {
    text-decoration: underline;
    text-decoration-color: var(--vert);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Fiche inexistante */
.tool-detail-missing {
    padding: 5rem 0;
    text-align: center;
}

.tool-detail-missing h1 {
    font-size: 1.9rem;
    font-weight: var(--fw-heavy);
    margin-bottom: 1rem;
}

.tool-detail-missing p {
    color: var(--text-secondary);
    max-width: 55ch;
    margin: 0 auto 1.5rem;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .tool-detail-hero {
        padding: 2rem 0 2.5rem;
    }

    .tool-detail-head {
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .tool-detail-icon {
        width: 58px;
        height: 58px;
        font-size: 2rem;
    }

    .tool-detail-lead {
        font-size: 1.05rem;
        margin-bottom: 1.5rem;
    }

    .tool-detail-cta {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .tool-detail-body {
        padding: 2rem 16px 3rem;
    }

    .tool-detail-section {
        margin-bottom: 2rem;
    }
}

.tool-detail-context {
    color: var(--text-secondary);
    line-height: 1.75;
}

/* La catégorie du bandeau est devenue un lien : garder l'aspect pastille. */
a.tool-detail-category {
    color: #fff;
    text-decoration: none;
    transition: var(--transition);
    /* Lien vers la catégorie : cible tactile de 44 px au doigt. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 1rem;
}

a.tool-detail-category:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
}

/* ==========================================================================
   Pages de catégorie
   --------------------------------------------------------------------------
   Douze pages qui n'existaient pas : les catégories n'étaient qu'un filtre
   JavaScript sur l'accueil, sans adresse propre, donc sans possibilité d'être
   trouvées sur « outils IA étanchéité » ou « logiciel isolation Québec ».
   ========================================================================== */

.category-hero {
    background: var(--degrade-marine);
    color: #fff;
    padding: 3rem 0 3.25rem;
}

/* Surtitre vert, comme les titres verts sur marine d'aermq.qc.ca : 4,9:1 au
   plus clair du dégradé. */
.category-hero-eyebrow {
    font-family: var(--font-titres);
    color: var(--vert);
    font-size: 0.8rem;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.6rem;
}

.category-hero-title {
    font-size: clamp(1.55rem, 4.5vw, 2.8rem);
    font-weight: var(--fw-heavy);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin-bottom: 1rem;
    /* « Commercialisation » et « Développement durable » sont des mots trop
       longs pour tenir sur un écran de 280 px : sans coupure, ils débordaient
       la page de 28 px. */
    overflow-wrap: break-word;
}

.category-hero-lead {
    font-size: 1.1rem;
    font-weight: var(--fw-book);
    line-height: 1.65;
    max-width: 65ch;
}

/* Page introuvable : la recherche s'aligne sur le texte, à gauche, plutôt
   que d'être centrée comme dans le bandeau de l'accueil. */
.introuvable .search-container {
    margin: 1.75rem 0 0;
}

.category-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    list-style: none;
    margin-top: 1.75rem;
}

/* Pastilles translucides sur le marine : le texte blanc y garde plus de 10:1. */
.category-hero-stats li {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.4rem 1rem;
    font-size: 0.92rem;
}

.category-hero-stats strong {
    font-weight: var(--fw-heavy);
}

.category-body {
    padding: 3rem 24px 4rem;
}

.category-section-title {
    font-size: 1.35rem;
    font-weight: var(--fw-heavy);
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--border-light);
}

.category-others {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-color);
}

.category-others h2 {
    font-size: 1.2rem;
    font-weight: var(--fw-heavy);
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.category-others-grid,
.category-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}

.category-other-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.25rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: var(--transition);
    min-height: 44px;
}

.category-other-card:hover,
.category-index-card:hover {
    border-color: var(--vert);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.category-other-name {
    font-family: var(--font-titres);
    font-weight: var(--fw-book);
    color: var(--text-primary);
}

.category-other-count {
    font-size: 0.85rem;
    color: var(--marine);
    font-weight: var(--fw-book);
}

.category-index-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.5rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: var(--transition);
}

.category-index-name {
    font-size: 1.15rem;
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    line-height: 1.3;
}

.category-index-intro {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
}

/* En marine et non en vert : le vert de la charte n'a que 2,7:1 sur blanc,
   trop peu pour du texte. */
.category-index-count {
    font-size: 0.88rem;
    font-weight: var(--fw-medium);
    color: var(--marine);
}

@media (max-width: 768px) {
    .category-hero {
        padding: 2rem 0 2.25rem;
    }

    .category-body {
        padding: 2rem 16px 3rem;
    }

    .category-others {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }
}


/* Le bandeau utilisait toute la largeur du conteneur (1280 px) alors que le
   corps est limité à 860 px : le titre commençait 160 px à gauche du texte
   qu'il annonce. Même largeur des deux côtés. La page de catégorie garde son
   bandeau pleine largeur, puisque sa grille d'outils l'est aussi. */
.tool-detail-hero > .container {
    max-width: 860px;
}

/* Sans cela, les liens du tableau « en bref » et du contexte tombaient sur le
   bleu souligné par défaut du navigateur, hors charte. Marine souligné de
   vert, comme les autres liens du texte. */
.tool-detail-facts dd a,
.tool-detail-context a {
    color: var(--marine);
    font-weight: var(--fw-medium);
    text-decoration: none;
    border-bottom: 2px solid rgba(94, 177, 72, 0.5);
}

/* Le lien du tableau « en bref » ne faisait que 22 px de haut, sous le minimum
   de 24 px du critère WCAG 2.2 « Target Size (Minimum) ». Il occupe maintenant
   la hauteur d'une vraie cible tactile sans changer d'aspect. */
.tool-detail-facts dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.tool-detail-facts dd a:hover,
.tool-detail-context a:hover {
    border-bottom-color: var(--vert);
}

/* Aperçu du site de l'éditeur, en tête du corps de la fiche. */
.tool-detail-shot-frame {
    margin: 0 0 2.75rem;
}

.tool-detail-shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 450;
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    box-shadow: var(--shadow-md);
}

.tool-detail-shot-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    background: var(--degrade-marine);
}

.tool-detail-shot-frame figcaption {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.tool-detail-shot-frame figcaption a {
    color: var(--marine);
    font-weight: var(--fw-medium);
    text-decoration-color: var(--vert);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

@media (max-width: 768px) {
    .tool-detail-shot-frame {
        margin-bottom: 2rem;
    }

    .tool-detail-shot-placeholder {
        font-size: 3rem;
    }
}

/* Description telle que l'éditeur la formule, sous le tableau « en bref ».
   L'accroche de la fiche dit d'abord à quoi l'outil sert dans le métier. */
.tool-detail-editeur {
    margin-top: 1rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.tool-detail-editeur strong {
    color: var(--text-primary);
}

/* ==========================================================================
   Lexique
   ========================================================================== */

.lexique {
    display: grid;
    gap: 1rem;
}

.lexique-entree {
    padding: 1.25rem 1.5rem;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--vert);
}

.lexique-entree dt {
    font-family: var(--font-titres);
    font-size: 1.05rem;
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.lexique-entree dd {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .lexique-entree {
        padding: 1.1rem 1.2rem;
    }
}