.elementor-kit-6{--e-global-color-primary:#000000;--e-global-color-secondary:#F2F2F0;--e-global-color-text:#171717;--e-global-color-accent:#EABC72;--e-global-color-31e483a:#847B6B;--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;}.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 p{margin-block-end:0px;}.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 — FEUILLE DE STYLE GLOBALE (Kit Elementor, post 6)
   Version réorganisée du 2026-09-08 — même rendu que la version précédente
   (sauvegarde : extrait Code Snippets 127, inactif ; référence : zelij-style.css
   du projet ; utilitaires non utilisés sortis dans zelij-reserve.css).
   =============================================================================
   SOMMAIRE
     1. CONVENTIONS
     2. TOKENS (:root)          — couleurs, espacements, layout, plan z, mouvement,
                                  hooks, filets haute densité, typographie
     3. BASE                    — body (accent, alertes), sélection, ancres,
                                  reduced-motion, focus
     4. TYPOGRAPHIE             — titres, surtitre, boutons, marqueur <b>
     5. STRUCTURE               — gouttière de page, filets z-line, grilles JetEngine,
                                  pages simples et éditoriales (padding)
     6. NAVIGATION SUPÉRIEURE   — barre frostée, resserrement, filet, logo, menu
     7. PIED DE PAGE            — plan du site .z-plan, CTA de pied de page
     8. BALAYAGES               — nav centrale, SVG (logo, icônes), fil d'Ariane
     9. BOUTONS                 — .z-cta, .z-btn / .z-btn-dl, boutons de formulaire
    10. IMAGES & LISTINGS       — voile des images-liens, cartes, tuiles, archives
    11. SLIDER DES VISUELS      — fiche model / projet / information, carte « main model »
    12. POPUP & FILTRES         — menu pop-up, cases JetSmartFilters
    13. FORMULAIRES             — Contact us (Elementor Pro), Rendez-vous (JetEngine
                                  Forms + calendrier), alertes
    14. ACCORDÉONS              — Legal, Terms, Our story (.z-legal-wrap)
    15. PAGES ÉDITORIALES       — Services, Our story, Resource center
   =============================================================================
   1. CONVENTIONS
   -----------------------------------------------------------------------------
   • Préfixe « z- » sur toutes les classes maison (collision impossible avec
     Elementor). Exception héritée : .nav-center (déjà posée dans les pages —
     ne pas renommer sans mettre à jour les widgets).
   • USAGE ELEMENTOR : nom de classe (sans le point) dans Avancé → Classes CSS.
   • On ne câble JAMAIS un widget sur une couleur de marque (--zelij-*) :
     toujours passer par un alias sémantique (--color-*). Repeindre le site
     = changer quelques lignes de tokens.
   • Jamais var() dans le picker couleur d'Elementor (sauvegarde non fiable).
   • SPÉCIFICITÉ (à savoir avant de modifier) :
       h2 ....................................................... (0,0,1)
       .elementor-widget-heading .elementor-heading-title ........ (0,2,0)  polices globales
       .elementor-NNN .elementor-element.elementor-element-xxxxx . (0,3,0)  réglage widget
     Une règle (0,2,0) du Kit est battue par la typo globale d'Elementor quand
     celle-ci arrive après (post-NNN.css) : préfixer (.z-xxx .z-xxx__y …).
     Un titre qui résiste au Kit porte un réglage widget : le vider dans Elementor.
   • Chargement différé Elementor : « .e-parent:nth-of-type(n+2):not(.e-lazyloaded) * »
     reçoit background-image: none — pour un effet de fond animé, préférer un
     pseudo-élément (::before) à un background-image.
   ============================================================================= */

/* =============================================================================
   2. TOKENS  (:root)
   ============================================================================= */
:root {
  /* --- 2.1 COULEURS DE MARQUE (issues de la maquette Figma) ------------------ */
  --zelij-noir:        #0A0A0A;   /* Neutral Darkest (#000 adouci) — encre & fonds sombres */
  --zelij-blanc-casse: #FBF8F5;   /* blanc cassé chaud (off-white) */
  --zelij-blanc:       #FFFFFF;   /* blanc pur — highlights sur fond sombre */
  --zelij-muted:       #6B6B6B;   /* texte secondaire, légendes (fond clair) */
  --zelij-muted-inv:   #A8A8A8;   /* texte secondaire sur fond sombre */
  --zelij-fluo:        #CCFF33;   /* vert fluo, contrepoint de l'accent sable — curseur (§16) */
  /* --zelij-accent (ex-sable) : déclaré dans la règle body, section 3 —
     sa valeur vient des Couleurs globales Elementor.
     Anciens accents disponibles si besoin d'un pop : vert #0B9954, terracotta #C4683A */

  /* --- 2.2 ALIAS SÉMANTIQUES (utilise CEUX-CI dans les widgets) --------------- */
  --color-bg:        var(--zelij-blanc-casse);
  --color-fg:        var(--zelij-noir);
  --color-muted:     var(--zelij-muted);
  /* --color-accent, --color-accent-ink, --color-accent-pale, --color-alerte* :
     déclarés dans la règle body, section 3 (dépendent de --e-global-color-accent) */
  --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);
  --color-accent-fluo: var(--zelij-fluo);   /* « accentfluo » : curseur, à réserver aux touches vives */

  /* --- 2.3 ÉCHELLE D'ESPACEMENT FLUIDE (390 → 1440) ---------------------------
     Une seule échelle pour TOUT : marges, paddings, gaps, gouttières.
     Commentaire = valeur mini → maxi en px. */
  --space-4xs: clamp(0.125rem, 0.113rem + 0.05vw, 0.1875rem);  /*  2 →   3 (moitié de 3xs) */
  --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 */
  --space-3xl: clamp(5rem,     1.657rem + 13.71vw, 14rem);     /* 80 → 224 */
  --space-4xl: clamp(7rem,     2.171rem + 19.81vw, 20rem);     /* 112 → 320 */

  /* --- 2.4 LAYOUT ---------------------------------------------------------- */
  --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%;
  --measure:       66ch;               /* largeur de lecture confortable */
  --pad-page:      var(--space-l);     /* marge latérale de page */
  --gutter:        var(--space-m);     /* gouttière de grille par défaut */
  --section-space: var(--space-2xl);   /* rythme vertical entre sections */
  /* Formats d'image (aspect-ratio) */
  --ratio-wide:     16/9;
  --ratio-photo:    3/2;
  --ratio-classic:  4/3;
  --ratio-portrait: 4/5;
  --ratio-square:   1/1;

  /* --- 2.5 PLAN DE SUPERPOSITION (z-index) --------------------------------- */
  --z-flow:      1;      /* barre de nav EN FLUX : glisse sous le hero */
  --z-hero:      1000;   /* hero sticky (réglé côté JetTricks — pour mémoire) */
  --z-fixed-nav: 1100;   /* barre de nav FIXÉE : au-dessus de tout */
  --z-top:       1200;   /* flèche « retour en haut » (§16) */
  --z-cursor:    1300;   /* curseur fluo (§16) */

  /* --- 2.6 MOUVEMENT — balayages & transitions ----------------------------
     Les effets « balayage sable » (nav-center, z-swipe, liens de listing…)
     partagent la même signature : une seule source de vérité ici. */
  --ease-sweep:  cubic-bezier(0.33, 0, 0.12, 1);   /* souple, ralenti en fin */
  --dur-sweep:   .6s;
  --sweep-from:  38%;   /* début de la zone de fondu du dégradé */
  --sweep-to:    62%;   /* fin (38→62 = fondu doux) */

  /* --- 2.7 HOOKS (angles, filets, ombres) ---------------------------------- */
  --radius:      0px;                              /* angles vifs */
  --filet-ep:    1px;                              /* filet fin ; 0.5px en haute densité (2.8) */
  --border-w:    2px;                              /* filet dur */
  --border:      var(--border-w) solid var(--color-line);
  --hairline:    var(--filet-ep) solid var(--color-line);
  --shadow-hard: 6px 6px 0 0 var(--color-line);
  /* --focus-ring : déclaré dans la règle body (dépend de --color-accent) */
}
/* --- 2.8 FILETS FINS SUR ÉCRAN À HAUTE DENSITÉ ------------------------------
   Sur un écran à 2x et plus, 0.5px CSS = 1 pixel physique : le filet garde sa
   netteté en paraissant deux fois plus fin. Sur un écran à 1x, la valeur serait
   arrondie de façon imprévisible, d'où la requête de densité. Tous les filets
   fins passent par ce jeton ; le filet DUR (--border-w) et l'anneau de focus
   ne sont pas concernés. */
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  :root { --filet-ep: 0.5px; }
}
/* --- 2.9 TYPOGRAPHIE : jetons ---------------------------------------------- */
:root{
  /* Familles — 1 jeton 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, ExtraBold 800 */
  --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, ExtraLight 200 */
  --font-body:    var(--font-mono);
  /* Graisses de référence */
  --weight-logo:    700;
  --weight-display: 800;
  --weight-body:    200;   /* Chivo Mono — graisse du corps de texte */
  --weight-nav:     200;   /* Chivo ExtraLight */
  --weight-fine:    200;
  --weight-accordeon: 400;
  --weight-label:   300;   /* libellés en capitales des lignes (catégorie d'award, publication d'un portrait) — un cran au-dessus de --weight-fine */   /* en-têtes d'accordéon (§14, FAQ snippet 65) — Regular ; 500 souhaité mais la Medium n'est pas chargée (polices personnalisées : 200/300/400/700/800) */
  /* Échelle fluide : clamp(mobile, progression, grand écran) — en px : */
  --text--3: clamp(0.563rem, 0.539rem + 0.10vw, 0.625rem);   /*  9 → 10 */
  --text--2: clamp(0.688rem, 0.664rem + 0.10vw, 0.75rem);    /* 11 → 12 */
  --text--1: clamp(0.813rem, 0.789rem + 0.10vw, 0.875rem);   /* 13 → 14 */
  --text-0:  clamp(0.875rem, 0.829rem + 0.19vw, 1rem);       /* 14 → 16 */
  --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 */
  --text-display: clamp(2.5rem, 5vw, 4rem);                  /* 40 → 64 : h1 et h2 */
  /* Interlignes et approches */
  --leading-tight: 1.1;    /* titres (h1–h3) */
  --leading-snug:  1.45;
  --leading-body:  1.85;
  --tracking-tight: -0.02em;
  --tracking-wide:   0.08em;   /* eyebrows / labels en capitales */
  --tracking-nav:    0.05em;
}

/* =============================================================================
   3. BASE  (léger, non intrusif pour l'UI Elementor)
   ============================================================================= */
body {
  /* COULEUR D'ACCENT — source unique : Elementor > Réglages du site > Couleurs globales.
     Déclarée ici et non dans :root : Elementor pose --e-global-color-accent sur body,
     or une variable résout son var() sur l'élément où elle est déclarée. NE PAS DÉPLACER. */
  --zelij-accent: var(--e-global-color-accent, #DDC191);
  --color-accent: var(--zelij-accent);
  --focus-ring:   3px solid var(--color-accent);
  /* Accent ASSOMBRI pour du texte : H1, titres de section, nav courante, fil
     d'Ariane, survols. 70 % accent + 30 % noir (~3,15:1 sur fond clair). */
  --color-accent-ink:  color-mix(in srgb, var(--color-accent) 85%, var(--zelij-noir));
  /* Accent très pâle : fond au repos des cases de filtre. */
  --color-accent-pale: color-mix(in srgb, var(--color-accent) 20%, var(--color-bg));
  /* Couleur d'ALERTE : rouge poudre, même mécanique (source, encre, pâle). */
  --zelij-alerte:      #C4756B;
  --color-alerte:      var(--zelij-alerte);
  --color-alerte-ink:  color-mix(in srgb, var(--color-alerte) 70%, var(--zelij-noir));
  --color-alerte-pale: color-mix(in srgb, var(--color-alerte) 20%, var(--color-bg));
  /* Corps de texte */
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1);
  line-height: var(--leading-body);
  text-wrap: pretty;               /* hérité : pas de mot isolé en fin de bloc (les titres : balance, §4) */
  background: var(--color-bg);
  color: var(--color-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Sélection de texte aux couleurs de la marque */
::selection {
  background: var(--color-accent);
  color: var(--zelij-noir);
}
/* Ancres : le contenu ciblé (#id) ne se cache pas sous la barre de nav fixée */
[id] { scroll-margin-top: var(--space-xl); }
/* Accessibilité : reduced-motion global — coupe TOUTES les transitions et animations
   du site (règle !important) ; aucun composant n'a besoin de sa propre exception. */
@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. TYPOGRAPHIE — titres, surtitre, boutons, marqueur <b>
   (jetons : 2.9 ; corps : body, 3). Une nouvelle règle de texte vient ici.
   Typographie restée dans sa section composant : .z-nav-sup .col-titre a,
   .nav-center a, .z-plan, .z-cta / .z-btn-dl, .jet-listing-grid__item h3,
   .zelij-model-slider__*, .z-subnav-ancres a.
   ============================================================================= */
/* --- 4.1 Titres --------------------------------------------------------------- */
/* Habillage commun : interligne serré et approche négative */
.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);
}
/* Taille par niveau */
h1, .z-h1 { font-size: var(--text-display); text-transform: uppercase; }
h2, .z-h2 { font-size: var(--text-display); font-weight: 700; }
h3, .z-h3 { font-size: var(--text-2); }
/* Couleur de TOUS les H1 = accent assombri. Les sélecteurs Elementor / JetEngine
   passent devant la couleur globale que ces widgets posent sur leur titre (0,2,1),
   sans !important. Aucune couleur de H1 n'est posée « en dur » dans les widgets. */
h1, .z-h1,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget h1.jet-listing-dynamic-field__content,
.elementor-widget h1 .jet-listing-dynamic-field__content {
  color: var(--color-accent-ink, color-mix(in srgb, var(--color-accent) 70%, var(--zelij-noir)));
}
/* Reprise de la main sur les widgets Titre d'Elementor (0,2,0) */
h1, .z-h1,
h2, .z-h2,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title{
  font-family: var(--font-display);
  font-weight: var(--weight-display);
}
.elementor-widget-heading h1.elementor-heading-title{
  font-size: var(--text-display);
  text-transform: uppercase;
}
.elementor-widget-heading h2.elementor-heading-title{
  font-size: var(--text-display);
}
/* h3 des widgets Titre sans réglage propre : Chivo Mono 400 (corps). Décision du
   08/09 : la règle portait « font-family: var(--text-display) » (jeton de taille,
   déclaration invalide → héritage de body) ; on écrit explicitement ce rendu. */
.elementor-widget-heading h3.elementor-heading-title.elementor-size-default{
  font-family: var(--font-fine);
  font-weight: var(--weight-fine);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
}
/* Équilibre des lignes de titre (ignoré si non géré) */
h1, h2, h3, h4, h5, h6,
.z-h1, .z-h2, .z-h3, span{
  text-box: trim-both cap alphabetic;
  text-wrap: balance;
}
/* Interlignage unique des textes courants : la typographie globale « Texte » d'Elementor pose
   1.6em sur chaque widget Texte (post-NNN.css) — le jeton reprend la main (09/09). */
.elementor-kit-6 .elementor-widget-text-editor,
.elementor-kit-6 .elementor-widget-text-editor p,
.elementor-kit-6 .jet-listing-dynamic-field__content:not(h1):not(h2):not(h3),
.elementor-kit-6 .elementor-widget-text-editor .elementor-widget-container{ line-height: var(--leading-body); }
/* --- 4.1b H1 d'intro de l'accueil, lu comme un H2 ------------------------------
   Le titre saisi dans « Page d'accueil » > Intro > Titre est le H1 de la page
   (referencement), mais doit se lire comme les H2 ALCHEMY / MATTER : meme
   corps, meme graisse, ni capitales forcees ni encre accent. La classe est posee
   sur le widget Titre bae0038 de la page 275 (18/09). Specificite (0,3,1) pour
   passer devant la reprise Elementor du 4.1. */
.elementor-widget-heading.z-h1-comme-h2 h1.elementor-heading-title{
  font-size: var(--text-display);
  font-weight: var(--weight-display);   /* 800, comme les H2 rendus */
  text-transform: none;
  color: var(--e-global-color-primary, inherit);   /* la couleur exacte des H2 : celle qu'Elementor pose sur les titres de widget — annule l'encre accent des H1 */
}
/* champ non renseigne : pas de boite vide au-dessus du texte d'intro */
.elementor-widget-heading.z-h1-comme-h2:has(h1:empty){ display: none; }
/* --- 4.2 Surtitre ---------------------------------------------------------------
   Capitales, petit, légèrement espacé. Aucune couleur imposée : il prend celle de
   son bloc. Posé comme classe sur le widget ; vise aussi les liens intérieurs
   (termes JetEngine) et le titre d'un widget Titre (sinon la règle de widget
   d'Elementor (0,2,0) imposerait sa famille). */
