/* Socle de code du thème — ce que Bricks ne porte pas, et qui vit avec le code qui s'en sert.
 *
 * Depuis la reconstruction en éléments natifs (2026-10-07), le style du site est dans Bricks :
 * palette « Modulo » (couleurs = variables --mdl-*), variables globales (jetons), style de
 * thème « Modulo » (typographie + CSS de socle), classes globales mdl-* (les composants).
 * Ne restent ici que :
 *   · les deux @font-face de Figtree — sous-ensembles par unicode-range, que les polices
 *     personnalisées de Bricks ne savent pas exprimer, et que functions.php précharge ;
 *   · les états d'avant-peinture de la couche d'animation (repris tels quels de l'ancien
 *     parts/motion.css) : ils n'ont de sens qu'avec assets/js/modulo-motion.js, ils vivent avec lui.
 *
 * 1 rem = 10 px (Bricks pose html{font-size:62.5%}).
 */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/figtree/figtree-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/figtree/figtree-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═════════════════════════════════════════ couche d'animation (ex parts/motion.css) */
/* ═══════════════════════════════════════════════════════════════════════════════════
   La couche d'animation — ce que la CSS doit poser AVANT que GSAP se réveille.

   Le comportement vit dans assets/js/modulo-motion.js. Ce morceau-ci ne fait que trois
   choses, et rien d'autre :

     1. cacher ce qui est déjà à l'écran au chargement (le héros, le bandeau de page),
        pour qu'il n'apparaisse pas une fraction de seconde avant d'être animé ;
     2. donner aux cadres d'image de quoi contenir la parallaxe ;
     3. préparer les filets qui se tracent.

   Tout est sous `html.mdl-anim`, une classe posée par un script en ligne dans <head>
   (functions.php, modulo_motion_amorce) UNIQUEMENT si le visiteur ne demande pas de
   réduire les animations. Elle se retire d'elle-même au bout de 2,5 s si le script
   d'animation n'a jamais démarré : sans JavaScript, ou si GSAP ne se charge pas, la
   page reste entièrement lisible. C'est la règle : rien de ce qui est caché ici ne
   peut le rester si l'animation n'a pas lieu.

   Ce qui est SOUS la ligne de flottaison n'a pas besoin d'être caché en CSS : GSAP en
   pose l'état de départ une demi-hauteur d'écran avant qu'il entre (ronde 9 — avant,
   c'était au départ de l'animation, déjà à l'écran, et les titres clignotaient). Cacher aussi
   ces sections-là allongerait la liste ci-dessous à chaque section ajoutée, et
   dupliquerait en CSS la chorégraphie qui vit en JavaScript.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. l'entrée de page : héros et bandeau ─────────────────────────────────────── */

/* Le héros s'animait en @keyframes depuis la maquette. Quand GSAP prend la main, les
   deux se disputeraient la même opacité — on éteint donc les keyframes ici, et
   modulo-motion.js redonne exactement le même mouvement, au même tempo. */
html.mdl-anim .mdl-hero h1,
html.mdl-anim .mdl-hero .mdl-side,
html.mdl-anim .mdl-frame {
  animation: none;
  /* `transform:none` va avec `animation:none`, et il n'est pas facultatif. L'état de
     départ des keyframes est posé en dur sur ces trois éléments (`translateY(.4em)` sur
     le titre, `translateY(1.6rem)` sur la colonne de droite) et c'est l'image-clé finale
     qui le remettait à zéro. En coupant l'animation sans couper le décalage, le titre du
     héros resterait à 0,4 em trop bas pour toujours — GSAP anime son opacité, pas sa
     position. */
  transform: none;
}

html.mdl-anim .mdl-hero h1,
html.mdl-anim .mdl-hero .mdl-side,
html.mdl-anim .mdl-frame,
html.mdl-anim .mdl-banniere .mdl-kick,
html.mdl-anim .mdl-banniere h1,
html.mdl-anim .mdl-banniere .mdl-lead,
html.mdl-anim .mdl-banniere .mdl-ctas,
html.mdl-anim .mdl-banniere .mdl-shot {
  opacity: 0;
}

/* ─── 2. la parallaxe ────────────────────────────────────────────────────────────────
 * `mdl-par` est posée par le JavaScript sur le CADRE, jamais sur l'image. Le cadre
 * garde sa place dans la grille ; l'image, agrandie de quelques pour cent, glisse à
 * l'intérieur. C'est pour cela que chaque photo parallaxée a un cadre — deux éléments
 * ont dû en recevoir un (modulo-banniere, modulo-services).
 *
 * `overflow:hidden` est ici et pas dans les feuilles de section : c'est la parallaxe
 * qui l'exige, et une section qui n'est pas animée n'a pas à le porter. */
html.mdl-anim .mdl-par {
  overflow: hidden;
}

/* La boîte que modulo-motion.js fabrique quand le cadre d'origine contient aussi une
   légende (`.mdl-place`, `.mdl-fam`, les portraits) : elle épouse la photo et rien
   d'autre. `display:block` parce qu'un <span> est en ligne par défaut, et une boîte en
   ligne prend la hauteur de la ligne, pas celle de l'image. */
html.mdl-anim .mdl-par-boite {
  display: block;
}

/* `will-change` seulement sur ce qui bouge vraiment, et seulement pendant la
   parallaxe : posé partout, il coûte une couche de composition par image. */
html.mdl-anim .mdl-par > img,
html.mdl-anim .mdl-par > video {
  will-change: transform;
}

