/* ---------------------------------------------------------------------------
   Typographie — deux familles, selon la charte de l'AERMQ
   ---------------------------------------------------------------------------
   Futura PT porte les titres et les boutons : titres de page et de section,
   noms d'outils, navigation, boutons, étiquettes en capitales. DM Sans porte
   le texte courant : paragraphes, listes, champs, fil d'Ariane, liens et
   mentions du pied de page. Arial la remplace tant qu'elle n'est pas chargée.

   On écrit var(--font-titres) ou var(--font-texte), et var(--fw-book),
   var(--fw-medium) ou var(--fw-heavy) plutôt qu'un nombre à la main : 400,
   500 et 700, soit Book, Medium et Heavy pour la Futura, Regular, Medium et
   Bold pour DM Sans. Aucune autre graisse ne doit apparaître dans les feuilles
   de style, pour que la règle reste vérifiable d'un simple grep.

   Les fichiers sont hébergés ici même, dans /fonts : la typographie du site ne
   dépend d'aucun service externe ni d'aucun autre site. Pas de local() non
   plus : une autre version de l'une ou l'autre police, installée sur le poste
   du visiteur, passerait devant la nôtre et le rendu cesserait d'être le même
   pour tout le monde. (Les @font-face de la Futura ne pointaient d'abord que
   vers local() : seuls les postes qui l'avaient installée la voyaient, et
   tous les autres tombaient sur Century Gothic ou Avenir sans que rien ne le
   signale.)

   Futura PT — convertie en WOFF2 : 95 Ko au lieu de 304 Ko pour les TTF/OTF
   d'origine, à dessin identique ; les originaux restent à côté comme source
   de conversion et comme repli pour les navigateurs sans WOFF2. La graisse
   déclarée est celle que le site utilise ; elle ne reprend pas le
   usWeightClass interne des fichiers (400 / 450 / 600), qui n'est pas espacé
   régulièrement et ferait synthétiser de faux gras. */
@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-Book.woff2') format('woff2'),
         url('/fonts/FuturaPT-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-Medium.woff2') format('woff2'),
         url('/fonts/FUTURAPTMEDIUM.OTF') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-Heavy.woff2') format('woff2'),
         url('/fonts/FuturaPT-Heavy.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* DM Sans — le fichier même que Google Fonts sert à aermq.qc.ca pour la même
   demande (DM Sans 400, 500 et 700, sous-ensemble latin, version 4.004) : le
   texte courant se dessine ici comme sur le site de l'association. C'est une
   police variable : un seul fichier de 37 Ko pour les trois graisses, sans
   faux gras. Son axe de taille optique est figé à 14, le dessin prévu pour le
   texte courant.

   Le sous-ensemble latin couvre tout le français : accents, œ et æ,
   guillemets, espace insécable. Seule l'espace fine insécable (U+202F), que le
   site n'emploie pas, en est absente ; elle s'afficherait en Arial.

   Licence SIL Open Font License 1.1 : fonts/OFL-DMSans.txt. */
@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/DMSans-Variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Charte de l'AERMQ — chaque couleur garde le nom que lui donne la charte.
         marine           titres et texte ; aplat des états actifs
         marine profond   fonds des sections foncées, dégradés, pied de page
         vert             boutons, accents (filets, soulignés, puces)
         vert foncé       survol des boutons
         vert secondaire  second ton des filets d'accent
         gris pâle        fonds des sections claires
         blanc            texte sur fond marine ou vert

       Contrastes (WCAG 2.2) :
         blanc sur marine profond  17,1:1     blanc sur marine       13,2:1
         vert sur marine profond    6,4:1     vert sur marine         4,9:1
         marine sur blanc          13,2:1     marine sur gris pâle   11,6:1
         blanc sur vert             2,7:1     blanc sur vert foncé    3,4:1

       La dernière ligne est sous le seuil AA de 4,5:1 : le texte blanc sur vert
       que la charte demande pour les boutons n'y est pas conforme. Le vert ne
       porte donc du texte que sur les boutons d'action, et ne colore jamais un
       texte à lire sur fond clair (2,7:1 sur blanc) : ce texte reste marine,
       et le vert souligne ou marque — filets, soulignés, coches. Sur les fonds
       marine, il passe (4,9:1 au plus clair du dégradé). */
    --marine: #1A3053;
    --marine-profond: #021B3F;
    --vert: #5EB148;
    --vert-fonce: #489D36;
    --vert-secondaire: #4CA834;
    --gris-pale: #F0F0F0;
    --blanc: #FFFFFF;

    /* Fond des sections foncées : bandeaux de l'accueil, des catégories et des
       fiches, section « À propos », aperçus sans capture. */
    --degrade-marine: linear-gradient(135deg, var(--marine-profond) 0%, var(--marine) 100%);

    --bg-color: var(--gris-pale);
    --bg-light: var(--blanc);
    --card-bg: var(--blanc);
    --text-primary: var(--marine);
    --text-secondary: #5a6171;
    /* #8b95a5 ne donnait que 3,03:1 sur le fond de page : sous le seuil WCAG
       AA pour du texte. #666E7A donne 4,52:1 sur le gris pâle et 5,15:1 sur
       blanc, tout en restant nettement plus léger que --text-primary. */
    --text-muted: #666E7A;
    --border-color: #e1e5eb;
    --border-light: #f0f2f5;

    /* Enhanced shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* Transitions */
    --transition-fast: all 0.15s ease;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Pas de variable d'arrondi : la charte veut des boutons carrés, et les
       champs, les filtres et les cartes suivent la même géométrie, comme sur
       aermq.qc.ca. Aucune règle n'écrit de border-radius, sauf pour imiter un
       objet qui n'est pas à nous — la bulle de Voiceflow, en fin de fichier. */

    /* Typographie — voir l'en-tête du fichier. Les substituts de la Futura
       sont géométriques, pour que la mise en page bouge le moins possible
       pendant le chargement (font-display: swap). Pour DM Sans, la charte
       nomme Arial. */
    --font-titres: 'Futura PT', 'Futura', 'Century Gothic', 'Avenir', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-texte: 'DM Sans', Arial, sans-serif;

    /* Les trois seules graisses du site. Toute autre valeur est une erreur :
       sur la Futura, elle ferait fabriquer au navigateur un faux gras. */
    --fw-book: 400;    /* Futura PT Book   · DM Sans Regular — texte courant, sous-titre de l'accueil, filtres */
    --fw-medium: 500;  /* Futura PT Medium · DM Sans Medium  — boutons, navigation, noms d'outils, étiquettes */
    --fw-heavy: 700;   /* Futura PT Heavy  · DM Sans Bold    — titres de page et de section, gras du texte */
}

/* Les boutons n'héritent pas de la police de la page — le navigateur leur
   impose la sienne : ils sont nommés ici avec les titres. */
h1, h2, h3, h4, h5, h6,
button {
    font-family: var(--font-titres);
}

body {
    font-family: var(--font-texte);
    font-weight: var(--fw-book);
    line-height: 1.7;
    color: var(--text-primary);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    /* Respecte l'encoche des iPhone en orientation paysage. */
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
}

/* Réservé aux lecteurs d'écran */
.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;
}

