/* findmyemotion.com : la feuille du guide (guide/CLAUDE.md, docs/SITE-FINDMYEMOTION.md).
   Tirée de la maquette approuvée le 2026-10-14 (docs/design/maquettes/guide/guide.css) : les fondations sont
   celles de site/styles.css (couleurs, police, en-tête, pied, cartes), les composants du guide viennent après.
   Aucun style en ligne dans les pages : la politique de sécurité du site les refuse.
   Règle de couleur : un bloc à fond d'encre, c'est l'app qui parle ; le guide, lui, est sur fond blanc. */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/fonts/nunito-latin.woff2') format('woff2');
}

:root {
  color-scheme: light;

  --fond: #EDF0EE;
  --encre: #1B2B2B;
  --secondaire: #4F5E5C;
  --surface: #FFFFFF;
  --attenuee: #F3F5F4;
  --sur-encre: #C9D2D0;
  --filet: #DDE2E0;
  --survol: #3A4A4A;

  --gouttiere: clamp(16px, 4vw, 24px);
  --entre-sections: clamp(56px, 7vw, 88px);
}

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

html { background: var(--fond); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: ui-rounded, 'SF Pro Rounded', Nunito, 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--encre); }
a:hover { color: var(--survol); }
a:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }

/* ---------- Annonce : qui écrit, sur chaque page, avant tout le reste ---------- */

.annonce {
  margin: 0;
  padding: 10px var(--gouttiere);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  color: var(--secondaire);
}
.annonce a { font-weight: 700; white-space: nowrap; }

/* ---------- En-tête ---------- */

