.elementor-kit-6{--e-global-color-primary:#0A0A0A;--e-global-color-secondary:#F2F2F0;--e-global-color-text:#0A0A0A;--e-global-color-accent:#DDC191;--e-global-color-31e483a:#6B6B6B;--e-global-color-c3118fe:#FFFFFF;--e-global-typography-primary-font-family:"Plus Jakarta Sans";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Chivo";--e-global-typography-secondary-font-weight:100;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-text-font-family:"Chivo Mono";--e-global-typography-text-font-weight:100;--e-global-typography-text-line-height:1.6em;--e-global-typography-text-letter-spacing:0.03em;--e-global-typography-accent-font-family:"Chivo Mono";--e-global-typography-accent-font-weight:200;font-family:"Chivo Mono", Sans-serif;font-weight:100;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );text-shadow:0px 0px 0px rgba(0,0,0,0.3);color:var( --e-global-color-primary );border-radius:0px 0px 0px 0px;padding:6px 8px 6px 8px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:var( --e-global-color-text );color:var( --e-global-color-c3118fe );}.elementor-kit-6 e-page-transition{background-color:var( --e-global-color-accent );}.elementor-kit-6 h1{font-size:clamp(2.5rem, 5vw, 4rem);}.elementor-kit-6 h2{font-size:clamp(2rem, 4vw, 3rem);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0;--container-default-padding-right:0;--container-default-padding-bottom:0;--container-default-padding-left:0;}.elementor-widget:not(:last-child){--kit-widget-spacing:var(--space-s);}.elementor-element{--widgets-spacing:var(--space-s) var(--space-s);--widgets-spacing-row:var(--space-s);--widgets-spacing-column:var(--space-s);}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =============================================================================
   ATELIERS ZELIJ — FONDATION FLUIDE
   -----------------------------------------------------------------------------
   OÙ COLLER : Elementor → Réglages du site (E) → CSS personnalisé.
   Tout ce fichier est chargé site-wide, donc `var(--…)` est utilisable
   dans n'importe quel champ (padding, gap, largeur) de n'importe quel widget V4.

   RÉPARTITION VARIABLES :
   - Le FLUIDE (clamp, layout, espacements) reste ici, en CSS. Le Variables
     Manager natif ne sait pas encore stocker de clamp() ni d'espacements.
   - Le STATIQUE (couleurs de marque, polices) va ALSO dans le Variables
     Manager natif → synchronisé vers Global Colors / Global Fonts, pour rester
     sélectionnable dans les widgets. On garde les mêmes hex/noms des deux côtés.

   RÉFÉRENCE FLUIDE : interpolation 390px (mobile Figma) → 1440px (desktop Figma).
   Modifie $fig-min / $fig-max mentalement si tes maquettes changent : il faudra
   recalculer les clamp (pente = Δvaleur/Δlargeur, ordonnée = min − pente·larg_min).
   ============================================================================= */


/* =============================================================================
   1. POLICES
   -----------------------------------------------------------------------------
   4 familles à charger (Elementor → Custom Fonts, upload woff2) :
     - Antonio            Bold (700)          → logo
     - Plus Jakarta Sans  ExtraLight (200) + Bold (700) → très petits textes & titres
     - Chivo Mono         ExtraLight (200)    → corps de texte
     - Chivo              ExtraLight (200)    → navigation (capitales)
   Ne PAS les servir en Google Fonts distant (perf + RGPD) : auto-héberge en
   woff2. Attention : Chivo et Chivo Mono sont DEUX familles distinctes.
   ============================================================================= */

/* Exemple si auto-hébergé (décommente et ajuste les chemins) :
@font-face {
  font-family: "Antonio";
  src: url("/wp-content/uploads/fonts/Antonio-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/wp-content/uploads/fonts/PlusJakartaSans-ExtraLight.woff2") format("woff2");
  font-weight: 200; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/wp-content/uploads/fonts/PlusJakartaSans-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/wp-content/uploads/fonts/ChivoMono-ExtraLight.woff2") format("woff2");
  font-weight: 200; font-display: swap;
}
@font-face {
  font-family: "Chivo";
  src: url("/wp-content/uploads/fonts/Chivo-ExtraLight.woff2") format("woff2");
  font-weight: 200; font-display: swap;
}
*/


/* =============================================================================
   2. TOKENS  (:root)
   ============================================================================= */
:root {

  /* --- 2.1 COULEURS DE MARQUE (issues de la maquette Figma) ----------------
     Neutral Darkest / Neutral Lightest / Couleur SCOTH. -------------------- */
  --zelij-noir:        #0A0A0A;   /* Neutral Darkest (#000 adouci) — encre & fonds sombres */
  --zelij-blanc-casse: #FBF8F5;   /* blanc cassé chaud (off-white) */
  --zelij-sable:       #DDC191;   /* Couleur SCOTH — accent (fills / surlignage) */
  --zelij-blanc:       #FFFFFF;   /* blanc pur — highlights sur fond sombre */
  --zelij-muted:       #6B6B6B;   /* texte secondaire, légendes */
  /* Anciens accents disponibles si besoin d'un pop : vert #0B9954, terracotta #C4683A */

  /* --- 2.2 ALIAS SÉMANTIQUES (utilise CEUX-CI dans les widgets) -------------
     On ne câble jamais un widget sur --zelij-sable directement : on passe par
     un rôle. Repeindre le site = changer quelques lignes ici. -------------- */
  --color-bg:        var(--zelij-blanc-casse);
  --color-fg:        var(--zelij-noir);
  --color-muted:     var(--zelij-muted);
  --color-accent:    var(--zelij-sable);   /* fills / surlignage — PAS les liens texte (contraste faible sur clair) */
  --color-accent-2:  var(--zelij-blanc);   /* highlight sur fond sombre */
  --color-line:      var(--zelij-noir);
  --color-invert-bg: var(--zelij-noir);
  --color-invert-fg: var(--zelij-blanc-casse);

  /* --- 2.3 POLICES (1 token par RÔLE) --------------------------------------- */
  --font-logo:    "Antonio", "Arial Narrow", sans-serif;         /* logo, Bold 700 */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;    /* H1/H2/H3, Bold 700 */
  --font-mono:    "Chivo Mono", ui-monospace, "Courier New", monospace; /* corps, 200 */
  --font-nav:     "Chivo", system-ui, sans-serif;                /* navigation, capitales, 200 */
  --font-fine:    "Plus Jakarta Sans", system-ui, sans-serif;    /* micro-textes & sous-nav, ExtraLight 200 */
  --font-body:    var(--font-mono);   /* corps par défaut = Chivo Mono */

  /* Graisses de référence */
  --weight-logo:    700;
  --weight-display: 700;
  --weight-body:    200;   /* Chivo Mono ExtraLight */
  --weight-nav:     200;   /* Chivo ExtraLight */
  --weight-fine:    200;

  /* --- 2.4 ÉCHELLE D'ESPACEMENT FLUIDE (390 → 1440) ------------------------
     Une seule échelle pour TOUT : marges, paddings, gaps, gouttières.
     Commentaire = valeur mini → maxi en px. -------------------------------- */
  --space-3xs: clamp(0.25rem, 0.226rem + 0.10vw, 0.375rem); /*  4 →  6 */
  --space-2xs: clamp(0.5rem,  0.407rem + 0.38vw, 0.75rem);  /*  8 → 12 */
  --space-xs:  clamp(0.75rem, 0.657rem + 0.38vw, 1rem);     /* 12 → 16 */
  --space-s:   clamp(1rem,    0.814rem + 0.76vw, 1.5rem);   /* 16 → 24 */
  --space-m:   clamp(1.5rem,  1.129rem + 1.52vw, 2.5rem);   /* 24 → 40 */
  --space-l:   clamp(2rem,    1.257rem + 3.05vw, 4rem);     /* 32 → 64 */
  --space-xl:  clamp(3rem,    1.886rem + 4.57vw, 6rem);     /* 48 → 96 */
  --space-2xl: clamp(4rem,    2.171rem + 7.62vw, 10rem);    /* 64 → 160 */

  /* --- 2.5 ÉCHELLE TYPOGRAPHIQUE FLUIDE (390 → 1440) -----------------------
     Pentes volontairement modérées (< 3vw) : au-delà, le zoom navigateur
     casse et on échoue WCAG 1.4.4. -------------------------------------- */
  --text--3: clamp(0.563rem, 0.539rem + 0.10vw, 0.625rem);  /*  9 → 10  micro décoratif / fine print */
  --text--2: clamp(0.688rem, 0.664rem + 0.10vw, 0.75rem);  /* 11 → 12  micro / mentions */
  --text--1: clamp(0.813rem, 0.789rem + 0.10vw, 0.875rem); /* 13 → 14  légende */
  --text-0:  clamp(1rem,     0.954rem + 0.19vw, 1.125rem); /* 16 → 18  corps */
  --text-1:  clamp(1.188rem, 1.095rem + 0.38vw, 1.438rem); /* 19 → 23 */
  --text-2:  clamp(1.438rem, 1.298rem + 0.57vw, 1.813rem); /* 23 → 29 */
  --text-3:  clamp(1.688rem, 1.455rem + 0.95vw, 2.313rem); /* 27 → 37 */
  --text-4:  clamp(2.063rem, 1.738rem + 1.33vw, 2.938rem); /* 33 → 47 */
  --text-5:  clamp(2.438rem, 1.95rem  + 2.00vw, 3.75rem);  /* 39 → 60 */
  --text-6:  clamp(2.938rem, 2.264rem + 2.76vw, 4.75rem);  /* 47 → 76  hero */

  /* --- 2.5b INTERLIGNAGE — 3 hauteurs standard À SUIVRE --------------------
     Règle : plus le texte est grand, plus l'interligne est serré.
       tight → titres display (--text-4 et +)
       snug  → sous-titres, intertitres, chapô (--text-1 à --text-3)
       body  → corps de lecture et tout texte courant (--text-0 et -) ------ */
  --leading-tight: 1.1;    /* titres display */
  --leading-snug:  1.35;   /* sous-titres / chapô */
  --leading-body:  1.65;   /* corps de lecture */
  --tracking-tight: -0.02em;
  --tracking-wide:   0.08em; /* eyebrows / labels mono en capitales */

  /* --- 2.6 LAYOUT ----------------------------------------------------------- */
  /* Échelle de largeurs de section (rem : suit le zoom navigateur) */
  --w-text:    42rem;   /* ~672px  — colonne de lecture pure     */
  --w-narrow:  62rem;   /* ~992px  — éditorial resserré          */
  --w-content: 80rem;   /* 1280px  — défaut (maquette)           */
  --w-wide:    90rem;   /* 1440px  — respiration                 */
  --w-full:    100%;    /* pleine largeur                        */

  --measure:      66ch;    /* largeur de lecture confortable (widget texte) */
  --pad-page:     var(--space-l);  /* marge latérale de page (absorbe le surplus) */
  --gutter:       var(--space-m);  /* gouttière de grille par défaut */
  --section-space: var(--space-2xl); /* rythme vertical entre sections (surchargeable) */

  /* Formats d'image (aspect-ratio, pas clamp : la forme suit la largeur) */
  --ratio-wide:    16/9;   /* hero pleine largeur */
  --ratio-photo:   3/2;    /* paysage éditorial — défaut recommandé */
  --ratio-classic: 4/3;    /* neutre */
  --ratio-portrait: 4/5;   /* portrait magazine */
  --ratio-square:  1/1;    /* vignette, grille */

  /* --- 2.7 HOOKS BRUTALISTES (placeholders — À DÉFINIR ENSUITE) ------------
     Le style est branché sur ces variables : on affinera le look ici sans
     retoucher les classes. Valeurs de départ neutres/dures. -------------- */
  --radius:      0px;                 /* brutalisme = angles vifs */
  --border-w:    2px;                 /* filet dur */
  --border:      var(--border-w) solid var(--color-line);
  --shadow-hard: 6px 6px 0 0 var(--color-line); /* ombre offset sans flou */
  --focus-ring:  3px solid var(--color-accent);
}


/* =============================================================================
   3. BASE  (léger, non intrusif pour l'UI Elementor)
   ============================================================================= */
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Accessibilité : respect du reduced-motion (utile pour tes anims GSAP) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible cohérent (brutaliste, franc) */
:where(a, button, input, textarea, select):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}