/* ─── 3. les filets qui se tracent ───────────────────────────────────────────────────
 * Le registre réglé est la signature de la proposition L : le trait sous les mots dans
 * « Inclus avec chaque unité », le filet bleu au-dessus de chaque temps de « comment ça
 * fonctionne ». Les deux sont des `border-top`, qu'on ne peut pas mettre à l'échelle.
 * On rend donc la bordure transparente et on superpose un trait identique, en `::after`
 * — libre dans les deux cas, `::before` portant déjà le numéro des étapes.
 *
 * `top:-Xrem` remonte le trait sur la bordure : le bloc contenant d'un absolu est la
 * boîte de rembourrage, c'est-à-dire le bord INTÉRIEUR de la bordure. */
/* Le trait se trace en mettant à l'échelle un `::after`, mais un pseudo-élément est
   hors de portée du JavaScript. On anime donc une variable personnalisée sur l'élément,
   que le pseudo lit dans son `transform`. `@property` la déclare comme un nombre pour
   qu'elle s'interpole proprement et, surtout, `inherits:true` la fait descendre jusqu'au
   pseudo-élément — sans quoi il ne la verrait jamais. Le `var(…, 0)` reste le repli pour
   les navigateurs sans @property : le trait part quand même de zéro. */
@property --mdl-filet {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

html.mdl-anim .mdl-etapes li,
html.mdl-anim .mdl-inclus .mdl-cell {
  position: relative;
}

html.mdl-anim .mdl-etapes li::after,
html.mdl-anim .mdl-inclus .mdl-cell::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  transform: scaleX(var(--mdl-filet, 0));
  transform-origin: left center;
}

html.mdl-anim .mdl-etapes li {
  border-top-color: transparent;
}

html.mdl-anim .mdl-etapes li::after {
  top: -0.15rem;
  height: 0.15rem;
  background: var(--mdl-blue);
}

html.mdl-anim .mdl-inclus .mdl-cell {
  border-top-color: transparent;
}

html.mdl-anim .mdl-inclus .mdl-cell::after {
  top: -1px;
  height: 1px;
  background: var(--mdl-rule);
}

/* ─── 4. les lignes de titre découpées ───────────────────────────────────────────────
 * SplitText enveloppe chaque ligne dans un masque quand on lui demande `mask:'lines'`
 * (`.mdl-ligne-masque-mask`, en `overflow:clip`) et pose `linesClass` sur la ligne
 * elle-même. Le débordement est déjà coupé par le plugin ; il reste à empêcher que les
 * jambages (p, g, j) soient rognés, ce que `line-height` seul ne garantit pas sur un
 * titre très serré (-.035em, line-height 1.02).
 *
 * CE QU'IL NE FAUT PAS FAIRE, et pourquoi — c'est le défaut qu'on a corrigé :
 * `padding-bottom:.12em` + `margin-bottom:-.12em` sur la LIGNE semble s'annuler, et ne
 * s'annule pas. La marge négative traverse le masque (`overflow:clip` n'ouvre pas de
 * contexte de formatage, contrairement à `hidden`) et va se fondre avec la suivante ;
 * selon que le titre porte ou non une marge basse, il restait 0,12 em non compensé.
 * Mesuré : 46 titres sur 57 sautaient de 6 à 27 px à la fin de leur animation, au
 * moment où le découpage est défait. C'est ce saut que le client voyait — le texte se
 * remettait en place d'un coup.
 *
 * `overflow-clip-margin` agrandit la zone de découpe SANS toucher à la mise en page :
 * c'est exactement la propriété faite pour ça. La hauteur du titre est donc rigoureusement
 * la même avant, pendant et après l'animation. Les deux longhands visent le seul côté
 * qui nous intéresse — un `overflow-clip-margin` sur les quatre côtés laisserait la
 * ligne paraître sous le masque avant d'y entrer. */
html.mdl-anim .mdl-ligne-masque-mask {
  overflow-clip-margin-bottom: 0.14em;
}

/* Repli pour les navigateurs sans les longhands (Safari < 17.4) : la version courte
   n'est comprise qu'à quatre côtés, mais elle vaut mieux qu'un jambage rogné, et
   l'artefact du haut est invisible — le masque précédent le recouvre. */
@supports not (overflow-clip-margin-bottom: 1px) {
  html.mdl-anim .mdl-ligne-masque-mask {
    overflow-clip-margin: 0.14em;
  }
}

/* ─── 5. le respect du réglage système ───────────────────────────────────────────────
 * Deux filets, et ils sont volontairement redondants. Le script en ligne ne pose déjà
 * pas `mdl-anim` quand le visiteur demande moins d'animation ; si le réglage change en
 * cours de visite, gsap.matchMedia() défait les animations. Cette règle-ci est le
 * dernier mot : quoi qu'il arrive, rien ne reste caché ni décalé. */
@media (prefers-reduced-motion: reduce) {
  html.mdl-anim .mdl-hero h1,
  html.mdl-anim .mdl-hero .mdl-side,
  html.mdl-anim .mdl-frame,
  html.mdl-anim .mdl-banniere .mdl-kick,
  html.mdl-anim .mdl-banniere h1,
  html.mdl-anim .mdl-banniere .mdl-lead,
  html.mdl-anim .mdl-banniere .mdl-ctas,
  html.mdl-anim .mdl-banniere .mdl-shot {
    opacity: 1;
  }

  html.mdl-anim .mdl-etapes li,
  html.mdl-anim .mdl-inclus .mdl-cell {
    border-top-color: var(--mdl-rule);
  }

  html.mdl-anim .mdl-etapes li {
    border-top-color: var(--mdl-blue);
  }

  html.mdl-anim .mdl-etapes li::after,
  html.mdl-anim .mdl-inclus .mdl-cell::after {
    display: none;
  }

  html.mdl-anim .mdl-par > img,
  html.mdl-anim .mdl-par > video {
    will-change: auto;
    transform: none !important;
  }
}