.entete {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px var(--gouttiere);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.marque, .marque:hover {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--encre);
  text-decoration: none;
}
.marque img { display: block; width: 36px; height: 36px; }
.marque span { font-size: 19px; font-weight: 800; line-height: 1.1; }
.entete nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lien-nav, .lien-nav:hover {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.langue, .langue:hover {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- Pied de page ---------- */

.pied {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gouttiere) 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 32px;
  font-size: 15px;
  color: var(--secondaire);
}
.pied-contact { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
.pied nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.pied a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------- Éléments communs ---------- */

.bouton, .bouton:hover {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 16px;
  background: var(--encre);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
}
.bouton-grand { min-height: 56px; }
.bouton-inverse, .bouton-inverse:hover { background: var(--surface); color: var(--encre); }

.lien-seul { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

.surtitre { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--secondaire); }
.petit-titre { font-size: 13px; font-weight: 700; color: var(--secondaire); }

.section { max-width: 1120px; margin: 0 auto var(--entre-sections); padding: 0 var(--gouttiere); }
.section-derniere { margin-bottom: clamp(40px, 5vw, 64px); }
.section[id], .facon[id] { scroll-margin-top: 16px; }

.titre-section {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.intro { max-width: 700px; margin-bottom: 32px; }
.sous-titre { margin: 12px 0 0; font-size: 18px; color: var(--secondaire); }

.numero {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--encre);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

/* La référence d'une étude, sous la phrase qui la résume. */
.source { margin: 0; font-size: 14px; color: var(--secondaire); }
.source a { font-weight: 700; }

/* ---------- Accueil : ouverture ---------- */

.ouverture {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px var(--gouttiere) var(--entre-sections);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 48px;
}
.ouverture-texte {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.etiquette {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 700;
  color: var(--secondaire);
}
.titre-accueil {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.chapeau-accueil { margin: 0; max-width: 540px; font-size: 19px; line-height: 1.5; color: var(--secondaire); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
.actions .lien-seul { font-size: 16px; }

/* Les sept questions, en table des matières. */
.index {
  flex: 1 1 400px;
  min-width: 0;
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: 28px;
  background: var(--surface);
}
.index ol { list-style: none; margin: 8px 0 0; padding: 0; }
.index li + li { border-top: 1px solid var(--filet); }
.index a, .index a:hover {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 8px 0;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

/* ---------- Accueil : pourquoi mettre un mot ---------- */

.preuves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.preuve {
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: 24px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preuve h3 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; }
.preuve p { margin: 0; color: var(--secondaire); }
.preuve .source { margin-top: auto; padding-top: 6px; }
.preuve-large { grid-column: 1 / -1; }

/* ---------- Accueil : les cinq marches ---------- */

.marches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 12px;
}
.marche {
  padding: 18px;
  border-radius: 20px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.marche-points { display: flex; gap: 5px; }
.marche-points span { width: 10px; height: 10px; border-radius: 50%; background: var(--filet); }
.marche-points .plein { background: var(--encre); }
.marche-nom { font-size: 19px; font-weight: 800; line-height: 1.2; }
.marche-exemple { margin: 0; font-size: 16px; color: var(--secondaire); }
.apres-marches { max-width: 760px; margin: 24px 0 0; color: var(--secondaire); }
.apres-marches + .source { margin-top: 8px; }

/* ---------- Accueil : les sept façons ---------- */

.facons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.facon {
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: 28px;
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
}
.facon-tete { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.facon-corps { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.facon-nom { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--secondaire); }
.facon h3 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}
.pictogramme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--attenuee);
}
.facon-bloc { display: flex; flex-direction: column; gap: 4px; }
.facon-bloc p { margin: 0; }
.facon-bloc .recherche { color: var(--secondaire); }

/* L'app, dans le guide : toujours une pastille d'encre devant. */
.ligne-app { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 16px; }
.pilule-app {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--encre);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* ---------- Le bloc de l'app : fond d'encre ---------- */

.bloc-app {
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: 28px;
  background: var(--encre);
  color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 48px;
}
.bloc-app-texte { flex: 2 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.bloc-app .surtitre { margin: 0; color: var(--sur-encre); }
.bloc-app .titre-section { color: #FFFFFF; }
.bloc-app p { margin: 0; font-size: 18px; color: var(--sur-encre); }
.bloc-app a { color: #FFFFFF; }
.bloc-app .actions { margin-top: 4px; }
.bloc-app-image { flex: 1 1 220px; min-width: 0; display: flex; justify-content: center; }
.telephone { width: min(100%, 230px); padding: 8px; border-radius: 40px; background: var(--survol); }
.telephone img { display: block; width: 100%; height: auto; aspect-ratio: 780 / 1694; border-radius: 32px; }

/* ---------- Diagnostic et qui écrit ---------- */

.deux-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 20px; }
.carte {
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: 28px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.carte h2 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; line-height: 1.15; }
.carte p { margin: 0; color: var(--secondaire); }
.encadre-aide {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--attenuee);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.encadre-aide p { margin: 0; color: var(--secondaire); }
.encadre-aide .encadre-aide-titre { font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--encre); }

.definitions { margin: 0; display: flex; flex-direction: column; }
.definitions > div { display: flex; flex-wrap: wrap; gap: 2px 24px; padding: 12px 0; border-top: 1px solid var(--filet); }
.definitions > div:last-child { padding-bottom: 0; }
.definitions dt { flex: 0 0 120px; font-weight: 800; }
.definitions dd { flex: 1 1 240px; min-width: 0; margin: 0; color: var(--secondaire); }

/* ---------- Page d'une façon ---------- */

.page-texte { max-width: 760px; margin: 0 auto; padding: 16px var(--gouttiere) 64px; }
.fil { margin: 0 0 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 15px; color: var(--secondaire); }
.fil a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.page-texte h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.chapeau { margin: 12px 0 28px; font-size: 19px; color: var(--secondaire); }
.pile { display: flex; flex-direction: column; gap: 16px; }
.carte-texte {
  padding: clamp(20px, 3vw, 28px);
  border-radius: 24px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.carte-texte h2 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; }
.carte-texte p { margin: 0; color: var(--secondaire); }
.carte-texte ol, .carte-texte ul { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.carte-texte ul { color: var(--secondaire); }
.libelle { font-weight: 800; color: var(--encre); }
.une-phrase { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--encre); }
.carte-texte .une-phrase { color: var(--encre); }
.duree {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--fond);
  font-size: 13px;
  font-weight: 700;
  color: var(--secondaire);
}
.titre-et-pilule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* Le plan agréable × agité : quatre zones grises, jamais quatre couleurs (ROADMAP, « Lisibilité de la carte »). */
.plan { display: flex; flex-direction: column; gap: 6px; }
.plan-axe { font-size: 13px; font-weight: 700; text-align: center; color: var(--secondaire); }
.plan-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zone {
  padding: 14px;
  border-radius: 14px;
  background: var(--attenuee);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zone strong { font-size: 18px; font-weight: 800; }
.zone span { font-size: 14px; line-height: 1.4; color: var(--secondaire); }
.zone em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--secondaire); }
.plan-legende { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--secondaire); }

/* Une étude : ce qu'elle montre, puis sa référence. */
.etudes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.etude { padding: 14px 0; border-top: 1px solid var(--filet); display: flex; flex-direction: column; gap: 6px; }
.etude:first-child { border-top: 0; padding-top: 0; }
.etude:last-child { padding-bottom: 0; }
.etude p { margin: 0; }

/* L'encadré de l'app dans une page : fond d'encre, comme le bloc de l'accueil. */
.encadre-app {
  padding: clamp(20px, 3vw, 28px);
  border-radius: 24px;
  background: var(--encre);
  color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 32px;
}
.encadre-app-texte { flex: 2 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.encadre-app h2 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; }
.encadre-app p { margin: 0; color: var(--sur-encre); }
.encadre-app .surtitre { margin: 0; color: var(--sur-encre); }
.encadre-app a { color: #FFFFFF; }
.encadre-app-image { flex: 1 1 160px; display: flex; justify-content: center; }
.encadre-app .telephone { width: min(100%, 170px); padding: 6px; border-radius: 30px; }
.encadre-app .telephone img { border-radius: 24px; }

.liste-sources { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--secondaire); }
.liste-sources cite { font-style: italic; }
.liste-sources a { overflow-wrap: anywhere; }
.mise-a-jour { margin: 0; font-size: 15px; color: var(--secondaire); }

/* La personne responsable des renseignements personnels (Confidentialité), comme sur emotion-wheel.com. */
.case-grise {
  font-style: normal;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--attenuee);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.case-grise strong { font-weight: 800; }
.case-grise a { align-self: flex-start; }

.suite { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.suite a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }