/* =============================================================================
   Inoma Canada — 03-composants.css
   -----------------------------------------------------------------------------
   Composants partagés par toutes les pages : en-tête, navigation, sélecteur de
   langue, boutons, cartes, badges, tableaux de specs, formulaires, alertes,
   pied de page. Consomme uniquement les tokens de 01-tokens.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   EN-TÊTE
--------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: var(--trait-fin) solid var(--couleur-bordure);
}
.entete__inner {
  display: flex;
  align-items: center;
  gap: var(--espace-5);
  min-height: 4.5rem;
}
.entete__logo { display: flex; align-items: center; flex: 0 0 auto; }
.entete__logo img { height: 2.5rem; width: auto; }
@media (min-width: 48rem) { .entete__logo img { height: 2.875rem; } }

.entete__nav {
  display: none;
  flex: 1 1 auto;
  gap: var(--espace-1);
}
@media (min-width: 62rem) { .entete__nav { display: flex; } }

.entete__lien {
  display: inline-flex;
  align-items: center;
  padding: var(--espace-2) var(--espace-3);
  border-radius: var(--rayon-md);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-douce), color var(--transition-douce);
}
.entete__lien:hover { background: var(--couleur-primaire-voile); color: var(--couleur-primaire); }
.entete__lien[aria-current="page"] {
  color: var(--couleur-primaire);
  background: var(--couleur-primaire-voile);
}

.entete__actions { display: flex; align-items: center; gap: var(--espace-2); margin-left: auto; }

/* Bouton hamburger — visible sous 62rem */
.entete__bascule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: var(--trait-fin) solid var(--couleur-bordure);
  border-radius: var(--rayon-md);
  background: var(--couleur-surface);
  color: var(--couleur-primaire);
  cursor: pointer;
}
@media (min-width: 62rem) { .entete__bascule { display: none; } }

/* Menu déroulant mobile */
.entete__menu-mobile {
  display: none;
  flex-direction: column;
  gap: var(--espace-1);
  padding: var(--espace-4) 0 var(--espace-5);
  border-top: var(--trait-fin) solid var(--couleur-bordure);
}
.entete__menu-mobile[data-ouvert="true"] { display: flex; }
@media (min-width: 62rem) { .entete__menu-mobile { display: none !important; } }
.entete__menu-mobile .entete__lien { font-size: var(--taille-base); padding: var(--espace-3) var(--espace-4); }

/* Sélecteur de langue */
.langues { display: inline-flex; border: var(--trait-fin) solid var(--couleur-bordure); border-radius: var(--rayon-plein); overflow: hidden; }
.langues__bouton {
  /* Des LIENS depuis le 2026-08-12 : chaque langue a désormais sa propre
     adresse. D'où l'alignement et la suppression du soulignement, qu'un
     <button> apportait gratuitement. */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  border: 0;
  background: transparent;
  padding: var(--espace-2) var(--espace-3);
  font-family: var(--police-corps);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.06em;
  color: var(--couleur-texte-secondaire);
  cursor: pointer;
  transition: background var(--transition-douce), color var(--transition-douce);
}
.langues__bouton:hover { background: var(--couleur-primaire-voile); }
/* « aria-current » et non « aria-pressed » : c'est une position dans une
   navigation, pas un bouton à bascule. Un lecteur d'écran annonce alors
   « lien, page actuelle », ce qui décrit exactement la situation. */
.langues__bouton[aria-current="page"] { background: var(--couleur-primaire); color: var(--brut-blanc); }

/* L'anneau de focus global a un `outline-offset` de 2 px, donc il tombe ENTIÈREMENT
   hors de la boîte de `.langues` — qui est en `overflow: hidden`, sans padding, et
   dont les deux boutons remplissent la surface. Au clavier, le sélecteur de langue
   n'avait donc aucun indicateur visible, sur les huit pages.

   Le rognage n'est pas supprimable : les boutons n'ont pas de rayon propre, c'est
   lui seul qui donne sa forme de pastille au groupe. On dessine donc l'anneau
   À L'INTÉRIEUR du bouton, en ombre portée interne. */
.langues__bouton:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--focus-epaisseur) var(--focus-anneau);
}
.langues__bouton[aria-current="page"]:focus-visible {
  box-shadow: inset 0 0 0 var(--focus-epaisseur) var(--focus-anneau-clair);
}