/* =============================================================================
   4. CLASSES STRUCTURELLES
   -----------------------------------------------------------------------------
   USAGE ELEMENTOR : ajoute le nom de classe (sans le point) dans l'onglet
   Avancé → Classes CSS du conteneur/widget. Préfixe `z-` pour éviter toute
   collision avec les classes internes d'Elementor.
   ============================================================================= */

/* --- 4.1 SECTION : fond pleine largeur + contenu contraint, EN UN conteneur --
   Règle le problème V4 (perte du toggle Boxed/Full Width) sans double conteneur.
   → Sur le conteneur Elementor : Largeur = Full Width, padding Elementor à 0.
   → Le fond (couleur/image) déborde ; le contenu reste dans --section-w. */
.z-section {
  --section-w: var(--w-content);   /* largeur courante — surchargée par un modificateur */
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--pad-page), 1fr)
    [content-start] min(var(--section-w), 100% - (var(--pad-page) * 2)) [content-end]
    minmax(var(--pad-page), 1fr) [full-end];
  padding-block: var(--section-space);
  row-gap: var(--gutter);
}
.z-section > *       { grid-column: content; }  /* tout enfant = colonne centrale */
.z-section > .z-bleed { grid-column: full; }    /* sauf ceux marqués pleine largeur */

/* Modificateurs de LARGEUR (une seule classe en plus change la largeur) */
.z-section--text   { --section-w: var(--w-text); }   /* colonne de lecture */
.z-section--narrow { --section-w: var(--w-narrow); } /* éditorial resserré */
.z-section--wide   { --section-w: var(--w-wide); }   /* respiration */
.z-section--full   { --section-w: var(--w-full); }   /* pleine largeur */

