/* ============================================================
   SYSTÈME TYPOGRAPHIQUE — source unique des styles de texte
   ============================================================
   Chargé EN DERNIER (enqueue priorité 20) → ces règles de CATÉGORIE surchargent les styles
   par composant. Pour changer une catégorie sur TOUT le site : modifier ICI (taille via token,
   police, graisse, espacement, casse). MOBILE = redéfinir les tokens dans le @media en bas :
   tout le site suit automatiquement.
   Exclus volontairement (styles propres conservés) : l'accueil (home.css, grille éditoriale
   fluide déjà réglée), les pages légales (legal.css, !important), la métabox admin, les icônes. */

:root {
  --fs-hero:    40px;  /* grand titre « bientôt disponible » (annuaire / bibliothèque) */
  --fs-display: 32px;  /* nom du site */
  --fs-h1:      28px;  /* titre de page / de fiche */
  --fs-h2:      22px;  /* sous-titre */
  --fs-h3:      18px;  /* petit titre */
  --fs-body:    13px;  /* corps de lecture */
  --fs-body-sm: 13px;  /* corps secondaire */
  --fs-caption: 12px;  /* légende / métadonnée */
  --fs-label:   11px;  /* étiquette (majuscules) */
  --fs-btn:     12px;  /* bouton */
  /* Texte des TUILES/VIGNETTES sur média — partagé accueil + vignettes projet atlas (= harmonie) */
  --fs-tile-title: clamp(14px, 1.2vw, 24px);
  --fs-tile-sub:   clamp(10px, 0.75vw, 13px);
}

/* ---------------- TITRES (Gambetta) ---------------- */

/* GRAND TITRE — annonce temporaire */
.bibliotheque-soon-title,
.annuaire-soon-title {
  font-family: "Gambetta", sans-serif; font-size: var(--fs-hero);
  font-weight: bold; letter-spacing: 0.03em; color: var(--color-text);
}

/* DISPLAY — nom du site */
.site-title a {
  font-family: "Gambetta", sans-serif; font-size: var(--fs-display);
  font-weight: 400; letter-spacing: 1px; text-transform: lowercase; color: var(--color-text);
}

/* TITRE 1 — titres de page / fiche */
.titre1, .event-titre, .compte-title, .compte-fav-group-title, .compte-orga-col-title,
.compte-folder-title, .connexion-title, .archi-hint-title, .quiz-title,
.manifeste-title, .contact-title, .company-name {
  font-family: "Gambetta", sans-serif; font-size: var(--fs-h1);
  font-weight: bold; letter-spacing: 0.03em; text-transform: none; color: var(--color-text);
}

/* TITRE 2 — sous-titres */
.spr-confirm-title {
  font-family: "Gambetta", sans-serif; font-size: var(--fs-h2);
  font-weight: bold; letter-spacing: 0.03em; color: var(--color-text);
}

/* TITRE 3 — petits titres (Gambetta, minuscules) */
.similar-title,
.event-vignettes .similar-title {
  font-family: "Gambetta", sans-serif; font-size: var(--fs-h3);
  font-weight: 400; letter-spacing: 0.03em; text-transform: lowercase; color: var(--color-text);
}

/* ---------------- TEXTES (Archivo) ---------------- */

/* CORPS — texte de lecture */
.project-description, .event-description, .contact-intro, .connexion-subtitle,
.quiz-explanation, .company-desc, .company-empty, .my-section-desc,
.no-results p, .agenda-empty p, .annuaire-soon-text, .bibliotheque-soon-text {
  font-family: "Archivo", sans-serif; font-size: var(--fs-body); font-weight: 400;
}

/* CORPS PETIT — texte secondaire */
.mini-info, .acf-label, .acf-value, .criteria-label, .manifeste-info1, .manifeste-list li,
.reg-consent-label span, .connexion-register-hint, .quiz-option {
  font-family: "Archivo", sans-serif; font-size: var(--fs-body-sm); font-weight: 400;
}

/* LÉGENDE — captions / métadonnées (couleur muted) */
.footer-copy, .photo-credit, .agenda-card-date, .popup-date, .criteria-desc, .spr-criteria-desc,
.compte-profil-since, .company-address, .connexion-sent-hint {
  font-family: "Archivo", sans-serif; font-size: var(--fs-caption); color: var(--color-muted);
}

/* Légendes sur média (nom d'agence / photographe sur vignette atlas, nom de dossier de favoris) —
   agrandies pour la lisibilité ; couleur (blanc) et graisse propres CONSERVÉES → on ne touche
   qu'à la taille. */
.compte-folder-name,
.compte-view .compte-folder-name {
  font-size: var(--fs-body-sm);
}

/* ÉTIQUETTE — petites majuscules (couleur laissée au composant : muted / orange / blanc) */
.section-title, .reg-field label, .su-label, .my-section-title, .spr-team-group-title,
.spr-dp-section-title, .spr-drawing-type-title, .spr-criteria-section-title,
.compte-subsection-title, .event-type, .event-organizer, .manifeste-h2, .company-section-title,
.quiz-aside-title, .project-dropdown-trigger, .company-type-tag, .agenda-card-type, .popup-type {
  font-family: "Archivo", sans-serif; font-size: var(--fs-label);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
}

/* Étiquettes de SECTION → 13px comme l'accueil (et non 11px comme les micro-labels de
   formulaire) : « Vos dossiers » / « En vrac » (favoris) + « Publiés / Brouillons / En
   attente / Non publiés » (publications). */
.compte-subsection-title,
.my-section-title { font-size: 13px; }

/* BOUTON — CTA (fond/couleur laissés au composant) */
.compte-submit-btn, .connexion-btn-submit, .connexion-btn-ok, #spr-btn-next, #spr-btn-submit,
.su-btn-next, .su-btn-prev, .event-cta, .agenda-submit-inline, .contact-submit, .archi-hint-ok,
.compte-edit-btn, .quiz-next, .quiz-project-link, .quiz-outro-cta, .restart-button,
.company-join-btn {
  font-family: "Archivo", sans-serif; font-size: var(--fs-btn);
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}

/* ============================================================
   MOBILE — on ne touche QUE les tokens : tout le système s'adapte.
   (petits textes agrandis pour la lisibilité, titres légèrement réduits pour tenir)
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --fs-hero:    30px;
    --fs-display: 26px;
    --fs-h1:      24px;
    --fs-h2:      20px;
    --fs-h3:      17px;
    --fs-body:    14px;
    --fs-body-sm: 14px;
    --fs-caption: 13px;
    --fs-label:   12px;
    --fs-btn:     13px;
    --fs-tile-title: clamp(17px, 4.6vw, 24px);
    --fs-tile-sub:   14px;
  }
}