/* Navigation commune au site principal et aux pages publicitaires.
   Chargée après les feuilles Webflow pour pouvoir surcharger la navbar. */

/* Les pages du gabarit legacy portent ces correspondances dans une balise
   <style> interne. Elles sont reprises ici pour que la bande de contact et le
   pied de page gardent leurs couleurs sur les pages qui n'ont pas ce gabarit. */
.color-scheme-2 {
  --color-scheme-1--text: var(--color-scheme-2--text);
  --color-scheme-1--background: var(--color-scheme-2--background);
  --color-scheme-1--foreground: var(--color-scheme-2--foreground);
  --color-scheme-1--border: var(--color-scheme-2--border);
  --color-scheme-1--accent: var(--color-scheme-2--accent);
}

.color-scheme-3 {
  --color-scheme-1--text: var(--color-scheme-3--text);
  --color-scheme-1--background: var(--color-scheme-3--background);
  --color-scheme-1--foreground: var(--color-scheme-3--foreground);
  --color-scheme-1--border: var(--color-scheme-3--border);
  --color-scheme-1--accent: var(--color-scheme-3--accent);
}

/* Le conteneur React qui injecte la navbar ne doit pas créer de boîte :
   sans cela, la barre ne pourrait se coller qu'à l'intérieur de ce conteneur. */
.site-chrome--header {
  display: contents;
}

/* La barre reste visible pendant le défilement, sur tout le site. La bande de
   contact la précède et défile normalement, comme avant. */
.navbar3_component {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-scheme-1--background);
}

/* Les deux CTA orange du site doivent garder le même contraste : texte blanc. */
.site-chrome .navbar3_component .navbar3_container > .button.w-button,
.site-chrome .navbar3_component .navbar3_tablet-menu-button.w-button {
  color: #fff !important;
}

.site-chrome .navbar3_component .navbar3_container > .button.w-button:hover,
.site-chrome .navbar3_component .navbar3_tablet-menu-button.w-button:hover {
  color: #fff !important;
}

/* Hiérarchie du héros de la page de soumission : accent de marque, titre
   lumineux et texte secondaire plus doux sur la photo assombrie. */
.section_header50 .soumission-hero__label {
  color: hsl(26 91% 55%) !important;
}

.section_header50 .soumission-hero__title {
  color: #fff !important;
}

.section_header50 .soumission-hero__intro {
  color: rgb(255 255 255 / 0.78) !important;
}

/*
 * Hiérarchie commune des blocs surtitre / titre / sous-texte du site principal.
 * Les pages publicitaires sont montées dans `.pub-shell`, sans `.page-wrapper`,
 * et ne sont donc pas concernées par ces règles.
 *
 * Le sélecteur `:has()` suit le motif réel des exports Webflow : le surtitre
 * est dans un wrapper `.margin-bottom`, puis le titre et son texte voisin sont
 * ses frères. Cela évite de recolorer les titres de cartes ou les questions FAQ
 * qui ne font pas partie d'un de ces blocs éditoriaux.
 */
.page-wrapper .text-style-tagline {
  color: hsl(26 91% 55%);
}

.page-wrapper
  .margin-bottom:has(> .text-style-tagline)
  ~ .margin-bottom
  > :is(h1, h2, h3, h4, h5, h6),
.page-wrapper
  .margin-bottom:has(> .text-style-tagline)
  ~ :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-scheme-1--text);
}

.page-wrapper
  .color-scheme-3
  .margin-bottom:has(> .text-style-tagline)
  ~ .margin-bottom
  > :is(h1, h2, h3, h4, h5, h6),
.page-wrapper
  .color-scheme-3
  .margin-bottom:has(> .text-style-tagline)
  ~ :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}

/*
 * Un bloc peut imposer lui-même sa couleur de texte : les cartes photo de la
 * page d'accueil portent la classe Webflow `.text-color-white` et comptent sur
 * l'héritage pour leur titre. Leur contenu a exactement la même forme qu'un
 * bloc éditorial (surtitre dans un `.margin-bottom`, puis titre), donc les
 * règles ci-dessus les attrapaient et repeignaient le titre en presque noir
 * sur la photo, illisible. La couleur portée par le bloc l'emporte.
 */
.page-wrapper
  .text-color-white
  .margin-bottom:has(> .text-style-tagline)
  ~ .margin-bottom
  > :is(h1, h2, h3, h4, h5, h6),
.page-wrapper
  .text-color-white
  .margin-bottom:has(> .text-style-tagline)
  ~ :is(h1, h2, h3, h4, h5, h6) {
  color: var(--_primitives---colors--white, #fff);
}

/*
 * Deux règles teintaient ici le texte d'accompagnement de ces mêmes blocs.
 * Elles n'ont jamais rien coloré : leur sélecteur imbriquait un `:has()` dans
 * un autre, ce que les navigateurs refusent, et la règle entière était donc
 * ignorée. Les paragraphes héritent de la couleur de leur section, comme sur le
 * site d'origine ; les rendre valides changerait l'apparence actuelle du site.
 */

/*
 * Menu mobile : le voile (`z-index: 0`) et le panneau (`z-index: 1`) couvrent
 * toute la barre. Le bouton doit rester au-dessus pour refermer le menu, comme
 * sur les pages qui chargent le script Webflow d'origine.
 */
.site-chrome .navbar3_component .w-nav-button {
  position: relative;
  z-index: 2;
}

/*
 * Sur mobile, la grille Webflow en trois colonnes `1fr max-content 1fr`
 * réservait trop peu de place au CTA de droite : son contenu débordait dans le
 * logo central. Les colonnes latérales doivent avoir leur largeur réelle, et
 * le centre doit pouvoir se contracter.
 */
@media (max-width: 991px) {
  .navbar3_container {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 0.75rem;
  }

  .navbar3_menu-button {
    margin-left: 0;
  }

  .navbar3_logo-link {
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  .navbar3_logo-link > .navbar3_logo {
    width: clamp(7.5rem, 34vw, 8.5rem);
    height: auto;
    max-height: 3.25rem;
    margin: 0;
    object-fit: contain;
  }

  .navbar3_container > .button.w-button {
    min-width: 0;
    max-width: 100%;
    padding-inline: 1rem;
    white-space: nowrap;
  }

  /*
   * Le menu Webflow original repose sur des liens inline-block. En React, le
   * panneau est ouvert par notre contrôleur et doit donc expliciter sa pile :
   * un lien par ligne, le sous-menu aligné sous Services et le CTA en dernier.
   */
  .navbar3_menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 1.5rem 5vw 5rem;
  }

  .navbar3_menu > .navbar3_logo-link-menu {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
    margin: 0 0 1.5rem;
    padding: 0;
  }

  .navbar3_logo-link-menu > .navbar3_logo {
    width: min(10rem, 70vw);
    height: auto;
    max-height: 4rem;
    margin: 0;
    object-fit: contain;
  }

  .navbar3_menu > .navbar3_link,
  .navbar3_menu > .navbar3_menu-dropdown,
  .navbar3_menu > .navbar3_tablet-menu-button {
    flex: 0 0 auto;
    width: 100%;
  }

  .navbar3_menu > .navbar3_link {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.75rem 0;
  }

  .navbar3_menu-dropdown {
    margin: 0;
  }

  .navbar3_dropdown-toggle {
    min-height: 3rem;
    padding: 0.75rem 0;
  }

  .navbar3_dropdown-list {
    width: 100%;
  }

  .navbar3_dropdown-link {
    display: block;
    padding: 0.65rem 1rem;
  }

  .navbar3_menu > .navbar3_tablet-menu-button {
    margin: 1rem 0 0;
  }
}