/* Modificateurs de RYTHME vertical (cumulables avec ceux de largeur) */
.z-section--tight { --section-space: var(--space-xl); }
.z-section--flush { --section-space: 0px; }


/* --- 4.2 WRAPPER : contrainte de largeur pour contextes NON-grille ----------
   Alternative au z-section quand tu veux juste centrer un bloc.
   `min()` avec 100% (jamais 100vw : évite le débordement de scrollbar). */
.z-wrap {
  width: min(100% - (var(--pad-page) * 2), var(--w-content));
  margin-inline: auto;
}

/* --- 4.2b PAGE-CONTENT : cadre de contenu commun à toutes les pages --------
   Pleine largeur moins une gouttière --space-s de chaque côté, centré.
   Pas de plafond de largeur. À poser sur le conteneur de contenu récurrent. */
.page-content {
  width: calc(100% - var(--space-s) * 2);
  margin-inline: auto;   /* centrage : répartit la gouttière à parts égales */
  gap: 0;
}


/* --- 4.3 FLOW : rythme vertical par owl-.elementor-kit-6 -----------------------------
   Un seul point de vérité pour l'espacement entre éléments empilés.
   Surcharge locale possible via --flow-space sur l'élément concerné. */
.z-flow > * + * {
  margin-block-start: var(--flow-space, var(--space-m));
}
/* Presets rapides */
.z-flow--s  { --flow-space: var(--space-s); }
.z-flow--l  { --flow-space: var(--space-l); }