/* ---------------------------------------------------------------------------
   LE CODE DE PROVINCE DANS L'EN-TÊTE
   -----------------------------------------------------------------------------
   Jumeau visuel du sélecteur de langue : même pastille, même corps, même
   graisse. Les deux règlent la même sorte de chose — « dans quelle langue » et
   « à quel endroit » — et rien ne justifierait qu'ils ne se ressemblent pas.

   ICI, ET SEULEMENT ICI, `appearance: none`.
   Les sélecteurs des pages gardent la flèche native (voir `.province__champ`
   plus bas) : elle dit qu'on peut dérouler, et sur téléphone c'est elle qui
   ouvre la roulette du système. Mais la flèche native mesure une vingtaine de
   pixels et se dessine hors de toute maîtrise — à côté d'un contenu de deux
   lettres, elle pesait plus lourd que la valeur. On la remplace donc par un
   chevron tracé en dégradés, calibré pour cette pastille. Le comportement du
   champ, lui, reste entièrement natif : c'est l'apparence qu'on reprend, jamais
   la mécanique.
--------------------------------------------------------------------------- */
.province-entete { display: inline-flex; }
.province-entete__champ {
  appearance: none;
  -webkit-appearance: none;
  border: var(--trait-fin) solid var(--couleur-bordure);
  border-radius: var(--rayon-plein);
  /* Le padding droit laisse la place au chevron ; le gauche l'équilibre. */
  padding: var(--espace-2) var(--espace-5) var(--espace-2) var(--espace-3);
  background: transparent;
  font-family: var(--police-corps);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.06em;
  color: var(--couleur-texte-secondaire);
  cursor: pointer;
  transition: background var(--transition-douce), color var(--transition-douce);

  /* Le chevron : deux traits de 1,5 px croisés, dessinés par deux dégradés
     linéaires. Aucune image, aucune requête, et il suit `currentColor`. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right calc(var(--espace-3) + 3px) center,
    right var(--espace-3) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.province-entete__champ:hover {
  background-color: var(--couleur-primaire-voile);
  color: var(--couleur-texte-principal);
}
/* La liste déroulée est peinte par le système : on repose ses couleurs, sinon
   elle hérite du gris secondaire du champ. */
.province-entete__champ option {
  color: var(--couleur-texte-principal);
  background: var(--couleur-surface);
  font-weight: var(--graisse-normale);
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   LA BARRE SUR TÉLÉPHONE — mesurée, pas estimée
   -----------------------------------------------------------------------------
   À 375 px de large, le conteneur laisse 327 px. La barre en réclamait 403
   AVANT l'ajout du code de province : logo 104, écart 24, « Espace pro » 125,
   langue 90, menu 44, écarts 16. Elle ne débordait pas — les éléments flexibles
   se comprimaient — mais le libellé du bouton passait à la ligne et la pastille
   de langue, qui est en `overflow: hidden`, se faisait rogner.

   Sous 30 rem, « Espace pro » quitte donc la barre pour le menu déroulant, où
   les autres liens de navigation vivent déjà. On récupère 133 px et le compte
   retombe à 314 px, écarts compris.

   Les deux pastilles reçoivent `flex-shrink: 0` : quoi qu'il arrive, un
   réglage ne doit pas être rogné jusqu'à devenir illisible. S'il manque de la
   place, c'est à autre chose de céder.
--------------------------------------------------------------------------- */
.langues, .province-entete { flex-shrink: 0; }

/* Le lien « Espace pro » du menu déroulant n'existe qu'en dessous de 30 rem —
   au-dessus, c'est le bouton de la barre qui sert, et les deux ensemble
   feraient doublon. */
.entete__lien--pro { display: none; }

@media (max-width: 30rem) {
  .entete__actions .bouton--contour { display: none; }
  .entete__lien--pro { display: inline-flex; }
  /* Le chevron cède aussi : la pastille reste lisible et reste cliquable,
     c'est l'indice visuel qui part, jamais la fonction. */
  .province-entete__champ {
    padding-inline: var(--espace-2);
    background-image: none;
  }
}

/* ---------------------------------------------------------------------------
   BOUTONS
--------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  padding: var(--espace-3) var(--espace-5);
  min-height: 2.875rem;
  border: var(--trait-moyen) solid transparent;
  border-radius: var(--rayon-md);
  font-family: var(--police-corps);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-douce), color var(--transition-douce),
              border-color var(--transition-douce), transform var(--duree-rapide) var(--courbe),
              box-shadow var(--transition-douce);
}
.bouton:active { transform: translateY(1px); }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

.bouton--principal {
  background: var(--couleur-accent);
  color: var(--couleur-accent-contraste);
  border-color: var(--couleur-accent);
  box-shadow: var(--ombre-accent);
}
.bouton--principal:hover { background: var(--couleur-accent-fort); border-color: var(--couleur-accent-fort); color: var(--couleur-accent-contraste); }

.bouton--secondaire {
  background: var(--couleur-primaire);
  color: var(--brut-blanc);
  border-color: var(--couleur-primaire);
}
.bouton--secondaire:hover { background: var(--couleur-primaire-fort); border-color: var(--couleur-primaire-fort); color: var(--brut-blanc); }

.bouton--contour {
  background: transparent;
  color: var(--couleur-primaire);
  border-color: var(--couleur-bordure);
}
.bouton--contour:hover { border-color: var(--couleur-primaire); background: var(--couleur-primaire-voile); color: var(--couleur-primaire); }

/* Contour posé sur fond sombre.
   ⚠️ CORRECTIF 2026-08-06 — le sélecteur disait `.hero`, sans « s ». Le bloc du
   héros s'appelle `.heros` depuis toujours : la règle ne matchait RIEN, et le
   deuxième bouton du héros (« Devenir partenaire ») était donc rendu en marine
   #003058 sur le voile marine nuit, soit environ 1,2:1 — présent dans le DOM,
   invisible à l'écran. Le vérificateur de contrastes ne pouvait pas l'attraper :
   il ne mesure que des couples écrits à la main, pas ce que la cascade produit. */
.section--sombre .bouton--contour,
.heros .bouton--contour,
.planche--nuit .bouton--contour {
  color: var(--brut-blanc);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ---------------------------------------------------------------------------
   « COPIER LE NUMÉRO » — BLANC PLEIN
   -----------------------------------------------------------------------------
   ⚠️ LE BLOC D'AIDE ÉTAIT LE QUATRIÈME FOND SOMBRE DU SITE, et il manquait à la
   liste ci-dessus. Son bouton était donc rendu en marine #003058 sur le dégradé
   marine du bloc : présent dans le DOM, cliquable, et invisible à l'écran.
   C'est le bug corrigé le 2026-08-06 sur le héros, reproduit ailleurs — parce
   que la règle énumère des CONTENEURS au lieu de suivre le FOND. Toute nouvelle
   surface sombre devra être ajoutée à cette liste, ou porter `.section--sombre`.

   Pourquoi plein et non fantôme : c'est le seul geste que la page attend de
   l'entrepreneur — il vient chercher ce numéro pour le reporter dans le dossier
   de son client. Un contour translucide à 35 % se lit comme un bouton
   secondaire ou désactivé, et posé sur un DÉGRADÉ sa lisibilité change d'un
   bout à l'autre du bloc. Blanc plein sur marine : constant, et visible en tout
   temps. Le contraste est mesuré par le harnais.
--------------------------------------------------------------------------- */
.subv:not(.subv--compact) .bouton--contour {
  background: var(--brut-blanc);
  color: var(--brut-marine);
  border-color: var(--brut-blanc);
}
.subv:not(.subv--compact) .bouton--contour:hover,
.subv:not(.subv--compact) .bouton--contour:focus-visible {
  background: rgba(255, 255, 255, 0.88);
  color: var(--brut-marine);
  border-color: var(--brut-blanc);
}
.section--sombre .bouton--contour:hover,
.heros .bouton--contour:hover,
.planche--nuit .bouton--contour:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--brut-blanc);
  color: var(--brut-blanc);
}

/* Piège de spécificité à désamorcer AVANT qu'il n'explose : `.section--sombre a`
   (0,1,1) bat `.bouton--principal` (0,1,0). Un bouton principal placé dans une
   section sombre deviendrait OR SUR OR. Le cas n'a jamais explosé parce que
   .section--sombre n'est employée par aucune page — mais la planche de nuit en
   porte deux, et une future adoption de .section--sombre les casserait. */
.section--sombre .bouton--principal,
.planche--nuit .bouton--principal,
.heros .bouton--principal { color: var(--couleur-accent-contraste); }

.bouton--large { width: 100%; }
.bouton--grand { padding: var(--espace-4) var(--espace-6); min-height: 3.25rem; font-size: var(--taille-base); }

/* ---------------------------------------------------------------------------
   BADGES
--------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-1);
  padding: var(--espace-1) var(--espace-3);
  border-radius: var(--rayon-plein);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--couleur-primaire-voile);
  color: var(--couleur-primaire);
  white-space: nowrap;
}
.badge--accent { background: var(--couleur-accent-voile); color: var(--brut-alerte); }
.badge--attente { background: var(--couleur-alerte-fond); color: var(--couleur-alerte); }
.badge--succes  { background: var(--couleur-succes-fond); color: var(--couleur-succes); }
.badge--sombre  { background: rgba(255, 255, 255, 0.12); color: var(--brut-blanc); }

/* Marqueur « conçu pour le Canada » — seul usage du rouge érable */
.badge--canada { background: rgba(216, 35, 42, 0.10); color: var(--brut-erable); }

/* ---------------------------------------------------------------------------
   CARTES
--------------------------------------------------------------------------- */
.carte {
  background: var(--couleur-surface);
  border: var(--trait-fin) solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-5);
  box-shadow: var(--ombre-xs);
  transition: box-shadow var(--transition-douce), border-color var(--transition-douce), transform var(--transition-douce);
}
.carte--interactive { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; }
.carte--interactive:hover {
  box-shadow: var(--ombre-md);
  border-color: var(--couleur-trait);
  transform: translateY(-2px);
  color: inherit;
}
.carte__titre { margin-bottom: var(--espace-2); }
.carte__texte { color: var(--couleur-texte-secondaire); font-size: var(--taille-sm); margin-bottom: 0; }

