/* ================================================
   Sourceo | Système de Design
   Conforme à DESIGN-SYSTEM.md et REFONTE-SPEC.md
   ================================================ */

/* -----------------------------------------------
   POLICES | Inter auto-hébergée (souveraineté)
   ----------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------
   VARIABLES CSS | Palette (DESIGN-SYSTEM.md)
   ----------------------------------------------- */
:root {
  /* Indigo */
  --indigo: #534AB7;
  --indigo-hover: #7F77DD;
  --indigo-800: #3B3384;   /* nuance foncée : survol des boutons pleins (contraste conservé) */
  --indigo-voile: #EEEDFE;
  --indigo-fonce: #26215C;
  
  /* Vert (sobre, parcimonie) */
  --vert: #1D9E75;

  /* Jaune étoiles UE (logo .eu) */
  --jaune-eu: #FFCC00;

  /* Texte */
  --encre: #1A1A1E;
  --texte2: #5F5E5A;
  --texte3: #6E6E69;
  
  /* Fond */
  --fond: #FAFAF9;
  --carte: #FFFFFF;
  
  /* Bordure */
  --border: rgba(26, 26, 30, 0.1);
  --border-strong: rgba(26, 26, 30, 0.2);
  
  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  
  /* Espacement (rythme vertical) */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  
  /* Typographie | Échelle unique — 7 crans (DESIGN-SYSTEM.md)
     Exprimée en rem : le visiteur qui agrandit la police de son navigateur
     voit tout le site grandir avec elle. Base = 16px (html: 100%).
     Aucun font-size en dur ailleurs dans ce fichier. */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;

  --t-xs:      0.75rem;    /* 12px — labels capitales, méta minuscule */
  --t-sm:      0.8125rem;  /* 13px — méta, pays, pastilles, légendes */
  --t-base:    0.9375rem;  /* 15px — corps de texte, boutons, formulaires */
  --t-lg:      1.0625rem;  /* 17px — H3, nom de carte, chapô */
  --t-xl:      1.375rem;   /* 22px — H2, H1 en petit écran */
  --t-2xl:     1.75rem;    /* 28px — H1, tous gabarits confondus */
  --t-display: 3rem;       /* 48px — icône de confirmation */
  
  /* Max width */
  --max-w: 1200px;
  --header-h: 60px;
  
  /* Ombre (discrète) */
  --shadow-panel: 0 8px 32px rgba(30, 27, 75, 0.12);
  --ombre-carte: 0 4px 12px rgba(30, 27, 75, 0.08);

  /* Focus clavier (anneau indigo, accessibilité) */
  --anneau-focus: 0 0 0 3px rgba(83, 74, 183, 0.25);

  /* État d'erreur formulaire (seul usage fonctionnel du rouge) */
  --erreur-fond: #FEF2F2;
  --erreur-bordure: #FECACA;
  --erreur-texte: #B91C1C;

  /* Formulaires (révision DESIGN-SYSTEM.md 2026-07-03) */
  --champ-bordure: #D3D1C7;
  --rouge-erreur: #A32D2D;
}

/* -----------------------------------------------
   RESET & BASE
   ----------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* 100 % et non 16px : en pixels, on neutralise le réglage de taille de
     police du navigateur et le site devient inaccessible aux malvoyants. */
  font-size: 100%;
  scroll-behavior: smooth;
}

/* Les cibles d'ancres ne passent pas sous le header sticky */
[id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-sm));
}

/* Transitions entre pages : fondu discret, pur CSS (progressive enhancement).
   Navigateurs sans support = navigation classique, aucun repli JS.
   Le fond de page (--fond) est cohérent : pas de flash blanc. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
}

body {
  font-family: var(--font-family);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--encre);
  background-color: var(--fond);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------
   TYPOGRAPHIE | Échelle (DESIGN-SYSTEM.md)
   ----------------------------------------------- */
h1, .h1 {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--encre);
}

h2, .h2 {
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--encre);
}

h3, .h3 {
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.4;
  color: var(--encre);
}

p {
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--texte2);
}

.small, .meta, .text-sm {
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--texte3);
}

/* -----------------------------------------------
   LIENS
   ----------------------------------------------- */
a {
  color: var(--indigo);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--indigo-hover);
}

/* -----------------------------------------------
   FOCUS CLAVIER | anneau indigo homogène (Étalon v2)
   ----------------------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--anneau-focus);
}

/* -----------------------------------------------
   SKIP-LINK | accessibilité clavier
   ----------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 1000;
  background: var(--indigo-fonce);
  color: white;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--space-sm);
  outline: none;
  box-shadow: var(--anneau-focus);
}

/* -----------------------------------------------
   BOUTONS
   ----------------------------------------------- */
.btn, .btn-soumettre, .carte-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--indigo);
  color: white;
  padding: 11px 22px;
  border-radius: var(--radius-md);
  font-size: var(--t-base);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

/* Survol des boutons pleins : indigo foncé + texte blanc conservé + léger liseré clair.
   Règle absolue : le contraste texte/fond n'est jamais perdu (hover, focus, active, visited). */
.btn:not(.btn-secondary):hover,
.btn-soumettre:hover,
.carte-cta:hover,
.hero-search button:hover {
  background: var(--indigo-800);
  color: white;
  outline: 2px solid var(--indigo-voile);
  outline-offset: 2px;
}

.btn:active, .btn-soumettre:active, .carte-cta:active {
  transform: scale(0.98);
}

/* Bouton secondaire (pour les filtres) */
.btn-secondary {
  background: var(--carte);
  color: var(--encre);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--border-strong);
  background: var(--fond);
}

