/* ============================================================
   DESIGN SYSTEM Cercles : variables uniques, remplies depuis DESIGN.md.
   Règle : AUCUNE couleur/taille/police en dur dans le reste du CSS.
   ============================================================ */
:root {
  /* Couleurs (DESIGN.md §4) : neutres teintés de violet, de l'encre au papier */
  --couleur-encre: #15132c;
  --couleur-fond: #f9f8fd;
  --couleur-surface: #f1eff9;
  --couleur-bordure: #dcd9ec;
  --couleur-texte: var(--couleur-encre);
  --couleur-texte-secondaire: #56537a;
  --couleur-texte-sur-sombre: #f9f8fd;
  --couleur-texte-sur-sombre-secondaire: #b9b5d6;

  /* Les deux couleurs du client. Le dégradé n'existe qu'à DEUX endroits :
     le logo et le bouton d'action principal (DESIGN.md §8). */
  --couleur-bleu: #2563eb;
  --couleur-violet: #9333ea;
  --degrade-signature: linear-gradient(135deg, var(--couleur-bleu), var(--couleur-violet));

  /* L'indigo médian, à mi-chemin des deux couleurs du client : liens, focus,
     marqueur « vous êtes ici », bordure du champ actif */
  --couleur-accent: #5c4beb;
  --couleur-accent-contraste: #ffffff;
  --couleur-anneau-sur-sombre: rgba(249, 248, 253, 0.16);

  /* États */
  --couleur-succes: #1b7f4c;
  --couleur-attention: #8a5200;
  --couleur-erreur: #c2352b;

  /* Anneaux de portrait des experts, attribués par domaine (DESIGN.md §6) */
  --couleur-anneau-rose: #f472b6;
  --couleur-anneau-violet: #c084fc;
  --couleur-anneau-ciel: #0ea5e9;

  /* Typographie (DESIGN.md §3) */
  --police-titres: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --police-texte: "Now", "Helvetica Neue", Arial, system-ui, sans-serif;
  --taille-xs: 0.8125rem;
  --taille-s: 0.9375rem;
  --taille-base: 1rem;
  --taille-m: 1.25rem;
  --taille-l: 1.625rem;
  --taille-xl: 2.25rem;
  --taille-xxl: clamp(2.75rem, 6vw, 4.5rem);
  --taille-hero: clamp(3.25rem, 11vw, 7rem);
  --graisse-legere: 300;
  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-titre: 600;
  --interlettrage-serre: -0.03em;
  --interlettrage-large: 0.18em;
  --interligne-texte: 1.6;
  --interligne-titre: 1.1;

  /* Espacements */
  --espace-xs: 0.25rem;
  --espace-s: 0.5rem;
  --espace-m: 1rem;
  --espace-l: 2rem;
  --espace-xl: 4rem;
  --espace-xxl: 7rem;

  /* Rayons et largeurs */
  --rayon-s: 0.375rem;
  --rayon: 0.75rem;
  --rayon-pilule: 999px;
  --hauteur-bouton: 2.75rem;
  --padding-bouton: 1.375rem;
  --taille-marque: 2rem;
  --taille-case: 1.125rem;
  --largeur-max: 72rem;
  --largeur-texte: 38rem;
  --largeur-menu-compte: 14rem;

  /* Traits */
  --epaisseur-filet: 1px;
  --epaisseur-contour: 1.5px;
  --epaisseur-focus: 2px;
  --epaisseur-marqueur: 2px;
  --decalage-focus: 3px;

  /* Anneaux décoratifs du hero (DESIGN.md §5) */
  --hero-anneau-grand: 42rem;
  --hero-anneau-petit: 22rem;
  --hero-hauteur: min(72vh, 44rem);

  /* Motion (DESIGN.md §7) */
  --duree-instant: 80ms;
  --duree-courte: 150ms;
  --courbe: ease-out;
  --luminosite-survol: 1.06;
  --descente-clic: 1px;
}