/* Lien d'évitement, visible seulement au clavier. Aplat marine et non vert :
   ce n'est pas un bouton d'action, et son texte blanc garde ainsi 13,2:1. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 1100;
    background: var(--marine);
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

/* Header - Modern AERMQ Style */
.header {
    background: var(--bg-light);
    color: var(--text-primary);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border-color);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    min-height: 92px;
}

.logo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    min-width: 0;
}

.logo:hover {
    opacity: 0.85;
}

/* Le titre du logo est un <span> : le <h1> de chaque page décrit son contenu,
   pas la marque du site (règle d'un seul h1 pertinent par page). */
.logo .logo-title,
.logo h1 {
    font-family: var(--font-titres);
    font-size: 1.6rem;
    font-weight: var(--fw-heavy);
    color: var(--marine);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
    transition: var(--transition);
}

.tagline-creator {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: normal;
    font-weight: var(--fw-book);
    margin: 0;
}

.tagline {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: var(--fw-book);
    margin: 0;
}

.nav {
    display: flex;
    gap: 0;
    align-items: center;
}

/* Bouton hamburger — masqué au-dessus de 992px (voir la requête média). */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.nav-toggle:hover {
    border-color: var(--vert);
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: var(--text-primary);
    transition: var(--transition);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Bouton « Déconnexion » présenté comme un lien de navigation. */
.nav-link-button {
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.nav-link {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    font-size: 0.95rem;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1.75rem 1.25rem;
    transition: var(--transition);
    position: relative;
    border-bottom: none;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--vert);
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--marine);
    background: rgba(94, 177, 72, 0.05);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--marine);
}

/* Hero Section - Modern Building Envelope Style */
.hero {
    background: var(--degrade-marine);
    color: white;
    padding: 5rem 0 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 100px,
            rgba(255,255,255,0.02) 100px,
            rgba(255,255,255,0.02) 101px
        );
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}

/* « Une initiative de l'AERMQ et de Bollé Communications », au-dessus du
   titre de l'accueil : les deux logos côte à côte, séparés d'un filet, puis
   la phrase en toutes lettres — avec l'article, que le logo seul ne pouvait
   pas porter (« Une initiative de AERMQ »). Les deux logos sont les versions
   blanches faites pour le marine : le mot-symbole de l'AERMQ, tel que
   l'emploie aermq.qc.ca, et la défonce de Bollé. */
.hero-signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.8rem;
}

.hero-signature-logos {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.hero-signature-logos img {
    display: block;
    width: auto;
}

.hero-signature-logos img:first-child {
    height: 28px;
}

.hero-signature-logos img:last-child {
    height: 36px;
}

.hero-signature-filet {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.4);
}