/* -----------------------------------------------
   PILLS (étiquettes)
   ----------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--t-xs);
  font-weight: 400;
  line-height: 1;
}

.pill-indigo {
  background: var(--indigo-voile);
  color: var(--indigo);
}

.pill-gray {
  background: var(--fond);
  color: var(--texte3);
  border: 1px solid var(--border);
}

/* -----------------------------------------------
   FILTRES (menus déroulants)
   ----------------------------------------------- */
.filtre-select, .tri-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--carte);
  color: var(--encre);
  font-size: var(--t-base);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.filtre-select:focus, .tri-select:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: var(--anneau-focus);
}

.filtre-select:hover, .tri-select:hover {
  border-color: var(--border-strong);
}

/* -----------------------------------------------
   HEADER
   ----------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--indigo-fonce);
  height: var(--header-h);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-width: 0;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
}

.logo-wordmark {
  font-size: var(--t-lg);
  font-weight: 600;
  color: white;
}

.logo-eu {
  color: var(--jaune-eu);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav a {
  position: relative;
  color: white;
  font-size: var(--t-base);
  font-weight: 400;
  transition: opacity 0.2s ease;
}

/* Soulignement animé (liens de navigation, hors bouton « Proposer »).
   Repos : caché (scaleX 0). Survol/focus : se dessine de gauche à droite. */
.nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--indigo-hover);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav a:not(.nav-cta):hover::after,
.nav a:not(.nav-cta):focus-visible::after {
  transform: scaleX(1);
}

/* Page active : soulignement jaune permanent (détection via aria-current="page",
   à ajouter côté build, voir DESIGN-SYSTEM.md § Étalon v2). */
.nav a[aria-current="page"]::after {
  background: var(--jaune-eu);
  transform: scaleX(1);
}

.nav a:hover {
  color: white;
  opacity: 0.8;
}

.nav-cta {
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.nav-cta:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ── Recherche déplacée dans le header (BRIEF-39) ── */
/* Le cadre porte la bordure, le fond et le rayon ; l'input est nu à
   l'intérieur. Le bouton est un enfant flex ordinaire, jamais positionné en
   absolu : il ne peut donc pas recouvrir le texte saisi, quelle que soit la
   longueur du mot « Rechercher » (il change avec la langue).
   `position: relative` reste indispensable : le panneau de suggestions
   (.suggestions-container) s'ancre dessus. */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  flex: 1 1 180px;
  min-width: 0;
  max-width: 420px;
  margin: 0 8px;
  padding-right: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--carte);
}
/* L'anneau de focus est porté par le cadre entier, pas par le seul input :
   au clavier, c'est tout le champ qui se signale. */
.header-search:focus-within {
  border-color: var(--indigo);
  box-shadow: var(--anneau-focus);
}
.header-search input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;          /* sans ça, un flex item refuse de passer sous sa
                            largeur de contenu et déborde du cadre */
  height: 100%;
  padding: 0 8px 0 16px;
  border: none;
  background: transparent;
  color: var(--encre);
  font-size: var(--t-base);
  font-family: inherit;
}
.header-search input:focus {
  outline: none;
}
.header-search button {
  flex: 0 0 auto;
  background: var(--indigo);
  color: white;
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;   /* « Rechercher » ne se coupe jamais en deux lignes */
}
.header-search button:hover {
  background: var(--indigo-800);
}
/* Le header s'empile et la recherche passe en pleine largeur (menu conservé).
   Bascule à 960px et non 720px : entre les deux, le champ était comprimé par
   le flex jusqu'à n'afficher que trois caractères avant le bouton, et « À
   propos » se cassait sur deux lignes. C'est la largeur en dessous de
   laquelle logo + champ + menu ne tiennent plus sur une seule ligne. */
@media (max-width: 960px) {
  .header { height: auto; }
  .header-inner { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; gap: 10px; }
  .header-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
}

/* -----------------------------------------------
   BANDEAU STATS (au-dessus du footer)
   ----------------------------------------------- */
.bandeau-stats {
  background: var(--indigo-voile);
  padding: var(--space-lg) 20px;
  text-align: center;
  font-size: var(--t-base);
  color: var(--texte2);
}

.bandeau-stats strong {
  font-weight: 500;
  color: var(--encre);
}

/* -----------------------------------------------
   FOOTER
   ----------------------------------------------- */
.footer {
  background: var(--indigo-fonce);
  color: white;
  padding: var(--space-xl) 0 var(--space-lg);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
}

.footer-grille {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.footer-marque p {
  font-size: var(--t-base);
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-xs);
}

.footer-marque p:last-child {
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.4);
}

.footer-col h4 {
  font-size: var(--t-base);
  font-weight: 600;
  color: white;
  margin-bottom: var(--space-sm);
}

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

.footer-col li {
  margin-bottom: var(--space-xs);
}

.footer-col a {
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: white;
}

.footer-bas {
  display: flex;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.6);
}

.footer-bas a {
  color: rgba(255, 255, 255, 0.6);
}

.footer-bas a:hover {
  color: white;
}

.footer-legaux {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-sm);
}

.footer-legaux a {
  color: rgba(255, 255, 255, 0.6);
  margin-right: var(--space-md);
}

.footer-legaux a:hover {
  color: white;
}

.footer-tagline {
  margin-top: var(--space-xs);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.25);
}

.footer-legaux a {
  color: rgba(255, 255, 255, 0.6);
}

.footer-legaux a:hover {
  color: white;
}

/* -----------------------------------------------
   HERO (accueil)
   ----------------------------------------------- */
