/* ==========================================================================
   IA par Métier — feuille de style principale
   Approche mobile-first, thème sombre, variables CSS.
   ========================================================================== */

:root {
  /* Palette ardoise / bleu */
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-850: #131c31;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-100: #f1f5f9;

  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;

  /* Rôles */
  --bg: var(--slate-950);
  --bg-elevated: var(--slate-900);
  --bg-card: rgba(30, 41, 59, 0.55);
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.28);
  --text: var(--slate-100);
  --text-muted: var(--slate-400);
  /* Ton le plus sombre encore lisible : 4,8:1 sur les cartes comme sur le champ
     de recherche. --slate-600 y tombait à 2,4:1, sous le seuil de 3:1 exigé
     d'un composant d'interface — les étoiles vides en devenaient invisibles. */
  --text-faint: #78879e;
  --accent: var(--blue-500);
  --accent-soft: rgba(59, 130, 246, 0.14);

  /* Badges tarifaires */
  --tag-gratuit: #34d399;
  --tag-gratuit-bg: rgba(52, 211, 153, 0.12);
  --tag-freemium: var(--blue-300);
  --tag-freemium-bg: rgba(147, 197, 253, 0.12);
  --tag-payant: #fbbf24;
  --tag-payant-bg: rgba(251, 191, 36, 0.12);
  --tag-devis: #c084fc;
  --tag-devis-bg: rgba(192, 132, 252, 0.12);

  /* Typographie */
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Plans de superposition. Échelle courte et documentée, pour qu'un futur
     ajout se place par rapport aux autres plutôt qu'en surenchérissant :
       header  — barre collante, sous tout le reste ;
       modale  — recouvre le contenu ET le header ;
       évitement — le lien « Aller au contenu » doit rester atteignable. */
  --z-header: 100;
  --z-modal: 200;
  --z-skip: 300;

  /* Espacements & formes */
  --container: 1140px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 40px -18px rgba(2, 6, 23, 0.9);
  --shadow-lg: 0 30px 70px -25px rgba(2, 6, 23, 0.95);
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------- Base / reset -- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Réserve la gouttière de la barre de défilement en permanence : sans cela,
     le passage en overflow:hidden à l'ouverture de la modale la fait
     disparaître, et toute la page — dont les boutons du header — se décale
     latéralement. */
  scrollbar-gutter: stable;
}

/* ⚠️ Règle structurante, à ne pas retirer.
   Le navigateur masque les éléments [hidden] via sa propre feuille de style
   (`[hidden] { display: none }`). Or l'origine « auteur » l'emporte sur
   l'origine « navigateur » : n'importe quelle règle de CE fichier qui fixe
   `display` sur un élément porteur de [hidden] annule le masquage.
   C'est exactement ce qui se produisait avec `.btn { display: inline-flex }`
   et `.auth-user { display: flex }` — « Se connecter » et « Se déconnecter »
   restaient affichés tous les deux — et avec `.search-clear { display: grid }`,
   dont la croix ne disparaissait jamais.
   `!important` est le seul moyen de rendre l'attribut fiable pour tout le
   site, y compris pour les règles qu'on ajoutera plus tard. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.modal-open { overflow: hidden; }

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- Header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(2, 6, 23, 0.92);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.logo { display: inline-flex; align-items: center; gap: 10px; }

.logo-mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--blue-500), #6366f1);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.8);
  transition: transform var(--transition);
}
.logo-mark svg { width: 20px; height: 20px; }
.logo:hover .logo-mark { transform: rotate(45deg); }

.logo-text { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; }
.logo-text strong { font-weight: 800; }
.logo-text.small { font-size: 0.95rem; }

/* Navigation : repliée en panneau sur mobile */
.main-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0 20px;
  background: var(--slate-900);
  border-bottom: 1px solid var(--border);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--transition), opacity var(--transition);
}
/* 340 px et non 260 : la navigation est passée à cinq entrées au Lot 10, et le
   panneau tronquait la dernière. La transition porte sur max-height, qui doit
   donc majorer la hauteur réelle sans l'atteindre. */
.main-nav.is-open { max-height: 340px; opacity: 1; }