/* Polices self-hosted (sources et licences OFL dans contenu/polices) : Jost en
   variable, sous-ensemble latin ; Now en trois graisses. Chemins absolus : la
   feuille est aussi chargée par la page hors ligne depuis n'importe quelle URL. */
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Now";
  src: url("/fonts/now-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Now";
  src: url("/fonts/now-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Now";
  src: url("/fonts/now-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

/* L'attribut `hidden` pilote les états d'une application (écran affiché, bouton
   disponible…). Sans cette règle, la moindre classe qui fixe `display` l'emporte sur
   la feuille du navigateur et l'élément « caché » reste visible, voir PIEGES.md E1.
   C'est la seule justification acceptable d'un `!important` dans nos feuilles. */
[hidden] {
  display: none !important;
}

html {
  background: var(--couleur-fond);
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--taille-base);
  font-weight: var(--graisse-normale);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
  line-height: var(--interligne-texte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--police-titres);
  font-weight: var(--graisse-moyenne);
  line-height: var(--interligne-titre);
  letter-spacing: var(--interlettrage-serre);
}

p {
  max-width: var(--largeur-texte);
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--couleur-accent);
  color: var(--couleur-accent-contraste);
}

/* ---------- Focus : deux expressions (DESIGN.md §6) ----------
   Ce qui se commande porte l'anneau ; ce dans quoi on tape n'en porte aucun, sa
   bordure change de teinte. Les cases et boutons radio restent des commandes. */
:focus-visible {
  outline: var(--epaisseur-focus) solid var(--couleur-accent);
  outline-offset: var(--decalage-focus);
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--couleur-accent);
}

/* ---------- Boutons pilule (DESIGN.md §6) ----------
   Une classe de base, trois variantes. Le dégradé n'existe que sur le principal,
   un seul par écran, et sur le logo : nulle part ailleurs (DESIGN.md §8). */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hauteur-bouton);
  min-width: var(--hauteur-bouton);
  padding: 0 var(--padding-bouton);
  border: var(--epaisseur-contour) solid transparent;
  border-radius: var(--rayon-pilule);
  font-family: var(--police-texte);
  font-size: var(--taille-s);
  font-weight: var(--graisse-moyenne);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.bouton:active {
  transform: translateY(var(--descente-clic));
}

.bouton-principal {
  background: var(--degrade-signature);
  color: var(--couleur-accent-contraste);
}

.bouton-principal:hover {
  filter: brightness(var(--luminosite-survol));
}

/* Contour et texte prennent la couleur du contexte : encre sur fond clair,
   texte clair sur un aplat sombre, sans règle supplémentaire. */
.bouton-secondaire {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.bouton-secondaire:hover {
  background: var(--couleur-surface);
}

.bouton-discret {
  padding: 0;
  min-width: 0;
  background: transparent;
  color: var(--couleur-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--epaisseur-marqueur);
  text-underline-offset: var(--decalage-focus);
}

/* ---------- Marqueur « vous êtes ici » (DESIGN.md §6) ----------
   Un seul pour toute l'application : entrée de navigation courante, onglet actif,
   ligne choisie, créneau retenu. Un contour qui fait le tour, en inset pour ne
   décaler aucun voisin, suivant le rayon de l'élément. Jamais de filet à gauche. */
[aria-current="page"] {
  box-shadow: inset 0 0 0 var(--epaisseur-marqueur) var(--couleur-accent);
}

/* ---------- La marque : disque du logo et wordmark en capitales tapées ---------- */
.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-s);
  font-family: var(--police-titres);
  font-weight: var(--graisse-legere);
  font-size: var(--taille-m);
  letter-spacing: var(--interlettrage-large);
  line-height: 1;
  color: inherit;
  text-decoration: none;
}

.marque img {
  width: var(--taille-marque);
  height: var(--taille-marque);
}

/* ---------- Header / navigation (DESIGN.md §5) ----------
   Sur le papier, non collant, un filet en bas ; même colonne que le hero et le footer. */
.site-header {
  background: var(--couleur-fond);
  border-bottom: var(--epaisseur-filet) solid var(--couleur-bordure);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espace-m);
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--espace-m) var(--espace-l);
}

.nav-logo {
  min-height: var(--hauteur-bouton);
  border-radius: var(--rayon-pilule);
}

/* Le burger n'existe qu'en mobile (bloc @media en fin de feuille). */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--hauteur-bouton);
  height: var(--hauteur-bouton);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--rayon-pilule);
  color: var(--couleur-texte);
  cursor: pointer;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--espace-m);
}

.nav-lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--hauteur-bouton);
  padding: 0 var(--espace-m);
  border-radius: var(--rayon-pilule);
  font-size: var(--taille-s);
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-texte-secondaire);
  text-decoration: none;
}

