/*
 * LBYLCL Footer — chrome et système de tokens.
 *
 * POURQUOI CE FICHIER REDÉCLARE LE BLOC DE TOKENS, alors que claude.md § 3
 * l'interdit aux enfants du Nav : le Footer n'est PAS un enfant du Nav. C'est
 * une seconde racine, posée ailleurs sur la page, dans son propre shadow root.
 * Il n'hérite donc de rien — un `--lcl-*` déclaré sur le `:host` du Nav ne
 * traverse que vers le contenu SLOTTÉ du Nav, pas vers un composant frère.
 * Sans ce bloc, tous les `var()` du pied de page seraient non résolus, et un
 * `var()` non résolu ne « retombe pas sur du blanc » : il invalide la
 * déclaration au calcul, sans un mot.
 *
 * La règle de fond reste tenue : les valeurs ci-dessous sont RECOPIÉES depuis
 * components/Nav/Nav.module.css, verbatim. Nav.module.css reste la source de
 * vérité ; toute divergence de hex ou de nom de police entre les deux fichiers
 * est un bug, pas une intention. Une seule valeur ne vient pas du Nav :
 * `--lcl-yellow-200`, qui figure dans la palette de claude.md § 3 bis mais que
 * le Nav n'utilise pas — elle est reprise de la palette, pas inventée.
 *
 * Les enfants — « Footer — Colonne » et les « Nav — Lien » réutilisés dedans —
 * relisent ces tokens avec un fallback : ils héritent d'ici via l'arbre
 * aplati, les custom properties étant le seul canal de style qui traverse la
 * frontière shadow vers du contenu slotté.
 *
 * ATTENTION : « Cstm Neighbor » n'existe qu'en 400, 700 et 900. Pas de 500 ni
 * de 600 — toute valeur intermédiaire sera arrondie par le navigateur.
 */
:host {
  /* — Palette de marque, verbatim du site — */
  --lcl-eggplant-900: #2a2240;
  --lcl-eggplant-800: #372d54;
  --lcl-eggplant-600: #4f4177;
  --lcl-eggplant-400: #7c5ed1;
  --lcl-yellow-400: #e0fa00;
  --lcl-yellow-300: #f1ff77;
  --lcl-yellow-200: #f7ffaf;
  --lcl-whiteegg-100: #f3f2ef;
  --lcl-whiteegg-200: #e8e7e2;
  --lcl-bluefrost-100: #e7fbff;
  --lcl-bluefrost-200: #ccf6ff;
  --lcl-brand-light: #e1f9fe;
  --lcl-bluefrost-400: #5fe0fc;
  --lcl-white: #fff;

  /* — Typographie — */
  --lcl-font-display: "Cstm Neighbor", Impact, sans-serif;
  --lcl-font-body: Inter, sans-serif;
  /* Cstm Neighbor : 400 | 700 | 900 uniquement. Aucun 500/600. */
  --lcl-entry-weight: 700;

  /* — Encre — */
  --lcl-ink: var(--lcl-eggplant-900);
  --lcl-ink-soft: color-mix(in srgb, var(--lcl-eggplant-900) 62%, transparent);
  --lcl-hairline: color-mix(in srgb, var(--lcl-eggplant-900) 12%, transparent);

  /* — Géométrie — */
  /* Même largeur utile et même gouttière que le Nav : le logo du pied de page
     doit tomber dans le même couloir que celui de la barre. La géométrie de
     barre et de panneau du Nav n'est pas reprise, elle n'a pas de sens ici. */
  --lcl-max: 1240px;
  --lcl-gutter: 16px;
  --lcl-pad: 24px;

  /* — Mouvement : un seul easing dans tout le système — */
  --lcl-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lcl-dur: 420ms;
  --lcl-dur-fast: 170ms;

  display: block;
  font-family: var(--lcl-font-display);
  color: var(--lcl-ink);
}

/*
 * Tokens propres au pied de page — déclarés sur `.root`, pas sur `:host`, et
 * c'est délibéré : `:host` ne correspond à rien dans le harnais Vite (il n'y a
 * pas de shadow root), donc tout ce qui y est déclaré y est inerte. En les
 * posant sur `.root` avec un repli littéral dans chaque `var()`, la géométrie
 * du pied de page est représentative dans le harnais comme dans Webflow, et
 * elle descend malgré tout dans les colonnes slottées — l'héritage suit l'arbre
 * APLATI, et le `<slot>` est à l'intérieur de `.root`.
 */