/* --- 4.4 MESURE : largeur de lecture pour blocs de texte -------------------- */
.z-measure { max-inline-size: var(--measure); }


/* --- 4.5 STACK / CLUSTER : layouts flex utilitaires ------------------------- */
.z-cluster {                 /* rangée qui wrappe (nav, tags, boutons) */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}
.z-stack {                   /* colonne simple avec gap fluide */
  display: flex;
  flex-direction: column;
  gap: var(--flow-space, var(--space-m));
}


/* =============================================================================
   5. COMPOSANTS PORTABLES  (container queries)
   -----------------------------------------------------------------------------
   Un composant réutilisable (carte produit CPT, teaser collection…) se
   dimensionne sur SON conteneur, pas sur l'écran. Indispensable si la même
   carte apparaît en grille 3 col ET en pleine largeur sur la même page.
   → On remplace vw par cqi À L'INTÉRIEUR du composant.
   ============================================================================= */
.z-card {
  container-type: inline-size;   /* active les cqi pour les descendants */
}
.z-card__inner {
  padding: clamp(0.75rem, 0.5rem + 3cqi, 2rem);  /* respire selon la carte, pas l'écran */
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.z-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.125rem, 0.9rem + 4cqi, 1.75rem);
  line-height: var(--leading-snug);
}


/* =============================================================================
   5b. FORMATS D'IMAGE  (aspect-ratio)
   -----------------------------------------------------------------------------
   La FORME d'un visuel se gère avec aspect-ratio, pas clamp. Le cadre suit la
   largeur, la hauteur se calcule seule, l'image remplit sans se déformer.
   USAGE : classe z-media sur le CONTENEUR de l'image (+ un modificateur pour
   changer de ratio). L'<img>/<video> à l'intérieur remplit automatiquement.
   ============================================================================= */