.z-surtitre,
.z-surtitre a,
.elementor-widget-heading.z-surtitre .elementor-heading-title{
  font-family: var(--font-nav);
  font-weight: var(--weight-nav);
  font-size: var(--text--2);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
/* --- 4.3 Boutons natifs ---------------------------------------------------------
   Préfixe .elementor-kit-6 obligatoire : sans lui Elementor (0,1,1) gagne. */
.elementor-kit-6 button,
.elementor-kit-6 input[type="button"],
.elementor-kit-6 input[type="submit"],
.elementor-kit-6 .elementor-button{
  font-family: var(--font-nav);
  font-weight: 100;
  text-transform: uppercase;
}
/* --- 4.4 SURLIGNEMENT : la balise b -----------------------------------------------
   La balise b ne met plus en gras : elle surligne. Fondu PRODUIT (multiply) : la
   bande assombrit ce qui est dessous. Elle est plus courte que le mot, décalée et
   légèrement inclinée : une part du texte reste dehors, comme un marqueur.
   GÉOMÉTRIE : les deux bornes du dégradé sont posées à 50 % de la ligne ± la
   moitié de l'épaisseur, en em — les bords restent PARALLÈLES et l'épaisseur
   constante quelle que soit la largeur du mot ; chaque borne est un petit fondu
   (--marque-flou) pour éviter l'escalier de pixels d'un bord incliné.
   L'inclinaison vient de l'angle du dégradé, pas d'une rotation (qui casserait
   le passage à la ligne) ; elle reste sous 1,2° pour ne pas dériver sur un long
   passage. Huit allures sont brassées par la place du mot dans son bloc et du
   bloc dans son parent : deux surlignements voisins ne tombent jamais pareil.
   Aucun effet sur l'interlignage (marge verticale d'un élément en ligne). */
:root{
  --marque-ep:        1.05em;    /* épaisseur de la bande */
  --marque-centre-y: -0.04em;    /* déplacement du milieu de la bande */
  --marque-angle:     180.9deg;  /* 180deg = horizontal */
  --marque-flou:      0.75px;    /* fondu des bords : anticrénelage */
  --marque-marge-y:   0.30em;    /* respiration haut et bas */
  --marque-marge-x:   0.32em;    /* respiration latérale */
  --marque-retrait:   1.10em;    /* longueur perdue : la part non surlignée */
  --marque-dx:        0.42em;    /* décalage horizontal */
}
b{
  font-weight: inherit;   /* marqueur, pas gras */
  padding: var(--marque-marge-y) var(--marque-marge-x);
  --marque-h: calc(50% + var(--marque-centre-y) - var(--marque-ep) / 2);
  --marque-b: calc(50% + var(--marque-centre-y) + var(--marque-ep) / 2);
  background-image: linear-gradient(var(--marque-angle),
      transparent         calc(var(--marque-h) - var(--marque-flou)),
      var(--color-accent) calc(var(--marque-h) + var(--marque-flou)),
      var(--color-accent) calc(var(--marque-b) - var(--marque-flou)),
      transparent         calc(var(--marque-b) + var(--marque-flou)));
  background-repeat: no-repeat;
  background-size: max(38%, calc(100% - var(--marque-retrait))) 100%;
  background-position: var(--marque-dx) 0;
  mix-blend-mode: multiply;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Le tirage. Ordre important : les règles de même poids se départagent par
   leur position, c'est ce brassage qui fait l'irrégularité. */
b:nth-of-type(2n){    --marque-retrait: 1.55em; --marque-dx: -0.28em; --marque-ep: 1.18em; --marque-centre-y:  0.06em; --marque-angle: 179.2deg; }
b:nth-of-type(3n+2){  --marque-retrait: 0.85em; --marque-dx:  0.30em; --marque-ep: 0.88em; --marque-centre-y: -0.10em; --marque-angle: 181.1deg; }
:nth-child(2n) > b{   --marque-retrait: 1.30em; --marque-dx:  0.55em; --marque-ep: 1.12em; --marque-centre-y:  0.09em; --marque-angle: 179.5deg; }
:nth-child(3n) > b{   --marque-retrait: 1.75em; --marque-dx:  0.16em; --marque-ep: 0.95em; --marque-centre-y: -0.06em; --marque-angle: 180.6deg; }
:nth-child(5n) > b{   --marque-retrait: 0.95em; --marque-dx:  0.62em; --marque-ep: 1.20em; --marque-centre-y:  0.02em; --marque-angle: 178.9deg; }
:nth-child(2n) > b:nth-of-type(2n){   --marque-retrait: 1.45em; --marque-dx: -0.12em; --marque-ep: 0.90em; --marque-centre-y: -0.12em; --marque-angle: 180.4deg; }
:nth-child(3n) > b:nth-of-type(3n){   --marque-retrait: 1.10em; --marque-dx:  0.42em; --marque-ep: 1.05em; --marque-centre-y: -0.04em; --marque-angle: 180.9deg; }
:nth-child(2n) > b:nth-of-type(3n+2){ --marque-retrait: 1.60em; --marque-dx:  0.34em; --marque-ep: 1.00em; --marque-centre-y:  0.08em; --marque-angle: 179.1deg; }
/* Titres : interligne serré, marge verticale réduite. */
h1 b, h2 b, h3 b,
.z-h1 b, .z-h2 b, .z-h3 b{
  --marque-marge-y: 0.06em;
  --marque-ep: 0.98em;
  --marque-centre-y: 0.02em;
}

/* =============================================================================
   5. STRUCTURE
   ============================================================================= */
/* --- 5.1 Gouttière globale de page ---------------------------------------------
   Retrait minimal gauche/droite sur les 3 zones du thème Hello. */
.site-main,
.elementor-location-header,
.elementor-location-footer {
  padding-inline: var(--space-s);
}
/* Pages simples bâties sur Contact us : le bloc titre s'aligne sur les archives
   (les gabarits d'archive posent leur hero au bord du viewport ; le template
   par défaut ajoute la marge de page du thème, d'où 24 px de décalage). */
.page-id-2328 main.site-main,          /* Contact us */
.page-id-2463 main.site-main,          /* Book an appointment */
.page-id-2557 main.site-main,          /* Legal notice */
.page-id-2562 main.site-main,          /* Terms and conditions */
.page-id-2637 main.site-main,          /* Services */
.page-id-2638 main.site-main,          /* Our story */
.page-id-2639 main.site-main{          /* Resource center */
  padding-inline: var(--space-s);
}
/* --- 5.2 Filets : trait fin haut / bas + respiration côté trait ------------------
   Branchés sur --hairline. Cumulables. Respiration surchargeable via --line-gap.
   NB : si le conteneur a déjà un padding Elementor, les deux s'additionnent. */
.z-line-top {
  border-top: var(--hairline);
  padding-top: var(--line-gap, var(--space-s));
}
.z-line-bottom {
  border-bottom: var(--hairline);
  padding-bottom: var(--line-gap, var(--space-s));
}

.z-line-left {
  border-inline-start: var(--hairline);  /* logique : bordure côté « début » */
  margin-inline: auto 0;   /* auto à gauche, 0 à droite → le bloc est poussé à droite */
  padding-left: var(--line-gap, var(--space-s));
}

.z-line-right {
  border-inline-end: var(--hairline);  /* logique : bordure côté « fin » */
  margin-inline: 0 auto;   /* 0 à gauche, auto à droite → le bloc est poussé à gauche */
  padding-right: var(--line-gap, var(--space-s));
}
/* --- 5.3 Grilles JetEngine : marge négative de compensation --------------------- */
.jet-listing-grid__items {
  margin: calc(-.5 * var(--space-s)) calc(-.5 * var(--space-s));
}
/* --- 5.4 Fond sombre (.z-invert) --------------------------------------------------
   Repeint bg/fg/line en mode sombre ; les composants qui lisent les alias suivent
   (variantes .z-invert .z-cta / .z-btn-dl en §9). */
.z-invert {
  --color-bg:    var(--color-invert-bg);
  --color-fg:    var(--color-invert-fg);
  --color-line:  var(--color-invert-fg);
  --color-muted: var(--zelij-muted-inv);
  background: var(--color-bg);
  color: var(--color-fg);
}

/* =============================================================================
   6. NAVIGATION SUPÉRIEURE (.z-nav-sup, modèle 246 — entêtes 215 / 257)
   -----------------------------------------------------------------------------
   Barre frostée qui se fixe après le hero. Le hero est une section sticky
   JetTricks (z-index --z-hero) : en flux, la barre a un z-index INFÉRIEUR
   (--z-flow) et glisse DERRIÈRE lui ; une fois dépassée (classe is-stuck posée
   par le pilote JS, code 217), elle repasse AU-DESSUS (--z-fixed-nav) en barre
   fixe translucide avec flou d'arrière-plan.
   CLASSES PILOTÉES EN JS : is-stuck (fixée) · is-hidden (escamotée, rétabli le
   03/09 : glisse hors écran en descente, revient en remontée).
   RESSERREMENT : le pilote accumule le sens du geste dans --k (0 au sommet,
   1 après 360 px de descente). --reduc en dérive et multiplie le logo, les
   pictogrammes et les marges verticales (-62 % maxi) ; --reduc-texte (-35 %)
   les entrées du menu. La hauteur de la barre découle de son contenu.
   GOUTTIÈRE : la barre fait calc(100% - 2 * --space-s) et se centre ; fond et
   filet s'arrêtent donc à --space-s des bords, au flux comme collée. Sur la
   home, la barre est dans le contenu de la page (275) dont le conteneur porte
   déjà la gouttière : pleine largeur tant qu'elle est au flux.
   ============================================================================= */
.z-nav-sup {
  --reduc:       calc(1 - .62 * var(--k, 0));
  --reduc-texte: calc(1 - .35 * var(--k, 0));
  position: relative;
  z-index: var(--z-flow);              /* SOUS le hero sticky */
  width: calc(100% - 2 * var(--space-s));
  margin: 0 auto;
  padding: calc(var(--space-3xs) * var(--reduc)) 0;
  gap: 0;
  border-bottom: 0;                    /* le filet est dessiné en ::after (voir ci-dessous) */
}
.z-nav-sup p { margin: 0; }
/* Le conteneur d'entête qui porte le widget Modèle de la barre avait 24 px de
   gouttière : on l'annule, la barre gère la sienne (un seul élément par page). */
.e-con:has(> .elementor-widget-template .z-nav-sup){ padding-inline: 0; }
body.home .z-nav-sup:not(.is-stuck){ width: 100%; padding-inline: 0; }
/* Filet bas : DESSINÉ en ::after et non posé en border — le fond translucide
   de la barre se peint jusque sous la bordure et laissait un liseré blanc d'un
   demi-pixel sous le filet. 1 px plein : évite le liseré pâle du demi-pixel. */
.z-nav-sup::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;                            /* overflow:hidden : à -1px le filet serait rogné */
  height: max(.5px, var(--filet-ep, .5px));
  background: var(--zelij-noir, #0A0A0A);
  pointer-events: none;
}
/* Barre fixe frostée : sortie du flux, plaquée en haut */
.z-nav-sup.is-stuck {
  position: fixed;
  top: 0;
  left: var(--space-s);
  right: var(--space-s);
  width: auto;
  margin: 0;
  z-index: var(--z-fixed-nav);          /* AU-DESSUS du hero et du contenu */
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  transform: translateY(0);
  opacity: 1;
  transition: transform .95s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   .95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.z-nav-sup.is-stuck.is-hidden {
  transform: translateY(calc(-100% - 40px));
  opacity: 0;
  pointer-events: none;
}
/* Repli sous la barre d'admin WordPress (utilisateur connecté) */
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; }
}
/* Secours : navigateurs sans backdrop-filter → fond opaque */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .z-nav-sup.is-stuck { background: var(--color-bg); }
}
/* Cale-espace inséré par le JS, masqué tant que la barre est en flux */
.z-nav-sup-spacer { display: none; }
/* Titre de colonne : Chivo, capitales */
.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: var(--tracking-nav);
  color: var(--color-fg);
  text-decoration: none;
  padding: 0;
  margin: 0;
}
/* Ce qui rétrécit avec le scroll : logo (45 px au repos), pictogrammes de droite
   (leur BOÎTE suit leur dessin, sinon l'écart semble grandir), entrées du menu. */
.z-nav-sup .z-swipe-svg svg{
  width: calc(45px * var(--reduc));
  height: auto;
  display: block;
}
.z-nav-sup .z-nav-second-slot .elementor-widget{
  width: auto !important; /* 21-09 : boite au dessin de l icone, ecart fixe var(--space-xs) */
}
/* L'écart entre les pictogrammes ne suit PAS le resserrement (bat la gouttière
   posée par le conteneur Elementor). */
.z-nav-sup .z-nav-second-slot .e-con{
  gap: var(--space-xs) !important;
}
.z-nav-sup .nav-center a{
  font-size: calc(var(--text-1) * var(--reduc-texte));
  white-space: nowrap;                  /* « Press Review » reste d'un seul tenant */
}
/* Logo inline SVG : JetEngine pose « stroke: currentcolor » sur le svg ; le tracé
   touche x=0 du viewBox, la moitié de ce contour sortait et se faisait rogner
   (logo coupé à gauche, plus gras). Le filet vertical du fichier (.cls-1) n'est
   pas concerné : sa classe le cible directement. */
.z-nav-sup .jet-inline-svg--custom-color svg { stroke: none; }

/* =============================================================================
   7. PIED DE PAGE
   ============================================================================= */
   
 .z-cta-footer {
  margin: 0 auto;
  padding: var(--space-xl) var(--space-l) 0 var(--space-l);
}
/* --- 7.1 Plan du site (.z-plan) — surligneur sable au survol ----------------------
   Structure : .z-plan > .col > (.col-titre > a) + (ul > li > a)
   Titres de colonne (.col-titre a) : même balayage sable que la nav centrale
   (règle commune en §8.1) ; entrée courante en accent-ink via le snippet 42
   (classe body.zelij-nav-{section} + ID de widget), comme la nav sup et la
   nav de pied de page (.z-nav-footer, qui contient un .nav-center).
   Liens de second niveau (li a) : une barre sable se déploie de la gauche
   DERRIÈRE le texte, qui passe légèrement plus gras (200 → 300). */
.z-plan {
  border-top: var(--hairline);
  padding: var(--space-l);
  gap: var(--space-s);
}
.z-plan p { margin-bottom: 0; }
.z-plan .col-titre a {
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: var(--text-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  color: var(--color-fg);
  text-decoration: none;
}
.z-plan ul {
  list-style: none;
  margin: var(--space-xs) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.z-plan li a {
  --plan-duree: .3s;                       /* barre et texte blanc partagent la même durée/courbe */
  position: relative;
  display: inline-block;
  padding: 0 0.15em;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1);
  line-height: 1.35;
  color: var(--color-fg);
  text-decoration: none;
  z-index: 0;
  transition: font-weight .25s ease;
}
/* Texte blanc « au fur et à mesure » : une copie du libellé (data-t, posé par le snippet 137)
   en blanc, superposée au texte encre et révélée par clip-path de gauche à droite EN MÊME
   TEMPS que la barre sable (::before). Pas de background-image / background-clip : le
   chargement différé d'Elementor annule les fonds du pied de page (jamais e-lazyloaded). */
.z-plan li a::after {
  content: attr(data-t);
  position: absolute; inset: 0;
  padding: 0 0.15em;
  color: var(--zelij-noir);                /* 09/09 : encre au survol (était blanc) — la couche reste en place pour rebasculer */
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--plan-duree) ease;
  pointer-events: none;
}
.z-plan li a::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 100%;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--plan-duree) ease;
  z-index: -1;                             /* DERRIÈRE le texte */
}
.z-plan li a:hover,
.z-plan li a:focus-visible { font-weight: 300; }
.z-plan li a:hover::before,
.z-plan li a:focus-visible::before { transform: scaleX(1); }
.z-plan li a:hover::after,
.z-plan li a:focus-visible::after { clip-path: inset(0 0 0 0); }
/* --- 7.2 CTA de pied de page (modèle 2540 dans .z-cta-footer-wrap) ----------------
   Le snippet 110 pose body.zelij-cta-off là où le CTA ne doit pas paraître
   (accueil, Contact, Rendez-vous, interrupteur « afficher » désactivé). */
body.zelij-cta-off .z-cta-footer-wrap{ display: none; }

.z-nav-footer {
    padding-block: calc(var(--space-s) + .5em) var(--space-s) ;
    gap: var(--space-m);
}

/* =============================================================================
   8. BALAYAGES SABLE — nav centrale, SVG, fil d'Ariane
   -----------------------------------------------------------------------------
   Un dégradé sable | noir, large de 250 %, est découpé à la forme des lettres.
   Au repos la fenêtre montre le bloc noir ; au survol on décale la position et
   le sable entre par la GAUCHE, estompé sur la zone --sweep-from → --sweep-to.
   ============================================================================= */
/* --- 8.1 Nav centrale (.nav-center, classe héritée sans préfixe) + titres de
   colonne du plan du site (.z-plan .col-titre a, §7.1) --------------------------- */
.nav-center p { padding: 0; }
.nav-center a,
.z-plan .col-titre a {
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: var(--text-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-nav);
  text-decoration: none;
  padding: 0;
  margin: 0;
  background: linear-gradient(to right,
              var(--color-accent) var(--sweep-from),
              var(--zelij-noir)   var(--sweep-to))
              right / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--zelij-noir);                /* secours si background-clip non géré */
  transition: background-position var(--dur-sweep) var(--ease-sweep);
}
.nav-center a:hover,
.nav-center a:focus-visible,
.z-plan .col-titre a:hover,
.z-plan .col-titre a:focus-visible { background-position: left; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .nav-center a,
  .z-plan .col-titre a { color: var(--zelij-noir); transition: color var(--dur-sweep) ease; }
  .nav-center a:hover,
  .nav-center a:focus-visible,
  .z-plan .col-titre a:hover,
  .z-plan .col-titre a:focus-visible { color: var(--color-accent); }
}
/* --- 8.2 SVG (logo + icônes) : classe z-swipe-svg sur le WIDGET ---------------------
   background-clip:text ne marche que sur du texte : le JS (« Fin du corps »)
   duplique le SVG, et la copie sable est révélée par un masque-dégradé qui glisse.
   Suppose des SVG monochromes. */
