/*
 * base.css -- Reset, variables CSS, typographie, utilitaires
 * Commune de Silly -- Theme custom
 *
 * Source de verite pour les design tokens CSS.
 * Les couleurs et fonts viennent de brand/charte.md,
 * les valeurs de design (ombres, radius, transitions) viennent du template Routena.
 *
 * @package Silly
 */

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  /* -- Couleurs des 7 piliers -- */
  --color-nature: #5AC1DA;
  --color-ruralite: #80C242;
  --color-culture: #336D94;
  --color-qualite-vie: #349980;
  --color-sport-jeunesse: #161B88;
  --color-patrimoine: #FF8001;
  --color-social: #B0024C;

  /* -- Palette fonctionnelle -- */
  --color-primary: #336D94;
  --color-primary-dark: #264f6e;

  /*
   * Déclinaisons « encre » de la couleur primaire.
   *
   * --color-primary et --color-primary-dark servent aux aplats (boutons,
   * barres, pastilles). Plusieurs couleurs de service sont trop claires pour
   * être lisibles EN TEXTE sur fond blanc ou #F7F8FA (Sports #5AC1DA : 1,96:1 ;
   * Travaux #FF8001 : 2,37:1 ; Espaces verts #80C242 : 2,03:1…), très en
   * dessous des 4,5:1 exigés par WCAG 2.2 AA.
   *
   * --color-primary-ink      : teinte de la même couleur, lisible en texte
   *                            sur fond clair (>= 4,6:1 sur #F7F8FA)
   * --color-primary-ink-dark : version plus foncée pour l'état survolé
   *
   * Par défaut elles valent les couleurs primaires (le bleu #336D94 passe
   * déjà) : aucun changement visuel sur les pages non thématisées. Chaque
   * service dont la couleur est trop claire les redéfinit (cf. pages/service.css).
   */
  --color-primary-ink: var(--color-primary);
  --color-primary-ink-dark: var(--color-primary-dark);

  --color-secondary: #349980;
  --color-accent: #FF8001;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F8FA;
  --color-bg-dark: #1A1A2E;
  --color-text: #1A1A1A;
  --color-text-secondary: #555555;
  --color-text-light: #FFFFFF;
  --color-border: #E0E0E0;

  /* -- Couleur urgence (numéros d'urgence, alertes) -- */
  --color-urgence: #D92027;
  --color-urgence-dark: #B31B21;

  /* -- Couleurs services -- */
  --color-cpas: #52016A;
  --color-cpas-pcs: #F20017;
  --color-arts-culture: #161B88;
  --color-biblioludo: #B0024C;
  --color-environnement: #A3B909;
  --color-petite-enfance: #336D94;
  --color-mobilite: #34991C;
  --color-slowfood: #EE0F0D;
  --color-sports: #5AC1DA;
  --color-travaux-voiries: #FF8001;
  --color-travaux-espaces-verts: #80C242;
  --color-travaux-batiments: #40680D;
  --color-ccca: #01747F;
  --color-cittaslow: #349980;
  --color-tourisme: #0B8A9C;
  --color-bien-etre-animal: #349980;

  /* -- Couleurs specifiques carte interactive (categories sans couleur de charte dediee) -- */
  --color-carte-hebergement: #7B4FAE; /* violet */
  --color-carte-acteurs-sf: #8D6E2F;  /* brun terroir */

  /* -- Typographie -- */
  --font-heading: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, sans-serif;

  /* -- Spacing (echelle modulaire) -- */
  --space-xs: 0.44rem;
  --space-sm: 0.67rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.38rem;
  --space-3xl: 5.06rem;

  /* -- Layout -- */
  --content-width: 800px;
  --wide-width: 1200px;
  --container-max: 1280px;
  --container-padding: 24px;
  --section-padding: 112px;
  --block-gap: 24px;
  --header-height: 80px;
  /* Site communal : plus de top-bar (0px). Le sous-site CPAS la rétablit à 40px
     via `body.is-cpas` ci-dessous (bandeau mauve « Retour au site de la Commune »). */
  --top-bar-height: 0px;
  --total-header-height: calc(var(--top-bar-height) + var(--header-height));

  /* -- Effects -- */
  --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.08);
  --shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.12);
  --shadow-header: 0 2px 20px rgba(0, 0, 0, 0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 100px;

  /* -- Transitions -- */
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* Sous-sites CPAS et PCDR : conservent la top-bar (40px) et l'offset header associé.
   `--total-header-height` est redéclaré ici pour être recalculé avec le
   `--top-bar-height` local (sinon il garde la valeur déjà calculée sur :root). */
body.is-cpas,
body.is-pcdr {
  --top-bar-height: 40px;
  --total-header-height: calc(var(--top-bar-height) + var(--header-height));
}

/* ============================================
   RESET MINIMAL
   ============================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Toute cible d'ancre s'arrête SOUS l'en-tête fixe : une adresse avec ancre
   (/slow-food/#repertoire depuis Économie locale, /contact/#contact-form)
   posait le titre visé sous l'en-tête, et un champ qui reçoit le focus au
   clavier y disparaissait (WCAG 2.4.11). Sur la cible et non sur `html`
   (scroll-padding) : les composants qui ont déjà leur scroll-margin-top ne
   doublent pas l'écart. Revue du 24 sept. 2026. */
[id] {
  scroll-margin-top: calc(var(--total-header-height, 80px) + 24px);
}

/* Le selecteur `html body` (specificite 0,0,2) bat la regle inline
   `body { font-size: var(--wp--preset--font-size--medium) }` (20px) injectee
   par WordPress via theme.json/global-styles, qui sinon force tout le corps
   de texte herite a 20px. La taille de corps standard du site est 1rem (16px). */
html body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-base);
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================
   FOCUS VISIBLE (accessibilite)
   ============================================ */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Sur les fonds SOMBRES — bandeaux de titre, bandeaux d'appel, pied de page,
   bandeau du haut, en-tête de Sillya —, l'anneau est blanc : de la couleur du
   service, il était invisible sur un aplat de cette même couleur (revue du
   24 sept. 2026). */
