/* === Imports d’abord (ordre important) === */
html {
  scroll-behavior: smooth;
}
/* Mini-ligne top droite : FR | EN serrés + LinkedIn */
.lang-switch { line-height:1; }
.lang-link{
  display:inline-flex; align-items:center;
  text-decoration:none;
  color:#9ca3af;           /* inactif */
  font-weight:500;
}
.lang-link:hover{ color:#6b7280; }
/* hover */
.lang-link.is-active{ color:#3f3f46; font-weight:600; }
/* actif = gris foncé */
.lang-sep{ margin:0 .35rem; color:#d1d5db; }
/* pipe plus serré */
/* LinkedIn simple, un poil plus grand et aligné au texte */
.li-btn{ display:inline-flex; align-items:center; justify-content:center; color:#6b7280; transition:color .15s; }
.li-btn:hover{ color:#111827; }
.li-ico{ width:18px; height:18px; }
/* Sécurité logo utilitaires */
.custom-logo,.site-logo{ height:7rem; width:auto; -o-object-fit:contain; object-fit:contain; }
/* Icônes compactes top droite (LinkedIn + Mail) */
.ico-btn{
  display:inline-flex; align-items:center; justify-content:center;
  color:#6b7280;            /* zinc-500 */
  transition:color .15s ease;
}
.ico-btn:hover{ color:#111827; }
/* zinc-900 */
.ico-ico{ width:18px; height:18px; }
/* un poil plus grand, aligné baseline */
/* Override mobile : même sélecteur, dans un media query */
@media (max-width: 1023.98px) {
  .custom-logo,
  .site-logo {
    height: 5.8rem;
  }
}
/* Overlay décoratif pour les sections "grid" & "video grid" */
.video-grid--full {
  position: relative;
  isolation: isolate; /* évite que le blend "bave" à l’extérieur */
}
.video-grid--full::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--overlay-image);
  background-repeat: no-repeat;
  background-size: cover;        /* ou "contain" selon le motif */
  background-position: center;
  opacity: var(--overlay-opacity, .12);
  mix-blend-mode: var(--overlay-blend, multiply);
  z-index: 0;
}
/* Le contenu doit passer au-dessus de l’overlay */
.video-grid--full > .max-w-7xl { position: relative; z-index: 1; }
/* buttons.css
   - Composants CTA (liens et boutons)
   - Déplacement de .cta_link ici
*/
/* Effet de "lift" très léger au hover */
.cta_btn--lift-subtle {
    transform: translateY(0);
  }
.cta_btn--lift-subtle:hover,
  .cta_btn--lift-subtle:focus-visible {
    transform: translateY(-1px);
  }
/* typography.css
   - Styles typographiques globaux
   - Rétablit les listes (ul/ol) dans .entry-content malgré le reset global
   - Gère aussi les titres .wp-block-heading
*/
/* =============== MegaMenu — Styles consolidés (HUG-like) =============== */
/* --- Barre de navigation (effet HUG) --- */
.mega-nav { display:flex; gap:2.5rem; }
.mega-nav .js-mega-trigger { position:relative; text-decoration:none; transition:opacity .15s ease; }
.mega-nav:hover .js-mega-trigger { opacity:.4; }
.mega-nav:hover .js-mega-trigger:hover { opacity:1; }
/* Barre de 5px en bas au hover & quand le panneau est ouvert (is-active posé par JS) */
.mega-nav .js-mega-trigger::after {
  content:""; position:absolute; left:0; right:0; height:5px; bottom:-45px;
  background:#002F3C; transform:scaleX(0); transform-origin:left center; transition:transform .15s ease;
}
.mega-nav .js-mega-trigger:hover::after,
.mega-nav .js-mega-trigger.is-active::after { transform:scaleX(1); }
/* --- Colonne 2 : liens uppercase + flèche → si enfants --- */
.mega-col2 { 
  background:#fff; 
  transition: background-color .15s ease; 
}
/* Colonne 2 grise UNIQUEMENT si un lien est hover/focus */
.mega-col2:has(.c2-link:hover),
.mega-col2:has(.c2-link:focus) { 
  background:#f7f7f7; 
}
.mega-col2 ul { margin:0; padding:0; list-style:none; }
.mega-col2 li { margin:0; }
.mega-col2 .c2-link {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  text-transform:uppercase; text-decoration:none;
  color:#111;
  /* items transparents pour laisser voir le fond de la colonne */
  background: transparent;
  padding:14px 18px;                       /* hauteur généreuse, pas de margin entre items */
  border-left:5px solid transparent;
  border-radius:0;
}
.mega-col2 .c2-label { line-height:1.2; letter-spacing:.02em; }
/* Flèche à droite si enfants (URL injectée via --mega-arrow-url) */
.mega-col2 .c2-arrow {
  width:14px; height:14px; flex:0 0 14px; opacity:0;
  background-image:var(--mega-arrow-url);
  background-repeat:no-repeat; background-position:center; background-size:14px 14px;
}
.mega-col2 .c2-link[data-has-children="1"] .c2-arrow { opacity:1; }
/* Etat survolé/actif : l’item reste blanc (flotte au-dessus du gris) */
.mega-col2 .c2-link.is-active,
.mega-col2 .c2-link:hover,
.mega-col2 .c2-link:focus { 
  background:#fff; 
  color:#111; 
  border-left-color:#002F3C;               /* barre gauche quand actif */
  font-weight:600;
}
/* Dimming de texte pour les non-actifs (laisse le fond transparent) */
.mega-col2.is-dimming .c2-link:not(.is-active):not(:hover):not(:focus) {
  color:#939393;
}
/* --- Colonne 3 : liste simple avec séparateurs --- */
.mega-col3 .c3-list { list-style:none; margin:0; padding:0; }
.mega-col3 .c3-list li { margin:0; }
.mega-col3 .c3-link {
  display:block; padding:14px 18px;
  color:#111; text-decoration:none; text-transform:uppercase;
  border-bottom:1px solid #f7f7f7;
}
.mega-col3 .c3-link:hover { background:#fafafa; }
/* --- Trigger racine actif --- */
.js-mega-trigger.is-active { color:#002F3C; }
/* (Optionnel) léger padding colonne 2 pour un liseré gris en haut/bas quand hover */
.mega-col2 { padding:4px 0; }
/* ====================================================================== */
/* HERO – bloc principal + panneau "glass" à gauche (blur + biseau)       */
/* Fichier : assets/css/components/hero.css                                */
/* ====================================================================== */
/* ====================================================================== */
/* FIN – HERO                                                              */
/* ====================================================================== */
/* ==========================================================================
   Hitech – Brand Slider (fond plein écran + panneau fixe, rail full-width)
   ========================================================================== */
/* 1) Débloquer la section des contraintes WP */
.entry-content > .brand-slider.alignfull {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* 2) Section + fond */
.brand-slider {
  --bs-bg: #2c7a7b;     /* couleur de fond par défaut */
  --bs-left: 420px;     /* largeur panneau fixe (colonne gauche desktop) */
  --bs-speed: 60;       /* px/s – vitesse du défilement */
  --bs-logo-h: 56px;    /* hauteur des logos (desktop) */
  --content-max: var(--wp--style--global--content-size, 1200px);

  position: relative;
  padding: 48px 0;
  overflow: hidden;
}
.brand-slider__bg {
  position: absolute;
  inset: 0;
  background: var(--bs-bg);
  z-index: 0;
}
/* 3) Panneau (dans le container) */
.brand-slider .container {
  position: relative;
  /* IMPORTANT : plus de z-index ici pour ne pas bloquer les clics sur le rail */
}
.brand-slider__wrap {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
}
.brand-slider__left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);   /* panneau centré verticalement desktop */
  width: var(--bs-left);
  padding: 24px 24px 24px 0;
  color: var(--bs-text, #fff);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;                    /* au-dessus du rail */
  pointer-events: none;          /* laisse passer les clics sur les logos (desktop) */
}
.brand-slider__left--right {
  text-align: right;
  align-items: flex-end;
  padding-right: 24px;
}
.brand-slider__title {
  margin: 0;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.brand-slider__desc {
  margin: 0;
  opacity: .9;
  max-width: calc(var(--bs-left) - 40px);
}
.brand-slider__divider {
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 1px;
  background: currentColor;
  opacity: .55;
}
/* 4) Viewport FULL-WIDTH centré verticalement (hors container) */
.brand-slider__viewport {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  overflow: hidden;

  display: flex;
  align-items: center;

  /* Gouttières du container + espace panneau gauche */
  padding-left: calc( max( (100vw - var(--content-max))/2, 0px ) + var(--bs-left) + 24px );
  padding-right: calc( max( (100vw - var(--content-max))/2, 0px ) + 24px );

  /* hauteur du viewport = logos + air */
  height: calc(var(--bs-logo-h) + 24px);
  min-height: calc(var(--bs-logo-h) + 24px);
}
/* 5) Rail + slides */
.brand-slider__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 64px;
  will-change: transform;

  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.brand-slider__slide {
  flex: 0 0 auto;
}
.brand-slider__slide a,
.brand-slider__slide span {
  display: inline-flex;
  align-items: center;
}
.brand-slider__slide img {
  height: var(--bs-logo-h);
  width: auto;
  display: block;
  opacity: .95;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
  max-width: none;
}
/* 6) Tonalités */
.brand-slider__viewport[data-tone="black"] .brand-slider__slide img {
  filter: grayscale(1) brightness(0);
}
.brand-slider__viewport[data-tone="white"] .brand-slider__slide img {
  filter: brightness(0) invert(1);
}
/* Hover + fade */
.brand-slider__slide:hover img {
  transform: scale(1.06);
  opacity: 1;
}
.brand-slider__fade-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--bs-bg) 100%);
  mix-blend-mode: multiply;
}
/* Masque gauche : cache le rail sous la zone panneau */
.brand-slider__mask {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: calc(var(--bs-logo-h) + 24px);
  width: calc( max( (100vw - var(--content-max))/2, 0px ) + var(--bs-left) + 24px );
  background: var(--bs-bg);
  z-index: 2;               /* > rail (1), < panneau (3) */
  pointer-events: none;
}
/* 7) Modificateurs pratiques */
.brand-slider.logos-lg { --bs-logo-h: 52px; }
.brand-slider.logos-xl { --bs-logo-h: 60px; }
.brand-slider.slow     { --bs-speed: 40; }
.brand-slider.slower   { --bs-speed: 30; }
/* 8) Responsive */
/* Tablette + mobile : texte au-dessus, slider en dessous, pas de séparateur */
@media (max-width: 1024px) {
  .brand-slider {
    padding: 40px 0;
    --bs-logo-h: 36px;
  }

  .brand-slider__wrap {
    min-height: 0;
    display: block;
  }

  .brand-slider__left {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    padding: 0 16px 16px 16px;
    text-align: left;
    align-items: flex-start;
    pointer-events: auto; /* le texte redevient interactif si besoin */
  }

  .brand-slider__left--right {
    text-align: left;
    align-items: flex-start;
    padding-right: 16px;
  }

  .brand-slider__divider {
    display: none; /* plus de séparateur sur tablette + mobile */
  }

  .brand-slider__mask {
    display: none; /* plus de masque gauche */
  }

  .brand-slider__viewport {
    position: relative;
    top: auto;
    transform: none;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 8px;
    height: calc(var(--bs-logo-h) + 20px);
    min-height: calc(var(--bs-logo-h) + 20px);
  }

  .brand-slider__fade-right {
    width: 48px;
  }
}
@media (max-width: 720px) {
  .brand-slider {
    padding: 32px 0;
  }

  .brand-slider__left {
    padding: 0 16px 12px 16px;
  }

  .brand-slider__viewport {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* 9) Accessibilité motion */
@media (prefers-reduced-motion: reduce) {
  .brand-slider__slide img {
    transition: none;
  }
}
.text-brand-teal {
    color: #0080A2;
  }
/* === Ratios simples, avec support de ratio dynamique === */
.ratio-box {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem; /* ~ rounded-xl */
}
/* Défaut ou ratio calculé inline (via style="--ratio: xx.xx%;") */
.ratio-box::before {
  content: "";
  display: block;
  padding-top: var(--ratio, 56.25%);
}
/* Ratios fixes (fallbacks) */
.ratio-16-9::before { padding-top: 56.25%; }
/* 9/16 */
.ratio-4-3::before  { padding-top: 75%; }
.ratio-3-2::before  { padding-top: 66.6667%; }
.ratio-1-1::before  { padding-top: 100%; }
/* Médias à l’intérieur */
.ratio-box > img,
.ratio-box > video,
.ratio-box > iframe,
.ratio-box > .js-inline-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
/* === Overlay SVG au-dessus du fond, mais sous le contenu === */
.cms-grid--full { position: relative; }
/* Le SVG décor s'applique ici : il est AU-DESSUS du background,
   mais SOUS le contenu grâce au z-index. */
.cms-grid--full::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Variables contrôlables depuis le HTML/Twig */
  background-image: var(--overlay-image, none);
  background-position: var(--overlay-position, center center);
  background-size: var(--overlay-size, cover);
  background-repeat: var(--overlay-repeat, no-repeat);
  opacity: var(--overlay-opacity, .10);
  mix-blend-mode: var(--overlay-blend, soft-light);
}
/* S'assurer que le contenu passe au-dessus de l'overlay */
.cms-grid--full > * { position: relative; z-index: 1; }
/* ==========================================================================
   Companion (desktop only — rendu quand !wp_is_mobile)
   Style inspiré du compagnon des HUG :
   - Rail fixe à droite (carrés teal)
   - Icônes blanches fixes
   - Panneau blanc qui se déplie vers la gauche au survol
   ========================================================================== */
.companion {
  --c-rail:   #0080A2;     /* couleur du rail / fond des icônes */
  --c-panel:  #ffffff;     /* fond du panneau */
  --c-border: #E5E7EB;     /* séparateurs */
  --c-text:   #111827;     /* texte labels */
  --tile:     56px;        /* taille carrés icônes */
  --open:     300px;       /* largeur panneau ouvert */
  --icon:     24px;        /* taille icônes */

  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 50;
  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--c-text);
}
/* pas de toggle en desktop */
.companion__toggle {
  display: none;
}
/* Le panneau entier (fermé = rail visible uniquement) */
.companion__panel {
  display: flex;
  flex-direction: column;
  width: var(--tile);
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-right: none;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
  transition: width 0.25s ease;
}
/* Chaque ligne = carré teal + label caché */
.companion__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* icône alignée à droite */
  height: var(--tile);
  color: var(--c-text);
  text-decoration: none;
  background: var(--c-panel);
  border-top: 1px solid var(--c-border);
  font-size: 20px;
}
.companion__item:first-child {
  border-top: 0;
}
/* Icône fixe dans le carré teal */
.companion__icon {
  flex: 0 0 var(--tile);
  height: var(--tile);
  background: var(--c-rail);
  display: grid;
  place-items: center;
}
.companion__icon iconify-icon {
  /*
  width: var(--icon);
  height: var(--icon);
  */
  color: #fff;
}
/* Label caché à gauche de l’icône */
.companion__label {
  position: absolute;
  right: var(--tile);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  width: calc(var(--open) - var(--tile));
  background: var(--c-panel);
  opacity: 0;
  transform: translateX(20px);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-size: 14px;
}
/* --- Ouverture au hover --- */
.companion:hover .companion__panel,
.companion:focus-within .companion__panel {
  width: var(--open);
}
.companion:hover .companion__label,
.companion:focus-within .companion__label {
  opacity: 1;
  transform: translateX(0);
}
/* --- Hover states --- */
@media (hover: hover) {
  .companion__item:hover .companion__icon {
    filter: brightness(0.9);
  }
  .companion__item:hover .companion__label {
    background: #f9fafb;
  }
}
/* Focus clavier visible */
.companion__item:focus-visible .companion__icon,
.companion__item:focus-visible .companion__label {
  outline: 2px solid #93C5FD;
  outline-offset: -2px;
}
/* Réduction animations */
@media (prefers-reduced-motion: reduce) {
  .companion__panel,
  .companion__label {
    transition: none;
  }
}
/* ==========================================================================
   Companion Mobile (footer bottom bar)
   Fond teal #0080A2 + icônes blanches, centrées
   ========================================================================== */
.companion-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  /* barre principale */
  min-height: 56px;
  padding: 8px 16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));

  background: #0080A2;
  z-index: 9999;

  display: flex;
  justify-content: center;   /* icônes regroupées au centre */
  align-items: center;
  gap: 20px;                 /* espace entre les icônes */

  /* Animation d'apparition */
  transform: translateY(100%);
  opacity: 0;
  animation: companion-slide-up .35s ease-out forwards;
}
@keyframes companion-slide-up {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.companion-mobile__item {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 9999px;

  border: 0;
  background: rgba(255, 255, 255, 0.05); /* léger halo */
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.12s ease;
}
.companion-mobile__item iconify-icon {
  font-size: 22px;
  color: #ffffff; /* icônes blanches */
}
/* tap / active */
.companion-mobile__item:active {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(0.95);
}
/* Optionnel si tu utilises la classe is-tapping depuis le JS */
.companion-mobile__item.is-tapping {
  background: rgba(255, 255, 255, 0.22);
}
/* =========================
   FOOTER – mise en page
   ========================= */
/* Ligne 1 : grille logo 290px + labels (reste) */
.footer-top {
  display: grid;
  grid-template-columns: 290px 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 60px;
}
/* Séparateur gris léger après la ligne 1 */
.footer-sep {
  border-top: 1px solid rgba(0,0,0,.08);
  margin: 20px 0;
  padding-top: 20px;
}
/* Ligne 2 : grille 290px + 1fr */
.footer-main {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 40px;
}
/* Responsive : stack sous 1024px (adapte si besoin) */
@media (max-width: 1024px) {
  .footer-top,
  .footer-main {
    grid-template-columns: 1fr;
  }
  .footer-top { row-gap: 16px; }
}
/* =========================
   FOOTER – labels (ligne 1)
   ========================= */
.footer-top__right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}
.labels {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.labels > li { line-height: 0; }
/* Images de labels (hauteur contrôlée, pas de déformation) */
.footer-label-img {
  height: 80px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: inline-block;
}
/* =========================
   FOOTER – icônes sous le logo
   ========================= */
.quick-icons {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.quick-icons a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  opacity: .8;
}
.quick-icons a:hover {
  opacity: 1;
}
/* =========================
   FOOTER – adresses (colonne gauche)
   ========================= */
.footer-col.addresses {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* pas centré verticalement */
  gap: 24px;
  opacity: .8;
}
.footer-col.addresses .office h4 {
  margin: 0 0 .5rem;
  font-weight: 600;
}
.footer-col.addresses .address { /* conteneur wysiwyg */
  margin: 0 0 .35rem;
}
.footer-col.addresses .phone a,
.footer-col.addresses .btn-link,
.footer-col.addresses .route a {
  text-decoration: none;
  line-height: 1;
}
/* Icône itinéraire : petit align visuel */
.footer-col.addresses .route iconify-icon {
  vertical-align: -2px;
  margin-right: 6px;
}
/* =========================
   FOOTER – méga-liens (colonne droite)
   ========================= */
.footer-mega { /* le wrapper, la grille est gérée par Twig (grid cols) ou par CSS si besoin */
  min-width: 0;
}
/* Titres de colonne (root) */
.footer-links h5 {
  margin: 0 0 .5rem;
  font-weight: 600;
  text-transform: uppercase;  /* demandé */
  letter-spacing: .02em;
}
/* Liste de liens */
.footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
 
}
.footer-links li + li { margin-top: .35rem; }
/* Liens de premier niveau en MAJ + semibold */
.footer-links ul a {
  text-decoration: none;
  color: inherit;
  opacity: .6;
}
.footer-links ul a:hover{
  opacity: .85;
}
/* =========================
   FOOTER – barre du bas
   ========================= */
.bottom-footer {
  margin-top: 40px;
  background: #212121;
  color: #cfd3d6;
  font-size: .9rem; /* tu as déjà text-xs/md:text-sm en utilitaires, garde celui que tu préfères */
}
.bottom-footer .container {
  padding: 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bottom-footer .legal {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bottom-footer .legal a {
  color: #cfd3d6;
  text-decoration: none;
}
.wp-theme-hi-tech-light .otgs-development-site-front-end {
  display: none !important;
}
.brand-logo-wrapper {
  /* optionnel : un fond léger si tu veux */
  /* background: #f7f7f7; */
}
.brand-logo-img {
  filter: grayscale(100%);
  opacity: 0.7;
  transition:
    transform 0.25s ease,
    filter 0.25s ease,
    opacity 0.25s ease;
  transform-origin: center center;
}
a.group:hover .brand-logo-img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.06); /* petit zoom propre */
}
/* ==========================================================================
   Hitech – Solutions Hero
   - Bande d’images verticales façon Analog Way
   ========================================================================== */
