/*
Theme Name: ANMTEPH
Template: anmteph-theme
Description: Thème enfant du thème parent "anmteph-theme" — charte graphique ANMTEPH 2026 (sobre, accessible, RGAA/WCAG AA). Intègre header, footer, fil d'ariane, bandeau d'alerte et cartes (actualité / formation / offre) sous forme de vrais template parts WordPress, plus le kit de tokens visuels du dossier composants-elementor/.
Version: 1.0.0
Author: ANMTEPH
Text Domain: anmteph
*/
/* ============================================================
1. Design tokens — source de vérité (identique à
composants-elementor/tokens.css, posé ici une seule fois : plus
besoin de le coller en Code Snippet séparé si ce thème est actif).
============================================================ */
:root {
--color-primary: #10b981;
--color-primary-dark: #0a7a5c;
--color-primary-light: #d1fae5;
--color-secondary: #2563eb;
--color-accent: #ff6b4a;
--color-accent-dark: #e6512f;
--color-ink: #011520;
--color-bg: #fafaf9;
--color-surface: #ffffff;
--color-gray-100: #f1f3f2;
--color-gray-200: #e2e6e4;
--color-gray-300: #c7cdc9;
--color-gray-500: #6b7570;
--color-gray-700: #3a4340;
--color-error: #dc2626;
--color-error-light: #fee2e2;
--color-warning: #f59e0b;
--color-warning-light: #fef3c7;
--color-warning-text: #92400e;
--color-focus: #2563eb;
--color-white: #ffffff;
--color-secondary-light: #e3ecfd;
--color-accent-light: #fff1ec;
--font-base: 'Inter', system-ui, -apple-system, sans-serif;
--text-xs: 0.875rem;
--text-sm: .9375rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.25rem;
--text-4xl: 2.75rem;
--text-5xl: 3.5rem;
--lh-body: 1.5;
--lh-heading: 1.2;
--space-1: .5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-6: 3rem;
--space-8: 4rem;
--space-12: 6rem;
--radius-sm: 4px;
--radius-md: 8px;
--radius-full: 999px;
--shadow-card: 0 1px 3px rgba(1,21,32,.08), 0 1px 2px rgba(1,21,32,.06);
/* Largeur de contenu partagée par le header, le footer, .anm-container
et .wrap (page d'accueil) — un seul gabarit, plus de décalage visuel
entre les bords du header/footer et le contenu en dessous. */
--content-max: 1240px;
}
/* Paliers responsive de référence pour l'ensemble du thème (style.css +
assets/css/*.css) — @media ne peut pas lire une custom property, donc
ce commentaire fait office de token : 480px (mobile étroit → une seule
colonne/ligne empilée), 768px (tablette → 2-3 colonnes), 1024px
(desktop → nav horizontale, grilles complètes). Toute nouvelle règle
responsive doit se caler sur l'un de ces 3 paliers plutôt qu'inventer
une valeur voisine (ex: 700px, 900px). Exception assumée : le couple
782px/783px de my-account.css (nav de l'espace "Mon compte") est calé
sur le breakpoint natif de l'admin bar WordPress, pas sur cette échelle
— volontairement distinct, ne pas l'aligner sur 768px. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
/* Footer collé en bas même sur les pages courtes (sinon du blanc reste
sous le footer quand le contenu ne remplit pas le viewport). */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.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;
}
/* Conteneur générique — remplace les max-width:1280px répétés
dans chaque composant HTML d'origine. */
.anm-container {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--space-3);
}
/* Boutons partagés (header, cartes formation, formulaire...).
all:unset + !important : même fuite Elementor/thème parent que
.anm-header__burger/.anm-nav-toggle (styles de lien/bouton globaux
imposés en !important sur les ) — même parade, sinon nos ressortent surdimensionnés et soulignés. */
.anm-btn {
all: unset;
box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 0 var(--space-3);
border-radius: var(--radius-sm) !important; font-weight: 600 !important; font-size: var(--text-base) !important;
line-height: 1.2 !important;
text-decoration: none !important; cursor: pointer; border: 2px solid transparent !important;
transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
font-family: var(--font-base);
}
.anm-btn--primary { background: var(--color-primary) !important; color: var(--color-white) !important; }
.anm-btn--primary:hover { background: var(--color-primary-dark) !important; }
.anm-btn--outline { background: transparent !important; border-color: var(--color-primary) !important; color: var(--color-primary-dark) !important; }
.anm-btn--outline:hover { background: var(--color-primary) !important; color: var(--color-white) !important; }
/* ============================================================
2. Header
============================================================ */
.anm-header {
font-family: var(--font-base);
background: var(--color-surface);
border-bottom: 1px solid var(--color-gray-200);
position: sticky;
top: 0;
z-index: 100;
}
.anm-header__inner {
max-width: var(--content-max);
margin: 0 auto;
padding: var(--space-2) var(--space-3);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.anm-header__logo { display: flex; align-items: center; }
.anm-header__logo img,
.anm-header__logo .custom-logo { display: block; height: 96px; width: auto; }
.anm-header__logo .site-title { color: var(--color-ink); text-decoration: none; font-weight: 700; }
.anm-header__right { display: flex; align-items: center; gap: var(--space-2); }
.anm-header__burger {
/* Même fuite Elementor que .anm-nav-toggle (fond/couleur imposés sur les