/* FAO Watch : une feuille de style de cabinet, pas de vitrine.

   Une colonne de 640 px, du blanc, un seul caractere, presque pas de
   couleur. La hierarchie vient des tailles et des espaces, jamais des
   encadres ni des ombres. Le service vend de la fiabilite a des regies,
   des etudes et des bureaux : le site doit ressembler a ce qu'ils ont
   deja sur leur bureau. */

:root {
  --fg: #111111;
  --fg-muted: #6b6b6b;
  --fg-subtle: #9a9a9a;
  --border: #d9d9d9;
  --border-light: #ececec;
  --bg: #ffffff;
  --bg-subtle: #f6f6f6;
  /* L'accent, un bleu nuit, est aussi celui du logo, du favicon, du
     theme-color et du manifeste. Ne pas le changer ici sans les changer
     aussi : deux bleus voisins sur la meme page est le defaut qu'un
     precedent audit avait du corriger. */
  --accent: #1f3a5f;
  --accent-hover: #16304f;
  --danger: #8a1c1c;
  --radius: 3px;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* La colonne flex tient le pied de page en bas des pages courtes. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--fg);
}

.container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

main.container {
  flex: 1 0 auto;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

/* === Typographie === */
h1, h2, h3 {
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
h1 { font-size: 1.75rem; margin-bottom: 1rem; }
h2 { font-size: 1.25rem; margin-top: 0; }
h3 { font-size: 1.05rem; margin-top: 1.75rem; }
/* Les pages de prose (tarifs, CGU, questions, guide, à propos...) portent
   leur titre en h1 et leurs rubriques en h2, pour les moteurs et les
   lecteurs d'écran ; à l'œil, le titre garde la taille d'un h2 et les
   rubriques celle d'un h3. Seuls les h2 qui SUIVENT un h1 dans la même
   carte sont visés : les écrans de l'espace connecté ne changent pas. */
.card h1 { font-size: 1.25rem; margin-top: 0; }
.card h1 ~ h2 { font-size: 1.05rem; margin-top: 1.75rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.25rem; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--accent-hover); }

.lead { font-size: 1.1rem; }
.muted { color: var(--fg-muted); }
.small { font-size: 0.9375rem; }
.helper { display: block; color: var(--fg-muted); font-size: 0.875rem; margin-top: 0.3rem; }
.eyebrow { color: var(--fg-muted); font-size: 0.9375rem; margin-bottom: 0.25rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }

/* Les trois etapes de la page d'accueil (conserve pour les pages qui
   l'utilisent encore). */
.etapes { padding-left: 1.25rem; line-height: 1.8; margin: 0; }

/* === En-tete === */
header.site-header {
  border-bottom: 1px solid var(--border-light);
}
header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  min-height: 3.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
header.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
}
header.site-header .brand img { width: 24px; height: 24px; }
header.site-header nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.9375rem;
}
header.site-header nav a,
header.site-header nav button {
  color: var(--fg-muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
header.site-header nav a:hover,
header.site-header nav button:hover { color: var(--fg); }
header.site-header nav form { display: inline; }

/* === Pied de page === */
footer.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-light);
  padding: 1.5rem 1.25rem 2rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
}
footer.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-bottom: 0.5rem;
}
footer.site-footer a { color: var(--fg-muted); text-decoration: none; }
footer.site-footer a:hover { color: var(--fg); text-decoration: underline; }
footer.site-footer p { margin: 0; }

/* === Sections ===
   « card » n'est plus un cadre : c'est une section, separee de la suivante
   par de l'espace et un filet. */
.card { margin-bottom: 2.5rem; }
.card + .card { border-top: 1px solid var(--border-light); padding-top: 2rem; }
.card > :last-child { margin-bottom: 0; }
.card-narrow, .form-card { max-width: 440px; }

.hero { margin-bottom: 2.5rem; }
.hero h1 { margin-bottom: 1rem; }
.cta-group { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.5rem 0 0; }

