/* ------------------------------------------------------------------
   BROLZ — lot UI (direction « A · Évolution », validée le 30/09/2026)

   Couche chargée APRÈS la feuille Webflow et brolz.css, uniquement sur les
   pages déjà passées au nouveau style (liste PAGES de tools/ui_lot.py).
   Principes : Inter conservée, couleurs de la charte 2020, un seul bouton
   principal (pilule dégradée, texte bleu nuit), texte aligné à gauche,
   puces carrées « pixel », barre dégradée sous les titres, bandes bleu
   nuit pour rythmer. Aucun texte n'est modifié ici.
   ------------------------------------------------------------------ */

:root {
  --ui-navy: #002f5c;
  --ui-navy-2: #0b3a66;
  --ui-text: #002f5c;          /* texte courant : bleu nuit, comme l'export (13,9:1) ;
                                  le gris-bleu #3C4A5E paraissait plus fin et plus mou (revu le 30/09) */
  --ui-fs: .96875rem;          /* texte courant 15,5 px (variante C, 30/09) */
  --ui-lh: 1.6;                /* 1,5 → 1,6 le 01/10 : texte « un peu trop serré » (option A) */
  --ui-muted: #5b6b80;
  --ui-on-dark: #d5e0eb;       /* texte courant sur bleu nuit : 9,6:1 */
  --ui-cyan: #009fe3;
  --ui-yellow: #e9df00;        /* jaune de la charte (le site avait #d3d603) */
  --ui-green: #97bf0d;
  --ui-grad: linear-gradient(90deg, #e9df00, #97bf0d);
  --ui-light: #f3f7fa;
  --ui-line: #dde6ee;
  --ui-r-card: 16px;
  --ui-r-panel: 24px;
  --ui-section: 4.5rem;

  /* les dégradés Webflow existants passent au jaune de la charte */
  --base-color-brand--yellow: #e9df00;
}


/* ---------- 1. Texte ---------- */

body { color: var(--ui-text); }

/* fin du texte justifié (rivières de blancs, surtout sur mobile) */
p,
.text-size-small.text-weight-semibold { text-align: left; }

p,
.paragraph,
.text-size-large,
.text-size-large.text-align-center.home {
  color: var(--ui-text);
  font-size: var(--ui-fs);
  line-height: var(--ui-lh);
}
/* intros sous un titre centré : centrées, sans coupure inutile
   (une phrase qui tient sur une ligne y reste ; sinon lignes équilibrées) */
.text-size-large.text-align-center.home {
  text-align: center;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.text-size-small { font-size: .9375rem; line-height: 1.6; }
p strong, .paragraph strong { color: var(--ui-navy); }

h1 {
  font-size: 3.25rem;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.025em;
}
.heading,
.heading.is--centered {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Titres de section : deux cas seulement (règle de Guillaume, 30/09).
   - aligné à gauche → la barre dégradée dessous (rappel du visuel de l'app) ;
   - centré (.is--centered) → rien.
   Jamais de barre sur fond bleu nuit. */
h2.heading:not(.is--centered)::after {
  content: "";
  display: block;
  width: 64px;
  height: 8px;
  margin-top: 1rem;
  border-radius: 4px;
  background: var(--ui-grad);
}
:is(.home_hero_component, .brolz-testimonial, .home_features_list_component,
    .cta_component.shadow-large, .feature_why_us_component) h2::after { display: none; }
.heading.is--centered { text-align: center; }
/* LinkedIn : « Suivre BROLZ » centré, près des posts (espaceurs Webflow retirés) */
.home_lkd-feed .lkd-code { margin-bottom: 0; }
.home_lkd-feed .padding-global > ._25px { display: none; }
.home_lkd-feed .padding-global > .button-group.is-center { margin-top: 1.75rem; }
.button-group.is-center { justify-content: center; }

/* mots mis en avant : plus de vert sur blanc (contraste 2,2:1) */
.brand-shade,
.brand-shade.h2 {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ui-navy);
  font-weight: inherit;
}
/* … mais dégradé jaune → vert de la charte sur fond bleu nuit (6,3 à 9,6:1) */
:is(.home_hero_component, .brolz-testimonial, .home_features_list_component,
    .cta_component.shadow-large, .heading.white, .feature_why_us_component h2) .brand-shade,
/* exception voulue par Guillaume (01/10) : « cas d'usage » en dégradé sur blanc */
.home_features_section:has(.card-use-case) .heading .brand-shade {
  color: var(--ui-yellow);
  background-image: var(--ui-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* ---------- 2. Boutons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .6875rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--ui-green);
  background-image: var(--ui-grad);
  box-shadow: none;
  color: var(--ui-navy);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 47, 92, .18);
}
.button:focus-visible {
  outline: 3px solid var(--ui-cyan);
  outline-offset: 3px;
}
.button strong { font-weight: inherit; }

/* secondaire : contour bleu nuit */
.button.is-secondary,
.home_lkd-feed .button-group.is-center .button {
  background: transparent;
  border: 1.5px solid var(--ui-navy);
  color: var(--ui-navy);
  padding: .6875rem 1.375rem;
}
/* secondaire sur fond bleu nuit : pilule blanche */
:is(.brolz-testimonial, .cta_component.shadow-large) .button,
:is(.brolz-testimonial, .cta_component.shadow-large) .button.is-secondary {
  background: #fff;
  border: 0;
  color: var(--ui-navy);
}


/* ---------- 3. Menu ----------
   Bureau (≥ 992 px) : logo + liens à gauche, langue + actions à droite, bords
   calés exactement sur le contenu (1200 px) ; tous les éléments font 40 px.
   En dessous : menu burger (Webflow) restylé. */

.navbar-fixed {
  background-color: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.ui-scrolled .navbar-fixed {
  border-bottom-color: var(--ui-line);
  box-shadow: 0 6px 20px rgba(0, 47, 92, .06);
}
.nav_component, .nav_component-phone { padding-top: 0; padding-bottom: 0; }
.nav_container { min-height: 4.5rem; }
.nav_brand_wrapper { width: auto; flex-shrink: 0; }
.navbar_logo, .navbar_logo.logo_shrink { width: auto; height: 1.75rem; max-width: none; display: block; }

/* actions : « Se connecter » en lien discret, la démo en bouton */
.button-group.is-nav { gap: .25rem; flex-wrap: nowrap; }
.button-group.is-nav .button:not(.ui-nav-demo) {
  background: transparent;
  color: var(--ui-navy);
  min-height: 2.5rem;
  padding: 0 .75rem;
  border-radius: 8px;
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .15s ease-out;
}
.button-group.is-nav .button:not(.ui-nav-demo):hover {
  background: var(--ui-light);
  box-shadow: none;
  transform: none;
}
.ui-nav-demo {
  min-height: 2.5rem;
  padding: 0 1.125rem;
  font-size: .9375rem;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .nav_component .nav_container {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    column-gap: .25rem;
    max-width: 75rem;
  }
  .nav_component .nav_menu_wrapper { justify-self: start; margin-left: 2rem; gap: .125rem; }
  .nav_component .nav_right_wrapper { width: auto; }

  /* liens et onglets déroulants : même boîte de 40 px */
  .nav_component .nav_link-menu.w-nav-link,
  .navbar-fixed .nav_component .dropdown-toggle {
    position: relative;
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 .75rem;
    border-radius: 8px;
    background-color: transparent;
    color: var(--ui-navy);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1;
    transition: background-color .15s ease-out;
  }
  .navbar-fixed .nav_component .dropdown-toggle { padding-right: 1.875rem; }
  .navbar-fixed .nav_component .dropdown-toggle::before { display: none; }
  .nav_component .nav_link-menu.w-nav-link:hover,
  .navbar-fixed .nav_component .dropdown-toggle:hover,
  .navbar-fixed .nav_component .dropdown-toggle.w--open { background-color: var(--ui-light); border-radius: 8px; }
  .navbar-fixed .nav_component .dropdown-toggle .w-icon-dropdown-toggle {
    top: 50%;
    right: .625rem;
    margin: -.4375rem 0 0;
    width: .875rem;
    height: .875rem;
    font-size: .875rem;
    transition: transform .2s var(--ui-ease, ease-out);
  }
  .navbar-fixed .nav_component .dropdown-toggle.w--open .w-icon-dropdown-toggle { transform: rotate(180deg); }

  /* page courante : petite barre dégradée arrondie, comme sous les titres de section
     (64 × 8 px là-bas, 24 × 4 px ici), centrée sous le libellé comme les onglets de
     l'app (01/10, choix de Guillaume). Elle se pose
     aussi sur l'onglet d'un menu déroulant quand la page courante est dans sa liste
     (Solutions, Clients — pas la langue, hors .nav_menu_wrapper), et sur « Cas
     d'usage » dans les fiches (qui ne sont pas dans le menu). */
  .nav_component .nav_link-menu.w-nav-link.w--current { color: var(--ui-navy); }
  .nav_component .nav_link-menu.w-nav-link.w--current::after,
  .nav_menu_wrapper > .w-dropdown:has(.dropdown-list .w--current):not(:has([data-locale-flag], .w-locales-list)) > .dropdown-toggle::after,
  body:has(.ui-fiche-hero) .nav_menu_wrapper > a.nav_link-menu[href$="/cas-usage"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .1875rem;
    width: 1.5rem;
    height: 4px;
    border-radius: 2px;
    background: var(--ui-grad);
    transform: translateX(-50%);
  }
  /* onglet déroulant : la flèche occupe 1,125 rem de plus à droite (padding 1,875 rem
     contre ,75 rem à gauche) — on recentre sous le mot seul */
  .nav_menu_wrapper > .w-dropdown:has(.dropdown-list .w--current):not(:has([data-locale-flag], .w-locales-list)) > .dropdown-toggle::after {
    left: calc(50% - .5625rem);
  }

  /* listes déroulantes : carte blanche, ombre douce, courte apparition */
  .nav_component .dropdown-list.w--open {
    top: calc(100% + .5rem);
    min-width: 15rem;
    padding: .375rem;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0, 47, 92, .12);
    animation: ui-drop .16s var(--ui-ease, ease-out);
  }
  /* pont invisible au-dessus de la liste : la souris qui descend lentement
     de l'onglet vers la liste ne sort plus de la zone de survol (8 px de vide) */
  .nav_component .dropdown-list.w--open::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: .75rem;
  }
  .nav_component .dropdown-list .nav_link-menu,
  .nav_component .dropdown-list .lng-fr-en {
    display: block;
    padding: .625rem .75rem;
    border-radius: 8px;
    color: var(--ui-navy);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
  }
  .nav_component .dropdown-list .nav_link-menu:hover,
  .nav_component .dropdown-list .lng-fr-en:hover { background: var(--ui-light); }
  .nav_component .dropdown-list .w--current { background: var(--ui-light); font-weight: 600; }
  /* la langue s'ouvre vers la gauche, sous son onglet */
  .nav_component .nav_container > .w-dropdown .dropdown-list.w--open { left: auto; right: 0; min-width: 10rem; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .nav_component .nav_link-menu.w-nav-link,
  .navbar-fixed .nav_component .dropdown-toggle { padding-left: .5rem; font-size: .875rem; }
  .nav_component .nav_link-menu.w-nav-link { padding-right: .5rem; }
  .nav_component .nav_menu_wrapper { margin-left: 1rem; }
  .navbar-fixed .nav_component .dropdown-toggle { padding-right: 1.5rem; }
  .ui-nav-demo { font-size: .875rem; padding: 0 1rem; }
  /* « Se connecter » devient une icône ; le libellé reste lu par les lecteurs d'écran */
  .button-group.is-nav .button:not(.ui-nav-demo) {
    width: 2.5rem;
    padding: 0;
    font-size: 0;
  }
  .button-group.is-nav .button:not(.ui-nav-demo)::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background: var(--ui-navy);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
@keyframes ui-drop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* menu burger (tablette et mobile) : liste nette, rangées de 52 px */
@media (max-width: 991px) {
  .nav_menu_wrapper { padding: 1rem 1.25rem 2rem; border-top: 1px solid var(--ui-line); }
  .nav_menu_wrapper .nav_link-menu.w-nav-link,
  .nav_menu_wrapper .dropdown-toggle {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    padding: 0 .25rem;
    border-bottom: 1px solid var(--ui-line);
    border-radius: 0;
    background: transparent;
    color: var(--ui-navy);
    font-size: 1.0625rem;
    font-weight: 600;
  }
  .nav_menu_wrapper .dropdown-toggle::before { display: none; }
  .nav_menu_wrapper .dropdown-toggle .w-icon-dropdown-toggle { right: .25rem; }
  .nav_menu_wrapper .dropdown-list.w--open { background: transparent; padding: .25rem 0 .5rem; }
  .nav_menu_wrapper .dropdown-list .nav_link-menu,
  .nav_menu_wrapper .dropdown-list .lng-fr-en {
    display: block;
    padding: .625rem 1rem;
    color: var(--ui-text);
    font-size: var(--ui-fs);
    font-weight: 500;
    text-decoration: none;
  }
  .nav_menu_wrapper .nav_link-menu.w--current { color: var(--ui-navy); }
  .nav_menu_wrapper .nav_link-menu.w-nav-link.w--current {
    box-shadow: inset 4px 0 0 var(--ui-green);
    padding-left: .875rem;
  }
}

.button-group.nav-dropdown { gap: .75rem; }
/* menu mobile : la démo en premier, deux boutons de même hauteur */
.button-group.nav-dropdown .ui-nav-demo { order: -1; min-height: 3rem; font-size: .9375rem; }
.button-group.nav-dropdown .button:not(.ui-nav-demo) {
  min-height: 3rem;
  background: transparent;
  border: 1.5px solid var(--ui-navy);
}


/* ---------- 4. Rythme des sections ---------- */

/* deux sections blanches consécutives : 72 px d'écart, pas 144 ;
   les sections sur fond (clair ou bleu) gardent leurs marges pleines */
.main-wrapper > div > .padding-global {
  padding-top: calc(var(--ui-section) / 2);
  padding-bottom: calc(var(--ui-section) / 2);
}
.main-wrapper > :is(.brolz-testimonial, .home_lkd-feed:has(.li-feed), .faq_section) > .padding-global {
  padding-top: var(--ui-section);
  padding-bottom: var(--ui-section);
}
/* première et dernière section blanche : pas collées au fond voisin */
.main-wrapper > div:last-child > .padding-global { padding-bottom: var(--ui-section); }
.main-wrapper > .home_hero_section > .padding-global {
  padding-top: 8rem;
  padding-bottom: 1rem;
}

/* fonds clairs et bandes bleu nuit en alternance */
/* les 6 catégories de cas d'usage restent sur blanc, comme sur la page Cas d'usage (01/10) */
.home_lkd-feed:has(.li-feed),
.faq_section { background-color: var(--ui-light); }
/* section blanche contre une section sur fond : marge pleine de ce côté */
.main-wrapper > :is(.brolz-testimonial, .home_lkd-feed:has(.li-feed), .faq_section) + div > .padding-global { padding-top: var(--ui-section); }
.main-wrapper > div:has(+ :is(.brolz-testimonial, .home_lkd-feed:has(.li-feed), .faq_section)) > .padding-global { padding-bottom: var(--ui-section); }
/* LinkedIn : moins de vide sous le bouton « Suivre » */
.main-wrapper > .home_lkd-feed:has(.li-feed) > .padding-global { padding-bottom: 3.5rem; }


/* ---------- 5. Paragraphes et listes ----------
   Paragraphes espacés de 1 em (les doubles <br> de l'export sont devenus
   de vrais <p>, cf. tools/ui_lot.py). Puces : petits ronds bleus, liste
   légèrement en retrait du texte. Aéré le 01/10 (option A) : interligne 1,6,
   16 px entre paragraphes, 6 px entre puces, 12 px entre coches. */

p + p, p + p[class], .paragraph + .paragraph { margin-top: 1em; }  /* [class] : bat .text-size-medium { margin-top: 0 } */
p + ul, .paragraph + ul { margin-top: .625rem; }
ul + p { margin-top: 1rem; }

.blue-list, .black-list, .white-list {
  list-style: none;
  margin-bottom: 0;
  padding-left: .75rem;
  font-size: var(--ui-fs);
  line-height: var(--ui-lh);
}
.blue-list, .black-list { color: var(--ui-text); }
.blue-list li, .black-list li, .white-list li {
  position: relative;
  padding-left: 1rem;
  margin: .375rem 0;
}
.blue-list li::before, .black-list li::before, .white-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-navy);
}
.white-list li::before { background: var(--ui-cyan); }
.white-list strong { color: #fff; }

/* les trois atouts : coche verte, sans encart */
.features_list_wrapper { display: grid; gap: .75rem; }
.home_features_list {
  gap: .625rem;
  padding: 0;
  border: 0;
  font-size: var(--ui-fs);
  line-height: 1.55;
  align-items: flex-start;
}
.home_features_list > img { display: none; }
.home_features_list::before {
  content: "";
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%2397bf0d' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.home_features_list .text-weight-semibold { font-weight: 400; color: var(--ui-text); }
.home_features_list strong { color: var(--ui-navy); font-weight: 700; }

/* colonne de texte à ~65 caractères, illustration plafonnée */
.home_features_component > .max-width-full { max-width: 34rem; }
.home_features_image_wrapper .home_features_image { max-width: 360px; }
.home_features_component > .home_features_image_wrapper {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ---------- 6. Accueil — bandeau d'ouverture ---------- */

.home_hero_component { border-radius: var(--ui-r-panel); }
.home_hero_content_wrapper { padding: 3.5rem 4rem; }
/* titre et texte visibles sans attendre le JavaScript des animations */
.home_hero_section .home_hero_component [data-w-id],
.home_hero_section .home_hero_ornamen { opacity: 1 !important; transform: none !important; }
.home_hero_component .text-size-large.text-color-alternate.white {
  color: var(--ui-on-dark);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-top: 1.25rem;
}
.home_hero_component .text-size-small.quote.white {
  border-left: 3px solid var(--ui-green);
  padding: .25rem 0 .25rem 1rem;
  color: #fff;
  font-size: var(--ui-fs);
  line-height: var(--ui-lh);
}


/* ---------- 7. Cartes ---------- */

/* cas d'usage : icône métier + titre, puis pastilles de liens */
.card-use-case {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  align-content: start;
  gap: 1rem .875rem;
  padding: 1.5rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  background: #fff;
  box-shadow: none;
}
.card-use-case > .collection-list-wrapper-use-case { grid-column: 1 / -1; }
.card-use-case .brix---mg-bottom-8px-2 { margin-bottom: 0; }
.card-use-case :is(h2, h3) {
  margin: 0;
  color: var(--ui-navy);
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 700;
}
.ui-cat-icon { width: 56px; height: 56px; display: block; }
.collection-list-wrapper-use-case .w-dyn-items {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.collection-list-wrapper-use-case .w-dyn-item { display: contents; }
.link-use-case:not([href]) { display: none; }
.link-use-case[href] {
  display: inline-flex;
  margin: 0;
  padding: .375rem .75rem;
  border-radius: 999px;
  background: var(--ui-light);
  color: var(--ui-navy);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color .15s ease-out;
}
.link-use-case[href]:hover { background: #e3ecf4; }
.brix---grid-3-columns { gap: 1.5rem; }

/* fonctionnalités (« Du suivi terrain… ») */
.home_features_card {
  min-height: 0;
  padding: 1.5rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  background: #fff;
}
.home_features_card .text-size-medium.text-weight-medium {
  color: var(--ui-navy);
  font-size: var(--ui-fs);
  font-weight: 700;
}
.home_features_card .text-size-small { color: var(--ui-text); }
/* la carte-lien passe en bleu nuit, avec une flèche */
.home_features_card_css.click-features {
  height: 100%;
  box-sizing: border-box;
  padding: 1.5rem;
  border: 0;
  border-radius: var(--ui-r-card);
  background: var(--ui-navy);
}
.home_features_card_css.click-features::before { display: none; }
.home_features_card_css.click-features .text-size-medium {
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: var(--ui-fs);
  font-weight: 700;
}
.home_features_card_css.click-features .text-size-medium::after { content: "  →"; }

/* une solution, trois interfaces : image toujours en tête */
.how_to_use_card {
  border: 0;
  border-radius: var(--ui-r-card);
  background: var(--ui-light);
}
/* image toujours en tête, à toutes les largeurs (Webflow alternait) */
.how_to_use_card_content,
.how_to_use_card_content.is-first { order: 0; }
.home_how_to_use_content_wrapper { margin-bottom: 0; }
.how_to_use_image.rounded { border-radius: 12px; }
.number-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  max-width: none;
  max-height: none;
  margin-right: .75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ui-navy);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
}
.how_to_use_card .heading-style-h6 { font-size: 1.0625rem; }

/* FAQ */
.faq_component {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  box-shadow: none;
}
.faq_component .heading-style-h6 { font-size: 1.0625rem; }


/* ---------- 8. Panneaux bleu nuit ---------- */

/* témoignage Veolia : bande pleine largeur */
.home_features_section.brolz-testimonial { background: var(--ui-navy); }
.brolz-testimonial .heading { color: #fff; }
.brolz-testimonial .text-size-large { color: var(--ui-on-dark); }
.brolz-testimonial .quote {
  margin-left: 0;
  border-left: 3px solid var(--ui-green);
  color: #fff;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.5;
}
.brolz-video { border-radius: var(--ui-r-card); }

/* témoignage : la vidéo prend la place (≈ 58 %), le texte reste compact */
.brolz-testimonial .home_features_component-suivi {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: 4rem;
  align-items: center;
}
.brolz-testimonial .home_features_image_wrapper { width: 100%; }
.brolz-testimonial .brolz-video {
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08);
}
.brolz-testimonial .max-width-large { max-width: none; }

/* « Du suivi terrain » : exception voulue par Guillaume. Colonne de texte
   resserrée (36 rem), le téléphone occupe le reste, centré et « détaché » :
   il déborde le texte de 4,5 rem en haut et en bas ; la section gagne autant d'air */
.main-wrapper > .home_features_section:not(.brolz-testimonial):has(.home_features_component-suivi) > .padding-global {
  padding-top: calc(var(--ui-section) / 2 + 4.5rem);
  padding-bottom: calc(var(--ui-section) / 2 + 4.5rem);
}
.home_features_section:not(.brolz-testimonial) .home_features_component-suivi {
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  column-gap: 4rem;
  align-items: stretch;
}
.home_features_section:not(.brolz-testimonial) .home_features_component-suivi > .home_features_image_wrapper {
  position: relative;
  width: 100%;
  min-height: 16rem;
}
.home_features_section:not(.brolz-testimonial) .home_features_component-suivi .home_features_image {
  position: absolute;
  top: -4.5rem;
  left: 0;
  width: 100%;
  height: calc(100% + 9rem);    /* hauteur du texte + 4,5 rem de chaque côté */
  max-width: none;
  max-height: none;             /* Webflow le bridait à 100 % du texte */
  object-fit: contain;
}

/* « L'appui terrain » et « Taillé pour le nucléaire » */
.cta_component.background-color-gd-blue.shadow-large,
.home_features_list_component.background-color-gd-blue {
  border: 0;
  border-radius: var(--ui-r-panel);
  box-shadow: none;
}
.cta_component .heading-style-h3.white { font-weight: 800; letter-spacing: -.02em; }
.cta_component .text-size-medium.white { color: var(--ui-on-dark); font-size: var(--ui-fs); line-height: 1.6; }
.cta_image.rounded { border-radius: var(--ui-r-card); }
.home_features_list_component.background-color-gd-blue { padding: 3.5rem 2.5rem 2.5rem; }
.home_features_grid_content { border-radius: var(--ui-r-card); padding: 1.75rem; }
.home_features_grid_content .heading-style-h6 { font-size: 1.0625rem; font-weight: 700; }
/* l'émoji seul en tête de carte : taille d'icône */
.home_features_grid_content > .margin-bottom:first-child { margin-bottom: .75rem; }
.home_features_grid_content > .margin-bottom:first-child .heading-style-h6 { font-size: 1.75rem; line-height: 1; }


/* ---------- 9. Agenda « 30 minutes » ----------
   C'est le titre de l'agenda Calendly, pas un appel à l'action : titre centré,
   phrase, agenda. Le bouton « Prendre rendez-vous » ne sert que si l'agenda
   n'est pas affiché (cookies refusés) ou sur mobile (choix Webflow). */

.home_how_to_use_component:has(.calendly-code) > .margin-bottom { margin-bottom: 1rem; }
.home_how_to_use_component:has(.calendly-code) > .button-group.phone {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}
@media (min-width: 480px) {
  .home_how_to_use_component:has(.calendly-code iframe) > .button-group.phone { display: none; }
}
.home_how_to_use_component:has(.calendly-code) > .calendly-code { margin-top: 2rem; }
/* l'agenda Calendly ne se charge qu'après accord aux cookies : tant qu'il
   n'est pas là, pas de bloc vide de 700 px (le bouton suffit) */
.calendly-code:not(:has(iframe)) { display: none; }
@media (max-width: 479px) {
  .home_how_to_use_component:has(.calendly-code) .button-group.phone .button { width: 100%; }
}

/* Panneau dégradé d'appel à l'action (gardé pour un vrai CTA, à poser avec la
   classe ui-cta-grad sur un bloc titre + texte + bouton) : fond jaune → vert,
   texte et bouton bleu nuit. */
.ui-cta-grad {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 3rem;
  padding: 3rem 3.5rem;
  border-radius: var(--ui-r-panel);
  background: var(--ui-grad);
  color: var(--ui-navy);
}
.ui-cta-grad h2::after { display: none; }
.ui-cta-grad .button { background: var(--ui-navy); color: #fff; }
@media (max-width: 767px) {
  .ui-cta-grad { grid-template-columns: 1fr; row-gap: 1.5rem; padding: 2.5rem 1.5rem; }
}


/* ---------- 10. Pied de page : tout en blanc ---------- */

.footer_logo_image { filter: brightness(0) invert(1); height: 2.25rem; width: auto; }
.footer_section .text-size-small.white.menu,
.footer_section .menu { color: #fff; font-weight: 700; }
.footer_section .footer_link_list.white,
.footer_section .heading-style-h6.white { color: #fff; }
.footer_section .footer_link_list.white:hover { text-decoration: underline; }
/* Mise en page (01/10) : le logo ne prend plus une rangée à lui seul, il coiffe la
   colonne contact/adresse ; les trois listes de liens à droite, sans coupure ;
   une seule taille de texte (15 px) ; bas de page discret sous un filet. */
.footer_section .footer_component { row-gap: 2.5rem; }
.footer_section .footer_info_container { row-gap: 1.5rem; }
.footer_section :is(.footer_link_list, .heading-style-h6, .footer_info_container .text-size-small) {
  font-size: .9375rem;
  line-height: 1.5;
}
.footer_section .footer_bottom_container {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.footer_section .footer_bottom_container > * {
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .7);
}
@media (min-width: 992px) {
  .footer_section .footer_component {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 4rem;
    row-gap: 1.25rem;
  }
  .footer_section .footer_menu_wrapper { display: contents; }
  .footer_section .footer_logo_wrapper { grid-column: 1; grid-row: 1; }
  .footer_section .footer_info_container { grid-column: 1; grid-row: 2; }
  .footer_section .footer_menu_container {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: repeat(3, max-content);
    column-gap: 4rem;
  }
  .footer_section .footer_link_list { white-space: nowrap; }
  .footer_section .footer_bottom_container { grid-column: 1 / -1; grid-row: 3; margin-top: 1.75rem; }
}
@media (max-width: 991px) {
  .footer_section .footer_component { row-gap: 2rem; }
  .footer_section :is(.footer_menu_wrapper, .footer_menu_container) { row-gap: 2rem; }
}


/* ---------- 11. Tablette et mobile ---------- */

@media (max-width: 991px) {
  :root { --ui-section: 4rem; }
}

@media (max-width: 991px) {
  .brolz-testimonial .home_features_component-suivi,
  .home_features_section:not(.brolz-testimonial) .home_features_component-suivi { display: flex; flex-direction: column; row-gap: 2rem; }
  .home_features_section:not(.brolz-testimonial) .home_features_component-suivi > .home_features_image_wrapper { min-height: 0; }
  .home_features_section:not(.brolz-testimonial) .home_features_component-suivi .home_features_image {
    position: static; width: auto; max-width: 100%; height: auto; max-height: 22rem; margin: 0 auto;
  }
}

@media (max-width: 767px) {
  :root { --ui-section: 3rem; }
  h1 { font-size: 2.25rem; }
  .heading, .heading.is--centered { font-size: 1.875rem; }
  .home_hero_content_wrapper { padding: 2.5rem 2rem; }
  .home_features_list_component.background-color-gd-blue { padding: 3rem 1.25rem 1.25rem; }
}

@media (max-width: 479px) {
  /* 20 px de marge latérale partout (8 px à l'origine sur certaines pages) */
  .padding-global.padding-section-hero,
  .padding-global.padding-section-large,
  .padding-global.padding-section-small,
  .padding-global.d { padding-left: 1rem; padding-right: 1rem; }
  .main-wrapper > .home_hero_section > .padding-global { padding-top: 6rem; }

  p, .paragraph, .text-size-large,
  .text-size-large.text-align-center.home,
  .blue-list, .black-list, .white-list,
  .home_features_list { font-size: var(--ui-fs); }
  .text-size-small { font-size: .9375rem; }

  h1 { font-size: 2.125rem; line-height: 1.08; }
  .heading, .heading.is--centered { font-size: 1.75rem; }
  h2.heading::after { width: 56px; height: 6px; margin-top: .875rem; }

  .home_hero_component.background-color-gd-blue { border-radius: 20px; }
  .home_hero_content_wrapper { padding: 2rem 1.5rem; }
  .home_hero_component .text-size-large.text-color-alternate.white,
  .home_hero_component .text-size-small.text-color-alternate.quote.white { font-size: var(--ui-fs); }
  .home_hero_component .button-group,
  .home_hero_component .button { width: 100%; }

  .card-use-case { padding: 1.25rem; grid-template-columns: 48px 1fr; }
  .ui-cat-icon { width: 48px; height: 48px; }
  .home_features_grid_content { padding: 1.5rem; }
  .faq_component.shadow-xsmall { padding: 1.25rem; }
  .how_to_use_card { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .link-use-case[href] { transition: none; }
  .button:hover { transform: none; }
}


/* ---------- 12. Mouvement : une seule règle pour tout le site ----------
   (voir assets/brolz-motion.js). Fondu + glissement de 16 px, 0,6 s,
   courbe douce ; la barre dégradée des titres se dessine juste après.
   Sans JavaScript ou avec « réduire les animations » : tout est visible. */

:root { --ui-ease: cubic-bezier(.22, .61, .36, 1); }

.ui-motion .ui-reveal {
  transition: opacity .6s var(--ui-ease), transform .6s var(--ui-ease);
  transition-delay: var(--ui-delay, 0ms);
}
/* !important : neutralise aussi les restes d'animations Webflow par classe */
.ui-motion .ui-reveal:not(.is-in) {
  opacity: 0 !important;
  transform: translateY(16px) !important;
}
.ui-motion .ui-reveal.is-in { opacity: 1 !important; transform: none !important; }

.ui-motion h2.heading.ui-reveal::after {
  transform-origin: left center;
  transition: transform .7s var(--ui-ease) calc(var(--ui-delay, 0ms) + .2s);
}
.ui-motion h2.heading.ui-reveal:not(.is-in)::after { transform: scaleX(0); }

/* Webflow anime encore 6 classes depuis son JavaScript (« glisser depuis le
   bas » au défilement, styles en ligne) : liste complète, figée et visible.
   Ces blocs ne doivent pas figurer dans les apparitions de brolz-motion.js. */
.features_list_wrapper, .img-in-card, .list-in-cell.mrgn,
.text-size-medium.quote, .text-size-small.quote.no-left-margin,
.text-size-medium.text-color-secondary { opacity: 1 !important; transform: none !important; }

/* survol : le même pour toutes les cartes cliquables */
.card-use-case, .home_features_card_css.click-features, .how_to_use_card {
  transition: box-shadow .2s ease-out, border-color .2s ease-out;
}
.card-use-case:hover { border-color: #c6d4e1; box-shadow: 0 8px 24px rgba(0, 47, 92, .08); }
.features-link:hover .home_features_card_css.click-features { box-shadow: 0 8px 24px rgba(0, 47, 92, .25); }

@media (prefers-reduced-motion: reduce) {
  .card-use-case, .home_features_card_css.click-features, .how_to_use_card { transition: none; }
}


/* ---------- 13. Pages intérieures (depuis Logiciel & App) ----------
   Composants Webflow partagés par Logiciel & App, Services, Utilisateurs,
   Offres, Cas d'usage… : bandeau d'ouverture clair, barre d'ancres collante,
   panneaux de fonctionnalités, panneau bleu nuit à cartes, encart SaaS,
   cartes « À découvrir ». */

/* bandeau d'ouverture : fond clair, pas de 80vh ni de 14 rem de marge */
.feature_hero_section.background-color-gd-bluelight {
  min-height: 0;
  padding-top: 4.5rem;            /* hauteur du menu fixe */
  background: var(--ui-light);
}
.feature_hero_section > .padding-global.no-padding-right {
  margin-top: 0;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-right: 2.5rem;
}
.feature_hero_component {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 4rem;
  align-items: center;
}
.feature_hero_component .feature_image_wrapper { height: auto; max-height: none; }
/* l'illustration est un carré à grandes marges transparentes : on la recadre
   sur sa zone utile (1120 × 692 px à partir de y = 308) */
.feature_hero_component .hero_feature_image {
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1200 / 692;
  object-fit: cover;
  object-position: 50% 60.6%;
}
.heading.hero { font-size: 3.25rem; line-height: 1.06; }
.feature_hero_content_wrapper .margin-bottom { margin-bottom: 1.75rem; }

/* première section après le bandeau : marge pleine */
.main-wrapper > .feature_analytics_section > .padding-global { padding-top: var(--ui-section); }

/* cartes : la carte-lien garde son sous-titre lisible, flèche sur la même ligne */
.home_features_card_css.click-features .text-size-small { color: var(--ui-on-dark); }
.home_features_card_css.click-features .text-size-medium br { display: none; }
.home_features_image._85.rounded { border-radius: var(--ui-r-card); }
/* cartes d'une même rangée à la même hauteur ; !important : Webflow les
   centre par des sélecteurs d'identifiant (#w-node-…) */
.home_features_card_wrapper > * { align-self: stretch !important; }
.home_features_card_css.click-features { min-height: 0; }
.features-link { display: flex; }
.features-link > .home_features_card_css { flex: 1; }

/* barre d'ancres des fonctionnalités : collée sous le menu */
.core_feature_component > .margin-top { margin-top: 2rem; }
.core_feature_tabs { top: 5.25rem; z-index: 50; }
.core_feature_tabs_menu {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  gap: .25rem;
  padding: .375rem;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 47, 92, .06);
}
.core_feature_tab-link {
  flex: 1 1 auto;
  padding: .5rem .75rem;
  border-radius: 999px;
  color: var(--ui-navy);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.core_feature_tab-link:hover { background: var(--ui-light); }
.core_feature_tab-link strong { font-weight: inherit; }   /* la version EN en mettait la moitié en gras */
.core_feature_tab-link.is-current { background: var(--ui-navy); color: #fff; }

/* panneaux de fonctionnalités : fond clair, sans vide autour du contenu */
.feature_core_content_wrapper,
.feature_core_content_wrapper.img-left {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 3.5rem;
  row-gap: 2rem;
  align-items: center;
  margin: 1.5rem 0 0;
  padding: 2.5rem 3rem;
  border: 0;
  border-radius: var(--ui-r-panel);
  background: var(--ui-light);
  scroll-margin-top: 9rem;        /* menu + barre d'ancres */
}
.feature_core_content_container { width: 100%; }
.feature_core_content_container h3.heading {
  font-size: 1.625rem;
  line-height: 1.2;
}
.feature_core_content_container .margin-bottom.margin-small { margin-bottom: 1.25rem; }
.feature_core_image_wrapper { justify-content: center; }
/* visuels : carrés de 1200 px dont seule une bande de 757 px est utile ;
   recadrés sur cette bande (deux visuels sont décalés de 23 px vers le haut) */
.feature_core_image {
  width: 100%;
  max-width: 25rem;
  height: auto;
  max-height: none;
  aspect-ratio: 1200 / 757;
  object-fit: cover;
}
:is(#GESTION, #SYNCHRO) .feature_core_image { object-position: 50% 44.9%; }

/* encadrés (intégration, « BROLZ combine… ») : filet vert */
:is(.feature_core_content_container, .feature_analytics_card, .cta_component:not(.shadow-large)) blockquote {
  margin: 1.25rem 0 0;
  padding: .125rem 0 .125rem 1rem;
  border-left: 3px solid var(--ui-green);
  color: var(--ui-text);
  font-size: var(--ui-fs);
  font-style: normal;
  line-height: var(--ui-lh);
}
blockquote .link { color: var(--ui-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* listes des pages intérieures : mêmes petits ronds bleus */
.list-in-cell, .list-2 {
  list-style: none;
  margin: .5rem 0 0;
  padding-left: .75rem;
  color: var(--ui-text);
  font-size: var(--ui-fs);
  line-height: 1.5;
}
.list-in-cell li, .list-2 li { position: relative; padding-left: 1rem; margin: .2rem 0; }
.list-in-cell li::before, .list-2 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-navy);
}
.list-2 strong { color: var(--ui-navy); }
.list-2 + p { margin-top: .75rem; }

/* « Flexible mais structurée » : panneau bleu nuit, titre centré (sans barre) */
.feature_why_us_component.background-color-gd-blue.shadow-medium {
  padding: 3.5rem 3rem 3rem;
  border: 0;
  border-radius: var(--ui-r-panel);
  box-shadow: none;
}
.feature_why_us_component > .margin-bottom { margin-bottom: 2.5rem; }
.feature_why_us_component h2 {
  color: #fff;
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
}
.feature_analytics_bento_wrapper .feature_analytics_card,
.feature_analytics_card._1.noimg,
.feature_analytics_card._2.noimg {
  padding: 1.75rem;
  border: 0;
  border-radius: var(--ui-r-card);
}
.feature_analytics_bento_wrapper .feature_analytics_card_content { padding: 0; }
.feature_analytics_card .text-size-medium.text-color-secondary { color: var(--ui-text); font-size: var(--ui-fs); line-height: var(--ui-lh); }
.feature_analytics_card .heading-style-h6 { color: var(--ui-navy); font-size: 1.125rem; font-weight: 700; }
.feature_analytics_card .margin-xsmall { margin-bottom: .75rem; }

/* surtitres (« Et demain ? », « À découvrir ») : texte cyan foncé, sans pastille */
.tag-wrapper { margin-bottom: .75rem; }
.tag-component {
  padding: 0;
  border: 0;
  background: none;
  color: #00628c;               /* cyan foncé : 6,7:1 sur blanc */
  font-size: .8125rem;
  letter-spacing: .1em;
}

/* encart SaaS : panneau clair, illustration à droite */
.cta_component.background-color-gd-blue:not(.shadow-large) {
  grid-template-columns: minmax(0, 1fr) 18rem;
  column-gap: 3.5rem;
  align-items: center;
  padding: 3.5rem;
  border: 0;
  border-radius: var(--ui-r-panel);
  background: var(--ui-light);
}
.cta_component:not(.shadow-large) .cta_content_wrapper { padding: 0; }
.cta_component:not(.shadow-large) .cta_content_wrapper .margin-medium { margin-bottom: 1.25rem; }
.cta_component:not(.shadow-large) .cta_content_wrapper .margin-top { margin-top: 2rem; }
.cta_component:not(.shadow-large) .quote._2rem { margin-top: 1.25rem; }
.cta_component:not(.shadow-large) .cta_image_wrapper.align-center { padding: 0; justify-content: center; }
.cta_component:not(.shadow-large) .cta_image.padding-right { margin: 0; padding: 0; border-radius: var(--ui-r-card); }
.subtitle-h1 { color: var(--ui-navy); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }

/* « À découvrir » : fond clair, cartes blanches compactes, icône à gauche */
.related_article_section { background: var(--ui-light); }
.main-wrapper > .related_article_section > .padding-global {
  padding-top: var(--ui-section);
  padding-bottom: var(--ui-section);
}
.related_article_section .margin-top.margin-medium { margin-top: 0; }
.blog_collection_list { gap: 1.5rem; }
.blog_collection_item { display: flex; }
.blog_thumbnail_wrapper.shadow-xsmall {
  display: block;
  min-height: 0;
  padding: 1.5rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  background: #fff;
  box-shadow: none;
  transition: box-shadow .2s ease-out, border-color .2s ease-out;
}
.blog_thumbnail_wrapper.shadow-xsmall:hover {
  border-color: #c6d4e1;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 47, 92, .08);
}
.blog_thumbnail_image_wrapper { justify-content: flex-start; border-radius: 0; }
.blog_thumbnail_image_wrapper img { width: 56px; height: 56px; }
.blog_thumbnail_wrapper .margin-top.margin-medium { margin-top: 1rem; }
.padding-xsmall.blog { padding: 0; }
.margin-bottom.margin-small.blog { margin-bottom: .375rem; }
.margin-bottom.margin-medium.blog { min-height: 0; margin-bottom: .5rem; }
.tag-wrapper.blog { margin-bottom: 0; }
.tag-component.blog { padding: 0; font-size: .75rem; letter-spacing: .08em; line-height: 1.4; text-align: left; }
.blog_thumbnail_wrapper .heading-style-h6 { color: var(--ui-navy); font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.text-size-medium.text-weight-medium.blog { color: var(--ui-text); font-size: .9375rem; font-weight: 400; line-height: 1.5; }

@media (min-width: 992px) and (max-width: 1199px) {
  .core_feature_tab-link { padding: .5rem; font-size: .8125rem; }
}

@media (max-width: 991px) {
  .feature_hero_component { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .feature_hero_component .hero_feature_image { max-width: 32rem; }
  .core_feature_tabs_menu { justify-content: flex-start; }
  .core_feature_tab-link { flex: 0 0 auto; }
  .feature_core_content_wrapper,
  .feature_core_content_wrapper.img-left { grid-template-columns: 1fr; padding: 2rem; }
  /* image toujours en tête quand le panneau passe sur une colonne */
  .feature_core_image_wrapper { order: -1; }
  .feature_analytics_card._1 { max-width: none; }
  .cta_component.background-color-gd-blue:not(.shadow-large) { grid-template-columns: minmax(0, 1fr) 14rem; column-gap: 2.5rem; padding: 3rem 2.5rem; }
}

@media (max-width: 767px) {
  .heading.hero { font-size: 2.25rem; }
  .feature_why_us_component h2 { font-size: 1.875rem; }
  .feature_why_us_component.background-color-gd-blue.shadow-medium { padding: 2.5rem 1.5rem 1.5rem; }
  .cta_component.background-color-gd-blue:not(.shadow-large) { grid-template-columns: 1fr; padding: 2.5rem 2rem; }
  .cta_component:not(.shadow-large) .cta_image_wrapper { display: none; }
}

@media (max-width: 479px) {
  .feature_hero_section > .padding-global.no-padding-right { padding: 2.5rem 1rem 3rem; }
  .heading.hero { font-size: 2.125rem; line-height: 1.08; }
  .feature_hero_content_wrapper .button-group,
  .feature_hero_content_wrapper .button { width: 100%; }

  .feature_core_content_wrapper,
  .feature_core_content_wrapper.img-left { padding: 1.25rem 1.25rem 1.5rem; row-gap: 1.5rem; border-radius: 20px; }
  .feature_core_content_container h3.heading { font-size: 1.375rem; }

  .home_features_image._85.rounded { width: 100%; max-height: 16rem; object-fit: cover; }
  .home_features_image._85.centered { max-width: 14rem; margin: 0 auto; }
  .home_features_card_css.click-features { min-height: 0; }
.features-link { display: flex; }
.features-link > .home_features_card_css { flex: 1; }

  .feature_why_us_component h2 { font-size: 1.75rem; }
  .feature_why_us_component.background-color-gd-blue.shadow-medium { padding: 2rem 1rem 1rem; border-radius: 20px; }
  .feature_analytics_bento_wrapper .feature_analytics_card,
  .feature_analytics_card._1.noimg,
  .feature_analytics_card._2.noimg { padding: 1.25rem; }

  .cta_component.background-color-gd-blue:not(.shadow-large) { padding: 2rem 1.25rem; border-radius: 20px; }
  .cta_component:not(.shadow-large) .button-group,
  .cta_component:not(.shadow-large) .button { width: 100%; }

  /* cartes « À découvrir » : icône à gauche, texte à droite */
  .blog_thumbnail_wrapper.shadow-xsmall {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 1rem;
    align-items: start;
    padding: 1.25rem;
  }
  .blog_thumbnail_image_wrapper img { width: 48px; height: 48px; }
  .blog_thumbnail_wrapper .margin-top.margin-medium { margin-top: 0; }
  .blog_collection_list { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .core_feature_tab-link, .blog_thumbnail_wrapper.shadow-xsmall { transition: none; }
}


/* ---------- 14. Bandeau de logos (tools/ui_lot.py : logos) ----------
   Deux copies de la même liste côte à côte ; chacune glisse de sa propre
   largeur, en boucle : la seconde prend exactement la place de la première,
   sans saut. Aucun JavaScript. Tourne en permanence (pas de pause au
   survol, choix de Guillaume) ; avec « réduire les animations », les logos
   s'affichent fixes et centrés. */

.ui-logos { padding: 3rem 0 1rem; overflow: hidden; }
.ui-logos__viewport {
  display: flex;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ui-logos__track {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: ui-logos 45s linear infinite;
}
.ui-logos__track li { flex: none; padding: 0 2.5rem; }
.ui-logos__track img {
  display: block;
  width: auto;
  height: 3rem;                 /* fichiers 246 × 72 : ≈ 164 px de large */
  filter: grayscale(1);
}
@keyframes ui-logos { to { transform: translateX(-100%); } }

@media (max-width: 479px) {
  .ui-logos { padding: 2rem 0 .5rem; }
  .ui-logos__track { animation-duration: 35s; }
  .ui-logos__track li { padding: 0 1.5rem; }
  .ui-logos__track img { height: 2.25rem; }
}

/* Cas d'usage : défilé des 35 pictos, même mécanique (≈ 29 px/s comme l'ancien
   défilé Webflow, qui revenait d'un coup au départ toutes les 45 s) */
.ui-pictos .ui-logos__track { animation-duration: 200s; }
.ui-pictos .ui-logos__track li { padding: 0 2rem; }
.ui-pictos .ui-logos__track img { width: 100px; height: 100px; filter: none; }
/* chaque picto mène à sa fiche : au survol le picto se soulève et son nom apparaît
   dessous ; le défilé continue (choix de Guillaume, 01/10), il ne s'arrête qu'au
   clavier, le temps d'atteindre le lien */
.ui-pictos:focus-within .ui-logos__track { animation-play-state: paused; }
/* le masque de fondu des bords (mask-image) empêche les clics d'atteindre les liens :
   ici, deux voiles blancs en dégradé, transparents aux clics, font le même effet */
.ui-pictos.ui-logos__viewport { -webkit-mask-image: none; mask-image: none; }
.logo_marquee_section-picto { position: relative; }
.logo_marquee_section-picto::before, .logo_marquee_section-picto::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 8%;
  pointer-events: none;
}
.logo_marquee_section-picto::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.logo_marquee_section-picto::after { right: 0; background: linear-gradient(-90deg, #fff, rgba(255, 255, 255, 0)); }
.ui-pictos .ui-logos__track li { padding-top: .5rem; padding-bottom: 2rem; }
.ui-picto-link { position: relative; display: block; border-radius: 16px; outline-offset: 4px; }
.ui-picto-link img { transition: transform .25s var(--ui-ease, ease-out), filter .25s ease-out; }
.ui-picto-link:hover img, .ui-picto-link:focus-visible img {
  transform: translateY(-6px) scale(1.12);
  filter: drop-shadow(0 10px 14px rgba(0, 47, 92, .22));
}
.ui-picto-link::after {
  content: attr(data-nom);
  position: absolute;
  left: 50%;
  top: calc(100% + .375rem);
  padding: .2rem .625rem;
  border-radius: 999px;
  background: var(--ui-navy);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity .2s ease-out, transform .2s ease-out;
  pointer-events: none;
}
.ui-picto-link:hover::after, .ui-picto-link:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.ui-picto-link:focus-visible { outline: 3px solid var(--ui-cyan); }
@media (max-width: 479px) {
  .ui-pictos .ui-logos__track { animation-duration: 160s; }
  .ui-pictos .ui-logos__track li { padding: 0 1.25rem; }
  .ui-pictos .ui-logos__track img { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-picto-link img, .ui-picto-link::after { transition: none; }
  /* pictos : une rangée fixe (35 pictos repliés feraient un mur) */
  .ui-pictos.ui-logos__viewport { justify-content: flex-start; }
  .ui-pictos .ui-logos__track { flex-wrap: nowrap; }
  .ui-logos__viewport { justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .ui-logos__track { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; animation: none; }
  .ui-logos__track[aria-hidden="true"] { display: none; }
}


/* ---------- 15. Bandeaux d'ouverture des pages intérieures ----------
   Services, Offres, Utilisateurs, Témoignages, Contact, Cas d'usage, pages
   légales : chaque export a son propre bandeau (company_hero, pricing_plan,
   contact_hero…). Même traitement que Logiciel & App : fond clair uni,
   64 px d'air sous le menu et au-dessus de la section suivante. */

.main-wrapper > .background-color-gd-bluelight:first-child:not(.home_hero_section) { background: var(--ui-light); }
.main-wrapper > :first-child:not(.home_hero_section) > .padding-global.padding-section-hero {
  padding-top: 8.5rem;            /* menu fixe (72 px) + 64 px */
  padding-bottom: 4rem;
}
.main-wrapper > :first-child:not(.home_hero_section, .navbar-fixed) + div > .padding-global { padding-top: var(--ui-section); }
/* texte et visuel : deux colonnes égales, centrées en hauteur */
.company_hero_section .feature_analytics_component {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 4rem;
  align-items: center;
}
.company_hero_section .feature_analytics_component .max-width-medium { max-width: 36rem; }
.company_hero_section .feature_analytics_image_wrapper.rounded { border-radius: var(--ui-r-card); }
.company_hero_section .text-size-large { font-size: 1.0625rem; line-height: 1.6; }
.heading.hero + .text-size-large, .company_hero_section .margin-bottom.margin-small { margin-bottom: 1.5rem; }

@media (max-width: 991px) {
  .company_hero_section .feature_analytics_component { grid-template-columns: 1fr; row-gap: 2.5rem; }
}
@media (max-width: 479px) {
  .main-wrapper > :first-child:not(.home_hero_section) > .padding-global.padding-section-hero { padding: 6.5rem 1rem 3rem; }
}


/* ---------- 16. Services ---------- */

/* trois formats : cartes blanches, texte à gauche, citation calée en bas */
.brix---card-link-content-center {
  align-items: stretch;
  padding: 1.75rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  background: #fff;
  box-shadow: none;
  color: var(--ui-text);
  text-align: left;
}
.img-services-div { display: flex; justify-content: center; height: auto; margin-bottom: 1.25rem; }
.img-services-div img.brix---mg-bottom-24px-3 {
  width: auto;
  max-width: 100%;
  height: 11rem;
  margin: 0;
  object-fit: contain;
}
.brix---card-link-content-center .brix---mg-bottom-8px-3 { margin-bottom: .75rem; }
.brix---card-link-content-center .heading-style-h6 {
  color: var(--ui-navy);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
.div-in-card, .list-in-cell-div { min-height: 0; }
.div-in-card .text-size-medium.text-color-secondary { color: var(--ui-text); font-size: var(--ui-fs); line-height: var(--ui-lh); }
.list-in-cell.mrgn { margin-left: 0; font-size: var(--ui-fs); }
.list-in-cell .list-item { color: inherit; font-weight: inherit; }
.below-card-div { display: block; margin-top: auto; padding-top: 1.5rem; }
.below-card-div .text-size-small.quote.no-left-margin {
  margin: 0;
  padding: .125rem 0 .125rem 1rem;
  border-left: 3px solid var(--ui-green);
  color: var(--ui-navy);
  font-size: var(--ui-fs);
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
  text-align: left;
}
.home_features_component ._50px { height: 1.75rem; }

/* « À découvrir » rangé dans la section précédente (Services, Offres) */
.cta_section > .related_article_section > .padding-global {
  padding-top: var(--ui-section);
  padding-bottom: var(--ui-section);
}
.cta_section > .padding-global:has(+ .related_article_section) { padding-bottom: var(--ui-section); }

@media (max-width: 479px) {
  .brix---card-link-content-center { padding: 1.25rem; }
  .img-services-div img.brix---mg-bottom-24px-3 { height: 9rem; }
}


/* ---------- 17. Offres ---------- */

/* bandeau : l'illustration des médailles sans cadre, le texte à côté */
.company_hero_component { grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr); column-gap: 4rem; align-items: center; }
.company_hero_image_wrapper-2 { padding: 0; border: 0; border-radius: 0; background: none; }
.company_hero_image.contain { height: auto; border-radius: 0; }
.company_hero_content_wrapper > .margin-bottom.margin-xlarge { margin-bottom: 0; }
.company_hero_content_wrapper .text-size-large { font-size: 1.0625rem; line-height: 1.6; }

/* tableau des offres (bureau) : filets fins, rangées alternées claires,
   en-têtes de colonnes collés sous le menu pendant le défilement */
.brix---section { padding: 0; font-family: inherit; }
.brix---container-default {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  overflow: clip;                 /* garde les angles sans casser position: sticky */
  background: #fff;
}
.brix---pricing-table-top,
.brix---pricing-table-top-first,
.brix---pricing-table-top-featured {
  top: 4.5rem;
  min-height: 0;
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid var(--ui-line);
  background: #fff;
}
:is(.brix---pricing-table-top, .brix---pricing-table-top-featured) .brix---mg-bottom-8px { margin-bottom: .375rem; }
:is(.brix---pricing-table-top, .brix---pricing-table-top-featured) .brix---mg-bottom-16px { margin-bottom: 0; }
:is(.brix---pricing-table-top, .brix---pricing-table-top-featured) .brix---text-200 { font-size: 1.75rem; line-height: 1; }  /* médaille : taille d'icône */
.brix---text-400-bold { color: var(--ui-navy); font-size: 1.125rem; line-height: 1.3; }
.brix---pricing-content-wrapper,
.brix---pricing-content-wrapper-empty,
.brix---pricing-content-wrapper-left {
  min-height: 3rem;
  padding: .625rem 1rem;
  border-bottom: 1px solid var(--ui-line);
}
.brix---pricing-content-wrapper-left { padding-left: 1.25rem; }
.brix---pricing-content-wrapper._150px-minh,
.brix---pricing-content-wrapper._150px-minh.lightblue-bg,
.brix---pricing-content-wrapper-left._150px-minh,
.brix---pricing-content-wrapper-left._150px-minh.lightblue-bg { min-height: 4.5rem; }
:is(.brix---pricing-content-wrapper, .brix---pricing-content-wrapper-empty,
    .brix---pricing-content-wrapper-left).lightblue-bg { background-color: var(--ui-light); }
.brix---text-300-medium { padding-left: 0; color: var(--ui-text); font-size: .9375rem; line-height: 1.4; }
.brix---text-300-medium.nopd { color: var(--ui-navy); font-weight: 600; }
.brix---pricing-content-wrapper .brix---text-200 { color: var(--ui-text); font-size: .9375rem; line-height: 1.45; }
.brix---pricing-content-wrapper .brix---text-200 strong { color: var(--ui-navy); }
.brix---pricing-content-wrapper img, .brix---pricing-content-wrapper-empty img { width: 22px; height: 22px; }
/* bureau : chaque colonne est une pile de cases indépendante ; hauteurs
   fixes pour que les rangées restent alignées d'une colonne à l'autre
   (!important : Webflow pose des min-height de 55 à 125 px selon les cases) */
@media (min-width: 992px) {
  .brix---pricing-table-top, .brix---pricing-table-top-first,
  .brix---pricing-table-top-featured { height: 6.5rem; min-height: 0 !important; justify-content: center; }
  .brix---pricing-content-wrapper, .brix---pricing-content-wrapper-empty,
  .brix---pricing-content-wrapper-left { height: 3rem; min-height: 0 !important; }
  .brix---pricing-content-wrapper._150px-minh, .brix---pricing-content-wrapper-left._150px-minh { height: 4.5rem; }
}
/* notes (1) (2) sous le tableau : lisibles */
.section:has(.note-pricing) { margin-top: .75rem; }
.text-size-medium.note-pricing { color: var(--ui-muted); font-size: .8125rem; line-height: 1.5; text-align: left; }

/* grille tarifaire : panneau bleu nuit comme « L'appui terrain » */
.cta_component-2.background-color-gd-blue.shadow-large {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: 3.5rem;
  align-items: center;
  padding: 3.5rem;
  border: 0;
  border-radius: var(--ui-r-panel);
  background: var(--ui-navy);
  box-shadow: none;
}
.cta_component-2 .cta_content_wrapper { padding: 0; }
.cta_component-2 .heading-style-h2 {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
}
.cta_component-2 .text-size-medium-2 { color: var(--ui-on-dark); font-size: var(--ui-fs); line-height: 1.6; }
.cta_component-2 .white-list { color: var(--ui-on-dark); margin-top: .5rem; }
.cta_component-2 .margin-top.margin-large { margin-top: 2rem; }
.cta_component-2 .cta_image_wrapper { padding: 0; }
.cta_component-2 .cta_image { border-radius: 12px; }
/* boutons : la grille tarifaire en principal, l'appel en pilule blanche */
.button-group-2 { gap: .75rem; }
.button-2 {
  min-height: 3rem;
  padding: .6875rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--ui-green);
  background-image: var(--ui-grad);
  box-shadow: none;
  color: var(--ui-navy);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.button-2:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.button-2:focus-visible { outline: 3px solid var(--ui-cyan); outline-offset: 3px; }
.button-2.is-secondary { background: #fff; border: 0; color: var(--ui-navy); box-shadow: none; }

/* tablette et mobile : le tableau devient une carte par offre,
   « libellé … valeur » sur une ligne (au lieu de 4 colonnes de 12 cases) */
@media (max-width: 991px) {
  .brix---container-default { border: 0; border-radius: 0; background: none; overflow: visible; }
  .brix---grid-4-columns-pricing-tablet { display: none; }
  .brix---grid-pricing-phone {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
  }
  .brix---grid-pricing-phone > .brix---pricing-column-first,
  .brix---grid-pricing-phone > .brix---pricing-column-featured,
  .brix---grid-pricing-phone > .brix---pricing-column:last-child,
  .brix---grid-pricing-phone .brix---pricing-content-wrapper-empty { display: none; }
  .brix---grid-pricing-phone > .brix---pricing-column {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-card);
    background: #fff;
    overflow: hidden;
  }
  .brix---grid-pricing-phone .brix---pricing-table-top {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .625rem;
    padding: 1.25rem 1.25rem .25rem;
    border: 0;
  }
  .brix---grid-pricing-phone .brix---pricing-table-top .brix---mg-bottom-8px { margin: 0; }
  .brix---grid-pricing-phone .brix---pricing-content-wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 2.75rem;
    padding: .5rem 1.25rem;
    background: none;
    text-align: left;
  }
  .brix---grid-pricing-phone .brix---pricing-content-wrapper._150px-minh {
    display: block;
    min-height: 0;
    padding: 0 1.25rem 1rem;
    border-bottom: 1px solid var(--ui-line);
  }
  .brix---grid-pricing-phone .brix---pricing-content-wrapper._150px-minh .brix---text-200 { text-align: left; }
  .brix---grid-pricing-phone .brix---pricing-content-wrapper:last-child { border-bottom: 0; }
  .brix---grid-pricing-phone .brix---pricing-v8-title-table { display: block; margin: 0; }
  .brix---grid-pricing-phone .brix---text-300-medium { font-size: .9375rem; line-height: 1.35; }
  .brix---grid-pricing-phone .brix---text-300-medium.nopd { text-align: right; }
  .company_hero_component { display: grid; grid-template-columns: 1fr; row-gap: 2rem; }
  .company_hero_image_wrapper-2 { max-width: 16rem; }
  .cta_component-2.background-color-gd-blue.shadow-large { grid-template-columns: 1fr; padding: 3rem 2.5rem; row-gap: 2.5rem; }
}
@media (max-width: 767px) {
  .brix---grid-pricing-phone { grid-template-columns: 1fr; }
  .cta_component-2 .heading-style-h2 { font-size: 1.875rem; }
}
@media (max-width: 479px) {
  .brix---container-default { padding: 0; }
  .company_hero_image_wrapper-2 { max-width: 12rem; }
  .cta_component-2.background-color-gd-blue.shadow-large { padding: 2rem 1.25rem; border-radius: 20px; }
  .cta_component-2 .heading-style-h2 { font-size: 1.75rem; }
  .cta_component-2 .text-size-medium-2 { font-size: var(--ui-fs); }
  .button-group-2, .button-group-2 .button-2 { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .button-2 { transition: none; }
  .button-2:hover { transform: none; }
}


/* ---------- 18. Utilisateurs ---------- */

/* bandeau : vidéo d'ambiance à gauche, centrée sur le texte */
.feature_analytics_section .home_features_component.auto { column-gap: 4rem; align-items: center; }
.home_features_bgvid_wrapper { align-self: center; }
.home_features_bgvid_wrapper .background-video.rounded { border-radius: var(--ui-r-card); }
.feature_analytics_section .max-width-large > ._25px { display: none; }

/* barre d'ancres en tête de section : pas de marge en plus du rythme */
.core_feature_component > .margin-top:first-child { margin-top: 0; }

/* panneaux « pour qui » : intro, coches, phrase-clé */
.feature_core_content_container > .text-size-medium { color: var(--ui-text); font-size: var(--ui-fs); line-height: var(--ui-lh); }
.feature_core_content_container > .text-size-medium strong { color: var(--ui-navy); }
.feature_core_content_container > :is(p, blockquote) + .features_list_wrapper,
.feature_core_content_container > .text-size-medium + .features_list_wrapper { margin-top: .875rem; }
.features_list_wrapper > ._25px { display: none; }
.home_features_list > div.text-weight-semibold { font-size: inherit; line-height: inherit; }  /* bat les tailles Webflow sur mobile */
.feature_core_content_container > ._25px { height: 1rem; }
.feature_core_content_container > .features_list_wrapper + p { margin-top: 1.25rem; }
.feature_core_content_container blockquote.text-size-medium.text-color-secondary { font-weight: 600; color: var(--ui-navy); }
.feature_core_image.rounded { border-radius: 12px; }

/* texte en gras sur fond bleu nuit : blanc (le bleu nuit de la règle
   générale le rendait invisible, ex. « 10 ou 500 personnes ») */
:is(.home_hero_component, .brolz-testimonial, .home_features_list_component,
    .cta_component.shadow-large, .cta_component-2, .feature_why_us_component) :is(p, .paragraph, blockquote) strong { color: #fff; }
.cta_component.shadow-large blockquote a { color: #fff; }

@media (max-width: 767px) {
  /* la vidéo d'ambiance fait 0 px de haut sur mobile dans l'export : retirée
     proprement (plus d'espace vide sous le texte) */
  .feature_analytics_section .home_features_bgvid_wrapper { display: none; }
}


/* ---------- 19. Témoignages ----------
   Composants « tm-… » maison (styles en ligne dans la page) : on ne fait
   que les aligner sur le reste du site. Le rail de vidéos épinglé (défilement
   horizontal pendant qu'on descend) est conservé tel quel. */

/* bandeau : bouton à sa taille, pas en pleine largeur */
.company_hero_section .max-width-large > .margin-top.margin-large { margin-top: 2rem; align-self: flex-start; }
.tm-quote-grid { gap: 1.5rem; margin-top: 3rem; }
.tm-quote-card {
  gap: .875rem;
  padding: 1.5rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  box-shadow: none;
}
.tm-quote-logo img { max-height: 32px; }
.tm-quote-text { color: var(--ui-navy); font-size: var(--ui-fs); font-weight: 500; line-height: var(--ui-lh); }
.tm-quote-author { padding-top: .875rem; border-top-color: var(--ui-line); color: var(--ui-muted); font-size: .875rem; }
.tm-quote-author strong { color: var(--ui-navy); }

/* Veolia : vidéo et texte, puis résultats et photo */
.tm-split { column-gap: 4rem; }
.tm-split + .tm-split { margin-top: 4rem; }
.tm-split-media { border-radius: var(--ui-r-card); }
/* la photo ne dépasse pas la hauteur de la liste voisine */
.tm-split.is-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); }
.tm-split-media.is-photo { aspect-ratio: 3 / 2; }
.tm-split-body .paragraph { color: var(--ui-text); }
.tm-split-body .quote {
  margin: 1.25rem 0 0;
  padding: .125rem 0 .125rem 1rem;
  border-left: 3px solid var(--ui-green);
  color: var(--ui-navy);
  font-size: var(--ui-fs);
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
}
.tm-split-body .heading-style-h4 { color: var(--ui-navy); font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; }

/* rail des vidéos : légendes lisibles, repère discret */
.tm-short-caption { color: var(--ui-navy); font-size: .875rem; }
.tm-short-media { border-color: var(--ui-line); border-radius: 12px; }
.tm-pin-jauge { background: var(--ui-line); }
.tm-pin-jauge span { background: var(--ui-navy); }
/* épinglé, le bloc reste sous le menu fixe (72 px) */
.tm-pin-track[data-pin="on"] .tm-pin { padding-top: 4.5rem; box-sizing: border-box; }

/* témoignages écrits : dans le conteneur de 1 200 px comme le reste */
.home_how_to_use_section .home_features_card_wrapper { max-width: 75rem; margin: 0 auto; gap: 1.25rem; }
.home_how_to_use_section .home_features_card { min-height: 0; }
.home_how_to_use_section .home_features_card > .margin-bottom.margin-xxsmall { margin-bottom: .75rem; }
.home_features_card blockquote.quote {
  margin: 0;
  padding: .125rem 0 .125rem 1rem;
  border-left: 3px solid var(--ui-green);
  color: var(--ui-text);
  font-size: var(--ui-fs);
  font-style: normal;
  line-height: var(--ui-lh);
}
.home_how_to_use_section:has(.home_features_card_wrapper) .home_how_to_use_component > ._25px { height: 2rem; }

@media (max-width: 991px) {
  .tm-split.is-reverse { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .company_hero_section .max-width-large > .margin-top.margin-large { align-self: stretch; }
  .company_hero_section .max-width-large > .margin-top.margin-large .button { width: 100%; }
  .tm-quote-card { padding: 1.25rem; }
}


/* ---------- 19 bis. Témoignages refaits (ui_lot.py, étape 16) ----------
   Seul en-tête bleu nuit du site ; les 3 citations en grandes cartes qui
   débordent du bandeau ; étude de cas Veolia ; résultats en tuiles numérotées ;
   vidéos courtes en cartes où la tagline prime, lues dans une fenêtre. */

.ui-tm-hero {
  position: relative;
  /* le bleu nuit s'arrête à mi-hauteur des cartes : elles chevauchent la page */
  background: linear-gradient(var(--ui-navy) calc(100% - 7rem), transparent 0);
  color: #fff;
}
.ui-tm-hero::before {                 /* lueur discrète aux couleurs de la charte */
  content: "";
  position: absolute;
  inset: 0 0 7rem;
  background: radial-gradient(60rem 22rem at 50% 0%, rgba(151, 191, 13, .14), transparent 70%);
  pointer-events: none;
}
.ui-tm-hero > .padding-global { position: relative; padding-top: 9.5rem; padding-bottom: 0; }
.ui-tm-hero__head { max-width: 46rem; margin: 0 auto; text-align: center; }
.ui-tm-hero :is(.heading.hero, .text-size-large) { text-align: center; }
.ui-tm-hero .heading.hero { color: #fff; font-size: 3.5rem; font-weight: 800; letter-spacing: -.03em; }
.ui-tm-hero .heading.hero strong { font-weight: inherit; }
.ui-tm-hero .heading.hero .brand-shade {
  color: var(--ui-yellow);
  background-image: var(--ui-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ui-tm-hero .text-size-large { margin: 1.25rem auto 0; color: var(--ui-on-dark); font-size: 1.125rem; line-height: 1.6; text-wrap: balance; }
.ui-tm-hero .text-size-large strong { color: #fff; }

/* les 3 citations : à cheval sur le bandeau et la section suivante */
.ui-tm-quotes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.ui-tm-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 2.75rem 2rem 1.75rem;
  border-radius: var(--ui-r-panel);
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 47, 92, .14);
  color: var(--ui-navy);
}
.ui-tm-quote:nth-child(2) { transform: translateY(1.5rem); }   /* léger décalage : effet « éventail » */
.ui-tm-quote__mark {
  position: absolute;
  top: -1.75rem;
  left: 1.75rem;
  font-size: 6rem;
  font-weight: 800;
  line-height: 1;
  background: var(--ui-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ui-tm-quote__text {
  flex: 1;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ui-navy);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-wrap: pretty;               /* pas de « » » seul sur sa ligne */
}
.ui-tm-quote__who {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font-size: .875rem;
  line-height: 1.4;
  text-align: left;
}
.ui-tm-quote__logo img { display: block; width: auto; height: 1.75rem; max-width: 6.5rem; object-fit: contain; }
.ui-tm-quote__name strong { display: block; color: var(--ui-navy); font-size: .9375rem; }

/* étude de cas Veolia */
.ui-tm-case > .padding-global { padding-top: var(--ui-section); padding-bottom: var(--ui-section); }
.ui-tm-case__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 4rem;
}
.ui-tm-case__video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ui-r-panel);
  background: var(--ui-navy);
  box-shadow: 0 18px 40px rgba(0, 47, 92, .12);
}
.ui-tm-case__body .heading { margin-bottom: 1.25rem; font-size: 2rem; }
.ui-tm-case__body .heading::after { display: none; }
.ui-tm-case__body .paragraph { color: var(--ui-text); }
.ui-tm-case__quote {
  margin: 1.5rem 0 0;
  padding: 0 0 0 1.125rem;
  border-left: 3px solid var(--ui-green);
  color: var(--ui-navy);
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
}

/* résultats clés : 6 tuiles numérotées (numéros en CSS, pas dans le texte) */
.ui-tm-results { margin-top: 4.5rem; }
.ui-tm-results__title {
  margin: 0 0 1.5rem;
  color: var(--ui-navy);
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.ui-tm-results__title strong { font-weight: inherit; }
.ui-tm-results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tm-res;
}
.ui-tm-results__grid li {
  counter-increment: tm-res;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 5.5rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-radius: var(--ui-r-card);
  background: var(--ui-light);
  color: var(--ui-navy);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.ui-tm-results__grid li::before {
  content: counter(tm-res, decimal-leading-zero);
  flex: none;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
  background: var(--ui-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* vidéos courtes : la tagline d'abord, la vignette en appui */
.ui-tm-shorts { background: var(--ui-light); }
.ui-tm-shorts > .padding-global { padding-top: var(--ui-section); padding-bottom: var(--ui-section); }
.ui-tm-shorts__head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.ui-tm-shorts__head .heading { text-wrap: balance; }
.ui-tm-shorts__head .text-size-large { margin-top: 1rem; text-align: center; text-wrap: balance; }
.ui-tm-shorts__head .brand-shade { color: var(--ui-navy); }
.ui-tm-shorts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-tm-shorts__grid li { margin: 0; padding: 0; }
.ui-tm-shorts__grid li::before { display: none; }
.ui-tm-short {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  padding: .875rem 1.5rem .875rem .875rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  background: #fff;
  color: var(--ui-navy);
  text-decoration: none;
  transition: box-shadow .2s ease-out, border-color .2s ease-out;
}
.ui-tm-short:hover { border-color: #c6d4e1; box-shadow: 0 8px 24px rgba(0, 47, 92, .08); }
.ui-tm-short:focus-visible { outline: 3px solid var(--ui-cyan); outline-offset: 2px; }
.ui-tm-short__thumb {
  position: relative;
  flex: none;
  width: 5.5rem;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ui-navy);
}
.ui-tm-short__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ui-tm-short__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  transform: translate(-50%, -50%);
  transition: transform .2s ease-out;
}
.ui-tm-short__play::after {          /* triangle « lecture » */
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  border-style: solid;
  border-width: .4rem 0 .4rem .65rem;
  border-color: transparent transparent transparent var(--ui-navy);
  transform: translate(-50%, -50%);
}
.ui-tm-short:hover .ui-tm-short__play { transform: translate(-50%, -50%) scale(1.1); }
.ui-tm-short__text { display: grid; gap: .5rem; }
.ui-tm-short__caption { font-size: 1.1875rem; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.ui-tm-short__cta { color: var(--ui-muted); font-size: .8125rem; font-weight: 600; }
.ui-tm-short__cta::after { content: " →"; }

/* fenêtre de lecture */
.ui-tm-player {
  width: min(26rem, 92vw);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--ui-r-panel);
  background: #000;
  overflow: visible;
}
.ui-tm-player::backdrop { background: rgba(0, 20, 40, .82); }
.ui-tm-player video { display: block; width: 100%; max-height: 92vh; border-radius: var(--ui-r-panel); }
.ui-tm-player__close {
  position: absolute;
  top: -.75rem;
  right: -.75rem;
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.ui-tm-player__close::before, .ui-tm-player__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 2px;
  background: var(--ui-navy);
  transform: translate(-50%, -50%) rotate(45deg);
}
.ui-tm-player__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* bloc final : panneau dégradé, 4e carte de témoignage « à écrire » */
.cta_component.ui-tm-cta {
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  align-items: center;
  column-gap: 4rem;
  padding: 3.5rem 4rem;
  border-radius: var(--ui-r-panel);
  background: var(--ui-grad);
  box-shadow: none;
  overflow: hidden;
}
.ui-tm-cta .cta_content_wrapper { padding: 0; }
.ui-tm-cta .heading-style-h3.white { color: var(--ui-navy); font-size: 2.5rem; line-height: 1.1; }
.ui-tm-cta .heading-style-h3 .brand-shade {
  color: var(--ui-navy);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
  text-decoration-color: #fff;
}
.ui-tm-cta .button-group { justify-content: flex-start; gap: .75rem; }
.ui-tm-cta .button.is-secondary { border: 1.5px solid var(--ui-navy); background: transparent; color: var(--ui-navy); }
.ui-tm-cta .button.is-secondary:first-child { background: var(--ui-navy); color: #fff; }
.ui-tm-cta__visual { display: flex; justify-content: center; }
.ui-tm-cta__card {
  position: relative;
  display: grid;
  gap: .75rem;
  width: 100%;
  max-width: 21rem;
  padding: 2.75rem 2rem 1.75rem;
  border-radius: var(--ui-r-panel);
  background: #fff;
  box-shadow: 0 24px 48px rgba(0, 47, 92, .22);
  transform: rotate(-3deg);
}
.ui-tm-cta__line { display: block; height: .75rem; border-radius: 999px; background: #e6edf3; }
.ui-tm-cta__line.is-short { width: 62%; }
.ui-tm-cta__who {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ui-line);
}
.ui-tm-cta__avatar {
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--ui-navy);
}
.ui-tm-cta__avatar::after {        /* « ? » : la place est libre (décor, hors texte) */
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ui-yellow);
  font-size: 1.25rem;
  font-weight: 800;
}
.ui-tm-cta__line.is-name { flex: 1; max-width: 9rem; background: #d5e0eb; }

@media (max-width: 991px) {
  .cta_component.ui-tm-cta { grid-template-columns: 1fr; row-gap: 2.5rem; padding: 3rem 2.5rem; }
  .ui-tm-cta__visual { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .cta_component.ui-tm-cta { padding: 2.5rem 1.5rem; border-radius: 20px; }
  .ui-tm-cta .heading-style-h3.white { font-size: 1.875rem; }
  .ui-tm-cta__card { max-width: 17rem; padding: 2.5rem 1.5rem 1.5rem; }
}

@media (max-width: 991px) {
  .ui-tm-quotes { grid-template-columns: 1fr; row-gap: 2.75rem; max-width: 34rem; margin-left: auto; margin-right: auto; }
  .ui-tm-quote:nth-child(2) { transform: none; }
  .ui-tm-case__grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .ui-tm-results__grid, .ui-tm-shorts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ui-tm-hero > .padding-global { padding-top: 7.5rem; }
  .ui-tm-hero .heading.hero { font-size: 2.5rem; }
  .ui-tm-quote { padding: 2.5rem 1.5rem 1.5rem; }
  .ui-tm-quote__text { font-size: 1.0625rem; }
  .ui-tm-case__body .heading { font-size: 1.625rem; }
  .ui-tm-results__grid, .ui-tm-shorts__grid { grid-template-columns: 1fr; }
  .ui-tm-short__caption { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-tm-short, .ui-tm-short__play { transition: none; }
}


/* ---------- 20. Communauté ---------- */

/* bandeau : fond clair comme les autres pages, photo du stand sans cadre */
.main-wrapper > .company_hero_section:first-child { background: var(--ui-light); }
.company_hero_image_wrapper { padding: 0; border: 0; border-radius: var(--ui-r-card); background: none; overflow: hidden; }
.company_hero_image_wrapper .company_hero_image { border-radius: var(--ui-r-card); }
.company_hero_content_wrapper > .margin-bottom.margin-xlarge:not(:last-child) { margin-bottom: 1.75rem; }
.company_hero_content_wrapper .home_features_card_wrapper { gap: 1rem; }
.company_hero_content_wrapper .home_features_card { padding: 1.125rem 1.25rem; background: #fff; }
.company_hero_content_wrapper .home_features_card .text-size-medium.text-weight-medium { color: var(--ui-navy); font-weight: 700; }
.company_hero_content_wrapper .home_features_card .text-size-small { color: var(--ui-text); }
/* la 4e carte est un lien vers LinkedIn : même largeur que les autres, survol des cartes */
.features-link > .home_features_card { flex: 1; transition: box-shadow .2s ease-out, border-color .2s ease-out; }
.features-link:hover > .home_features_card { border-color: #c6d4e1; box-shadow: 0 8px 24px rgba(0, 47, 92, .08); }

/* « Notre canal principal ? LinkedIn » : le titre passe au-dessus, les deux
   cartes en pleine largeur (plus de colonne vide à droite) */
.company_our_journey_component { flex-direction: column; row-gap: 1.75rem; }
.company_our_journey_component > .max-width-medium { order: -1; max-width: none; }
.our_company_sticky_content { position: static; }
.our_company_sticky_content h2 br { display: none; }
.our_company_sticky_content h2 .bluelkd { padding: 0; border-radius: 0; background: none; color: inherit; }
.company_our_journey_content_wrapper { gap: 1.5rem; }
.company_our_journey_card.shadow-medium {
  padding: 2rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  box-shadow: none;
}
.company_our_journey_card > .margin-top.margin-medium { margin-top: 0; }
.company_our_journey_card .heading-style-h6 { color: var(--ui-navy); font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.company_our_journey_card .text-size-medium { color: var(--ui-text); font-size: var(--ui-fs); font-style: normal; }
.company_our_journey_card .text-size-medium a { color: var(--ui-navy); font-weight: 600; }
/* carte 1 : texte à gauche, capture de la page LinkedIn à droite */
.company_our_journey_card:first-child:has(> .our_journey_card_image) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  column-gap: 3rem;
  align-items: center;
}
.our_journey_card_image { border-radius: 12px; border: 1px solid var(--ui-line); }
.company_our_journey_card .lkd-code { margin: 1.5rem 0 0; }
.company_our_journey_card .li-feed { margin-top: 0; }

@media (max-width: 991px) {
  .company_our_journey_card:first-child:has(> .our_journey_card_image) { grid-template-columns: 1fr; row-gap: 1.5rem; }
}
@media (max-width: 479px) {
  .company_hero_image_wrapper.background-color-gd-bluelight { height: auto; }
  .company_our_journey_card.shadow-medium { padding: 1.25rem; }
}


/* ---------- 20 bis. Communauté refaite (ui_lot.py, étape 18) ----------
   Montrer une équipe vivante : patchwork de 8 photos façon polaroïd, les 4
   thèmes en cartes sobres, puis le fil LinkedIn sur blanc. */

.ui-co-hero { position: relative; overflow: hidden; background: #fff; }
.ui-co-hero::before {               /* halo discret aux couleurs de la charte */
  content: "";
  position: absolute;
  right: -10rem;
  top: -6rem;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 223, 0, .16), rgba(151, 191, 13, .08) 60%, transparent);
  pointer-events: none;
}
.ui-co-hero > .padding-global { position: relative; padding-top: 9rem; padding-bottom: calc(var(--ui-section) / 2); }
.ui-co-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  column-gap: 4rem;
}
.ui-co-hero .heading.hero { font-size: 3.5rem; letter-spacing: -.03em; }
.ui-co-hero .heading.hero .brand-shade {     /* exception validée : mot-clé en dégradé sur blanc */
  color: var(--ui-yellow);
  background-image: var(--ui-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ui-co-hero .text-size-large { margin-top: 1.25rem; color: var(--ui-text); font-size: 1.125rem; line-height: 1.6; }
.ui-co-hero .text-size-large + .text-size-large { margin-top: .75rem; color: var(--ui-navy); font-weight: 700; }

/* les 4 thèmes : cartes sobres, comme sur le reste du site (01/10) */
.ui-co-stickers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.ui-co-sticker { margin: 0; padding: 0; }
.ui-co-sticker::before { display: none; }
.ui-co-sticker > * {
  display: grid;
  gap: .25rem;
  height: 100%;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  background: #fff;
  color: var(--ui-navy);
  text-decoration: none;
  transition: box-shadow .2s ease-out, border-color .2s ease-out;
}
.ui-co-sticker strong { font-size: 1rem; font-weight: 700; }
.ui-co-sticker span { color: var(--ui-text); font-size: .9375rem; line-height: 1.45; }
.ui-co-sticker a:hover { border-color: #c6d4e1; box-shadow: 0 8px 24px rgba(0, 47, 92, .08); }

/* patchwork de 8 photos façon polaroïd (ordre : CO_COLLAGE de ui_lot.py) ;
   l'atelier (1) et le scan des cartes (3) en grand */
.ui-co-collage { position: relative; height: 40rem; }
.ui-co-polaroid {
  position: absolute;
  margin: 0;
  padding: .5rem .5rem 1.75rem;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 47, 92, .18);
  transition: transform .3s var(--ui-ease, ease-out);
}
.ui-co-polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.ui-co-polaroid:nth-child(-n+3) { aspect-ratio: 4 / 3.35; }
.ui-co-polaroid:nth-child(n+4) { aspect-ratio: 3 / 4.4; }
.ui-co-polaroid:nth-child(1) { left: 0;   top: 3%;    width: 58%; transform: rotate(-3deg); z-index: 3; }
.ui-co-polaroid:nth-child(2) { right: 0;  top: 0;     width: 44%; transform: rotate(4deg);  z-index: 2; }
.ui-co-polaroid:nth-child(3) { left: 27%; top: 35%;   width: 52%; transform: rotate(-1.5deg); z-index: 5; }
.ui-co-polaroid:nth-child(4) { left: 1%;  top: 40%;   width: 25%; transform: rotate(5deg);  z-index: 4; }
.ui-co-polaroid:nth-child(5) { right: 0;  top: 36%;   width: 24%; transform: rotate(-5deg); z-index: 4; }
.ui-co-polaroid:nth-child(6) { left: 5%;  bottom: 0;  width: 22%; transform: rotate(-6deg); z-index: 6; }
.ui-co-polaroid:nth-child(7) { left: 39%; bottom: 0;  width: 21%; transform: rotate(3deg);  z-index: 6; }
.ui-co-polaroid:nth-child(8) { right: 5%; bottom: 1%; width: 22%; transform: rotate(6deg);  z-index: 6; }
.ui-co-polaroid:hover { z-index: 10; transform: rotate(0) scale(1.06); }

/* LinkedIn : sur blanc (le bandeau de logos qui suit n'est plus coincé entre deux
   fonds clairs) ; titre, puis texte, puis posts, dans une seule colonne — le titre
   est en fin de bloc dans le HTML (ordre d'origine), remonté par la grille */
.ui-co-linkedin { background: #fff; }
.ui-co-linkedin > .padding-global {   /* blanc contre blanc : 72 px d'écart en tout (règle du site) */
  padding-top: calc(var(--ui-section) / 2);
  padding-bottom: calc(var(--ui-section) / 2);
}
.ui-co-li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titre" "intro" "posts";
}
.ui-co-li__h2 { grid-area: titre; margin: 0 0 1.25rem; }
.ui-co-li__h2 br { display: none; }
.ui-co-li__h2 .bluelkd { padding: 0; border-radius: 0; background: none; color: inherit; }
.ui-co-li__intro { grid-area: intro; max-width: 46rem; }
.ui-co-li__intro p { margin: 0; color: var(--ui-text); font-size: var(--ui-fs); line-height: var(--ui-lh); }
.ui-co-li__intro p + p { margin-top: .75rem; }
.ui-co-li__follow a { color: var(--ui-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ui-co-li__posts { grid-area: posts; margin-top: 2.5rem; }
.ui-co-li__posts .lkd-code { margin: 0; }

@media (min-width: 992px) and (max-width: 1279px) {
  .ui-co-collage { height: 33rem; }
}
@media (max-width: 991px) {
  .ui-co-hero__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .ui-co-collage { max-width: 40rem; height: 36rem; }
}
@media (max-width: 767px) {
  .ui-co-hero > .padding-global { padding-top: 7rem; padding-bottom: 3rem; }
  .ui-co-hero .heading.hero { font-size: 2.5rem; }
  .ui-co-stickers { grid-template-columns: 1fr; }
  .ui-co-collage { height: 25rem; }
  .ui-co-polaroid { padding: .3rem .3rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-co-sticker > *, .ui-co-polaroid { transition: none; }
}


/* ---------- 21. Contact (et champs de formulaire du site) ----------
   Style seulement : noms des champs, ordre et envoi (form.php,
   brolz-forms.js) inchangés. */

.contact_hero_section h1 { font-size: 3.25rem; line-height: 1.06; font-weight: 800; letter-spacing: -.025em; }
.contact_hero_section .margin-bottom.margin-small { margin-bottom: 0; }
.main-wrapper > .contact_hero_section:first-child > .padding-global.padding-section-hero { padding-bottom: 3.5rem; }

.contact_form_component { column-gap: 4rem; align-items: start; }
/* photo + lien LinkedIn : une carte sobre */
.contact_form_heading_wrapper > .margin-bottom.margin-xlarge { margin: 0; }
.contact_form_image_wrapper { border: 1px solid var(--ui-line); border-radius: var(--ui-r-card); background: #fff; }
.contact_form_image_wrapper .image-cover.contact { display: block; height: auto; aspect-ratio: 3 / 2; }
.contact_form_image_wrapper .margin-bottom.margin-large.inbox { margin: 0; padding: 1rem 1.25rem; }
.contact_form_image_wrapper .text-size-large { color: var(--ui-text); font-size: var(--ui-fs); }
.contact_form_image_wrapper .link { color: var(--ui-navy); font-weight: 600; }

/* le formulaire */
.contact_form_wrapper.shadow-medium {
  padding: 2rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-panel);
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 47, 92, .06);
}
.contact_form_block_container { gap: 1.25rem; }
.form_split-wrapper { gap: 1.25rem; align-items: start; }
.form_label { display: block; margin-bottom: .375rem; color: var(--ui-navy); font-size: .875rem; font-weight: 600; line-height: 1.3; }
.form_input {
  min-height: 3rem;
  padding: .625rem .875rem;
  border: 1px solid #c9d5e1;
  border-radius: 10px;
  background-color: #fff;
  color: var(--ui-navy);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.form_input::placeholder { color: #7a8898; }          /* 3,6:1 : indicatif, pas du contenu */
.form_input.is-select-input { color: var(--ui-navy); }
.form_input.is-text-area { min-height: 8rem; resize: vertical; }
.form_input:hover { border-color: #9fb2c6; }
.form_input:focus { border-color: var(--ui-navy); box-shadow: 0 0 0 3px rgba(0, 159, 227, .25); outline: 0; }
.line-divider { background: var(--ui-line); }
.contact_form_block_container input[type="submit"].button { width: 100%; cursor: pointer; -webkit-appearance: none; appearance: none; }
/* messages après envoi */
.contact_form_block .success-message,
.contact_form_block .w-form-fail {
  margin-top: 1rem;
  padding: .875rem 1rem;
  border-radius: 10px;
  font-size: .9375rem;
  line-height: 1.5;
  text-align: left;
}
.contact_form_block .success-message { border-left: 3px solid var(--ui-green); background: var(--ui-light); color: var(--ui-navy); }
.contact_form_block .w-form-fail { border-left: 3px solid #c0392b; background: #fdf0ef; color: #8c1c13; }

/* « 30 minutes… » sur Contact : même traitement que l'accueil (section 9) */
.contact_form_section + .home_lkd-feed .home_how_to_use_component > .margin-bottom.margin-large { margin-bottom: 1rem; }

/* adresse à côté de la carte */
.contact_location_component { column-gap: 4rem; align-items: center; }
.contact_map_wrapper { border-radius: var(--ui-r-card); }
.contact_map_content_wrapper .margin-bottom.margin-large { margin-bottom: 0; }
.contact_map_content_wrapper .text-size-large { color: var(--ui-navy); font-size: 1.125rem; font-weight: 600; line-height: 1.5; }

@media (max-width: 767px) {
  .contact_hero_section h1 { font-size: 2.25rem; }
}
@media (max-width: 479px) {
  .contact_hero_section h1 { font-size: 2.125rem; line-height: 1.08; }
  .main-wrapper > .contact_hero_section:first-child > .padding-global.padding-section-hero { padding-bottom: 2.5rem; }
  .contact_form_wrapper.shadow-medium { padding: 1.25rem; border-radius: 20px; }
  .form_label { font-size: .875rem; }
  .form_input { font-size: 1rem; }               /* 16 px : pas de zoom automatique sur iPhone */
  .form_split-wrapper { gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .form_input { transition: none; }
}


/* ---------- 21 bis. Contact refaite (ui_lot.py, étape 19) ----------
   Le formulaire est la vedette et tient à l'écran (24" comme portable) : panneau
   bleu nuit (titre, LinkedIn, Europe en points avec radar sur Liège) + formulaire
   compacté, champs deux par deux par la grille (HTML du formulaire inchangé).
   La section carte + adresse du bas est retirée (l'adresse est dans le pied de page). */

.ui-ct-hero { background: var(--ui-light); }
.ui-ct-hero > .padding-global { padding-top: 6.5rem; padding-bottom: 3rem; }
.ui-ct-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: 1.5rem;
}
.ui-ct-side {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 3rem;
  border-radius: var(--ui-r-panel);
  background: var(--ui-navy);
  color: #fff;
}
.ui-ct-side::after {                /* l'Europe en points (radar sur Liège), calée en bas à droite */
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -4.5rem;
  width: 36rem;
  height: 31rem;
  /* fondu bleu nuit en haut : le titre reste net, la carte se révèle dessous */
  background:
    linear-gradient(var(--ui-navy) 0 18%, rgba(0, 47, 92, 0) 52%),
    url("/assets/ui/carte-europe.svg") center / contain no-repeat;
  opacity: .95;
  pointer-events: none;
}
.ui-ct-side > * { position: relative; z-index: 1; }
.ui-ct-side__title {
  margin: 0;
  color: #fff;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
}
.ui-ct-side__title::after {          /* rappel de la barre dégradée de l'app */
  content: "";
  display: block;
  width: 64px;
  height: 8px;
  margin-top: 1.25rem;
  border-radius: 4px;
  background: var(--ui-grad);
}
.ui-ct-side .text-size-large { margin-top: 1.5rem; color: var(--ui-on-dark); font-size: 1.0625rem; }
.ui-ct-side .link { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--ui-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* formulaire compacté : deux colonnes, message et bouton sur toute la largeur */
.ui-ct-hero .contact_form_wrapper.shadow-medium { padding: 1.75rem 2rem; box-shadow: 0 18px 40px rgba(0, 47, 92, .08); }
.ui-ct-hero .contact_form_block_container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}
.ui-ct-hero .form_split-wrapper { display: contents; }
.ui-ct-hero .contact_form_block_container > :is(.form_field-wrapper:has(textarea), .line-divider, input[type="submit"], .ui-form-note) { grid-column: 1 / -1; }
.ui-ct-hero .line-divider { display: none; }
.ui-ct-hero .form_input { min-height: 2.75rem; padding: .5rem .875rem; }
.ui-ct-hero .form_input.is-text-area { min-height: 6.5rem; }
.ui-ct-hero .form_label { margin-bottom: .3rem; }
.ui-ct-hero input[type="submit"].button { margin-top: .25rem; }

@media (max-width: 991px) {
  .ui-ct-hero__grid { grid-template-columns: 1fr; }
  .ui-ct-side { padding: 2.25rem; }
  .ui-ct-side::after { width: 28rem; height: 24rem; }
  .ui-ct-side__title { font-size: 2.5rem; }
}
@media (max-width: 479px) {
  .ui-ct-hero > .padding-global { padding-top: 5.5rem; }
  .ui-ct-side { padding: 1.75rem 1.5rem; }
  .ui-ct-side::after { display: none; }
  .ui-ct-side__title { font-size: 2.125rem; }
  .ui-ct-hero .contact_form_block_container { grid-template-columns: 1fr; }
  .ui-ct-hero .contact_form_wrapper.shadow-medium { padding: 1.25rem; }
}


/* ---------- 22. Cas d'usage (et formulaire newsletter du site) ---------- */

/* bandeau centré : titre et intro centrés (règle des titres centrés). Sur blanc,
   comme l'export d'origine, avec « exemples concrets » en dégradé : exception
   validée par Guillaume (01/10), comme « cas d'usage » à l'accueil */
.main-wrapper > .featured_blog_section.background-color-gd-bluelight:first-child { background: #fff; }
.featured_blog_section .heading-style-h2.hero { font-size: 3.25rem; line-height: 1.06; font-weight: 800; letter-spacing: -.025em; }
.featured_blog_section .heading-style-h2.hero .brand-shade {
  color: var(--ui-yellow);
  background-image: var(--ui-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.featured_blog_component { row-gap: 1.25rem; }
.featured_blog_component .container-small { max-width: 46rem; }
.featured_blog_component .container-small p { text-align: center; text-wrap: balance; font-size: 1.125rem; line-height: 1.6; }
.main-wrapper > .featured_blog_section:first-child > .padding-global.padding-section-hero { padding-bottom: 2.5rem; }
/* défilé des pictos : sur le même fond blanc, juste sous l'intro */
.logo_marquee_section-picto { background: #fff; padding-bottom: 1rem; }

/* cartes des catégories : sur fond blanc ici (le fond clair de l'accueil
   faisait un cadre gris collé aux cartes) */
.feature_performance_section .home_features_section:has(.card-use-case) { background: none; }
/* « Une base qui s'étoffe » : l'aperçu PDF ne dépasse pas le texte */
.home_features_component:has(.form-block-newsletter-use-case) { align-items: center; }
.home_features_component:has(.form-block-newsletter-use-case) .home_features_image { max-width: 26rem; }
.home_features_component:has(.form-block-newsletter-use-case) ._50px { height: 1.25rem; }
.home_features_component:has(.form-block-newsletter-use-case) blockquote.quote {
  margin: 1.75rem 0 0;
  padding: .125rem 0 .125rem 1rem;
  border-left: 3px solid var(--ui-green);
  color: var(--ui-text);
  font-size: var(--ui-fs);
  line-height: var(--ui-lh);
}
blockquote.quote .link { color: var(--ui-navy); font-weight: 600; text-underline-offset: 2px; }

/* newsletter : champ e-mail et bouton sur une ligne, même style que Contact */
.form-block-newsletter-use-case { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; width: 100%; min-width: 0; }
.form-block-newsletter-use-case .w-input {
  flex: 1 1 12rem;
  min-height: 3rem;
  margin: 0;
  padding: .625rem .875rem;
  border: 1px solid #c9d5e1;
  border-radius: 999px;
  color: var(--ui-navy);
  font-size: 1rem;
}
.form-block-newsletter-use-case .w-input::placeholder { color: #7a8898; }
.form-block-newsletter-use-case .w-input:focus { border-color: var(--ui-navy); box-shadow: 0 0 0 3px rgba(0, 159, 227, .25); outline: 0; }
.form-block-newsletter-use-case .button-group { flex: 0 0 auto; }
/* mention de confidentialité sous les formulaires (contact et newsletter) */
.ui-form-note { flex: 1 0 100%; margin: 0; color: var(--ui-muted); font-size: .8125rem; line-height: 1.5; }
.ui-form-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ui-form-note a:hover { color: var(--ui-navy); }
.form-block-newsletter-use-case input[type="submit"].button { cursor: pointer; -webkit-appearance: none; appearance: none; }
.form-block { display: block; }
.success-message-pdf,
.form-block .w-form-fail {
  margin-top: .75rem;
  padding: .875rem 1rem;
  border-radius: 10px;
  font-size: .9375rem;
  line-height: 1.5;
  text-align: left;
}
.success-message-pdf { border-left: 3px solid var(--ui-green); background: var(--ui-light); color: var(--ui-navy); }
.form-block .w-form-fail { border-left: 3px solid #c0392b; background: #fdf0ef; color: #8c1c13; }

@media (max-width: 767px) {
  .featured_blog_section .heading-style-h2.hero { font-size: 2.25rem; }
}
@media (max-width: 479px) {
  .featured_blog_section .heading-style-h2.hero { font-size: 2.125rem; line-height: 1.08; }
  .form-block-newsletter-use-case { max-width: none; }
  .form-block-newsletter-use-case .button-group,
  .form-block-newsletter-use-case .button { width: 100%; }
}


/* ---------- 23. Fiches cas d'usage (gabarit « blog_post », ×52) ----------
   Titre dans un bandeau clair pleine largeur (comme les autres pages),
   texte en colonne lisible (46 rem), illustration à droite ; sur mobile
   l'illustration passe au-dessus du texte (elle coupait le titre). */

/* le menu est rangé dans la page ici : la règle « section après le bandeau »
   ne doit pas viser la fiche elle-même */
.main-wrapper > .blog_post_section > .padding-global.padding-section-hero {
  padding-top: 4.5rem;              /* hauteur du menu fixe */
  padding-bottom: var(--ui-section);
}
.blog_post_component { row-gap: 3rem; }
/* bandeau du titre : fond clair étendu à toute la largeur de l'écran */
.blog_post_header_wrapper {
  padding: 4rem 0 3.5rem;
  background: var(--ui-light);
  box-shadow: 0 0 0 100vmax var(--ui-light);
  clip-path: inset(0 -100vmax);
}
.heading-blog {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ui-navy);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  text-align: left;
}

/* texte de la fiche */
.blog_post_body_wrapper .text-rich-text { color: var(--ui-text); line-height: var(--ui-lh); }
.blog_post_body_wrapper .text-rich-text::after { content: ""; display: table; clear: both; }
.blog_post_body_wrapper .text-rich-text > :is(h2, h3, h4, p, ul, ol, blockquote) { max-width: 46rem; }
.blog_post_body_wrapper .text-rich-text figure.w-richtext-align-floatright {
  float: right;
  width: 22rem;
  max-width: 40% !important;        /* l'export pose max-width: 50 % en ligne */
  margin: 0 0 2rem 3rem;
}
.blog_post_body_wrapper .text-rich-text figure img { width: 100%; height: auto; }
.blog_post_body_wrapper .text-rich-text h2 {
  margin: 0 0 1rem;
  color: var(--ui-navy);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.blog_post_body_wrapper .text-rich-text h3 {
  margin: 2.5rem 0 .75rem;
  color: var(--ui-navy);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.blog_post_body_wrapper .text-rich-text p { margin: 0 0 1rem; font-size: var(--ui-fs); line-height: var(--ui-lh); }
.blog_post_body_wrapper .text-rich-text p + p { margin-top: 0; }
.blog_post_body_wrapper .text-rich-text strong { color: var(--ui-navy); }
.blog_post_body_wrapper .text-rich-text :is(ul, ol) { margin: .25rem 0 1rem; padding-left: .75rem; list-style: none; }
.blog_post_body_wrapper .text-rich-text li {
  position: relative;
  margin: .375rem 0;
  padding-left: 1rem;
  font-size: var(--ui-fs);
  line-height: var(--ui-lh);
  list-style: none;
}
.blog_post_body_wrapper .text-rich-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-navy);
}
.blog_post_body_wrapper .text-rich-text blockquote {
  margin: 1.5rem 0;
  padding: .125rem 0 .125rem 1rem;
  border-left: 3px solid var(--ui-green);
  color: var(--ui-navy);
  font-size: var(--ui-fs);
  font-weight: 600;
  line-height: 1.5;
}

/* les trois actions de fin de fiche : un seul panneau clair */
.div-block-cta-usecase { display: block; margin: 2.5rem 0 0; }
.home_features_card_wrapper.usecase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: 1.5rem 2rem;
  border-radius: var(--ui-r-panel);
  background: var(--ui-light);
}
.home_features_card.form-cta {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  place-self: auto !important;      /* l'export centre chaque carte par identifiant */
}
.home_features_card.form-cta:nth-child(2) .button {   /* « Réserver une démo » : secondaire */
  background: transparent;
  border: 1.5px solid var(--ui-navy);
  color: var(--ui-navy);
}
.home_features_card.form-cta:has(.form-block) { flex: 1 1 22rem; margin-left: auto; max-width: 30rem; }
.form-block-newsletter { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; width: 100%; min-width: 0; max-width: none; }
.form-block-newsletter .w-input {
  flex: 1 1 12rem;
  min-height: 3rem;
  margin: 0;
  padding: .625rem .875rem;
  border: 1px solid #c9d5e1;
  border-radius: 999px;
  background: #fff;
  color: var(--ui-navy);
  font-size: 1rem;
}
.form-block-newsletter .w-input::placeholder { color: #7a8898; }
.form-block-newsletter .w-input:focus { border-color: var(--ui-navy); box-shadow: 0 0 0 3px rgba(0, 159, 227, .25); outline: 0; }
.form-block-newsletter .button-group { flex: 0 0 auto; }
.form-block-newsletter input[type="submit"].button { cursor: pointer; -webkit-appearance: none; appearance: none; background: #fff; }

/* « À découvrir » des fiches : le titre est hors du bloc à marge, on lui en donne une */
.blog_section_component .max-width-full > h2.heading { margin-bottom: 1.5rem; }
/* « À découvrir » juste après : pas de conteneur vide entre les deux */
.main-wrapper > .container-large:empty { display: none; }

@media (max-width: 991px) {
  .heading-blog { font-size: 2.75rem; }
}
@media (max-width: 767px) {
  .blog_post_header_wrapper { padding: 3rem 0 2.5rem; }
  .heading-blog { font-size: 2.25rem; }
  .blog_post_body_wrapper .text-rich-text figure.w-richtext-align-floatright {
    float: none;
    width: 12rem;
    max-width: 60% !important;
    margin: 0 auto 1.5rem;
  }
  .blog_post_body_wrapper .text-rich-text h2 { font-size: 1.75rem; }
  .blog_post_body_wrapper .text-rich-text h3 { font-size: 1.3125rem; margin-top: 2rem; }
  .home_features_card_wrapper.usecase { flex-direction: column; align-items: stretch; padding: 1.25rem; border-radius: 20px; }
  .home_features_card.form-cta, .home_features_card.form-cta:has(.form-block) { flex: none; max-width: none; margin: 0; }
  .home_features_card.form-cta .button, .form-block-newsletter .button-group,
  .form-block-newsletter .button { width: 100%; }
}
@media (max-width: 479px) {
  .blog_post_header_wrapper { padding: 2.5rem 0 2rem; }
  .heading-blog { font-size: 2.125rem; line-height: 1.08; }
  .blog_post_body_wrapper .text-rich-text :is(p, li, blockquote) { font-size: var(--ui-fs); }
}


/* ---------- 23 bis. Fiches cas d'usage : nouveau gabarit (ui_lot.py, étape 14) ----------
   En-tête clair : fil d'Ariane, titre, accroche, illustration à droite.
   Corps : texte à gauche (46 rem) découpé en blocs, colonne d'action fixe à droite
   (conclusion de la fiche + deux boutons). Newsletter sur sa propre ligne. */

.blog_post_header_wrapper.ui-fiche-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  align-items: center;
  column-gap: 4rem;
  padding: 3rem 0;
}
.ui-fiche-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
  color: var(--ui-muted);
  font-size: .875rem;
  font-weight: 500;
}
.ui-fiche-crumb a { color: var(--ui-navy); text-decoration: none; }
.ui-fiche-crumb a:hover { text-decoration: underline; }
.ui-fiche-hero .ui-fiche-lead {
  max-width: 40rem;
  margin: 1.25rem 0 0;
  color: var(--ui-navy);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.ui-fiche-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;          /* fond blanc des illustrations fondu dans le bandeau */
}

.blog_post_body_wrapper.ui-fiche-body {
  display: grid;
  grid-template-columns: minmax(0, 46rem) 20rem;
  justify-content: space-between;
  align-items: start;
  column-gap: 4rem;
}
.ui-fiche-article > * { max-width: none; }
.ui-fiche-intro p { font-size: 1.0625rem; }
.ui-fiche-bloc { margin-top: 2.5rem; }
.blog_post_body_wrapper .ui-fiche-bloc h3 { margin: 0 0 1rem; font-size: 1.375rem; }
.blog_post_body_wrapper .ui-fiche-bloc h3 strong { color: inherit; }

/* problèmes : un encart clair, puces bleu nuit */
.ui-fiche-bloc--problemes {
  padding: 1.75rem 2rem 1.25rem;
  border-radius: var(--ui-r-card);
  background: var(--ui-light);
}
/* apports : coches vertes (comme les atouts du site) */
.blog_post_body_wrapper .ui-fiche-bloc--apports li { padding-left: 1.625rem; }
.blog_post_body_wrapper .ui-fiche-bloc--apports li::before {
  top: .2em;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%2397bf0d' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* sous-listes (Chantiers, EPI…) : petites puces, pas de coche */
.blog_post_body_wrapper .ui-fiche-bloc--apports li li { padding-left: 1rem; }
.blog_post_body_wrapper .ui-fiche-bloc--apports li li::before {
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ui-muted);
}
/* effets : petites cartes, deux par ligne */
.blog_post_body_wrapper .ui-fiche-bloc--effets ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
}
.blog_post_body_wrapper .ui-fiche-bloc--effets li {
  margin: 0;
  padding: 1rem 1.125rem 1rem 1.125rem;
  border: 1px solid var(--ui-line);
  border-left: 3px solid var(--ui-green);
  border-radius: 12px;
  background: #fff;
}
.blog_post_body_wrapper .ui-fiche-bloc--effets li::before { display: none; }

/* colonne d'action : carte fixe au défilement */
.ui-fiche-aside { position: sticky; top: 6.5rem; }
.ui-fiche-aside__card {
  padding: 1.75rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 47, 92, .06);
}
.ui-fiche-aside__title {
  margin: 0 0 .75rem;
  color: var(--ui-navy);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.ui-fiche-aside__title::after { display: none; }
.ui-fiche-aside__card p { margin: 0 0 .625rem; color: var(--ui-text); font-size: .9375rem; line-height: 1.5; }
.ui-fiche-aside__actions { display: grid; gap: .625rem; margin-top: 1.25rem; }
.ui-fiche-aside__actions .button { width: 100%; justify-content: center; text-align: center; }
.ui-fiche-aside__actions .button + .button {   /* « Réserver une démo » : secondaire */
  background: transparent;
  border: 1.5px solid var(--ui-navy);
  color: var(--ui-navy);
}

/* newsletter : une ligne à part, sous le texte */
.ui-fiche-news {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 1rem;
  padding: 1.25rem 1.75rem;
  border-radius: var(--ui-r-card);
  background: var(--ui-light);
}
.ui-fiche-news__label { margin: 0; color: var(--ui-navy); font-size: 1rem; font-weight: 700; }
.ui-fiche-news .form-block { flex: 0 1 30rem; margin: 0; }

/* « À découvrir » : les cartes occupent toute la largeur, même à 3 */
.related_article_section .blog_collection_list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

@media (max-width: 991px) {
  .blog_post_header_wrapper.ui-fiche-hero { grid-template-columns: minmax(0, 1fr) 11rem; column-gap: 2rem; }
  .blog_post_body_wrapper.ui-fiche-body { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
  .ui-fiche-aside { position: static; }
}
@media (max-width: 767px) {
  .blog_post_header_wrapper.ui-fiche-hero { grid-template-columns: 1fr; row-gap: 1.5rem; padding: 2rem 0 2.5rem; }
  .ui-fiche-hero__visual { order: -1; width: 9rem; }
  .ui-fiche-hero .ui-fiche-lead { font-size: 1.1875rem; }
  .ui-fiche-bloc--problemes { padding: 1.25rem 1.25rem .75rem; }
  .blog_post_body_wrapper .ui-fiche-bloc--effets ul { grid-template-columns: 1fr; }
  .ui-fiche-news { flex-direction: column; align-items: stretch; padding: 1.25rem; }
  .ui-fiche-news .form-block { flex: none; }
}


/* ---------- 24. Pages légales (mentions & CGV, confidentialité, cookies) ----------
   Même lecture que les fiches : titre dans un bandeau clair pleine largeur,
   texte en colonne de 46 rem, aligné à gauche, interlignage aéré. */

.main-wrapper > .contact_hero_section.background-color-gd-bluelight:has(.text-rich-text) { background: #fff; }
.main-wrapper > .contact_hero_section:has(.text-rich-text) > .padding-global.padding-section-hero {
  padding-top: 4.5rem;              /* hauteur du menu fixe */
  padding-bottom: var(--ui-section);
}
.contact_hero_component > .text-rich-text { color: var(--ui-text); line-height: var(--ui-lh); }
.contact_hero_component > .text-rich-text > :not(h1) { max-width: 46rem; }
.contact_hero_component > .text-rich-text > h1 {
  margin: 0 0 1.5rem;
  padding: 4rem 0 3.5rem;
  border-radius: 0;
  background: var(--ui-light);
  box-shadow: 0 0 0 100vmax var(--ui-light);
  clip-path: inset(0 -100vmax);
  color: var(--ui-navy);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  text-align: left;
}
/* « Dernière mise à jour » */
.contact_hero_component > .text-rich-text > h1 + p { color: var(--ui-muted); font-size: .9375rem; }
.contact_hero_component > .text-rich-text h2 {
  margin: 2.5rem 0 .75rem;
  color: var(--ui-navy);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.contact_hero_component > .text-rich-text h3 { margin: 1.75rem 0 .5rem; color: var(--ui-navy); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.contact_hero_component > .text-rich-text p { margin: 0 0 1rem; font-size: var(--ui-fs); line-height: var(--ui-lh); }
.contact_hero_component > .text-rich-text strong { color: var(--ui-navy); }
.contact_hero_component > .text-rich-text a { color: var(--ui-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.contact_hero_component > .text-rich-text :is(ul, ol) { margin: .25rem 0 1rem; padding-left: .75rem; list-style: none; }
.contact_hero_component > .text-rich-text li {
  position: relative;
  margin: .375rem 0;
  padding-left: 1rem;
  font-size: var(--ui-fs);
  line-height: var(--ui-lh);
  list-style: none;
}
.contact_hero_component > .text-rich-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-navy);
}

@media (max-width: 767px) {
  .contact_hero_component > .text-rich-text > h1 { padding: 3rem 0 2.5rem; font-size: 2.25rem; }
  .contact_hero_component > .text-rich-text h2 { font-size: 1.3125rem; margin-top: 2rem; }
}
@media (max-width: 479px) {
  .main-wrapper > .contact_hero_section:has(.text-rich-text) > .padding-global.padding-section-hero { padding-top: 4.5rem; }
  .contact_hero_component > .text-rich-text > h1 { padding: 2.5rem 0 2rem; font-size: 2.125rem; line-height: 1.08; }
  .contact_hero_component > .text-rich-text :is(p, li) { font-size: var(--ui-fs); }
}


/* ---------- 25. Page 404 ---------- */

.utility-page_component {
  height: auto;
  min-height: 80vh;
  padding: 8.5rem 1.25rem var(--ui-section);
  background: var(--ui-light);
}
.utility-page_wrapper { max-width: 28rem; row-gap: 1.25rem; align-items: center; }
.utility-page_image { width: 100%; max-width: 5.5rem; opacity: .85; }   /* pictogramme Webflow par défaut : discret */
.utility-page_wrapper h1.heading-style-h3 {
  margin: 0;
  color: var(--ui-navy);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* pages de confirmation de la newsletter (même gabarit que la 404) */
.ui-confirm-check {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #E9DF00, #97BF0D);
}
.ui-confirm-check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 1.1rem;
  height: 1.9rem;
  border: solid var(--ui-navy);
  border-width: 0 .3rem .3rem 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.ui-confirm-text { margin: 0; color: var(--ui-text); text-align: center; }
@media (max-width: 479px) {
  .utility-page_component { padding-top: 6.5rem; }
  .utility-page_wrapper h1.heading-style-h3 { font-size: 1.75rem; }
}


/* ---------- 26. Passe de cohérence entre pages ----------
   Relevé des styles calculés sur toutes les pages : ce qui dépassait encore
   de l'échelle commune (titres de panneaux à 40 px, gris à 3,9:1…). */

/* titres des panneaux bleu nuit : 36 px comme tous les titres de section */
:is(.cta_component, .cta_component-2) .heading-style-h2.text-color-alternate.white,
.feature_why_us_component h2.text-color-alternate {
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
}
/* titre de la page Contact : même graisse que les autres titres de page */
.contact_hero_section h1.company_hero_content_wrapper { font-weight: 800; }
/* posts LinkedIn : texte gris lisible (7A8494 = 3,9:1 → 5B6B80 = 5,5:1) */
.li-post__texte { color: var(--ui-muted); }
/* encart SaaS de Logiciel & App : texte à 16 px comme ailleurs */
.cta_component:not(.shadow-large) .text-size-medium { font-size: var(--ui-fs); }
/* notes (1) (2) d'Offres : 14 px minimum */
.text-size-medium.note-pricing { font-size: .875rem; }

@media (max-width: 767px) {
  .contact_hero_section h1.company_hero_content_wrapper { font-size: 2.25rem; }
  :is(.cta_component, .cta_component-2) .heading-style-h2.text-color-alternate.white,
  .feature_why_us_component h2.text-color-alternate { font-size: 1.875rem; }
}
@media (max-width: 479px) {
  .contact_hero_section h1.company_hero_content_wrapper { font-size: 2.125rem; }
  :is(.cta_component, .cta_component-2) .heading-style-h2.text-color-alternate.white,
  .feature_why_us_component h2.text-color-alternate { font-size: 1.75rem; }
}