.hero-signature-texte {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.hero-signature-texte strong {
    font-weight: var(--fw-medium);
    color: #fff;
}

.hero-title {
    font-family: var(--font-titres);
    font-size: 3rem;
    font-weight: var(--fw-heavy);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-subtitle {
    font-family: var(--font-titres);
    font-size: 1.25rem;
    font-weight: var(--fw-book);
    margin-bottom: 2.5rem;
    opacity: 1;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Search Container - Modern Style */
.search-container {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    gap: 0;
    background: white;
    padding: 6px;
    box-shadow: var(--shadow-xl);
    transition: var(--transition);
}

.search-container:focus-within {
    box-shadow: var(--shadow-xl), 0 0 0 4px rgba(255, 255, 255, 0.3);
}

/* Marge latérale de 1,25rem : le texte indicatif mesure 432 px en DM Sans,
   contre 363 en Futura. Avec les 1,75rem d'avant, il ne restait que 437 px
   dans le champ à 1280 px, et Chrome le coupait avant la parenthèse. */
.search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 1.1rem 1.25rem;
    font-family: var(--font-texte);
    font-size: 1rem;
    font-weight: var(--fw-book);
    color: var(--text-primary);
    background: transparent;
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* Bouton d'action : vert, carré, texte blanc en capitales, comme le veut la
   charte. Au survol, le vert foncé, et rien d'autre — ni ombre ni déplacement. */
.search-btn {
    background: var(--vert);
    color: white;
    border: none;
    padding: 1.1rem 2.25rem;
    font-family: var(--font-titres);
    font-size: 1rem;
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.search-btn:hover {
    background: var(--vert-fonce);
}

/* Quebec Regions in About Section */
.quebec-regions-about {
    margin: 2.5rem 0;
    text-align: center;
}

.quebec-regions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

.region-tag {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 0.6rem 1.4rem;
    font-family: var(--font-titres);
    font-size: 0.9rem;
    font-weight: var(--fw-medium);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition);
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.region-tag:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Filters Section - Modern Style */
.filters-section {
    padding: 2rem 0;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

/* Quick Filters */
.quick-filters {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.75rem;
    background: var(--bg-color);
    flex-wrap: wrap;
    border: 1px solid var(--border-light);
}

.quick-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-filter-label {
    font-family: var(--font-titres);
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quick-filter-select {
    padding: 0.8rem 1.25rem;
    border: 2px solid var(--border-color);
    font-family: var(--font-texte);
    font-size: 0.95rem;
    font-weight: var(--fw-book);
    background: white;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    min-width: 160px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6171' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.quick-filter-select:hover {
    border-color: var(--vert);
}

.quick-filter-select:focus {
    outline: none;
    border-color: var(--marine);
    box-shadow: 0 0 0 3px rgba(94, 177, 72, 0.3);
}

.reset-filters-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
    padding: 0.8rem 1.5rem;
    font-family: var(--font-titres);
    font-size: 0.9rem;
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: var(--transition);
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.reset-filters-btn:hover {
    background: var(--text-primary);
    color: white;
    border-color: var(--text-primary);
}

.filters-title {
    font-family: var(--font-titres);
    font-size: 1.1rem;
    font-weight: var(--fw-heavy);
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.filter-btn {
    background: var(--bg-color);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    padding: 0.7rem 1.4rem;
    font-family: var(--font-titres);
    font-size: 0.9rem;
    font-weight: var(--fw-book);
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn:hover {
    border-color: var(--vert);
    color: var(--marine);
    background: rgba(94, 177, 72, 0.05);
}

/* Le filtre actif est un état, pas une action : il prend l'aplat marine et non
   le vert des boutons, dont il se distingue ainsi d'un coup d'œil. Le texte
   blanc y garde 13,2:1, là où il n'aurait que 2,7:1 sur le vert. */
.filter-btn.active {
    background: var(--marine);
    color: white;
    border-color: var(--marine);
}

/* Tools Section - Modern Style */
.tools-section {
    padding: 4rem 0;
    min-height: 500px;
    background: var(--bg-color);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-title {
    font-family: var(--font-titres);
    font-size: 2rem;
    font-weight: var(--fw-heavy);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* Sur le marine de la section « À propos », le titre marine disparaissait. */
.about-section .section-title {
    color: #fff;
}

.tools-count {
    font-family: var(--font-texte);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: var(--fw-book);
}

/* Tools Grid - Modern Cards */
.tools-grid {
    display: grid;
    /* min(340px, 100%) évite tout débordement horizontal sur écran étroit. */
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 1.75rem;
    margin-bottom: 2rem;
}

.tool-card {
    background: var(--card-bg);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vert), var(--vert-secondaire));
    opacity: 0;
    transition: var(--transition);
}

.tool-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.tool-card:hover::before {
    opacity: 1;
}

.tool-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tool-icon {
    font-size: 2.25rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-color), var(--border-light));
    flex-shrink: 0;
}

.tool-title {
    font-family: var(--font-titres);
    font-size: 1.25rem;
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.tool-category {
    display: inline-block;
    background: var(--marine);
    color: white;
    padding: 0.35rem 0.9rem;
    font-family: var(--font-titres);
    font-size: 0.7rem;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.tool-description {
    font-family: var(--font-texte);
    color: var(--text-secondary);
    margin-bottom: 1rem;
    flex-grow: 1;
    line-height: 1.7;
    font-size: 0.95rem;
}

.tool-features {
    list-style: none;
    margin-bottom: 1rem;
}

.tool-features li {
    font-family: var(--font-texte);
    color: var(--text-secondary);
    padding: 0.35rem 0;
    padding-left: 1.75rem;
    position: relative;
    font-size: 0.9rem;
}

.tool-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--vert-fonce);
    font-weight: var(--fw-medium);
}

.tool-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-light);
}

.tool-pricing {
    font-family: var(--font-texte);
    font-weight: var(--fw-medium);
    color: var(--marine);
    font-size: 0.95rem;
}

/* Tool Meta Section */
.tool-meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
    margin-bottom: 1rem;
}

.meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meta-label {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    font-size: 0.85rem;
    min-width: 60px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.meta-value {
    font-family: var(--font-texte);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.meta-value.pricing {
    font-weight: var(--fw-medium);
    color: var(--marine);
}

.meta-value.language {
    background: var(--bg-color);
    padding: 0.25rem 0.7rem;
    font-size: 0.85rem;
    border: 1px solid var(--border-light);
}

.tool-name {
    font-family: var(--font-titres);
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
    font-weight: var(--fw-medium);
}

/* Fonction d'IA de l'outil, sous son nom : c'est elle qui lui vaut sa place
   au répertoire, et elle doit se lire sans ouvrir la fiche. Pastille marine
   sur vert pâle (12:1) : le blanc sur vert n'atteindrait que 2,7:1. */
.tool-ia {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: -0.35rem 0 0.75rem;
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--marine);
}

.tool-ia-etiquette {
    flex-shrink: 0;
    padding: 0 0.4rem;
    background: rgba(94, 177, 72, 0.16);
    border: 1px solid rgba(94, 177, 72, 0.55);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    line-height: 1.6;
}

.feature-tag {
    display: inline-block;
    background: var(--bg-color);
    color: var(--text-secondary);
    padding: 0.4rem 0.9rem;
    font-family: var(--font-texte);
    font-size: 0.8rem;
    font-weight: var(--fw-medium);
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-light);
}

.tool-btn {
    background: var(--vert);
    color: white;
    border: none;
    padding: 0.8rem 1.75rem;
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
}

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

/* No Results */
.no-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
    font-family: var(--font-texte);
    font-size: 1.15rem;
    background: var(--bg-light);
    border: 2px dashed var(--border-color);
}

/* Categories Section - Modern Style */
.categories-section {
    padding: 5rem 0;
    background: var(--bg-light);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.category-card {
    background: var(--bg-color);
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    /* La carte est un lien : sans ceci, le navigateur soulignait tout son
       texte, et d'un trait bleu sous le pictogramme. */
    color: inherit;
    text-decoration: none;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vert), var(--vert-secondaire));
    transform: scaleX(0);
    transition: var(--transition);
}

.category-card:hover {
    background: white;
    border-color: var(--vert);
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.category-card:hover::before {
    transform: scaleX(1);
}

.category-icon {
    font-size: 2.75rem;
    margin-bottom: 1rem;
    display: block;
}

.category-card h3 {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
}

.category-card p {
    font-family: var(--font-texte);
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Une étiquette, pas un bouton : aplat marine, pour ne pas se confondre avec
   les boutons verts et garder son petit texte blanc lisible (13,2:1). */
.category-count {
    display: inline-block;
    background: var(--marine);
    color: white;
    padding: 0.45rem 1.1rem;
    font-family: var(--font-titres);
    font-size: 0.8rem;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Tool Submission Section - Modern Style */
/* Adopter l'IA au Québec — trois vérifications, chacune avec sa source
   officielle. Section blanche entre deux sections blanches et grises : le
   filet du haut la détache de la grille des catégories. Les liens restent
   marine, soulignés de vert : le vert ne colore jamais un texte sur fond
   clair (2,7:1 sur blanc, voir :root). */
.quebec-section {
    padding: 5rem 0;
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
}

.quebec-intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 48rem;
    margin: 1rem 0 2.5rem;
}

.quebec-grid {
    display: grid;
    /* min(…, 100 %) : sous 312 px d'écran, une colonne de 280 px débordait
       de 16 px et faisait défiler la page de côté. */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.5rem;
}

.quebec-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    border-top: 4px solid var(--vert);
    padding: 2rem;
}

.quebec-card h3 {
    font-family: var(--font-titres);
    font-weight: var(--fw-heavy);
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 0.9rem;
}

.quebec-card p {
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    flex: 1;
}

.quebec-source {
    font-weight: var(--fw-medium);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--marine);
    text-decoration: underline;
    text-decoration-color: var(--vert);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.quebec-source:hover,
.quebec-source:focus-visible {
    text-decoration-thickness: 3px;
}

@media (max-width: 768px) {
    .quebec-section {
        padding: 3.5rem 0;
    }

    .quebec-card {
        padding: 1.5rem;
    }
}

.submission-section {
    padding: 5rem 0;
    background: var(--bg-color);
}

.submission-content {
    max-width: 800px;
    margin: 0 auto;
}

.submission-intro {
    text-align: center;
    font-family: var(--font-texte);
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.submission-form {
    background: white;
    padding: 3rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.form-group label {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 1rem 1.25rem;
    border: 2px solid var(--border-color);
    font-family: var(--font-texte);
    font-size: 1rem;
    font-weight: var(--fw-book);
    transition: var(--transition);
    background: var(--bg-light);
}

/* Le contour marine porte le focus (13,2:1 sur blanc) ; le halo vert n'est
   qu'un accent. Une bordure verte seule n'atteindrait pas les 3:1 qu'un
   indicateur de focus doit avoir. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--marine);
    box-shadow: 0 0 0 4px rgba(94, 177, 72, 0.3);
    background: white;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
}

.submit-btn {
    background: var(--vert);
    color: white;
    border: none;
    padding: 1.1rem 2.5rem;
    font-family: var(--font-titres);
    font-size: 1rem;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    margin-top: 1.5rem;
}

.submit-btn:hover {
    background: var(--vert-fonce);
}

.form-note {
    text-align: center;
    font-family: var(--font-texte);
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 1.25rem;
}

.submission-success {
    background: white;
    padding: 3.5rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 1.25rem;
}

.submission-success h3 {
    font-family: var(--font-titres);
    color: var(--text-primary);
    font-size: 1.75rem;
    font-weight: var(--fw-heavy);
    margin-bottom: 1rem;
}

.submission-success p {
    font-family: var(--font-texte);
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* About Section - Modern AERMQ Style */
.about-section {
    padding: 5rem 0;
    background: var(--degrade-marine);
    color: white;
    position: relative;
    overflow: hidden;
}

.about-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.03) 50%, transparent 60%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 60px,
            rgba(255,255,255,0.02) 60px,
            rgba(255,255,255,0.02) 61px
        );
    pointer-events: none;
}

.about-content {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.about-content p {
    font-family: var(--font-texte);
    font-size: 1.1rem;
    font-weight: var(--fw-book);
    margin-bottom: 1.25rem;
    line-height: 1.8;
}

.stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    min-width: 140px;
}

/* Vert sur marine : 4,9:1 au plus clair du dégradé. */
.stat-number {
    font-family: var(--font-titres);
    font-size: 2.75rem;
    font-weight: var(--fw-heavy);
    color: var(--vert);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.stat-label {
    font-family: var(--font-titres);
    font-size: 0.9rem;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

/* Footer - Modern Style */
.footer {
    background: var(--marine-profond);
    color: white;
    /* Le bas du pied garde 64 px de plus que sa marge : la bulle de l'agent
       conversationnel est fixée à 20 px du bas de l'écran et haute de 40.
       Sans cette réserve, en fin de page, elle se posait exactement sur le
       logo de Bollé Communications, dernière ligne du pied. */
    padding: 4rem 0 calc(2rem + 64px);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.footer-section h3 {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.footer-section h4 {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.footer-section p {
    font-family: var(--font-texte);
    opacity: 0.75;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.7;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.6rem;
}

.footer-section a {
    font-family: var(--font-texte);
    color: white;
    text-decoration: none;
    opacity: 0.75;
    transition: var(--transition);
    font-size: 0.95rem;
}

.footer-section a:hover {
    opacity: 1;
    color: var(--vert-secondaire);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablette et mobile : la navigation passe derrière un bouton hamburger.
   Auparavant les 6 entrées s'empilaient sur deux rangées et poussaient le
   contenu vers le bas sur chaque page. */
/* 1240 px et non 992 : à 1024 px (iPad paysage) comme à 1200, la navigation et
   le verrou logo ne tiennent pas ensemble. Sans cette bascule, le nom du site
   se réduisait à « R… » et l'en-tête devenait illisible. */
@media (max-width: 1240px) {
    .header-content {
        min-height: 76px;
        gap: 1rem;
    }

    .nav-toggle {
        display: flex;
    }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--bg-light);
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
        padding: 0.5rem 0 1rem;
        max-height: calc(100vh - 76px);
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        overscroll-behavior: contain;

        /* Replié par défaut, sans rester focusable au clavier. */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .nav.nav-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-link {
        padding: 0.95rem 24px;
        border-bottom: 1px solid var(--border-light);
        text-align: left;
        width: 100%;
    }

    .nav-link:last-child {
        border-bottom: none;
    }

    /* Le soulignement animé n'a pas de sens dans une liste verticale. */
    .nav-link::after {
        display: none;
    }

    .nav-link.active {
        background: rgba(94, 177, 72, 0.08);
        border-left: 4px solid var(--vert);
        padding-left: calc(24px - 4px);
    }

    .header .container {
        position: relative;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .logo .logo-title,
    .logo h1 {
        font-size: 1.15rem;
    }

    .tagline {
        font-size: 0.75rem;
    }

    .hero {
        padding: 3rem 0 3.5rem;
    }

    .hero-title {
        font-size: 1.85rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .search-container {
        flex-direction: column;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .search-input {
        text-align: center;
        padding: 0.9rem 1rem;
    }

    .search-btn {
        padding: 0.9rem 1.5rem;
    }

    .region-tag {
        font-size: 0.8rem;
        padding: 0.45rem 1rem;
    }

    .quick-filters {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
        gap: 1rem;
    }

    .quick-filter-group,
    .quick-filter-select {
        width: 100%;
    }

    .reset-filters-btn {
        margin-left: 0;
        width: 100%;
    }

    /* Les catégories défilent horizontalement plutôt que d'occuper
       une demi-page en hauteur. */
    .filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.5rem;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;

        /* Pas d'ombre de défilement ajoutée : elle serait peinte sur le fond de
           la bande, donc derrière les pastilles opaques, et resterait invisible.
           L'indice est la pastille suivante coupée par le bord droit — la
           convention des rangées de filtres sur mobile. */
    }

    .filters::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        font-size: 0.85rem;
        padding: 0.6rem 1.1rem;
    }

    .tools-section {
        padding: 2.5rem 0;
    }

    .tools-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .tool-card {
        padding: 1.4rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .categories-section,
    .submission-section,
    .about-section {
        padding: 3rem 0;
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }

    .stats {
        gap: 0.75rem;
    }

    .stat {
        flex: 1 1 30%;
        min-width: 0;
        padding: 1rem 0.75rem;
    }

    .stat-number {
        font-size: 1.9rem;
    }

    .tool-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .tool-btn {
        text-align: center;
        width: 100%;
    }

    .submission-form {
        padding: 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer {
        padding: 3rem 0 calc(1.5rem + 64px);
    }

    .footer-content {
        text-align: center;
        gap: 2rem;
    }
}

/* Très petits écrans (iPhone SE et similaires) */
@media (max-width: 380px) {
    .hero-title {
        font-size: 1.55rem;
    }

    .stat {
        flex: 1 1 100%;
    }
}

/* Sur écran tactile, les effets de survol restent « collés » après un appui. */
@media (hover: none) {
    .tool-card:hover,
    .category-card:hover,
    .region-tag:hover {
        transform: none;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.tool-card {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: backwards;
}

.tool-card:nth-child(1) { animation-delay: 0.05s; }
.tool-card:nth-child(2) { animation-delay: 0.1s; }
.tool-card:nth-child(3) { animation-delay: 0.15s; }
.tool-card:nth-child(4) { animation-delay: 0.2s; }
.tool-card:nth-child(5) { animation-delay: 0.25s; }
.tool-card:nth-child(6) { animation-delay: 0.3s; }

.category-card {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: backwards;
}

.category-card:nth-child(1) { animation-delay: 0.05s; }
.category-card:nth-child(2) { animation-delay: 0.1s; }
.category-card:nth-child(3) { animation-delay: 0.15s; }
.category-card:nth-child(4) { animation-delay: 0.2s; }
.category-card:nth-child(5) { animation-delay: 0.25s; }
.category-card:nth-child(6) { animation-delay: 0.3s; }
.category-card:nth-child(7) { animation-delay: 0.35s; }
.category-card:nth-child(8) { animation-delay: 0.4s; }
.category-card:nth-child(9) { animation-delay: 0.45s; }
.category-card:nth-child(10) { animation-delay: 0.5s; }
.category-card:nth-child(11) { animation-delay: 0.55s; }
.category-card:nth-child(12) { animation-delay: 0.6s; }

/* Focus States for Accessibility — contour marine sur fond clair (13,2:1).
   Le vert n'atteindrait que 2,7:1 sur blanc, sous les 3:1 exigés d'un
   indicateur de focus. */
:focus-visible {
    outline: 3px solid var(--marine);
    outline-offset: 2px;
}

/* Sur les fonds marine, le contour marine disparaîtrait : il passe au blanc. */
.hero :focus-visible,
.about-section :focus-visible,
.category-hero :focus-visible,
.tool-detail-hero :focus-visible,
.footer :focus-visible {
    outline-color: #fff;
}

html {
    /* Taille de référence du site : 18 px, comme le corps de texte
       d'aermq.qc.ca (`body { font-size: 18px }` dans le thème). Sans cette
       ligne le répertoire héritait des 16 px par défaut du navigateur et
       paraissait plus petit que le site de l'association.

       On l'exprime en pourcentage plutôt qu'en pixels pour que la valeur reste
       relative au réglage de taille de police du navigateur : un visiteur qui
       a agrandi la sienne garde son agrandissement.

       Toutes les tailles des feuilles de style sont en rem : elles suivent
       cette racine, et le rapport entre les titres, le texte et les espacements
       reste celui qui a été dessiné. Les seules exceptions sont volontaires —
       le plancher de 16 px des champs de formulaire (zoom iOS) et les points en
       feuille d'impression. */
    font-size: 112.5%;

    scroll-behavior: smooth;
    /* Compense l'en-tête collant lors des sauts d'ancre : 92 px de haut au
       bureau, plus un peu d'air au-dessus du titre visé. */
    scroll-padding-top: 108px;
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Selection Color */
::selection {
    background: var(--marine);
    color: white;
}

/* Pagination Styles - Modern */
.pagination-container {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 2px solid var(--border-light);
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.pagination-numbers {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pagination-btn,
.pagination-number {
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Comme les filtres : bordure verte au survol, aplat marine pour la page
   courante. */
.pagination-btn:hover:not(.disabled),
.pagination-number:hover:not(.active) {
    border-color: var(--vert);
}

.pagination-number.active {
    background: var(--marine);
    color: white;
    border-color: var(--marine);
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-ellipsis {
    padding: 0.75rem 0.5rem;
    color: var(--text-muted);
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
}

.pagination-info {
    text-align: center;
    font-family: var(--font-texte);
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .pagination-controls {
        flex-direction: column;
        gap: 1rem;
    }

    .pagination-numbers {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination-btn,
    .pagination-number {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Compléments — éléments ajoutés lors de la révision
   ========================================================================== */

/* iOS zoome sur tout champ dont la police est inférieure à 16px.
   Ce plancher supprime le zoom intempestif à la mise au point. */
input,
select,
textarea {
    font-size: max(16px, 1rem);
}

/* Cibles tactiles d'au moins 44 px (recommandation WCAG 2.5.5 / Apple HIG). */
.filter-btn,
.pagination-btn,
.pagination-number,
.reset-filters-btn,
.quick-filter-select,
.tool-btn,
.search-btn,
.nav-toggle {
    min-height: 44px;
}

/* Fiche outil */
.quebec-flag {
    font-size: 0.95em;
}

.tool-btn {
    margin-top: auto;
    align-self: flex-start;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Un outil sans URL valide ne doit pas ressembler à un lien cliquable. */
.tool-btn-disabled {
    background: var(--border-light);
    color: var(--text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

.tool-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0;
}

.feature-tag {
    margin: 0;
}

/* Résultats vides */
.no-results-hint {
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

/* Lien dans le texte : marine, souligné de vert. Le vert en couleur de texte
   n'aurait que 2,7:1 sur blanc ; en soulignement, il n'a rien à porter. */
.no-results-hint a {
    color: var(--marine);
    font-weight: var(--fw-medium);
    text-decoration-color: var(--vert);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Section « À propos » */
.regions-title {
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: var(--fw-medium);
}

/* Pied de page */
.footer-heading {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.footer-org {
    opacity: 0.9;
}

.footer-copyright {
    margin-top: 1rem;
    font-size: 0.85rem;
}

.footer-section a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-section ul a {
    text-decoration: none;
}

.footer-section ul a:hover,
.footer-section ul a:focus-visible {
    text-decoration: underline;
}

/* Cartes de catégories rendues actionnables au clavier par le script */
.category-card:focus-visible {
    outline: 3px solid var(--marine);
    outline-offset: 3px;
}

/* Fil d'Ariane (page d'article) */
.breadcrumb {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 0;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--marine);
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 0.5rem;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Corrections vérifiées au navigateur
   -------------------------------------------------------------------------- */

/* Un élément de grille a `min-width: auto` par défaut : il refuse donc de
   devenir plus étroit que son contenu. Le <select> des catégories, dont
   certaines options sont longues, débordait ainsi de 8 px sur iPhone. */
.form-group,
.form-row > * {
    min-width: 0;
}

.form-group input,
.form-group select,
.form-group textarea {
    max-width: 100%;
}

/* Sous 16 px, iOS zoome automatiquement à la mise au point du champ.
   Ces règles reprennent la spécificité des sélecteurs de classe qui
   fixaient une taille plus petite. `max()` garde ce plancher sans figer les
   champs à 16 px : ils suivent la racine du site comme le reste. */
.quick-filter-select,
.form-group input,
.form-group select,
.form-group textarea,
.search-input {
    font-size: max(16px, 1rem);
}

/* --------------------------------------------------------------------------
   Cartes cliquables vers la fiche d'outil
   -------------------------------------------------------------------------- */

/* La carte ne contient qu'un seul lien — son titre — dont la zone cliquable
   est étendue à toute la carte. Cela évite d'imbriquer des liens (HTML
   invalide) tout en gardant un seul arrêt de tabulation par carte. */
.tool-card {
    position: relative;
}

.tool-name .tool-card-link {
    color: inherit;
    text-decoration: none;
}

.tool-name .tool-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tool-card:hover .tool-name .tool-card-link,
.tool-name .tool-card-link:focus-visible {
    color: var(--marine);
}

/* Le contour de focus doit entourer la carte entière, pas seulement le texte. */
.tool-name .tool-card-link:focus-visible {
    outline: none;
}

.tool-name .tool-card-link:focus-visible::after {
    outline: 3px solid var(--marine);
    outline-offset: 3px;
}

/* Repère visuel seulement : le lien réel est le titre. */
.tool-card-cta {
    margin-top: auto;
    align-self: flex-start;
    pointer-events: none;
}

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

.tool-card-cta span {
    display: inline-block;
    transition: var(--transition);
}

.tool-card:hover .tool-card-cta span {
    transform: translateX(3px);
}

/* ==========================================================================
   Identité — verrou AERMQ dans l'en-tête, signature Bollé dans le pied
   --------------------------------------------------------------------------
   Le logo officiel de l'AERMQ remplace le titre seul : le répertoire doit se
   lire comme une publication de l'association, pas comme un site anonyme.
   Le vert du logo (#52aa28) n'est jamais posé sur un fond vert — il y
   disparaît. Sur fond blanc et sur le marine du pied, il ressort.
   ========================================================================== */

.logo {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
}

.logo {
    /* Cible tactile : le logo est le lien de retour à l'accueil. */
    min-height: 44px;
}

/* 58 px de haut, 223 de large. À 40 px, la ligne « Association de
   l'enveloppe et des revêtements muraux du Québec » du logo ne faisait
   que 3 px et le logo se lisait comme une vignette ; aermq.qc.ca le pose
   à 86 px. 58 px est le plus grand qui laisse tenir, sur une ligne à
   1280 px, le logo, le nom du site, sa description et la navigation. */
.logo-mark {
    height: 58px;
    width: auto;
    flex-shrink: 0;
}

/* Ni le nom ni la description ne doivent se replier : dans un en-tête serré
   ils se plieraient caractère par caractère au lieu de se couper. */
.logo-title,
.header .tagline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* La bordure gauche sépare l'émetteur (AERMQ) du nom de la publication
   (Répertoire IA) pour qu'ils ne se lisent pas comme un seul bloc. */
.logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-left: 0.9rem;
    border-left: 1px solid var(--border-color);
}



/* Le pied reprend ce que fait aermq.qc.ca sur le même marine : le mot-symbole
   blanc de l'association, puis son nom en toutes lettres. Le logo vert
   complet, qui y figurait à 46 px, ramenait ce nom à une ligne de 3 px. */
.footer-brand .footer-logo {
    display: inline-block;
    margin-bottom: 1rem;
    opacity: 1;
}

.footer-brand .footer-logo img {
    display: block;
    height: 52px;
    width: auto;
}

.footer-section .footer-org {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    font-size: 1.05rem;
    line-height: 1.4;
    opacity: 1;
    max-width: 22rem;
    margin-bottom: 1rem;
}

.footer-adresse {
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.75;
    margin-bottom: 1rem;
}

/* Titres du pied en vert et en capitales, comme sur aermq.qc.ca. Vert sur
   marine profond : 6,4:1. */
.footer-heading {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    font-size: 1rem;
    color: var(--vert);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    list-style: none;
    margin-top: 1.25rem;
}

.footer-social li {
    margin-bottom: 0;
}

.footer-contact li {
    margin-bottom: 0.6rem;
}

/* Avis de responsabilité de l'AERMQ, au-dessus de la ligne de copyright.
   Il doit être lisible sans être mis en avant : c'est une mention légale, pas
   un argument. D'où le corps réduit, la colonne étroite — un texte de loi qui
   court sur 1232 px ne se lit pas — et l'opacité partielle du pied.

   L'opacité s'arrête à 0,72 et non aux 0,6 du copyright : sur le bleu du pied,
   0,6 tombe sous le seuil de contraste AA pour un texte de cette taille, et
   celui-ci est fait pour être lu, pas seulement pour être présent. */
/* Le filet court sur toute la largeur, comme celui de la ligne du bas : c'est
   le texte seul qui s'arrête à 62rem. Quand le filet s'arrêtait avec lui, les
   deux traits du pied finissaient à 115 px l'un de l'autre. */
.footer-avis {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.8rem;
    line-height: 1.65;
    opacity: 0.72;
}

.footer-avis > * {
    max-width: 62rem;
}

.footer-avis-titre {
    font-size: 0.8rem;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.footer-avis p + p {
    margin-top: 0.7rem;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-copyright {
    font-size: 0.85rem;
    opacity: 0.6;
    margin: 0;
}

/* Signature de Bollé Communications, sur la dernière ligne de chaque page.
   Le logo est à pleine opacité et à 44 px : à 26 px et 60 % d'opacité, comme
   avant, « Communications » n'avait plus que 2 px et le logo ne se lisait
   plus. Il reste plus petit que celui de l'AERMQ, qui ouvre le pied. */
.footer-signature {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    text-decoration: none;
}

.footer-signature-label {
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
    transition: var(--transition);
}

.footer-signature:hover .footer-signature-label,
.footer-signature:focus-visible .footer-signature-label {
    opacity: 1;
}

.footer-signature img {
    display: block;
    height: 44px;
    width: auto;
}

/* Deux fenêtres où la description ne tient pas :
     · sous 768 px, l'écran est trop étroit ;
     · entre 1201 et 1279 px, la navigation vient de se déployer mais le
       conteneur n'a pas encore la largeur pour les deux.
   Ailleurs elle s'affiche en entier. Le logo et le nom suffisent à identifier
   le site ; la phrase complète reste dans le pied de page et les métadonnées. */
@media (max-width: 768px), (min-width: 1241px) and (max-width: 1279px) {
    .header .tagline {
        display: none;
    }
}

@media (max-width: 992px) {
    .logo-mark {
        height: 46px;
    }

    .logo-text {
        padding-left: 0.7rem;
    }
}

/* Téléphones : le verrou (logo, filet, nom) et le bouton du menu réclament
   336 px à 38 px de logo, pour 369 disponibles à 401 px. */
@media (max-width: 600px) {
    .logo-mark {
        height: 38px;
    }
}

/* Sous 400 px (iPhone SE et Android compacts), le verrou logo réclamait 264 px
   pour 228 disponibles et le nom du site tombait à « R… ». Logo et nom réduits
   ensemble : les deux restent lisibles et entiers. */
@media (max-width: 400px) {
    .logo-mark {
        height: 32px;
    }

    .logo-text {
        padding-left: 0.5rem;
    }

    .logo .logo-title,
    .logo h1 {
        font-size: 1.05rem;
    }

    .header-content {
        gap: 0.6rem;
    }
}

/* iPhone SE de première génération (320 px) : il manquait encore 9 px et le
   nom se terminait par une ellipsis. */
@media (max-width: 340px) {
    .logo-mark {
        height: 26px;
    }

    .logo-text {
        padding-left: 0.4rem;
    }

    .logo .logo-title,
    .logo h1 {
        font-size: 0.95rem;
    }
}

/* Écran de couverture du Galaxy Fold (280 px) : la place ne suffit plus pour
   les deux marques côte à côte. Le nom du site l'emporte — c'est lui qui situe
   la page ; le logo de l'AERMQ reste présent dans le bandeau et au pied.
   Seuil à 299 px et non 320 : à 320 px (iPhone SE de première génération),
   le verrou tient — 259 px pour 288 — et le logo y était masqué pour rien. */
@media (max-width: 299px) {
    .logo-mark {
        display: none;
    }

    .logo-text {
        padding-left: 0;
        border-left: none;
    }
}

/* Sous 768 px, le pied est centré (voir .footer-content) : sa dernière ligne
   l'est aussi, droit d'auteur au-dessus, signature en dessous. */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .footer-section .footer-org {
        margin-left: auto;
        margin-right: auto;
    }
}


/* Fil d'Ariane des pages en colonne étroite (fiche d'outil, article) : sans
   cela il commençait 210 px à gauche du titre qu'il introduit. */
.breadcrumb-narrow > .container {
    max-width: 860px;
}


/* La page courante du fil d'Ariane utilisait var(--text-muted) : 3,03:1 sur
   blanc, sous le seuil. var(--text-secondary) donne 6,21:1 tout en restant
   visiblement moins appuyée que les liens actifs. */
.breadcrumb [aria-current],
.breadcrumb span[aria-current="page"] {
    color: var(--text-secondary);
}

/* La section « À propos » centre son texte, ce qui convient à deux paragraphes
   d'introduction mais pas à des réponses de huit lignes : la FAQ repasse à
   gauche, où l'œil retrouve le début de chaque ligne. */
.home-faq {
    text-align: left;
}

/* ==========================================================================
   Questions fréquentes (accueil et fiches d'outil)
   --------------------------------------------------------------------------
   <details> plutôt qu'un accordéon en JavaScript : le contenu reste dans le
   HTML servi, donc lisible par les robots qui n'exécutent pas de script, et
   la recherche du navigateur (Cmd+F) le trouve aussi replié.

   À garder dans styles.css et non dans tool.css : la page d'accueil utilise le
   même balisage et ne charge que cette feuille.
   ========================================================================== */

.tool-faq {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tool-faq-item {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.tool-faq-item summary {
    padding: 1rem 1.25rem;
    font-family: var(--font-titres);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
}

.tool-faq-item summary::-webkit-details-marker {
    display: none;
}

.tool-faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--vert-fonce);
    transition: var(--transition);
}

.tool-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.tool-faq-item summary:hover {
    background: var(--border-light);
}

.tool-faq-item > p {
    padding: 0 1.25rem 1.15rem;
    color: var(--text-secondary);
    line-height: 1.7;
}


/* ==========================================================================
   Aperçu du site de l'outil
   --------------------------------------------------------------------------
   Une capture de la page d'accueil de l'éditeur, produite par
   scripts/build-shots.mjs. Treize sites sur 126 refusent la capture
   automatisée : ils reçoivent un aplat portant leur pictogramme, au même
   format, pour que la grille reste régulière.
   ========================================================================== */

.tool-card-media {
    position: relative;
    /* Annule le remplissage de 1,75rem de la carte : sans cela l'aperçu
       flotte au milieu d'un cadre blanc au lieu de coiffer la carte. */
    margin: -1.75rem -1.75rem 1.1rem;
    overflow: hidden;
    background: var(--bg-color);
    /* Rapport fixe : la carte ne saute pas quand l'image arrive. */
    aspect-ratio: 720 / 450;
}

.tool-card-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}

.tool-card:hover .tool-card-shot {
    transform: scale(1.03);
}

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

/* Pictogramme en médaillon : garde le repère visuel de l'ancienne carte
   par-dessus la capture, sans masquer le contenu de la page. */
.tool-card-icon {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.tool-card-shot-placeholder + .tool-card-icon {
    display: none;
}

/* La rangée du haut ne contient plus que l'étiquette de prix. */
.tool-card .tool-card-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.6rem;
}

/* ==========================================================================
   Par où commencer
   --------------------------------------------------------------------------
   Sept parcours de métier, cinq outils chacun. Devant 123 cartes, un
   entrepreneur ne choisit rien ; devant cinq, il choisit.
   ========================================================================== */

.parcours-section {
    padding: 3.5rem 0;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.parcours-intro {
    max-width: 68ch;
    margin: 0 auto 2.25rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.parcours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.25rem;
}

.parcours-card {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.75rem 1.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--vert);
    box-shadow: var(--shadow-sm);
}

.parcours-titre {
    font-size: 1.15rem;
    font-weight: var(--fw-heavy);
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.parcours-pour {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* Liste numérotée : l'ordre est une recommandation, pas un classement
   alphabétique. Le premier de la liste est celui par lequel commencer. */
.parcours-outils {
    list-style: none;
    counter-reset: parcours;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
}

.parcours-outils li {
    counter-increment: parcours;
    position: relative;
    padding-left: 2.1rem;
    margin: 0;
}

.parcours-outils li::before {
    content: counter(parcours);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: var(--fw-heavy);
    color: var(--marine);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
}

.parcours-outils a {
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.parcours-outils a:hover,
.parcours-outils a:focus-visible {
    color: var(--marine);
    border-bottom-color: var(--vert);
}

.parcours-usage,
.parcours-tags {
    display: block;
    line-height: 1.5;
}

.parcours-usage {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.parcours-tags {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.parcours-suite {
    margin-top: 2rem;
    text-align: center;
}

.parcours-suite a {
    font-weight: var(--fw-medium);
    color: var(--marine);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.parcours-suite a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .parcours-section {
        padding: 2.5rem 0;
    }

    .parcours-card {
        padding: 1.35rem 1.35rem 1.5rem;
    }

    .parcours-intro {
        text-align: left;
        font-size: 1rem;
    }
}

/* ==========================================================================
   Raccourcis de filtrage
   --------------------------------------------------------------------------
   Trois questions passent avant toutes les autres pour un entrepreneur d'ici :
   est-ce en français, est-ce essayable sans payer, est-ce à la portée d'une
   petite équipe. Elles méritaient mieux qu'un menu déroulant. Le compte est
   affiché parce qu'il dit aussi ce qui manque.
   ========================================================================== */

.filters-title-first {
    margin-top: 0;
}

.raccourcis {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
}

.raccourci {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    background: var(--bg-light);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    font-family: var(--font-titres);
    font-size: 0.9rem;
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: var(--transition);
}

.raccourci:hover {
    border-color: var(--vert);
}

.raccourci-compte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    padding: 0.1rem 0.4rem;
    background: var(--bg-color);
    font-size: 0.8rem;
    font-weight: var(--fw-heavy);
    color: var(--text-secondary);
}

/* Même état actif que les filtres de catégorie : aplat marine. */
.raccourci.is-active {
    background: var(--marine);
    border-color: var(--marine);
    color: #fff;
}

.raccourci.is-active .raccourci-compte {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* ==========================================================================
   Effort d'adoption et taille d'équipe
   --------------------------------------------------------------------------
   Procore et une application de photos de chantier ne se comparent pas. Sans
   ces deux étiquettes, ils se ressemblent sur une grille.
   ========================================================================== */

.tool-adoption {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.tool-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    font-size: 0.76rem;
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Outil de l'AERMQ ou d'un partenaire de ses services aux membres : aplat
   marine, texte blanc (13,2:1), pour qu'il se distingue des badges gris. */
.tool-badge-aermq {
    background: var(--marine);
    border-color: var(--marine);
    color: #fff;
}

/* Ce qui s'essaie en quelques minutes est mis en avant : c'est par là qu'on
   commence quand on n'a jamais rien essayé. */
.tool-badge-essai {
    background: rgba(72, 157, 54, 0.1);
    border-color: rgba(72, 157, 54, 0.35);
    color: var(--marine);
}

.tool-badge-projet {
    background: rgba(26, 48, 83, 0.07);
    border-color: rgba(26, 48, 83, 0.22);
    color: var(--marine);
}

@media (max-width: 768px) {
    .raccourci {
        font-size: 0.85rem;
        padding: 0.5rem 0.9rem;
    }
}

/* ==========================================================================
   Impression
   --------------------------------------------------------------------------
   Une page de catégorie imprimée sert de feuille de travail en réunion ou en
   rencontre de chantier. Sans cette feuille de style, on obtenait des aplats
   verts pleine page, la navigation, les filtres et des liens dont on ne
   pouvait pas lire l'adresse.
   ========================================================================== */

@media print {
    /* Économie d'encre et lisibilité : tout repasse en noir sur blanc. */
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        font-size: 11pt;
        line-height: 1.45;
    }

    /* Éléments qui n'ont aucun sens sur papier. */
    .nav,
    .nav-toggle,
    .raccourcis,
    .quick-filters,
    .filters,
    .filters-title,
    .search-container,
    .pagination,
    .submission-section,
    .footer-social,
    .footer-section ul,
    .tool-card-cta,
    .tool-btn,
    .parcours-suite,
    .skip-link,
    .breadcrumb {
        display: none !important;
    }

    .header {
        position: static !important;
        border-bottom: 1pt solid #000;
    }

    .logo-mark {
        height: 34px !important;
    }

    .hero,
    .category-hero,
    .tool-detail-hero,
    .article-detail-hero,
    .blog-hero {
        padding: 0.6cm 0 !important;
        border-bottom: 1pt solid #000;
    }

    /* L'adresse d'un lien externe s'imprime : sur papier, un lien cliquable
       ne mène nulle part. */
    a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 9pt;
        word-break: break-all;
    }

    .tool-card,
    .parcours-card,
    .lexique-entree,
    .tool-detail-section,
    .category-index-card {
        border: 1pt solid #999 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .tools-grid,
    .parcours-grid,
    .category-index-grid {
        display: block !important;
    }

    .tool-card,
    .parcours-card,
    .category-index-card {
        margin-bottom: 0.4cm;
    }

    /* Les aperçus de site alourdissent l'impression sans rien apporter. */
    .tool-card-media,
    .tool-detail-shot-frame {
        display: none !important;
    }

    h1, h2, h3 {
        break-after: avoid;
        page-break-after: avoid;
    }

    .footer {
        border-top: 1pt solid #000;
        padding: 0.5cm 0 !important;
    }

    /* Les deux logos du pied sont blancs, faits pour le marine : sur papier
       blanc ils disparaîtraient. Inversés, ils s'impriment en noir. */
    .footer-logo img,
    .footer-signature img {
        filter: invert(1);
    }

    /* L'avis de responsabilité s'imprime avec la fiche, et à pleine encre :
       les 0,72 d'opacité qui l'allègent à l'écran le rendraient pâle sur
       papier, ce qu'une mention légale ne peut pas se permettre. On le garde
       aussi d'un seul tenant plutôt que coupé entre deux pages. */
    .footer-avis {
        opacity: 1 !important;
        max-width: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    @page {
        margin: 1.5cm;
    }
}

/* ==========================================================================
   Questions fréquentes dans la section « À propos »
   --------------------------------------------------------------------------
   La FAQ reprenait le style des fiches d'outil : des encadrés blancs opaques,
   posés sur le bandeau foncé de la section, qui se lisaient comme un bloc
   rapporté. Elle adopte ici le vocabulaire visuel du reste de la section —
   panneaux translucides, bordure claire, texte blanc — comme les pastilles de
   domaines et les statistiques juste au-dessus.
   ========================================================================== */

.home-faq-section {
    margin-top: 3.5rem;
    padding-top: 2.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.about-content .home-faq-section .regions-title {
    margin-bottom: 1.5rem;
}

.home-faq .tool-faq-item {
    background: rgba(0, 0, 0, 0.26);
    border-color: rgba(255, 255, 255, 0.28);
}

.home-faq .tool-faq-item summary {
    color: #fff;
}

.home-faq .tool-faq-item summary::after {
    color: #fff;
}

.home-faq .tool-faq-item summary:hover {
    background: rgba(0, 0, 0, 0.34);
}

.home-faq .tool-faq-item > p {
    color: rgba(255, 255, 255, 0.92);
}

/* Un lien dans la section « À propos » tombait sur le bleu souligné par défaut
   du navigateur, en plein milieu du bandeau marine — illisible et hors charte. */
.about-content a {
    color: #fff;
    font-weight: var(--fw-medium);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    transition: var(--transition);
}

.about-content a:hover {
    border-bottom-color: #fff;
}

@media (max-width: 768px) {
    .home-faq-section {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }
}

/* ===========================================================================
   Bulle de l'agent conversationnel — avant que Voiceflow ne prenne le relais
   ===========================================================================
   Voiceflow met environ trois secondes et demie à dessiner sa bulle sur un
   téléphone : 574 ko de JavaScript à télécharger et à exécuter, puis un
   aller-retour vers son serveur de configuration qui ne peut commencer
   qu'après. Mesuré sur la production, réseau 4G et processeur divisé par
   quatre : paquet reçu à 2138 ms, configuration à 3118 ms, bulle à 3432 ms.
   Aucune indication de ressource n'y change grand-chose — preconnect et
   preload ont été essayés, ils rendent 250 ms sur 3400 et coûtent du LCP.

   On dessine donc la nôtre, en HTML, dans la page. Elle paraît avec le reste
   du contenu, et js/chatbot.js la retire dès que la vraie arrive : passé ce
   moment, tout redevient l'affaire de Voiceflow — ouverture, fermeture,
   comportement sur mobile. Rien n'est détourné, rien n'est maintenu en
   parallèle.

   Les valeurs ci-dessous sont relevées sur la vraie bulle (styles calculés,
   1280 px et 390 px) pour que l'échange ne se voie pas : même position, même
   taille, mêmes couleurs, même image. Seule la police diffère — Voiceflow
   charge UCity Pro depuis son propre CDN, qu'on ne va pas aller chercher pour
   deux mots. Le libellé est donc en Arial, et la largeur est fixée à celle de
   la vraie bulle pour qu'aucun décalage n'accompagne l'échange. */
.agent-bulle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    /* Voiceflow se pose à 10000 : la vraie bulle couvre la nôtre si jamais le
       retrait échouait. */
    z-index: 9999;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    /* La vraie bulle fait 160,2 x 40. On fixe un plancher plutôt qu'une
       largeur : si la police de substitution du système est plus large que
       l'Arial mesurée ici — Roboto sur Android, par exemple —, le libellé
       pousse le bouton au lieu de déborder. */
    min-width: 160px;
    height: 40px;
    padding: 8px 16px 8px 12px;
    border: 0;
    border-radius: 9999px;
    background: #488E1A;
    color: #F0FBE9;
    /* Graisse 500 et non 600 : Voiceflow compose en UCity Pro Semibold, que
       l'Arial rend en gras franc à 600. Comparé au pixel près, 500 tombe plus
       juste, et la largeur du libellé sort à 160,0 px contre 160,2. */
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow:
        rgba(22, 26, 30, 0.02) 0 1px 0 0,
        rgba(22, 26, 30, 0.04) 0 0 0 1px,
        rgba(22, 26, 30, 0.08) 0 1px 5px -4px,
        rgba(22, 26, 30, 0.08) 0 4px 8px -6px,
        rgba(22, 26, 30, 0.01) 0 1px 3px 1px;
}

.agent-bulle img {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 2px;
}

/* Le bouton disparaît dès que Voiceflow a dessiné le sien. Plus spécifique
   que la règle ci-dessus, qui impose display: flex. */
.agent-bulle[hidden] {
    display: none;
}

/* Cliquée avant que Voiceflow ne soit prêt, la bulle doit montrer que le clic
   a porté : l'attente peut durer deux ou trois secondes, et un bouton qui ne
   répond pas se fait cliquer trois fois. Le portrait cède la place à une
   rondelle, et l'ouverture se fait dès que le widget répond. */
.agent-bulle[aria-busy="true"] img {
    display: none;
}

.agent-bulle[aria-busy="true"]::before {
    content: '';
    width: 16px;
    height: 16px;
    margin: 0 4px;
    border: 2px solid rgba(240, 251, 233, 0.35);
    border-top-color: #F0FBE9;
    border-radius: 50%;
    animation: agent-bulle-rotation 0.7s linear infinite;
}

@keyframes agent-bulle-rotation {
    to { transform: rotate(360deg); }
}

/* Une animation qui tourne sans fin est exactement ce que ce réglage demande
   d'arrêter. La rondelle reste, immobile. */
@media (prefers-reduced-motion: reduce) {
    .agent-bulle[aria-busy="true"]::before {
        animation: none;
    }
}

/* Catégories de l'AERMQ sans outil, nommées sous la grille (accueil) et sous
   l'index des catégories. Texte secondaire : c'est une précision, pas une
   rubrique. */
.categories-vides {
    max-width: 52rem;
    margin-top: 1.75rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.categories-vides a {
    color: var(--marine);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-decoration-color: var(--vert);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}