.z-media {
  aspect-ratio: var(--ratio-photo);  /* 3:2 par défaut */
  width: 100%;
  overflow: hidden;
}
.z-media > img,
.z-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* remplit le cadre, recadre proprement */
  display: block;
}
.z-media--wide     { aspect-ratio: var(--ratio-wide); }
.z-media--classic  { aspect-ratio: var(--ratio-classic); }
.z-media--portrait { aspect-ratio: var(--ratio-portrait); }
.z-media--square   { aspect-ratio: var(--ratio-square); }


/* =============================================================================
   5c. PLAN DU SITE (footer)
   -----------------------------------------------------------------------------
   Grille de colonnes pour le plan du site en pied de page. Calé sur la maquette :
   titres Chivo Mono capitales + liens Chivo Mono ExtraLight, échelle fine.
   STRUCTURE ATTENDUE :
     .z-sitemap > .col > (.col-titre > a) + (ul > li > a)
   USAGE : classe z-sitemap sur le conteneur parent (Avancé → Classes CSS).
   Fond clair (texte encre) par défaut ; sur fond sombre, ajoute z-invert.
   ============================================================================= */
.z-sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-l);
}
.z-sitemap .col {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);           /* titre → liste */
}

/* Titre de colonne : Chivo Mono, capitales, petit */
.z-sitemap .col-titre a {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text--1);     /* 13 → 14px */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg);
  text-decoration: none;
}

/* Liste de liens : Chivo Mono ExtraLight, sentence case */
.z-sitemap ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.z-sitemap li a {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 200;              /* ExtraLight */
  font-size: var(--text--1);     /* 13 → 14px */
  line-height: 1.5;
  color: var(--color-fg);
  text-decoration: none;
  transition: color .25s ease;
}