/* Carte avec visuel produit */
.carte__visuel {
  position: relative;
  margin: calc(var(--espace-5) * -1) calc(var(--espace-5) * -1) var(--espace-5);
  border-radius: var(--rayon-lg) var(--rayon-lg) 0 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--brut-brume), var(--brut-blanc));
  aspect-ratio: 4 / 3;
}
.carte__visuel img { width: 100%; height: 100%; object-fit: cover; }

/* Cadre gris quand le rendu n'est pas encore là */
.visuel-attente {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg,
      var(--brut-brume) 0 10px,
      var(--brut-nuage) 10px 20px);
  color: var(--couleur-texte-secondaire);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-semi);
  letter-spacing: var(--lettrage-majuscule);
  text-transform: uppercase;
  text-align: center;
  padding: var(--espace-4);
}

/* Pied d'appel d'une carte cliquable (« Découvrir la gamme → », « Voir la fiche ») */
.gamme__pied {
  margin-top: auto;
  padding-top: var(--espace-4);
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  color: var(--couleur-primaire);
}
.gamme__fleche { transition: transform var(--transition-douce); }
.carte--interactive:hover .gamme__fleche { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   CARACTÉRISTIQUES PRINCIPALES — grille de tuiles à icône
   -----------------------------------------------------------------------------
   Une tuile par caractéristique : icône, valeur, libellé. La grille est
   séparée par des filets d'un pixel obtenus avec `gap` sur un fond de la
   couleur des bordures — pas de bordure par tuile, donc aucun trait doublé.
--------------------------------------------------------------------------- */
.carac { display: flex; flex-direction: column; gap: var(--espace-3); }

.carac__titre {
  margin: 0;
  font-size: var(--taille-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--lettrage-majuscule);
  text-transform: uppercase;
  color: var(--couleur-texte-secondaire);
}

.carac__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--trait-fin);
  background: var(--couleur-bordure);
  border: var(--trait-fin) solid var(--couleur-bordure);
  border-radius: var(--rayon-lg);
  overflow: hidden;
}
@media (min-width: 30rem) {
  .carac__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.carac__tuile {
  display: flex;
  flex-direction: column;
  gap: var(--espace-1);
  padding: var(--espace-4);
  background: var(--couleur-surface);
}
/* La grille porte SEPT tuiles depuis l'ajout de la garantie, donc la dernière
   se retrouve seule sur sa rangée : à trois colonnes, 3 + 3 + 1. On la fait
   alors occuper toute la largeur, sinon les deux tiers restants de la rangée
   apparaissent comme un trou dans un cadre à filets.
   `:nth-child(3n+1)` ne cible que le cas où elle OUVRE une rangée : à deux
   colonnes (mobile), sept tuiles donnent 3 rangées pleines + une seule, et la
   règle du dessous s'en charge. */
@media (min-width: 30rem) {
  .carac__tuile:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
.carac__tuile:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
@media (min-width: 30rem) {
  /* …sauf si elle n'ouvre pas une rangée de trois : on annule alors la règle
     mobile, qui ne vaut que pour la grille à deux colonnes. */
  .carac__tuile:last-child:nth-child(2n + 1):not(:nth-child(3n + 1)) { grid-column: auto; }
}
.carac__icone { color: var(--couleur-primaire); line-height: 0; }
.carac__icone svg { width: 1.375rem; height: 1.375rem; }

.carac__valeur {
  font-family: var(--police-titre);
  font-size: var(--taille-md);
  font-weight: var(--graisse-extra);
  letter-spacing: var(--lettrage-titre);
  color: var(--couleur-texte);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.carac__cle { font-size: var(--taille-xs); color: var(--couleur-texte-secondaire); line-height: 1.3; }

/* Version resserrée pour la carte de gamme — même balisage, mêmes tuiles */
.carac--compact .carac__tuile { padding: var(--espace-3); }
.carac--compact .carac__icone svg { width: 1.125rem; height: 1.125rem; }
.carac--compact .carac__valeur { font-size: var(--taille-base); }

/* ---------------------------------------------------------------------------
   HOMOLOGATIONS — bloc séparé
   -----------------------------------------------------------------------------
   Ce sont des attestations d'organismes tiers, pas des caractéristiques que le
   constructeur s'attribue : elles ont leur propre bandeau, leur propre couleur et
   leur écusson, pour qu'on ne les confonde pas avec le reste.
--------------------------------------------------------------------------- */
.certifs {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  padding: var(--espace-4) var(--espace-5);
  border-radius: var(--rayon-lg);
  background: var(--couleur-succes-fond);
}
.certifs__titre {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin: 0;
  font-size: var(--taille-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--lettrage-majuscule);
  text-transform: uppercase;
  color: var(--couleur-succes);
}
.certifs__icone { display: inline-flex; line-height: 0; }
.certifs__icone svg { width: 1.125rem; height: 1.125rem; }

.certifs__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.certif {
  margin: 0;
  padding: var(--espace-1) var(--espace-3);
  border-radius: var(--rayon-plein);
  background: var(--couleur-surface);
  color: var(--couleur-succes);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-forte);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   SÉLECTEUR DE CAPACITÉ
   -----------------------------------------------------------------------------
   Des boutons, pas des liens : le choix change l'affichage sur place.
   L'état actif passe par `aria-pressed`, donc il est annoncé au clavier et par
   un lecteur d'écran — une classe CSS seule ne l'aurait pas été.
--------------------------------------------------------------------------- */
.capacites { display: flex; flex-direction: column; gap: var(--espace-2); }

.capacites__cle {
  font-size: var(--taille-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--lettrage-majuscule);
  text-transform: uppercase;
  color: var(--couleur-texte-secondaire);
}
.capacites__choix { display: flex; flex-wrap: wrap; gap: var(--espace-2); }

.capacite {
  padding: var(--espace-2) var(--espace-5);
  min-height: 2.75rem;
  border: var(--trait-moyen) solid var(--couleur-bordure);
  border-radius: var(--rayon-md);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-family: var(--police-corps);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--transition-douce), color var(--transition-douce),
              border-color var(--transition-douce);
}
.capacite:hover { border-color: var(--couleur-primaire); color: var(--couleur-primaire); }
.capacite[aria-pressed="true"] {
  background: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
  color: var(--brut-blanc);
}

/* ---------------------------------------------------------------------------
   AIDE FINANCIÈRE
   -----------------------------------------------------------------------------
   Sur la fiche : bloc marine, montant en or, très gros. C'est la première
   question du client de l'entrepreneur, elle mérite d'être vue de loin.
   Sur la carte de gamme : version claire et resserrée, pour ne pas alourdir
   une carte posée sur fond blanc.
   Le couple or sur marine nuit est vérifié à 10,56:1.
--------------------------------------------------------------------------- */
.subv:not(.subv--compact) {
  background: linear-gradient(135deg, var(--brut-marine) 0%, var(--brut-marine-nuit) 100%);
  color: var(--couleur-texte-sur-sombre);
  border-radius: var(--rayon-lg);
  padding: var(--espace-5) var(--espace-6);
  margin-bottom: var(--espace-6);
}
.subv:not(.subv--compact) .subv__titre {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin: 0 0 var(--espace-3);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-forte);
  letter-spacing: var(--lettrage-majuscule);
  text-transform: uppercase;
  color: var(--couleur-accent);
}
.subv__icone { display: inline-flex; line-height: 0; }
.subv__icone svg { width: 1.125rem; height: 1.125rem; }

/* LE MONTANT ET LE NUMÉRO, CÔTE À CÔTE.
   Ils étaient dans deux blocs séparés — l'aide, puis une section « Certificat
   AHRI ». Or ils se recopient dans le MÊME formulaire de subvention, et l'un ne
   vaut rien sans l'autre : c'est la combinaison certifiée qui ouvre le montant.
   Les séparer imposait un aller-retour entre deux encadrés. */
.subv__paire {
  display: grid;
  gap: var(--espace-5);
  margin-bottom: var(--espace-4);
}
@media (min-width: 40rem) {
  .subv__paire { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-6); }
}
.subv__valeur { display: flex; flex-direction: column; gap: var(--espace-1); min-width: 0; }
.subv__etiquette {
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--couleur-texte-doux-sombre);
}