.page-hero :focus-visible,
[class*="__hero"] :focus-visible,
.cta-banner :focus-visible,
.site-footer :focus-visible,
.top-bar :focus-visible,
.chatbot__header :focus-visible,
.carte__sidebar-header :focus-visible {
  outline-color: var(--color-text-light);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   SKIP LINK (accessibilite)
   ============================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: var(--space-sm) var(--space-md);
  /* Encre foncée plutôt que --color-primary : sur les pages de service aux
     couleurs claires (Sports #5AC1DA, Espaces verts #80C242…), le texte blanc
     du lien d'évitement retombait à 2,1:1. */
  background: var(--color-primary-ink-dark);
  color: var(--color-text-light);
  font-weight: 600;
  transition: top var(--transition-base);
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

h1 {
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h2 {
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

h5 {
  font-size: 1.125rem;
  line-height: 1.3;
}

h6 {
  font-size: 1rem;
  line-height: 1.4;
}

p {
  margin-bottom: var(--space-md);
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 700;
}

small {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ============================================
   LIENS
   ============================================ */
a:not([class]) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:not([class]):hover {
  color: var(--color-primary-ink-dark);
}

/* ============================================
   LAYOUT : CONTAINER
   ============================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container--wide {
  max-width: 1905px;
  margin: 0 auto;
}

.container--narrow {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ============================================
   SCREEN READER ONLY
   ============================================ */
.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;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */
@media (max-width: 768px) {
  /* En mobile, la top-bar (communale, CPAS ou PCDR) est cachée : offset ramené à 0. */
  :root,
  body.is-cpas,
  body.is-pcdr {
    --top-bar-height: 0px;
    --total-header-height: var(--header-height);
  }

  h1 {
    font-size: 2.25rem;
    line-height: 1.1;
  }

  h2 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.2;
  }

  h4 {
    font-size: 1.125rem;
    line-height: 1.3;
  }
}

/* ============================================
   CHAMPS DE SAISIE : 16 PX SUR TÉLÉPHONE
   Safari iOS agrandit la page dès qu'on touche un champ écrit sous 16 px, et
   ne la rétrécit pas ensuite : filtres de l'agenda (14 px), formulaires de
   contact (15 px), recherche, répertoire du patrimoine, recherche de la carte
   (revue du 24 sept. 2026). Le :not(#silly-jamais) donne à la règle le poids
   d'un identifiant, pour passer devant les règles à classe des composants
   sans !important ; aucun élément ne porte cet identifiant.
   ============================================ */
@media (max-width: 768px) {
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="hidden"], [type="file"], [type="color"]), select, textarea):not(#silly-jamais) {
    font-size: 16px;
  }
}