.nav-lien:hover {
  color: var(--couleur-texte);
}

/* ---------- Hero : l'aplat d'encre et les anneaux (DESIGN.md §1 et §5) ----------
   Pleine largeur, contenu calé en bas à gauche de la colonne. Le padding latéral
   absorbe la marge de centrage pour que le fond déborde et que le texte, lui,
   reste dans --largeur-max. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: var(--hero-hauteur);
  padding: var(--espace-xxl) max(var(--espace-l), calc((100% - var(--largeur-max)) / 2 + var(--espace-l))) var(--espace-xl);
  background: var(--couleur-encre);
  color: var(--couleur-texte-sur-sombre);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: var(--epaisseur-filet) solid var(--couleur-anneau-sur-sombre);
  pointer-events: none;
}

.hero::before {
  width: var(--hero-anneau-grand);
  height: var(--hero-anneau-grand);
  right: calc(var(--hero-anneau-grand) / -3);
  top: calc(var(--hero-anneau-grand) / -5);
  border-width: var(--epaisseur-contour);
}

.hero::after {
  width: var(--hero-anneau-petit);
  height: var(--hero-anneau-petit);
  right: var(--espace-xl);
  bottom: calc(var(--hero-anneau-petit) / -2.5);
}

.hero h1 {
  font-size: var(--taille-hero);
  font-weight: var(--graisse-titre);
  line-height: 0.95;
  margin: 0 0 var(--espace-m);
}

/* Une page d'état (hors ligne, introuvable) n'a que le hero : il prend toute la fenêtre. */
main.hero {
  min-height: 100dvh;
}

.hero-point {
  color: var(--couleur-violet);
}

.hero p {
  font-size: var(--taille-m);
  line-height: 1.5;
  color: var(--couleur-texte-sur-sombre-secondaire);
  max-width: 34ch;
  margin: 0;
}

/* Le seul bouton principal de l'accueil, sous l'accroche, aligné à gauche. */
.hero .bouton {
  justify-self: start;
  margin-top: var(--espace-l);
}

/* Sur un aplat sombre, l'anneau de focus passe en texte clair : l'accent ne s'y
   verrait pas (DESIGN.md §6). */
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--couleur-texte-sur-sombre);
}

/* ---------- Footer (DESIGN.md §5) : sur l'encre, même colonne que le reste ---------- */
.site-footer {
  border-top: var(--epaisseur-filet) solid var(--couleur-anneau-sur-sombre);
  background: var(--couleur-encre);
  color: var(--couleur-texte-sur-sombre-secondaire);
  font-size: var(--taille-xs);
}

/* Même boîte que .nav (largeur et padding latéral) pour que les deux s'alignent. */
.footer-contenu {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--espace-l);
  align-items: start;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--espace-xl) var(--espace-l);
}

.footer-marque {
  display: grid;
  justify-items: start;
  gap: var(--espace-m);
}

.site-footer .marque {
  color: var(--couleur-texte-sur-sombre);
}

.footer-marque p,
.footer-copyright {
  margin: 0;
}

.footer-liens ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--espace-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-liens a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hauteur-bouton);
  color: inherit;
  text-decoration: none;
}

.footer-liens a:hover {
  color: var(--couleur-texte-sur-sombre);
}

.footer-copyright {
  grid-column: 1 / -1;
}

/* ---------- Colonne de contenu (DESIGN.md §5) ----------
   CENTRÉE dans la fenêtre, jamais collée à gauche : règle d'agence, un écran étroit
   posé à gauche laisse une demi-fenêtre vide sur un grand écran. C'est le bloc qui
   est centré, pas le texte, qui reste aligné à gauche. */
.colonne {
  max-width: var(--largeur-texte);
  margin-inline: auto;
  padding: var(--espace-xl) var(--espace-l);
}

.colonne h1 {
  font-size: var(--taille-xxl);
  font-weight: var(--graisse-titre);
  margin: 0 0 var(--espace-m);
}

.chapeau {
  font-size: var(--taille-m);
  line-height: 1.5;
  color: var(--couleur-texte-secondaire);
  margin: 0 0 var(--espace-l);
}