.hero {
  padding: var(--space-xl) 0;
  background: linear-gradient(180deg, var(--fond) 0%, var(--carte) 100%);
}

.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.hero-eyebrow {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texte3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.hero h1 {
  max-width: 700px;
  margin: 0 auto var(--space-md);
}

.hero h1 em {
  font-style: normal;
  color: var(--indigo);
}

.hero-sub {
  max-width: 600px;
  margin: 0 auto var(--space-lg);
  font-size: var(--t-lg);
  color: var(--texte2);
}

.hero-search {
  max-width: 500px;
  margin: 0 auto var(--space-lg);
  position: relative;
}

.hero-search input {
  width: 100%;
  padding: 14px 18px 14px 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--carte);
  font-size: var(--t-base);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-search input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: var(--anneau-focus);
}

.hero-search button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--indigo);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--t-base);
  font-weight: 500;
  cursor: pointer;
}

/* ── Chips catégories, remplacent le dropdown (BRIEF-39) ── */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
}
.cat-chip {
  border: 1px solid var(--border);
  background: var(--carte);
  color: var(--texte2);
  border-radius: var(--radius-xl);
  padding: 8px 16px;
  font-size: var(--t-base);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cat-chip:hover {
  border-color: var(--indigo-hover);
  color: var(--indigo-800);
}
.cat-chip.actif {
  background: var(--indigo);
  border-color: var(--indigo);
  color: white;
}
.cat-chip:focus-visible {
  outline: none;
  box-shadow: var(--anneau-focus);
}

/* Survol : voir la règle groupée des boutons pleins (indigo foncé + liseré). */

/* Mot animé du hero (rotation JS, zéro layout shift) */
.mot-anime {
  display: inline-block;
  min-width: 15ch;
  text-align: left;
  color: var(--indigo);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.mot-sortant {
  opacity: 0;
  transform: translateY(6px);
}

/* -----------------------------------------------
   BANNIERE (partenaire)
   ----------------------------------------------- */
.banniere {
  background: var(--indigo-voile);
  padding: var(--space-sm) 0;
  text-align: center;
  font-size: var(--t-sm);
}

.banniere-label {
  display: inline-block;
  background: var(--indigo);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  margin-right: var(--space-sm);
}

/* -----------------------------------------------
   FILTRES BAR
   ----------------------------------------------- */
.filtres-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border);
  max-width: var(--max-w);
  margin: 0 auto;
}

.filtres-bar-label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texte3);
  margin-right: var(--space-sm);
}

.filtres-bar-filters {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.compteur-resultats {
  font-size: var(--t-sm);
  color: var(--texte3);
  margin-top: var(--space-xs);
  width: 100%;
}

/* -----------------------------------------------
   BOUTON RÉINITIALISER
   ----------------------------------------------- */
.btn-reset-filtres {
  font-size: var(--t-sm); padding: 6px 12px;
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  color: var(--texte3); background: var(--surface);
  cursor: pointer; outline: none;
  margin-left: var(--space-sm);
  transition: all 0.15s;
}
.btn-reset-filtres:hover {
  border-color: var(--indigo-600);
  color: var(--indigo-700);
}

/* Message 0 résultat */
.zero-resultat {
  font-size: var(--t-sm); color: var(--texte3);
  margin: var(--space-xs) 0 0 0;
  width: 100%;
}

/* -----------------------------------------------
   AUTOCOMPLÉTION (BRIEF-35)
   ----------------------------------------------- */
.suggestions-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  text-align: left;
  background: var(--carte);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: var(--space-xs);
}

.suggestions-groupe {
  padding: var(--space-sm);
}

.suggestions-groupe:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.suggestions-groupe-titre {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--texte3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.suggestions-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s;
  min-height: 44px;
}

.suggestions-item:hover, .suggestions-item.suggestions-item-active {
  background: var(--indigo-voile);
}

.suggestions-item:focus {
  outline: 2px solid var(--indigo);
  outline-offset: -2px;
}

.suggestions-initiale {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--indigo-voile);
  color: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.suggestions-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: contain;
  background: white;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.suggestions-nom {
  font-size: var(--t-base);
  color: var(--encre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------
   PASTILLE "ALTERNATIVE À X" (BRIEF-35)
   ----------------------------------------------- */
.pastille-cible {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--indigo-voile);
  border-radius: var(--radius-xl);
  padding: 4px 4px 4px 8px;
  cursor: pointer;
  transition: background-color 0.15s;
  margin-left: var(--space-sm);
  outline: none;
}

.pastille-cible:hover {
  background: var(--indigo-hover);
}

.pastille-cible:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.pastille-cible-initiale {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--indigo);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.pastille-cible-logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: contain;
  background: white;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.pastille-cible-nom {
  font-size: var(--t-sm);
  color: var(--indigo-800);
  line-height: 1.3;
}

.pastille-cible-remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--indigo);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-base);
  padding: 0;
  line-height: 1;
}

.pastille-cible-remove:hover {
  background: var(--indigo-hover);
  color: var(--indigo-fonce);
}

.pastille-cible-remove:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* -----------------------------------------------
   SOLUTIONS GRILLE
   ----------------------------------------------- */
.solutions-grille {
  display: grid;
  /* min() et non 320px sec : minmax() a un plancher DUR, donc à 320px de large
     la piste dépassait le conteneur et la page débordait de 20px sur 80 pages
     (mesuré le 2026-09-10 après la suppression du « 1fr » à 768px). */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* -----------------------------------------------
   CARTE SOLUTION | Style C (DESIGN-SYSTEM.md)
   ----------------------------------------------- */
.carte {
  background: var(--carte);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.carte:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--ombre-carte);
}