.subv:not(.subv--compact) .subv__montant {
  margin: 0;
  font-family: var(--police-mono);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--couleur-accent);
  font-variant-numeric: tabular-nums;
}

/* Le numéro au MÊME corps que le montant : ce sont deux valeurs de même rang.
   `user-select: all` — un clic le prend en entier, ce qui reste le seul recours
   quand `navigator.clipboard` est indisponible (hors HTTPS, vieux navigateur). */
.subv__numero {
  margin: 0;
  font-family: var(--police-mono);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--brut-blanc);
  font-variant-numeric: tabular-nums;
  user-select: all;
  overflow-wrap: anywhere;
}

.subv__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); align-items: center; }
.subv__actions .bouton svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.subv__actions .bouton[data-copie="true"] {
  border-color: var(--couleur-accent);
  color: var(--couleur-accent);
}
.subv:not(.subv--compact) .subv__montant--attente {
  font-size: var(--taille-lg);
  font-style: italic;
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte-doux-sombre);
}
.subv__programme {
  margin: var(--espace-3) 0 0;
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  color: var(--brut-blanc);
}
.subv__note {
  margin: var(--espace-3) 0 var(--espace-4);
  font-size: var(--taille-xs);
  color: var(--couleur-texte-doux-sombre);
}
.subv__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
}
.subv:not(.subv--compact) .subv__lien { color: var(--couleur-accent); }
.subv__lien svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; }