/* Wrapper global */
.c-solutions-hero {
  color: #fff; /* pas de background ici, on laisse celui de la page */
}
/* Titre optionnel au-dessus de la bande */
.c-solutions-hero_header {
  max-width: 1400px;
  margin: 0 auto 32px;
  padding: 0 !important; /* on force le container sans padding latéral */
}
.c-solutions-hero_title {
  color: #000000;
}
/* CONTENEUR COLONNES */
.c-solutions-hero_col {
  max-width: 1400px;
  margin: 0 auto;

  /* Coins arrondis comme le reste du site */
  border-radius: 24px;
  overflow: hidden; /* images + overlays suivent l’arrondi */
}
.c-solutions-hero_list {
  display: flex;
  align-items: stretch;
  min-height: 600px;
}
/* ITEM */
.c-solutions-hero_item {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  color: #fff;
  transition:
    flex 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease;
}
/* IMAGE + OVERLAY */
.c-solutions-hero_background {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.c-solutions-hero_background_img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.6s ease;
}
/* Voile sombre pour la lisibilité du texte au repos
   -> bande bien noire en bas, plus légère en haut */
.c-solutions-hero_background-filter {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.85) 20%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.20) 85%,
    rgba(0, 0, 0, 0.05) 100%
  );
  opacity: 0.9;
  transition: opacity 0.4s ease;
}
/* Voile léger au-dessus (optionnel) */
.c-solutions-hero_text-filter {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.1)
  );
  opacity: 0.9;
  transition: opacity 0.4s ease;
}
/* TEXTE BAS GAUCHE – ancré en bas */
.c-solutions-hero_text {
  position: absolute;
  left: 10px;
  right: 80px;
  bottom: 32px;
  z-index: 2;
}
/* Inner pour animer le bloc texte */
.c-solutions-hero_text-inner {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 0.4s ease;
}
/* Ligne de titre : on laisse u-title gérer la typo, juste taille + caps */
.c-solutions-hero_titleline {
  font-size: 18px;
  text-transform: uppercase;
}
/* BOUTON ROND (flèche) */
.c-soluions-hero_btn {
  position: absolute;
  right: 26px;
  bottom: 30px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
}
.c-btn_icon_wrap.cc-outline {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-btn_icon svg {
  display: block;
}
/* =========================
   OVERLAY CLIQUABLE
   ========================= */
/* Lien invisible qui recouvre toute la colonne */
.c-solutions-hero_link-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;              /* au-dessus des images + voiles + bouton */
  text-indent: -9999px;    /* pas de texte visible */
  overflow: hidden;
}
/* =========================
   HOVERS DESKTOP
   ========================= */
@media (min-width: 992px) {

  /* Quand on survole la rangée : toutes les colonnes se tassent un peu */
  .c-solutions-hero_list:hover .c-solutions-hero_item {
    flex: 0.8;
    filter: brightness(0.65);
  }

  /* Colonne hoverée : élargie + plus lumineuse */
  .c-solutions-hero_list:hover .c-solutions-hero_item:hover {
    flex: 2.2;
    filter: brightness(1);
  }

  .c-solutions-hero_item:hover .c-solutions-hero_background_img {
    transform: scale(1.1);
  }

  /* Gestion du voile : non-hover vs hover */
  .c-solutions-hero_list:hover .c-solutions-hero_item .c-solutions-hero_background-filter {
    opacity: 0.95; /* colonnes non hover → plus sombres */
  }

  .c-solutions-hero_list:hover .c-solutions-hero_item:hover .c-solutions-hero_background-filter {
    opacity: 0.35; /* colonne active → plus claire mais bande noire en bas gardée */
  }

  .c-solutions-hero_list:hover .c-solutions-hero_item .c-solutions-hero_text-filter {
    opacity: 0.9;
  }

  .c-solutions-hero_list:hover .c-solutions-hero_item:hover .c-solutions-hero_text-filter {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0) 100%
        );

  }

  .c-solutions-hero_item:hover .c-soluions-hero_btn {
    opacity: 1;
  }

  /* Petite anim “lift” uniquement desktop */
  .c-solutions-hero_item:hover {
    transform: translateY(-3px);
  }

  /* Titre qui remonte légèrement au hover */
  .c-solutions-hero_item:hover .c-solutions-hero_text-inner {
    transform: translateY(-8px);
  }
}
/* =========================
   MOBILE / TABLETTE
   ========================= */
@media (max-width: 991px) {
  .c-solutions-hero_list {
    flex-direction: column;
    min-height: auto;
  }

  .c-solutions-hero_item {
    flex: none;
    height: 260px;
  }

  .c-solutions-hero_item + .c-solutions-hero_item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Sur mobile, on laisse la flèche visible en permanence */
  .c-soluions-hero_btn {
    opacity: 1;
  }

  .c-solutions-hero_item.is-active .c-solutions-hero_background-filter {
    opacity: 0.25;
  }

  .c-solutions-hero_item.is-active {
    filter: brightness(1);
  }
}
/* =========================
   PLEINE LARGEUR DANS .entry-content
   (évite les marges auto de WP)
   ========================= */
.entry-content > .c-solutions-hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 640px) {

  .c-solutions-hero_col {
      margin-left: 0.6em;
      margin-right: 0.6em;
  }
}
.about-section__media {
  /* si tu veux un offset fixe */
  margin-top: 4.5rem; /* 72px */
}
/* ==========================================================================
   History Timeline
   Structure BEM : .c-history-timeline
   ========================================================================== */
.c-history-timeline {
  position: relative;
  width: 100%;
}
/* Wrapper global (tu as déjà .container en Twig) */
.c-history-timeline__inner {
  position: relative;
}
/* Layout principal : la ligne + la liste des items */
.c-history-timeline__layout {
  position: relative;
  padding-block: 3rem; /* 48px haut/bas */
}
/* Bloc année centré sur la timeline */
.c-history-timeline__year {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: center;   /* centre le label horizontalement */
  pointer-events: none;      /* évite tout clic chelou */
}
.c-history-timeline__year-label {
  /* on enlève la logique left:50% / translateX */
  position: relative;
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 2.2rem;
  text-transform: uppercase;
  background: #fff;   /* masque un peu la ligne derrière */
  line-height: 1.1;
}
/* --------------------------------------------------------------------------
   Ligne centrale
   -------------------------------------------------------------------------- */
.c-history-timeline__line {
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;            /* ligne grise très fine */
  pointer-events: none;
  z-index: 0;
}
.c-history-timeline__line-track {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  background: rgba(148, 163, 184, 0.25); /* gris neutre */
  border-radius: 999px;
}
/* Barre de progression colorée */
.c-history-timeline__line-progress {
  position: absolute;
  top: 0;
  bottom: 0;             /* hauteur = 100% du parent → le scaleY fonctionne */
  width: 3px;            /* plus large que la ligne grise */
  left: 50%;
  margin-left: -1.5px;   /* centre la barre de 3px sur la ligne de 1px */
  transform-origin: top;
  transform: scaleY(0);  /* JS remplace cette valeur */
  background-color: #0080A2;
  border-radius: 999px;
}
/* --------------------------------------------------------------------------
   Items
   -------------------------------------------------------------------------- */
.c-history-timeline__items {
  position: relative;
  z-index: 1;
}
/* Chaque item représente un “step” dans la timeline */
.c-history-timeline__item {
  position: relative;
}
/* Espacement vertical (si tu ne l’as pas déjà via space-y-* en Tailwind) */
.c-history-timeline__item + .c-history-timeline__item {
  margin-top: 3rem; /* 48px */
}
/* Grid à 3 colonnes en desktop : gauche / centre / droite */
.c-history-timeline__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
  align-items: center;
}
/* Colonnes gauche / centre / droite */
.c-history-timeline__col {
  position: relative;
}
/* Colonne “dot” au centre */
.c-history-timeline__col--center {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dot centrale (point de la timeline) – un peu plus gros */
.c-history-timeline__dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.8);
  background-color: #ffffff;
  box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
/* Contenu texte et média (partials Twig) */
.c-history-item {
  position: relative;
}
.c-history-item--text {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08);
}
.c-history-item--media img {
  display: block;
}
/* --------------------------------------------------------------------------
   Effets d’apparition / state actif
   -------------------------------------------------------------------------- */
/* État initial pour les éléments à révéler */
.js-history-content,
.js-history-media {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.35s ease-out,
    transform 0.35s ease-out;
}
/* Quand IntersectionObserver ajoute .is-visible */
.js-history-content.is-visible,
.js-history-media.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Item actif (sélectionné par JS) */
.c-history-timeline__item.is-active .c-history-item--text {
  border: 1px solid rgba(0, 128, 162, 0.3);
  box-shadow: 0 20px 60px rgba(0, 128, 162, 0.25);
}
.c-history-timeline__item.is-active .c-history-timeline__dot {
  border-color: #0080A2;
  background: radial-gradient(circle, #0080A2 0, #0f172a 55%);
  box-shadow: 0 0 0 8px rgba(0, 128, 162, 0.25);
  transform: scale(1.05);
}
/* Petit accent sur les labels/eyebrows dans l’item actif */
.c-history-timeline__item.is-active .c-history-item--text p:first-child {
  color: #0f172a;
}
/* Colonnes gauche / droite : on aligne le contenu vers la timeline */
.c-history-timeline__col--left,
.c-history-timeline__col--right {
  display: flex;
  align-items: center;
}
/* Gauche : contenu collé vers la droite (vers la ligne) */
.c-history-timeline__col--left {
  justify-content: flex-end;
}
/* Droite : contenu collé vers la gauche (vers la ligne) */
.c-history-timeline__col--right {
  justify-content: flex-start;
}
/* --------------------------------------------------------------------------
   Mobile / responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .c-history-timeline__layout {
    padding-block: 2.5rem;
  }

  /* Ligne centrale légèrement décalée (pour éviter de couper le texte) */
  .c-history-timeline__line {
    left: 1.5rem;
    transform: none;
  }

  .c-history-timeline__grid {
    grid-template-columns: auto 1fr;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .c-history-timeline__col--left,
  .c-history-timeline__col--right {
    grid-column: 2 / -1;
    margin-top: 0.5rem;
  }

  .c-history-timeline__col--center {
    grid-column: 1 / 2;
    grid-row: 1;
  }

  .c-history-item--text {
    padding: 1.25rem 1.5rem;
    border-radius: 0.875rem;
  }
}
@media (min-width: 768px) {
  .c-history-timeline__layout {
    padding-block: 4rem;
  }

  .c-history-timeline__item + .c-history-timeline__item {
    margin-top: 4rem;
  }
}
/* ==========================================================================
   Bloc Contact CTA – CF7
   ========================================================================== */
/* Layout global du bloc */
.c-contact-cta {
  position: relative;
  overflow: hidden;
  margin-top: -1.75rem; /* ajuste si besoin pour coller à la nav globale */
}
/* SVG de fond : full viewport, centré, masqué avec un radial gradient
   (complété côté HTML par des classes utilitaires Tailwind) */
.c-contact-cta__bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  opacity: 0.8;
  pointer-events: none;
  z-index: -1;

  -webkit-mask-image: radial-gradient(
    160% 160% at 0% 100%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: radial-gradient(
    160% 160% at 0% 100%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 1) 100%
  );
}
/* --------------------------------------------------------------------------
   Grille / structure du formulaire CF7
   -------------------------------------------------------------------------- */
.c-contact-cta__form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* grille interne (à utiliser dans le markup CF7 avec class="c-contact-cta__grid") */
.c-contact-cta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
}
@media (min-width: 640px) {
  .c-contact-cta__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.c-contact-cta__grid p {
  margin: 0;
}
.c-contact-cta__form label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}
/* Inputs / selects / textarea (CF7) */
.c-contact-cta .wpcf7-form-control.wpcf7-text,
.c-contact-cta .wpcf7-form-control.wpcf7-email,
.c-contact-cta .wpcf7-form-control.wpcf7-tel,
.c-contact-cta .wpcf7-form-control.wpcf7-select,
.c-contact-cta .wpcf7-form-control.wpcf7-textarea {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111827;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  backdrop-filter: blur(4px);
}
.c-contact-cta .wpcf7-form-control.wpcf7-textarea {
  min-height: 140px;
}
/* Focus state */
.c-contact-cta .wpcf7-form-control.wpcf7-text:focus,
.c-contact-cta .wpcf7-form-control.wpcf7-email:focus,
.c-contact-cta .wpcf7-form-control.wpcf7-tel:focus,
.c-contact-cta .wpcf7-form-control.wpcf7-select:focus,
.c-contact-cta .wpcf7-form-control.wpcf7-textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #0080a2;
  box-shadow: 0 0 0 1px #0080a2;
}
/* Texte de consentement / notice RGPD éventuelle */
.c-contact-cta__accept {
  font-size: 0.8rem;
  color: #64748b;
}
.c-contact-cta__accept a {
  text-decoration: underline;
}
.c-contact-cta__accept a:hover {
  color: #212121
}
/* Submit = CTA thème (on laisse les styles principaux au thème) */
.c-contact-cta .wpcf7-submit {
  border: none;
  cursor: pointer;
}
.c-contact-cta__submit .cta_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/* Messages CF7 : au-dessus du formulaire */
.c-contact-cta__form .wpcf7-response-output {
  order: -1;
  margin: 0 0 0.5rem;
  border-radius: 0.75rem;
  padding: 1rem !important;
  font-size: 0.875rem;
}
.c-contact-cta__form .wpcf7-response-output.wpcf7-validation-errors,
.c-contact-cta__form .wpcf7-response-output.wpcf7-spam-blocked {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.c-contact-cta__form .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #15803d;
}
/* Messages d’erreur sous champs */
.c-contact-cta__form span.wpcf7-not-valid-tip {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #b91c1c;
}
/* --------------------------------------------------------------------------
   Citation Julien
   -------------------------------------------------------------------------- */
.c-contact-cta__quote-figure {

}
/* Bulle icône ronde */
.c-contact-cta__quote-icon {
  /* suppression c'est ovale et ça n'apporte rien...
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: #0080a21a;
  */
}
/* Nettoyage <br> injectés par CF7 */
.c-contact-cta__form p > br:first-child,
.c-contact-cta__form label br {
  display: none;
}
/* On transforme la ligne submit en colonne */
.c-contact-cta__submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
/* On force le spinner à se placer au-dessus du bouton */
.c-contact-cta__submit .wpcf7-spinner {
  order: -1;          /* passe avant l'input submit */
  align-self: center; /* centre uniquement ce span dans l’axe horizontal */

}
/* =========================================================
   Bouton submit CF7 – Contact
   - repos : gradient teal, texte blanc
   - hover : gradient un peu plus sombre, légère ombre
   ========================================================= */
.c-contact-cta input[type="submit"].cta_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  padding: 0.75rem 1.5rem;   /* taille md */
  font-size: 1rem;
  font-weight: 500;

  /* gradient teal (utilise tone-teal si dispo) */
  background-image: linear-gradient(
    to right,
    var(--cta-from, #0f766e),
    var(--cta-to, #14b8a6)
  );
  color: #ffffff;

  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);

  transition:
    filter 0.2s ease-out,
    box-shadow 0.2s ease-out,
    transform 0.15s ease-out;
}
.c-contact-cta input[type="submit"].cta_btn:hover,
.c-contact-cta input[type="submit"].cta_btn:focus-visible {
  /* un poil plus sombre, sans changer le gradient */
  filter: brightness(0.93);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
  outline: none;
}
/* --------------------------------------------------------------------------
   Bloc Infos pratiques (téléphone / adresse / horaires)
   -------------------------------------------------------------------------- */
.c-contact-cta__info-card {
  background-color: #f7f7f7;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  font-size: 0.9rem;
  color: #111827;
}
.c-contact-cta__info-card + .c-contact-cta__quote-figure {
  margin-top: 1.75rem;
}
.c-contact-cta__info-row + .c-contact-cta__info-row {
  margin-top: 0.75rem;
}
.c-contact-cta__info-label {
  font-size: 0.90rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 0.15rem;
}
.c-contact-cta__info-value {
  font-size: 0.9rem;
  color: #111827;
}
.c-contact-cta__info-value a {
  color: #0080a2;
  text-decoration: none;
}
.c-contact-cta__info-value a:hover,
.c-contact-cta__info-value a:focus-visible {
  text-decoration: underline;
}
/* Citation : léger spacing + alignement icône */
.c-contact-cta__quote-figure {
  /* tu peux ajuster ici si tu veux plus de marge */
}
.c-contact-cta .wpcf7-select-hidden {
  display: none!important ;
}
/* ==========================================================================
   Bloc Product Features
   ========================================================================== */
/**
 * Wrapper principal du block.
 * (La classe c-product-features est ajoutée via block_classes côté Twig.)
 */
.c-product-features {
  position: relative;
}
.c-product-features p a{
  text-decoration: underline; 
}
/* Variante alignfull si un jour tu veux neutraliser des marges WP. */
.c-product-features.alignfull {
  /* overrides éventuels pour la version pleine largeur */
}
/* ==========================================================================
   Splide – Fix vs Tailwind & layout du slider
   ========================================================================== */
/**
 * On scope TOUTES les règles Splide de ce block
 * pour ne pas impacter d’éventuels autres sliders Splide ailleurs.
 */
.c-product-features .splide__track {
  overflow: hidden;
}
/* On s’assure que la liste Splide ne garde pas les styles UL par défaut
   (margin, padding, bullets, etc.) et qu’elle se comporte comme une rangée. */
.c-product-features .splide__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
/* Chaque slide occupe sa largeur sans se “compacter”. */
.c-product-features .splide__slide {
  flex-shrink: 0;
}
/* ==========================================================================
   Flèches du slider – bas droite, minimalistes
   ========================================================================== */
/* Conteneur des flèches : positionné sous le visuel, à droite. */
.c-product-features .splide__arrows {
  position: absolute;
  right: 2rem;    /* décalage depuis le bord droit du visuel */
  bottom: -3rem;  /* ≃ 48 px sous le slider (ajuste au besoin) */
  display: flex;
  gap: 1.5rem;
}
/* Neutralise complètement le style par défaut des flèches Splide
   et applique un style minimal (juste les chevrons). */
.c-product-features .splide__arrow {
  position: static;
  transform: none;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: auto;
  height: auto;
  cursor: pointer;

  font-size: 1.4rem;  /* taille des flèches ← → si en texte */
  line-height: 1;
  color: #9ca3af;     /* gris clair (approx. gray-400) */
}
.c-product-features .splide__arrow:hover {
  color: #e5e7eb;     /* gris un peu plus clair au hover (approx. gray-200) */
}
/* ==========================================================================
   Tags (mots-clés) du bloc Product Features
   ========================================================================== */
.c-product-features__tags {
  margin-top: 1.75rem!important;          /* espace au-dessus des tags */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;                  /* espace entre les tags */
  padding: 0;
  list-style: none;
 
}
.c-product-features__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.25rem 0.75rem;     /* taille du pill */
  border-radius: 9999px;        /* full rounded */
  border: 1px solid #e5e7eb;    /* gray-200 approx */
  background-color: #f3f4f6;    /* gray-100 approx */

  font-size: 0.75rem;           /* texte un peu plus petit */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #111827;               /* gray-900 approx */
  white-space: nowrap;          /* évite les tags sur 2 lignes */
  margin: 0 !important;
}
/* ==========================================================================
   Lightbox Références
   ========================================================================== */