.z-swipe-svg  { color: var(--color-fg); transition: color .4s ease; }
.z-swipe-host { position: relative; display: inline-block; }
.z-swipe-host svg,
.z-swipe-host svg path { fill: currentColor; }   /* suivent les tokens (z-invert ok) */
.z-swipe-host .z-swipe-copy {
  position: absolute !important;           /* bat .elementor-icon svg */
  top: 0; left: 0;
  width: 100%; height: 100%;
  color: var(--color-accent);
  -webkit-mask-image: linear-gradient(to right, #000 var(--sweep-from), transparent var(--sweep-to));
          mask-image: linear-gradient(to right, #000 var(--sweep-from), transparent var(--sweep-to));
  -webkit-mask-size: 250% 100%;            mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
  -webkit-mask-position: right;            mask-position: right;   /* au repos : cachée */
  transition: -webkit-mask-position var(--dur-sweep) var(--ease-sweep),
              mask-position         var(--dur-sweep) var(--ease-sweep);
}
.z-swipe-svg:hover .z-swipe-copy,
.z-swipe-svg:focus-within .z-swipe-copy {
  -webkit-mask-position: left; mask-position: left;
}
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .z-swipe-host .z-swipe-copy { display: none; }
  .z-swipe-svg:hover { color: var(--color-accent); }
}
/* Logo SVG portant un lien : le thème Hello pose a { color: #c36 } ; le logo est
   un lien qui enveloppe un SVG en fill: currentColor et héritait du framboise.
   color: inherit : le lien reprend le --color-fg du widget ET son sable au survol. */
a.jet-inline-svg,
.z-swipe-svg a,
.z-swipe-host a{ color: inherit; }
/* --- 8.3 Fil d'Ariane (#breadcrumbs, Yoast, snippet 34/42) --------------------------
   Liens : balayage sable (règle commune avec les liens de listing, §10.2).
   Séparateur : Yoast le sort en NŒUD DE TEXTE NU entre les span — on l'efface
   (font-size: 0 sur le conteneur), on rend leur taille aux span, et on dessine
   un filet en ::before. Élément courant : un <span> teinté ink (snippet 42). */
#breadcrumbs{
  --ariane-taille:  .7rem;      /* prime sur la taille du widget Elementor */
  --ariane-filet-h: .85em;
  --ariane-ecart:   .55em;
}
#breadcrumbs > span{ font-size: 0; }
#breadcrumbs > span > span{ font-size: var(--ariane-taille); }
#breadcrumbs > span > span + span::before{
  content: "";
  display: inline-block;
  width:  var(--filet-ep, 1px);
  height: var(--ariane-filet-h);
  margin-inline: var(--ariane-ecart);
  vertical-align: -.12em;
  background: var(--color-line, #0A0A0A);
}

/* =============================================================================
   9. BOUTONS
   ============================================================================= */
/* --- 9.1 CTA « deux zones » (.z-cta) — Figma BTN 11079:16958 ---------------------
   HTML : <div class="z-cta"><a href="#">Learn more <span>about us now</span></a></div>
   (classe sur un CONTENEUR — widget HTML / Shortcode — jamais sur le <a> : le lien
   deviendrait inline-flex et la pastille perdrait sa hauteur de ligne).
   Le libellé reste nu, le complément est surligné dans une pastille pleine. Au
   survol, un surlignement noir se déploie de la gauche par-dessus le sable et le
   texte passe en blanc. Couleurs en variables locales → surchargeables (.z-invert).
   Utilisé : home (snippet 107), CTA pied de page (110), sections Services (122,
   [zelij_sec_btn]), catalogue des collections (892) et fiches model (73). */
.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;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-nav);
  font-weight: var(--weight-nav);
  font-size: var(--text--1);
  line-height: 1.7;                        /* = 28/13, l'interligne de la maquette */
  text-transform: uppercase;
  color: var(--color-fg);
  text-decoration: none;
}
/* Le lien hérite l'encre du composant (sans cette ligne, le reset du thème Hello
   a { color: #c36 } peint en rose la partie non surlignée). */
.z-cta a { color: inherit; text-decoration: none; }
/* La pastille : deux couches de fond empilées — le surlignement noir (largeur
   animée, ancré à gauche) par-dessus le sable permanent. */
.z-cta span {
  padding: var(--space-3xs);
  letter-spacing: 0.03em;
  color: var(--color-fg);
  border-radius: var(--radius);
  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;
  background-size: 0% 100%;
  /* le texte bascule en blanc en cours de balayage, pas au tout début */
  transition: background-size var(--cta-duree) ease,
              color .15s ease .12s;
}
.z-cta:hover span,
.z-cta:focus-visible span {
  background-size: 100% 100%;
  color: var(--cta-ink-hover);
}
.z-cta:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.z-cta:focus-visible span { outline: none; }
.z-invert .z-cta {                       /* fond sombre : sinon noir sur noir */
  --cta-fill-hover: var(--zelij-blanc-casse);
  --cta-ink-hover:  var(--zelij-noir);
}
/* --- 9.2 Pavé sable (.z-btn-dl / widgets Bouton de classe z-btn) -------------------
   Un seul <a>, sans pastille : pavé sable, texte noir ; au survol le noir se
   déploie de la gauche, le texte passe en blanc. Utilisé par les widgets Bouton
   portant la classe z-btn (bandeau Our story, fichiers du Resource center). */
.z-btn-dl,
.elementor-widget-button.z-btn .elementor-button {
  -webkit-text-fill-color: currentColor;  /* boutons dans les listings : pas de peinture par le fond (§10.3) */
  -webkit-background-clip: border-box;
  --btn-fill:       var(--color-accent);
  --btn-fill-hover: var(--zelij-noir);
  --btn-ink:        var(--zelij-noir);
  --btn-ink-hover:  var(--zelij-blanc);
  --btn-duree:      .5s;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-nav);
  font-weight: var(--weight-nav);
  font-size: var(--text--1);
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius);
  color: var(--btn-ink);
  background-color: var(--btn-fill);
  background-image: linear-gradient(var(--btn-fill-hover), var(--btn-fill-hover));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size var(--btn-duree) ease,
              color .15s ease .12s;
}
.z-btn-dl:hover,
.z-btn-dl:focus-visible,
.elementor-widget-button.z-btn .elementor-button:hover,
.elementor-widget-button.z-btn .elementor-button:focus-visible {
  background-size: 100% 100%;
  color: var(--btn-ink-hover);
}
.z-btn-dl:focus-visible,
.elementor-widget-button.z-btn .elementor-button:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.z-invert .z-btn-dl {
  --btn-fill-hover: var(--zelij-blanc-casse);
  --btn-ink-hover:  var(--zelij-noir);
}

/* =============================================================================
   10. IMAGES & LISTINGS
   ============================================================================= */
/* --- 10.1 Images-liens : voile accent glissant ---------------------------------------
   Toute image cliquable porte un voile couleur accent DISCRET (mix-blend-mode:
   color, opacité .55 : l'image garde une part de ses couleurs), avec un VOLET
   FLOU (le voile fait 130 % de large, fondu sur son dernier quart). Voile
   au SURVOL (11/09, retour au principe d'origine) : absent au repos — l'image se signale
   comme cliquable — il ENTRE PAR LA DROITE au survol, volet flou en tu{ea}te, calé sur le balayage de
   la nav (--dur-sweep / --ease-sweep).
   Deux familles couvertes sans toucher aux widgets : lien direct <a><img> ou
   <a><figure><img> (via :has()) ; carte cliquable JetEngine (overlay data-url) :
   survol n'importe où sur la carte → voile sur .jet-listing-dynamic-image.
   Échappement ponctuel : classe zelij-no-veil sur l'élément ou un parent. */
a:has(> img),
a:has(> figure > img) {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
}
.jet-engine-listing-overlay-wrap .jet-listing-dynamic-image {
  position: relative;
  overflow: hidden;
}
a:has(> img)::after,
a:has(> figure > img)::after,
.jet-engine-listing-overlay-wrap .jet-listing-dynamic-image::after {
  --veil-opacity: .55;
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 130%;                             /* 100 % de couverture + 30 % de volet */
  z-index: 1;
  background: linear-gradient(to left,
              var(--color-accent) 0%,
              var(--color-accent) 77%,
              transparent 100%);
  mix-blend-mode: color;
  opacity: 0;
  transform: translateX(101%);
  transition: transform var(--dur-sweep) var(--ease-sweep),
              opacity   var(--dur-sweep) var(--ease-sweep);
  pointer-events: none;
}
a:has(> img):hover::after,
a:has(> img):focus-visible::after,
a:has(> figure > img):hover::after,
a:has(> figure > img):focus-visible::after,
.jet-engine-listing-overlay-wrap:hover .jet-listing-dynamic-image::after,
.jet-engine-listing-overlay-wrap:focus-within .jet-listing-dynamic-image::after {
  transform: translateX(0);
  opacity: var(--veil-opacity);
}
.zelij-no-veil a::after,
a.zelij-no-veil::after,
.zelij-no-veil .jet-listing-dynamic-image::after { content: none; }
/* --- 10.2 Liens texte de listing & fil d'Ariane : balayage sable (grammaire §8) -----
   Exclusions : liens contenant une image (le voile s'en charge) ; élément courant
   du fil d'Ariane (un <span>). Fonctionne quelle que soit la typo du lien. */
.jet-listing-grid__item a:not(:has(img)),
#breadcrumbs a {
  text-decoration: none;
  background: linear-gradient(to right,
              var(--color-accent) var(--sweep-from),
              var(--zelij-noir)   var(--sweep-to))
              right / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--zelij-noir);
  transition: background-position var(--dur-sweep) var(--ease-sweep);
}
.jet-listing-grid__item a:not(:has(img)):hover,
.jet-listing-grid__item a:not(:has(img)):focus-visible,
#breadcrumbs a:hover,
#breadcrumbs a:focus-visible { background-position: left; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .jet-listing-grid__item a:not(:has(img)),
  #breadcrumbs a { transition: color var(--dur-sweep) ease; }
  .jet-listing-grid__item a:not(:has(img)):hover,
  #breadcrumbs a:hover { color: var(--color-accent-ink, var(--color-accent)); }
}
/* --- 10.3 Titres de cartes : typo + balayage lié au bloc -------------------------------
   Les h3 des cartes de listing : Plus Jakarta Sans 700, --text-1, capitales,
   --tracking-nav — ET le balayage sable : survoler N'IMPORTE QUELLE zone de la
   carte déclenche le balayage du titre. La marge du thème (reset h1-h6 : 1rem)
   est neutralisée ; seul le gap --space-3xs espace les champs de la carte.
   NB : la typographie custom des widgets-titres a été retirée dans les listings
   (48, 882, 884, 1049, 493) pour que cette règle fasse foi. */
.jet-listing-grid__item h1,
.jet-listing-grid__item h2 { margin-bottom: 0; }
.jet-listing-grid__item h3 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: var(--text-1);
  font-weight: 700;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
/* Project card (48) & Information card (1049) : zones de texte resserrées —
   un margin-top de 8 px sur le h3 et l'interligne 1,65 des champs posaient ~5 px
   au-dessus de chaque ligne. Interligne resserré à 1,1 (carte 508 → 473 px). */
.jet-listing-grid__item .elementor-48 h3,
.jet-listing-grid__item .elementor-1049 h3 {
  margin-top: 0;
  line-height: 1.1;
}
.jet-listing-grid__item .elementor-48 .jet-listing-dynamic-field__content,
.jet-listing-grid__item .elementor-48 .jet-listing-dynamic-terms,
.jet-listing-grid__item .elementor-48 .jet-listing-dynamic-field p,
.jet-listing-grid__item .elementor-1049 .jet-listing-dynamic-field__content,
.jet-listing-grid__item .elementor-1049 .jet-listing-dynamic-terms,
.jet-listing-grid__item .elementor-1049 .jet-listing-dynamic-field p {
  margin-top: 0;
  line-height: 1.1;
}
/* Glyphes rognés par text-box + background-clip : le Kit applique text-box: cap
   alphabetic aux titres (boîte rabotée au haut des capitales et à la ligne de
   base) et ces titres sont peints PAR LEUR FOND — tout ce qui sort de la boîte
   n'est plus peint (jambages, accents). On agrandit la zone PEINTE (padding) et
   on annule aussitôt la place qu'elle prendrait (marge négative). */
.jet-listing-grid__item h1,
.jet-listing-grid__item h2,
.jet-listing-grid__item h3 {
  padding-block: 0.3em;
  margin-block: -0.3em;
}
.jet-listing-grid__item h3,
.jet-listing-grid__item h3 a {
  background: linear-gradient(to right,
              var(--color-accent) var(--sweep-from),
              var(--zelij-noir)   var(--sweep-to))
              right / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--zelij-noir);
  transition: background-position var(--dur-sweep) var(--ease-sweep);
}
.jet-listing-grid__item:not(:has(.jet-listing-grid__item)):hover h3,
.jet-listing-grid__item:not(:has(.jet-listing-grid__item)):hover h3 a,
.jet-listing-grid__item h3 a:focus-visible { background-position: left; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .jet-listing-grid__item h3,
  .jet-listing-grid__item h3 a { transition: color var(--dur-sweep) ease; }
  .jet-listing-grid__item:not(:has(.jet-listing-grid__item)):hover h3,
  .jet-listing-grid__item:not(:has(.jet-listing-grid__item)):hover h3 a { color: var(--color-accent-ink, var(--color-accent)); }
}
/* --- 10.4 Tuiles-liens hors listing (.z-tile) — tuiles de collection de la home -------
   Reproduit sur un conteneur-lien Elementor (rendu <a>) le survol des tuiles
   de /surfaces/ (listing 882) : voile accent sur l'image (10.1) + balayage sable
   du titre (10.3), déclenchés au survol de TOUTE la tuile. La typographie du
   titre n'est pas touchée. Les deux tuiles de la home (LIEN VERS Traces c /
   LIEN VERS Sculptural c) sont ciblées par leur ID tant que la classe z-tile
   n'y est pas posée. */
.z-tile, .elementor-element-03606a8, .elementor-element-6d68511 { text-decoration: none; }
:is(.z-tile, .elementor-element-03606a8, .elementor-element-6d68511) .elementor-widget-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;                      /* confine mix-blend-mode à la tuile */
}
:is(.z-tile, .elementor-element-03606a8, .elementor-element-6d68511) .elementor-widget-image::after {
  --veil-opacity: .55;
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 130%;
  z-index: 1;
  background: linear-gradient(to left,
              var(--color-accent) 0%,
              var(--color-accent) 77%,
              transparent 100%);
  mix-blend-mode: color;
  opacity: 0;
  transform: translateX(101%);
  transition: transform var(--dur-sweep) var(--ease-sweep),
              opacity   var(--dur-sweep) var(--ease-sweep);
  pointer-events: none;
}
:is(.z-tile, .elementor-element-03606a8, .elementor-element-6d68511):hover .elementor-widget-image::after,
:is(.z-tile, .elementor-element-03606a8, .elementor-element-6d68511):focus-visible .elementor-widget-image::after {
  transform: translateX(0);
  opacity: var(--veil-opacity);
}
:is(.z-tile, .elementor-element-03606a8, .elementor-element-6d68511) :is(h1, h2, h3) {
  background: linear-gradient(to right,
              var(--color-accent) var(--sweep-from),
              var(--zelij-noir)   var(--sweep-to))
              right / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--zelij-noir);
  transition: background-position var(--dur-sweep) var(--ease-sweep);
}
:is(.z-tile, .elementor-element-03606a8, .elementor-element-6d68511):hover :is(h1, h2, h3),
:is(.z-tile, .elementor-element-03606a8, .elementor-element-6d68511):focus-visible :is(h1, h2, h3) {
  background-position: left;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  :is(.z-tile, .elementor-element-03606a8, .elementor-element-6d68511) :is(h1, h2, h3) { transition: color var(--dur-sweep) ease; }
  :is(.z-tile, .elementor-element-03606a8, .elementor-element-6d68511):hover :is(h1, h2, h3) { color: var(--color-accent-ink, var(--color-accent)); }
}
/* --- 10.5 Archive model-category (1271) : titre en accent assombri, comme les
   archives collection (snippet inline sur /surfaces/{famille}/{collection}/). */
body .elementor-1271 .elementor-element.elementor-element-c5d217a .elementor-heading-title {
  color: var(--color-accent-ink, color-mix(in srgb, var(--color-accent) 70%, var(--zelij-noir)));
}

/* =============================================================================
   11. SLIDER VERTICAL DES VISUELS — fiche model (21), projet (62), information (1059)
   -----------------------------------------------------------------------------
   Markup monté côté client (widgets HTML des templates). Échelle = un trait
   encre à --space-s du cadre, et un curseur accent qui se déploie VERS l'image
   au survol (filet de 3 px → toute l'épaisseur de l'écart). Rail à GAUCHE sur
   la fiche model, à DROITE sur projet / information (data-rail). Bande continue :
   les visuels sont empilés bord à bord en pleine largeur, chacun avec sa hauteur
   propre — plus de recadrage ; le script décale la bande en pixels (--decalage).
   ============================================================================= */