.carte:focus {
  outline: none;
}

.carte:focus-visible {
  box-shadow: var(--anneau-focus);
}

/* Zones à hauteur réservée : les boutons Visiter d'une rangée restent
   sur la même ligne quelle que soit la longueur des textes */
.carte-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  min-height: 48px;
}

.carte-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: white;
  flex-shrink: 0;
  padding: 4px;
  box-sizing: border-box;
}

.carte-logo-fallback {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: var(--radius-md);
  color: var(--indigo);
  font-size: var(--t-base);
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.carte-ident {
  flex: 1;
  min-width: 0;
}

.carte-nom {
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--encre);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carte-pays {
  font-size: var(--t-sm);
  color: var(--texte3);
}

.carte-desc {
  font-size: var(--t-base);
  color: var(--encre);
  line-height: 1.55;
  margin-bottom: var(--space-sm);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.65em; /* réserve 3 lignes, cohérent avec le line-clamp */
}

.carte-alt {
  font-size: var(--t-xs);
  color: var(--texte3);
  margin-bottom: var(--space-xs);
  line-height: 1.6;
  /* Deux lignes réservées, conformément à DESIGN-SYSTEM.md (Étalon v2).
     Le code n'en réservait qu'une : dès qu'une solution remplace trois services
     (« Alternative à McAfee, Norton, Kaspersky »), la ligne passait sur deux
     rangs et poussait le bouton « Visiter » vers le bas. Résultat mesuré à
     1060px : 18px d'écart de hauteur entre cartes et des boutons désalignés
     d'une carte à l'autre. Deux lignes est le maximum constaté sur les 82. */
  min-height: 3.2em;
}

.carte-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
}

.carte-meta {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.carte-meta span {
  font-size: var(--t-xs);
  color: var(--texte3);
}

.carte-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--indigo);
  color: white;
  padding: 8px 16px;
  min-height: 44px;
  border-radius: var(--radius-md);
  font-size: var(--t-sm);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
}

/* Survol : voir la règle groupée des boutons pleins (indigo foncé + liseré). */

.carte-cta:active {
  transform: scale(0.98);
}

/* État caché pour les filtres */
.carte-hidden {
  display: none;
}

/* -----------------------------------------------
   PAGE CONTENT (fiches, about, etc.)
   ----------------------------------------------- */
.page-content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-xl) 20px var(--space-lg);
}

/* Colonne de texte, mesurée le 2026-09-10 : les pages éditoriales affichaient
   149 caractères par ligne à 1280px, parce que .page-content héritait du
   max-width de 1200px prévu pour la GRILLE DE CARTES. Au-delà de 90 caractères,
   l'œil perd la ligne en revenant à la marge.
   34rem donne 74 caractères — mesuré avec _src/outils/mesurer_lignes.py, dont
   le calcul de largeur de glyphe a lui-même dû être corrigé le 2026-09-10 : il
   annonçait 74 là où il y en avait 76. On borne les blocs de texte et non le conteneur, pour que les tuiles
   de /alternatives gardent toute la largeur. */
.page-texte > h1,
.page-texte > h2,
.page-texte > h3,
.page-texte > p,
.page-texte > ul,
.page-texte > ol,
.page-texte > form,
.page-texte > .page-notice,
.page-texte > #faq-liste {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* /alternatives garde ses tuiles pleine largeur : on borne le seul paragraphe
   de tête, aligné à gauche sur les tuiles et non centré — sinon le titre
   flottait au milieu pendant que les tuiles commençaient à la marge. */
.page-content > .page-subtitle {
  max-width: 34rem;
}

/* Les 80 pages /alternatives/<service>.html : leur intro montait à 92
   caractères par ligne. Elles portent .alternatives-page et non .page-texte,
   parce qu'elles alignent aussi une grille de cartes pleine largeur. */
.alternatives-page > p,
.alternatives-page > div > p,
.alternatives-page > ul,
.alternatives-page > ol {
  max-width: 34rem;
}

/* Une URL écrite en toutes lettres comme libellé de lien ne se coupe pas :
   celle de l'autorité de protection des données (40 caractères) faisait
   déborder confidentialite.html de 7px à 320px de large. */
.page-content a,
.comparaison-page a {
  overflow-wrap: anywhere;
}

.page-content h1 {
  margin-bottom: var(--space-lg);
}

.page-content h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.page-content h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.page-content p {
  margin-bottom: var(--space-md);
}

/* -----------------------------------------------
   FORMULAIRE (proposer.html)
   ----------------------------------------------- */
.form-groupe {
  margin-bottom: var(--space-md);
}

.form-groupe label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--encre);
  margin-bottom: var(--space-xs);
}

.form-groupe input,
.form-groupe select,
.form-groupe textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--champ-bordure);
  border-radius: var(--radius-sm);
  background: var(--carte);
  color: var(--encre);
  font-size: var(--t-base);
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-groupe input::placeholder,
.form-groupe textarea::placeholder {
  color: var(--texte3);
}

.form-groupe input:focus,
.form-groupe select:focus,
.form-groupe textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: var(--anneau-focus);
}

.form-groupe textarea {
  min-height: 100px;
  resize: vertical;
}

/* État d'erreur par champ (bordure + message texte, jamais la couleur seule) */
.form-groupe input.champ-erreur,
.form-groupe select.champ-erreur,
.form-groupe textarea.champ-erreur {
  border-color: var(--rouge-erreur);
}

