/* =================================================================
   AI Weather V2 — socle.

   Les jetons reprennent la charte V1 telle qu'elle est réellement
   servie en production (relevés au 2026-09-23). Ils sont recopiés ici
   pour que la V2 ne dépende d'aucune feuille de la V1.

   Ce fichier ne contient que le socle : jetons, base typographique,
   en-tête, pied, gabarit de page, accessibilité. Les composants
   viendront en phase 2, un fichier par page.
   ================================================================= */

:root {
  /* Fonds */
  --page-bg:        #f4f8fd;
  --page-bg-alt:    #eaf2fb;
  --panel:          #ffffff;

  /* Encre */
  --ink:            #0f1826;
  --ink-dim:        #4c5c6e;
  --ink-faint:      #8595a6;

  /* Bordures */
  --border:         #dde6f0;
  --border-soft:    #e9f0f7;

  /* Accent ControlTower AI */
  --accent:         #2f7dd8;
  --accent-strong:  #1c5cb0;
  --accent-soft:    #e4f0fd;

  /* Fonds sombres */
  --navy-600:       #16233d;
  --navy-700:       #101b30;
  --navy-800:       #0a1220;
  --navy-900:       #070d18;
  --on-navy:        #eef4fc;
  --on-navy-dim:    #a9bad0;

  /* Niveaux de la Météo des IA — sémantiques, jamais décoratifs */
  --lvl-green:      #22c55e;
  --lvl-yellow:     #facc15;
  --lvl-orange:     #fb923c;
  --lvl-red:        #b91c1c;
  --lvl-grey:       #5c6577;

  /* Typographie */
  --font-sans: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Rythme */
  --wrap:           1132px;
  --texte:          760px;
  --rayon:          10px;
}

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

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; }

p { margin: 0 0 1.1em; }
a { color: var(--accent-strong); }

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

/* --- Accessibilité ------------------------------------------------
   Un contour de focus visible, jamais supprimé. La V1 n'en déclarait
   aucun sur l'habillage : on ne reproduit pas cette lacune. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

.awv2-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--rayon) 0;
}
.awv2-skip:focus { left: 0; }

.awv2-main:focus { outline: none; }

/* --- En-tête ------------------------------------------------------ */
.awv2-header {
  background: var(--panel);
  border-bottom: 1px solid var(--border-soft);
}
.awv2-header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.awv2-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.awv2-brand-logo { display: block; width: 26px; height: 26px; }
.awv2-brand-text { font-weight: 800; letter-spacing: -.01em; }
.awv2-brand-text em { font-style: normal; color: var(--accent); }

.awv2-nav-list,
.awv2-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.awv2-nav-list a,
.awv2-footer-list a {
  text-decoration: none;
  color: var(--ink-dim);
  font-size: 14px;
  font-weight: 500;
}
.awv2-nav-list a:hover,
.awv2-nav-list .current-menu-item > a { color: var(--ink); }

/* Message réservé aux administrateurs quand aucun menu n'est assigné. */
.awv2-nav-absent {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lvl-red);
}

/* --- Page --------------------------------------------------------- */
.awv2-main { min-height: 50vh; }

/* La largeur du contenu est gouvernee par theme.json
   (contentSize / wideSize = 1180px) et par les conteneurs .wrap du
   contenu lui-meme, exactement comme sur le site public.

   Le gabarit NE DOIT PAS imposer sa propre largeur : une contrainte a
   760 px ecrasait les grilles a quatre colonnes en cartes de 166 px,
   avec un vide considerable a droite. Constate en recette le
   2026-09-25. */
.awv2-page {
  margin: 0 auto;
  padding: 0 0 70px;
}
.awv2-page-header {
  max-width: var(--texte);
  margin: 0 auto;
  padding: 54px 24px 0;
}
.awv2-page-lede {
  font-size: 17.5px;
  color: var(--ink-dim);
}
.awv2-page-content > * { max-width: 100%; }

/* Tout contenu large défile dans son propre conteneur : le corps de
   page ne défile jamais horizontalement. */
.awv2-page-content :where(table, pre) {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* --- Pied --------------------------------------------------------- */
.awv2-footer {
  margin-top: 60px;
  background: var(--navy-800);
  color: var(--on-navy-dim);
}
.awv2-footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 44px 24px 28px;
}
.awv2-footer a { color: var(--on-navy); }

/* --- Trois colonnes ----------------------------------------------- */
.awv2-footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 32px 40px;
  align-items: start;
}
.awv2-footer-col { min-width: 0; }

.awv2-footer-titre {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-navy);
}

/* Le symbole est un trace noir sur fond transparent : il disparaitrait
   sur le bleu nuit. On l'eclaircit en CSS plutot que de produire une
   seconde image. Les proportions sont preservees : contain, et une
   seule des deux dimensions est contrainte. */
.awv2-footer-logo {
  display: block;
  width: auto;
  height: 40px;
  max-width: 100%;
  object-fit: contain;
  margin: 0 0 16px;
  filter: brightness(0) invert(1);
  opacity: .78;
}