.c-ref-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;                 /* 🔴 cachée par défaut */
  justify-content: center;       /* centré horizontalement */
  align-items: center;      /* collé en haut */
  padding-top: clamp(4rem, 10vh, 6rem); /* décale vers le bas sous le header */
}
.c-ref-lightbox.is-open {
  display: flex;                 /* 🟢 visible quand .is-open est ajouté par le JS */
  justify-content: center;
  align-items: center;
}
.c-ref-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.75); /* voile sombre */
}
/* fond cliquable */
.c-ref-lightbox__backdrop {
  position: absolute;
  inset: 0;
}
/* boîte image */
.c-ref-lightbox__dialog {
  position: relative;
  max-width: min(1100px, 90vw);
  width: auto;
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.5),
    0 0 0 1px rgba(15, 23, 42, 0.4);
  z-index: 1;
}
.c-ref-lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  -o-object-fit: contain;
     object-fit: contain;
}
/* bouton fermer */
.c-ref-lightbox__close {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  z-index: 2;
  border: 0;
  background: transparent;
  color: #e5e7eb;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
/* flèches */
.c-ref-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: 0;
  background: rgba(15, 23, 42, 0.6);
  color: #e5e7eb;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.6em;
}
.c-ref-lightbox__nav--prev { left: 0.75rem; }
.c-ref-lightbox__nav--next { right: 0.75rem; }
.c-ref-lightbox__nav:hover {
  background: rgba(8, 47, 73, 0.9);
}
/* bouton qui entoure la vignette */
.c-ref-lightbox-trigger {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  width: 100%;
  height: 100%;
}
/* on évite le scroll derrière */
html.is-lightbox-open {
  overflow: hidden;
}
/* tweak mobile : un peu moins haut */
@media (max-width: 767px) {
  .c-ref-lightbox {
    padding-top: 6vh;
  }

  .c-ref-lightbox__dialog {
    max-width: 94vw;
  }
}
/* =========================================================
   Bloc Images + Short Paragraph
   - reset des listes pour la grille d’items
   ========================================================= */
.c-images-short-paragraph [role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-images-short-paragraph [role="list"] > li {
  list-style: none;
}
/* Image des items : centrée, largeur max 240px */
.c-images-short-paragraph__item-media {
  max-width: 200px;
  margin: 0 auto;
  text-align: center;
}
.c-images-short-paragraph__item-media img,
.c-images-short-paragraph__item-img {
  display: block;
  width: 100%;
  height: auto;
}
/* ==========================================================================
   Mobile nav – drilldown + transitions
   ========================================================================== */
/* Conteneur principal (déjà géré via Tailwind pour la position) */
.m-nav {
  /* rien d’obligatoire ici pour l’instant */
}
.m-nav__inner {
  position: relative;     /* au cas où Tailwind ne soit pas suffisant */
  background-color: #fff; /* sécurité si le bg-white TW ne passe pas partout */
  overflow: hidden;       /* on coupe les débordements du halo */
}
/* Halo gris derrière le contenu */
.c-mobile-menu__bg {
  position: absolute;
  width: 130%;          /* plus large que le panneau */
  height: auto;
  left: 80%;
  bottom: 10%;          /* tu peux jouer avec cette valeur */
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .4;         /* important : visible */
  z-index: 0;
}
/* On s'assure que le contenu passe bien par-dessus le halo */
.m-nav__header,
.m-nav__scroll {
  position: relative;
  z-index: 1;
}
/* Bouton de fermeture et burger */
.m-nav__close,
.js-mnav-toggle {
  font-size: 24px;
  opacity: .55;
  transition: opacity .2s ease;
}
.m-nav__close:hover,
.js-mnav-toggle:hover {
  opacity: 1;
}
/* Header du panneau (logo + close) */
.m-nav__header {
  border-bottom: 1px solid #f3f4f6; /* gray-100 */
  background-color: #f9fafb;        /* gray-50 */
  min-height: 126px;
}
/* =========================
   Niveaux & séparateurs
   ========================= */
.m-nav__roots,
.m-nav__lvl2,
.m-nav__lvl3 ul {
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
}
/* Lignes root (niveau 1) */
.m-nav__root-btn {
  background-color: #ffffff;
}
/* Liens : transitions communes */
.m-nav__root-link,
.m-nav__lvl2-link,
.m-nav__lvl3-link {
  transition: background-color .18s ease, color .18s ease;
}
/* Hover léger */
.m-nav__root-link:hover,
.m-nav__lvl2-link:hover,
.m-nav__lvl3-link:hover {
  background-color: #f9fafb;
}
/* Active states */
.m-nav__root-link--active,
.m-nav__lvl-link--active {
  color: #111827;
}
.m-nav__root.is-current > .m-nav__root-btn > .m-nav__root-link {
  background-color: #f7f7f7;
  color: #0080a2;
  font-weight: 600;
}
/* =========================
   Drilldown ROOT (niveau 1)
   ========================= */
/* Quand un root est ouvert, on cache SA propre ligne "liste" */
.m-nav__root.is-root-open > .m-nav__root-btn {
  display: none;
}
/*
  Quand un root est ouvert, on masque toutes les autres lignes root.

  On ne dépend plus d'une classe JS sur .m-nav :
  la liste .m-nav__roots détecte toute .m-nav__root.is-root-open.
*/
.m-nav__roots:has(.m-nav__root.is-root-open) .m-nav__root {
  display: none;
}
.m-nav__roots:has(.m-nav__root.is-root-open) .m-nav__root.is-root-open {
  display: block;
}
/* Panneau root (niveau 2+3) */
.m-nav__root-panel {
  display: block; /* la classe Tailwind `hidden` gère le display:none au repos */
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
/* Quand le root est réellement ouvert (classe déjà présente dans ton DOM) */
.m-nav__root.is-root-open > .m-nav__root-panel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* Si Tailwind a laissé .hidden on force le reset */
.m-nav__root-panel.hidden {
  display: none;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
}
/* Header du panneau (flèche retour + titre root ou lvl2) */
.m-nav__section-header {
  border-bottom: 1px solid #e5e7eb;
  background-color: #ffffff;
}
/* Bouton back */
.m-nav__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  border-right: 1px solid #e5e7eb;
}
.m-nav__back-icon {
  font-size: 18px;
  transform: rotate(180deg);
  transition: transform .18s ease, opacity .18s ease;
}
.m-nav__back:hover .m-nav__back-icon {
  opacity: 0.9;
  transform: rotate(180deg) translateX(-1px);
}
.m-nav__section-title {
  display: inline-flex;
  align-items: center;
  padding-left: 0.75rem;
  font-size: 16px;
}
/* =========================
   Chevrons / toggles
   ========================= */
.m-nav__chevron-icon {
  font-size: 16px;
  transition: transform .18s ease, opacity .18s ease;
}
/* Rotation quand aria-expanded = true */
.m-nav__root-toggle[aria-expanded="true"] .m-nav__chevron-icon,
.m-nav__lvl2-toggle[aria-expanded="true"] .m-nav__chevron-icon {
  transform: translateX(1px) rotate(90deg);
}
/* Hover léger */
.m-nav__root-toggle:hover .m-nav__chevron-icon,
.m-nav__lvl2-toggle:hover .m-nav__chevron-icon {
  opacity: 0.9;
}
/* =========================
   Niveau 2 + 3
   ========================= */
.m-nav__lvl2-link {
  font-size: 13px;
  text-transform: uppercase;
}
/* Liens lvl3 */
.m-nav__lvl3-link {
  font-size: 13px;
}
/* petit padding horizontal pour les lvl3 */
.m-nav__lvl3-link {
  /* le px-8 vient du HTML, on garde juste la transition */
}
/* =========================
   Drilldown LVL3
   ========================= */
/*
  Quand on est en mode lvl3 (classe déjà ajoutée en JS sur .m-nav__root-panel) :
  - On cache toutes les entrées lvl2
  - Sauf celle marquée .is-lvl3-current
*/
.m-nav__root-panel.is-showing-lvl3 .m-nav__lvl2-item {
  display: none;
}
.m-nav__root-panel.is-showing-lvl3 .m-nav__lvl2-item.is-lvl3-current {
  display: block;
}
/* On ne garde pas la ligne "Education >" mais seulement la liste lvl3 */
.m-nav__root-panel.is-showing-lvl3
  .m-nav__lvl2-item.is-lvl3-current
  > .flex {
  display: none;
}
/* Le bloc lvl3 devient le contenu visible */
.m-nav__root-panel.is-showing-lvl3
  .m-nav__lvl2-item.is-lvl3-current
  .js-mnav-lvl3 {
  display: block;
}
/* Optionnel : léger highlight au hover (déjà plus haut pour tous les liens) */
/* Panneau principal */
.m-nav__inner {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Zone scrollable du menu */
.m-nav__scroll {
  flex: 1;
}
/* On force le header, le scroll, et le switch langue au-dessus du halo */
.m-nav__header,
.m-nav__scroll,
.m-nav__lang-switch {
  position: relative;
  z-index: 1;
}
/* Bloc FR | EN en bas */
.m-nav__lang-switch {
    min-height: 60px;
    padding: 0.75rem 1.25rem 1.25rem;
    /* border-top: 1px solid #f3f4f6; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
    position: absolute;
    bottom: 60px;
    width: 100%;
}
/* Wrapper interne (optionnel) */
.m-nav__lang-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* Liens langues */
.m-nav__lang-link {
  text-decoration: none;
  color: inherit;
  font-weight: 500;
  transition: color 0.18s ease, opacity 0.18s ease;
}
.m-nav__lang-link:hover {
  opacity: 0.9;
}
/* Langue active : un peu plus contrastée */
.m-nav__lang-link.is-active {
  color: #4b5563; /* gray-600 */
}
/* Séparateur pipe */
.m-nav__lang-sep {
  opacity: 0.5;
  font-size: 12px;
}
/* ==========================================================================
   Bloc – Infos avec puces cochées
   BEM: .c-ticked-infos
   ========================================================================== */
.c-ticked-infos {
  position: relative;
  padding-block: 3rem; /* 48px haut / bas */
}
/* Wrapper interne (layout global, le container est géré dans le Twig) */
.c-ticked-infos__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* ========================
   Colonne gauche : texte
   ======================== */
.c-ticked-infos__left {
  text-align: right; /* demandé : texte aligné à droite */
}
.c-ticked-infos__title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;       /* ≈ 24px */
  line-height: 1.25;
  font-weight: 600;
}
.c-ticked-infos__desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4b5563;          /* gris doux, adapte si besoin */
}
.c-ticked-infos__desc p:last-child {
  margin-bottom: 0;
}
/* ==============================
   Séparateur vertical / horizontal
   ============================== */
.c-ticked-infos__divider {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(148, 163, 184, 0),
    rgba(148, 163, 184, 0.9),
    rgba(148, 163, 184, 0)
  );
}
/* ========================
   Colonne droite : liste
   ======================== */
.c-ticked-infos__right {
  position: relative;
}
.c-ticked-infos__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.c-ticked-infos__item {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
}
/* Icône "tick" */
.c-ticked-infos__icon {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(34, 197, 94, 0.12); /* vert clair très soft */
  color: #16a34a; /* vert moyen (Iconify utilise currentColor) */
  font-size: 1.1rem;
}
/* Assure que l'icon <iconify-icon> prend la bonne taille */
.c-ticked-infos__icon iconify-icon {
  display: block;
  width: 1em;
  height: 1em;
}
/* Texte de la puce */
.c-ticked-infos__label {
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #111827;
}
/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
/* >= 768px : deux colonnes + divider vertical */
@media (min-width: 768px) {
  .c-ticked-infos__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.4fr);
    align-items: stretch;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }

  .c-ticked-infos__divider {
    width: 1px;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(148, 163, 184, 0),
      rgba(148, 163, 184, 0.9),
      rgba(148, 163, 184, 0)
    );
  }

  /* Colonne gauche centrée sur la hauteur */
  .c-ticked-infos__left {
    align-self: center;
  }
}
/* >= 1024px : un peu plus d’air */
@media (min-width: 1024px) {
  .c-ticked-infos {
    padding-block: 3.5rem;
  }

  .c-ticked-infos__inner {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }

  .c-ticked-infos__title {
    font-size: 1.75rem;
  }

  .c-ticked-infos__list {
    gap: 1rem;
  }
}
/* Optional : version alignfull si tu veux réduire la largeur d’inner */
.c-ticked-infos.alignfull .c-ticked-infos__inner {
  max-width: 72rem; /* ~1152px */
  margin-inline: auto;
}
/* ==========================================================================
   Barre de filtres – Page Références
   ========================================================================== */
.c-reference-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding-left: 8em;
    padding-right: 8em;
}
.c-ref-filter-btn {
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;    /* gray-200 */
  background-color: #ffffff;
  font-size: 0.8rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4b5563;               /* gray-600 */
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.c-ref-filter-btn:hover {
  border-color: #0080a2;
  color: #0080a2;
}
.c-ref-filter-btn.is-active {
  border-color: #0080a2;
  background-color: #0080a210;  /* léger fond teinté */
  color: #004f66;               /* version plus sombre */
}
/* Optionnel : espace entre la barre et les blocs si tu veux plus d’air */
.references-blocks {
  margin-top: 1rem;
}
.c-references-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1em 0;
}
.c-references-intro {
    text-transform: uppercase;
    font-size: 0.8em;
    opacity: .7;
    margin-bottom: 1em;
}
/* Mobile : on supprime les gros padding de la barre de filtres */
@media (max-width: 640px) {
  .c-reference-filters {
    padding-right: 0;
    padding-left: 0;
  }
}
/* ==========================================================================
   Bento 2 colonnes – layout, coque de verre, couleurs et rayons
   ========================================================================== */
.c-bento-2col {
  position: relative;
}
.c-bento-2col__item {
  position: relative;
  /* petit padding pour que la coque respire dans la grille */
  padding: 0.75rem;
}
/* -----------------------
   Coque externe (comme pricing)
   ----------------------- */
.c-bento-2col__outline {
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  /* coque quasi blanche + léger effet glass */
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 1px color-mix(in srgb,
      var(--bento-cards-border, rgba(148,163,184,0.45)) 80%,
      transparent),
    0 18px 40px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 0;
  transition:
    box-shadow 220ms ease-out,
    transform 220ms ease-out;
}
/* léger lift au hover comme les pricing */
.c-bento-2col__item:hover .c-bento-2col__outline {
  box-shadow:
    0 0 0 1px color-mix(in srgb,
      var(--bento-cards-border, rgba(148,163,184,0.55)) 90%,
      transparent),
    0 24px 50px rgba(15, 23, 42, 0.22);
  transform: translateY(-2px);
}
/* -----------------------
   Fond de carte interne
   ----------------------- */
/* Inner card BG (équivalent de la carte interne de pricing) */
.c-bento-2col__bg {
  position: absolute;
  inset: 0.6rem; /* ~p-2.5 / p-3 visuel */
  background-color: var(--bento-cards-bg, #ffffff);
  border-radius: 0.75rem;
  /* petit trait autour de la carte interne */
  box-shadow:
    0 0 0 1px color-mix(in srgb,
      var(--bento-cards-border, rgba(148,163,184,0.45)) 60%,
      transparent);
}
/* Carte réelle (contenu) */
.c-bento-2col__card {
  position: relative;
  border-radius: 0.75rem;
  background: transparent;
  z-index: 1;
}
/* grille : lignes de même hauteur en desktop */
.c-bento-2col__grid {
  grid-auto-rows: auto;
}
/* -----------------------
   Variantes existing / new
   ----------------------- */
/* Cartes "je suis déjà client" : fond très clair */
.c-bento-2col__item--existing .c-bento-2col__bg {
  background-color: #ffffff;
}
/* Cartes "pas encore client" : léger bleu très clair */
.c-bento-2col__item--new .c-bento-2col__bg {
  background-color:  #c0e0ee;
}
/* -----------------------
   RADIUS – MOBILE
   ----------------------- */
/* Carte 1 (bento 1, en haut) : grands coins en haut seulement */
.c-bento-2col__item--left .c-bento-2col__bg,
.c-bento-2col__item--left .c-bento-2col__card,
.c-bento-2col__item--left .c-bento-2col__outline {
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
/* Carte 3 (bento 3, en bas) : grands coins en bas seulement */
.c-bento-2col__item--bottom-right .c-bento-2col__bg,
.c-bento-2col__item--bottom-right .c-bento-2col__card,
.c-bento-2col__item--bottom-right .c-bento-2col__outline {
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}
/* Carte 2 (milieu) garde le petit radius (.75rem) partout */
.c-bento-2col p.tone-teal {
    color: #0080A2;
}
.c-bento-2col p.tone-amber {
    color: #FCC000;
}
.c-bento-2col p.tone-red {
    color: #D02F35;
}
/* -----------------------
   DESKTOP
   ----------------------- */
@media (min-width: 1024px) {
  .c-bento-2col__grid {
    grid-auto-rows: 1fr;
  }

  /* Grande carte GAUCHE : gros TL + BL */
  .c-bento-2col__item--left .c-bento-2col__bg,
  .c-bento-2col__item--left .c-bento-2col__card,
  .c-bento-2col__item--left .c-bento-2col__outline {
    border-radius: 1.25rem; /* base pour coins intérieurs */
    border-top-left-radius: 2.5rem;
    border-bottom-left-radius: 2.5rem;
  }

  /* Haut DROITE : gros TR */
  .c-bento-2col__item--top-right .c-bento-2col__bg,
  .c-bento-2col__item--top-right .c-bento-2col__card,
  .c-bento-2col__item--top-right .c-bento-2col__outline {
    border-radius: 1.25rem;
    border-top-right-radius: 2.5rem;
  }

  /* Bas DROITE : gros BR */
  .c-bento-2col__item--bottom-right .c-bento-2col__bg,
  .c-bento-2col__item--bottom-right .c-bento-2col__card,
  .c-bento-2col__item--bottom-right .c-bento-2col__outline {
    border-radius: 1.25rem;
    border-bottom-right-radius: 2.5rem;
  }
}
.gradient-bg {
    z-index: 0!important;
}
/* ==========================================================================
   Shader Hero – Splide + Shader Carousel
   BEM: .c-shader-hero
   ========================================================================== */
/* SECTION : fond gris clair + halo gris en bas */
.c-shader-hero {
  position: relative;
  padding-block: 5rem 6rem;
  background: #f7f7f7;
  overflow: hidden;
}
.c-shader-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12rem;
  transform: translateX(-50%);
  width: 80vw;
  max-width: 1100px;
  height: 350px;
  background: radial-gradient(
    circle at top,
    rgba(209, 213, 219, 0.85),
    rgba(209, 213, 219, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}
/* Wrapper interne */
.c-shader-hero__inner {
  position: relative;
  z-index: 1;
}
/* Splide aligné à droite */
.c-shader-hero__splide {
  position: relative;
  max-width: 1040px;
  margin-left: auto;
}
/* Track */
.c-shader-hero__track {
  position: relative;
  overflow: visible !important; /* permet au texte de dépasser à gauche sur desktop */
}
/* Canvas du shader */
.c-shader-hero__track canvas {
  border-radius: 16px;
  box-shadow: 18px 28px 70px rgba(0, 0, 0, 0.18);
  border: none;
}
/* ==========================================================================
   Slide (layout desktop)
   ========================================================================== */
.c-shader-hero__slide {
  position: relative;
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  align-items: center;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}
/* Image */
.c-shader-hero__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  grid-column: 2;
}
/* Overlay (dégradé pour lisibilité desktop) */
.c-shader-hero__overlay {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(247, 247, 247, 0.96) 0%,
    rgba(247, 247, 247, 0.90) 14%,
    rgba(247, 247, 247, 0.60) 30%,
    rgba(247, 247, 247, 0.00) 55%
  );
}
/* ==========================================================================
   Contenu textuel (desktop)
   ========================================================================== */
.c-shader-hero__content {
  position: relative;
  max-width: 460px;
  grid-column: 1;
  margin-left: -60%; /* débordement à gauche */
  z-index: 3;
}
/* Lisibilité texte */
.c-shader-hero__title,
.c-shader-hero__text {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
/* ==========================================================================
   Animation smooth + mini-delay du texte
   ========================================================================== */
/* Slide NON active : texte décalé + invisible */
.c-shader-hero__slide .c-shader-hero__content {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   800ms cubic-bezier(0.25, 1, 0.5, 1) 120ms,
    transform 800ms cubic-bezier(0.25, 1, 0.5, 1) 120ms;
  will-change: opacity, transform;
}
/* Slide active : texte visible + en place */
.c-shader-hero__slide.is-active .c-shader-hero__content,
.c-shader-hero__slide.is-active.is-visible .c-shader-hero__content {
  opacity: 1;
  transform: translateY(0);
}
/* ==========================================================================
   Thèmes clair / sombre
   ========================================================================== */
.c-shader-hero__content--dark {
  color: #f9fafb;
}
.c-shader-hero__content--light {
  color: #020617;
}
/* ==========================================================================
   Typo et CTA
   ========================================================================== */
.c-shader-hero__eyebrow {
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  color: #0080A2;
}
.c-shader-hero__title {
  font-size: clamp(2.3rem, 3.1vw, 3.2rem);
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 1rem;
}
.c-shader-hero__text {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}
/* CTA : le look vient de .cta_link + .tone-teal */
.c-shader-hero__cta {
  display: inline-flex;
  align-items: center;
}
/* ==========================================================================
   Flèches
   ========================================================================== */
.c-shader-hero__arrows {
  position: absolute;
  right: 1rem;
  bottom: -3rem;
  display: inline-flex;
  gap: 2.5rem;
  align-items: center;
}
.c-shader-hero__arrows .splide__arrow {
  position: static;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  padding: 0;
  opacity: 0.75;
  cursor: pointer;
}
.c-shader-hero__arrows .splide__arrow:hover {
  opacity: 1;
}
.c-shader-hero__arrows svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 1.5;
  transform: scaleX(-1);
}
.c-shader-hero__arrows .splide__arrow--next svg {
  transform: none;
}
/* Cacher pagination */
.c-shader-hero .splide__pagination {
  display: none !important;
}
/* ==========================================================================
   TABLET & MOBILE – TEXTE EN BAS DU SLIDE
   ========================================================================== */
@media (max-width: 1024px) {
  .c-shader-hero {
    padding-block: 0 3rem; /* pas de bande grise au-dessus, léger espace dessous */
  }

  .c-shader-hero__inner.container {
    padding-left: 0;
    padding-right: 0;
  }

  .c-shader-hero__splide {
    max-width: 100%;
    margin-left: 0;
  }

  /* On enferme tout dans le slide : plus de débordement gauche */
  .c-shader-hero__track {
    overflow: hidden !important;
  }

  .c-shader-hero__slide {
    display: block;
  }

  /* Overlay plus fort du bas vers le haut pour la lisibilité */
  .c-shader-hero__overlay {
    background: linear-gradient(
      to top,
      rgba(247, 247, 247, 0.98) 0%,
      rgba(247, 247, 247, 0.94) 25%,
      rgba(247, 247, 247, 0.60) 55%,
      rgba(247, 247, 247, 0.00) 100%
    );
    border-radius: 0;
  }

  /* Texte collé en bas du slider, à l’intérieur de l’image */
  .c-shader-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    max-width: none;
    padding: 1.75rem 1.5rem 2.25rem;
    z-index: 3;
  }

  .c-shader-hero__title,
  .c-shader-hero__text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  }

  /* Flèches : en bas à droite, dans le slide, sur la même ligne que le CTA */
  .c-shader-hero__arrows {
    position: absolute;
    right: 1.5rem;
    bottom: 1.9rem;          /* ≈ padding-bottom du contenu */
    left: auto;
    transform: none;
    width: auto;
    margin: 0;
    display: inline-flex;
    justify-content: flex-end;
    gap: 1.75rem;
  }

  .c-shader-hero__arrows .splide__arrow {
    opacity: 0.9;
  }

  .c-shader-hero__arrows .splide__arrow:hover {
    opacity: 1;
  }
}
/* ==========================================================================
   MOBILE PUR
   ========================================================================== */