.main-nav ul { display: flex; flex-direction: column; padding: 8px 0 16px; }
.main-nav a {
  display: block;
  padding: 12px 4px;
  color: var(--text-muted);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border);
  transition: color var(--transition);
}
.main-nav a:hover { color: var(--text); }

/* Voile du menu mobile. Sans lui, un appui à côté du panneau n'atteignait pas
   le menu mais ce qui se trouvait dessous : ouvrir le menu puis toucher une
   carte ouvrait la fiche métier, menu toujours déployé derrière.
   z-index sous le header : le panneau et le burger, qui vivent dans le header,
   restent au-dessus et donc cliquables. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgba(2, 6, 23, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

.nav-toggle {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--slate-300);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------- Hero --- */

/* Espacements serrés dès le mobile : sur un écran de 844 px de haut, un hero
   généreux repoussait la première carte à 834 px, soit dix pixels visibles.
   Les valeurs desktop sont rétablies plus bas, à partir de 900 px. */
/* Pas d'overflow: hidden ici, contrairement à ce que le halo appellerait : la
   liste de suggestions du champ de recherche est positionnée en absolu sous le
   champ, et serait tronquée par le bas du hero. Le débordement horizontal du
   halo (780 px de large) est déjà tenu par `body { overflow-x: hidden }`. */
.hero {
  position: relative;
  padding: 36px 0 28px;
  text-align: center;
}

.hero-glow {
  position: absolute;
  top: -220px; left: 50%;
  width: 780px; height: 560px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 40%, rgba(59, 130, 246, 0.28), transparent 62%),
    radial-gradient(circle at 30% 60%, rgba(99, 102, 241, 0.2), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}

.hero-inner { position: relative; }

.hero-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--blue-300);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Échelle réduite depuis le Lot 10 : le titre est passé de « IA par Métier »
   (trois mots) à une phrase de six. À 9vw, elle occupait quatre lignes et tout
   le haut d'un écran mobile. Le max-width borne la longueur de ligne sur grand
   écran, où le clamp seul laissait filer le titre sur toute la largeur. */
.hero-title {
  max-width: 16em;
  margin: 0 auto;
  font-size: clamp(1.9rem, 6.4vw, 3.2rem);
  background: linear-gradient(120deg, #fff 20%, var(--blue-300) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  max-width: 620px;
  margin: 16px auto 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 3.6vw, 1.2rem);
}

/* ------------------------------------------------------------- Search --- */

.search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 560px;
  margin: 24px auto 0;
}

.search-icon {
  position: absolute;
  left: 18px;
  display: grid;
  place-items: center;
  color: var(--slate-600);
  pointer-events: none;
  transition: color var(--transition);
}
.search-icon svg { width: 19px; height: 19px; }
.search:focus-within .search-icon { color: var(--blue-400); }

#search-input {
  width: 100%;
  padding: 15px 48px 15px 50px;
  font-size: 1rem;
  color: var(--text);
  background: var(--slate-900);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
/* L'intitulé du champ est masqué visuellement : pour qui voit l'écran, ce
   texte est le seul indice de ce qu'on attend ici. Il doit donc tenir le
   seuil des textes courants, pas celui des éléments décoratifs. */
#search-input::placeholder { color: var(--text-faint); }
#search-input:focus {
  outline: none;
  background: var(--slate-850);
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
}
#search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-clear {
  position: absolute;
  right: 14px;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--slate-400);
  background: var(--slate-800);
  border: none;
  border-radius: 50%;
  transition: color var(--transition), background var(--transition);
}
.search-clear:hover { color: var(--text); background: var(--slate-700); }

/* -------------------------------------------------------- Suggestions --- */

/* Position absolue sous le champ, dans le flux de .search (position:relative).
   z-index emprunté à l'échelle du header : la liste doit recouvrir le contenu
   qui la suit, mais jamais une modale ouverte. */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: var(--z-header);
  max-height: 336px;
  overflow-y: auto;
  padding: 6px;
  text-align: left;
  background: var(--slate-900);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.suggestion {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
/* .is-active plutôt que :hover seul : la même mise en valeur doit suivre les
   flèches du clavier, qui ne déplacent aucun curseur. */
.suggestion.is-active { background: var(--accent-soft); }

.suggestion-icone { font-size: 1.15rem; line-height: 1; text-align: center; }
.suggestion-titre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.suggestion-titre mark { background: none; color: var(--blue-300); }
.suggestion-detail {
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* -------------------------------------------------------------- Stats --- */

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 18px;
}
.stat { display: flex; flex-direction: column; min-width: 100px; }
.stat-value { font-size: 1.6rem; font-weight: 800; color: var(--blue-300); letter-spacing: -0.02em; }
.stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ----------------------------------------------------------- Sections --- */

.section { padding: 36px 0; }
.section-about { background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.75), transparent); }