/* Version resserrée, sur la carte de gamme : le montant, puis le numéro AHRI
   dont il découle, séparés d'un filet. */
.subv--compact {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  margin: 0;
  padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-md);
  background: var(--couleur-accent-voile);
  color: var(--brut-alerte);
}
.subv__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-1) var(--espace-3);
  margin: 0;
}
.subv__ligne--ahri {
  padding-top: var(--espace-2);
  border-top: var(--trait-fin) solid rgba(138, 88, 0, 0.22);
}
.subv__ahri {
  font-family: var(--police-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--graisse-semi);
  font-size: var(--taille-sm);
}
.subv--compact .subv__cle {
  font-size: 0.625rem;
  font-weight: var(--graisse-forte);
  letter-spacing: var(--lettrage-majuscule);
  text-transform: uppercase;
}
.subv--compact .subv__montant {
  font-family: var(--police-titre);
  font-size: var(--taille-lg);
  font-weight: var(--graisse-extra);
  letter-spacing: var(--lettrage-titre);
  font-variant-numeric: tabular-nums;
}
.subv--compact .subv__montant--attente {
  font-size: var(--taille-sm);
  font-style: italic;
  font-weight: var(--graisse-semi);
}

/* ---------------------------------------------------------------------------
   LE SÉLECTEUR DE PROVINCE
   -----------------------------------------------------------------------------
   Il vit sur deux fonds : la carte MARINE de la fiche produit et du bandeau
   d'accueil, et le fond CLAIR de l'encart AHRI du catalogue. Un seul jeu de
   règles ne pouvait pas servir les deux — un champ blanc sur marine crève l'œil,
   un champ marine sur blanc disparaît.

   La base est donc neutre — `color: inherit`, fond transparent : le champ prend
   la couleur du texte de son conteneur, quel qu'il soit. Seule la teinte de la
   BORDURE est spécialisée, plus bas, pour les fonds sombres.

   `appearance: none` est écarté À DESSEIN : la flèche native dit qu'on peut
   dérouler, et sur téléphone c'est elle qui ouvre la roulette du système. La
   redessiner aurait coûté trois règles pour retirer un repère que tout le monde
   connaît déjà.
--------------------------------------------------------------------------- */
.province {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-1) var(--espace-3);
  margin: 0 0 var(--espace-4);
}
.province__cle {
  font-family: var(--police-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.78;
}
.province__champ {
  min-height: 2.25rem;
  max-width: 100%;
  padding: var(--espace-1) var(--espace-2);
  font-family: inherit;
  font-size: var(--taille-sm);
  font-weight: var(--graisse-semi);
  color: inherit;
  background: transparent;
  border: var(--trait-fin) solid currentColor;
  border-radius: var(--rayon-sm);
  cursor: pointer;
}
/* La liste DÉROULÉE est peinte par le système d'exploitation, pas par la page :
   sur fond sombre, ses options hériteraient d'un texte clair posé sur le fond
   clair du menu. On les repose donc en couleurs explicites — c'est le seul
   endroit où le contrôle natif a besoin d'aide. */
.province__champ option {
  color: var(--couleur-texte-principal);
  background: var(--couleur-surface);
}
/* L'origine « adresse IP » est une PRÉSOMPTION, et elle est écrite comme telle.
   Elle prend toute la largeur pour ne pas couper en deux la ligne du champ. */
.province__origine {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--taille-xs);
  color: inherit;
  opacity: 0.78;
}