/* === Boutons === */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-secondary { background: transparent; color: var(--accent); }
.btn-secondary:hover { background: var(--bg-subtle); color: var(--accent-hover); }
.btn-danger { background: transparent; color: var(--fg-muted); border-color: var(--border); }
.btn-danger:hover { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-quiet {
  background: transparent;
  color: var(--fg-muted);
  border-color: transparent;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.btn-quiet:hover { background: transparent; color: var(--danger); border-color: transparent; text-decoration: underline; }
.btn-small { padding: 0.3rem 0.7rem; font-size: 0.875rem; }
.btn-large { padding: 0.65rem 1.25rem; font-size: 1rem; }
.btn-block { display: block; width: 100%; text-align: center; }
.plus-icon { margin-right: 0.15rem; }

/* === Formulaires === */
.field { margin-bottom: 1.1rem; }
label { display: block; font-size: 0.9375rem; margin-bottom: 0.3rem; }
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="file"], select, textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid #b8b8b8;
  border-radius: var(--radius);
  background: #fff;
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  line-height: 1.3;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="checkbox"] { width: auto; margin-right: 0.4rem; }
.inline-form { display: flex; gap: 0.5rem; align-items: stretch; position: relative; }
.inline-form input[type="text"] { flex: 1; }
.inline-form .btn { flex-shrink: 0; }

/* === Messages === */
.flash {
  padding: 0.6rem 0 0.6rem 1rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--border);
  font-size: 0.9375rem;
}
.flash.success { border-left-color: var(--accent); }
.flash.error { border-left-color: var(--danger); }
.flash.warning { border-left-color: #8a6d1c; }

.notice {
  padding: 0.6rem 0 0.6rem 1rem;
  border-left: 3px solid var(--border);
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
}
.notice-warn { border-left-color: #8a6d1c; }
.notice p { margin: 0; }

/* === Tarifs === */
.pricing-grid { margin: 1.5rem 0; }
.plan { padding: 1.25rem 0; border-top: 1px solid var(--border-light); }
.plan:last-child { border-bottom: 1px solid var(--border-light); }
.plan h2 { font-size: 1.05rem; margin: 0 0 0.25rem; display: inline; }
.plan .price { display: inline; margin-left: 0.5rem; color: var(--fg-muted); }
.plan p { margin: 0.5rem 0 0; }
.plan form, .plan .btn { margin-top: 0.75rem; }
.plan-boutons { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.plan-boutons form { display: inline; }
.plan-etat { color: var(--fg-muted); font-size: 0.9375rem; }
.price-summary { list-style: none; padding: 0; }
.price-summary li { padding: 0.5rem 0; border-top: 1px solid var(--border-light); margin: 0; }
.price-summary li:last-child { border-bottom: 1px solid var(--border-light); }

/* === Ma veille === */
.folder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.group-search { max-width: 260px; }
.new-group-card { margin-bottom: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.new-group-card .field { margin-bottom: 0.75rem; }
.new-group-actions { display: flex; gap: 0.5rem; }

/* Les groupes : une ligne de liens, le groupe ouvert en gras. */
.folder-actions { display: flex; align-items: center; gap: 1rem; }
details.aide { position: relative; font-size: 0.9375rem; }
details.aide summary { cursor: pointer; color: var(--fg-muted); list-style: none; text-decoration: underline; }
details.aide summary::-webkit-details-marker { display: none; }
details.aide summary:hover { color: var(--fg); }
details.aide p {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: min(320px, 80vw);
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 2;
}

.folder-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}
.folder-tab { color: var(--fg-muted); text-decoration: none; padding: 0 1rem; line-height: 1.2; }
.folder-tab:first-child { padding-left: 0; }
.folder-tab + .folder-tab { border-left: 1px solid var(--border); }
.folder-tab:hover { color: var(--fg); text-decoration: underline; }
.folder-tab.active { color: var(--fg); font-weight: 600; }
.folder-tab-tag { color: var(--fg-subtle); font-weight: 400; font-size: 0.875rem; margin-left: 0.25rem; }

.folder-body-card { margin-bottom: 2rem; }
.kw-add { margin-bottom: 2rem; }
.kw-cible { margin-bottom: 0.75rem; }
.kw-cible label { display: inline; margin-right: 0.5rem; }
.kw-cible select { width: auto; max-width: 100%; }
.kw-desordre { display: block; margin-top: 0.5rem; font-size: 0.9375rem; color: var(--fg-muted); }

.kw-titre-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; }
.kw-titre { margin: 0; }
details.group-manage { font-size: 0.9375rem; }
details.group-manage summary { cursor: pointer; color: var(--fg-muted); }
details.group-manage summary:hover { color: var(--fg); }
.manage-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.manage-row input[type="text"] { width: auto; flex: 1; min-width: 160px; }

/* La liste des mots-cles, en tableau : une ligne par mot-cle, la portee
   en gris, le retrait en texte discret a droite. */
.kw-list { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--border-light); }
.kw-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
  margin: 0;
}
.kw-list .keyword-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.kw-list form { margin-left: auto; }
.kw-portee { color: var(--fg-muted); font-size: 0.875rem; }
.kw-tag { color: var(--fg-subtle); font-size: 0.875rem; }
.kw-inactif .keyword-text { color: var(--fg-muted); }
.empty-state { color: var(--fg-muted); padding: 0.75rem 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); margin-bottom: 1.5rem; }