.section-head { max-width: 620px; margin: 0 auto 24px; text-align: center; }
.section-title { font-size: clamp(1.6rem, 5.4vw, 2.2rem); }
.section-subtitle { margin-top: 10px; color: var(--text-muted); }

/* min-height sans texte au repos : la ligne est vide la plupart du temps, mais
   sa hauteur reste réservée pour que la grille ne descende pas d'un cran dès
   le premier caractère tapé dans la recherche. */
.results-count {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  /* line-height explicite, et min-height à la même valeur : la ligne héritait
     du 1.65 du body et rendait 22 px là où 19 étaient réservés, si bien que la
     grille descendait tout de même de 3 px au premier caractère saisi. */
  line-height: 1.4;
  min-height: 1.4em;
}

/* --------------------------------------------------- Grille de cartes --- */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 24px 22px;
  text-align: left;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* état initial de l'animation au défilement */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}
.card.is-visible { opacity: 1; transform: none; }

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at 50% 0%, rgba(59, 130, 246, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.card:hover,
.card:focus-visible {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(30, 41, 59, 0.85);
  box-shadow: var(--shadow-lg);
}
.card.is-visible:hover,
.card.is-visible:focus-visible { transform: translateY(-6px); }
.card:hover::before, .card:focus-visible::before { opacity: 1; }

.card-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  font-size: 1.6rem;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--transition), background var(--transition);
}
.card:hover .card-icon { transform: scale(1.08) rotate(-6deg); background: rgba(59, 130, 246, 0.24); }

.card-title { font-size: 1.2rem; }
.card-desc { color: var(--text-muted); font-size: 0.92rem; }

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue-300);
  background: var(--accent-soft);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 999px;
  white-space: nowrap;
}