/* Sur les deux surfaces marine, une bordure à `currentColor` — blanc plein —
   cernait le champ plus fortement que le montant lui-même. On la ramène au gris
   secondaire déjà employé sur ces fonds. */
.subv:not(.subv--compact) .province__champ,
.bandeau-subv .province__champ {
  border-color: var(--couleur-texte-doux-sombre);
}

/* ---------------------------------------------------------------------------
   QUAND IL N'Y A PAS DE MONTANT
   -----------------------------------------------------------------------------
   Le motif prend LA PLACE du montant, jamais une place à côté. Il est donc
   dimensionné comme une phrase et non comme un chiffre : à cet endroit précis
   l'œil vient chercher une valeur, et un motif composé en gros se lirait comme
   une valeur.
--------------------------------------------------------------------------- */
.subv__motif {
  margin: 0;
  font-size: var(--taille-sm);
  line-height: 1.45;
  color: inherit;
}
.subv:not(.subv--compact) .subv__motif { color: var(--couleur-texte-doux-sombre); }

/* Les exigences sont repliées : trois à cinq lignes de conditions
   administratives, utiles à qui les cherche et encombrantes pour les autres.
   <details> donne le pliage, le clavier et l'annonce aux lecteurs d'écran sans
   une ligne de JS. */
.subv__exigences {
  margin-top: var(--espace-2);
  font-size: var(--taille-xs);
}
.subv__exigences summary { cursor: pointer; font-weight: var(--graisse-semi); }
.subv__exigences p { margin: var(--espace-2) 0 0; line-height: 1.5; }