/* La bulle de conseil, sous le champ, le temps de la saisie. */
.kw-advice {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  color: var(--fg-muted);
  font-size: 0.9375rem;
}
.kw-advice-lead { margin-bottom: 0.4rem; }
.kw-advice-list { list-style: none; padding: 0; margin: 0; }
.kw-advice-list li { margin: 0.15rem 0; }
.kw-advice-list code { color: var(--fg); margin-right: 0.4rem; }

/* Le cadre de saisie : une phrase, trois onglets, un panneau. Les
   onglets se distinguent de ceux des groupes : pas de barre entre eux,
   l'actif est souligné par la couleur d'accent. */
.kw-intro { margin: 0 0 1rem; color: var(--fg-muted); font-size: 0.9375rem; }
.kw-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--border);
}
.kw-onglet {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.35rem 0;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--fg-muted);
  cursor: pointer;
}
.kw-onglet:hover { color: var(--fg); }
.kw-onglet.active { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.kw-panneau-aide { margin: 0 0 0.75rem; color: var(--fg-muted); font-size: 0.9375rem; }
.kw-adresse-champs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }
.kw-adresse-champs > span { display: block; }
.kw-adresse-voie { flex: 1 1 200px; }
.kw-adresse-numero { flex: 0 0 90px; }
.kw-adresse-bas { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.kw-adresse-bas select { width: auto; max-width: 100%; }

#kw-panneau-liste textarea { font-size: 0.9375rem; }
.kw-import-bas { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.kw-import-bas select { width: auto; max-width: 100%; }
.kw-import-bas .kw-desordre { margin: 0; }

/* L'historique des alertes : un tableau, une ligne par e-mail. */
table.alertes { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.alertes th { text-align: left; font-weight: 600; padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--border); }
table.alertes td { vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--border-light); }
table.alertes td:first-child { white-space: nowrap; }
table.alertes td:last-child { white-space: nowrap; }

.equipe-nom { max-width: 440px; margin-bottom: 1rem; }
.membres { margin-bottom: 1rem; }
details.equipe-supprimer { display: inline-block; margin-left: 1rem; }
details.equipe-supprimer summary { cursor: pointer; color: var(--fg-muted); }
details.equipe-supprimer summary:hover { color: var(--danger); }
details.equipe-supprimer p { margin: 0.75rem 0; }

.kw-pied { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border-light); font-size: 0.9375rem; }

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

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 1.5rem; }
  .inline-form { flex-direction: column; }
  .inline-form .btn { width: 100%; }
  .kw-titre-ligne { flex-direction: column; align-items: flex-start; }
}