.card-arrow {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  color: var(--slate-400);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: transform var(--transition), color var(--transition), background var(--transition);
}
.card-arrow svg { width: 16px; height: 16px; }
.card:hover .card-arrow { color: #fff; background: var(--blue-600); transform: translateX(4px); }

/* Mise en valeur des termes recherchés */
mark {
  padding: 0 2px;
  color: var(--blue-300);
  background: rgba(59, 130, 246, 0.22);
  border-radius: 3px;
}

/* ------------------------------------------- Rails de découverte (Lot 10) */

/* Tuiles plus denses que les cartes de métier : elles se lisent en survol de
   page, pas en lecture attentive. D'où une grille à colonnes plus étroites et
   des textes bornés en nombre de lignes. */
.tuiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tuile-lien {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.tuile-lien:hover,
.tuile-lien:focus-visible {
  transform: translateY(-3px);
  background: rgba(30, 41, 59, 0.85);
  border-color: var(--border-strong);
}

.tuile-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.tuile-icone { font-size: 1.5rem; line-height: 1; }

.tuile-surtitre {
  order: -1;
  color: var(--text-faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tuile-titre { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }

/* Deux lignes maximum, sinon une description longue déformerait la rangée
   entière : les tuiles d'une même ligne partagent leur hauteur. */
.tuile-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.87rem;
}

.tuile-bas {
  margin-top: auto;
  padding-top: 10px;
  color: var(--text-faint);
  font-size: 0.78rem;
}

.rail-lien { margin-top: 18px; text-align: center; }
.lien-suite {
  color: var(--blue-300);
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.lien-suite:hover { border-bottom-color: currentColor; }

/* Fond alterné, comme .section-about : trois rails d'affilée sur le même fond
   se lisaient comme une seule liste de vingt-deux tuiles. */
.section-rail { background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.75), transparent); }

/* ------------------------------------------------------- Empty state --- */

.empty-state {
  padding: 48px 20px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.empty-icon { display: block; margin-bottom: 12px; font-size: 2rem; }
.empty-state p { margin: 10px auto 20px; max-width: 420px; color: var(--text-muted); }

/* ------------------------------------------------------------ Boutons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition), color var(--transition);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  color: #fff;
  background: linear-gradient(140deg, var(--blue-500), var(--blue-600));
  box-shadow: 0 14px 30px -14px rgba(37, 99, 235, 0.9);
}
.btn-primary:hover { box-shadow: 0 18px 36px -14px rgba(37, 99, 235, 1); }

.btn-ghost {
  color: var(--blue-300);
  background: transparent;
  border-color: var(--border-strong);
}
.btn-ghost:hover { color: #fff; background: var(--accent-soft); border-color: var(--blue-500); }

.btn-sm { padding: 8px 16px; font-size: 0.85rem; }

/* ------------------------------------------------------------ À propos -- */

.about-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.about-card {
  padding: 26px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), border-color var(--transition);
}
.about-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.about-icon { display: block; margin-bottom: 12px; font-size: 1.6rem; }
.about-card h3 { font-size: 1.05rem; }
.about-card p { margin-top: 8px; color: var(--text-muted); font-size: 0.92rem; }

/* ------------------------------------------------------------ Contact --- */

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 32px 26px;
  background:
    linear-gradient(140deg, rgba(37, 99, 235, 0.16), rgba(99, 102, 241, 0.08)),
    var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
.contact-card .section-head { text-align: left; }

/* ------------------------------------------------------------- Footer --- */

.site-footer {
  padding: 28px 0;
  border-top: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.6);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.copyright { color: var(--text-muted); font-size: 0.85rem; }
.footer-link {
  color: var(--blue-300);
  font-size: 0.85rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.footer-link:hover { border-bottom-color: currentColor; }

/* ------------------------------------------------------------- Modale --- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
/* Le masquage de [hidden] est assuré globalement en tête de fichier. */

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--transition);
}
.modal.is-open .modal-backdrop { opacity: 1; }

.modal-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  /* dvh suit la barre d'adresse mobile ; ignoré par les navigateurs qui ne
     connaissent pas l'unité, qui conservent alors la ligne précédente. */
  max-height: 92dvh;
  /* Le dialogue ne défile pas lui-même : c'est .modal-body qui le fait, pour
     que l'en-tête et sa croix de fermeture restent visibles. */
  overflow: hidden;
  background: var(--slate-900);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(28px);
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}
.modal.is-open .modal-dialog { transform: none; opacity: 1; }

/* Dans le flux de l'en-tête, poussée à droite : elle ne peut plus défiler
   hors de l'écran comme le faisait un position: absolute dans un dialogue
   lui-même défilant. */
.modal-close {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--slate-400);
  background: var(--slate-800);
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: color var(--transition), background var(--transition), transform var(--transition);
}
.modal-close:hover { color: #fff; background: var(--slate-700); transform: rotate(90deg); }

.modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--border);
}
/* min-width: 0 — sans quoi un titre long refuserait de se réduire et
   pousserait la croix de fermeture hors du dialogue. */
.modal-heading { min-width: 0; }
.modal-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px; height: 54px;
  font-size: 1.7rem;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.modal-title { font-size: clamp(1.35rem, 5vw, 1.7rem); }
.modal-desc { margin-top: 4px; color: var(--text-muted); font-size: 0.92rem; }

.modal-body {
  flex: 1 1 auto;
  display: grid;
  gap: 14px;
  padding: 20px;
  overflow-y: auto;
  /* Arrivé en bout de liste, le défilement ne se propage pas à la page. */
  overscroll-behavior: contain;
}

.tool {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(12px);
  animation: tool-in 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: border-color var(--transition), background var(--transition);
}
.tool:hover { border-color: rgba(96, 165, 250, 0.45); background: rgba(30, 41, 59, 0.85); }

@keyframes tool-in {
  to { opacity: 1; transform: none; }
}

.tool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tool-name { font-size: 1.08rem; }
.tool-desc { color: var(--text-muted); font-size: 0.92rem; }

/* --------------------------------------- Regroupement par tâche (Lot 7) --- */