/* La province rappelée à côté de l'intitulé — sur la carte de gamme et sur la
   cartouche de la règle, où il n'y a pas la place d'un sélecteur. Un montant
   n'est jamais orphelin de son territoire. */
.subv__lieu {
  font-weight: var(--graisse-semi);
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}

/* Valeur non encore vérifiée — jamais un chiffre inventé (règle 2). */
.a-confirmer {
  color: var(--couleur-texte-secondaire);
  font-weight: var(--graisse-normale);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   TABLEAU DE CARACTÉRISTIQUES
--------------------------------------------------------------------------- */
.tableau-enveloppe { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tableau {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--taille-sm);
  background: var(--couleur-surface);
}
.tableau caption {
  text-align: left;
  font-weight: var(--graisse-semi);
  color: var(--couleur-texte-secondaire);
  padding-bottom: var(--espace-3);
}
.tableau th, .tableau td {
  text-align: left;
  padding: var(--espace-3) var(--espace-4);
  border-bottom: var(--trait-fin) solid var(--couleur-bordure);
  vertical-align: top;
}
.tableau thead th {
  background: var(--couleur-surface-basse);
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-xs);
  letter-spacing: var(--lettrage-majuscule);
  text-transform: uppercase;
  color: var(--couleur-primaire);
  border-bottom-color: var(--couleur-trait);
  white-space: nowrap;
}
.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--couleur-surface-basse); }
.tableau td--nombre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau th[scope="row"] { font-weight: var(--graisse-semi); color: var(--couleur-texte); }

/* Liste de specs clé/valeur (fiche produit) */
.specs { display: grid; gap: 0; margin: 0; }
.specs__ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--espace-4);
  padding: var(--espace-3) 0;
  border-bottom: var(--trait-fin) solid var(--couleur-bordure);
}
.specs__ligne:last-child { border-bottom: 0; }
.specs__cle { color: var(--couleur-texte-secondaire); font-size: var(--taille-sm); }
.specs__valeur { font-weight: var(--graisse-semi); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------------------------------------------------------------------------
   FORMULAIRES
--------------------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: var(--espace-2); margin-bottom: var(--espace-4); }
.champ__label { font-size: var(--taille-sm); font-weight: var(--graisse-semi); color: var(--couleur-texte); }
.champ__aide { font-size: var(--taille-xs); color: var(--couleur-texte-secondaire); }

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="password"],
.champ select,
.champ textarea {
  width: 100%;
  padding: var(--espace-3) var(--espace-4);
  min-height: 2.875rem;
  border: var(--trait-fin) solid var(--couleur-bordure);
  border-radius: var(--rayon-md);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  transition: border-color var(--transition-douce), box-shadow var(--transition-douce);
}
.champ textarea { min-height: 8rem; resize: vertical; line-height: var(--interligne-corps); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px var(--couleur-primaire-voile);
  outline: none;
}
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--couleur-erreur); }

