/*
Theme Name: Myia Souveraine
Author: Kaven Chamberland — Myia Souveraine inc.
Description: Thème du site Myia Upload — noir et beige, ciel nocturne étoilé. Transposition fidèle du site Astro de myiaupload.com : 9 pages, identité visuelle et animations. Aucune requête sortante : polices auto-hébergées, animations en JavaScript vanilla, aucun script tiers, aucune analytique.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: Propriétaire — Myia Souveraine inc.
Text Domain: myia-souveraine
Tags: full-width-template, custom-menu, translation-ready

⚠️ NOMMAGE INTERNE. Le thème s'appelle « myia-souveraine » pour distinguer l'entité
québécoise (Myia Souveraine inc.) de la marque produit. L'affichage commercial reste
« Myia Upload » et le domaine reste myiaupload.com. Aucun texte visible ne change.

── Structure des feuilles de style ──────────────────────────────────────────────
Le site source est bâti sur Tailwind CSS v4. Les utilitaires compilés vivent dans
  assets/css/tailwind-build.css   (chargé AVANT ce fichier, cf. functions.php)
et proviennent tels quels du build Astro du 2026-08-08. Ne pas les éditer à la main.

Ce fichier-ci reprend « global.css » de la source Astro : la palette, les polices,
les animations et les classes d'effet. C'est ici qu'on intervient à la main.
*/

/* ═══════════════════════════════════════════════════════════════════════════════
   1. POLICES AUTO-HÉBERGÉES
   ═══════════════════════════════════════════════════════════════════════════════
   La source Astro chargeait Fraunces, Inter et JetBrains Mono depuis le service de
   polices de Google, sur TOUTES les pages, y compris /confidentialite dont le texte
   affirme que le site ne charge aucun traceur tiers. C'était une transmission
   d'adresse IP de visiteur vers un tiers étranger, sans consentement.

   → La fuite est refermée : aucun appel externe ne subsiste dans le thème.
   → Les fichiers de police se déposent dans assets/fonts/.
     Voir assets/fonts/README-POLICES.md pour la liste exacte et la marche à suivre.

   Tant que les fichiers ne sont pas déposés, le navigateur applique les substituts
   déclarés dans la pile (Georgia / system-ui / ui-monospace) : le site reste lisible,
   mais les axes variables de Fraunces (opsz, SOFT, WONK) ne rendent pas.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Fraunces — titres. Police variable, axes opsz / SOFT / WONK / wght.
   Le design s'appuie sur font-variation-settings : le fichier variable est requis. */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/Fraunces-Variable.woff2') format('woff2-variations'),
       url('assets/fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/Fraunces-Italic-Variable.woff2') format('woff2-variations'),
       url('assets/fonts/Fraunces-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Inter — texte courant. Poids utilisés dans la source : 400, 500, 600. */
/* Inter — statiques des dépôts Ubuntu (fonts-inter 3.19).
   Le thème n'utilise que 400/500/600 : un @font-face par graisse suffit,
   et évite un fichier variable de 300 Ko pour trois graisses. */
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* JetBrains Mono — statiques (fonts-jetbrains-mono 2.242). Graisses utilisées : 400/500. */
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* JetBrains Mono — libellés techniques. Poids utilisés dans la source : 400, 500. */


/* ═══════════════════════════════════════════════════════════════════════════════
   2. PALETTE ET POLICES — reprise exacte du bloc @theme de global.css
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  --color-void: #07131a;         /* fond nocturne profond */
  --color-deep: #0c1f29;
  --color-rise: #142a36;
  --color-paper: #f5ede0;        /* le beige — texte principal */
  --color-paper-dim: #c8b9a4;
  --color-paper-faint: #6a7a82;
  --color-whisper: #8ab39e;      /* accent vert doux */
  --color-pulse: #f0b16a;        /* accent ambre */

  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. BASE — reprise du @layer base de global.css
   ═══════════════════════════════════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
  background: var(--color-void);
}

body {
  background: var(--color-void);
  color: var(--color-paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: var(--color-pulse);
  color: var(--color-void);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. ANIMATIONS ET CLASSES D'EFFET — reprise intégrale de global.css
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Pulse LED */
@keyframes pulse-led {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}
.pulse-led { animation: pulse-led 2.4s ease-in-out infinite; }

/* Breathing glow for logo */
@keyframes breathe {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 35px rgba(240, 177, 106, 0.18)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 0 60px rgba(240, 177, 106, 0.38)); }
}
.breathe { animation: breathe 7s ease-in-out infinite; }