@media (max-width: 640px) {

  .c-shader-hero {
    padding-block: 0; /* plus aucune bande grise autour du slider */
  }

  /* On masque aussi le halo radiale sur mobile */
  .c-shader-hero::after {
    display: none;
  }

  .c-shader-hero__inner.container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Canvas plein écran, sans ombre ni arrondi pour coller aux bords */
  .c-shader-hero__track canvas {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .c-shader-hero__slide {
    margin: 0;
  }

  /* Texte toujours en bas du slide, mais avec padding un peu réduit */
  .c-shader-hero__content {
    padding: 1.4rem 1.25rem 2rem;
  }

  .c-shader-hero__eyebrow {
    font-size: 0.95rem;
  }

  .c-shader-hero__title {
    font-size: 2rem;
    line-height: 1.15;
  }

  /* Overlay encore un peu plus présent pour la lisibilité mobile */
  .c-shader-hero__overlay {
    background: linear-gradient(
      to top,
      rgba(247, 247, 247, 0.95) 0%,
      rgba(247, 247, 247, 0.80) 25%,
      rgba(247, 247, 247, 0.60) 60%,
      rgba(247, 247, 247, 0.00) 100%
    );
    border-radius: 0;
  }

  /* Flèches : même principe qu’en tablette, en bas à droite dans l’image */
  .c-shader-hero__arrows {
    position: absolute;
    right: 1.25rem;
    bottom: 1.6rem;
    left: auto;
    transform: none;
    width: auto;
    margin: 0;
    display: inline-flex;
    justify-content: flex-end;
    gap: 1.5rem;
  }

  .c-shader-hero__arrows svg {
    width: 26px;
    height: 26px;
    stroke: #111;
  }
}
.blog-article{

}
.blog-article .prose :where(h1.wp-block-heading, h2.wp-block-heading, h3.wp-block-heading, h4.wp-block-heading, h1, h2, h3, h4) {
  margin: 2rem 0;
}
.blog-article ul.wp-block-list {
    list-style: disc;
    padding: 1em 0 1em 2em;
}
/* Splide DOIT être ici, avec les autres @import */
.splide__container{box-sizing:border-box;position:relative}
.splide__list{backface-visibility:hidden;display:flex;height:100%;margin:0!important;padding:0!important}
.splide.is-initialized:not(.is-active) .splide__list{display:block}
.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}
.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}
.splide:not(.is-overflow) .splide__pagination{display:none}
.splide__progress__bar{width:0}
.splide{position:relative;visibility:hidden}
.splide.is-initialized,.splide.is-rendered{visibility:visible}
.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}
.splide__slide img{vertical-align:bottom}
.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}
.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}
.splide__toggle.is-active .splide__toggle__pause{display:inline}
.splide__track{overflow:hidden;position:relative;z-index:0}
@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}
.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}
.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}
.splide--rtl{direction:rtl}
.splide__track--ttb>.splide__list{display:block}
.splide__arrow{align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:flex;height:2em;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}
.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}
.splide__arrow:hover:not(:disabled){opacity:.9}
.splide__arrow:disabled{opacity:.3}
.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}
.splide__arrow--prev{left:1em}
.splide__arrow--prev svg{transform:scaleX(-1)}
.splide__arrow--next{right:1em}
.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}
.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}
.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}
.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}
.splide__pagination__page:hover{cursor:pointer;opacity:.9}
.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}
.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}
.splide__progress__bar{background:#ccc;height:3px}
.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}
.splide__slide:focus{outline:0}
@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}
@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}
@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}
@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}
.splide__toggle{cursor:pointer}
.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}
.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}
.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}
.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}
.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}
.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}
.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}
.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}
.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}
.splide__arrows--ttb .splide__arrow--prev{top:1em}
.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}
.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}
.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}
.splide__pagination--ttb{bottom:0;display:flex;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}
/* === Ensuite seulement Tailwind === */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
/* hooks généraux */
.site-content { position: relative; }
.site-logo {
  height: 7rem;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
    margin-right: 3em;
}
.site-logo,
  .footer-logo {
    max-width: 100%;
    -o-object-fit:contain;
    object-fit:contain}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}
@media (min-width: 1320px) {
  .container {
    max-width: 1320px;
  }
}
/* ============= Layout Gutenberg ============= */
.entry-content > *:not(.alignwide):not(.alignfull):not(.hero--full):not(.two-cols--full):not(.cms-grid--full):not(.video-grid--full):not(.c-contact-cta):not(.c-pricing-section):not(.c-shader-hero) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
.entry-content .alignwide {
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
.entry-content .alignfull {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
/* Pleine largeur solide contrôlée par ACF (casse les wrappers) */
.hero--full{
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: 0;
    padding-right: 0;
  }
/* =========================================================
     CTA LINK (nouveau)
     - soulignement fin + balayage gradient au hover
     ========================================================= */
.cta_link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
    color: inherit;
    padding-bottom: .375rem;
    isolation: isolate;
}
.cta_link::before{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:1px;
    background: color-mix(in srgb, currentColor 35%, transparent);
  }
.cta_link::after{
    content:"";
    position:absolute; left:0; bottom:0; height:2px; width:100%;
    background-image: linear-gradient(to right, var(--cta-from), var(--cta-to));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease-out;
    z-index: -1;
  }
.cta_link:hover::after,
  .cta_link:focus-visible::after { transform: scaleX(1); }
.cta_icon {
  height: 1rem;
  width: 1rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.cta_link:hover .cta_icon,
  .cta_link:focus-visible .cta_icon { transform: translateX(0.125rem); }
/* Compat progressive : anciens alias */
.cta_hi_1 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
    color: inherit;
    padding-bottom: .375rem;
    isolation: isolate;
}
.cta_hi_1::before{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:1px;
    background: color-mix(in srgb, currentColor 35%, transparent);
  }
.cta_hi_1::after{
    content:"";
    position:absolute; left:0; bottom:0; height:2px; width:100%;
    background-image: linear-gradient(to right, var(--cta-from), var(--cta-to));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease-out;
    z-index: -1;
  }
.cta_hi_1:hover::after,.cta_hi_1:focus-visible::after { transform: scaleX(1); }
.cta_hi_1:hover .cta_icon,.cta_hi_1:focus-visible .cta_icon { transform: translateX(0.125rem); }
.cta_hi_1.ink-teal {
    color: #0080A2;
  }
.cta_hi_1.ink-teal:hover,.cta_hi_1.ink-teal:focus-visible {
    color: #00A6CF;
  }
.cta_hi_1.ink-dark {
    color: #111827;
  }
.cta_hi_1.ink-dark:hover,.cta_hi_1.ink-dark:focus-visible {
    color: #020617;
  }
.cta_hi_1.ink-red {
    color: #D02F35;
  }
.cta_hi_1.ink-red:hover,.cta_hi_1.ink-red:focus-visible {
    color: #F0444F;
  }
.cta_hi_1.ink-white {
    color: #FFFFFF;
  }
.cta_hi_1.ink-white:hover,.cta_hi_1.ink-white:focus-visible {
    color: #F9FAFB;
  }
/* =========================================================
     CTA BUTTON (nouveau)
     - lit ses couleurs dans --cta-from / --cta-to (via .tone-*)
     - overlay gradient sous le contenu
     - halo/outline pilotables par variables
     ========================================================= */
.cta_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    color: inherit;
    background: transparent;

    /* Outline discret AU REPOS */
    box-shadow:
      0 0 0 1px color-mix(in srgb, currentColor var(--cta-outline-alpha, 25%), transparent);

    isolation: isolate;
    z-index: 0;
    will-change: box-shadow;
}
/* Overlay gradient (sous le contenu) */
.cta_btn::before{
    content:"";
    position:absolute; inset:0; border-radius:inherit;
    background-image: linear-gradient(to bottom right, var(--cta-from), var(--cta-to));
    opacity:0; transform:scale(.98);
    transition: opacity .35s ease, transform .35s ease;
    z-index:-1;
    pointer-events:none;
    will-change: opacity, transform;
  }
/* S'assurer que le contenu reste au-dessus */
.cta_btn > *{ position:relative; z-index:1; }
/* Hover/focus */
.cta_btn:hover::before,
  .cta_btn:focus-visible::before{ opacity:1; transform:scale(1); }