/* ---------- Champs de formulaire (DESIGN.md §6) ----------
   Le champ n'a PAS d'anneau de focus : sa bordure passe à l'accent, et c'est tout.
   Les deux règles sont déjà écrites plus haut, avant le premier formulaire.
   ⚠️ Le jour où un `<select>` prendra cette classe, il faudra en exclure les listes
   (`.champ:not(select)`) : on ne tape pas dans une liste, on l'ouvre, elle doit
   garder son anneau, et elle hériterait sinon de l'`outline: none` des saisies. */
.champ-groupe {
  display: grid;
  gap: var(--espace-xs);
}

.champ-libelle {
  font-size: var(--taille-s);
  font-weight: var(--graisse-moyenne);
}

.champ {
  width: 100%;
  min-height: var(--hauteur-bouton);
  padding: 0 var(--espace-m);
  background: var(--couleur-surface);
  border: var(--epaisseur-filet) solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-family: var(--police-texte);
  font-size: var(--taille-base);
  color: var(--couleur-texte);
}

.champ::placeholder {
  color: var(--couleur-texte-secondaire);
}

.formulaire {
  display: grid;
  gap: var(--espace-m);
}

.formulaire .bouton {
  justify-self: start;
}

/* Le piège à robots. Hors de l'écran plutôt qu'en `display: none`, qu'un automate
   sait reconnaître ; l'attribut `aria-hidden` et le `tabindex` négatif le retirent
   du parcours clavier et de l'arbre d'accessibilité. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.separateur {
  margin: var(--espace-m) 0;
  font-size: var(--taille-s);
  color: var(--couleur-texte-secondaire);
}

.bouton-google {
  gap: var(--espace-s);
}

.case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espace-s);
  align-items: start;
  padding-block: var(--espace-s);
  font-size: var(--taille-s);
}

.case input {
  width: var(--taille-case);
  height: var(--taille-case);
  margin: 0;
  accent-color: var(--couleur-accent);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-m);
  margin-top: var(--espace-l);
}

/* Le dépliant « L'email n'arrive pas ? ». Il grandit sur place et pousse ce qui le
   suit : rien au-dessus de lui ne doit être centré verticalement, sinon l'ouvrir
   remonterait le résumé qu'on vient de cliquer (PIEGES.md E32). */
.depliant {
  margin-top: var(--espace-l);
  padding-top: var(--espace-m);
  border-top: var(--epaisseur-filet) solid var(--couleur-bordure);
  font-size: var(--taille-s);
}

.depliant summary {
  display: flex;
  align-items: center;
  min-height: var(--hauteur-bouton);
  font-weight: var(--graisse-moyenne);
  cursor: pointer;
}

.depliant ul {
  margin: 0;
  padding-left: var(--espace-m);
  color: var(--couleur-texte-secondaire);
}

.depliant li {
  margin-top: var(--espace-s);
}

/* La zone d'état garde sa place, VIDE COMPRISE : elle parle à presque chaque geste,
   et une zone qui apparaît et disparaît dans le flux fait sauter tout ce qui la suit
   (PIEGES.md E22). Une ligne réservée, en `em` pour suivre la taille du texte, et
   jamais la hauteur du pire message. */
.message {
  min-height: calc(var(--interligne-texte) * 1em);
  margin: var(--espace-m) 0 0;
  font-size: var(--taille-s);
  color: var(--couleur-texte-secondaire);
}

.message[data-nature="erreur"] {
  color: var(--couleur-erreur);
}

/* ---------- Le compte dans le header : les initiales et leur menu ----------
   Un bouton rond sur la surface, cerclé d'un filet : le disque de la marque, à la
   taille d'un bouton. AUCUNE image de profil, ni ici ni ailleurs (PIEGES.md A14). */
.compte {
  position: relative;
}

.compte-bouton {
  width: var(--hauteur-bouton);
  height: var(--hauteur-bouton);
  padding: 0;
  background: var(--couleur-surface);
  border-color: var(--couleur-bordure);
  color: var(--couleur-texte);
}

.compte-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--espace-s));
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: var(--espace-s);
  min-width: var(--largeur-menu-compte);
  padding: var(--espace-m);
  background: var(--couleur-fond);
  border: var(--epaisseur-filet) solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.compte-email {
  margin: 0;
  font-size: var(--taille-xs);
  color: var(--couleur-texte-secondaire);
  word-break: break-all;
}