/* Orbital rings */
@keyframes orbit-rotate { to { transform: rotate(360deg); } }
.orbit-slow { animation: orbit-rotate 60s linear infinite; }
.orbit-counter { animation: orbit-rotate 120s linear infinite reverse; }

/* Aurora gradient subtil */
@keyframes aurora {
  0%, 100% { background-position: 0% 50%, 100% 50%, 50% 0%; }
  50% { background-position: 100% 50%, 0% 50%, 50% 100%; }
}
.aurora-bg {
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(138, 179, 158, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(240, 177, 106, 0.08), transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(28, 65, 88, 0.20), transparent 70%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: aurora 22s ease-in-out infinite;
}

/* Aurora variante claire (sections beige) */
.aurora-bg-light {
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(138, 179, 158, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(240, 177, 106, 0.22), transparent 60%);
  background-size: 200% 200%, 200% 200%;
  animation: aurora 22s ease-in-out infinite;
}

.grid-overlay-light {
  background-image:
    linear-gradient(rgba(7, 19, 26, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 19, 26, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Section reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
.reveal.visible { opacity: 1; transform: none; }

/* Grid overlay subtle */
.grid-overlay {
  background-image:
    linear-gradient(rgba(245, 237, 224, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 237, 224, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
}

@media (prefers-reduced-motion: reduce) {
  .pulse-led, .breathe, .orbit-slow, .orbit-counter, .aurora-bg, .reveal {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. ACCESSIBILITÉ WORDPRESS — strictement fonctionnel, aucun effet visuel ajouté
   ═══════════════════════════════════════════════════════════════════════════════
   Le lien d'évitement est masqué hors focus clavier. Rien de tout ça n'existe dans
   la source Astro : c'est le minimum attendu d'un thème WordPress, et cela ne
   modifie aucun rendu. */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. CONTENU LIBRE — gabarits de repli UNIQUEMENT (page.php, index.php, 404.php)
   ═══════════════════════════════════════════════════════════════════════════════
   Aucune des neuf pages du site ne passe par ici : elles ont chacune leur gabarit,
   au balisage figé. Ces règles servent aux pages et articles créés plus tard dans
   WordPress, dont le contenu vient de l'éditeur et n'a donc aucune classe.

   Tailwind remet à zéro les marges des titres et des paragraphes : sans ces
   quelques règles, un contenu d'éditeur s'afficherait en un seul bloc compact.

   ⚠️ Aucune valeur inventée : couleurs, polices et interlignes sont ceux déjà
   employés dans les neuf pages. */

.myia-contenu {
  color: rgba(7, 19, 26, 0.75);
  line-height: 1.7;
}

.myia-contenu > * + * {
  margin-top: 1.25rem;
}

.myia-contenu h2,
.myia-contenu h3,
.myia-contenu h4 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--color-void);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 2.5rem;
}

.myia-contenu h2 { font-size: clamp(1.85rem, 4.5vw, 2.85rem); }
.myia-contenu h3 { font-size: 1.5rem; }
.myia-contenu h4 { font-size: 1.25rem; }

.myia-contenu strong { color: var(--color-void); }

.myia-contenu a {
  color: var(--color-void);
  border-bottom: 1px dashed rgba(7, 19, 26, 0.4);
  text-decoration: none;
}

.myia-contenu a:hover { border-bottom-style: solid; }

.myia-contenu ul,
.myia-contenu ol {
  padding-left: 1.5rem;
}

.myia-contenu ul { list-style: disc; }
.myia-contenu ol { list-style: decimal; }
.myia-contenu li + li { margin-top: 0.5rem; }

.myia-contenu blockquote {
  border-left: 2px solid var(--color-pulse);
  padding-left: 1.25rem;
}

.myia-contenu code,
.myia-contenu pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

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

.skip-link:focus {
  clip-path: none;
  background-color: var(--color-pulse);
  color: var(--color-void);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  height: auto;
  left: 6px;
  line-height: normal;
  padding: 12px 20px;
  text-decoration: none;
  top: 6px;
  width: auto;
  z-index: 100000;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITAIRES ABSENTS DU BUILD TAILWIND
   ───────────────────────────────────────────────────────────────
   `assets/css/tailwind-build.css` est un build FIGÉ, repris du site
   Astro : il ne contient que les classes utilisées à l'époque de la
   compilation. Toute classe arbitraire inventée depuis — une taille
   `text-[clamp(…)]`, une largeur `grid-cols-[minmax(…)]` — n'y existe
   pas, donc ne s'applique pas, sans erreur visible.
   ⛔ Ne pas inventer de classe arbitraire : la définir ici, nommée.
   Ajouté 2026-08-10.
   ═══════════════════════════════════════════════════════════════ */

/* Titre de section (colonne de gauche) — « Partenaires établis » */
.myia-titre-section{
  font-family:var(--font-display);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-0.02em;
  /* 3,1 rem = la plus grande taille qui fait tenir « Continuité humaine »
     (le titre le plus large) sur une seule ligne dans sa colonne de 380 px.
     hyphens:none — jamais couper un mot : « Infrastructurell-e » est pire
     qu'un titre un peu plus petit. */
  font-size:clamp(2rem,4vw,3.1rem);
  hyphens:none;
}

/* Sous-titre de section — « Patrii et Lynx. » */
.myia-sous-titre{
  font-family:var(--font-display);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-0.02em;
  font-size:clamp(1.9rem,3.8vw,2.8rem);
}

/* Colonne de titre : assez large pour un titre de cette taille */
@media (min-width:768px){
  .myia-grille-section{
    grid-template-columns:minmax(280px,380px) 1fr !important;
    column-gap:3.5rem;
  }
}

/* Section en deux moitiés égales (page Partenariats) */
@media (min-width:768px){
  .myia-grille-moitie{
    grid-template-columns:1fr 1fr !important;
    column-gap:4rem;
  }
}

/* Grille à 3 colonnes — absente du build Tailwind figé (modes de déploiement, page Vision) */
@media (min-width:640px){
  .grid.sm\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Section sans titre de colonne — le contenu occupe la largeur, centré.
   Sans ça, une grille [380px 1fr] dont la première colonne est vide
   pousse le texte à droite et le comprime : 380 px de vide inutile.
   Ajouté 2026-08-10. */
.myia-section-pleine{ display:block !important; }
.myia-section-pleine > div{ max-width:52rem; margin-left:auto; margin-right:auto; }

/* ═══════════════════════════════════════════════════════════════
   FILET DE SÉCURITÉ — lisibilité
   ───────────────────────────────────────────────────────────────
   Les sections alternent beige et noir, et certains blocs portent le
   fond inverse de leur section. À force d'inversions successives, du
   texte se retrouve de la même couleur que son fond : invisible, sans
   la moindre erreur signalée.
   Ces règles garantissent qu'un texte ne peut jamais disparaître.
   ⚠️ `bg-paper/xx` (translucide sur fond noir) n'est PAS visé : son
   texte doit rester clair. Seul le beige plein l'est.
   Ajouté 2026-08-10 après un incident réel sur /mandat.
   ═══════════════════════════════════════════════════════════════ */

/* Sur fond noir — jamais de texte sombre */
.bg-void .text-void,
.bg-void .text-void\/75,
.bg-void .text-void\/70,
.bg-void .text-void\/55{ color:var(--color-paper); }
.bg-void .text-void\/75{ color:var(--color-paper-dim); }
.bg-void .text-void\/55{ color:var(--color-paper-faint); }

/* Sur fond beige plein — jamais de texte clair */
.bg-paper .text-paper,
.bg-paper .text-paper-dim,
.bg-paper .text-paper\/55{ color:var(--color-void); }
.bg-paper .text-paper-dim{ color:var(--color-paper-faint); }
.bg-paper .text-paper\/55{ color:var(--color-paper-faint); }

/* Le titre de section suit la section, quoi qu'il porte comme classe */
.bg-void .myia-titre-section{ color:var(--color-paper); }
.bg-paper .myia-titre-section{ color:var(--color-void); }

/* ⭐ Le fond le PLUS PROCHE gagne.
   Un bloc beige dans une section noire (ou l'inverse) doit reprendre la main :
   trois classes l'emportent sur les deux ci-dessus. */
.bg-void .bg-paper .text-void{ color:var(--color-void); }
.bg-void .bg-paper .text-void\/75{ color:rgba(7,19,26,.75); }
.bg-void .bg-paper .text-void\/70{ color:rgba(7,19,26,.70); }
.bg-void .bg-paper .text-void\/55{ color:rgba(7,19,26,.55); }
.bg-void .bg-paper .myia-titre-section{ color:var(--color-void); }

.bg-paper .bg-void .text-paper{ color:var(--color-paper); }
.bg-paper .bg-void .text-paper-dim{ color:var(--color-paper-dim); }
.bg-paper .bg-void .text-paper\/55{ color:var(--color-paper-faint); }
.bg-paper .bg-void .myia-titre-section{ color:var(--color-paper); }

/* ⚠️ Un élément qui porte LUI-MÊME un fond inverse garde son texte.
   Cas réel : un bouton `bg-void text-paper` posé dans une section beige.
   Sans cette règle, le filet ci-dessus lui met du texte noir sur fond noir —
   le bouton devient invisible jusqu'au survol. */
.bg-paper .bg-void.text-paper,
.bg-paper .bg-void .text-paper{ color:var(--color-paper); }
.bg-paper .bg-void.text-paper-dim,
.bg-paper .bg-void .text-paper-dim{ color:var(--color-paper-dim); }

.bg-void .bg-paper.text-void,
.bg-void .bg-paper .text-void{ color:var(--color-void); }

/* ═══════════════════════════════════════════════════════════════
   LISIBILITÉ DES ACCENTS SUR FOND CLAIR
   ───────────────────────────────────────────────────────────────
   L'ambre (#f0b16a) et le vert doux (#8ab39e) donnent 10:1 et 8:1 sur
   le fond nocturne — parfait. Sur le beige (#f5ede0) ils tombent à
   1,6:1 et 2,0:1 : sous le seuil de lisibilité, et illisibles pour
   une partie des visiteurs.
   ⭐ La teinte n'est PAS remplacée : elle est assombrie à saturation et
   teinte constantes, uniquement sur fond clair. Le caractère reste, le
   texte se lit. Sur fond sombre, rien ne change.
   Ajouté 2026-08-10.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --pulse-sur-clair:      #c97414;   /* 3,0:1 — grands titres décoratifs */
  --pulse-sur-clair-fort: #9d5a0f;   /* 4,6:1 — texte courant, liens     */
  --whisper-sur-clair:      #609379; /* 3,0:1 */
  --whisper-sur-clair-fort: #4a735e; /* 4,6:1 */
}

/* Titres et emphases décoratives — grand corps, 3:1 suffit */
.bg-paper h1 .text-pulse,
.bg-paper h2 .text-pulse,
.bg-paper h3 .text-pulse,
.bg-paper .myia-titre-section .text-pulse,
.bg-paper .myia-sous-titre .text-pulse{ color:var(--pulse-sur-clair); }

/* Texte courant, libellés, liens, puces — 4,5:1 */
.bg-paper .text-pulse{ color:var(--pulse-sur-clair-fort); }
.bg-paper .text-whisper{ color:var(--whisper-sur-clair-fort); }
.bg-paper h1 .text-whisper,
.bg-paper h2 .text-whisper{ color:var(--whisper-sur-clair); }

/* Bordures d'accent : purement décoratives, elles gardent la teinte d'origine */
.bg-paper .border-pulse{ border-color:#f0b16a; }
.bg-paper .border-whisper{ border-color:#8ab39e; }

/* ⭐ Boutons à fond ambre — on garde le fond, on fonce le texte.
   Beige sur ambre = 1,6:1 ; noir sur ambre = 8,9:1, et le bouton reste ambre. */
/* ⚠️ Ne PAS utiliser [class*="bg-pulse"] : ce sélecteur attrape la classe
   `hover:bg-pulse` même au repos, et noircit le texte d'un bouton qui est
   encore noir. Cibler la classe réelle et l'état :hover, rien d'autre. */
.bg-pulse{ color:var(--color-void); }
.bg-pulse *{ color:var(--color-void); }
.hover\:bg-pulse:hover{ color:var(--color-void) !important; }
.hover\:bg-pulse:hover *{ color:var(--color-void) !important; }

/* Sur fond sombre, l'ambre et le vert d'origine sont conservés */
.bg-void .text-pulse{ color:#f0b16a; }
.bg-void .text-whisper{ color:#8ab39e; }

/* ⭐ RÈGLE GÉNÉRALE — le fond le plus proche impose la couleur du texte.
   Un élément qui porte son propre fond (bg-void, bg-paper, bg-pulse) doit
   primer sur la section qui le contient, quelle que soit la profondeur.
   Deux classes suffisaient à ce que la section l'emporte : on monte d'un cran. */
.bg-void .bg-pulse, .bg-paper .bg-pulse,
.bg-void .bg-pulse *, .bg-paper .bg-pulse *{ color:var(--color-void); }

.bg-void .bg-paper:not([class*="bg-paper/"]),
.bg-void .bg-paper:not([class*="bg-paper/"]) *{ color:var(--color-void); }

.bg-paper .bg-void, .bg-paper .bg-void *{ color:var(--color-paper); }

/* --color-paper-faint : #6a7a82 donnait 4,22:1 sur le fond nocturne — juste
   sous le seuil de 4,5:1. Éclairci de 5 % : la nuance grise-bleue reste la
   même à l'œil, et les libellés discrets passent la barre. */
:root{ --color-paper-faint:#6f8088; }