.champ-erreur-msg {
  display: block;
  font-size: var(--t-sm);
  color: var(--rouge-erreur);
  margin-top: var(--space-xs);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-hint {
  display: block;
  font-size: var(--t-xs);
  color: var(--texte3);
  margin-top: var(--space-xs);
}

.form-required {
  color: var(--vert);
}

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

.form-legend {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--encre);
  margin-bottom: var(--space-md);
  padding: 0;
}

.form-legend-hint {
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--texte3);
}

.form-legend-desc {
  font-size: var(--t-sm);
  color: var(--texte3);
  margin-bottom: var(--space-md);
}

.form-erreur {
  display: none;
  padding: var(--space-sm) var(--space-md);
  background: var(--erreur-fond);
  border: 1px solid var(--erreur-bordure);
  border-radius: var(--radius-sm);
  font-size: var(--t-sm);
  color: var(--erreur-texte);
  margin-bottom: var(--space-md);
}

/* -----------------------------------------------
   PAGES (about, proposer, etc.)
   ----------------------------------------------- */
.page-list {
  margin: var(--space-sm) 0 var(--space-md);
}

.page-list li {
  margin-bottom: var(--space-xs);
}

.page-notice {
  background: var(--fond);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0 var(--space-xl);
}

.page-notice-title {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--encre);
  margin-bottom: var(--space-xs);
}

.page-notice-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.page-notice-list li {
  font-size: var(--t-sm);
  color: var(--texte2);
  margin-bottom: var(--space-xs);
}

.page-content-center {
  text-align: center;
  margin: 0 auto;
}

.page-subtitle {
  color: var(--texte2);
  margin-bottom: var(--space-md);
}

.page-note {
  font-size: var(--t-sm);
  color: var(--texte3);
  margin-bottom: var(--space-lg);
}

.merci-icone {
  font-size: var(--t-display);
  color: var(--vert);
  margin: 0 auto var(--space-md);
}

/* -----------------------------------------------
   FAQ (about.html)
   ----------------------------------------------- */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: var(--space-md) 0;
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--encre);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.faq-q:hover {
  color: var(--indigo);
}

.faq-icone {
  font-size: var(--t-lg);
  color: var(--indigo);
  transition: transform 0.2s ease;
}

.faq-r {
  display: none;
  font-size: var(--t-sm);
  color: var(--texte2);
  line-height: 1.7;
  padding-top: var(--space-sm);
  margin-top: var(--space-xs);
}

/* -----------------------------------------------
   ALTERNATIVES PAGE
   ----------------------------------------------- */
.alternatives-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-xl) 20px var(--space-lg);
}

.alternatives-hero {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.alternatives-hero h1 {
  margin-bottom: var(--space-sm);
}

.alternatives-hero p {
  color: var(--texte2);
}

.solution-breadcrumb {
  font-size: var(--t-sm);
  color: var(--texte3);
  margin-bottom: var(--space-md);
}

.solution-breadcrumb a {
  color: var(--indigo);
}

/* -----------------------------------------------
   SOLUTION PAGE (fiches)
   ----------------------------------------------- */
.solution-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-xl) 20px var(--space-lg);
}

.solution-breadcrumb {
  font-size: var(--t-sm);
  color: var(--texte3);
  margin-bottom: var(--space-md);
}

.solution-breadcrumb a {
  color: var(--indigo);
}

.solution-hero {
  margin-bottom: var(--space-xl);
}

.solution-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.solution-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: white;
  flex-shrink: 0;
  position: relative;
  padding: 4px;
  box-sizing: border-box;
}

.solution-logo img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.solution-logo-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: var(--radius-md);
  color: var(--indigo);
  border: 1px solid var(--border);
  font-size: var(--t-lg);
  font-weight: 600;
}

.solution-info {
  flex: 1;
}

.solution-titre {
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--encre);
  margin-bottom: var(--space-xs);
  letter-spacing: -0.02em;
}

.solution-meta {
  font-size: var(--t-sm);
  color: var(--texte3);
  margin-bottom: var(--space-sm);
}

.solution-alt {
  font-size: var(--t-base);
  color: var(--texte2);
  margin-bottom: var(--space-md);
}

.solution-alt a {
  color: var(--indigo);
}

.solution-desc {
  font-size: var(--t-base);
  color: var(--texte2);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: var(--space-md);
}

.solution-resume {
  font-size: var(--t-base);
  color: var(--texte2);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.solution-section {
  margin-bottom: var(--space-xl);
}

/* :not([class]) — sinon cette règle (spécificité 0,1,1) l'emportait sur
   .comparaison-note (0,1,0) et imposait 35rem là où on voulait 28rem. */
.solution-section > p:not([class]),
.solution-section > ul:not([class]),
.solution-section > ol:not([class]) {
  max-width: 34rem;
}

.solution-date {
  max-width: 26rem;
  font-size: var(--t-xs);
  color: var(--texte3);
  margin-top: var(--space-md);
}

.solution-date a {
  color: var(--indigo);
}

.solution-back {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.solution-back a {
  font-size: var(--t-sm);
  color: var(--indigo);
}

.solution-comp-link {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--indigo-voile);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.solution-comp-link p {
  font-size: var(--t-sm);
  color: var(--indigo);
  margin-bottom: var(--space-xs);
}

.solution-comp-link a {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--indigo);
}
}

.solution-breadcrumb a {
  color: var(--indigo);
}

.solution-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.solution-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--indigo-voile);
  flex-shrink: 0;
}

.solution-info {
  flex: 1;
}

.solution-info h1 {
  margin-bottom: var(--space-xs);
}

.solution-meta {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-size: var(--t-sm);
  color: var(--texte3);
}

.solution-section {
  margin-bottom: var(--space-xl);
}

.solution-section h2 {
  font-weight: 600;
  color: var(--encre);
  margin-bottom: var(--space-md);
}

.solution-section h3 {
  font-weight: 600;
  color: var(--encre);
  margin-bottom: var(--space-sm);
}

.solution-grid {
  display: grid;
  gap: var(--space-sm);
}

.solution-grid-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.solution-grid-item:last-child {
  border-bottom: none;
}

.solution-grid-key {
  font-size: var(--t-sm);
  color: var(--texte3);
  flex-shrink: 0;
}

.solution-grid-val {
  font-size: var(--t-sm);
  color: var(--encre);
  text-align: right;
  word-break: break-word;
}

/* -----------------------------------------------
   COMPARAISONS PAGE
   ----------------------------------------------- */
.comparaison-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-xl) 20px var(--space-lg);
}

.comparaison-title {
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--encre);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.comparaison-subtitle {
  font-size: var(--t-base);
  color: var(--texte2);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: var(--space-xl);
}

.comparaison-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Sous 380px, deux cartes côte à côte ne tiennent plus : le nom de la cible
   (« Facebook Marketplace, eBay ») pousse la seconde carte hors de l'écran et
   faisait déborder 7 pages de comparaison de 5 à 15px. Empilées, la flèche
   pivote : le sens « on vient de là, on va vers ça » reste lisible.
   Le tableau, lui, défile dans son cadre (.comparaison-table-wrapper). */
@media (max-width: 380px) {
  .comparaison-visual {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .comparaison-vs {
    transform: rotate(90deg);
  }
}

.comparaison-card {
  background: var(--carte);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
}

.comparaison-card-eu {
  background: var(--indigo-voile);
  border-color: var(--border);
}

.comparaison-card-alt {
  background: var(--fond);
}

.comparaison-card-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--indigo-voile);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
  position: relative;
}

.comparaison-card-logo img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  object-fit: contain;
}

/* Le repli en initiales est masqué par défaut : c'est le `onerror` de l'<img>
   qui le révèle quand le logo ne charge pas.
   Mais la carte de la cible (« YouTube, Netflix ») n'a AUCUN <img> — le build
   n'en écrit un que si assets/logos-cibles/{slug}.png existe, et ce dossier est
   vide. Sans <img>, aucun `onerror` ne se déclenche, le display:none n'est
   jamais levé, et les initiales écrites dans le HTML restent invisibles : une
   case pâle vide sur les 82 comparaisons.
   On les réaffiche donc dès qu'il n'y a pas d'image à attendre. La règle
   deviendra inopérante d'elle-même le jour où les logos de cibles seront
   récupérés — elle ne gêne pas fetch_logos_cibles.py. */
/* Repli des logos sans JavaScript.
   Le repli reposait sur un attribut onerror inline, que la CSP de production
   (script-src 'self') bloque : en ligne, une image manquante restait cassée à
   l'écran. Les générateurs n'émettent plus la balise <img> quand le fichier
   n'existe pas au build ; ces règles révèlent alors les initiales.
   Le onerror reste utile pour une panne de transfert à l'exécution — le jour
   où la CSP autorisera son hash. */
.carte-top:not(:has(img)) .carte-logo-fallback,
.fiche-logo:not(:has(img)) .fiche-logo-fallback {
  display: flex;
}

.comparaison-card-logo:not(:has(img)) .comparaison-card-fallback {
  display: flex;
}

.comparaison-card-fallback {
  display: none;
  color: var(--indigo);
  font-size: var(--t-lg);
  font-weight: 600;
}

.comparaison-card-name {
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--encre);
  margin-bottom: var(--space-xs);
}

.comparaison-card-meta {
  font-size: var(--t-xs);
  color: var(--texte3);
}

.comparaison-vs {
  font-size: var(--t-xl);
  color: var(--texte3);
  text-align: center;
}

/* overflow-x: auto et non hidden : un <th> comme « FACEBOOK MARKETPLACE, EBAY »
   ne peut pas se réduire sous ~350px, et « hidden » ne l'empêchait pas de
   pousser la page — 7 pages de comparaison débordaient de 5 à 15px à 320px.
   Un tableau large défile dans son cadre ; il ne déplace pas le reste. */
.comparaison-table-wrapper {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: var(--space-lg);
  max-width: 100%;
}

.comparaison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparaison-table th,
.comparaison-table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--t-sm);
  color: var(--encre);
  border-bottom: 1px solid var(--border);
}

.comparaison-table th {
  background: var(--fond);
  font-weight: 500;
  color: var(--texte3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--t-xs);
}

/* Bornés comme le reste du texte courant : à 768px ces blocs montaient à 110
   et 117 caractères par ligne. --t-sm et --t-xs logent plus de signes, d'où
   des largeurs plus étroites que les 35rem des pages éditoriales. */
.comparaison-note {
  max-width: 28rem;
  margin-top: var(--space-md);
  font-size: var(--t-sm);
  color: var(--texte3);
}

.comparaison-cta {
  background: var(--indigo-voile);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.comparaison-cta-title {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--encre);
  margin-bottom: var(--space-xs);
}

.comparaison-cta-desc {
  /* Pas de marges automatiques : le titre du bloc est aligné à gauche, une
     description centrée dessous se lisait comme un décrochage. */
  max-width: 28rem;
  font-size: var(--t-sm);
  color: var(--texte2);
  margin-bottom: var(--space-md);
}

.comparaison-cta-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* -----------------------------------------------
   UTILITAIRES
   ----------------------------------------------- */
.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;
}

/* -----------------------------------------------
   RESPONSIVE | Mobile-first
   ----------------------------------------------- */