.zelij-model-slider{--ratio-visuel:960/1440;--ecart:var(--space-s,16px);--filet:3px;}
.zelij-model-slider__stage{display:flex;align-items:stretch;gap:var(--ecart);}
.zelij-model-slider[data-rail="right"] .zelij-model-slider__stage{flex-direction:row-reverse;}
.zelij-model-slider .zelij-model-slider__view{flex:1 1 auto;min-width:0;aspect-ratio:var(--ratio-visuel);overflow:hidden;cursor:grab;}
.zelij-model-slider .zelij-model-slider__view:active{cursor:grabbing;}
.zelij-model-slider__slide img{-webkit-user-drag:none;user-select:none;}
.zelij-model-slider__view:focus-visible{outline:1px solid var(--zelij-noir,#0A0A0A);outline-offset:2px;}
.zelij-model-slider__track{height:100%;display:flex;flex-direction:column;transition:transform var(--dur-sweep,.6s) var(--ease-sweep,ease);transform:translateY(calc(var(--i,0) * -100%));}
.zelij-model-slider__slide{position:relative;margin:0;flex:none;height:100%;width:100%;}
.zelij-model-slider__slide img{width:100%;height:100%;object-fit:cover;display:block;}
/* bande continue : le cadre garde le ratio et devient une FENÊTRE */
body .zelij-model-slider .zelij-model-slider__track{ height: auto; transform: translateY(var(--decalage, 0px)); }
body .zelij-model-slider .zelij-model-slider__slide{ height: auto; flex: 0 0 auto; }
body .zelij-model-slider .zelij-model-slider__slide img{ width: 100%; height: auto; object-fit: fill; }
/* l'échelle : trait encre ; le curseur se déploie vers l'image */
.zelij-model-slider__rail{flex:none;position:relative;width:var(--filet-ep,1px);background:var(--zelij-noir,#0A0A0A);cursor:pointer;touch-action:none;}
.zelij-model-slider__cursor{position:absolute;top:0;height:calc(100% / var(--n,1));left:var(--filet-ep,1px);width:var(--filet);background:var(--color-accent-ink, var(--color-accent,#957A4F));transform:translateY(calc(var(--i,0) * 100%));transition:transform var(--dur-sweep,.6s) var(--ease-sweep,ease), width .35s var(--ease-sweep,ease), background-color .25s ease;}
.zelij-model-slider[data-rail="right"] .zelij-model-slider__cursor{left:auto;right:var(--filet-ep,1px);}
.zelij-model-slider:hover .zelij-model-slider__cursor,
.zelij-model-slider__rail:hover .zelij-model-slider__cursor,
.zelij-model-slider__view:focus-visible ~ .zelij-model-slider__cursor{width:var(--ecart);background:var(--color-accent,#D1AA6C);}
/* voile d'accent, inverse de celui des cartes : présent au repos et effacé vers
   le HAUT — le visuel arrivé en butée supérieure n'a aucun filtre. Posé sur la
   FENÊTRE (fixe pendant que les visuels défilent). */
.zelij-model-slider__view{ position: relative; isolation: isolate; }
.zelij-model-slider__view::after{
  --voile-opacite: .55;
  --voile-net:     45%;    /* hauteur, depuis le haut, où l'image reste intacte */
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0 var(--voile-net), var(--color-accent) 100%);
  mix-blend-mode: color;
  opacity: var(--voile-opacite);
}
/* navigation : flèches fines, rang séparé par le trait ; le reset du thème donne
   à tout <button> une bordure rose et le Kit un fond — on remet le bouton à plat
   (préfixe body pour passer devant .elementor-kit-6 button). */
.zelij-model-slider .zelij-model-slider__nav{display:flex;align-items:center;gap:var(--space-xs,12px);margin-top:var(--space-2xs,8px);font-family:var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"), sans-serif;color:var(--zelij-noir,#0A0A0A);}
body .zelij-model-slider .zelij-model-slider__btn{appearance:none;background:none;border:0;border-radius:0;box-shadow:none;padding:0;cursor:pointer;line-height:.8;font-family:inherit;font-size:1.5rem;font-weight:300;color:var(--zelij-noir,#0A0A0A);transition:color .2s ease, background-color .2s ease;}
.zelij-model-slider .zelij-model-slider__btn:hover,.zelij-model-slider .zelij-model-slider__btn:focus-visible{color:var(--color-accent-ink,var(--color-accent));}
.zelij-model-slider .zelij-model-slider__btn[disabled]{color:color-mix(in srgb, var(--zelij-noir,#0A0A0A) 25%, transparent);cursor:default;}
.zelij-model-slider .zelij-model-slider__count{display:inline-flex;gap:.4em;align-items:baseline;font-size:0.8rem;font-weight:500;letter-spacing:normal;font-variant-numeric:tabular-nums;color:var(--zelij-noir,#0A0A0A);}
body .zelij-model-slider .zelij-model-slider__btn svg{width:1em;height:1em;display:block;overflow:visible;}   /* flèches : un simple coude */
body .zelij-model-slider .zelij-model-slider__btn svg path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;}
/* la navigation se cale sur le bord du VISUEL, du côté du trait */
body .zelij-model-slider[data-rail="left"] .zelij-model-slider__nav{ margin-left: calc(1px + var(--ecart, var(--space-s, 24px))); }
body .zelij-model-slider[data-rail="right"] .zelij-model-slider__nav{ margin-right: calc(1px + var(--ecart, var(--space-s, 24px))); justify-content: flex-end; }
/* widgets d'images d'origine clonés dans le slider ; widget Modèle du script */
.zelij-source-masquee{display:none !important;}
body .zelij-script-modele{display:none !important;}
/* Fiche model : le sigle copyright accolé au titre est calé par le HAUT sur le
   haut des capitales (-1.136em = hauteur de capitale de Plus Jakarta Sans 0,757
   × (1 − 0,4) / 0,4). Classe doublée pour passer devant la règle du snippet. */
body.zelij-model-copyright .elementor-heading-title.elementor-heading-title::after{
  vertical-align: baseline;
  position: relative;
  top: -1.136em;
}
/* Desktop et tablette : la fenêtre ne dépasse jamais la hauteur disponible
   (100vh − entête − 2 × --space-l), ratio conservé ; le bloc se cale du côté
   du bloc texte voisin (la scène est en row-reverse quand le rail est à droite). */
@media (min-width: 768px){
  .zelij-model-slider{
    --hauteur-entete: 110px;                                  /* nav sup déployée (80) + fil d'Ariane (30) */
    --hauteur-max: calc(100vh - var(--hauteur-entete) - 2 * var(--space-l));
  }
  .zelij-model-slider .zelij-model-slider__view{
    max-height: var(--hauteur-max);
    max-width: calc(var(--hauteur-max) * 960 / 1440);
  }
  .zelij-model-slider__stage{ justify-content: flex-start; }
  .zelij-model-slider[data-rail="right"] > .zelij-model-slider__view{ margin-left: auto; }
  .zelij-model-slider[data-rail="left"]  > .zelij-model-slider__view{ margin-right: auto; }
}
/* Tactile / mobile : la piste reste VERTICALE au doigt (glissement piloté en JS,
   geste natif retiré) ; flèches en carrés de 44 px puis, sous 768 px, masquées. */
@media (pointer: coarse), (max-width: 767px){
  .zelij-model-slider .zelij-model-slider__view{touch-action:none;cursor:default;}
  body .zelij-model-slider .zelij-model-slider__nav{display:flex;justify-content:center;align-items:center;gap:var(--space-2xs,8px);margin-top:var(--space-xs,12px);}
  body .zelij-model-slider .zelij-model-slider__btn{width:44px;height:44px;display:grid;place-items:center;font-size:1.5rem;border:0;border-radius:0;background:none;}
  body .zelij-model-slider .zelij-model-slider__btn:active{background:none;color:var(--color-accent,#D1AA6C);}
  .zelij-model-slider .zelij-model-slider__count{margin:0 var(--space-2xs,8px);}
}
@media (max-width: 767px){
  .zelij-model-slider__nav{ display: none !important; }   /* mobile : geste seul */
  /* un seul visuel : on rend le défilement vertical à la page */
  .zelij-model-slider--unique .zelij-model-slider__view{ touch-action: pan-y !important; cursor: default; }
  /* Fiches model : sur mobile le rail passe À DROITE, comme projets et informations
     (le data-rail="left" du PHP reste ; on reproduit l'ordre du rail droit). */
  body .zelij-model-slider[data-z-nav="cote"][data-rail="left"] .zelij-model-slider__view{ order: 1; margin-left: 0; }
  body .zelij-model-slider[data-z-nav="cote"][data-rail="left"] .zelij-model-slider__rail{ order: 2; margin-left: var(--ecart, 24px); }
  .zelij-model-slider[data-rail="left"] > .zelij-model-slider__view{ margin-right: 0; }
}
/* --- 11.2 Carte « Main model used » (fiche projet / information, snippet 55) ----------
   .zelij-model-card > p.__intro + a.__lien > img.__img + span.__terme + h3.__titre
   Calée à droite de sa colonne. L'image garde le voile des images-liens (10.1)
   et le titre son balayage (10.3). Le libellé « Main model used » est posé EN
   VERTICAL le long du bord droit, lu de bas en haut, dans la grammaire du
   surtitre — comme une cote de dessin. */
body .zelij-model-card{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-xs);
  align-items: stretch;
  justify-items: end;
  padding-inline: 0;
  text-align: right;
}
body .zelij-model-card .zelij-model-card__intro{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;                   /* après rotation : calé en bas */
  font-family: var(--font-nav);
  font-weight: var(--weight-nav, 200);
  font-size: var(--text--2, .75rem);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-ink, color-mix(in srgb, var(--color-accent) 70%, var(--zelij-noir)));
  white-space: nowrap;
}
body .zelij-model-card .zelij-model-card__lien{
  grid-column: 1;
  grid-row: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  column-gap: var(--space-s);
  align-items: end;
  justify-items: end;
  text-align: right;
}
body .zelij-model-card .zelij-model-card__lien > img{
  grid-column: 2;
  grid-row: 1 / span 2;
  display: block;
  width: auto !important;      /* le snippet 55 pose 96 × 96 !important */
  height: auto !important;
  max-height: 120px;
  max-width: 160px;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0;
}
/* le voile (::after absolu, 130 % du lien) couvrirait aussi le texte : on en
   fait un ITEM DE GRILLE posé sur la cellule de l'image. */
body .zelij-model-card .zelij-model-card__lien::after{
  position: static;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  justify-self: start;
  height: auto;
}
body .zelij-model-card .zelij-model-card__terme{ grid-column: 1; grid-row: 1; align-self: end; }
body .zelij-model-card .zelij-model-card__titre{ grid-column: 1; grid-row: 2; }

/* =============================================================================
   12. POPUP & FILTRES
   ============================================================================= */
/* --- 12.1 Menu pop-up (1882) : même fond que la NAV SUP ---------------------------------
   Blanc translucide + flou, filet bas à la place de l'ombre. Fondu simple
   (fadeIn / fadeOut 0.45 s, réglé dans le popup). Id doublé par la classe pour
   passer devant post-1882.css. */
.elementor-popup-modal#elementor-popup-modal-1882 .dialog-widget-content{
  background-color: color-mix(in srgb, var(--color-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: none;
  border-bottom: var(--filet-ep, 1px) solid var(--color-line);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .elementor-popup-modal#elementor-popup-modal-1882 .dialog-widget-content{ background-color: var(--color-bg); }
}
/* --- 12.2 Filtres : cases à cocher et boutons radio (JetSmartFilters) --------------------
   Un carré de --space-xs, sans encadrement, trois états : repos = fond accent
   très pâle ; survol = l'accent plein ENTRE PAR LA GAUCHE et un carré blanc
   apparaît au centre ; choisi = le carré central passe à l'encre en fondu.
   Le carré central est un CALQUE DE FOND, pas un ::after (Chrome ne recalcule
   pas toujours un pseudo-élément quand l'état vient d'un :has()) ; sa couleur
   se transitionne grâce à @property. L'état choisi est lu par :has(input:checked)
   sur l'item (le combinateur ~ ne reprend pas la main après le re-rendu AJAX).
   Même mécanique dans les formulaires (§13). */
@property --carre {
  syntax: '<color>';
  inherits: false;
  initial-value: #FFFFFF;
}
.jet-filter .jet-checkboxes-list__button,
.jet-filter .jet-radio-list__button{
  display: flex;
  align-items: center;
}
.jet-filter .jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator,
.jet-filter .jet-radio-list .jet-radio-list__item .jet-radio-list__decorator{
  --carre:        var(--zelij-blanc, #FFFFFF);
  --carre-taille: 0%;
  --balayage:     0%;
  --balayage-ton: var(--color-accent);
  width:      var(--space-xs) !important;
  height:     var(--space-xs) !important;
  min-width:  var(--space-xs) !important;
  min-height: var(--space-xs) !important;
  flex: 0 0 auto;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--color-accent-pale) !important;
  background-image:
      linear-gradient(var(--carre), var(--carre)),
      linear-gradient(var(--balayage-ton), var(--balayage-ton)) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, left center !important;
  background-size:
      var(--carre-taille) var(--carre-taille),
      var(--balayage) 100% !important;
  transition: background-size var(--dur-sweep) var(--ease-sweep),
              background-color var(--dur-sweep) var(--ease-sweep),
              --carre var(--dur-sweep) var(--ease-sweep);
}
.jet-filter .jet-checkboxes-list .jet-checkboxes-list__item:hover .jet-checkboxes-list__decorator,
.jet-filter .jet-radio-list .jet-radio-list__item:hover .jet-radio-list__decorator{
  --balayage: 100%;
  --carre-taille: 50%;
}
.jet-filter .jet-checkboxes-list .jet-checkboxes-list__item:has(input:checked) .jet-checkboxes-list__decorator,
.jet-filter .jet-radio-list .jet-radio-list__item:has(input:checked) .jet-radio-list__decorator{
  --balayage: 100%;
  --carre-taille: 50%;
  --carre: var(--zelij-noir, #0A0A0A);
  background-color: var(--color-accent) !important;
}
.jet-filter .jet-checkboxes-list__checked-icon,
.jet-filter .jet-radio-list__checked-icon{ display: none; }

/* =============================================================================
   13. FORMULAIRES
   ============================================================================= */
/* --- 13.1 Contact us (widget Form d'Elementor Pro, page 2328) ------------------------------
   Toute la mise en forme est ici : le widget ne porte AUCUN réglage de style.
   - Champs : fond blanc permanent, pas de cadre, un filet bas en --filet-ep couleur
     --color-line ; au survol / focus un trait ACCENT de 1,5 px glisse de la gauche
     par-dessus le filet encre, qui s'efface (calque de fond, transition sur
     background-size — aucune dimension ne bouge). Champ optionnel : filet et texte
     en encre atténuée.
   - Libellés FLOTTANTS : le libellé vit À L'INTÉRIEUR du champ, posé en haut au
     repos ; au focus ou dès que le champ a une valeur il monte et se réduit
     (détection sans JS : :placeholder-shown, placeholder rendu transparent ;
     selects : option vide + required → :invalid). Un seul mouvement (transform
     + font-size), le champ réserve en permanence la place du libellé flottant.
   - Radios / case RGPD : même mécanique que les filtres (§12.2), l'input lui-même
     est le carré (appearance: none), état choisi en :checked.
   - Bouton SEND : grammaire du CTA (§13.3).
   Les !important répondent aux réglages par défaut d'Elementor Pro émis dans
   post-2328.css (taille, couleur, bordure de focus) même sans réglage widget. */
.elementor-form{
  --form-filet:        var(--color-line, #0A0A0A);
  --form-filet-focus:  var(--color-accent);
  --form-air:          var(--space-2xs);
}
.elementor-form .elementor-form-fields-wrapper{
  row-gap: var(--space-xs);
  column-gap: var(--space-xs);
}
.elementor-form .elementor-field-group{
  padding: 0;
  margin: 0;
}
/* champs texte, e-mail, tel, textarea, select */
.elementor-form .elementor-field-group .elementor-field-textual,
.elementor-form .elementor-field-group .elementor-field-textual:focus{
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1) !important;     /* même taille que le corps, repos comme focus (pas de plancher 16 px : arbitrage assumé, voir iOS plus bas) */
  line-height: var(--leading-snug);
  color: var(--zelij-noir, #0A0A0A) !important;
  background-color: transparent;
  border: 0;
  border-bottom: var(--filet-ep, 1px) solid var(--form-filet);
  border-radius: 0;
  box-shadow: none;
  outline: none;
  padding: var(--form-air) var(--space-xs);
  transition: border-color var(--dur-sweep) var(--ease-sweep),
              background-color var(--dur-sweep) var(--ease-sweep);
}
.elementor-form .elementor-field-group .elementor-field-textual:focus,
.elementor-form .elementor-field-group .elementor-field-textual:focus-visible{
  border-color: var(--form-filet-focus) !important;
  border-bottom-color: var(--form-filet-focus) !important;
  background-color: var(--zelij-blanc, #FFFFFF) !important;
}
.elementor-form .elementor-field-group .elementor-field-textual::placeholder{
  color: var(--zelij-noir, #0A0A0A);
  opacity: .55;
}
.elementor-form .elementor-field-group .elementor-field-textual:required{ color: var(--zelij-noir, #0A0A0A); }
.elementor-form .elementor-field-group .elementor-field-textual:required::placeholder{
  color: var(--zelij-noir, #0A0A0A);
  opacity: 1;
}
/* champ optionnel : le filet reprend l'encre atténuée (55 %) du texte de saisie */
.elementor-form .elementor-field-group .elementor-field-textual:not(:required){
  border-bottom-color: color-mix(in srgb, var(--zelij-noir, #0A0A0A) 55%, transparent);
}
.elementor-form .elementor-field-group .elementor-field-textual:not(:required):focus,
.elementor-form .elementor-field-group .elementor-field-textual:not(:required):focus-visible{
  border-bottom-color: var(--form-filet-focus) !important;
}
.elementor-form .elementor-field-group textarea.elementor-field-textual{
  resize: vertical;
  min-height: calc(var(--text-0) * var(--leading-body) * 5);
}
.elementor-form .elementor-select-wrapper select.elementor-field-textual{
  padding-right: var(--space-m);
  cursor: pointer;
}
.elementor-form .elementor-select-wrapper::before{
  color: var(--zelij-noir, #0A0A0A);
  right: 0;
}
/* libellés de champ (grammaire du surtitre, un cran plus épais : 500) */
.elementor-form .elementor-field-group .elementor-field-label{
  display: block;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: var(--text--1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--zelij-noir, #0A0A0A);
  padding: 0;
  margin: 0 0 var(--space-4xs);
}
.elementor-form .elementor-field-group .elementor-field-label .elementor-mark-required{
  color: var(--zelij-noir, #0A0A0A);   /* l'astérisque reste en encre */
}
/* radios et case à cocher : la mécanique des filtres (§12.2) */
.elementor-form .elementor-field-subgroup{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-2xs);
  padding: 0;
}
.elementor-form .elementor-field-subgroup .elementor-field-option{
  display: flex;
  align-items: center;
  gap: var(--space-3xs);                 /* même écart carré → texte que les filtres (§12.2) */
  cursor: pointer;
}
.elementor-form .elementor-field-subgroup .elementor-field-option label{
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1);             /* = libellés des filtres de tri */
  line-height: 1;
  color: var(--zelij-noir, #0A0A0A);
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.elementor-form .elementor-field-subgroup .elementor-field-option input[type="radio"],
.elementor-form .elementor-field-subgroup .elementor-field-option input[type="checkbox"]{
  --carre:        var(--zelij-blanc, #FFFFFF);
  --carre-taille: 0%;
  --balayage:     0%;
  --balayage-ton: var(--color-accent);
  appearance: none;
  -webkit-appearance: none;
  width:  var(--space-xs);
  height: var(--space-xs);
  min-width:  var(--space-xs);
  min-height: var(--space-xs);
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  background-color: var(--color-accent-pale);
  background-image:
      linear-gradient(var(--carre), var(--carre)),
      linear-gradient(var(--balayage-ton), var(--balayage-ton));
  background-repeat: no-repeat, no-repeat;
  background-position: center center, left center;
  background-size: var(--carre-taille) var(--carre-taille), var(--balayage) 100%;
  transition: background-size var(--dur-sweep) var(--ease-sweep),
              background-color var(--dur-sweep) var(--ease-sweep),
              --carre var(--dur-sweep) var(--ease-sweep);
}
.elementor-form .elementor-field-subgroup .elementor-field-option:hover input[type="radio"],
.elementor-form .elementor-field-subgroup .elementor-field-option:hover input[type="checkbox"],
.elementor-form .elementor-field-subgroup .elementor-field-option input:focus-visible{
  --balayage: 100%;
  --carre-taille: 50%;
}
.elementor-form .elementor-field-subgroup .elementor-field-option input[type="radio"]:checked,
.elementor-form .elementor-field-subgroup .elementor-field-option input[type="checkbox"]:checked{
  --balayage: 100%;
  --carre-taille: 50%;
  --carre: var(--zelij-noir, #0A0A0A);
  background-color: var(--color-accent);
}
/* case RGPD : texte plus fin, aligné en haut du carré */
.elementor-form .elementor-field-type-acceptance .elementor-field-option{ align-items: flex-start; }
.elementor-form .elementor-field-type-acceptance .elementor-field-option input[type="checkbox"]{ margin-top: .2em; }
.elementor-form .elementor-field-type-acceptance .elementor-field-option label{
  font-size: var(--text--1);
  line-height: var(--leading-body);
}
.elementor-form .elementor-field-type-acceptance a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--filet-ep, 1px);
  text-underline-offset: .2em;
}
/* champs optionnels (classe z-optional posée sur le champ) : noir éclairci à 80 %,
   pas grisé ; le placeholder hérite de l'opacité .55 par-dessus. */
.elementor-form .elementor-field-textual.z-optional,
.elementor-form .elementor-field-textual.z-optional:focus{
  color: color-mix(in srgb, var(--zelij-noir, #0A0A0A) 80%, var(--color-bg, #FFFFFF)) !important;
}
.elementor-form .elementor-field-textual.z-optional::placeholder{
  color: color-mix(in srgb, var(--zelij-noir, #0A0A0A) 80%, var(--color-bg, #FFFFFF)) !important;
}
/* mention « all fields are required » (champ HTML .z-form-note) */
.elementor-form .z-form-note{
  font-family: var(--font-fine);
  font-weight: var(--weight-fine);
  font-size: var(--text--1);
  line-height: var(--leading-snug);
  color: var(--color-accent-ink, var(--color-accent));
  margin: 0;
}
.elementor-form .elementor-field-type-submit{ margin-top: var(--space-3xs); }
/* messages */
.elementor-form .elementor-message{
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1);
}
.elementor-form .elementor-message.elementor-message-success{ color: var(--color-accent-ink, var(--color-accent)); }
/* fond blanc permanent, marges intérieures, trait accent glissant (recouvre le filet) */
.elementor-form .elementor-field-group .elementor-field-textual,
.elementor-form .elementor-field-group .elementor-field-textual:hover,
.elementor-form .elementor-field-group .elementor-field-textual:focus,
.elementor-form .elementor-field-group .elementor-field-textual:focus-visible{
  --champ-filet: var(--form-filet);
  --champ-pad-x: var(--space-2xs);
  background-color: var(--zelij-blanc, #FFFFFF) !important;
  background-image: linear-gradient(var(--form-filet-focus), var(--form-filet-focus));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1.5px;
  border-bottom: var(--filet-ep, 1px) solid var(--champ-filet) !important;
  padding-left:  var(--champ-pad-x) !important;
  padding-right: var(--champ-pad-x) !important;
  transition: background-size var(--dur-sweep, .6s) var(--ease-sweep, ease), border-color var(--dur-sweep, .6s) var(--ease-sweep, ease);
}
.elementor-form .elementor-field-group .elementor-field-textual:not(:required){
  --champ-filet: color-mix(in srgb, var(--zelij-noir, #0A0A0A) 55%, transparent);
}
.elementor-form .elementor-field-group .elementor-field-textual:hover,
.elementor-form .elementor-field-group .elementor-field-textual:focus,
.elementor-form .elementor-field-group .elementor-field-textual:focus-visible{
  background-size: 100% 1.5px;
  border-bottom-color: transparent !important;   /* le filet encre s'efface pendant le balayage */
}
/* iOS : Safari zoome sur tout champ dont la police est < 16 px — ici seulement */
@supports (-webkit-touch-callout: none){
  .elementor-form .elementor-field-group .elementor-field-textual,
  .elementor-form .elementor-field-group .elementor-field-textual:focus{ font-size: 16px !important; }
}
/* champs à 50 % côte à côte : la largeur retranche la moitié de la gouttière
   (50 % + 50 % + gap > 100 % passait à la ligne) */
@media (min-width: 768px){
  .elementor-form .elementor-field-group.elementor-col-50{
    width: calc(50% - var(--space-xs) / 2);
    flex: 0 0 auto;
  }
}
@media (max-width: 767px){
  .elementor-form .elementor-field-group.elementor-col-50{ width: 100%; }
}
/* libellés flottants */
.elementor-form .elementor-field-group:has(> .elementor-field-textual),
.elementor-form .elementor-field-group:has(> .elementor-select-wrapper > select){
  position: relative;
  --flot-haut:   var(--space-3xs);                            /* position flottante */
  --flot-taille: var(--text--2, .75rem);
  --flot-repos:  calc(var(--space-2xs) - var(--space-3xs));   /* au repos : en haut du champ, à --space-2xs du bord */
}
.elementor-form .elementor-field-group:has(> .elementor-field-textual) > .elementor-field-label,
.elementor-form .elementor-field-group:has(> .elementor-select-wrapper > select) > .elementor-field-label{
  position: absolute;
  left: var(--champ-pad-x, var(--space-2xs));
  top: var(--flot-haut);
  margin: 0;
  padding: 0;
  display: flex;                    /* l'espace blanc du balisage entre le texte et ::after disparaît */
  align-items: flex-start;
  pointer-events: none;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--zelij-noir, #0A0A0A);
  transform: translateY(var(--flot-repos));
  transform-origin: left top;
  will-change: transform, font-size;
  transition:
    transform  .45s cubic-bezier(.33, 0, .12, 1),
    font-size  .45s cubic-bezier(.33, 0, .12, 1),
    color      .45s ease;
}
/* le champ réserve la place du libellé flottant, en permanence */
.elementor-form .elementor-field-group .elementor-field-textual,
.elementor-form .elementor-field-group .elementor-field-textual:focus,
.elementor-form .elementor-field-group .elementor-field-textual:focus-visible{
  padding-top: calc(var(--space-3xs) + var(--text--2, .75rem) + var(--space-4xs));
  padding-bottom: var(--space-3xs);
}
.elementor-form .elementor-field-group .elementor-field-textual::placeholder{
  color: transparent !important;
  opacity: 0 !important;
}
.elementor-form .elementor-field-group select.elementor-field-textual:required:invalid{
  color: transparent !important;                           /* option vide, sous le libellé */
}
/* survol du champ : le libellé passe à l'accent, comme le filet */
.elementor-form .elementor-field-group:has(> .elementor-field-textual:hover) > .elementor-field-label,
.elementor-form .elementor-field-group:has(> .elementor-select-wrapper > select:hover) > .elementor-field-label{
  color: var(--color-accent-ink, color-mix(in srgb, var(--color-accent) 70%, var(--zelij-noir)));
}
/* état flottant : focus, ou valeur présente */
.elementor-form .elementor-field-group:has(> .elementor-field-textual:focus) > .elementor-field-label,
.elementor-form .elementor-field-group:has(> .elementor-field-textual:not(:placeholder-shown):not(select)) > .elementor-field-label,
.elementor-form .elementor-field-group:has(> .elementor-select-wrapper > select:valid) > .elementor-field-label,
.elementor-form .elementor-field-group:has(> .elementor-select-wrapper > select:focus) > .elementor-field-label{
  transform: translateY(0);
  font-size: var(--flot-taille);
  color: var(--color-accent-ink, color-mix(in srgb, var(--color-accent) 70%, var(--zelij-noir)));
}
/* marque des champs obligatoires : petit carré penché en exposant, collé au
   libellé ; la même marque sert dans la mention de tête (.z-required-mark) */
.z-required-mark,
.elementor-form .elementor-field-group:has(> .elementor-field-textual:required) > .elementor-field-label::after,
.elementor-form .elementor-field-group:has(> .elementor-select-wrapper > select:required) > .elementor-field-label::after{
  content: "";
  display: inline-block;
  width: .28em;
  height: .28em;
  margin-left: .18em;
  margin-top: .28em;
  flex: 0 0 auto;
  background: var(--color-accent-ink, color-mix(in srgb, var(--color-accent) 70%, var(--zelij-noir)));
  transform: rotate(45deg);
  transform-origin: center;
}
.z-required-mark{ margin-left: .15em; margin-right: .1em; }

/* --- 13.2 Rendez-vous (JetEngine Forms 2480 + JetAppointment, page 2463) -----------------
   Transposition de 13.1 aux classes de JetEngine Forms :
     .elementor-field-textual  → .jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field
     .elementor-field-option   → .jet-form .jet-form__field-label (radios Service, case RGPD)
     .elementor-field-label    → .jet-form .jet-form__label
   Champs ici SANS fond blanc au repos (transparent, filet seul) : fond blanc au focus. */
.jet-form{
  --form-filet:        var(--color-line, #0A0A0A);
  --form-filet-focus:  var(--color-accent);
  --form-air:          var(--space-2xs);
}
.jet-form .jet-form-row{ padding: 0; margin: 0; }
.jet-form .jet-form-row + .jet-form-row{ margin-top: var(--space-xs); }
.jet-form .jet-form-row--hidden{ display: none; }
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field,
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field:focus,
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field:focus-visible{
  --champ-filet: var(--form-filet);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1) !important;
  line-height: var(--leading-snug);
  color: var(--zelij-noir, #0A0A0A) !important;
  background-color: transparent !important;
  background-image: none;
  border: 0;
  border-bottom: var(--filet-ep, 1px) solid var(--champ-filet) !important;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  padding: calc(var(--space-3xs) * 2) 0;
  transition: background-color var(--dur-sweep, .6s) var(--ease-sweep, ease),
              border-color var(--dur-sweep, .6s) var(--ease-sweep, ease);
}
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field:not(:required){
  --champ-filet: color-mix(in srgb, var(--zelij-noir, #0A0A0A) 55%, transparent);
}
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field:focus,
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field:focus-visible,
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field:not(:required):focus,
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field:not(:required):focus-visible{
  --champ-filet: var(--form-filet-focus);
  border-color: var(--form-filet-focus) !important;
  background-color: var(--zelij-blanc, #FFFFFF) !important;
}
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field::placeholder{
  color: var(--zelij-noir, #0A0A0A);
  opacity: .55;
}
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field:required{ color: var(--zelij-noir, #0A0A0A); }
.jet-form :is(.field-type-text,.field-type-textarea) .jet-form__field:required::placeholder{
  color: var(--zelij-noir, #0A0A0A);
  opacity: 1;
}
.jet-form .field-type-textarea textarea.jet-form__field{
  resize: vertical;
  min-height: calc(var(--text-0) * var(--leading-body) * 5);
}
.jet-form .jet-form__label{
  display: block;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: var(--text--1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--zelij-noir, #0A0A0A);
  padding: 0;
  margin: 0 0 var(--space-4xs);
}
.jet-form .jet-form__label .jet-form__required{ color: var(--zelij-noir, #0A0A0A); }
.jet-form .checkradio-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-2xs);
  padding: 0;
}
.jet-form .jet-form__field-label{
  display: flex;
  align-items: center;
  gap: var(--space-3xs);                 /* même écart carré → texte que les filtres (§12.2) */
  cursor: pointer;
}
.jet-form .jet-form__field-label label{
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1);             /* = libellés des filtres de tri */
  line-height: 1;
  color: var(--zelij-noir, #0A0A0A);
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.jet-form .checkradio-wrap input[type="radio"],
.jet-form .checkradio-wrap input[type="checkbox"]{
  --carre:        var(--zelij-blanc, #FFFFFF);
  --carre-taille: 0%;
  --balayage:     0%;
  --balayage-ton: var(--color-accent);
  appearance: none;
  -webkit-appearance: none;
  width:  var(--space-xs);
  height: var(--space-xs);
  min-width:  var(--space-xs);
  min-height: var(--space-xs);
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  background-color: var(--color-accent-pale);
  background-image:
      linear-gradient(var(--carre), var(--carre)),
      linear-gradient(var(--balayage-ton), var(--balayage-ton));
  background-repeat: no-repeat, no-repeat;
  background-position: center center, left center;
  background-size: var(--carre-taille) var(--carre-taille), var(--balayage) 100%;
  transition: background-size var(--dur-sweep) var(--ease-sweep),
              background-color var(--dur-sweep) var(--ease-sweep),
              --carre var(--dur-sweep) var(--ease-sweep);
}
.jet-form .jet-form__field-label:hover input[type="radio"],
.jet-form .jet-form__field-label:hover input[type="checkbox"],
.jet-form .checkradio-wrap input:focus-visible{
  --balayage: 100%;
  --carre-taille: 50%;
}
.jet-form .checkradio-wrap input[type="radio"]:checked,
.jet-form .checkradio-wrap input[type="checkbox"]:checked{
  --balayage: 100%;
  --carre-taille: 50%;
  --carre: var(--zelij-noir, #0A0A0A);
  background-color: var(--color-accent);
}
.jet-form .field-type-checkboxes .jet-form__field-label{
  align-items: flex-start;
  font-size: var(--text--1);
  line-height: var(--leading-body);
}
.jet-form .field-type-checkboxes .checkradio-wrap input[type="checkbox"]{ margin-top: .2em; }
.jet-form .field-type-checkboxes a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--filet-ep, 1px);
  text-underline-offset: .2em;
}
.jet-form .jet-form__field.z-optional,
.jet-form .jet-form__field.z-optional:focus{
  color: color-mix(in srgb, var(--zelij-noir, #0A0A0A) 80%, var(--color-bg, #FFFFFF)) !important;
}
.jet-form .jet-form__field.z-optional::placeholder{
  color: color-mix(in srgb, var(--zelij-noir, #0A0A0A) 80%, var(--color-bg, #FFFFFF)) !important;
}
.jet-form .z-form-note{
  font-family: var(--font-fine);
  font-weight: var(--weight-fine);
  font-size: var(--text--1);
  line-height: var(--leading-snug);
  color: var(--color-accent-ink, var(--color-accent));
  margin: 0;
}
.jet-form .jet-form-row--submit{ margin-top: var(--space-3xs); }
.jet-form .jet-form-message{
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1);
}
.jet-form .jet-form-message--success{ color: var(--color-accent-ink, var(--color-accent)); }
/* Calendrier JetAppointment — filets, encre, accent pour le jour et le créneau
   choisis, aucun arrondi, aucune ombre. */
.jet-apb-calendar{ --jet-apb-accent: var(--color-accent); font-family: var(--font-body); }
.jet-apb-calendar-wrapper{ border: 0; box-shadow: none; padding: 0; }
.jet-apb-calendar-header{ padding: var(--space-3xs) 0; border-bottom: var(--filet-ep, 1px) solid var(--color-line); }
.jet-apb-calendar-header__label{ font-family: var(--font-nav); font-weight: 500; font-size: var(--text--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.jet-apb-calendar-btn{ background: none; border: 0; color: var(--zelij-noir, #0A0A0A); cursor: pointer; }
.jet-apb-calendar-btn:hover{ color: var(--color-accent-ink); }
.jet-apb-calendar-week{ font-family: var(--font-fine); font-weight: var(--weight-fine, 200); font-size: var(--text--2); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--zelij-noir, #0A0A0A); }
.jet-apb-calendar-date{ border: 0 !important; background: transparent !important; }
.jet-apb-calendar-date-body{ border-radius: 0; font-size: var(--text--1); color: var(--zelij-noir, #0A0A0A); transition: background-color .25s ease, color .25s ease; }
.jet-apb-calendar-date--disabled .jet-apb-calendar-date-body{ color: color-mix(in srgb, var(--zelij-noir, #0A0A0A) 30%, transparent); }
.jet-apb-calendar-date:not(.jet-apb-calendar-date--disabled):hover .jet-apb-calendar-date-body{ background: var(--color-accent-pale); }
.jet-apb-calendar-date--today .jet-apb-calendar-date-body{ box-shadow: inset 0 calc(-1 * var(--filet-ep, 1px)) 0 var(--zelij-noir, #0A0A0A); }
.jet-apb-calendar-date--selected .jet-apb-calendar-date-body{ background: var(--zelij-noir, #0A0A0A) !important; color: var(--zelij-blanc, #FFFFFF) !important; }
.jet-apb-calendar-slots{ border: 0; background: var(--zelij-blanc, #FFFFFF); padding: var(--space-3xs) 0; }
.jet-apb-calendar-slot, .jet-apb-calendar-slots .jet-apb-slot{ border: var(--filet-ep, 1px) solid var(--color-line); border-radius: 0; background: transparent; color: var(--zelij-noir, #0A0A0A); font-size: var(--text--1); padding: var(--space-4xs) var(--space-3xs); transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.jet-apb-calendar-slot:hover, .jet-apb-calendar-slots .jet-apb-slot:hover{ border-color: var(--color-accent); background: var(--color-accent-pale); }
.jet-apb-calendar-slot--selected, .jet-apb-calendar-slot.selected, .jet-apb-slot--selected{ background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: var(--zelij-noir, #0A0A0A) !important; }

/* --- 13.3 Boutons de formulaire = grammaire du CTA « book now » ---------------------------
   SEND (Contact us) et Book (rendez-vous) reprennent les états de .z-cta span :
   accent au repos, encre qui entre par la gauche au survol / focus, texte blanc.
   Sélecteurs renforcés (0,4,1) et !important : post-2328.css émet la couleur
   globale accent sur le bouton même sans réglage widget. */
.elementor-widget-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"],
.jet-form .jet-form__submit{
  --cta-fill: var(--color-accent);
  --cta-fill-hover: var(--zelij-noir);
  --cta-ink-hover: var(--zelij-blanc);
  --cta-duree: .5s;
  font-family: var(--font-nav);
  font-weight: var(--weight-nav);
  font-size: var(--text--1);
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-fg) !important;
  border: 0;
  border-radius: var(--radius, 0);
  padding: var(--space-3xs) var(--space-xs);
  background-color: var(--cta-fill) !important;
  background-image: linear-gradient(var(--cta-fill-hover), var(--cta-fill-hover)) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 0% 100% !important;
  transition: background-size var(--cta-duree) ease, color .15s ease .12s !important;
}
.elementor-widget-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]:hover,
.elementor-widget-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]:focus-visible,
.elementor-widget-form .elementor-form .elementor-field-type-submit .elementor-button[type="submit"]:active,
.jet-form .jet-form__submit:hover,
.jet-form .jet-form__submit:focus-visible,
.jet-form .jet-form__submit:active{
  background-size: 100% 100% !important;
  background-color: var(--cta-fill) !important;
  color: var(--cta-ink-hover) !important;
}
/* --- 13.4 États d'alerte (jeton --color-alerte) -------------------------------------------
   Le filet du champ en erreur passe en alerte, le libellé flottant aussi, le
   message sous le champ en alerte-ink. */
.elementor-form .elementor-field-group.elementor-error .elementor-field-textual,
.elementor-form .elementor-field-group.elementor-error .elementor-field-textual:hover,
.elementor-form .elementor-field-group.elementor-error .elementor-field-textual:focus{
  border-bottom-color: var(--color-alerte) !important;
  background-image: none !important;
}
.elementor-form .elementor-field-group.elementor-error > .elementor-field-label{ color: var(--color-alerte-ink) !important; }
.elementor-form .elementor-help-inline,
.elementor-form .elementor-message-danger,
.elementor-form .elementor-field-group.elementor-error .elementor-field-subgroup .elementor-field-option label{
  font-family: var(--font-fine); font-weight: var(--weight-fine, 200); font-size: var(--text--2);
  color: var(--color-alerte-ink) !important;
}
.jet-form .jet-form-message--error,
.jet-form .jet-form__field-error, .jet-form .jet-form__field.error, .jet-form .jet-form__field:invalid:not(:placeholder-shown){
  color: var(--color-alerte-ink);
  border-bottom-color: var(--color-alerte) !important;
}
.jet-form .jet-form-message--error{ font-family: var(--font-fine); font-size: var(--text--2); border: 0; background: var(--color-alerte-pale); padding: var(--space-3xs) var(--space-2xs); }

/* --- 13.5 Contact us en JetFormBuilder (formulaire 2784, page 2328) ---------------------
   Transposition de 13.1 (Contact us, widget Form Elementor Pro — remplacé le 09/09)
   aux classes JetFormBuilder :
     .elementor-form                      → .jet-form-builder
     .elementor-field-group               → .jet-form-builder-row
     .elementor-field-textual             → .jet-form-builder__field:is(.text-field,.textarea-field,.select-field)
     .elementor-select-wrapper            → .jet-form-builder__field-wrap:has(> select)
     .elementor-field-label               → .jet-form-builder__label (+ .jet-form-builder__required = marque)
     .elementor-field-subgroup / -option  → .jet-form-builder__fields-group / .jet-form-builder__field-label
     .elementor-field-type-acceptance     → .field-type-checkbox-field (case RGPD)
     .elementor-col-50                    → colonnes Gutenberg (.wp-block-columns > .wp-block-column)
     bouton                               → .jet-form-builder__submit
   Radios / cases : grammaire des filtres de tri (§12.2) — carré --space-xs, libellé
   Chivo Mono --text--1, écart --space-3xs, entrées en ligne. Le routage e-mail Yes / No
   se fait dans les actions du formulaire (conditions), plus par snippet.
   Règle de maintenance : toute évolution de 13.1 se reporte ici. */
.jet-form-builder{
  --form-filet:        var(--color-line, #0A0A0A);
  --form-filet-focus:  var(--color-accent);
  --champ-pad-x:       var(--space-2xs);
  --flot-haut:         var(--space-3xs);                            /* position flottante du libellé */
  --flot-taille:       var(--text--2, .75rem);
  --flot-repos:        calc(var(--space-2xs) - var(--space-3xs));   /* au repos : en haut du champ */
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.jet-form-builder .jet-form-builder-row{ padding: 0; margin: 0; }
.jet-form-builder .wp-block-columns{ gap: var(--space-xs); margin: 0; }
.jet-form-builder .wp-block-column{ flex: 1 1 0; min-width: 0; }
@media (max-width: 767px){
  .jet-form-builder .wp-block-columns{ flex-wrap: wrap; }
  .jet-form-builder .wp-block-column{ flex-basis: 100% !important; }
}
/* champs texte, e-mail, textarea, select : fond blanc, filet bas, trait accent glissant ;
   le champ réserve en permanence la place du libellé flottant (padding-top) */
.jet-form-builder .jet-form-builder-row .jet-form-builder__field:is(.text-field,.textarea-field,.select-field),
.jet-form-builder .jet-form-builder-row .jet-form-builder__field:is(.text-field,.textarea-field,.select-field):hover,
.jet-form-builder .jet-form-builder-row .jet-form-builder__field:is(.text-field,.textarea-field,.select-field):focus,
.jet-form-builder .jet-form-builder-row .jet-form-builder__field:is(.text-field,.textarea-field,.select-field):focus-visible{
  --champ-filet: var(--form-filet);
  width: 100%;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1) !important;
  line-height: var(--leading-snug);
  color: var(--zelij-noir, #0A0A0A) !important;
  background-color: var(--zelij-blanc, #FFFFFF) !important;
  background-image: linear-gradient(var(--form-filet-focus), var(--form-filet-focus));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1.5px;
  border: 0;
  border-bottom: var(--filet-ep, 1px) solid var(--champ-filet) !important;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  padding: calc(var(--space-3xs) + var(--text--2, .75rem) + var(--space-4xs)) var(--champ-pad-x) var(--space-3xs);
  transition: background-size var(--dur-sweep, .6s) var(--ease-sweep, ease), border-color var(--dur-sweep, .6s) var(--ease-sweep, ease);
}
.jet-form-builder .jet-form-builder-row .jet-form-builder__field:is(.text-field,.textarea-field,.select-field):not([required]){
  --champ-filet: color-mix(in srgb, var(--zelij-noir, #0A0A0A) 55%, transparent);
}
.jet-form-builder .jet-form-builder-row .jet-form-builder__field:is(.text-field,.textarea-field,.select-field):hover,
.jet-form-builder .jet-form-builder-row .jet-form-builder__field:is(.text-field,.textarea-field,.select-field):focus,
.jet-form-builder .jet-form-builder-row .jet-form-builder__field:is(.text-field,.textarea-field,.select-field):focus-visible{
  background-size: 100% 1.5px;
  border-bottom-color: transparent !important;   /* le filet encre s'efface pendant le balayage */
}
.jet-form-builder .jet-form-builder__field::placeholder{ color: transparent !important; opacity: 0 !important; }   /* le libellé flottant remplace le placeholder */
.jet-form-builder .jet-form-builder__field.textarea-field{
  resize: vertical;
  min-height: calc(var(--text-0) * var(--leading-body) * 5);
}
/* select : sans habillage natif, chevron accent (carré tourné) à droite */
.jet-form-builder .jet-form-builder__field-wrap:has(> select){ position: relative; }
.jet-form-builder .jet-form-builder__field.select-field{
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-m) !important;
  cursor: pointer;
}
.jet-form-builder .jet-form-builder__field-wrap:has(> select)::after{
  content: "";
  position: absolute;
  right: var(--space-2xs);
  top: 50%;
  width: .45em; height: .45em;
  border-right: var(--filet-ep) solid var(--color-accent);
  border-bottom: var(--filet-ep) solid var(--color-accent);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.jet-form-builder .jet-form-builder__field.select-field:required:invalid{ color: transparent !important; }   /* option vide, sous le libellé */
.jet-form-builder .jet-form-builder__field.select-field option{ color: var(--zelij-noir, #0A0A0A); }
/* champs optionnels (classe z-optional) : noir éclairci à 80 % */
.jet-form-builder .jet-form-builder__field.z-optional,
.jet-form-builder .jet-form-builder__field.z-optional:focus{
  color: color-mix(in srgb, var(--zelij-noir, #0A0A0A) 80%, var(--color-bg, #FFFFFF)) !important;
}
/* libellés classiques (radios Yes/No) : grammaire du surtitre, 500 */
.jet-form-builder .jet-form-builder__label{
  display: block;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: var(--text--1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--zelij-noir, #0A0A0A);
  padding: 0;
  margin: 0 0 var(--space-4xs);
}
.jet-form-builder .jet-form-builder__label-text{ display: inline-flex; align-items: flex-start; font-size: var(--text--1); }
/* marque des champs obligatoires : le « * » de JetFormBuilder devient le petit carré penché
   (font-size 0 masque l'astérisque ; les cotes sont donc en rem, ≈ .28em à 14 px) */
.jet-form-builder .jet-form-builder__required{
  display: inline-block;
  font-size: 0;
  width: .25rem;
  height: .25rem;
  margin-left: .16rem;
  margin-top: .25rem;
  flex: 0 0 auto;
  background: var(--color-accent-ink, color-mix(in srgb, var(--color-accent) 70%, var(--zelij-noir)));
  transform: rotate(45deg);
  transform-origin: center;
}
/* libellés FLOTTANTS des champs texte / textarea / select */
.jet-form-builder .jet-form-builder-row:has(> .jet-form-builder__field-wrap > :is(.text-field,.textarea-field,.select-field)){ position: relative; }
.jet-form-builder .jet-form-builder-row:has(> .jet-form-builder__field-wrap > :is(.text-field,.textarea-field,.select-field)) > .jet-form-builder__label{
  position: absolute;
  left: var(--champ-pad-x);
  top: var(--flot-haut);
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--zelij-noir, #0A0A0A);
  transform: translateY(var(--flot-repos));
  transform-origin: left top;
  will-change: transform, font-size;
  transition: transform .45s cubic-bezier(.33, 0, .12, 1), font-size .45s cubic-bezier(.33, 0, .12, 1), color .45s ease;
}
.jet-form-builder .jet-form-builder-row:has(> .jet-form-builder__field-wrap > :is(.text-field,.textarea-field,.select-field)) > .jet-form-builder__label .jet-form-builder__label-text{ font-size: inherit; line-height: 1; }
/* survol du champ : le libellé passe à l'accent, comme le filet */
.jet-form-builder .jet-form-builder-row:has(> .jet-form-builder__field-wrap > :is(.text-field,.textarea-field,.select-field):hover) > .jet-form-builder__label{
  color: var(--color-accent-ink, color-mix(in srgb, var(--color-accent) 70%, var(--zelij-noir)));
}
/* état flottant : focus, ou valeur présente */
.jet-form-builder .jet-form-builder-row:has(> .jet-form-builder__field-wrap > :is(.text-field,.textarea-field):focus) > .jet-form-builder__label,
.jet-form-builder .jet-form-builder-row:has(> .jet-form-builder__field-wrap > :is(.text-field,.textarea-field):not(:placeholder-shown)) > .jet-form-builder__label,
.jet-form-builder .jet-form-builder-row:has(> .jet-form-builder__field-wrap > .select-field:valid) > .jet-form-builder__label,
.jet-form-builder .jet-form-builder-row:has(> .jet-form-builder__field-wrap > .select-field:focus) > .jet-form-builder__label{
  transform: translateY(0);
  font-size: var(--flot-taille);
  color: var(--color-accent-ink, color-mix(in srgb, var(--color-accent) 70%, var(--zelij-noir)));
}
/* radios Yes / No et case RGPD : la mécanique et la grammaire des filtres (§12.2) */
.jet-form-builder .jet-form-builder__fields-group.checkradio-wrap{
  display: flex;
  flex-direction: row;                   /* JetFormBuilder empile en colonne : en ligne, comme les filtres */
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-2xs);
  padding: 0;
}
.jet-form-builder .jet-form-builder__field-wrap.checkradio-wrap{ margin: 0; width: auto; }
.jet-form-builder .jet-form-builder__field-label{
  display: flex;
  align-items: center;
  gap: var(--space-3xs);                 /* même écart carré → texte que les filtres */
  cursor: pointer;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1);             /* = libellés des filtres de tri */
  line-height: 1;
  color: var(--zelij-noir, #0A0A0A);
}
.jet-form-builder .jet-form-builder__field-label > span{ padding: 0; margin: 0; }
/* JetFormBuilder dessine son propre carré en span::before et cache l'input
   (radio.css / checkbox.css, chargés APRÈS le Kit) : on supprime son carré et
   on double la classe (0,3,0) pour reprendre la main sur l'input. */
.jet-form-builder .jet-form-builder__field-label > span::before{ content: none !important; }
.jet-form-builder .jet-form-builder__field.checkradio-field.checkradio-field{
  --carre:        var(--zelij-blanc, #FFFFFF);
  --carre-taille: 0%;
  --balayage:     0%;
  --balayage-ton: var(--color-accent);
  position: static;                      /* JetFormBuilder le pose en absolu */
  appearance: none;
  -webkit-appearance: none;
  width:  var(--space-xs);
  height: var(--space-xs);
  min-width:  var(--space-xs);
  min-height: var(--space-xs);
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  opacity: 1;
  background-color: var(--color-accent-pale);
  background-image:
      linear-gradient(var(--carre), var(--carre)),
      linear-gradient(var(--balayage-ton), var(--balayage-ton));
  background-repeat: no-repeat, no-repeat;
  background-position: center center, left center;
  background-size: var(--carre-taille) var(--carre-taille), var(--balayage) 100%;
  transition: background-size var(--dur-sweep) var(--ease-sweep),
              background-color var(--dur-sweep) var(--ease-sweep),
              --carre var(--dur-sweep) var(--ease-sweep);
}
.jet-form-builder .jet-form-builder__field-label:hover .jet-form-builder__field.checkradio-field.checkradio-field,
.jet-form-builder .jet-form-builder__field.checkradio-field.checkradio-field:focus-visible{
  --balayage: 100%;
  --carre-taille: 50%;
}
.jet-form-builder .jet-form-builder__field.checkradio-field.checkradio-field:checked{
  --balayage: 100%;
  --carre-taille: 50%;
  --carre: var(--zelij-noir, #0A0A0A);
  background-color: var(--color-accent);
}
/* case RGPD : texte plus fin, aligné en haut du carré */
.jet-form-builder .field-type-checkbox-field .jet-form-builder__field-label{ align-items: flex-start; }
.jet-form-builder .field-type-checkbox-field .jet-form-builder__field.checkradio-field.checkradio-field{ margin-top: .2em; }
.jet-form-builder .field-type-checkbox-field .jet-form-builder__field-label > span{
  font-size: var(--text--1);
  line-height: var(--leading-body);
}
.jet-form-builder .field-type-checkbox-field a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--filet-ep, 1px);
  text-underline-offset: .2em;
}
/* mention « Fields marked … are required » (bloc HTML .z-form-note) */
.jet-form-builder .z-form-note{
  font-family: var(--font-fine);
  font-weight: var(--weight-fine);
  font-size: var(--text--1);
  line-height: var(--leading-snug);
  color: var(--color-accent-ink, var(--color-accent));
  margin: 0;
}
/* bouton SEND = grammaire du CTA (13.3) */
.jet-form-builder .jet-form-builder__submit-wrap{ margin-top: var(--space-3xs); }
.jet-form-builder .jet-form-builder__submit{
  --cta-fill: var(--color-accent);
  --cta-fill-hover: var(--zelij-noir);
  --cta-ink-hover: var(--zelij-blanc);
  --cta-duree: .5s;
  width: 100%;
  font-family: var(--font-nav);
  font-weight: var(--weight-nav);
  font-size: var(--text--1);
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-fg) !important;
  border: 0;
  border-radius: var(--radius, 0);
  padding: var(--space-3xs) var(--space-xs);
  cursor: pointer;
  background-color: var(--cta-fill) !important;
  background-image: linear-gradient(var(--cta-fill-hover), var(--cta-fill-hover)) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 0% 100% !important;
  transition: background-size var(--cta-duree) ease, color .15s ease .12s !important;
}
.jet-form-builder .jet-form-builder__submit:hover,
.jet-form-builder .jet-form-builder__submit:focus-visible,
.jet-form-builder .jet-form-builder__submit:active{
  background-size: 100% 100% !important;
  background-color: var(--cta-fill) !important;
  color: var(--cta-ink-hover) !important;
}
/* messages (succès / erreur) et erreurs de champ — jeton --color-alerte (13.4) */
.jet-form-builder .jet-form-builder-messages-wrap,
.jet-form-builder .jet-form-builder-message{
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text--1);
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}
.jet-form-builder .jet-form-builder-message--success{ color: var(--color-accent-ink, var(--color-accent)); }
.jet-form-builder .jet-form-builder-message--error{
  font-family: var(--font-fine); font-size: var(--text--2);
  color: var(--color-alerte-ink);
  background: var(--color-alerte-pale);
  padding: var(--space-3xs) var(--space-2xs);
}
.jet-form-builder .jet-form-builder-row.field-has-error .jet-form-builder__field:is(.text-field,.textarea-field,.select-field),
.jet-form-builder .jet-form-builder-row.field-has-error .jet-form-builder__field:is(.text-field,.textarea-field,.select-field):hover{
  border-bottom-color: var(--color-alerte) !important;
  background-image: none !important;
}
.jet-form-builder .jet-form-builder-row.field-has-error > .jet-form-builder__label{ color: var(--color-alerte-ink) !important; }
.jet-form-builder .jet-form-builder__field-error{
  font-family: var(--font-fine); font-weight: var(--weight-fine, 200); font-size: var(--text--2);
  color: var(--color-alerte-ink) !important;
  margin-top: var(--space-4xs);
}
/* iOS : Safari zoome sur tout champ dont la police est < 16 px — ici seulement */
@supports (-webkit-touch-callout: none){
  .jet-form-builder .jet-form-builder-row .jet-form-builder__field:is(.text-field,.textarea-field,.select-field),
  .jet-form-builder .jet-form-builder-row .jet-form-builder__field:is(.text-field,.textarea-field,.select-field):focus{ font-size: 16px !important; }
}

/* =============================================================================
   14. ACCORDÉONS (.z-legal-wrap) — Legal notice (2557), Terms (2562),
       Our story « 7 questions » (2638)
   -----------------------------------------------------------------------------
   Widget Accordion classique alimenté par JetEngine : chaque ligne du Listing
   Grid (.z-legal-wrap) est un widget à un seul volet (.z-legal). Les snippets
   116 / 122 ferment tous les volets sauf le premier et n'en laissent qu'un ouvert.
   Grammaire : filets --filet-ep encre, titre --font-display sans capitales,
   chevron accent (carré tourné) qui bascule à l'ouverture, pas d'icône Elementor.
   Survol d'un volet fermé : balayage sable fin par-dessus le filet ; volet
   ouvert : titre et filet en fondu vers l'accent-ink (border-color animable).
   Spécificité : .z-legal-wrap + classes Elementor (0,3,0) pour battre le widget.
   La FAQ (details/summary, snippet 65) reprend cette grammaire dans son propre CSS.
   ============================================================================= */
.z-legal-wrap{ max-width: 72ch; }
.z-legal-wrap .jet-listing-grid__items{ gap: 0 !important; margin: 0; }   /* 09/09 : sans la marge négative de compensation (§5.3), les volets s'alignent sur la colonne de l'en-tête */
.z-legal-wrap .jet-listing-grid__item{ padding: 0 !important; }
/* 09/09 : grammaire des lignes (awards / portraits) — filets accent-ink translucides, fond blanc en
   balayage au survol (::before, pas de background-image : chargement différé Elementor), chevron mis
   en avant ; volet ouvert = fond blanc sur toute la zone (titre + contenu), sans marge basse. */
.z-legal-wrap{ --z-legal-filet: color-mix(in srgb, var(--color-accent-ink) 40%, transparent); }
.z-legal-wrap .jet-listing-grid__item:first-child .elementor-accordion-item{
  border-top: var(--filet-ep) solid var(--z-legal-filet);
}
.z-legal-wrap .elementor-accordion .elementor-accordion-item{
  position: relative; isolation: isolate;
  border: 0;
  border-bottom: var(--filet-ep) solid var(--z-legal-filet);
  transition: border-color var(--dur-sweep, .6s) var(--ease-sweep, ease);
}
.z-legal-wrap .elementor-accordion .elementor-accordion-item::before{
  content: ""; position: absolute; inset: 0; background: #fff;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-sweep, .6s) var(--ease-sweep, ease);
  z-index: -1; pointer-events: none;
}
.z-legal-wrap .elementor-accordion .elementor-accordion-item + .elementor-accordion-item{ border-top: 0; }
.z-legal-wrap .elementor-accordion .elementor-accordion-item:hover::before,
.z-legal-wrap .elementor-accordion .elementor-accordion-item:has(> .elementor-tab-title.elementor-active)::before{ transform: scaleX(1); }
/* (09/09 : le trait inférieur ne réagit plus — ni au survol ni à l'ouverture) */
.z-legal-wrap .elementor-accordion .elementor-tab-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-xs);                /* 09/09 : même marge interne que les lignes d'awards (.z-award) */
  margin: 0;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--weight-accordeon, 400); /* 09/09 : titres affinés (800 → jeton --weight-accordeon, §2.9 ; idem FAQ, snippet 65) */
  font-size: var(--text-0);                /* 09/09 : même corps que le texte des lignes d'awards */
  line-height: var(--leading-tight);
  letter-spacing: normal;                   /* l'approche serrée (--tracking-tight) était celle du gras */
  color: var(--zelij-noir);
  text-transform: none;                    /* §10.3 met les h3 de listing en capitales */
  transition: color var(--dur-sweep, .6s) var(--ease-sweep, ease);
}
.z-legal-wrap .elementor-accordion .elementor-tab-title .elementor-accordion-icon{ display: none; }
/* text-box: cap alphabetic (§4) rogne les jambages d'un titre en flex : boîte normale ici */
.z-legal-wrap .elementor-accordion .elementor-tab-title,
.z-legal-wrap .elementor-accordion .elementor-tab-title .elementor-accordion-title{
  text-box: normal;
  text-box-trim: none;
  line-height: var(--leading-tight);
}
/* le lien du titre recevait la grammaire des tuiles (§10.2) : peinture normale */
.z-legal-wrap .elementor-accordion .elementor-tab-title a,
.z-legal-wrap .elementor-accordion .elementor-tab-title .elementor-accordion-title{
  color: inherit;
  text-decoration: none;
  flex: 1 1 auto;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  padding: 0;
  margin: 0;
  /* (15/09) la typo globale « primary » d'Elementor (post-2570/2571/2633.css) posait 700 sur le lien :
     même graisse / famille / taille que le summary de la FAQ (snippet 65) */
  font-family: inherit; font-size: inherit; font-weight: var(--weight-accordeon, 400); letter-spacing: normal; text-transform: none;
}
.z-legal-wrap .elementor-accordion .elementor-tab-title::after{   /* chevron : carré tourné, 2 côtés accent */
  content: "";
  flex: none;
  width: .5em; height: .5em;
  border-right: var(--filet-ep) solid var(--color-accent);
  border-bottom: var(--filet-ep) solid var(--color-accent);
  transform: translateY(-.15em) rotate(45deg);
  transition: transform var(--dur-sweep, .6s) var(--ease-sweep, ease),
              border-color var(--dur-sweep, .6s) var(--ease-sweep, ease),
              border-width .3s ease;
}
.z-legal-wrap .elementor-accordion .elementor-tab-title:hover{ color: var(--color-accent); }             /* survol : accent */
.z-legal-wrap .elementor-accordion .elementor-tab-title.elementor-active,
.z-legal-wrap .elementor-accordion .elementor-tab-title.elementor-active:hover{ color: var(--color-accent-ink); }   /* ouvert : accent-ink */
/* survol : le chevron passe en accent-ink, s'épaissit d'un demi-pixel et grandit de 25 % */
.z-legal-wrap .elementor-accordion .elementor-tab-title:hover::after{ border-color: var(--color-accent-ink); border-width: calc(var(--filet-ep) + .5px); transform: translateY(-.05em) scale(1.25) rotate(45deg); }
.z-legal-wrap .elementor-accordion .elementor-tab-title.elementor-active::after{ border-color: var(--color-accent-ink); transform: translateY(.15em) rotate(225deg); }
.z-legal-wrap .elementor-accordion .elementor-tab-title.elementor-active:hover::after{ transform: translateY(.05em) scale(1.25) rotate(225deg); }
.z-legal-wrap .elementor-accordion .elementor-tab-title:focus-visible{
  outline: var(--filet-ep) solid var(--color-accent-ink);
  outline-offset: var(--space-3xs);
}
.z-legal-wrap .elementor-accordion .elementor-tab-content{      /* volet ouvert : le fond blanc vient du ::before de l'item (toute la zone), pas de marge basse */
  padding: 0 var(--space-xs) var(--space-xs);
  margin-bottom: 0;
  border: 0;
  background: transparent;
}
.z-legal-wrap .elementor-accordion .elementor-tab-content > *{ max-width: 62ch; }
.z-legal-wrap .elementor-tab-content p{ margin: 0; }
.z-legal-wrap .elementor-tab-content p + p{ margin-top: var(--space-2xs); }
.z-legal-wrap .elementor-tab-content strong{ font-weight: var(--weight-nav, 400); }
.z-legal-wrap .elementor-tab-content a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: .2em;
  text-decoration-thickness: var(--filet-ep);
  transition: text-decoration-color var(--dur-sweep, .6s) var(--ease-sweep, ease), color var(--dur-sweep, .6s) var(--ease-sweep, ease);
}
.z-legal-wrap .elementor-tab-content a:hover{
  color: var(--color-accent-ink);
  text-decoration-color: var(--color-accent-ink);
}

/* =============================================================================
   15. PAGES ÉDITORIALES — Services (2637), Our story (2638), Resource center (2639)
   -----------------------------------------------------------------------------
   Contenus dans les pages d'options JetEngine (services-content, story-content,
   resource-content), listes rendues par les listings 2632-2636, comportement par
   le snippet 122 (ancres, sommaire fixe, SEO, accordéon). Grammaire propre :
   .z-hero (en-tête deux colonnes : textes + sommaire), .z-subnav-ancres
   (sommaire à filets), .z-rubrique (bloc à filet : h2 .z-anchor + liste),
   .z-sec--section / .z-manifesto (image 45 % + texte 55 %), .z-sec--bandeau /
   .z-bandeau (bandeau centré), .z-award / .z-file (lignes à filet), .z-portrait.
   ============================================================================= */
/* racines de la PAGE seulement (pas celles des listings) : même cadre que le hero de Contact us */
body .elementor-2637 > .e-con.e-parent.e-con:not(.z-entete), body .elementor-2638 > .e-con.e-parent.e-con:not(.z-entete), body .elementor-2639 > .e-con.e-parent.e-con:not(.z-entete){
  --padding-top: var(--space-l); --padding-bottom: var(--space-l);
  --padding-left: var(--space-3xl); --padding-right: var(--space-3xl);
}
/* Services (15/09) : les sections du repeater (.z-sec--section / --bandeau, racines du listing
   2632) portent déjà le cadre d'une rubrique (filet + padding 64/224, comme les rubriques
   d'Our story). Leur conteneur de page (d50c6d4) ne doit donc AUCUN padding : le filet de
   chaque section court d'un bord à l'autre et le contenu s'aligne sur celui d'Our story. */
body .elementor-2637 > .e-con.e-con.e-flex.e-parent.elementor-element-d50c6d4{   /* (0,6,1) : passe devant la règle des racines :not(.z-entete) */
  --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
}
/* --- Grilles JetEngine de ces pages : ni gouttière ni marge négative ------------ */
.z-sec-grid .jet-listing-grid__items, .z-awards__grid .jet-listing-grid__items, .z-files__grid .jet-listing-grid__items,
.z-portraits__grid .jet-listing-grid__items, .z-questions .jet-listing-grid__items{ width: 100% !important;   /* JetEngine pose calc(100% + 20px) + marges négatives : sans gouttière, largeur réelle */ margin: 0 !important; gap: 0 !important; }
.z-sec-grid .jet-listing-grid__item, .z-awards__grid .jet-listing-grid__item{ padding: 0 !important; }
/* Les listings héritent de la grammaire des tuiles (§10.3 : h3 et liens peints en
   background-clip: text). Ici, texte éditorial : peinture normale… */
.z-sec-grid .jet-listing-grid__item :is(h3, h3 a, a:not(:has(img)):not(.elementor-button)),
.z-portraits__grid .jet-listing-grid__item :is(h3, h3 a, a:not(:has(img)):not(.elementor-button)),
.z-awards__grid .jet-listing-grid__item a:not(:has(img)):not(.elementor-button), .z-files__grid .jet-listing-grid__item a:not(:has(img)):not(.elementor-button){
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; text-transform: none; letter-spacing: normal;
}
/* … sauf les boutons deux zones : capitales et approche de .z-cta (spécificité > la règle ci-dessus) */
.z-sec-grid .jet-listing-grid__item .z-cta.z-sec__cta a:not(.elementor-button){ text-transform: uppercase; }
.z-sec-grid .jet-listing-grid__item .z-cta.z-sec__cta a span{ letter-spacing: 0.03em; }
.z-sec-grid .jet-listing-grid__item :is(h2, h3){ margin-bottom: var(--space-3xs); }
/* --- En-tête de page (.z-entete) — Our story, Services, Resource center, Contact us,
   Book an appointment (09/09) --------------------------------------------------------
   Structure (conteneurs Elementor, réglages de mise en page VIDÉS : tout est ici) :
     .z-entete            racine, colonne : marges de page, écart entre les deux rangs
       .z-entete__titres  surtitre (.z-surtitre) + H1, colonne
       .z-entete__contenu intro (text-editor) + sommaire d'ancres OU formulaire, en ligne,
                          deux colonnes égales ; empilées sous 768 px.
   Les variables --padding-* / --gap / --flex-direction sont celles que lit .e-con ;
   .e-con.z-… (0,2,0) passe devant les valeurs par défaut d'Elementor (0,1,0). */
.e-con.z-entete{
  --flex-direction: column; flex-direction: column;
  --padding-top: var(--space-l); --padding-bottom: var(--space-l);
  --padding-left: var(--space-3xl); --padding-right: var(--space-3xl);
  --gap: var(--space-s) var(--space-s); --row-gap: var(--space-s); --column-gap: var(--space-s);
  gap: var(--space-s);
  width: 100%; --width: 100%;
}
.e-con.z-entete__titres{
  --flex-direction: column; flex-direction: column;
  --gap: var(--space-2xs) var(--space-2xs); --row-gap: var(--space-2xs); --column-gap: var(--space-2xs);
  gap: var(--space-2xs);
  --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0;
  width: 100%; --width: 100%;
}
.e-con.z-entete__contenu{
  --flex-direction: row; flex-direction: row;
  --align-items: flex-start; align-items: flex-start;
  --gap: var(--space-l) var(--space-l); --row-gap: var(--space-l); --column-gap: var(--space-l);
  gap: var(--space-l);
  --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0;
  width: 100%; --width: 100%;
}
/* deux colonnes égales, que l'enfant soit un widget ou un conteneur (formulaire) */
.e-con.z-entete__contenu > .elementor-widget,
.e-con.z-entete__contenu > .e-con{
  flex: 1 1 0; min-width: 0;
  width: auto; --width: auto; --container-widget-width: auto; max-width: none;
}
.e-con.z-entete__contenu > .e-con{ --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0; padding: 0; }   /* padding en dur : bat le 10 px par défaut qu'Elementor écrit par élément */
/* sans intro (Book an appointment) : le formulaire garde la colonne de droite */
.e-con.z-entete__contenu > .e-con:only-child{ flex: 0 0 calc(50% - var(--space-l) / 2); margin-left: auto; }
.z-entete .z-entete__contenu .elementor-widget-text-editor,
.z-hero__intro{ max-width: 64ch; }
@media (max-width: 1024px){
  .e-con.z-entete{ --padding-left: var(--space-s); --padding-right: var(--space-s); }
  .e-con.z-entete__contenu{ --gap: var(--space-m) var(--space-m); --row-gap: var(--space-m); --column-gap: var(--space-m); gap: var(--space-m); }
}
@media (max-width: 767px){
  .e-con.z-entete{ --padding-top: var(--space-m); --padding-bottom: var(--space-m); }
  .e-con.z-entete__contenu{ --flex-direction: column; flex-direction: column; gap: var(--space-s); --gap: var(--space-s) var(--space-s); --row-gap: var(--space-s); --column-gap: var(--space-s); }
  .e-con.z-entete__contenu > .elementor-widget,
  .e-con.z-entete__contenu > .e-con{ flex: 0 0 auto; width: 100%; --width: 100%; max-width: 100%; }
  .e-con.z-entete__contenu > .e-con:only-child{ flex: 0 0 auto; margin-left: 0; }
}
/* .z-hero : ancienne classe des racines Services / Resource center, conservée (inerte) */
.z-hero{ gap: var(--space-2xs); }
/* --- Sommaire à filets (.z-subnav-ancres, colonne de droite) ------------------------
   Liste verticale : une entrée par ligne, filets fins accent-ink translucides,
   carré accent à droite, balayage blanc au survol (::before), entrée courante
   en accent-ink (classe is-current posée par le snippet 122). Le sommaire reste dans
   la mise en page — pas de position fixe (décision du 08/09). */
.z-subnav-ancres{
  --z-subnav-filet: color-mix(in srgb, var(--color-accent-ink) 40%, transparent);
  --z-subnav-top: var(--space-xl);              /* repère du snippet 122 pour la section courante */
  display: flex; flex-direction: column; gap: 0;
  margin-top: 0;
  border-top: var(--filet-ep) solid var(--z-subnav-filet);
}
.z-subnav-ancres a{
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  padding: var(--space-xs);
  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(--zelij-noir); text-decoration: none;
  border-bottom: var(--filet-ep) solid var(--z-subnav-filet);
  transition: color var(--dur-sweep, .6s) var(--ease-sweep, ease);
}
.z-subnav-ancres a::before{
  content: ""; position: absolute; inset: 0; background: #fff; z-index: -1; pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-sweep, .6s) var(--ease-sweep, ease);
}
.z-subnav-ancres a:hover::before, .z-subnav-ancres a:focus-visible::before{ transform: scaleX(1); }
.z-subnav-ancres a::after{                                   /* flèche fine vers le bas, à tige : tête = chevron des accordéons (§14) */
  --z-fleche: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14' fill='none' stroke='black' stroke-width='1' stroke-linecap='square'><path d='M5 0v12.5M1.2 8.7 5 12.5l3.8-3.8'/></svg>");
  content: ""; flex: none; width: .6em; height: .85em;
  background-color: var(--color-accent);
  -webkit-mask: var(--z-fleche) no-repeat center / contain;
          mask: var(--z-fleche) no-repeat center / contain;
  transition: transform var(--dur-sweep, .6s) var(--ease-sweep, ease), background-color var(--dur-sweep, .6s) var(--ease-sweep, ease);
}
.z-subnav-ancres a:hover, .z-subnav-ancres a:focus-visible, .z-subnav-ancres a.is-current{ color: var(--color-accent-ink); }
.z-subnav-ancres a:hover::after, .z-subnav-ancres a:focus-visible::after{ background-color: var(--color-accent-ink); transform: translateY(.15em); }
.z-subnav-ancres a.is-current::after{ background-color: var(--color-accent-ink); }
.z-subnav-ancres a:focus-visible{ outline: var(--filet-ep) solid var(--color-accent-ink); outline-offset: -2px; }
/* --- Blocs à filet et titres de section ------------------------------------------- */
.z-rubrique, .z-bandeau, .z-sec--section, .z-sec--bandeau{
  --z-sec-gouttiere: var(--space-3xl);      /* ecran : 80 -> 224 px */
  padding-block: var(--space-l);
  padding-inline: var(--z-sec-gouttiere);
  border-top: var(--filet-ep) solid var(--zelij-noir);
  gap: var(--space-s);
}
@media (max-width: 1024px){
  .z-rubrique, .z-bandeau, .z-sec--section, .z-sec--bandeau{ --z-sec-gouttiere: var(--space-l); }
}
@media (max-width: 767px){
  .z-rubrique, .z-bandeau, .z-sec--section, .z-sec--bandeau{ --z-sec-gouttiere: var(--space-s); }
}
.z-anchor{ margin-bottom: var(--space-xs); }
/* (15/09) écran : entre le titre d'une rubrique (h2 .z-anchor) et son contenu, space-m au lieu du gap space-s
   de la rubrique — via la marge du titre pour ne pas toucher le gap des autres enfants (manifeste, etc.).
   (0,4,0) : Elementor pose `.e-con .elementor-widget.elementor-widget{ margin-block-end: 0 }` (0,3,0) — la règle
   `.z-anchor{ margin-bottom }` ci-dessus n'a jamais été effective sur le widget. */
@media (min-width: 1025px){
  .z-rubrique > .z-anchor.elementor-widget.elementor-widget{ margin-block-end: calc(var(--space-m) - var(--space-s)); }
}
.z-anchor .elementor-heading-title{ scroll-margin-top: calc(var(--hauteur-entete, 110px) + var(--space-s)); }
.elementor-widget-heading.z-anchor h2.elementor-heading-title, .z-bandeau .elementor-widget-heading h2.elementor-heading-title{ font-size: var(--text-3); text-transform: uppercase; }
/* Sous-titres et surtitres de ces pages : Chivo capitales, accent foncé (recette eyebrow) */
.z-sec__body h3, .z-award__cat .elementor-heading-title, .z-portrait__media .elementor-heading-title, .z-file__rubrique .elementor-heading-title{
  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-ink);
}
.z-sec__body h3{ margin: var(--space-s) 0 var(--space-3xs); }
/* sous-titres des sections Services (« Private clients », « Professionals »…) : la neutralisation
   des tuiles (ci-dessus, (0,3,2) à cause du :is()) leur retirait capitales et approche — reprise en
   (0,4,1) via .z-sec__texte, graisse --weight-label (300 = un cran au-dessus de --weight-nav). 09/09 */
.z-sec-grid .jet-listing-grid__item .z-sec__texte .z-sec__body h3{
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.z-award__cat .elementor-heading-title, .z-portrait__media .elementor-heading-title, .z-file__rubrique .elementor-heading-title{ font-size: var(--text--2); }
/* --- Image (45 %) + texte (55 %, 62ch) — sections Services et manifesto Our story ---- */
.z-sec--section, .z-manifesto{ display: flex; --flex-direction: row; flex-direction: row; align-items: flex-start; gap: var(--space-l); }
/* alternance gauche / droite : ne compte QUE les sections image + texte — un bandeau
   CTA intercalé ne décale pas l'alternance (nth-child « of S », Chrome 111+, Safari 9+, Firefox 113+) */
.z-sec-grid .jet-listing-grid__item:nth-child(even of :has(.z-sec--section)) .z-sec--section{ --flex-direction: row-reverse; flex-direction: row-reverse; }
:is(.z-sec--section, .z-manifesto) > :is(.z-sec__media, .z-manifesto__media){ flex: 0 0 45%; width: 45%; }
:is(.z-sec--section, .z-manifesto) > :is(.z-sec__texte, .z-manifesto__texte){ flex: 1 1 auto; width: auto; max-width: 62ch; }
.z-sec-grid .jet-listing-grid__item .z-sec--section:not(:has(.z-sec__media img)), .z-manifesto:not(:has(.z-manifesto__media img)){ --flex-direction: row; flex-direction: row; }   /* sans image : texte seul, à gauche */
:is(.z-sec--section, .z-manifesto):not(:has(:is(.z-sec__media, .z-manifesto__media) img)) > :is(.z-sec__media, .z-manifesto__media){ display: none; }
:is(.z-sec__media, .z-manifesto__media) img{ display: block; width: 100%; height: auto; }
:is(.z-sec__body, .z-hero__intro) p + p, .z-sec__body ul{ margin-top: var(--space-2xs); }
.z-manifesto__body p + p{ margin-top: var(--space-xs); }
.z-sec__body ul{ padding-left: 1.2em; }
.z-sec__body li + li{ margin-top: var(--space-3xs); }
.z-sec__encart{ margin-top: var(--space-s); max-width: 48ch; font-weight: var(--weight-nav); }
.z-sec__encart p{ margin: 0; }
/* --- Bandeaux centrés (bandeau de section et bandeau Our story) -------------------- */
.z-sec-grid .z-sec--bandeau, .z-bandeau{ display: flex; --flex-direction: column; flex-direction: column; --align-items: center; align-items: center; text-align: center; gap: var(--space-xs); }
/* bandeau Our story : pas de marge basse — le trait sous le bouton touche le filet de la section suivante (09/09) */
.e-con.z-bandeau{ --padding-bottom: 0; padding-bottom: 0; --margin-bottom: 0; margin-bottom: 0; }
.z-sec--bandeau > .z-sec__media{ display: none; }
.z-sec--bandeau > .z-sec__texte{ width: auto; max-width: 62ch; display: flex; flex-direction: column; align-items: center; }
.z-sec--bandeau .z-anchor{ margin-bottom: 0; }
/* --- Boutons ---------------------------------------------------------------------------
   Sections Services : widget Shortcode [zelij_sec_btn] de classe z-cta z-sec__cta
   (deux zones, §9.1), sans trait ; sans texte saisi le shortcode ne rend rien → masqué.
   Bandeau Our story et fichiers : widgets Bouton de classe z-btn (pavé sable §9.2) ;
   le bandeau garde un trait vertical de 1 px sous le bouton. */
.z-btn{ width: auto; }
.z-btn:has(.elementor-button-text:empty){ display: none; }
.z-sec__cta{ margin-top: var(--space-s); }
.z-sec--bandeau .z-sec__cta{ align-self: center; }
/* Bandeau CTA (Services, type « Bandeau centré ») = bandeau Our story : trait vertical
   sous le bouton, section sans marge basse (le trait touche le filet de la suivante) ;
   hors sommaire d'ancres (snippet 122). */
.z-sec-grid .z-sec--bandeau{ padding-bottom: 0; }
.z-sec__cta.z-cta:not(:has(a)){ display: none; }
.z-sec__cta.z-cta .elementor-shortcode,
.z-bandeau__cta.z-cta .elementor-shortcode{ display: inline-flex; align-items: center; gap: var(--space-2xs); }
.z-bandeau__cta.z-cta:not(:has(a)){ display: none; }
.z-bandeau__cta,
.z-sec-grid .z-sec--bandeau .z-sec__cta{ margin-top: var(--space-s); position: relative; padding-bottom: var(--space-l); }
.z-bandeau__cta::after,
.z-sec-grid .z-sec--bandeau .z-sec__cta::after{ content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--filet-ep); height: var(--space-l); background: var(--color-line); }
.z-file__btn .elementor-button:not([href]), .z-file__btn .elementor-button[href=""], .z-file__btn .elementor-button[href="#"]{ opacity: .35; pointer-events: none; }  /* fichier pas encore posé */
/* --- Lignes à filet léger : fichiers (.z-file) ------------------------------------- */
.z-file{ display: flex; --flex-direction: row; flex-direction: row; gap: var(--space-s); padding-block: var(--space-2xs);
  border-bottom: var(--filet-ep) solid color-mix(in srgb, var(--zelij-noir) 15%, transparent);
  align-items: center; justify-content: space-between; }
:is(.z-award, .z-file, .z-portrait) .elementor-widget{ width: auto; margin: 0; }
/* --- Awards « About Ateliers Zelij » (Our story, listing 2634) ---------------------------
   Trois textes à la même hauteur : année Chivo Mono --text-0, catégorie Plus
   Jakarta Sans 200 capitales --text--1 accent-ink, texte Plus Jakarta Sans 700
   (typo globale Elementor) --text-0. Lignes jointives, marge interne = contenu
   des volets d'accordéon, filets accent-ink à 40 %, fond blanc qui balaie la ligne
   au survol (::before). Sélecteurs préfixés .z-award (0,3,0) : la typo globale
   d'Elementor (post-2634.css, après le Kit) bat une règle (0,2,0). */
.z-award{
  --z-award-filet: color-mix(in srgb, var(--color-accent-ink) 40%, transparent);
  display: flex; --flex-direction: row; flex-direction: row; align-items: baseline;
  gap: var(--space-s);
  padding: var(--space-xs);
  position: relative;
  isolation: isolate;
  border-bottom: var(--filet-ep) solid var(--z-award-filet);
}
/* (09/09 : plus de fond blanc au survol — lignes sans lien) */
.z-awards__grid .jet-listing-grid__item:first-child .z-award{ border-top: var(--filet-ep) solid var(--z-award-filet); }
.z-award .z-award__annee .elementor-heading-title{ font-family: var(--font-mono); font-weight: var(--weight-body); font-size: var(--text-0); min-width: 4ch; }
.z-award .z-award__cat .elementor-heading-title{ font-family: var(--font-fine); font-weight: var(--weight-label); font-size: var(--text--1); text-transform: uppercase; letter-spacing: var(--tracking-nav); color: var(--color-accent-ink); min-width: 10ch; }
.z-award .z-award__texte .elementor-heading-title{ font-size: var(--text-0); }
/* --- Portraits presse ([zelij_portraits], snippet 122 — ex-listing 2635) et fichiers ----------
   Carte cliquable sur toute sa surface : année / titre de l'article / magazine empilés —
   typographie des lignes d'awards ; filet haut accent-ink translucide, balayage blanc au
   survol. 3 colonnes. (Le visuel og:image essayé le 09/09 a été retiré à la demande de Julien.) */
.zelij-portraits{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-s); }
.z-portrait{
  --z-award-filet: color-mix(in srgb, var(--color-accent-ink) 40%, transparent);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-xs) var(--space-s);
  position: relative; isolation: isolate;
  border-top: var(--filet-ep) solid var(--z-award-filet);
  color: var(--zelij-noir); text-decoration: none;
  transition: color var(--dur-sweep, .6s) var(--ease-sweep, ease);
}
.z-portrait::before{ content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-sweep, .6s) var(--ease-sweep, ease); z-index: -1; pointer-events: none; }
a.z-portrait:hover::before, a.z-portrait:focus-visible::before{ transform: scaleX(1); }
a.z-portrait:hover .z-portrait__titre, a.z-portrait:focus-visible .z-portrait__titre{ color: var(--color-accent-ink); }
a.z-portrait:focus-visible{ outline: var(--filet-ep) solid var(--color-accent-ink); outline-offset: calc(-1 * var(--space-3xs)); }
.z-portrait__annee{ font-family: var(--font-mono); font-weight: var(--weight-body); font-size: var(--text-0); line-height: var(--leading-snug); }
.z-portrait__titre{ font-family: var(--font-display); font-weight: 700; font-size: var(--text-0); line-height: var(--leading-snug); letter-spacing: normal; transition: color var(--dur-sweep, .6s) var(--ease-sweep, ease); }
.z-portrait__media{ font-family: var(--font-fine); font-weight: var(--weight-label); font-size: var(--text--1); line-height: var(--leading-snug); text-transform: uppercase; letter-spacing: var(--tracking-nav); color: var(--color-accent-ink); }
.z-files__grid .jet-listing-grid__items{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-l) !important; }
/* Our story (15/09) : les rubriques pleine largeur (Seven questions, Portraits, Timeline) prennent sur écran
   une gouttière 4xl (≈ 320 px) au lieu de la 3xl commune — même jeton --z-sec-gouttiere, filet toujours bord à bord ;
   tablette / mobile : gouttières communes (l / s) inchangées. */
@media (min-width: 1025px){
  .z-rubrique.z-questions, .z-rubrique.z-portraits, .z-rubrique.z-awards{ --z-sec-gouttiere: var(--space-4xl); }
}
@media (max-width: 767px){
  /* (15/09) même sélecteur « even of :has() » que l'alternance desktop : à spécificité égale (0,5,0) la
     règle mobile, placée après, l'emporte → image d'abord, texte dessous, dans toutes les sections */
  .z-sec--section, .z-sec-grid .jet-listing-grid__item:nth-child(even of :has(.z-sec--section)) .z-sec--section, .z-manifesto{ --flex-direction: column; flex-direction: column; gap: var(--space-s); }
  :is(.z-sec--section, .z-manifesto) > :is(.z-sec__media, .z-manifesto__media){ flex-basis: auto; width: 100%; }
  .z-files__grid .jet-listing-grid__items{ grid-template-columns: 1fr; }
  .zelij-portraits{ grid-template-columns: 1fr; }
  .z-award{ flex-wrap: wrap; gap: var(--space-3xs) var(--space-xs); }
}

/* =============================================================================
   16. UTILITAIRES DE PAGE — retour en haut, curseur fluo (snippet 136)
   -----------------------------------------------------------------------------
   Le snippet 136 pose le balisage en fin de <body> et pilote les classes ;
   tout l'habillage est ici.
   ============================================================================= */
/* --- 16.1 Retour en haut (.z-top) ---------------------------------------------------
   <a href="#top" class="z-top"><svg><g class="z-top__ghost">…</g><g class="z-top__draw">…</g></svg></a>
   Flèche fantôme encre à 20 % + flèche qui SE DESSINE (stroke-dashoffset) quand le
   bouton apparaît (classe is-visible posée après ~400 px de descente). Desktop :
   en haut à droite, sous la barre de nav collée ; tablette / mobile : en bas à droite. */
.z-top{
  position: fixed;
  z-index: var(--z-top);
  right: 8vw; top: 8vw;
  width: 8vw; height: 8vw;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(-.5vw);
  transition: opacity var(--dur-sweep) var(--ease-sweep), transform var(--dur-sweep) var(--ease-sweep);
}
.z-top.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.z-top svg{ width: 5vw; height: 5vw; overflow: visible; }
.z-top line{ fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.z-top__ghost line{ stroke: var(--zelij-noir); opacity: .2; }
.z-top__draw line{ stroke: var(--color-accent-ink); stroke-dasharray: 100; stroke-dashoffset: 100; }
.z-top.is-visible .z-top__draw .z-top__stem{ animation: z-top-draw .9s cubic-bezier(.22, 1, .36, 1) forwards; }
.z-top.is-visible .z-top__draw .z-top__head{ animation: z-top-draw .7s cubic-bezier(.22, 1, .36, 1) .55s forwards; }
.z-top:hover .z-top__draw line, .z-top:focus-visible .z-top__draw line{ stroke: var(--color-accent); }
.z-top:hover svg{ transform: translateY(-.3vw); transition: transform var(--dur-sweep) var(--ease-sweep); }
.z-top:focus-visible{ outline: var(--filet-ep) solid var(--color-accent-ink); outline-offset: var(--space-3xs); }
@keyframes z-top-draw{ to{ stroke-dashoffset: 0; } }
@media (max-width: 1024px){
  .z-top{ right: 0; top: auto; bottom: 8vw; width: 12vw; height: 12vw; }
  .z-top svg{ width: 7vw; height: 7vw; }
}
@media (max-width: 767px){
  .z-top{ bottom: 4vw; width: 14vw; height: 14vw; }
  .z-top svg{ width: 8vw; height: 8vw; }
}
/* --- 16.2 Curseur fluo (.z-cursor) ---------------------------------------------------
   Pastille --color-accent-fluo qui suit le pointeur avec un léger retard (lerp en
   JS, transform sur .z-cursor) ; le curseur natif est masqué (body.z-cursor-on) sauf
   dans les champs de saisie. La pastille GRANDIT sur les éléments cliquables
   (is-big) et devient une bulle à texte sur [data-cursor-text] (is-text).
   mix-blend-mode: multiply + opacité .95 (choix Julien) : la pastille reste fluo sur
   le clair, le texte encre reste lisible dessous ; sur un fond sombre (.z-invert) elle
   passe en « difference ». Pointeur fin seulement. */
.z-cursor{
  --z-cursor-taille: 16px;
  position: fixed; top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  /* la fusion est posée ICI (élément fixe, dans le contexte racine) : posée sur la pastille,
     elle ne fusionnait qu'avec son parent transformé (contexte isolé) → aucun effet visible */
  mix-blend-mode: multiply;              /* « produit » ; alternative : color */
  transition: opacity .35s ease;
  will-change: transform;
}
body.z-cursor-on .z-cursor{ opacity: .95; }   /* légère transparence (demande Julien) */
.z-cursor.is-invert{ mix-blend-mode: difference; }
.z-cursor__ball{
  width: var(--z-cursor-taille); height: var(--z-cursor-taille);
  margin: calc(var(--z-cursor-taille) / -2) 0 0 calc(var(--z-cursor-taille) / -2);
  border-radius: 50%;
  background: var(--color-accent-fluo);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: width .8s cubic-bezier(.21, 1, .4, .98), height .8s cubic-bezier(.21, 1, .4, .98), margin .8s cubic-bezier(.21, 1, .4, .98), opacity .3s ease;
}
.z-cursor__text{
  font-family: var(--font-nav); font-weight: var(--weight-nav); font-size: var(--text--2);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: 1;
  color: var(--zelij-noir); white-space: nowrap; text-align: center;
  transform: translateY(120%); opacity: 0;
  transition: transform .5s cubic-bezier(.21, 1, .4, .98) .15s, opacity .3s ease .15s;
}
.z-cursor.is-big{ --z-cursor-taille: 48px; }
.z-cursor.is-text{ --z-cursor-taille: 104px; }
.z-cursor.is-text .z-cursor__text{ transform: translateY(0); opacity: 1; }
.z-cursor.is-hidden .z-cursor__ball{ opacity: 0; }
@media (hover: hover) and (pointer: fine){
  body.z-cursor-on, body.z-cursor-on *{ cursor: none !important; }
  body.z-cursor-on :is(input, textarea, select, [contenteditable]){ cursor: auto !important; }
}/* 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://www.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://www.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://www.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://www.zelij.com/wp-content/uploads/2026/07/plusjakartasans-bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://www.zelij.com/wp-content/uploads/2026/07/plusjakartasans-extrabold.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://www.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://www.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://www.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://www.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://www.zelij.com/wp-content/uploads/2026/07/chivomono-extralight.woff2') format('woff2');
}
@font-face {
	font-family: 'Chivo Mono';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://www.zelij.com/wp-content/uploads/2026/09/chivomono-regular.woff2') format('woff2');
}
/* End Custom Fonts CSS */