.tbNg83qx0tW7SCbwo9Mt {
  /*
   * Blanc à 70 % SUR la couleur du pied de page, et non un jaune pâle figé.
   * La valeur a été relevée sur la maquette (#f3fdb2 sur #e0fa00) puis
   * retraduite en translucide, pour que la même déclaration donne le bon
   * rose-bleu pâle sur le fond bleu de la variante Pro. Ne pas la remplacer par
   * un hex : ça figerait la pilule sur la variante standard.
   */
  --lcl-footer-legal-bg: color-mix(in srgb, var(--lcl-white, #fff) 70%, transparent);
  --lcl-footer-legal-radius: 999px;
  --lcl-footer-legal-min-h: 64px;
  --lcl-footer-logo-h: 88px;
  --lcl-footer-col-gap-x: 40px;
  --lcl-footer-col-gap-y: 40px;

  display: block;
  box-sizing: border-box;
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  color: var(--lcl-ink, #2a2240);
}

/* ───────────────── Couleur du corps, par variante de marque ───────────────── */
/*
 * Le seul écart entre les deux variantes du pied de page. L'encre est
 * identique : aucune des deux ne passe le texte en blanc.
 */
.tbNg83qx0tW7SCbwo9Mt[data-variant="standard"] {
  --lcl-footer-bg: var(--lcl-yellow-400, #e0fa00);
}
/*
 * Variante Pro : fond `#2a2240`, l'eggplant-900 de la palette de marque — pas
 * le bluefrost `#5fe0fc` du dégradé des menus, ni un autre bleu foncé. C'est la
 * même couleur que l'encre de la variante standard et que la tuile du logo.
 *
 * Conséquence obligatoire, pas un ajout : sur un fond foncé l'encre doit
 * passer au clair. On redéfinit donc `--lcl-ink` et `--lcl-ink-soft`
 * EUX-MÊMES, et pas des tokens propres au footer — c'est ce qui fait que les
 * composants slottés (titres de colonne, libellés de lien) suivent, puisqu'ils
 * lisent ces deux tokens par héritage et qu'on ne peut pas les atteindre
 * autrement.
 *
 * Le bandeau légal passe d'un blanc à 70 % à un blanc à 14 % : à 70 % sur du
 * bleu foncé il devient une plaque claire, et les liens en encre blanche
 * dessus seraient illisibles.
 */
.tbNg83qx0tW7SCbwo9Mt[data-variant="pro"] {
  --lcl-footer-bg: var(--lcl-eggplant-900, #2a2240);
  --lcl-ink: var(--lcl-white, #fff);
  --lcl-ink-soft: color-mix(in srgb, var(--lcl-white, #fff) 76%, transparent);
  --lcl-footer-legal-bg: color-mix(in srgb, var(--lcl-white, #fff) 14%, transparent);
}

/*
 * Bloc de tête des renvois de mentions.
 *
 * Aucun fond : il fait partie du corps coloré, pas d'un bandeau séparé. La
 * maquette montre ces renvois sur une bande blanche au-dessus du footer — c'est
 * précisément ce dont le brief demande de s'écarter.
 *
 * Encre pleine et non `--lcl-ink-soft` : sur un aplat de marque (jaune #e0fa00
 * ou aubergine #2a2240) une encre translucide devient boueuse et perd son
 * contraste. Ce sont des mentions légales en petit corps, la lisibilité passe
 * devant la hiérarchie visuelle.
 */
/* ─────────────────────────── Corps coloré ─────────────────────────── */

.jvYbpkEXExu13uBkW3Mn {
  display: block;
  background: var(--lcl-footer-bg, #e0fa00);
  color: var(--lcl-ink, #2a2240);
}

.ulyfZ0rxrLIb9VNSQLbf {
  display: flex;
  flex-direction: column;
  max-width: var(--lcl-max, 1240px);
  margin: 0 auto;
  padding: 56px var(--lcl-pad, 24px) 30px;
  box-sizing: border-box;
}

/* Logo centré. `align-self` et non `margin: auto` : `.inner` est une colonne
   flex, donc c'est l'axe transversal qui centre. */
.lYL5LKOXObJezC6gDQ3J {
  align-self: center;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-bottom: 52px;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
}
.lYL5LKOXObJezC6gDQ3J:focus-visible {
  outline: 2px solid var(--lcl-ink, #2a2240);
  outline-offset: 3px;
}

.e5LxYswHhdQKdJOKAuQg {
  display: block;
  height: var(--lcl-footer-logo-h, 88px);
  width: auto;
}

/*
 * Grille des colonnes. Le compte desktop vient de `--lcl-footer-cols`, posé en
 * style inline par le composant ; les paliers plus bas le réécrivent en dur.
 *
 * Les deux règles sur le slot neutralisent le wrapper que Webflow interpose
 * autour du contenu slotté : sans elles la grille n'a qu'un item et les
 * colonnes s'empilent dedans. `!important` est requis — le wrapper est dans
 * l'arbre du document, dont les règles battent celles d'un arbre interne, sauf
 * pour les déclarations `!important` où l'ordre s'inverse.
 */
.IqxWxWwEo4TwNsTLMXnQ {
  display: grid;
  grid-template-columns: repeat(var(--lcl-footer-cols, 5), minmax(0, 1fr));
  align-items: start;
  gap: var(--lcl-footer-col-gap-y, 40px) var(--lcl-footer-col-gap-x, 40px);
  margin-bottom: 56px;
}
.IqxWxWwEo4TwNsTLMXnQ > slot {
  display: contents;
}
.IqxWxWwEo4TwNsTLMXnQ > slot::slotted(*) {
  display: contents !important;
}

.d4Xirgl8ZON3trfaSaZm {
  display: block;
  margin-bottom: 22px;
}

/*
 * Rangée de liens légaux, horizontale et centrée.
 *
 * Le correctif a DEUX moitiés qui ne fonctionnent qu'ensemble — retirer l'une
 * casse l'autre, et ça a coûté plusieurs tours :
 *
 *  1. `display: contents !important` sur le nœud slotté, juste en dessous. Le
 *     wrapper que Webflow interpose est un conteneur flex EN COLONNE : tant
 *     qu'il génère une boîte, ses enfants sont empilés quoi que déclare leur
 *     propre `display`. Il faut le faire disparaître de l'arbre de boîtes.
 *  2. `width: auto` sur la règle `.link` de base du composant lien — sinon,
 *     une fois le wrapper neutralisé, chaque lien réclame 100 % de la rangée et
 *     on retombe sur un lien par ligne.
 *
 * `text-align: center` et le `gap` sont des ceintures de sécurité, pour le cas
 * où Webflow enverrait un wrapper par enfant plutôt qu'un wrapper unique.
 */
.gsP9q36W9PtT9tB9SigA {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 14px;
  text-align: center;
  line-height: 2;
  min-height: var(--lcl-footer-legal-min-h, 64px);
  padding: 16px 24px;
  box-sizing: border-box;
  border-radius: var(--lcl-footer-legal-radius, 999px);
  background: var(--lcl-footer-legal-bg, color-mix(in srgb, #fff 70%, transparent));
}
.gsP9q36W9PtT9tB9SigA > slot {
  display: contents;
}
.gsP9q36W9PtT9tB9SigA > slot::slotted(*) {
  display: contents !important;
}

/*
 * ═══════════ TEXTES RICHES : DEUX CANAUX, ET DEUX SEULEMENT ═══════════
 *
 * Fait établi sur le HTML rendu, pas déduit : le contenu d'un `props.RichText`
 * arrive comme du LIGHT DOM ASSIGNÉ À UN SLOT, pas comme du contenu rendu dans
 * notre shadow root :
 *
 *   <div class=notes>
 *     <slot name="notes">
 *       ↳ <div class="w-richtext" slot="notes">
 *           <p>…</p><p>…</p><p>…</p>
 *   </div>
 *
 * Conséquence, et c'est la correction d'une erreur qui a coûté plusieurs
 * tours : un sélecteur `.notes p` ne matche RIEN. Les paragraphes ne sont pas
 * nos descendants dans l'arbre DOM. Un RichText se style donc exactement comme
 * un slot, et pas du tout comme du contenu à nous.
 *
 * Il ne reste que deux canaux :
 *
 *  1. LES PROPRIÉTÉS HÉRITÉES, posées sur `.notes`. C'est ce qui atteint les
 *     paragraphes — d'autant mieux que le CSS du site leur met justement
 *     `font-size: inherit; line-height: inherit`, donc notre valeur descend.
 *     Aucun `!important` nécessaire : `.notes` est dans notre shadow root, le
 *     CSS de la page ne peut pas l'atteindre.
 *
 *  2. `::slotted()`, qui ne touche QUE le nœud de premier niveau assigné — ici
 *     le `div.w-richtext`. Ses enfants, eux, sont hors de portée définitivement.
 *
 * L'espacement des paragraphes passe donc par une GRILLE sur ce div : ses `<p>`
 * sont ses vrais enfants, et un `row-gap` n'est pas une propriété de boîte —
 * ni les `margin: 0` du site, ni les marges NÉGATIVES de son « Line Height
 * Trim » ne peuvent l'aspirer. C'est le seul mécanisme hors de leur portée.
 */
.hQKFHpMqVisCxVpwRdq8 {
  --lcl-footer-notes-size: 13.5px;
  --lcl-footer-notes-lh: 20px;
  --lcl-footer-notes-gap: 12px;
  margin-bottom: 34px;
  /* Canal 1 : hérité. */
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-size: var(--lcl-footer-notes-size, 13.5px);
  line-height: var(--lcl-footer-notes-lh, 20px);
  text-align: left;
  color: var(--lcl-ink, #2a2240);
}

/* Canal 2 : le div.w-richtext devient une grille qui espace ses paragraphes. */
.hQKFHpMqVisCxVpwRdq8 > slot::slotted(*) {
  display: grid !important;
  row-gap: var(--lcl-footer-notes-gap, 12px) !important;
  margin: 0 !important;
}

.xS5k4JkP41T1_woeZaNW {
  --lcl-footer-mention-size: 13px;
  --lcl-footer-mention-lh: 21px;
  --lcl-footer-mention-gap: 8px;
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-size: var(--lcl-footer-mention-size, 13px);
  line-height: var(--lcl-footer-mention-lh, 21px);
  text-align: center;
  color: var(--lcl-ink-soft, rgba(42, 34, 64, 0.62));
}

.xS5k4JkP41T1_woeZaNW > slot::slotted(*) {
  display: grid !important;
  row-gap: var(--lcl-footer-mention-gap, 8px) !important;
  margin: 0 !important;
}

/* ─────────────────────────────── Responsive ─────────────────────────────── */
/*
 * ═══ POURQUOI LES PALIERS 3 / 2 / 1 SONT EN DUR, ET PAS DÉRIVÉS DE LA PROP ═══
 *
 * C'est une LIMITATION ASSUMÉE, pas un oubli : la prop « Colonnes (desktop) »
 * ne gouverne que le compte de desktop, la règle de base juste au-dessus. Les
 * paliers ci-dessous réécrivent `grid-template-columns` avec des entiers
 * littéraux et ignorent donc `--lcl-footer-cols`.
 *
 * La raison est dans `repeat()` : son premier argument doit être un ENTIER, et
 * il n'existe pas de moyen fiable d'en calculer un en CSS. Il faudrait borner le
 * token par palier — quelque chose comme `min(3, var(--lcl-footer-cols))` — or
 * `min()` / `calc()` produisent une valeur de type <number> dont le support
 * comme compte de répétition n'est pas acquis, et `round(down, …)` ne l'est pas
 * davantage. Une seule implémentation défaillante et `repeat()` devient
 * invalide au calcul : la grille retombe sur une colonne unique, sans erreur et
 * sans trace. On préfère trois entiers écrits en clair.
 *
 * Conséquence pratique à connaître : un pied de page réglé à 3 colonnes de
 * desktop n'en aura pas 2 mais bien 3 jusqu'à 1024px, puis 3 encore (le palier
 * demande la même chose), puis 2, puis 1. Réglé à 2, il gardera 2 colonnes
 * jusqu'à 840px — le palier de 1024px le ferait REMONTER à 3, ce qui serait
 * absurde, et c'est exactement pourquoi les paliers sont des maxima de fait :
 * ils ne descendent jamais en dessous de ce que la largeur impose, mais ils
 * peuvent contredire une valeur plus basse choisie sur desktop. Si ce cas
 * devient réel, la réponse est un palier par valeur de prop
 * (`.root[data-cols="2"] .columns`), pas de l'arithmétique dans `repeat()`.
 */
/* Gouttière resserrée quand cinq colonnes commencent à être à l'étroit. */
@media (max-width: 1279px) {
  .IqxWxWwEo4TwNsTLMXnQ {
    --lcl-footer-col-gap-x: 28px;
  }
}

/*
 * Les 5 colonnes tiennent jusqu'à 1024px : 5 × ~163px avec les gouttières, ce
 * qui laisse passer un titre comme « Service L by LCL » sur deux lignes. Le
 * palier était à 1200px, ce qui faisait retomber à 3 colonnes beaucoup trop
 * tôt — c'est ce qui donnait l'impression que le footer n'en gérait pas 5.
 */
@media (max-width: 1023px) {
  .IqxWxWwEo4TwNsTLMXnQ {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 839px) {
  .IqxWxWwEo4TwNsTLMXnQ {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 44px;
  }
  .ulyfZ0rxrLIb9VNSQLbf {
    padding: 44px var(--lcl-pad, 24px) 26px;
  }
  .lYL5LKOXObJezC6gDQ3J {
    margin-bottom: 40px;
  }
  .tbNg83qx0tW7SCbwo9Mt {
    --lcl-footer-logo-h: 76px;
  }
}

@media (max-width: 599px) {
  .IqxWxWwEo4TwNsTLMXnQ {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .ulyfZ0rxrLIb9VNSQLbf {
    padding: 36px var(--lcl-gutter, 16px) 24px;
  }
  .tbNg83qx0tW7SCbwo9Mt {
    --lcl-footer-logo-h: 64px;
    /*
     * La pilule fait ici trois ou quatre lignes de haut : à cette hauteur, un
     * rayon de 999px la transforme en losange. On garde donc un rayon large
     * mais fini — c'est le même token, surchargé, pas une seconde valeur en
     * dur ailleurs dans le fichier.
     */
    --lcl-footer-legal-radius: 28px;
  }
  .gsP9q36W9PtT9tB9SigA {
    padding: 14px 18px;
  }
}