@media (max-width: 768px) {
  .footer-grille {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .footer-bas {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }
  
  .footer-legaux {
    text-align: center;
  }
  
  .footer-legaux a {
    display: block;
    margin: 0 auto var(--space-xs);
  }
  
  /* Pas de « 1 colonne » forcé ici : à 768px, deux cartes de 320px tiennent
     largement, et la colonne unique étirait la description à 94 caractères par
     ligne (mesuré le 2026-09-10). Le repeat(auto-fill, minmax(320px, 1fr))
     retombe tout seul sur une colonne quand il n'y a plus la place. */

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

@media (max-width: 480px) {
  /* La navigation ne disparaît plus. Elle était en display:none sous 480px et
     aucun bouton burger n'existe dans le dépôt : sur un téléphone, le site
     n'avait donc AUCUN menu — ni Solutions, ni Méthodologie, ni À propos.
     Personne ne l'avait relevé, ni l'audit ni la Définition de « fini ».
     Elle passe maintenant sur sa propre ligne, centrée. Zéro JS. */
  .nav {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding-top: var(--space-xs);
  }
  
  .hero h1 {
    font-size: var(--t-xl);
  }
  
  .hero-sub {
    font-size: var(--t-base);
  }
}

/* Classes pour la mécanique d'affiliation */
.note-affilie {
  font-size: var(--t-xs);
  color: var(--texte3);
  margin-top: 0.25rem;
  display: inline-block;
}

.note-affilie-fiche {
  font-size: var(--t-xs);
  color: var(--texte3);
  margin-top: 0.5rem;
}

/* -----------------------------------------------
   FICHE SOLUTION | immersive (BRIEF-33, Étalon v2)
   ----------------------------------------------- */
.fiche-hero {
  /* le fond (teinte pâle du logo) est injecté par le build en style inline */
  padding: var(--space-lg) 20px var(--space-xl);
  text-align: center;
}

.fiche-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.fiche-ariane {
  align-self: flex-start;
  font-size: var(--t-sm);
  color: var(--texte2);
}

.fiche-ariane a {
  color: var(--texte2);
}

.fiche-ariane a:hover {
  color: var(--indigo);
}

.fiche-logo {
  width: 84px;
  height: 84px;
  background: var(--carte);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre-carte);
}

.fiche-logo img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.fiche-logo-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: var(--indigo);
  font-size: var(--t-xl);
  font-weight: 600;
}

.fiche-nom {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--encre);
}

.fiche-desc {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texte2);
  max-width: 420px;
}

.fiche-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

/* inline-block (et non inline-flex) : préserve les espaces entre les liens */
.fiche-pill-alt {
  display: inline-block;
  line-height: 1.4;
}

.fiche-pill-alt a {
  color: var(--indigo);
}

.fiche-cta {
  margin-top: var(--space-xs);
}

.fiche-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-xl) 20px 0;
  text-align: center;
}

.fiche-label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte3);
  margin-bottom: var(--space-md);
}

/* Cadre cohérent avec les tuiles de faits, texte justifié */
.fiche-resume {
  font-size: var(--t-lg);
  line-height: 1.7;
  color: var(--encre);
  max-width: 540px;
  margin: 0 auto;
  /* Drapeau à gauche, pas justifié : à 56 caractères et sans césure, la
     justification française creuse des rivières blanches entre les mots. */
  text-align: left;
  background: var(--carte);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.fiche-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
  max-width: 900px;
  margin: 0 auto;
}

.fiche-tuile {
  background: var(--carte);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.fiche-tuile svg {
  color: var(--indigo);
  flex-shrink: 0;
}

.fiche-tuile-key {
  font-size: var(--t-xs);
  color: var(--texte3);
}

.fiche-tuile-val {
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--encre);
  overflow-wrap: anywhere;
}

.fiche-minicartes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.fiche-minicarte {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--carte);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--encre);
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.fiche-minicarte:hover {
  color: var(--encre);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--ombre-carte);
}

.fiche-minicarte img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--carte);
}

/* 36rem et non var(--max-w) : c'est du texte courant, pas un conteneur de
   grille. Sur les 61 fiches qui portent la clause de vérification, la ligne
   s'étalait sur 1200px — 99 caractères, mesuré le 2026-09-10, alors que le
   critère 2 dit « entre 60 et 75 PARTOUT ». Le critère était passé au vert avec
   un outil qui ne regardait pas ce sélecteur.
   30rem et non 35rem : ce texte est en --t-sm, donc il loge plus de caractères
   dans la même largeur. Une colonne se borne en caractères, pas en pixels. */
.fiche-ligne-finale {
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--space-xl) 20px;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--texte3);
}

@media (max-width: 768px) {
  .fiche-nom {
    font-size: var(--t-xl);
  }

  .fiche-hero {
    padding: var(--space-md) 16px var(--space-lg);
  }

  .fiche-section {
    padding-top: var(--space-lg);
  }
}

/* -----------------------------------------------
   FLÈCHES DE NAVIGATION
   ----------------------------------------------- */
.scroll-nav {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  z-index: 1000;
}

.scroll-nav-btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-md);
  background: var(--surface);
  color: var(--texte3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  outline: none;
}

.scroll-nav-btn:hover {
  border-color: var(--indigo-600);
  color: var(--indigo-700);
  background: var(--indigo-50);
}

.scroll-nav-btn svg {
  width: 20px; height: 20px;
}

/* -----------------------------------------------
   TACTILE | cibles >= 44px sur mobile (Étalon v2)
   ----------------------------------------------- */