/* Soulignement gauche → droite au survol */
.z-sitemap li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: var(--color-fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.z-sitemap li a:hover::after { transform: scaleX(1); }


/* =============================================================================
   6. RÔLES TYPOGRAPHIQUES
   -----------------------------------------------------------------------------
   Applique la classe dans le widget, OU laisse le mapping H1-H3 ci-dessous
   faire le travail automatiquement pour les titres.
   ============================================================================= */

/* --- Logo ---------------------------------------------------------------- */
.z-logo {
  font-family: var(--font-logo);
  font-weight: var(--weight-logo);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

/* --- Titres H1/H2/H3 : Plus Jakarta Sans Bold ---------------------------- */
.z-display,
.entry-content h1, .entry-content h2, .entry-content h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
/* Tailles par niveau (modifie si besoin) */
h1, .z-h1 { font-size: var(--text-6); }
h2, .z-h2 { font-size: var(--text-4); }
h3, .z-h3 { font-size: var(--text-3); }

/* --- Navigation : Chivo sans, capitales ---------------------------------- */
.z-nav {
  font-family: var(--font-nav);
  font-weight: var(--weight-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-0);
}

/* --- Micro-textes & sous-niveaux de nav : Plus Jakarta Sans Light --------- */
.z-fine {
  font-family: var(--font-fine);
  font-weight: var(--weight-fine);
  font-size: var(--text--1);
  line-height: var(--leading-snug);
}
.z-subnav {                  /* sous-niveau de navigation */
  font-family: var(--font-fine);
  font-weight: var(--weight-fine);
  font-size: var(--text--1);
  letter-spacing: 0.02em;
}

/* --- Utilitaires ---------------------------------------------------------- */
.z-eyebrow {                 /* sur-titre en capitales (structure = info) */
  font-family: var(--font-nav);
  font-weight: var(--weight-nav);
  font-size: var(--text--1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}
.z-lead { font-size: var(--text-2); line-height: var(--leading-snug); }

/* --- Liens de contenu ----------------------------------------------------
   Accessible sur fond clair ET sombre : texte en encre (contraste OK),
   soulignement sable (accent décoratif, pas soumis au contraste texte),
   épaissi et décalé au survol. À poser sur les liens DANS le corps de texte
   (pas sur les boutons, qui ont leur propre style). Sur z-invert, le texte
   passe en clair automatiquement, le soulignement sable reste. */
.z-link {
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color .2s ease,
              text-decoration-thickness .2s ease,
              text-underline-offset .2s ease;
}
.z-link:hover {
  text-decoration-color: var(--color-fg);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}


/* =============================================================================
   7. FONDS DE SECTION & INVERSION DE THÈME
   -----------------------------------------------------------------------------
   Applique une classe de fond sur le CONTENEUR de section (Avancé → Classes CSS).
   Chaque fond vient d'un token sémantique → une seule source, repeignable, et
   le mode sombre bascule tout seul. (On ne tape jamais var() dans le picker
   couleur d'Elementor : il ne le sauvegarde pas de façon fiable.)
   ============================================================================= */

/* Fond clair (blanc cassé) — souvent inutile car c'est déjà le fond de page,
   mais pratique pour forcer un retour au clair après une section sombre. */
.z-bg {
  background: var(--color-bg);
  color: var(--color-fg);
}

/* Fond sable (accent) — sections d'emphase. Texte sombre conservé (sable clair). */
.z-bg-sand {
  background: var(--color-accent);
  color: var(--color-fg);
}

/* Fond sombre (noir) : z-invert repeint bg/fg/line en mode sombre,
   et TOUT ce qui utilise les alias sémantiques suit automatiquement. */
.z-invert {
  --color-bg:   var(--color-invert-bg);
  --color-fg:   var(--color-invert-fg);
  --color-line: var(--color-invert-fg);
  --color-muted: #A8A8A8;
  background: var(--color-bg);
  color: var(--color-fg);
}


/* =============================================================================
   8. BRUTALISME  — SQUELETTE À DÉFINIR ENSUITE
   -----------------------------------------------------------------------------
   Volontairement minimal : on branchera le look ici (bordures, ombres dures,
   grain, trames zellige) une fois la direction validée. Décommente/étoffe.
   ============================================================================= */
/*
.z-box {
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  background: var(--color-bg);
}
.z-btn {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-xs) var(--space-m);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-bg);
  box-shadow: var(--shadow-hard);
  transition: transform .12s, box-shadow .12s;
}
.z-btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 0 var(--color-line); }
.z-btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 0 var(--color-line); }
*/


/* =============================================================================
   NAVIGATION SUPÉRIEURE — se fixe en haut après le hero, se rétracte au scroll
   -----------------------------------------------------------------------------
   Pourquoi pas position:sticky ? La barre est le DERNIER élément de son
   conteneur d'en-tête : un élément sticky ne peut coller qu'à l'intérieur de son
   parent, or il ne reste ici 0 px de course. Elle partait donc simplement hors
   écran. On la sort du flux en position:fixed via JS (classe is-stuck), avec un
   cale-espace qui compense la hauteur libérée.
   CLASSES PILOTÉES EN JS :
     is-stuck  → la barre est plaquée en haut de la fenêtre
     is-hidden → elle est rétractée (scroll vers le bas)
   ============================================================================= */
.z-nav-sup {
  position: relative;              /* en flux : PAS de sticky (aucune course dispo) */
  z-index: 1000;
  border-bottom: 1px solid var(--color-line);
  padding: 0;
  margin: 0 auto;
  gap: var(--space-m);
  width: calc(100% - var(--space-s) * 2);
}

/* État collé : sortie du flux, plaquée en haut de la fenêtre */
.z-nav-sup.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;                     /* left/right + margin gèrent la gouttière */
  margin: 0 var(--space-s);
  background: var(--color-bg);     /* indispensable : sinon le contenu défile dessous */
  transform: translateY(0);
  transition: transform .35s ease;
  will-change: transform;
}

/* Décalage sous la barre d'admin WordPress (utilisateur connecté uniquement) */
body.admin-bar .z-nav-sup.is-stuck { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .z-nav-sup.is-stuck { top: 46px; }
}

/* Rétractée : scroll vers le bas */
.z-nav-sup.is-stuck.is-hidden { transform: translateY(-100%); }

/* Cale-espace inséré par le JS, masqué tant que la barre est en flux */
.z-nav-sup-spacer { display: none; }

/* Accessibilité : ni animation ni masquage si reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .z-nav-sup.is-stuck { transition: none; }
  .z-nav-sup.is-stuck.is-hidden { transform: translateY(0); }
}

.z-nav-sup p { margin-bottom: 0; }

/* --- Titre de colonne : Chivo ExtraLight, capitales, petit --- */
.z-nav-sup .col-titre a {
  font-family: var(--font-nav);
  font-weight: var(--weight-nav);
  font-size: var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-fg);
  text-decoration: none;
  padding: 0;
  margin: 0;
}

/* =============================================================================
   CTA « LEARN MORE + pastille » — d'après Figma frame 20 (BTN 11079:16958)
   -----------------------------------------------------------------------------
   HTML attendu :
     <a class="z-cta" href="#">Learn more <span>about us now</span></a>
   Le libellé reste nu, le complément est surligné dans une pastille pleine.
   Au survol, un surlignement noir se déploie de la gauche vers la droite
   par-dessus le sable, et le texte passe en blanc.
   Les 3 couleurs passent par des variables locales → surchargeables par section
   (voir la règle .z-invert en bas) sans toucher au composant.
   ============================================================================= */
.z-cta {
  --cta-fill:       var(--color-accent);      /* remplissage au repos (sable) */
  --cta-fill-hover: var(--zelij-noir);        /* surlignement qui se déploie */
  --cta-ink-hover:  var(--zelij-blanc);       /* texte de la pastille au survol */
  --cta-duree:      .5s;                     /* durée du balayage */

  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);                      /* 8 → 12 px (10 px dans la maquette) */

  font-family: var(--font-nav);               /* Chivo */
  font-weight: var(--weight-nav);
  font-size: var(--text--1);                  /* 13 → 14 px */
  line-height: 1.7;                          /* = 28/13, l'interligne de la maquette */
  text-transform: uppercase;
  color: var(--color-fg);
  text-decoration: none;
}