.awv2-footer-baseline {
  margin: 0;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--on-navy-dim);
}

/* --- Listes -------------------------------------------------------- */
.awv2-footer .awv2-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.awv2-footer .awv2-footer-list a {
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--on-navy-dim);
}
.awv2-footer .awv2-footer-list a:hover { color: var(--on-navy); }

/* --- Ligne basse --------------------------------------------------- */
.awv2-footer-bas {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(169, 186, 208, .18);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 32px;
}
.awv2-footer-avertissement {
  margin: 0;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--on-navy-dim);
}
.awv2-footer-legal {
  margin: 0;
  font-size: 12.5px;
  color: var(--on-navy-dim);
  white-space: nowrap;
}

/* Le contour de focus du socle est bleu accent : illisible sur le bleu
   nuit. Dans le pied, on le pose en clair. */
.awv2-footer :where(a):focus-visible {
  outline: 2px solid var(--on-navy);
  outline-offset: 3px;
}

/* --- Mobile ------------------------------------------------------- */
@media (max-width: 720px) {
  .awv2-header-inner { padding: 12px 18px; gap: 14px; }
  /* Pas de gouttiere laterale ici : les conteneurs .wrap du contenu
     portent deja leur propre padding de 24 px. En ajouter une
     seconde donnerait 42 px au lieu de 24, plus etroit que le site
     public. */
  .awv2-page { padding: 0 0 54px; }
  .awv2-footer-inner { padding: 34px 18px 24px; }
  .awv2-footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .awv2-footer-bas { flex-direction: column; align-items: flex-start; gap: 12px; }
  .awv2-footer-legal { white-space: normal; }
  .awv2-nav-list { gap: 6px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Bloc d'introduction de page ----------------------------------
   Composant partage, pas une classe par page : le surtitre, le H1 et
   les lignes d'introduction reprennent l'axe du hero de la Home.

   L'axe horizontal n'est PAS pose ici : il vient du .wrap imbrique,
   conteneur deja utilise par le hero de la Home et par les grilles de
   contenu. L'alignement est donc vrai a toutes les largeurs, sans
   aucune marge propre a une resolution.

   Cette regle ne porte que le rythme vertical, releve sur le hero de
   la Home (56 px sous l'en-tete). Volontairement aucun fond : le
   quadrillage bleu doit rester visible sur toute la largeur.

   A ne pas confondre avec .page-intro de la charte, qui centre le
   texte et pose un degrade — traitement voulu sur « Comment ca
   marche » et « Meteo du jour », pas ici. */
.awv2-intro {
  padding: 56px 0 0;
}

/* --- Bloc final : deux cartes -------------------------------------
   Composant partage, pose en blocs Gutenberg natifs dans le contenu
   des pages : les deux boutons restent donc modifiables depuis
   l'editeur WordPress, sans URL gravee dans un gabarit PHP.

   Les hauteurs sont equilibrees par une colonne flex dont le bloc de
   bouton est pousse en bas : les deux cartes se terminent sur la meme
   ligne quelle que soit la longueur du texte. */
.final-cta { padding: 8px 0 4px; }

.final-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* WordPress injecte margin-block-start sur les enfants d'un groupe en
   disposition « flow ». Dans une grille, cette marge decale la seconde
   carte de 24 px et rogne d'autant sa hauteur etiree : les deux cartes
   ne se terminaient plus sur la meme ligne. Constate en recette le
   2026-09-25. L'espacement est deja porte par gap. */
.final-cta-grid > * { margin-block-start: 0; }
.final-cta-card { height: 100%; }

.final-cta-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  padding: 28px 26px;
  box-shadow: 0 1px 2px rgba(16, 32, 54, .04);
}
.final-cta-card h2 { font-size: 21px; margin: 0 0 10px; }
.final-cta-card p { color: var(--ink-dim); margin: 0 0 22px; }

/* Aligne les boutons sur la meme ligne de base. */
.final-cta-card .wp-block-buttons { margin-top: auto; }

.final-cta-card .wp-block-button__link {
  display: inline-block;
  background: var(--accent-strong);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background 160ms ease;
}
.final-cta-card .wp-block-button__link:hover { background: var(--accent); }

/* Le contour de focus du socle s'applique deja ; on garde seulement un
   decalage lisible sur le fond blanc de la carte. */
.final-cta-card .wp-block-button__link:focus-visible { outline-offset: 3px; }

@media (max-width: 720px) {
  .final-cta-grid { grid-template-columns: 1fr; gap: 16px; }
  .final-cta-card { padding: 24px 20px; }
}

/* --- Sélecteur de langue -------------------------------------------
   Deux liens natifs, discrets, à droite de la navigation. La langue
   courante n'est pas un lien : c'est un repère. */
.awv2-langues ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.awv2-langues li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: 4px;
  background: var(--border);
  vertical-align: middle;
}
.awv2-langue {
  display: inline-block;
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  border-radius: 4px;
  color: var(--ink-faint);
}
a.awv2-langue:hover { color: var(--accent-strong); background: var(--accent-soft); }
.awv2-langue.est-courante { color: var(--ink); }