@media (max-width: 768px) {
  .carte-cta,
  .btn,
  .btn-soumettre,
  .filtre-select,
  .tri-select,
  .hero-search button,
  .fiche-minicarte {
    min-height: 44px;
  }
}

/* -----------------------------------------------
   ACCESSIBILITÉ | reduced motion : tout désactiver
   ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  /* Fondu inter-pages désactivé */
  @view-transition {
    navigation: none;
  }
}

/* -----------------------------------------------
   INDEX DES ALTERNATIVES (/alternatives/index.html)
   Le site est rangé par « ce qui existe » ; cette page le range par « ce que
   je veux quitter », qui est la question réelle du visiteur. Aucune image :
   assets/logos-cibles/ est vide, la texture vient des noms de solutions.
   ----------------------------------------------- */
.alt-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.alt-tuile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-md);
  background: var(--carte);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.alt-tuile:hover {
  border-color: var(--indigo);
  transform: translateY(-2px);
}

.alt-tuile-nom {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--encre);
}

.alt-tuile-compte {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--indigo);
}

/* L'aperçu porte la texture de la page : ce sont les noms de solutions qui
   distinguent une tuile d'une autre, faute de logos. */
.alt-tuile-apercu {
  font-size: var(--t-sm);
  color: var(--texte3);
  line-height: 1.5;
  margin-top: 2px;
}

.alt-alphabet {
  font-size: var(--t-sm);
  color: var(--texte3);
  margin-bottom: var(--space-lg);
  line-height: 2;
}

.alt-blocs {
  columns: 3;
  column-gap: var(--space-xl);
}

.alt-bloc {
  break-inside: avoid;
  margin-bottom: var(--space-lg);
}

.alt-lettre {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texte3);
  letter-spacing: 0.08em;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-xs);
}

.alt-liste {
  list-style: none;
}

.alt-liste a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 5px 0;
  color: var(--encre);
}

.alt-liste a:hover .alt-liste-marque {
  color: var(--indigo);
}

.alt-liste-marque {
  font-size: var(--t-base);
}

/* Pour les 35 marques qui n'ont qu'une solution, cliquer serait un détour :
   la réponse est donnée directement dans la ligne. */
.alt-liste-reponse {
  font-size: var(--t-sm);
  color: var(--texte3);
  text-align: right;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .alt-blocs { columns: 2; }
}

@media (max-width: 600px) {
  .alt-blocs { columns: 1; }
}


/* -----------------------------------------------
   LIGNE DE FILTRE UNIQUE (accueil)
   La recherche descend du header, où elle était étroite et en concurrence avec
   la navigation, et devient l'élément principal juste au-dessus de la grille.
   Les 21 puces de catégorie sont devenues un menu : elles occupaient 450px de
   haut sur mobile et repoussaient la première carte à 1104px du haut.
   ----------------------------------------------- */
.recherche-principale {
  /* Indispensable : le panneau de suggestions (.suggestions-container) est en
     position absolue et s'ancre sur ce conteneur. */
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
  height: 44px;
  padding: 0 6px 0 14px;
  background: var(--carte);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.recherche-principale:focus-within {
  border-color: var(--indigo);
  box-shadow: var(--anneau-focus);
}

.recherche-icone {
  flex-shrink: 0;
  color: var(--texte3);
  margin-right: var(--space-xs);
}

.recherche-principale input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;          /* sans ça, un flex item déborde de son conteneur */
  height: 100%;
  border: none;
  background: transparent;
  color: var(--encre);
  font-size: var(--t-base);
  font-family: inherit;
}

.recherche-principale input:focus {
  outline: none;
}

.recherche-principale button {
  flex: 0 0 auto;
  background: var(--indigo);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.recherche-principale button:hover {
  background: var(--indigo-800);
}

.filtres-bar-filters {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* Sous 720px la recherche prend toute la largeur et les trois menus se
   partagent la ligne suivante : on garde une seule rangée de filtres au lieu
   des quatre rangées de puces d'avant. */
@media (max-width: 720px) {
  .recherche-principale { flex-basis: 100%; }
  .filtres-bar-filters { width: 100%; }
  .filtres-bar-filters .filtre-select { flex: 1 1 30%; min-width: 0; }
}

/* Sous 520px, trois menus sur une rangée tronquent leurs libellés
   (« Toutes les caté… »). On les laisse passer sur deux rangées : deux menus
   larges valent mieux que trois illisibles. */
@media (max-width: 520px) {
  .filtres-bar-filters .filtre-select { flex: 1 1 45%; }
}

/* -----------------------------------------------
   FICHE : badge de vérification et guide de migration
   Le badge n'apparaît que si la fiche porte une `source_about` : 21 solutions
   sur 82 n'en ont pas, et affichaient pourtant « Vérifié le … » sans le moindre
   lien consultable. Sur celles-là, on n'affirme plus rien.
   Pastille blanche, sceau et texte indigo : c'est le seul poids qui tient sur
   les 82 teintes de bannière, calculées au build depuis la couleur du logo.
   L'indigo voile disparaîtrait sur le repli lavande, l'indigo plein
   concurrencerait le bouton « Visiter le site ».
   ----------------------------------------------- */
.fiche-badge-verif {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--space-sm) 0 var(--space-xs);
  padding: 5px 12px;
  background: var(--carte);
  border: 1px solid var(--indigo-voile);
  border-radius: 999px;
  color: var(--indigo);
  font-size: var(--t-sm);
  font-weight: 500;
}

.fiche-guide {
  display: block;
  max-width: 540px;
  margin: 0 auto var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--carte);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--t-base);
  font-weight: 500;
}

.fiche-guide:hover {
  border-color: var(--indigo);
}