/* ---------------------------------------------------------------------------
   ALERTES
--------------------------------------------------------------------------- */
.alerte {
  display: flex;
  gap: var(--espace-3);
  padding: var(--espace-4) var(--espace-5);
  border-radius: var(--rayon-md);
  border-left: 4px solid var(--couleur-primaire);
  background: var(--couleur-primaire-voile);
  color: var(--couleur-texte);
  font-size: var(--taille-sm);
}
.alerte--attente { border-left-color: var(--couleur-alerte); background: var(--couleur-alerte-fond); }
.alerte--succes  { border-left-color: var(--couleur-succes); background: var(--couleur-succes-fond); }
.alerte--erreur  { border-left-color: var(--couleur-erreur); background: var(--couleur-erreur-fond); }

/* ---------------------------------------------------------------------------
   FIL D'ARIANE
--------------------------------------------------------------------------- */
.ariane { font-size: var(--taille-xs); color: var(--couleur-texte-secondaire); padding-block: var(--espace-4); }
.ariane ol { display: flex; flex-wrap: wrap; gap: var(--espace-2); list-style: none; margin: 0; padding: 0; }
.ariane li { margin: 0; }
.ariane li + li::before { content: "›"; margin-right: var(--espace-2); color: var(--couleur-trait); }
.ariane a { color: var(--couleur-texte-secondaire); }

/* ---------------------------------------------------------------------------
   PIED DE PAGE
--------------------------------------------------------------------------- */
.pied {
  background: var(--couleur-surface-nuit);
  color: var(--couleur-texte-doux-sombre);
  padding-block: var(--espace-8) var(--espace-6);
  font-size: var(--taille-sm);
}
.pied__grille { display: grid; gap: var(--espace-6); }
@media (min-width: 48rem) { .pied__grille { grid-template-columns: 1.6fr 1fr 1fr; } }

.pied__logo img { height: 2.5rem; width: auto; margin-bottom: var(--espace-4); }
.pied h4 {
  color: var(--brut-blanc);
  font-size: var(--taille-xs);
  letter-spacing: var(--lettrage-majuscule);
  text-transform: uppercase;
  margin-bottom: var(--espace-4);
}
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: var(--espace-2); }
.pied a { color: var(--couleur-texte-doux-sombre); text-decoration: none; }
.pied a:hover { color: var(--couleur-accent); text-decoration: underline; }

/* L'adresse courriel est longue : elle doit pouvoir se couper sans déborder
   de la colonne sur un téléphone. */
.pied__courriel {
  word-break: break-word;
  font-weight: var(--graisse-semi);
  color: var(--brut-blanc) !important;
}
.pied__courriel:hover { color: var(--couleur-accent) !important; }

.pied__bas {
  margin-top: var(--espace-7);
  padding-top: var(--espace-5);
  border-top: var(--trait-fin) solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3) var(--espace-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--taille-xs);
}

/* ---------------------------------------------------------------------------
   BLOC « VISUEL + TEXTE » — climat froid sur l'accueil, multizone sur la gamme
--------------------------------------------------------------------------- */
.duo-visuel { display: grid; gap: var(--espace-6); align-items: center; }
@media (min-width: 62rem) {
  .duo-visuel { grid-template-columns: 1.15fr 1fr; gap: var(--espace-8); }
}
.duo-visuel__image {
  border-radius: var(--rayon-xl);
  overflow: hidden;
  box-shadow: var(--ombre-md);
  aspect-ratio: 16 / 9;
  background: var(--couleur-surface-basse);
}
.duo-visuel__image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   APPEL À L'ACTION PROFESSIONNEL
   Utilisé sur l'accueil ET sur les pages de gamme : il vit donc ici, pas dans
   la feuille d'accueil.
--------------------------------------------------------------------------- */
.appel-pro {
  background: linear-gradient(135deg, var(--brut-marine) 0%, var(--brut-marine-nuit) 100%);
  border-radius: var(--rayon-xl);
  padding: var(--espace-7) var(--espace-6);
  color: var(--couleur-texte-sur-sombre);
  text-align: center;
}
@media (min-width: 48rem) { .appel-pro { padding: var(--espace-8); } }
.appel-pro h2 { color: var(--couleur-texte-sur-sombre); }
.appel-pro p {
  color: var(--couleur-texte-doux-sombre);
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: var(--espace-6);
}
.appel-pro__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); justify-content: center; }

/* ---------------------------------------------------------------------------
   BANDEAU « SITE PRIVÉ » — visible tant que le site n'est pas public
--------------------------------------------------------------------------- */
.bandeau-prive {
  background: var(--couleur-accent);
  color: var(--couleur-accent-contraste);
  text-align: center;
  padding: var(--espace-2) var(--espace-4);
  font-size: var(--taille-xs);
  font-weight: var(--graisse-semi);
  letter-spacing: 0.03em;
}