/* ---------- Motion : uniquement sans préférence de réduction (DESIGN.md §7) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .nav-lien,
  .footer-liens a {
    transition:
      color var(--duree-courte) var(--courbe),
      box-shadow var(--duree-courte) var(--courbe);
  }

  .bouton {
    transition:
      background-color var(--duree-courte) var(--courbe),
      filter var(--duree-courte) var(--courbe),
      transform var(--duree-instant);
  }

  input,
  textarea {
    transition: border-color var(--duree-courte) var(--courbe);
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 48rem) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Replié derrière le burger : app.js pose et retire `hidden` (même point de rupture). */
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: var(--espace-s);
    width: 100%;
    padding-bottom: var(--espace-s);
  }

  /* En colonne, le texte du lien s'aligne sur le logo. */
  .nav-lien {
    padding-inline: 0;
  }

  /* Dans le panneau du burger, le menu du compte reprend le flux : posé en
     absolu, il déborderait de la colonne étroite. */
  .compte-menu {
    position: static;
    width: 100%;
  }

  .colonne {
    padding-block: var(--espace-l);
  }

  .hero {
    padding-top: var(--espace-xl);
    padding-bottom: var(--espace-l);
  }

  .footer-contenu {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ÉCRAN « MON PROFIL » (feature 6)
   ============================================================ */

/* Une page de contenu ordinaire, par opposition au « hero » de l'accueil : même
   gouttière que le reste, largeur de lecture bornée pour que les libellés restent
   au-dessus de leur champ plutôt qu'à l'autre bout de l'écran. */
.page {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--espace-xl) var(--espace-l) var(--espace-xxl);
}

.page h1 {
  margin-bottom: var(--espace-l);
}

/* La pastille de photo, et l'avatar à initiales qui la remplace tant qu'il n'y en
   a pas (EX-PROF-001). Les deux ont exactement la même boîte, sinon la mise en
   page bougerait au moment où la photo arrive. */
.photo-pastille {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--degrade-signature);
  color: var(--couleur-texte-sur-sombre);
  font-family: var(--police-titres);
  font-size: var(--taille-l);
  font-weight: var(--graisse-moyenne);
  letter-spacing: 0.04em;
}

.photo-profil {
  object-fit: cover;
}

.champ-photo {
  display: flex;
  align-items: center;
  gap: var(--espace-l);
  flex-wrap: wrap;
}

/* Le bouton qui ouvre le sélecteur de fichier est un `<label>` : sans cette
   ligne il ne montrerait pas qu'il se clique. */
.champ-photo label.bouton {
  cursor: pointer;
}

/* La marge du bloc d'actions est faite pour séparer un formulaire de ses boutons.
   Dans la ligne de la photo, elle décalerait les boutons vers le bas. */
.champ-photo .actions {
  margin-top: 0;
}

/* Le texte d'aide sous un champ : la phrase qui dit POURQUOI, notamment pour
   l'adresse de connexion en lecture seule (bloc C5). */
.champ-aide {
  font-size: var(--taille-s);
  color: var(--couleur-texte-secondaire);
}

/* La zone de suppression de compte. Elle est séparée du formulaire par un filet
   et non par une couleur d'alarme : le danger est dans le bouton, pas dans la
   section, qu'on ne veut pas transformer en panneau rouge permanent. */
.zone-danger {
  margin-top: var(--espace-xxl);
  padding-top: var(--espace-l);
  border-top: var(--epaisseur-filet) solid var(--couleur-bordure);
}

.zone-danger h2 {
  margin-bottom: var(--espace-s);
}

.zone-danger p {
  color: var(--couleur-texte-secondaire);
}

/* Le seul bouton destructeur de l'application. Il porte la couleur d'erreur en
   fond plein, et pas seulement en texte : c'est ce qui le distingue au premier
   coup d'œil des trois autres boutons de la page. */
.bouton-danger {
  background: var(--couleur-erreur);
  color: var(--couleur-texte-sur-sombre);
  border-color: var(--couleur-erreur);
}

.bouton-danger:hover {
  filter: brightness(0.92);
}

.bouton-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

/* L'entrée « Mon profil » du menu du compte, qui est un lien au milieu de boutons. */
.compte-profil {
  display: block;
  padding: var(--espace-xs) 0;
}