/* La pastille surlignée.
   DEUX couches de fond empilées :
     1. background-image = le surlignement noir, largeur 0 %, ancré à gauche
     2. background-color = le sable permanent, en dessous
   On n'anime que la largeur de la couche 1 → effet de balayage gauche → droite.
   Le texte, lui, est toujours peint au-dessus des fonds : rien à isoler. */
.z-cta span {
  padding: var(--space-3xs);                  /* 4 → 6 px, uniforme comme en maquette */
  letter-spacing: 0.03em;                     /* = 0,39 px à 13 px */
  color: var(--color-fg);
  border-radius: var(--radius);               /* 0 : angles vifs */

  background-color: var(--cta-fill);
  background-image: linear-gradient(var(--cta-fill-hover), var(--cta-fill-hover));
  background-repeat: no-repeat;
  background-position: left center;           /* point d'ancrage du balayage */
  background-size: 0% 100%;                   /* au repos : invisible */

  /* Le texte bascule en blanc en cours de balayage, pas au tout début :
     petit délai pour éviter le blanc sur sable pendant la traversée. */
  transition: background-size var(--cta-duree) ease,
              color .15s ease .12s;
}

/* Survol et navigation clavier traités ensemble */
.z-cta:hover span,
.z-cta:focus-visible span {
  background-size: 100% 100%;
  color: var(--cta-ink-hover);
}

/* L'anneau de focus se pose sur le lien entier, pas sur la pastille */
.z-cta:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.z-cta:focus-visible span { outline: none; }

/* Sans animation : le surlignement apparaît d'un coup, sans balayage */
@media (prefers-reduced-motion: reduce) {
  .z-cta span { transition: none; }
}

/* Sur fond sombre, on inverse l'inversion : sinon noir sur noir */
.z-invert .z-cta {
  --cta-fill-hover: var(--zelij-blanc-casse);
  --cta-ink-hover:  var(--zelij-noir);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://new.zelij.com/wp-content/uploads/2026/07/plusjakartasans-thin.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://new.zelij.com/wp-content/uploads/2026/07/plusjakartasans-light.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://new.zelij.com/wp-content/uploads/2026/07/plusjakartasans-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://new.zelij.com/wp-content/uploads/2026/07/plusjakartasans-bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Chivo';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://new.zelij.com/wp-content/uploads/2026/07/chivo-thin.woff2') format('woff2');
}
@font-face {
	font-family: 'Chivo';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://new.zelij.com/wp-content/uploads/2026/07/chivo-extralight.woff2') format('woff2');
}
@font-face {
	font-family: 'Chivo';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://new.zelij.com/wp-content/uploads/2026/07/chivo-bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Chivo Mono';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://new.zelij.com/wp-content/uploads/2026/07/chivomono-thin.woff2') format('woff2');
}
@font-face {
	font-family: 'Chivo Mono';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://new.zelij.com/wp-content/uploads/2026/07/chivomono-extralight.woff2') format('woff2');
}
/* End Custom Fonts CSS */