.cta_btn:hover,
  .cta_btn:focus-visible{
    color: var(--cta-ink, #fff);
    box-shadow:
      0 0 0 1px color-mix(in srgb, currentColor var(--cta-outline-alpha, 25%), transparent),
      0 0 0 var(--cta-halo, 6px)
        color-mix(in srgb, var(--cta-from) var(--cta-halo-alpha, 25%), transparent);
    outline: none;
  }
/* ============== Variantes d’effet ============== */
.cta_btn--wipe::before{
    opacity:1;
    transform: translateX(-100%);
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
  }
.cta_btn--wipe:hover::before,
  .cta_btn--wipe:focus-visible::before{ transform: translateX(0); }
/* ============== Presets d’encre (optionnels) ============== */
/* ============== Tailles ============== */
.cta_btn--xs {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
}
.cta_btn--sm {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.cta_btn--md {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
/* défaut */
.cta_btn--lg {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-size: 17px;
}
.cta_btn--xl {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
/* ============== Variantes de “bordure” ============== */
.cta_btn--invert{
    background:#fff; color:#111827;
    box-shadow:
      0 1px 2px rgba(0,0,0,.06),
      0 0 0 1px rgba(0,0,0,.06);
  }
.cta_btn--plain{ box-shadow: none; }
.cta_btn--hairline{
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor var(--cta-outline-alpha, 30%), transparent);
  }
.cta_btn--filled::before { opacity: 1; transform: none; }
.cta_btn--filled { color: #fff; }
/* ============== Icône (optionnelle) ============== */
.cta_icon {
  height: 1rem;
  width: 1rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.cta_btn:hover .cta_icon,
  .cta_btn:focus-visible .cta_icon { transform: translateX(0.125rem); }
/* ============== Reduced motion ============== */
@media (prefers-reduced-motion: reduce){
    .cta_btn, .cta_btn::before, .cta_icon { transition: none !important; }
  }
/* LEGACY alias */
.cta_hi_2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    color: inherit;
    background: transparent;

    /* Outline discret AU REPOS */
    box-shadow:
      0 0 0 1px color-mix(in srgb, currentColor var(--cta-outline-alpha, 25%), transparent);

    isolation: isolate;
    z-index: 0;
    will-change: box-shadow;
}
.cta_hi_2::before{
    content:"";
    position:absolute; inset:0; border-radius:inherit;
    background-image: linear-gradient(to bottom right, var(--cta-from), var(--cta-to));
    opacity:0; transform:scale(.98);
    transition: opacity .35s ease, transform .35s ease;
    z-index:-1;
    pointer-events:none;
    will-change: opacity, transform;
  }
.cta_hi_2 > *{ position:relative; z-index:1; }
.cta_hi_2:hover::before,.cta_hi_2:focus-visible::before{ opacity:1; transform:scale(1); }
.cta_hi_2:hover,.cta_hi_2:focus-visible{
    color: var(--cta-ink, #fff);
    box-shadow:
      0 0 0 1px color-mix(in srgb, currentColor var(--cta-outline-alpha, 25%), transparent),
      0 0 0 var(--cta-halo, 6px)
        color-mix(in srgb, var(--cta-from) var(--cta-halo-alpha, 25%), transparent);
    outline: none;
  }
.cta_hi_2::before{
    opacity:1;
    transform: translateX(-100%);
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
  }
.cta_hi_2:hover::before,.cta_hi_2:focus-visible::before{ transform: translateX(0); }
.cta_hi_2 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
.cta_hi_2:hover .cta_icon,.cta_hi_2:focus-visible .cta_icon { transform: translateX(0.125rem); }
@media (prefers-reduced-motion: reduce){
    .cta_hi_2,.cta_hi_2::before { transition: none; }
  }
.c-contact-cta__submit .cta_hi_2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.c-contact-cta input[type="submit"].cta_hi_2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  padding: 0.75rem 1.5rem;   /* taille md */
  font-size: 1rem;
  font-weight: 500;

  /* gradient teal (utilise tone-teal si dispo) */
  background-image: linear-gradient(
    to right,
    var(--cta-from, #0f766e),
    var(--cta-to, #14b8a6)
  );
  color: #ffffff;

  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);

  transition:
    filter 0.2s ease-out,
    box-shadow 0.2s ease-out,
    transform 0.15s ease-out;
}
.c-contact-cta input[type="submit"].cta_hi_2:hover,
.c-contact-cta input[type="submit"].cta_hi_2:focus-visible {
  /* un poil plus sombre, sans changer le gradient */
  /* un poil plus sombre, sans changer le gradient */
  filter: brightness(0.93);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
  outline: none;
}
.cta-white-on-red{
    color:#fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.92);
    --cta-from:#ffffff;  /* wipe blanc */
    --cta-to:#ffffff;
  }
/* Hover : fond blanc + texte rouge (piloté par --cta-ink) */
.cta-white-on-red:hover,
  .cta-white-on-red:focus-visible{
    background:#ffffff;
    --cta-ink:#dc2626;   /* <- le composant lira cette valeur */
    color:var(--cta-ink);
    box-shadow: 0 0 0 1px #ffffff;
  }
/* Wipe vers blanc au hover (recouvre le fond rouge) */
/* Quand le blanc est là, on veut le texte rouge (piloté par --cta-ink) */
/* =========================================================
     Compléments pour les CTA "lien"
     ========================================================= */
/* 1) Variante "statique" : pas d'effet wipe, ligne toujours visible */
.cta_link--static::after {
    transform: scaleX(1);
    transition: none;
  }
.cta_link--static:hover::after,
  .cta_link--static:focus-visible::after {
    transform: scaleX(1);
  }
/* 2) Encres spécifiques pour les liens
        (on scope sur .cta_link.* pour ne pas impacter le reste) */
.cta_link.ink-teal {
    color: #0080A2;
  }
.cta_link.ink-teal:hover,
  .cta_link.ink-teal:focus-visible {
    color: #00A6CF;
  }
.cta_link.ink-dark {
    color: #111827;
  }
.cta_link.ink-dark:hover,
  .cta_link.ink-dark:focus-visible {
    color: #020617;
  }
.cta_link.ink-red {
    color: #D02F35;
  }
.cta_link.ink-red:hover,
  .cta_link.ink-red:focus-visible {
    color: #F0444F;
  }
.cta_link.ink-white {
    color: #FFFFFF;
  }
.cta_link.ink-white:hover,
  .cta_link.ink-white:focus-visible {
    color: #F9FAFB;
  }
/* =========================================================
     BREADCRUMB – BASE (mobile / tablette)
     ========================================================= */
.breadcrumb-trail {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0.5rem 0;
    background: #f7f7f7;
    border-bottom: 1px solid #e5e7eb; /* équivalent bg-tone-flat-neutral / border-b */

    /* Variables de couleur (texte + icônes) */
    --bc-color: #111;
    --bc-icon-filter: none;

    color: var(--bc-color);
  }
/* Ligne de crumbs : une seule ligne + scroll horizontal si trop long */
.bc {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;       /* une seule ligne */
    gap: 0.25rem;
    margin-left: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;   /* Firefox */
    -ms-overflow-style: none;
  }
.bc::-webkit-scrollbar {   /* Chrome/Safari */
    display: none;
  }
.bc-item {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--bc-color);
    flex: 0 0 auto;  
  }
/* Lien "home" : largeur fixe + pas de shrink */
.bc-item .bc-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;        /* ≃ largeur de l’icône */
  }
/* Icône home */
.bc-item .bc-home img {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    filter: var(--bc-icon-filter);
     flex-shrink: 0;
    
  }
/* Séparateur (flèche) */
.bc-item .bc-sep {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 0.35rem;
    opacity: 0.6;
    filter: var(--bc-icon-filter);
  }
/* Liens : ancêtres soulignés, courant en gras */
.breadcrumb-trail a {
    text-decoration: none;
    color: inherit;
  }
.breadcrumb-trail .bc-item a:not(.bc-home) {
    text-decoration: underline;
  }
.breadcrumb-trail [aria-current="page"] {
    font-weight: 600;
  }
/* =========================================================
     DESKTOP : breadcrumb superposé au Hero
     ========================================================= */
@media (min-width: 1024px) {
    body.has-hero .breadcrumb-trail {
      position: absolute;
      z-index: 20;
      top: 14px;
      left: 0;
      right: 0;
      padding-top: 0;
      background: transparent;    /* on laisse voir le hero dessous */
      border-bottom-width: 0;     /* pas de ligne sous le fil d’Ariane au-dessus du hero */
    }

    /* On redonne un léger offset gauche comme avant */
    .breadcrumb-trail .bc {
      margin-left: 2rem;
      overflow: visible;
      white-space: normal;
    }

    /* Hero “tone = light” → texte blanc + icônes inversées */
    body.has-hero.hero-tone-light .breadcrumb-trail {
      --bc-color: #ffffff;
      --bc-icon-filter: invert(1) brightness(1.1);
    }

    /* Hero “tone = dark” → texte sombre + icônes normales */
    body.has-hero.hero-tone-dark .breadcrumb-trail {
      --bc-color: #111111;
      --bc-icon-filter: none;
    }
  }
/* --------------------------------------------------------
     Zone de contenu riche (rendu des blocks / WYSIWYG)
     -------------------------------------------------------- */
.entry-content,
  .entry-content .wp-block-group,
  .entry-content .wp-block-columns,
  .wp-block-post-content {
    /* rien ici pour l’instant : on cible les éléments enfants */
  }
/* Listes rétablies uniquement dans le contenu */
.entry-content ul,
  .wp-block-post-content ul,
  .entry-content .wp-block-list ul {
    list-style: disc;
    padding-left: 1.25rem;   /* ≈ 20px */
    margin: 0 0 1rem 0;
  }
.entry-content ol,
  .wp-block-post-content ol,
  .entry-content .wp-block-list ol {
    list-style: decimal;
    padding-left: 1.25rem;
    margin: 0 0 1rem 0;
  }
/* Espacement des items */
.entry-content li {
    margin: 0 0 .5rem 0;
  }
.entry-content li:last-child {
    margin-bottom: 0;
  }
/* Niveaux imbriqués : styles alternés pour lisibilité */
.entry-content ul ul { list-style: circle;   margin-top: .25rem; }
.entry-content ul ul ul { list-style: square; }
.entry-content ol ol { list-style: lower-alpha; margin-top: .25rem; }
.entry-content ol ol ol { list-style: lower-roman; }
/* Variantes utilitaires (au cas où tu veux neutraliser ponctuellement) */
.entry-content .list-none,
  .entry-content .no-bullets {
    list-style: none !important;
    padding-left: 0 !important;
  }
.entry-content .list-inside {
    padding-left: 0 !important;
  }
/* Alignements hérités de Gutenberg */
.entry-content .has-text-align-center { text-align: center; }
.entry-content .has-text-align-left   { text-align: left; }
.entry-content .has-text-align-right  { text-align: right; }
/* --------------------------------------------------------
     Titres par défaut (compat Gutenberg/Timber)
     -------------------------------------------------------- */
h1.wp-block-heading,
  h2.wp-block-heading,
  .wp-block-heading {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
}
@media (min-width: 768px) {
  h1.wp-block-heading,
  h2.wp-block-heading,
  .wp-block-heading {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}
h1.wp-block-heading,
  h2.wp-block-heading,
  .wp-block-heading {
    font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
                 "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.15;
    margin: 6rem 1rem 6rem;
  }
.wp-block-heading.has-text-align-center {
  text-align: center;
}
.wp-block-heading.has-text-align-left {
  text-align: left;
}
.wp-block-heading.has-text-align-right {
  text-align: right;
}
.wp-block-heading {
  font-weight: 600;
}
/* ------------------------------------------------------------
     0) Base (section)
     ------------------------------------------------------------ */
.hero_section {
    position: relative;
    isolation: isolate;            /* empêche les fuites de blur */
    overflow: hidden;              /* masque le média et l’overlay */
  }
/* ------------------------------------------------------------
     1) Panneau "glass" : blur + teinte, biseau par skew du parent
     ------------------------------------------------------------ */
.hero__glass{
    position: absolute;
    inset: 0 auto 0 0;             /* top/right/bottom/left */
    z-index: 10;
    width: 100%;
    pointer-events: none;

    /* coins : on garde l’arrondi uniquement à gauche */
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    /* le parent est celui qui “biseaute” ; on clippe après transform */
    overflow: hidden;
    transform-origin: left center;
    transform: skewX(var(--skew-deg, 0deg));
    will-change: transform;

    /* overscan pour éviter tout micro-triangle dans les coins arrondis */
    --overscanY: 60px;   /* vertical  (32–48px selon besoins) */
    --overscanX: 60px;   /* horizontal (côté gauche) */
    top:    calc(-1 * var(--overscanY));
    bottom: calc(-1 * var(--overscanY));
    left:   calc(-1 * var(--overscanX));
  }
/* Surface “réelle” (on ne contre-skew pas) */
.hero__glass .glass-surface{
    position: absolute;
    inset: 0;
    transform: none;               /* ⚠️ pas de contre-skew ici */
    transform-origin: initial;
    will-change: transform;
  }
/* Blur + teinte.
     On “saigne” à gauche/droite + overscan vertical pour tuer les halos. */
.hero__glass .glass-surface::before{
    content: "";
    position: absolute;

    /* overscan vertical */
    top:    calc(-1 * var(--overscanY));
    bottom: calc(-1 * var(--overscanY));

    /* bleed horizontal (dépend de la taille du biseau) */
    left:  calc(-1 * max(80px, var(--bleed, 48px)));
    right: calc(-1 * max(80px, var(--bleed, 48px)));

    backdrop-filter: blur(var(--glass-blur, 12px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 12px));
    background: rgba(var(--rgb, 33,33,33), var(--alpha, .6));
  }
/* Desktop : largeur contrôlée par --glass-w + on compense l’overscan X */
@media (min-width: 768px){
    .hero__glass{
      width: calc(var(--glass-w, 56%) + var(--overscanX));
      contain: paint;              /* stabilise le rendu du blur (WebKit) */
      transform: skewX(var(--skew-deg, 0deg));
    }
  }
/* Mobile : panneau rectangulaire simple (pas de biseau) */
@media (max-width: 767.98px){
    .hero__glass{
      transform: none;
      width: 100%;
      left: 0;                     /* pas d’overscan côté gauche en mobile */
    }
  }
/* ------------------------------------------------------------
     2) Contenu du hero (titre, texte, CTAs)
     - Contrainte logique : ne pas dépasser la largeur du panneau
     ------------------------------------------------------------ */
.hero__content{
    /* le wrapper `.hero_section` reçoit `--glass-w` via Twig quand blur actif */
    --content-gutter: clamp(12px, 2vw, 24px);

    /* max entre 48rem et la largeur du panneau – un petit gutter */
    max-width: min(
      calc(var(--glass-w, 56%) - var(--content-gutter)),
      48rem
    );
  }
@media (max-width: 767.98px){
    .hero__content{
      max-width: none; /* mobile : pleine largeur */
    }
  }
/* ------------------------------------------------------------
     3) Bouton play vidéo (optionnel, pour l’accessibilité)
     ------------------------------------------------------------ */
.hero-play-btn{
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
/* ------------------------------------------------------------
     4) (Optionnel) liseré interne pour mieux séparer le biseau
     Décommente si besoin d’un peu plus de contraste sur fonds clairs.
     ------------------------------------------------------------ */
/*
  .hero__glass::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(to right,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.03) 60%,
      rgba(0,0,0,0.00) 100%);
  }
  */
/* Contraindre le badge à 160px de large (version robuste) */
.b2 .b2-badge-wrap{ width:160px; flex-shrink:0; }
.b2 .b2-badge-img{ display:block; width:100%; height:auto; max-width:none; }
/* Logo: limite souple (si besoin) */
.b2 .b2-logo{ max-width:340px; height:auto; }
/* Optionnel: peaufiner les espaces */
.block_2col .b2-badge{ row-gap:.5rem; }
.spotlight img{ display:block; }
/* variantes de fond si tu préfères des classes plutôt que le style inline */
.spotlight--gray{ background-color:#f7f7f7; }
.spotlight--dark{ background: #0f172a; color:#fff; }
.spotlight--teal {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)); background: linear-gradient(135deg,#157a6e 0%,#23a09c 100%);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-px {
  inset: 1px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-6 {
  top: 1.5rem;
  bottom: 1.5rem;
}
.-top-1 {
  top: -0.25rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-0 {
  left: 0px;
}
.right-0 {
  right: 0px;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-6 {
  right: 1.5rem;
}
.top-0 {
  top: 0px;
}
.top-3 {
  top: 0.75rem;
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-\[1000\] {
  z-index: 1000;
}
.z-\[1200\] {
  z-index: 1200;
}
.z-\[9999\] {
  z-index: 9999;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-first {
  order: -9999;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-10 {
  grid-column: span 10 / span 10;
}
.col-span-11 {
  grid-column: span 11 / span 11;
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-span-7 {
  grid-column: span 7 / span 7;
}
.col-span-8 {
  grid-column: span 8 / span 8;
}
.col-span-9 {
  grid-column: span 9 / span 9;
}
.m-0 {
  margin: 0px;
}
.m-1 {
  margin: 0.25rem;
}
.m-10 {
  margin: 2.5rem;
}
.m-12 {
  margin: 3rem;
}
.m-16 {
  margin: 4rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-20 {
  margin: 5rem;
}
.m-24 {
  margin: 6rem;
}
.m-28 {
  margin: 7rem;
}
.m-3 {
  margin: 0.75rem;
}
.m-32 {
  margin: 8rem;
}
.m-36 {
  margin: 9rem;
}
.m-4 {
  margin: 1rem;
}
.m-40 {
  margin: 10rem;
}
.m-5 {
  margin: 1.25rem;
}
.m-6 {
  margin: 1.5rem;
}
.m-8 {
  margin: 2rem;
}
.m-auto {
  margin: auto;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-10 {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}
.mx-12 {
  margin-left: 3rem;
  margin-right: 3rem;
}
.mx-16 {
  margin-left: 4rem;
  margin-right: 4rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-20 {
  margin-left: 5rem;
  margin-right: 5rem;
}
.mx-24 {
  margin-left: 6rem;
  margin-right: 6rem;
}
.mx-28 {
  margin-left: 7rem;
  margin-right: 7rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-32 {
  margin-left: 8rem;
  margin-right: 8rem;
}
.mx-36 {
  margin-left: 9rem;
  margin-right: 9rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-40 {
  margin-left: 10rem;
  margin-right: 10rem;
}
.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-16 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-20 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.my-24 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.my-28 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-32 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}
.my-36 {
  margin-top: 9rem;
  margin-bottom: 9rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-40 {
  margin-top: 10rem;
  margin-bottom: 10rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.-mt-6 {
  margin-top: -1.5rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-20 {
  margin-bottom: 5rem;
}
.mb-24 {
  margin-bottom: 6rem;
}
.mb-28 {
  margin-bottom: 7rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-32 {
  margin-bottom: 8rem;
}
.mb-36 {
  margin-bottom: 9rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-40 {
  margin-bottom: 10rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-0 {
  margin-left: 0px;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-10 {
  margin-left: 2.5rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-16 {
  margin-left: 4rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-20 {
  margin-left: 5rem;
}
.ml-24 {
  margin-left: 6rem;
}
.ml-28 {
  margin-left: 7rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-32 {
  margin-left: 8rem;
}
.ml-36 {
  margin-left: 9rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-40 {
  margin-left: 10rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-8 {
  margin-left: 2rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-0 {
  margin-right: 0px;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-10 {
  margin-right: 2.5rem;
}
.mr-12 {
  margin-right: 3rem;
}
.mr-16 {
  margin-right: 4rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-20 {
  margin-right: 5rem;
}
.mr-24 {
  margin-right: 6rem;
}
.mr-28 {
  margin-right: 7rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-32 {
  margin-right: 8rem;
}
.mr-36 {
  margin-right: 9rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mr-40 {
  margin-right: 10rem;
}
.mr-5 {
  margin-right: 1.25rem;
}
.mr-6 {
  margin-right: 1.5rem;
}
.mr-8 {
  margin-right: 2rem;
}
.mt-0 {
  margin-top: 0px;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-28 {
  margin-top: 7rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-32 {
  margin-top: 8rem;
}
.mt-36 {
  margin-top: 9rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-40 {
  margin-top: 10rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.hidden {
  display: none;
}
.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-\[7\/5\] {
  aspect-ratio: 7/5;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-10 {
  height: 2.5rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-28 {
  height: 7rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[80px\] {
  height: 80px;
}
.h-\[calc\(100\%-4rem\)\] {
  height: calc(100% - 4rem);
}
.h-\[min\(152px\2c 40cqw\)\] {
  height: min(152px,40cqw);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.max-h-12 {
  max-height: 3rem;
}
.max-h-\[120px\] {
  max-height: 120px;
}
.max-h-\[550px\] {
  max-height: 550px;
}
.max-h-full {
  max-height: 100%;
}
.min-h-\[360px\] {
  min-height: 360px;
}
.min-h-\[48px\] {
  min-height: 48px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[72px\] {
  min-height: 72px;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/5 {
  width: 80%;
}
.w-40 {
  width: 10rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-\[160px\] {
  width: 160px;
}
.w-\[var\(--tile-small-w\)\] {
  width: var(--tile-small-w);
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[340px\] {
  max-width: 340px;
}
.max-w-\[350px\] {
  max-width: 350px;
}
.max-w-\[40ch\] {
  max-width: 40ch;
}
.max-w-\[var\(--text-max\)\] {
  max-width: var(--text-max);
}
.max-w-full {
  max-width: 100%;
}
.max-w-none {
  max-width: none;
}
.max-w-screen-lg {
  max-width: 1024px;
}
.max-w-screen-md {
  max-width: 768px;
}
.max-w-screen-sm {
  max-width: 640px;
}
.max-w-screen-xl {
  max-width: 1280px;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-none {
  flex: none;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.basis-1\/2 {
  flex-basis: 50%;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.list-inside {
  list-style-position: inside;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-16 {
  gap: 4rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-10 {
  row-gap: 2.5rem;
}
.gap-y-12 {
  row-gap: 3rem;
}
.gap-y-16 {
  row-gap: 4rem;
}
.gap-y-20 {
  row-gap: 5rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}
.divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(249 250 251 / var(--tw-divide-opacity, 1));
}
.place-self-center {
  place-self: center;
}
.self-start {
  align-self: flex-start;
}
.justify-self-start {
  justify-self: start;
}
.justify-self-end {
  justify-self: end;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-y-auto {
  overflow-y: auto;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[2rem\] {
  border-radius: 2rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-neutral-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
}
.border-neutral-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-l-\[\#0080A2\] {
  --tw-border-opacity: 1;
  border-left-color: rgb(0 128 162 / var(--tw-border-opacity, 1));
}
.bg-\[\#0080A2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 128 162 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0f172a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D02F35\] {
  --tw-bg-opacity: 1;
  background-color: rgb(208 47 53 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f7f7f7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 247 / var(--tw-bg-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-neutral-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-neutral-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}
.bg-neutral-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 212 / var(--tw-bg-opacity, 1));
}
.bg-neutral-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(163 163 163 / var(--tw-bg-opacity, 1));
}
.bg-neutral-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-neutral-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
}
.bg-neutral-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
}
.bg-neutral-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
}
.bg-neutral-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}
.bg-neutral-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.bg-teal-500\/10 {
  background-color: rgb(20 184 166 / 0.1);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-black\/70 {
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/40 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-16 {
  padding: 4rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-20 {
  padding: 5rem;
}
.p-24 {
  padding: 6rem;
}
.p-28 {
  padding: 7rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-32 {
  padding: 8rem;
}
.p-36 {
  padding: 9rem;
}
.p-4 {
  padding: 1rem;
}
.p-40 {
  padding: 10rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-20 {
  padding-left: 5rem;
  padding-right: 5rem;
}
.px-24 {
  padding-left: 6rem;
  padding-right: 6rem;
}
.px-28 {
  padding-left: 7rem;
  padding-right: 7rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-32 {
  padding-left: 8rem;
  padding-right: 8rem;
}
.px-36 {
  padding-left: 9rem;
  padding-right: 9rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-40 {
  padding-left: 10rem;
  padding-right: 10rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-9 {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-28 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-32 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.py-36 {
  padding-top: 9rem;
  padding-bottom: 9rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-40 {
  padding-top: 10rem;
  padding-bottom: 10rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-28 {
  padding-bottom: 7rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-32 {
  padding-bottom: 8rem;
}
.pb-36 {
  padding-bottom: 9rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-40 {
  padding-bottom: 10rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-0 {
  padding-left: 0px;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-16 {
  padding-left: 4rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-20 {
  padding-left: 5rem;
}
.pl-24 {
  padding-left: 6rem;
}
.pl-28 {
  padding-left: 7rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-32 {
  padding-left: 8rem;
}
.pl-36 {
  padding-left: 9rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-40 {
  padding-left: 10rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-0 {
  padding-right: 0px;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-16 {
  padding-right: 4rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-20 {
  padding-right: 5rem;
}
.pr-24 {
  padding-right: 6rem;
}
.pr-28 {
  padding-right: 7rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-32 {
  padding-right: 8rem;
}
.pr-36 {
  padding-right: 9rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-40 {
  padding-right: 10rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-28 {
  padding-top: 7rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-32 {
  padding-top: 8rem;
}
.pt-36 {
  padding-top: 9rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-40 {
  padding-top: 10rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.align-top {
  vertical-align: top;
}
.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[0\.85rem\] {
  font-size: 0.85rem;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[56px\] {
  font-size: 56px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-base\/7 {
  font-size: 1rem;
  line-height: 1.75rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-lg\/8 {
  font-size: 1.125rem;
  line-height: 2rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-sm\/6 {
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-8 {
  line-height: 2rem;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-\[\#0080A2\] {
  --tw-text-opacity: 1;
  color: rgb(0 128 162 / var(--tw-text-opacity, 1));
}
.text-\[\#464646\] {
  --tw-text-opacity: 1;
  color: rgb(70 70 70 / var(--tw-text-opacity, 1));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-neutral-100 {
  --tw-text-opacity: 1;
  color: rgb(245 245 245 / var(--tw-text-opacity, 1));
}
.text-neutral-200 {
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity, 1));
}
.text-neutral-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 212 / var(--tw-text-opacity, 1));
}
.text-neutral-400 {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.text-neutral-500 {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}
.text-neutral-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}
.text-neutral-700 {
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
}
.text-neutral-800 {
  --tw-text-opacity: 1;
  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
}
.text-neutral-900 {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-teal-300 {
  --tw-text-opacity: 1;
  color: rgb(94 234 212 / var(--tw-text-opacity, 1));
}
.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.opacity-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-95 {
  opacity: 0.95;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_0_1px_rgba\(148\2c 163\2c 184\2c 0\.45\)\] {
  --tw-shadow: inset 0 0 0 1px rgba(148,163,184,0.45);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-black\/10 {
  --tw-shadow-color: rgb(0 0 0 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline {
  outline-style: solid;
}
.outline-1 {
  outline-width: 1px;
}
.-outline-offset-1 {
  outline-offset: -1px;
}
.outline-black\/10 {
  outline-color: rgb(0 0 0 / 0.1);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-gray-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
}
.ring-gray-900\/10 {
  --tw-ring-color: rgb(17 24 39 / 0.1);
}
.ring-slate-200\/70 {
  --tw-ring-color: rgb(226 232 240 / 0.7);
}
.ring-slate-200\/80 {
  --tw-ring-color: rgb(226 232 240 / 0.8);
}
.ring-teal-200\/80 {
  --tw-ring-color: rgb(153 246 228 / 0.8);
}
.ring-teal-300\/80 {
  --tw-ring-color: rgb(94 234 212 / 0.8);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.bg-tone-flat-neutral {
    background-color: #f7f7f7;
  }
/* Épaisseur du halo */
.halo-none { --cta-halo: 0px; }
.halo-xs   { --cta-halo: 2px; }
.halo-sm   { --cta-halo: 4px; }
.halo-md   { --cta-halo: 6px; }
/* défaut */
.halo-lg   { --cta-halo: 8px; }
/* si besoin plus “hero” */
/* Intensité (alpha) du halo & de l’outline */
.halo-light  { --cta-halo-alpha: 18%; }
/* ↑ un peu plus présent qu’avant */
.halo-soft   { --cta-halo-alpha: 22%; }
.halo-std    { --cta-halo-alpha: 25%; }
/* défaut */
.outline-light { --cta-outline-alpha: 20%; }
.outline-std   { --cta-outline-alpha: 25%; }
/* défaut */
/* ===== Design tokens – tons de marque ===== */
.tone-teal  { --cta-from:#0080A2; --cta-to:#002F3C; }
.tone-red   { --cta-from:#D02F35; --cta-to:#891418; }
.tone-amber { --cta-from:#FCC000; --cta-to:#F49206; }
/* Dégradé neutre blanc→gris clair pour hover sur boutons « outline blanc » */
.tone-neutral { --cta-from:#FFFFFF; --cta-to:#E6E6E6; }
/* Presets d’encre au hover/focus (choisis-en un par bouton) */
.ink-white { --cta-ink:#ffffff; }
.ink-dark  { --cta-ink:#111827; }
.ink-red   { --cta-ink:#D02F35; }
/* ton rouge brand */
.ink-teal  { --cta-ink:#0080A2; }
/* si besoin plus tard */
/* ===== Utilitaires réutilisables avec les tons ===== */
.bg-gradient-brand {
    background-image: linear-gradient(to bottom right, var(--cta-from), var(--cta-to));
  }
.text-gradient-brand {
    background-image: linear-gradient(to right, var(--cta-from), var(--cta-to));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
/* Optionnel : "glass" conservé */
.theme-glass {
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.3);
  background-color: rgb(255 255 255 / 0.1);
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
/* (Option) prépare un fin halo teinté */
.ring-brand {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--cta-from) 25%, transparent);
  }
/*OLD ONES A supprimer ensuite*/
.mega-panel {
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* Gradients / thèmes */
.theme-teal { background: linear-gradient(135deg,#157a6e 0%,#23a09c 100%); }
.theme-blue { background: linear-gradient(135deg,#0b5cab 0%,#3aa0ff 100%); }
.theme-primary { background: linear-gradient(135deg,#0f172a 0%,#334155 100%); }
.theme-gradient-01 { background: linear-gradient(135deg,#1d976c 0%,#93f9b9 100%); }
.theme-gradient-02 { background: linear-gradient(135deg,#4776e6 0%,#8e54e9 100%); }
.theme-glass {
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.3);
  background-color: rgb(255 255 255 / 0.1);
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-teal-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(20 184 166 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#00718f\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 113 143 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#b1282d\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(177 40 45 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black\/75:hover {
  background-color: rgb(0 0 0 / 0.75);
}
.hover\:bg-neutral-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
}
.hover\:text-teal-700:hover {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-indigo-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.focus\:ring-white\/60:focus {
  --tw-ring-color: rgb(255 255 255 / 0.6);
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:outline:focus-visible {
  outline-style: solid;
}
.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}
.focus-visible\:outline-\[\#0080A2\]:focus-visible {
  outline-color: #0080A2;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-neutral-900:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(23 23 23 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-white\/70:focus-visible {
  --tw-ring-color: rgb(255 255 255 / 0.7);
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.02\] {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:bg-teal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:from-black\/80 {
  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.group:hover .group-hover\:via-black\/60 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.group:hover .group-hover\:text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-neutral-900 {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media not all and (min-width: 1024px) {
  .max-lg\:row-start-3 {
    grid-row-start: 3;
  }
  .max-lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .max-lg\:mt-12 {
    margin-top: 3rem;
  }
  .max-lg\:w-full {
    width: 100%;
  }
  .max-lg\:max-w-md {
    max-width: 28rem;
  }
  .max-lg\:max-w-xs {
    max-width: 20rem;
  }
  .max-lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .max-lg\:pb-12 {
    padding-bottom: 3rem;
  }
  .max-lg\:pt-10 {
    padding-top: 2.5rem;
  }
  .max-lg\:text-center {
    text-align: center;
  }
}
@media (min-width: 640px) {
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .sm\:col-span-10 {
    grid-column: span 10 / span 10;
  }
  .sm\:col-span-11 {
    grid-column: span 11 / span 11;
  }
  .sm\:col-span-12 {
    grid-column: span 12 / span 12;
  }
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .sm\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .sm\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .sm\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .sm\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .sm\:col-span-9 {
    grid-column: span 9 / span 9;
  }
  .sm\:m-0 {
    margin: 0px;
  }
  .sm\:m-1 {
    margin: 0.25rem;
  }
  .sm\:m-10 {
    margin: 2.5rem;
  }
  .sm\:m-12 {
    margin: 3rem;
  }
  .sm\:m-16 {
    margin: 4rem;
  }
  .sm\:m-2 {
    margin: 0.5rem;
  }
  .sm\:m-20 {
    margin: 5rem;
  }
  .sm\:m-24 {
    margin: 6rem;
  }
  .sm\:m-28 {
    margin: 7rem;
  }
  .sm\:m-3 {
    margin: 0.75rem;
  }
  .sm\:m-32 {
    margin: 8rem;
  }
  .sm\:m-36 {
    margin: 9rem;
  }
  .sm\:m-4 {
    margin: 1rem;
  }
  .sm\:m-40 {
    margin: 10rem;
  }
  .sm\:m-5 {
    margin: 1.25rem;
  }
  .sm\:m-6 {
    margin: 1.5rem;
  }
  .sm\:m-8 {
    margin: 2rem;
  }
  .sm\:-mx-8 {
    margin-left: -2rem;
    margin-right: -2rem;
  }
  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .sm\:mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  .sm\:mx-10 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
  .sm\:mx-12 {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .sm\:mx-16 {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .sm\:mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .sm\:mx-20 {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .sm\:mx-24 {
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .sm\:mx-28 {
    margin-left: 7rem;
    margin-right: 7rem;
  }
  .sm\:mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
  .sm\:mx-32 {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .sm\:mx-36 {
    margin-left: 9rem;
    margin-right: 9rem;
  }
  .sm\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .sm\:mx-40 {
    margin-left: 10rem;
    margin-right: 10rem;
  }
  .sm\:mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .sm\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  .sm\:mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .sm\:my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .sm\:my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .sm\:my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .sm\:my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .sm\:my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .sm\:my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .sm\:my-20 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .sm\:my-24 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .sm\:my-28 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }
  .sm\:my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .sm\:my-32 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .sm\:my-36 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
  .sm\:my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .sm\:my-40 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  .sm\:my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .sm\:my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .sm\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .sm\:mb-0 {
    margin-bottom: 0px;
  }
  .sm\:mb-1 {
    margin-bottom: 0.25rem;
  }
  .sm\:mb-10 {
    margin-bottom: 2.5rem;
  }
  .sm\:mb-12 {
    margin-bottom: 3rem;
  }
  .sm\:mb-16 {
    margin-bottom: 4rem;
  }
  .sm\:mb-2 {
    margin-bottom: 0.5rem;
  }
  .sm\:mb-20 {
    margin-bottom: 5rem;
  }
  .sm\:mb-24 {
    margin-bottom: 6rem;
  }
  .sm\:mb-28 {
    margin-bottom: 7rem;
  }
  .sm\:mb-3 {
    margin-bottom: 0.75rem;
  }
  .sm\:mb-32 {
    margin-bottom: 8rem;
  }
  .sm\:mb-36 {
    margin-bottom: 9rem;
  }
  .sm\:mb-4 {
    margin-bottom: 1rem;
  }
  .sm\:mb-40 {
    margin-bottom: 10rem;
  }
  .sm\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }
  .sm\:mb-8 {
    margin-bottom: 2rem;
  }
  .sm\:ml-0 {
    margin-left: 0px;
  }
  .sm\:ml-1 {
    margin-left: 0.25rem;
  }
  .sm\:ml-10 {
    margin-left: 2.5rem;
  }
  .sm\:ml-12 {
    margin-left: 3rem;
  }
  .sm\:ml-16 {
    margin-left: 4rem;
  }
  .sm\:ml-2 {
    margin-left: 0.5rem;
  }
  .sm\:ml-20 {
    margin-left: 5rem;
  }
  .sm\:ml-24 {
    margin-left: 6rem;
  }
  .sm\:ml-28 {
    margin-left: 7rem;
  }
  .sm\:ml-3 {
    margin-left: 0.75rem;
  }
  .sm\:ml-32 {
    margin-left: 8rem;
  }
  .sm\:ml-36 {
    margin-left: 9rem;
  }
  .sm\:ml-4 {
    margin-left: 1rem;
  }
  .sm\:ml-40 {
    margin-left: 10rem;
  }
  .sm\:ml-5 {
    margin-left: 1.25rem;
  }
  .sm\:ml-6 {
    margin-left: 1.5rem;
  }
  .sm\:ml-8 {
    margin-left: 2rem;
  }
  .sm\:mr-0 {
    margin-right: 0px;
  }
  .sm\:mr-1 {
    margin-right: 0.25rem;
  }
  .sm\:mr-10 {
    margin-right: 2.5rem;
  }
  .sm\:mr-12 {
    margin-right: 3rem;
  }
  .sm\:mr-16 {
    margin-right: 4rem;
  }
  .sm\:mr-2 {
    margin-right: 0.5rem;
  }
  .sm\:mr-20 {
    margin-right: 5rem;
  }
  .sm\:mr-24 {
    margin-right: 6rem;
  }
  .sm\:mr-28 {
    margin-right: 7rem;
  }
  .sm\:mr-3 {
    margin-right: 0.75rem;
  }
  .sm\:mr-32 {
    margin-right: 8rem;
  }
  .sm\:mr-36 {
    margin-right: 9rem;
  }
  .sm\:mr-4 {
    margin-right: 1rem;
  }
  .sm\:mr-40 {
    margin-right: 10rem;
  }
  .sm\:mr-5 {
    margin-right: 1.25rem;
  }
  .sm\:mr-6 {
    margin-right: 1.5rem;
  }
  .sm\:mr-8 {
    margin-right: 2rem;
  }
  .sm\:mt-0 {
    margin-top: 0px;
  }
  .sm\:mt-1 {
    margin-top: 0.25rem;
  }
  .sm\:mt-10 {
    margin-top: 2.5rem;
  }
  .sm\:mt-12 {
    margin-top: 3rem;
  }
  .sm\:mt-16 {
    margin-top: 4rem;
  }
  .sm\:mt-2 {
    margin-top: 0.5rem;
  }
  .sm\:mt-20 {
    margin-top: 5rem;
  }
  .sm\:mt-24 {
    margin-top: 6rem;
  }
  .sm\:mt-28 {
    margin-top: 7rem;
  }
  .sm\:mt-3 {
    margin-top: 0.75rem;
  }
  .sm\:mt-32 {
    margin-top: 8rem;
  }
  .sm\:mt-36 {
    margin-top: 9rem;
  }
  .sm\:mt-4 {
    margin-top: 1rem;
  }
  .sm\:mt-40 {
    margin-top: 10rem;
  }
  .sm\:mt-5 {
    margin-top: 1.25rem;
  }
  .sm\:mt-6 {
    margin-top: 1.5rem;
  }
  .sm\:mt-8 {
    margin-top: 2rem;
  }
  .sm\:grid {
    display: grid;
  }
  .sm\:inline-grid {
    display: inline-grid;
  }
  .sm\:h-80 {
    height: 20rem;
  }
  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sm\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .sm\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .sm\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .sm\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .sm\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .sm\:gap-6 {
    gap: 1.5rem;
  }
  .sm\:gap-y-14 {
    row-gap: 3.5rem;
  }
  .sm\:p-0 {
    padding: 0px;
  }
  .sm\:p-1 {
    padding: 0.25rem;
  }
  .sm\:p-10 {
    padding: 2.5rem;
  }
  .sm\:p-12 {
    padding: 3rem;
  }
  .sm\:p-16 {
    padding: 4rem;
  }
  .sm\:p-2 {
    padding: 0.5rem;
  }
  .sm\:p-20 {
    padding: 5rem;
  }
  .sm\:p-24 {
    padding: 6rem;
  }
  .sm\:p-28 {
    padding: 7rem;
  }
  .sm\:p-3 {
    padding: 0.75rem;
  }
  .sm\:p-32 {
    padding: 8rem;
  }
  .sm\:p-36 {
    padding: 9rem;
  }
  .sm\:p-4 {
    padding: 1rem;
  }
  .sm\:p-40 {
    padding: 10rem;
  }
  .sm\:p-5 {
    padding: 1.25rem;
  }
  .sm\:p-6 {
    padding: 1.5rem;
  }
  .sm\:p-8 {
    padding: 2rem;
  }
  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .sm\:px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .sm\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .sm\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .sm\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .sm\:px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .sm\:px-28 {
    padding-left: 7rem;
    padding-right: 7rem;
  }
  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .sm\:px-32 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .sm\:px-36 {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sm\:px-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .sm\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .sm\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .sm\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .sm\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .sm\:py-36 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .sm\:py-40 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .sm\:pb-0 {
    padding-bottom: 0px;
  }
  .sm\:pb-1 {
    padding-bottom: 0.25rem;
  }
  .sm\:pb-10 {
    padding-bottom: 2.5rem;
  }
  .sm\:pb-12 {
    padding-bottom: 3rem;
  }
  .sm\:pb-16 {
    padding-bottom: 4rem;
  }
  .sm\:pb-2 {
    padding-bottom: 0.5rem;
  }
  .sm\:pb-20 {
    padding-bottom: 5rem;
  }
  .sm\:pb-24 {
    padding-bottom: 6rem;
  }
  .sm\:pb-28 {
    padding-bottom: 7rem;
  }
  .sm\:pb-3 {
    padding-bottom: 0.75rem;
  }
  .sm\:pb-32 {
    padding-bottom: 8rem;
  }
  .sm\:pb-36 {
    padding-bottom: 9rem;
  }
  .sm\:pb-4 {
    padding-bottom: 1rem;
  }
  .sm\:pb-40 {
    padding-bottom: 10rem;
  }
  .sm\:pb-5 {
    padding-bottom: 1.25rem;
  }
  .sm\:pb-6 {
    padding-bottom: 1.5rem;
  }
  .sm\:pb-8 {
    padding-bottom: 2rem;
  }
  .sm\:pl-0 {
    padding-left: 0px;
  }
  .sm\:pl-1 {
    padding-left: 0.25rem;
  }
  .sm\:pl-10 {
    padding-left: 2.5rem;
  }
  .sm\:pl-12 {
    padding-left: 3rem;
  }
  .sm\:pl-16 {
    padding-left: 4rem;
  }
  .sm\:pl-2 {
    padding-left: 0.5rem;
  }
  .sm\:pl-20 {
    padding-left: 5rem;
  }
  .sm\:pl-24 {
    padding-left: 6rem;
  }
  .sm\:pl-28 {
    padding-left: 7rem;
  }
  .sm\:pl-3 {
    padding-left: 0.75rem;
  }
  .sm\:pl-32 {
    padding-left: 8rem;
  }
  .sm\:pl-36 {
    padding-left: 9rem;
  }
  .sm\:pl-4 {
    padding-left: 1rem;
  }
  .sm\:pl-40 {
    padding-left: 10rem;
  }
  .sm\:pl-5 {
    padding-left: 1.25rem;
  }
  .sm\:pl-6 {
    padding-left: 1.5rem;
  }
  .sm\:pl-8 {
    padding-left: 2rem;
  }
  .sm\:pr-0 {
    padding-right: 0px;
  }
  .sm\:pr-1 {
    padding-right: 0.25rem;
  }
  .sm\:pr-10 {
    padding-right: 2.5rem;
  }
  .sm\:pr-12 {
    padding-right: 3rem;
  }
  .sm\:pr-16 {
    padding-right: 4rem;
  }
  .sm\:pr-2 {
    padding-right: 0.5rem;
  }
  .sm\:pr-20 {
    padding-right: 5rem;
  }
  .sm\:pr-24 {
    padding-right: 6rem;
  }
  .sm\:pr-28 {
    padding-right: 7rem;
  }
  .sm\:pr-3 {
    padding-right: 0.75rem;
  }
  .sm\:pr-32 {
    padding-right: 8rem;
  }
  .sm\:pr-36 {
    padding-right: 9rem;
  }
  .sm\:pr-4 {
    padding-right: 1rem;
  }
  .sm\:pr-40 {
    padding-right: 10rem;
  }
  .sm\:pr-5 {
    padding-right: 1.25rem;
  }
  .sm\:pr-6 {
    padding-right: 1.5rem;
  }
  .sm\:pr-8 {
    padding-right: 2rem;
  }
  .sm\:pt-0 {
    padding-top: 0px;
  }
  .sm\:pt-1 {
    padding-top: 0.25rem;
  }
  .sm\:pt-10 {
    padding-top: 2.5rem;
  }
  .sm\:pt-12 {
    padding-top: 3rem;
  }
  .sm\:pt-16 {
    padding-top: 4rem;
  }
  .sm\:pt-2 {
    padding-top: 0.5rem;
  }
  .sm\:pt-20 {
    padding-top: 5rem;
  }
  .sm\:pt-24 {
    padding-top: 6rem;
  }
  .sm\:pt-28 {
    padding-top: 7rem;
  }
  .sm\:pt-3 {
    padding-top: 0.75rem;
  }
  .sm\:pt-32 {
    padding-top: 8rem;
  }
  .sm\:pt-36 {
    padding-top: 9rem;
  }
  .sm\:pt-4 {
    padding-top: 1rem;
  }
  .sm\:pt-40 {
    padding-top: 10rem;
  }
  .sm\:pt-5 {
    padding-top: 1.25rem;
  }
  .sm\:pt-6 {
    padding-top: 1.5rem;
  }
  .sm\:pt-8 {
    padding-top: 2rem;
  }
  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 768px) {
  .md\:inset-y-8 {
    top: 2rem;
    bottom: 2rem;
  }
  .md\:order-1 {
    order: 1;
  }
  .md\:order-2 {
    order: 2;
  }
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .md\:col-span-10 {
    grid-column: span 10 / span 10;
  }
  .md\:col-span-11 {
    grid-column: span 11 / span 11;
  }
  .md\:col-span-12 {
    grid-column: span 12 / span 12;
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .md\:col-span-9 {
    grid-column: span 9 / span 9;
  }
  .md\:col-start-2 {
    grid-column-start: 2;
  }
  .md\:col-start-3 {
    grid-column-start: 3;
  }
  .md\:col-end-3 {
    grid-column-end: 3;
  }
  .md\:col-end-4 {
    grid-column-end: 4;
  }
  .md\:m-0 {
    margin: 0px;
  }
  .md\:m-1 {
    margin: 0.25rem;
  }
  .md\:m-10 {
    margin: 2.5rem;
  }
  .md\:m-12 {
    margin: 3rem;
  }
  .md\:m-16 {
    margin: 4rem;
  }
  .md\:m-2 {
    margin: 0.5rem;
  }
  .md\:m-20 {
    margin: 5rem;
  }
  .md\:m-24 {
    margin: 6rem;
  }
  .md\:m-28 {
    margin: 7rem;
  }
  .md\:m-3 {
    margin: 0.75rem;
  }
  .md\:m-32 {
    margin: 8rem;
  }
  .md\:m-36 {
    margin: 9rem;
  }
  .md\:m-4 {
    margin: 1rem;
  }
  .md\:m-40 {
    margin: 10rem;
  }
  .md\:m-5 {
    margin: 1.25rem;
  }
  .md\:m-6 {
    margin: 1.5rem;
  }
  .md\:m-8 {
    margin: 2rem;
  }
  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .md\:mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  .md\:mx-10 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
  .md\:mx-12 {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .md\:mx-16 {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .md\:mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .md\:mx-20 {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .md\:mx-24 {
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .md\:mx-28 {
    margin-left: 7rem;
    margin-right: 7rem;
  }
  .md\:mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
  .md\:mx-32 {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .md\:mx-36 {
    margin-left: 9rem;
    margin-right: 9rem;
  }
  .md\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .md\:mx-40 {
    margin-left: 10rem;
    margin-right: 10rem;
  }
  .md\:mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .md\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  .md\:mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .md\:my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .md\:my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .md\:my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .md\:my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .md\:my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .md\:my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .md\:my-20 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .md\:my-24 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .md\:my-28 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }
  .md\:my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .md\:my-32 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .md\:my-36 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
  .md\:my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .md\:my-40 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  .md\:my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .md\:my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .md\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .md\:-ml-10 {
    margin-left: -2.5rem;
  }
  .md\:-ml-\[80\%\] {
    margin-left: -80%;
  }
  .md\:-mr-10 {
    margin-right: -2.5rem;
  }
  .md\:-mr-\[80\%\] {
    margin-right: -80%;
  }
  .md\:mb-0 {
    margin-bottom: 0px;
  }
  .md\:mb-1 {
    margin-bottom: 0.25rem;
  }
  .md\:mb-10 {
    margin-bottom: 2.5rem;
  }
  .md\:mb-12 {
    margin-bottom: 3rem;
  }
  .md\:mb-16 {
    margin-bottom: 4rem;
  }
  .md\:mb-2 {
    margin-bottom: 0.5rem;
  }
  .md\:mb-20 {
    margin-bottom: 5rem;
  }
  .md\:mb-24 {
    margin-bottom: 6rem;
  }
  .md\:mb-28 {
    margin-bottom: 7rem;
  }
  .md\:mb-3 {
    margin-bottom: 0.75rem;
  }
  .md\:mb-32 {
    margin-bottom: 8rem;
  }
  .md\:mb-36 {
    margin-bottom: 9rem;
  }
  .md\:mb-4 {
    margin-bottom: 1rem;
  }
  .md\:mb-40 {
    margin-bottom: 10rem;
  }
  .md\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .md\:mb-6 {
    margin-bottom: 1.5rem;
  }
  .md\:mb-8 {
    margin-bottom: 2rem;
  }
  .md\:ml-0 {
    margin-left: 0px;
  }
  .md\:ml-1 {
    margin-left: 0.25rem;
  }
  .md\:ml-10 {
    margin-left: 2.5rem;
  }
  .md\:ml-12 {
    margin-left: 3rem;
  }
  .md\:ml-16 {
    margin-left: 4rem;
  }
  .md\:ml-2 {
    margin-left: 0.5rem;
  }
  .md\:ml-20 {
    margin-left: 5rem;
  }
  .md\:ml-24 {
    margin-left: 6rem;
  }
  .md\:ml-28 {
    margin-left: 7rem;
  }
  .md\:ml-3 {
    margin-left: 0.75rem;
  }
  .md\:ml-32 {
    margin-left: 8rem;
  }
  .md\:ml-36 {
    margin-left: 9rem;
  }
  .md\:ml-4 {
    margin-left: 1rem;
  }
  .md\:ml-40 {
    margin-left: 10rem;
  }
  .md\:ml-5 {
    margin-left: 1.25rem;
  }
  .md\:ml-6 {
    margin-left: 1.5rem;
  }
  .md\:ml-8 {
    margin-left: 2rem;
  }
  .md\:ml-\[160px\] {
    margin-left: 160px;
  }
  .md\:mr-0 {
    margin-right: 0px;
  }
  .md\:mr-1 {
    margin-right: 0.25rem;
  }
  .md\:mr-10 {
    margin-right: 2.5rem;
  }
  .md\:mr-12 {
    margin-right: 3rem;
  }
  .md\:mr-16 {
    margin-right: 4rem;
  }
  .md\:mr-2 {
    margin-right: 0.5rem;
  }
  .md\:mr-20 {
    margin-right: 5rem;
  }
  .md\:mr-24 {
    margin-right: 6rem;
  }
  .md\:mr-28 {
    margin-right: 7rem;
  }
  .md\:mr-3 {
    margin-right: 0.75rem;
  }
  .md\:mr-32 {
    margin-right: 8rem;
  }
  .md\:mr-36 {
    margin-right: 9rem;
  }
  .md\:mr-4 {
    margin-right: 1rem;
  }
  .md\:mr-40 {
    margin-right: 10rem;
  }
  .md\:mr-5 {
    margin-right: 1.25rem;
  }
  .md\:mr-6 {
    margin-right: 1.5rem;
  }
  .md\:mr-8 {
    margin-right: 2rem;
  }
  .md\:mr-\[160px\] {
    margin-right: 160px;
  }
  .md\:mt-0 {
    margin-top: 0px;
  }
  .md\:mt-1 {
    margin-top: 0.25rem;
  }
  .md\:mt-10 {
    margin-top: 2.5rem;
  }
  .md\:mt-12 {
    margin-top: 3rem;
  }
  .md\:mt-16 {
    margin-top: 4rem;
  }
  .md\:mt-2 {
    margin-top: 0.5rem;
  }
  .md\:mt-20 {
    margin-top: 5rem;
  }
  .md\:mt-24 {
    margin-top: 6rem;
  }
  .md\:mt-28 {
    margin-top: 7rem;
  }
  .md\:mt-3 {
    margin-top: 0.75rem;
  }
  .md\:mt-32 {
    margin-top: 8rem;
  }
  .md\:mt-36 {
    margin-top: 9rem;
  }
  .md\:mt-4 {
    margin-top: 1rem;
  }
  .md\:mt-40 {
    margin-top: 10rem;
  }
  .md\:mt-5 {
    margin-top: 1.25rem;
  }
  .md\:mt-6 {
    margin-top: 1.5rem;
  }
  .md\:mt-8 {
    margin-top: 2rem;
  }
  .md\:block {
    display: block;
  }
  .md\:grid {
    display: grid;
  }
  .md\:inline-grid {
    display: inline-grid;
  }
  .md\:h-44 {
    height: 11rem;
  }
  .md\:h-\[90px\] {
    height: 90px;
  }
  .md\:min-h-\[440px\] {
    min-height: 440px;
  }
  .md\:min-h-\[56px\] {
    min-height: 56px;
  }
  .md\:min-h-\[88px\] {
    min-height: 88px;
  }
  .md\:w-\[190px\] {
    width: 190px;
  }
  .md\:w-\[420px\] {
    width: 420px;
  }
  .md\:basis-1\/4 {
    flex-basis: 25%;
  }
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .md\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .md\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .md\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .md\:grid-cols-\[1fr_var\(--tile-right-w\)_1fr\] {
    grid-template-columns: 1fr var(--tile-right-w) 1fr;
  }
  .md\:gap-10 {
    gap: 2.5rem;
  }
  .md\:gap-12 {
    gap: 3rem;
  }
  .md\:gap-4 {
    gap: 1rem;
  }
  .md\:gap-8 {
    gap: 2rem;
  }
  .md\:space-y-24 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(6rem * var(--tw-space-y-reverse));
  }
  .md\:rounded-2xl {
    border-radius: 1rem;
  }
  .md\:rounded-3xl {
    border-radius: 1.5rem;
  }
  .md\:p-0 {
    padding: 0px;
  }
  .md\:p-1 {
    padding: 0.25rem;
  }
  .md\:p-10 {
    padding: 2.5rem;
  }
  .md\:p-12 {
    padding: 3rem;
  }
  .md\:p-16 {
    padding: 4rem;
  }
  .md\:p-2 {
    padding: 0.5rem;
  }
  .md\:p-20 {
    padding: 5rem;
  }
  .md\:p-24 {
    padding: 6rem;
  }
  .md\:p-28 {
    padding: 7rem;
  }
  .md\:p-3 {
    padding: 0.75rem;
  }
  .md\:p-32 {
    padding: 8rem;
  }
  .md\:p-36 {
    padding: 9rem;
  }
  .md\:p-4 {
    padding: 1rem;
  }
  .md\:p-40 {
    padding: 10rem;
  }
  .md\:p-5 {
    padding: 1.25rem;
  }
  .md\:p-6 {
    padding: 1.5rem;
  }
  .md\:p-8 {
    padding: 2rem;
  }
  .md\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .md\:px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .md\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .md\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .md\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .md\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .md\:px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .md\:px-28 {
    padding-left: 7rem;
    padding-right: 7rem;
  }
  .md\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .md\:px-32 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .md\:px-36 {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .md\:px-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .md\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .md\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .md\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .md\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .md\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .md\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .md\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .md\:py-36 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .md\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .md\:py-40 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .md\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .md\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .md\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .md\:pb-0 {
    padding-bottom: 0px;
  }
  .md\:pb-1 {
    padding-bottom: 0.25rem;
  }
  .md\:pb-10 {
    padding-bottom: 2.5rem;
  }
  .md\:pb-12 {
    padding-bottom: 3rem;
  }
  .md\:pb-16 {
    padding-bottom: 4rem;
  }
  .md\:pb-2 {
    padding-bottom: 0.5rem;
  }
  .md\:pb-20 {
    padding-bottom: 5rem;
  }
  .md\:pb-24 {
    padding-bottom: 6rem;
  }
  .md\:pb-28 {
    padding-bottom: 7rem;
  }
  .md\:pb-3 {
    padding-bottom: 0.75rem;
  }
  .md\:pb-32 {
    padding-bottom: 8rem;
  }
  .md\:pb-36 {
    padding-bottom: 9rem;
  }
  .md\:pb-4 {
    padding-bottom: 1rem;
  }
  .md\:pb-40 {
    padding-bottom: 10rem;
  }
  .md\:pb-5 {
    padding-bottom: 1.25rem;
  }
  .md\:pb-6 {
    padding-bottom: 1.5rem;
  }
  .md\:pb-8 {
    padding-bottom: 2rem;
  }
  .md\:pl-0 {
    padding-left: 0px;
  }
  .md\:pl-1 {
    padding-left: 0.25rem;
  }
  .md\:pl-10 {
    padding-left: 2.5rem;
  }
  .md\:pl-12 {
    padding-left: 3rem;
  }
  .md\:pl-16 {
    padding-left: 4rem;
  }
  .md\:pl-2 {
    padding-left: 0.5rem;
  }
  .md\:pl-20 {
    padding-left: 5rem;
  }
  .md\:pl-24 {
    padding-left: 6rem;
  }
  .md\:pl-28 {
    padding-left: 7rem;
  }
  .md\:pl-3 {
    padding-left: 0.75rem;
  }
  .md\:pl-32 {
    padding-left: 8rem;
  }
  .md\:pl-36 {
    padding-left: 9rem;
  }
  .md\:pl-4 {
    padding-left: 1rem;
  }
  .md\:pl-40 {
    padding-left: 10rem;
  }
  .md\:pl-5 {
    padding-left: 1.25rem;
  }
  .md\:pl-6 {
    padding-left: 1.5rem;
  }
  .md\:pl-8 {
    padding-left: 2rem;
  }
  .md\:pr-0 {
    padding-right: 0px;
  }
  .md\:pr-1 {
    padding-right: 0.25rem;
  }
  .md\:pr-10 {
    padding-right: 2.5rem;
  }
  .md\:pr-12 {
    padding-right: 3rem;
  }
  .md\:pr-16 {
    padding-right: 4rem;
  }
  .md\:pr-2 {
    padding-right: 0.5rem;
  }
  .md\:pr-20 {
    padding-right: 5rem;
  }
  .md\:pr-24 {
    padding-right: 6rem;
  }
  .md\:pr-28 {
    padding-right: 7rem;
  }
  .md\:pr-3 {
    padding-right: 0.75rem;
  }
  .md\:pr-32 {
    padding-right: 8rem;
  }
  .md\:pr-36 {
    padding-right: 9rem;
  }
  .md\:pr-4 {
    padding-right: 1rem;
  }
  .md\:pr-40 {
    padding-right: 10rem;
  }
  .md\:pr-5 {
    padding-right: 1.25rem;
  }
  .md\:pr-6 {
    padding-right: 1.5rem;
  }
  .md\:pr-8 {
    padding-right: 2rem;
  }
  .md\:pt-0 {
    padding-top: 0px;
  }
  .md\:pt-1 {
    padding-top: 0.25rem;
  }
  .md\:pt-10 {
    padding-top: 2.5rem;
  }
  .md\:pt-12 {
    padding-top: 3rem;
  }
  .md\:pt-16 {
    padding-top: 4rem;
  }
  .md\:pt-2 {
    padding-top: 0.5rem;
  }
  .md\:pt-20 {
    padding-top: 5rem;
  }
  .md\:pt-24 {
    padding-top: 6rem;
  }
  .md\:pt-28 {
    padding-top: 7rem;
  }
  .md\:pt-3 {
    padding-top: 0.75rem;
  }
  .md\:pt-32 {
    padding-top: 8rem;
  }
  .md\:pt-36 {
    padding-top: 9rem;
  }
  .md\:pt-4 {
    padding-top: 1rem;
  }
  .md\:pt-40 {
    padding-top: 10rem;
  }
  .md\:pt-5 {
    padding-top: 1.25rem;
  }
  .md\:pt-6 {
    padding-top: 1.5rem;
  }
  .md\:pt-8 {
    padding-top: 2rem;
  }
  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }
  .md\:text-\[15px\] {
    font-size: 15px;
  }
  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .md\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}
@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }
  .lg\:top-0 {
    top: 0px;
  }
  .lg\:top-\[190px\] {
    top: 190px;
  }
  .lg\:z-\[1100\] {
    z-index: 1100;
  }
  .lg\:order-1 {
    order: 1;
  }
  .lg\:order-2 {
    order: 2;
  }
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-10 {
    grid-column: span 10 / span 10;
  }
  .lg\:col-span-11 {
    grid-column: span 11 / span 11;
  }
  .lg\:col-span-12 {
    grid-column: span 12 / span 12;
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .lg\:col-span-9 {
    grid-column: span 9 / span 9;
  }
  .lg\:col-start-1 {
    grid-column-start: 1;
  }
  .lg\:col-start-2 {
    grid-column-start: 2;
  }
  .lg\:row-span-2 {
    grid-row: span 2 / span 2;
  }
  .lg\:row-start-1 {
    grid-row-start: 1;
  }
  .lg\:row-start-2 {
    grid-row-start: 2;
  }
  .lg\:m-0 {
    margin: 0px;
  }
  .lg\:m-1 {
    margin: 0.25rem;
  }
  .lg\:m-10 {
    margin: 2.5rem;
  }
  .lg\:m-12 {
    margin: 3rem;
  }
  .lg\:m-16 {
    margin: 4rem;
  }
  .lg\:m-2 {
    margin: 0.5rem;
  }
  .lg\:m-20 {
    margin: 5rem;
  }
  .lg\:m-24 {
    margin: 6rem;
  }
  .lg\:m-28 {
    margin: 7rem;
  }
  .lg\:m-3 {
    margin: 0.75rem;
  }
  .lg\:m-32 {
    margin: 8rem;
  }
  .lg\:m-36 {
    margin: 9rem;
  }
  .lg\:m-4 {
    margin: 1rem;
  }
  .lg\:m-40 {
    margin: 10rem;
  }
  .lg\:m-5 {
    margin: 1.25rem;
  }
  .lg\:m-6 {
    margin: 1.5rem;
  }
  .lg\:m-8 {
    margin: 2rem;
  }
  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .lg\:mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  .lg\:mx-10 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
  .lg\:mx-12 {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .lg\:mx-16 {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .lg\:mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .lg\:mx-20 {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .lg\:mx-24 {
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .lg\:mx-28 {
    margin-left: 7rem;
    margin-right: 7rem;
  }
  .lg\:mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
  .lg\:mx-32 {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .lg\:mx-36 {
    margin-left: 9rem;
    margin-right: 9rem;
  }
  .lg\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .lg\:mx-40 {
    margin-left: 10rem;
    margin-right: 10rem;
  }
  .lg\:mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .lg\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  .lg\:mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .lg\:my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .lg\:my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .lg\:my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .lg\:my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .lg\:my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .lg\:my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .lg\:my-20 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .lg\:my-24 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .lg\:my-28 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }
  .lg\:my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .lg\:my-32 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .lg\:my-36 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
  .lg\:my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .lg\:my-40 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  .lg\:my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .lg\:my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .lg\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .lg\:-ml-12 {
    margin-left: -3rem;
  }
  .lg\:-mr-10 {
    margin-right: -2.5rem;
  }
  .lg\:-mr-12 {
    margin-right: -3rem;
  }
  .lg\:-mt-28 {
    margin-top: -7rem;
  }
  .lg\:mb-0 {
    margin-bottom: 0px;
  }
  .lg\:mb-1 {
    margin-bottom: 0.25rem;
  }
  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }
  .lg\:mb-12 {
    margin-bottom: 3rem;
  }
  .lg\:mb-16 {
    margin-bottom: 4rem;
  }
  .lg\:mb-2 {
    margin-bottom: 0.5rem;
  }
  .lg\:mb-20 {
    margin-bottom: 5rem;
  }
  .lg\:mb-24 {
    margin-bottom: 6rem;
  }
  .lg\:mb-28 {
    margin-bottom: 7rem;
  }
  .lg\:mb-3 {
    margin-bottom: 0.75rem;
  }
  .lg\:mb-32 {
    margin-bottom: 8rem;
  }
  .lg\:mb-36 {
    margin-bottom: 9rem;
  }
  .lg\:mb-4 {
    margin-bottom: 1rem;
  }
  .lg\:mb-40 {
    margin-bottom: 10rem;
  }
  .lg\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }
  .lg\:mb-8 {
    margin-bottom: 2rem;
  }
  .lg\:ml-0 {
    margin-left: 0px;
  }
  .lg\:ml-1 {
    margin-left: 0.25rem;
  }
  .lg\:ml-10 {
    margin-left: 2.5rem;
  }
  .lg\:ml-12 {
    margin-left: 3rem;
  }
  .lg\:ml-16 {
    margin-left: 4rem;
  }
  .lg\:ml-2 {
    margin-left: 0.5rem;
  }
  .lg\:ml-20 {
    margin-left: 5rem;
  }
  .lg\:ml-24 {
    margin-left: 6rem;
  }
  .lg\:ml-28 {
    margin-left: 7rem;
  }
  .lg\:ml-3 {
    margin-left: 0.75rem;
  }
  .lg\:ml-32 {
    margin-left: 8rem;
  }
  .lg\:ml-36 {
    margin-left: 9rem;
  }
  .lg\:ml-4 {
    margin-left: 1rem;
  }
  .lg\:ml-40 {
    margin-left: 10rem;
  }
  .lg\:ml-5 {
    margin-left: 1.25rem;
  }
  .lg\:ml-6 {
    margin-left: 1.5rem;
  }
  .lg\:ml-8 {
    margin-left: 2rem;
  }
  .lg\:mr-0 {
    margin-right: 0px;
  }
  .lg\:mr-1 {
    margin-right: 0.25rem;
  }
  .lg\:mr-10 {
    margin-right: 2.5rem;
  }
  .lg\:mr-12 {
    margin-right: 3rem;
  }
  .lg\:mr-16 {
    margin-right: 4rem;
  }
  .lg\:mr-2 {
    margin-right: 0.5rem;
  }
  .lg\:mr-20 {
    margin-right: 5rem;
  }
  .lg\:mr-24 {
    margin-right: 6rem;
  }
  .lg\:mr-28 {
    margin-right: 7rem;
  }
  .lg\:mr-3 {
    margin-right: 0.75rem;
  }
  .lg\:mr-32 {
    margin-right: 8rem;
  }
  .lg\:mr-36 {
    margin-right: 9rem;
  }
  .lg\:mr-4 {
    margin-right: 1rem;
  }
  .lg\:mr-40 {
    margin-right: 10rem;
  }
  .lg\:mr-5 {
    margin-right: 1.25rem;
  }
  .lg\:mr-6 {
    margin-right: 1.5rem;
  }
  .lg\:mr-8 {
    margin-right: 2rem;
  }
  .lg\:mt-0 {
    margin-top: 0px;
  }
  .lg\:mt-1 {
    margin-top: 0.25rem;
  }
  .lg\:mt-10 {
    margin-top: 2.5rem;
  }
  .lg\:mt-12 {
    margin-top: 3rem;
  }
  .lg\:mt-16 {
    margin-top: 4rem;
  }
  .lg\:mt-2 {
    margin-top: 0.5rem;
  }
  .lg\:mt-20 {
    margin-top: 5rem;
  }
  .lg\:mt-24 {
    margin-top: 6rem;
  }
  .lg\:mt-28 {
    margin-top: 7rem;
  }
  .lg\:mt-3 {
    margin-top: 0.75rem;
  }
  .lg\:mt-32 {
    margin-top: 8rem;
  }
  .lg\:mt-36 {
    margin-top: 9rem;
  }
  .lg\:mt-4 {
    margin-top: 1rem;
  }
  .lg\:mt-40 {
    margin-top: 10rem;
  }
  .lg\:mt-5 {
    margin-top: 1.25rem;
  }
  .lg\:mt-6 {
    margin-top: 1.5rem;
  }
  .lg\:mt-8 {
    margin-top: 2rem;
  }
  .lg\:block {
    display: block;
  }
  .lg\:flex {
    display: flex;
  }
  .lg\:grid {
    display: grid;
  }
  .lg\:inline-grid {
    display: inline-grid;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:w-80 {
    width: 20rem;
  }
  .lg\:w-\[var\(--tile-right-w\)\] {
    width: var(--tile-right-w);
  }
  .lg\:max-w-5xl {
    max-width: 64rem;
  }
  .lg\:max-w-7xl {
    max-width: 80rem;
  }
  .lg\:max-w-none {
    max-width: none;
  }
  .lg\:flex-1 {
    flex: 1 1 0%;
  }
  .lg\:flex-none {
    flex: none;
  }
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .lg\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .lg\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[minmax\(22rem\2c var\(--text-max\)\)_1fr\] {
    grid-template-columns: minmax(22rem,var(--text-max)) 1fr;
  }
  .lg\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .lg\:flex-col {
    flex-direction: column;
  }
  .lg\:items-start {
    align-items: flex-start;
  }
  .lg\:items-center {
    align-items: center;
  }
  .lg\:items-stretch {
    align-items: stretch;
  }
  .lg\:gap-10 {
    gap: 2.5rem;
  }
  .lg\:gap-16 {
    gap: 4rem;
  }
  .lg\:gap-20 {
    gap: 5rem;
  }
  .lg\:gap-8 {
    gap: 2rem;
  }
  .lg\:gap-x-10 {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }
  .lg\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
  .lg\:gap-y-16 {
    row-gap: 4rem;
  }
  .lg\:self-center {
    align-self: center;
  }
  .lg\:p-0 {
    padding: 0px;
  }
  .lg\:p-1 {
    padding: 0.25rem;
  }
  .lg\:p-10 {
    padding: 2.5rem;
  }
  .lg\:p-12 {
    padding: 3rem;
  }
  .lg\:p-16 {
    padding: 4rem;
  }
  .lg\:p-2 {
    padding: 0.5rem;
  }
  .lg\:p-20 {
    padding: 5rem;
  }
  .lg\:p-24 {
    padding: 6rem;
  }
  .lg\:p-28 {
    padding: 7rem;
  }
  .lg\:p-3 {
    padding: 0.75rem;
  }
  .lg\:p-32 {
    padding: 8rem;
  }
  .lg\:p-36 {
    padding: 9rem;
  }
  .lg\:p-4 {
    padding: 1rem;
  }
  .lg\:p-40 {
    padding: 10rem;
  }
  .lg\:p-5 {
    padding: 1.25rem;
  }
  .lg\:p-6 {
    padding: 1.5rem;
  }
  .lg\:p-8 {
    padding: 2rem;
  }
  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .lg\:px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .lg\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .lg\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .lg\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .lg\:px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .lg\:px-28 {
    padding-left: 7rem;
    padding-right: 7rem;
  }
  .lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .lg\:px-32 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .lg\:px-36 {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lg\:px-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .lg\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .lg\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .lg\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .lg\:py-36 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .lg\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .lg\:py-40 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .lg\:pb-0 {
    padding-bottom: 0px;
  }
  .lg\:pb-1 {
    padding-bottom: 0.25rem;
  }
  .lg\:pb-10 {
    padding-bottom: 2.5rem;
  }
  .lg\:pb-12 {
    padding-bottom: 3rem;
  }
  .lg\:pb-16 {
    padding-bottom: 4rem;
  }
  .lg\:pb-2 {
    padding-bottom: 0.5rem;
  }
  .lg\:pb-20 {
    padding-bottom: 5rem;
  }
  .lg\:pb-24 {
    padding-bottom: 6rem;
  }
  .lg\:pb-28 {
    padding-bottom: 7rem;
  }
  .lg\:pb-3 {
    padding-bottom: 0.75rem;
  }
  .lg\:pb-32 {
    padding-bottom: 8rem;
  }
  .lg\:pb-36 {
    padding-bottom: 9rem;
  }
  .lg\:pb-4 {
    padding-bottom: 1rem;
  }
  .lg\:pb-40 {
    padding-bottom: 10rem;
  }
  .lg\:pb-5 {
    padding-bottom: 1.25rem;
  }
  .lg\:pb-6 {
    padding-bottom: 1.5rem;
  }
  .lg\:pb-8 {
    padding-bottom: 2rem;
  }
  .lg\:pl-0 {
    padding-left: 0px;
  }
  .lg\:pl-1 {
    padding-left: 0.25rem;
  }
  .lg\:pl-10 {
    padding-left: 2.5rem;
  }
  .lg\:pl-12 {
    padding-left: 3rem;
  }
  .lg\:pl-16 {
    padding-left: 4rem;
  }
  .lg\:pl-2 {
    padding-left: 0.5rem;
  }
  .lg\:pl-20 {
    padding-left: 5rem;
  }
  .lg\:pl-24 {
    padding-left: 6rem;
  }
  .lg\:pl-28 {
    padding-left: 7rem;
  }
  .lg\:pl-3 {
    padding-left: 0.75rem;
  }
  .lg\:pl-32 {
    padding-left: 8rem;
  }
  .lg\:pl-36 {
    padding-left: 9rem;
  }
  .lg\:pl-4 {
    padding-left: 1rem;
  }
  .lg\:pl-40 {
    padding-left: 10rem;
  }
  .lg\:pl-5 {
    padding-left: 1.25rem;
  }
  .lg\:pl-6 {
    padding-left: 1.5rem;
  }
  .lg\:pl-8 {
    padding-left: 2rem;
  }
  .lg\:pr-0 {
    padding-right: 0px;
  }
  .lg\:pr-1 {
    padding-right: 0.25rem;
  }
  .lg\:pr-10 {
    padding-right: 2.5rem;
  }
  .lg\:pr-12 {
    padding-right: 3rem;
  }
  .lg\:pr-16 {
    padding-right: 4rem;
  }
  .lg\:pr-2 {
    padding-right: 0.5rem;
  }
  .lg\:pr-20 {
    padding-right: 5rem;
  }
  .lg\:pr-24 {
    padding-right: 6rem;
  }
  .lg\:pr-28 {
    padding-right: 7rem;
  }
  .lg\:pr-3 {
    padding-right: 0.75rem;
  }
  .lg\:pr-32 {
    padding-right: 8rem;
  }
  .lg\:pr-36 {
    padding-right: 9rem;
  }
  .lg\:pr-4 {
    padding-right: 1rem;
  }
  .lg\:pr-40 {
    padding-right: 10rem;
  }
  .lg\:pr-5 {
    padding-right: 1.25rem;
  }
  .lg\:pr-6 {
    padding-right: 1.5rem;
  }
  .lg\:pr-8 {
    padding-right: 2rem;
  }
  .lg\:pt-0 {
    padding-top: 0px;
  }
  .lg\:pt-1 {
    padding-top: 0.25rem;
  }
  .lg\:pt-10 {
    padding-top: 2.5rem;
  }
  .lg\:pt-12 {
    padding-top: 3rem;
  }
  .lg\:pt-16 {
    padding-top: 4rem;
  }
  .lg\:pt-2 {
    padding-top: 0.5rem;
  }
  .lg\:pt-20 {
    padding-top: 5rem;
  }
  .lg\:pt-24 {
    padding-top: 6rem;
  }
  .lg\:pt-28 {
    padding-top: 7rem;
  }
  .lg\:pt-3 {
    padding-top: 0.75rem;
  }
  .lg\:pt-32 {
    padding-top: 8rem;
  }
  .lg\:pt-36 {
    padding-top: 9rem;
  }
  .lg\:pt-4 {
    padding-top: 1rem;
  }
  .lg\:pt-40 {
    padding-top: 10rem;
  }
  .lg\:pt-5 {
    padding-top: 1.25rem;
  }
  .lg\:pt-6 {
    padding-top: 1.5rem;
  }
  .lg\:pt-8 {
    padding-top: 2rem;
  }
}
@media (min-width: 1280px) {
  .xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .xl\:col-span-10 {
    grid-column: span 10 / span 10;
  }
  .xl\:col-span-11 {
    grid-column: span 11 / span 11;
  }
  .xl\:col-span-12 {
    grid-column: span 12 / span 12;
  }
  .xl\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .xl\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .xl\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .xl\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .xl\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .xl\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .xl\:col-span-9 {
    grid-column: span 9 / span 9;
  }
  .xl\:m-0 {
    margin: 0px;
  }
  .xl\:m-1 {
    margin: 0.25rem;
  }
  .xl\:m-10 {
    margin: 2.5rem;
  }
  .xl\:m-12 {
    margin: 3rem;
  }
  .xl\:m-16 {
    margin: 4rem;
  }
  .xl\:m-2 {
    margin: 0.5rem;
  }
  .xl\:m-20 {
    margin: 5rem;
  }
  .xl\:m-24 {
    margin: 6rem;
  }
  .xl\:m-28 {
    margin: 7rem;
  }
  .xl\:m-3 {
    margin: 0.75rem;
  }
  .xl\:m-32 {
    margin: 8rem;
  }
  .xl\:m-36 {
    margin: 9rem;
  }
  .xl\:m-4 {
    margin: 1rem;
  }
  .xl\:m-40 {
    margin: 10rem;
  }
  .xl\:m-5 {
    margin: 1.25rem;
  }
  .xl\:m-6 {
    margin: 1.5rem;
  }
  .xl\:m-8 {
    margin: 2rem;
  }
  .xl\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }
  .xl\:mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  .xl\:mx-10 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
  .xl\:mx-12 {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .xl\:mx-16 {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .xl\:mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .xl\:mx-20 {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .xl\:mx-24 {
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .xl\:mx-28 {
    margin-left: 7rem;
    margin-right: 7rem;
  }
  .xl\:mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }
  .xl\:mx-32 {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .xl\:mx-36 {
    margin-left: 9rem;
    margin-right: 9rem;
  }
  .xl\:mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .xl\:mx-40 {
    margin-left: 10rem;
    margin-right: 10rem;
  }
  .xl\:mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
  .xl\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  .xl\:mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .xl\:my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .xl\:my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .xl\:my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .xl\:my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .xl\:my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .xl\:my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .xl\:my-20 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .xl\:my-24 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .xl\:my-28 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }
  .xl\:my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .xl\:my-32 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .xl\:my-36 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
  .xl\:my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .xl\:my-40 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  .xl\:my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .xl\:my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .xl\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .xl\:mb-0 {
    margin-bottom: 0px;
  }
  .xl\:mb-1 {
    margin-bottom: 0.25rem;
  }
  .xl\:mb-10 {
    margin-bottom: 2.5rem;
  }
  .xl\:mb-12 {
    margin-bottom: 3rem;
  }
  .xl\:mb-16 {
    margin-bottom: 4rem;
  }
  .xl\:mb-2 {
    margin-bottom: 0.5rem;
  }
  .xl\:mb-20 {
    margin-bottom: 5rem;
  }
  .xl\:mb-24 {
    margin-bottom: 6rem;
  }
  .xl\:mb-28 {
    margin-bottom: 7rem;
  }
  .xl\:mb-3 {
    margin-bottom: 0.75rem;
  }
  .xl\:mb-32 {
    margin-bottom: 8rem;
  }
  .xl\:mb-36 {
    margin-bottom: 9rem;
  }
  .xl\:mb-4 {
    margin-bottom: 1rem;
  }
  .xl\:mb-40 {
    margin-bottom: 10rem;
  }
  .xl\:mb-5 {
    margin-bottom: 1.25rem;
  }
  .xl\:mb-6 {
    margin-bottom: 1.5rem;
  }
  .xl\:mb-8 {
    margin-bottom: 2rem;
  }
  .xl\:ml-0 {
    margin-left: 0px;
  }
  .xl\:ml-1 {
    margin-left: 0.25rem;
  }
  .xl\:ml-10 {
    margin-left: 2.5rem;
  }
  .xl\:ml-12 {
    margin-left: 3rem;
  }
  .xl\:ml-16 {
    margin-left: 4rem;
  }
  .xl\:ml-2 {
    margin-left: 0.5rem;
  }
  .xl\:ml-20 {
    margin-left: 5rem;
  }
  .xl\:ml-24 {
    margin-left: 6rem;
  }
  .xl\:ml-28 {
    margin-left: 7rem;
  }
  .xl\:ml-3 {
    margin-left: 0.75rem;
  }
  .xl\:ml-32 {
    margin-left: 8rem;
  }
  .xl\:ml-36 {
    margin-left: 9rem;
  }
  .xl\:ml-4 {
    margin-left: 1rem;
  }
  .xl\:ml-40 {
    margin-left: 10rem;
  }
  .xl\:ml-5 {
    margin-left: 1.25rem;
  }
  .xl\:ml-6 {
    margin-left: 1.5rem;
  }
  .xl\:ml-8 {
    margin-left: 2rem;
  }
  .xl\:mr-0 {
    margin-right: 0px;
  }
  .xl\:mr-1 {
    margin-right: 0.25rem;
  }
  .xl\:mr-10 {
    margin-right: 2.5rem;
  }
  .xl\:mr-12 {
    margin-right: 3rem;
  }
  .xl\:mr-16 {
    margin-right: 4rem;
  }
  .xl\:mr-2 {
    margin-right: 0.5rem;
  }
  .xl\:mr-20 {
    margin-right: 5rem;
  }
  .xl\:mr-24 {
    margin-right: 6rem;
  }
  .xl\:mr-28 {
    margin-right: 7rem;
  }
  .xl\:mr-3 {
    margin-right: 0.75rem;
  }
  .xl\:mr-32 {
    margin-right: 8rem;
  }
  .xl\:mr-36 {
    margin-right: 9rem;
  }
  .xl\:mr-4 {
    margin-right: 1rem;
  }
  .xl\:mr-40 {
    margin-right: 10rem;
  }
  .xl\:mr-5 {
    margin-right: 1.25rem;
  }
  .xl\:mr-6 {
    margin-right: 1.5rem;
  }
  .xl\:mr-8 {
    margin-right: 2rem;
  }
  .xl\:mt-0 {
    margin-top: 0px;
  }
  .xl\:mt-1 {
    margin-top: 0.25rem;
  }
  .xl\:mt-10 {
    margin-top: 2.5rem;
  }
  .xl\:mt-12 {
    margin-top: 3rem;
  }
  .xl\:mt-16 {
    margin-top: 4rem;
  }
  .xl\:mt-2 {
    margin-top: 0.5rem;
  }
  .xl\:mt-20 {
    margin-top: 5rem;
  }
  .xl\:mt-24 {
    margin-top: 6rem;
  }
  .xl\:mt-28 {
    margin-top: 7rem;
  }
  .xl\:mt-3 {
    margin-top: 0.75rem;
  }
  .xl\:mt-32 {
    margin-top: 8rem;
  }
  .xl\:mt-36 {
    margin-top: 9rem;
  }
  .xl\:mt-4 {
    margin-top: 1rem;
  }
  .xl\:mt-40 {
    margin-top: 10rem;
  }
  .xl\:mt-5 {
    margin-top: 1.25rem;
  }
  .xl\:mt-6 {
    margin-top: 1.5rem;
  }
  .xl\:mt-8 {
    margin-top: 2rem;
  }
  .xl\:grid {
    display: grid;
  }
  .xl\:inline-grid {
    display: inline-grid;
  }
  .xl\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xl\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .xl\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .xl\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xl\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .xl\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xl\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .xl\:gap-6 {
    gap: 1.5rem;
  }
  .xl\:p-0 {
    padding: 0px;
  }
  .xl\:p-1 {
    padding: 0.25rem;
  }
  .xl\:p-10 {
    padding: 2.5rem;
  }
  .xl\:p-12 {
    padding: 3rem;
  }
  .xl\:p-16 {
    padding: 4rem;
  }
  .xl\:p-2 {
    padding: 0.5rem;
  }
  .xl\:p-20 {
    padding: 5rem;
  }
  .xl\:p-24 {
    padding: 6rem;
  }
  .xl\:p-28 {
    padding: 7rem;
  }
  .xl\:p-3 {
    padding: 0.75rem;
  }
  .xl\:p-32 {
    padding: 8rem;
  }
  .xl\:p-36 {
    padding: 9rem;
  }
  .xl\:p-4 {
    padding: 1rem;
  }
  .xl\:p-40 {
    padding: 10rem;
  }
  .xl\:p-5 {
    padding: 1.25rem;
  }
  .xl\:p-6 {
    padding: 1.5rem;
  }
  .xl\:p-8 {
    padding: 2rem;
  }
  .xl\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .xl\:px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .xl\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .xl\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .xl\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .xl\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .xl\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .xl\:px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .xl\:px-28 {
    padding-left: 7rem;
    padding-right: 7rem;
  }
  .xl\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .xl\:px-32 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .xl\:px-36 {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .xl\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .xl\:px-40 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .xl\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .xl\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .xl\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .xl\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .xl\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .xl\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .xl\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .xl\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .xl\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .xl\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .xl\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .xl\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .xl\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .xl\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .xl\:py-36 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .xl\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .xl\:py-40 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .xl\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .xl\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .xl\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .xl\:pb-0 {
    padding-bottom: 0px;
  }
  .xl\:pb-1 {
    padding-bottom: 0.25rem;
  }
  .xl\:pb-10 {
    padding-bottom: 2.5rem;
  }
  .xl\:pb-12 {
    padding-bottom: 3rem;
  }
  .xl\:pb-16 {
    padding-bottom: 4rem;
  }
  .xl\:pb-2 {
    padding-bottom: 0.5rem;
  }
  .xl\:pb-20 {
    padding-bottom: 5rem;
  }
  .xl\:pb-24 {
    padding-bottom: 6rem;
  }
  .xl\:pb-28 {
    padding-bottom: 7rem;
  }
  .xl\:pb-3 {
    padding-bottom: 0.75rem;
  }
  .xl\:pb-32 {
    padding-bottom: 8rem;
  }
  .xl\:pb-36 {
    padding-bottom: 9rem;
  }
  .xl\:pb-4 {
    padding-bottom: 1rem;
  }
  .xl\:pb-40 {
    padding-bottom: 10rem;
  }
  .xl\:pb-5 {
    padding-bottom: 1.25rem;
  }
  .xl\:pb-6 {
    padding-bottom: 1.5rem;
  }
  .xl\:pb-8 {
    padding-bottom: 2rem;
  }
  .xl\:pl-0 {
    padding-left: 0px;
  }
  .xl\:pl-1 {
    padding-left: 0.25rem;
  }
  .xl\:pl-10 {
    padding-left: 2.5rem;
  }
  .xl\:pl-12 {
    padding-left: 3rem;
  }
  .xl\:pl-16 {
    padding-left: 4rem;
  }
  .xl\:pl-2 {
    padding-left: 0.5rem;
  }
  .xl\:pl-20 {
    padding-left: 5rem;
  }
  .xl\:pl-24 {
    padding-left: 6rem;
  }
  .xl\:pl-28 {
    padding-left: 7rem;
  }
  .xl\:pl-3 {
    padding-left: 0.75rem;
  }
  .xl\:pl-32 {
    padding-left: 8rem;
  }
  .xl\:pl-36 {
    padding-left: 9rem;
  }
  .xl\:pl-4 {
    padding-left: 1rem;
  }
  .xl\:pl-40 {
    padding-left: 10rem;
  }
  .xl\:pl-5 {
    padding-left: 1.25rem;
  }
  .xl\:pl-6 {
    padding-left: 1.5rem;
  }
  .xl\:pl-8 {
    padding-left: 2rem;
  }
  .xl\:pr-0 {
    padding-right: 0px;
  }
  .xl\:pr-1 {
    padding-right: 0.25rem;
  }
  .xl\:pr-10 {
    padding-right: 2.5rem;
  }
  .xl\:pr-12 {
    padding-right: 3rem;
  }
  .xl\:pr-16 {
    padding-right: 4rem;
  }
  .xl\:pr-2 {
    padding-right: 0.5rem;
  }
  .xl\:pr-20 {
    padding-right: 5rem;
  }
  .xl\:pr-24 {
    padding-right: 6rem;
  }
  .xl\:pr-28 {
    padding-right: 7rem;
  }
  .xl\:pr-3 {
    padding-right: 0.75rem;
  }
  .xl\:pr-32 {
    padding-right: 8rem;
  }
  .xl\:pr-36 {
    padding-right: 9rem;
  }
  .xl\:pr-4 {
    padding-right: 1rem;
  }
  .xl\:pr-40 {
    padding-right: 10rem;
  }
  .xl\:pr-5 {
    padding-right: 1.25rem;
  }
  .xl\:pr-6 {
    padding-right: 1.5rem;
  }
  .xl\:pr-8 {
    padding-right: 2rem;
  }
  .xl\:pt-0 {
    padding-top: 0px;
  }
  .xl\:pt-1 {
    padding-top: 0.25rem;
  }
  .xl\:pt-10 {
    padding-top: 2.5rem;
  }
  .xl\:pt-12 {
    padding-top: 3rem;
  }
  .xl\:pt-16 {
    padding-top: 4rem;
  }
  .xl\:pt-2 {
    padding-top: 0.5rem;
  }
  .xl\:pt-20 {
    padding-top: 5rem;
  }
  .xl\:pt-24 {
    padding-top: 6rem;
  }
  .xl\:pt-28 {
    padding-top: 7rem;
  }
  .xl\:pt-3 {
    padding-top: 0.75rem;
  }
  .xl\:pt-32 {
    padding-top: 8rem;
  }
  .xl\:pt-36 {
    padding-top: 9rem;
  }
  .xl\:pt-4 {
    padding-top: 1rem;
  }
  .xl\:pt-40 {
    padding-top: 10rem;
  }
  .xl\:pt-5 {
    padding-top: 1.25rem;
  }
  .xl\:pt-6 {
    padding-top: 1.5rem;
  }
  .xl\:pt-8 {
    padding-top: 2rem;
  }
}