.modal-body > .tool-group { display: grid; gap: 14px; }
.modal-body > .tool-group + .tool-group { margin-top: 22px; }

.tool-group-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-300);
}

/* Description courte : une phrase, mise en avant devant le détail. */
.tool-summary {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
}

/* ------------------------------------------- Faits vérifiés d'une fiche --- */

.tool-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 12px;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.tool-facts dt {
  color: var(--slate-400);
  font-weight: 600;
}
.tool-facts dd { margin: 0 0 6px; color: var(--text-muted); }

.tool-balance { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tool-balance h5 {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tool-pros h5 { color: var(--tag-gratuit); }
.tool-cons h5 { color: var(--tag-payant); }

.tool-balance ul { display: grid; gap: 4px; }
.tool-balance li {
  position: relative;
  padding-left: 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.tool-balance li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

/* Date de vérification, éventuellement liée à la page consultée. */
.tool-verified {
  margin-left: auto;
  color: var(--slate-400);
  font-size: 0.78rem;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
a.tool-verified:hover { color: var(--blue-300); border-bottom-color: currentColor; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.tag-gratuit  { color: var(--tag-gratuit);  background: var(--tag-gratuit-bg); }
.tag-freemium { color: var(--tag-freemium); background: var(--tag-freemium-bg); }
.tag-payant   { color: var(--tag-payant);   background: var(--tag-payant-bg); }
.tag-devis    { color: var(--tag-devis);    background: var(--tag-devis-bg); }
/* Tarif non vérifiable : gris neutre, pour ne pas se faire passer pour une
   information tarifaire. */
.tag-verifier { color: var(--slate-400);   background: rgba(148, 163, 184, 0.12); }

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

/* Retour vers le métier depuis la fiche d'un outil seul (/outil/<slug>).
   Séparé par un filet : c'est une sortie de la fiche, pas une de ses actions. */
.modal-retour {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
}

/* ------------------------------------------- Authentification (header) --- */

/* Contient soit « Se connecter », soit l'adresse et « Se déconnecter » : c'est
   js/auth.js qui remplace le contenu. min-height réserve la hauteur d'un
   bouton, pour que le header ne se redimensionne pas quand la session se
   résout ou change. */
.auth {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 36px;
  margin-left: auto;
}

/* Masqué par défaut : sous 600 px, le header n'a pas la place pour le logo,
   l'adresse, le bouton et le menu burger. Rétabli plus haut. */
.auth-email {
  display: none;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Le cadre est porté par .auth-error-inner et non par .container, qui reste
   seul maître de sa gouttière : deux classes réglant le même padding sur le
   même nœud, c'est le conflit de spécificité qu'on ne veut pas ici. */
.auth-error-bar { padding-top: 12px; }

.auth-error-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.1);
}

.auth-error {
  flex: 1;
  color: #fca5a5;
  font-size: 0.88rem;
}

.auth-error-close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: #fca5a5;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background var(--transition), border-color var(--transition);
}
.auth-error-close:hover {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.4);
}

/* ----------------------------------------------------------- Notation --- */

.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.rating.is-busy { opacity: 0.6; }

.rating-summary {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Le fieldset porte l'état désactivé pour tout le groupe d'un coup. */
.rating-stars {
  display: inline-flex;
  gap: 2px;
  padding: 0;
  margin: 0;
  border: 0;
}
.rating-stars:disabled { opacity: 0.45; }

.rating-star {
  position: relative;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.rating-stars:disabled .rating-star { cursor: default; }

/* Le bouton radio reste dans le flux, focalisable, mais invisible : c'est
   l'étoile voisine qui porte le rendu et l'anneau de focus. */
.rating-star input {
  position: absolute;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.rating-star-mark {
  font-size: 1.25rem;
  line-height: 1;
  padding: 2px;
  color: var(--text-faint);
  transition: color var(--transition), transform var(--transition);
}
.rating-star-mark.is-on { color: var(--tag-payant); }

.rating-stars:not(:disabled) .rating-star:hover .rating-star-mark {
  color: var(--tag-payant);
  transform: scale(1.15);
}

/* Sélecteur de voisinage plutôt que :has() : l'anneau de focus reste visible
   même sur les navigateurs qui ne gèrent pas encore :has(). */
.rating-star input:focus-visible + .rating-star-mark {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: 4px;
}

.rating-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rating-clear,
.rating-signin {
  padding: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.rating-clear:hover,
.rating-signin:hover {
  color: var(--blue-300);
  border-bottom-color: currentColor;
}
.rating-clear:disabled { opacity: 0.5; cursor: default; }

.rating-msg {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.rating-msg.is-error { color: #fca5a5; }

/* ------------------------------------------------------- Breakpoints --- */

/* Les règles en max-width qui suivent sont une exception à l'approche
   mobile-first du fichier : elles ne construisent rien, elles bornent des
   comportements qui n'ont de sens qu'en dessous du seuil desktop.

   En session ouverte, le header aligne le logo (135 px), « Se déconnecter »
   (126 px) et le burger (42 px) : 303 px de contenu. Avec les gouttières de
   20 px et deux espaces de 16 px, il faut 335 px utiles. Sous 375 px de
   viewport, les trois se replient chacun sur deux lignes. On récupère les
   pixels manquants sur les espaces, jamais sur le contenu. */
@media (max-width: 400px) {
  .header-inner.container { padding: 0 14px; }
  .header-inner { gap: 10px; }
  .auth { gap: 8px; }
}

/* Sous 340 px, même resserrées, les trois pièces ne tiennent plus. Le mot-clé
   passe alors en retrait visuel plutôt qu'en display:none : le lien garde son
   nom accessible « IA par Métier », seule la marque reste à l'écran. */
@media (max-width: 340px) {
  .logo-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Le verrouillage du défilement ne vaut que tant que le menu est un panneau.
   Au-delà de 900 px la navigation revient dans le flux et .is-open n'a plus
   d'effet : sans cette borne, un redimensionnement menu ouvert laisserait la
   page bloquée sur grand écran. */
@media (max-width: 899px) {
  body.nav-open { overflow: hidden; }
}

@media (min-width: 600px) {
  .auth-email { display: inline; }
  /* Intitulé / valeur sur deux colonnes : lisible dès qu'il y a la place. */
  .tool-facts { grid-template-columns: max-content 1fr; }
  .tool-facts dd { margin-bottom: 0; }
  .tool-balance { grid-template-columns: 1fr 1fr; gap: 18px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .tuiles { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 16px 48px; }
  .modal { align-items: center; padding: 24px; }
  .modal-dialog { border-radius: var(--radius-lg); }
  .modal-header { padding: 26px 28px 20px; }
  .modal-body { padding: 22px 28px 28px; }
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 900px) {
  /* Le hero tenait tout l'écran sur un portable en 1440×900 : la première
     rangée de cartes commençait à 874 px pour 900 px de haut, soit 26 px
     visibles. Ce qu'il promet — explorer par métier — demandait de défiler
     pour être vu. Les paddings sont resserrés jusqu'à ce qu'une demi-carte
     passe au-dessus de la ligne de flottaison. */
  .section { padding: 64px 0; }
  .hero { padding: 64px 0 48px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  /* Trois métiers par rangée comme la grille, mais quatre outils : les tuiles
     d'outil portent moins de texte et les rails en comptent huit, soit deux
     rangées pleines. */
  .tuiles-metiers { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .tuiles-outils { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .about-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .contact-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
  }

  /* Sur mobile, .main-nav est hors flux : margin-left auto colle la zone de
     connexion au burger. Une fois la navigation remise dans le flux, c'est
     justify-content: space-between qui répartit logo / nav / connexion. */
  .auth { margin-left: 0; }

  /* Navigation horizontale sur grand écran */
  .nav-toggle { display: none; }
  .nav-backdrop { display: none; }
  .main-nav {
    position: static;
    max-height: none;
    padding: 0;
    background: none;
    border: none;
    opacity: 1;
    overflow: visible;
  }
  .main-nav ul { flex-direction: row; gap: 6px; padding: 0; }
  .main-nav a {
    padding: 8px 14px;
    border: none;
    border-radius: 999px;
  }
  .main-nav a:hover { background: var(--accent-soft); }
}

@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------- Préférence : moins d'animation --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card { opacity: 1; transform: none; }
}