/* Fonts */
:root {
  /* Charte graphique : police secondaire (corps de texte) = Inter,
     police primaire (titres et navigation) = Montserrat. Aucune autre. */
  --default-font: "Inter", sans-serif;
  --heading-font: "Montserrat", sans-serif;
  --nav-font: "Montserrat", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #00DAF4; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #111111; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #0232E3; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --swiper-theme-color: var(--accent-color);
    --accent-color-dark: #0F2478;
            --accent-color-light: #2B56D6;

  --default-text-color: #1b1b1b;
  --text-color: color-mix(in srgb, var(--default-text-color), transparent 40%);

  /* Couleur des placeholders : suffisamment contrastée pour rester lisible
     (les placeholders bâtis sur --text-color étaient trop pâles). */
  --placeholder-color: #6b7280;

  --footer-background:#1b1b1b;

  /* Design tokens (surfaces, textes secondaires, rayons et ombres) */
  --nb-white: var(--surface-color);
  --nb-bg: #F4F7FF;
  --nb-text: #1C2333;
  --nb-muted: #6B7794;
  --nb-border: #DDE3F5;
  --nb-radius: 12px;
  --nb-radius-lg: 20px;
  --nb-shadow: 0 4px 24px rgba(26, 59, 170, .10);
  --nb-shadow-lg: 0 12px 40px rgba(26, 59, 170, .16);

  /* Fond bleu clair des encarts de filtres (Catégories, Marques…) pour
     améliorer le contraste et la lisibilité sur les pages Formations,
     Marketplace et Tutoriels. */
  --filter-widget-bg: color-mix(in srgb, var(--accent-color), #ffffff 93%);
  --filter-widget-border: color-mix(in srgb, var(--accent-color), transparent 82%);
}

/* ==========================================================================
   Sélecteur de langue GTranslate
   ========================================================================== */

/* Le moteur de traduction Google est piloté par notre select : on masque son UI. */
#google_translate_element,
.gtranslate_wrapper {
  display: none !important;
}

/* Select de langue personnalisé */
.language-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--nav-color), transparent 82%);
  background: var(--surface-color);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.language-switcher:hover {
  border-color: var(--accent-color);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.language-switcher-icon {
  position: absolute;
  left: 12px;
  font-size: 15px;
  color: var(--accent-color);
  pointer-events: none;
}

.language-switcher-caret {
  position: absolute;
  right: 12px;
  font-size: 11px;
  color: color-mix(in srgb, var(--nav-color), transparent 40%);
  pointer-events: none;
  transition: transform 0.25s ease;
}

.language-switcher:hover .language-switcher-caret {
  transform: translateY(1px);
}

.language-switcher select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--nav-color);
  font-family: var(--nav-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  /* Le select occupe TOUTE la pastille (icônes comprises) pour être
     cliquable partout ; les icônes par-dessus laissent passer le clic. */
  padding: 8px 30px 8px 32px;
  margin: 0;
  width: 100%;
}

.language-switcher select option {
  color: #212529;
  background: #ffffff;
  font-weight: 500;
}

/* Neutralise la barre grise, le gadget, le bandeau « en cours de traduction »
   et le décalage que Google Translate ajoute en haut de page. Les classes
   « .VIpgJd-* » sont celles de la version récente du widget (le logo qui
   apparaissait en haut à gauche à chaque changement de page). */
.goog-te-banner-frame,
.goog-te-gadget,
.goog-te-gadget-icon,
.goog-logo-link,
.skiptranslate,
iframe.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-ORHb,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO {
  display: none !important;
}

html body {
  top: 0 !important;
  position: static !important;
}

/* Masque l'info-bulle « texte d'origine » affichée au survol d'un mot traduit
   (ballon Google) ainsi que l'ancien tooltip. */
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip * {
  display: none !important;
}

/* Supprime le surlignage (fond grisé « comme sélectionné ») appliqué au texte
   traduit au survol.
   - Ancien widget : classe « .goog-text-highlight ».
   - Widget récent : le texte est enveloppé dans des <font> et une classe
     générée « VIpgJd-yAWNEb-… » (suffixe hashé changeant) est ajoutée au
     survol → on cible le préfixe stable.
   Sélecteur volontairement spécifique (html body …) pour l'emporter sur la
   feuille de style que Google injecte elle-même en !important. */
html body .goog-text-highlight,
.goog-text-highlight,
html body [class*="VIpgJd-yAWNEb"] {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* ==========================================================================
   Cartes entièrement cliquables
   Un lien de couverture (.card-cover-link) recouvre toute la carte et ouvre
   son détail. Les liens/boutons déjà présents restent cliquables grâce à un
   z-index supérieur (.card-actionable).
   ========================================================================== */

.has-cover-link {
  position: relative;
  /* Curseur « lien » sur toute la surface cliquable. */
  cursor: pointer;
}

.card-cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  /* Purement fonctionnel : aucune apparence propre. */
  font-size: 0;
  overflow: hidden;
  text-indent: -9999px;
}

/* Les éléments interactifs internes passent au-dessus du lien de couverture. */
.has-cover-link a:not(.card-cover-link),
.has-cover-link button,
.has-cover-link [wire\:click],
.card-actionable {
  position: relative;
  z-index: 2;
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #212529;  /* The default color of the main navmenu links */
  --nav-hover-color: #0232E3; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #0232E3; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */

  /* Marge latérale du panneau de menu mobile (et du calque de résultats de
     recherche qui reprend la même géométrie). Augmentée pour laisser plus
     d'air à droite et à gauche. */
  --nav-mobile-inset: 28px;

  /* Bouton « Demander un devis » de la barre de navigation : jeton unique
     partagé entre la version desktop (bandeau bleu du niveau 1) et la version
     petits écrans / mobile (entrée dédiée du menu hamburger), afin que les
     deux aient EXACTEMENT le même style et les mêmes dimensions. */
  --quote-btn-padding: 9px 22px;
  --quote-btn-radius: 8px;
  --quote-btn-font-size: 14px;
  --quote-btn-font-weight: 600;
  --quote-btn-bg: color-mix(in srgb, #ffffff, var(--accent-color) 20%);
  --quote-btn-color: var(--accent-color-dark);
  --quote-btn-hover-bg: #ffffff;
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #1b1b1b;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color:#00DAF4;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  /* color: var(--default-color); */
  color: var(--text-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

/* ==========================================================================
   Anti-débordement horizontal (écrans 14" et autres)
   ------------------------------------------------------------------------
   Sur les portables 13"/14" (≈ 1280–1440 px de large), le moindre élément
   trop large faisait apparaître une barre de défilement horizontale. On
   verrouille la page sur la largeur du viewport.

   La règle porte sur <html> UNIQUEMENT : le débordement de l'élément racine
   est reporté sur le VIEWPORT et <html> conserve un « overflow » utilisé de
   « visible » (règle de propagation CSS). Aucun conteneur de défilement
   n'est donc créé et le « position: sticky » de la barre de navigation
   continue de fonctionner — ce qui ne serait pas le cas si la règle était
   posée sur <body>.

   « hidden » et non « clip » : Firefox ne propage pas « clip » au viewport,
   la page continuait de défiler latéralement.
   ========================================================================== */
html {
  max-width: 100%;
  overflow-x: hidden;
}

/* Les médias et les blocs de code ne peuvent plus dépasser leur conteneur. */
img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* color: var(--heading-color); */
  color: var(--default-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message,
.php-email-form-livewire .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message,
.php-email-form-livewire .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading,
.php-email-form-livewire .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before,
.php-email-form-livewire .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Bouton d'envoi de formulaire (harmonisé sur tous les formulaires)
------------------------------*/
.btn-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 36px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--accent-color);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-form-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-color), #000 12%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color), transparent 65%);
  transform: translateY(-2px);
}

.btn-form-submit:disabled {
  opacity: 0.65;
}

.btn-form-submit-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-color);
  background: #fff;
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 25px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 32px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .logo span {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus,
.image-text .btn-getstarted,
.image-text .btn-getstarted:focus {
  transition: 0.5s;
  color: var(--nav-color);
  border: 2px solid var(--accent-color);
  padding: 8px 25px;
  border-radius: 4px;
}

.bouton-clignotant {
    background: color-mix(in srgb, var(--default-color), transparent 75%);
    /* color: var(--nav-color); */
    padding: 5px 15px !important;
  font-size: 13px;
  border: 2px solid var(--default-color) !important;
    border: none;
    border-radius: 6px;
      white-space: nowrap !important;
    cursor: pointer;

    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--default-color);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(230, 57, 70, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
    }
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover,
.image-text .btn-getstarted:hover,
.image-text .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 13px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
    flex-shrink: 0;
    position: relative;
    z-index: 9999;
  }

  /* Empêche le CTA / les switchers de pousser le hamburger hors écran
     (menu "masqué" sur petits écrans type Galaxy A12). */
  .header .container-fluid {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    flex-shrink: 1;
    min-width: 0;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    /* Le panneau s'ajuste à son contenu (bottom: auto) et défile au besoin :
       plus d'espace vide inutile sous le dernier lien du menu. */
    top: 60px;
    left: var(--nav-mobile-inset);
    right: var(--nav-mobile-inset);
    bottom: auto;
    max-height: calc(100vh - 80px);
    padding: 6px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 7px 20px;
    font-family: var(--nav-font);
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  /* Seul le chevron des dropdowns pivote à l'état actif ; l'icône de gauche
     (.nav-link-icon) ne doit pas être renversée. */
  .navmenu .active .toggle-dropdown,
  .navmenu .active:focus .toggle-dropdown {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 4px 0;
    margin: 4px 20px 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Icônes des liens de navigation (retour de tests)
--------------------------------------------------------------*/
/* Les liens portent une icône de gauche + un libellé, et éventuellement
   le chevron des menus déroulants à droite. On aligne le tout à gauche et
   on pousse le chevron à droite pour garder « icône + libellé » groupés. */
.navmenu a {
  justify-content: flex-start;
  gap: 8px;
}

.navmenu .nav-link-icon {
  font-size: 15px !important;
  line-height: 0;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  flex-shrink: 0;
  /* Icône toujours en bleu plein, le libellé restant en noir. */
  color: var(--nav-hover-color) !important;
}

/* Chevron des dropdowns repoussé à droite du libellé. */
.navmenu .toggle-dropdown {
  margin-left: auto !important;
}

/* CTA « Demander un devis » du menu hamburger (petits écrans et mobiles).
   Il reprend À L'IDENTIQUE le bouton de la barre de navigation desktop :
   mêmes jetons « --quote-btn-* », donc mêmes couleurs, même rayon, même
   typographie et mêmes dimensions. L'icône est masquée car le bouton
   desktop n'en porte pas — sans quoi la largeur ne serait pas la même. */
@media (max-width: 1199px) {
  /* Le <li> centre le bouton ; le bouton, lui, se dimensionne sur son
     contenu comme sur desktop (et non sur toute la largeur du panneau). */
  .navmenu .nav-cta-item {
    display: flex;
    justify-content: center;
    padding: 10px 20px 8px;
  }

  .navmenu .nav-cta-item a,
  .navmenu .nav-cta-item a.bouton-clignotant,
  .navmenu .nav-cta-item a.bouton-clignotant:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center !important;
    gap: 0;
    margin: 0;
    background: var(--quote-btn-bg) !important;
    color: var(--quote-btn-color) !important;
    border: none !important;
    border-radius: var(--quote-btn-radius) !important;
    padding: var(--quote-btn-padding) !important;
    font-family: var(--nav-font);
    font-size: var(--quote-btn-font-size) !important;
    font-weight: var(--quote-btn-font-weight);
    line-height: 1.35;
    white-space: nowrap;
  }

  .navmenu .nav-cta-item a.bouton-clignotant:hover {
    background: var(--quote-btn-hover-bg) !important;
    color: var(--quote-btn-color) !important;
  }

  /* Le bouton desktop est purement textuel : on masque l'icône. */
  .navmenu .nav-cta-item a .nav-link-icon {
    display: none !important;
  }

  .navmenu .nav-cta-item a .nav-link-label {
    color: inherit !important;
    font-size: inherit;
    font-weight: inherit;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--footer-background);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 15px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--default-color);
  border-color: var(--default-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  /* line-height: 1; */
}

.footer .footer-links ul a:hover {
  color: var(--defaut-text-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 6px 8px;
  position: relative;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: var(--background-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--background-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--surface-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--default-color), transparent 20%);
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

.footer .credits a {
 color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: var(--alt-background-color);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  /* color: var(--default-color); */
  color: var(--text-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

.section-bg {
  background-color: transparent;
  padding: 160px 0;
  position: relative;
}

.section-bg:before {
  content: "";
  background-color: var(--background-color);
  position: absolute;
  bottom: 60px;
  top: 60px;
  left: 0;
  right: 0;
  transform: skewY(-3deg);
}

.section-bg .container {
  position: relative;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  text-transform: uppercase;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--default-text-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/* Mot mis en avant dans les titres de section (style « Toutes nos réalisations ») */
.section-title h2 .highlight,
.section-title h3 .highlight,
.why-choose-us h2 .highlight,
.image-text h3 .highlight,
.domains .content h3 .highlight,
.about-history h2 .highlight {
  color: var(--accent-color);
}

/* ==========================================================================
   Pages légales (CGU, confidentialité, cookies)
   ========================================================================== */

.legal-content {
  max-width: 860px;
  margin: 0 auto;
}

.legal-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 2rem 0 1rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 1.5rem 0 0.75rem;
}

.legal-content p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--default-color);
  margin-bottom: 1.1rem;
}

.legal-content ul,
.legal-content ol {
  margin-bottom: 1.1rem;
  padding-left: 1.4rem;
}

.legal-content li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--default-color);
  margin-bottom: 0.4rem;
}

.legal-content a {
  color: var(--accent-color);
  font-weight: 600;
}

/* ==========================================================================
   Bandeau de consentement aux cookies
   ========================================================================== */

.cookie-consent {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 99998;
  max-width: 620px;
  margin: 0 auto;
  background: var(--surface-color);
  color: var(--heading-color);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  padding: 22px 24px;
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-consent.is-visible {
  display: block;
}

.cookie-consent.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.cookie-consent-message {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 14px;
}

.cookie-consent-message a {
  color: var(--accent-color);
  font-weight: 600;
  text-decoration: underline;
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.cookie-consent-actions button {
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cookie-consent-actions button:hover {
  opacity: 0.85;
}

.cookie-consent-decline {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
}

.cookie-consent-accept {
  background: var(--accent-color);
  color: #fff;
}

@media (max-width: 576px) {
  .cookie-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 18px;
  }

  .cookie-consent-actions {
    justify-content: stretch;
  }

  .cookie-consent-actions button {
    flex: 1;
  }
}

/* ==========================================================================
   Loader de navigation (remplace la barre de progression par défaut de Livewire)
   ========================================================================== */

/* Cette feuille de style n'est chargée que sur le site public : la barre
   par défaut de Livewire (#nprogress) reste donc active et visible dans
   l'admin Filament, qui utilise le même mécanisme mais n'a pas ce loader. */
#nprogress {
  display: none !important;
}

.nabysen-loader {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100000;
  pointer-events: none;
}

.nabysen-loader-bar {
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #fff 40%));
  opacity: 0;
  transition: width 0.4s ease, opacity 0.2s ease;
}

.nabysen-loader.is-active .nabysen-loader-bar {
  opacity: 1;
}

/* ==========================================================================
   Marges de sécurité sur petits écrans
   Évite que le contenu des containers ne colle aux bords de l'écran, pour
   plus de lisibilité sur mobile (retour de tests).
   ========================================================================== */
@media (max-width: 575.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid {
    padding-left: max(17px, env(safe-area-inset-left));
    padding-right: max(17px, env(safe-area-inset-right));
  }
}

/* ==========================================================================
   Partage réseaux sociaux (portfolio + tutoriels)
   ========================================================================== */
.social-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 4px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-text-color), transparent 88%);
}

.social-share-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--heading-color);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.social-share-label .bi {
  color: var(--accent-color);
}

.social-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-share-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-text-color), transparent 82%);
  background: var(--surface-color);
  color: var(--heading-color);
  font-size: 17px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.social-share-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}

.social-share-btn.share-facebook:hover  { background: #1877f2; border-color: #1877f2; }
.social-share-btn.share-twitter:hover   { background: #000000; border-color: #000000; }
.social-share-btn.share-linkedin:hover  { background: #0a66c2; border-color: #0a66c2; }
.social-share-btn.share-whatsapp:hover   { background: #25d366; border-color: #25d366; }
.social-share-btn.social-share-copy:hover { background: var(--accent-color); border-color: var(--accent-color); }

.social-share-btn.is-copied {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

/* ==========================================================================
   Dock flottant : bascule de thème + sélecteur de langue
   Placé en bas à GAUCHE (le bouton « remonter en haut » occupe la droite).
   ========================================================================== */
.floating-dock {
  position: fixed;
  left: 15px;
  bottom: 15px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Masqué quand le menu mobile plein écran est ouvert. */
.mobile-nav-active .floating-dock {
  display: none;
}

.floating-dock-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-text-color), transparent 82%);
  background: var(--surface-color);
  color: var(--heading-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.floating-dock-btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* Bouton WhatsApp : seul élément du dock qui est un lien (<a>) et non un
   bouton, d'où le text-decoration ; il garde le vert de la marque WhatsApp
   dans les deux thèmes plutôt que les tokens de surface. */
.floating-dock-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
  text-decoration: none;
}

.floating-dock-whatsapp:hover,
.floating-dock-whatsapp:focus {
  background: #1da851;
  border-color: #1da851;
  color: #ffffff;
}

/* Icône affichée selon le thème : lune en clair (→ passer en sombre),
   soleil en sombre (→ revenir en clair). */
.theme-icon-to-light { display: none; }
.theme-icon-to-dark { display: inline-block; }
html[data-theme="dark"] .theme-icon-to-light { display: inline-block; }
html[data-theme="dark"] .theme-icon-to-dark { display: none; }

/* Bouton langue dans le dock : bouton drapeau circulaire, strictement
   identique au bouton de thème (il réutilise .floating-dock-btn). Un simple
   drapeau centré, sans texte ; le clic bascule FR ↔ EN. */
.floating-dock-lang {
  padding: 0;
}

.lang-flag {
  display: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--default-text-color), transparent 78%);
}

.lang-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* On affiche le drapeau de la langue active (data-lang posé par le JS). */
#lang-toggle[data-lang="fr"] .lang-flag-fr,
#lang-toggle[data-lang="en"] .lang-flag-en {
  display: block;
}

@media (max-width: 575.98px) {
  .floating-dock-btn {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .lang-flag {
    width: 22px;
    height: 22px;
  }
}

/* ==========================================================================
   Thème sombre (Dark Mode)
   Surcouche des variables de couleur : la plupart des composants étant
   pilotés par ces tokens, l'inversion se propage automatiquement.
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  --background-color: #12151c;
  --surface-color: #1b2029;
  --heading-color: #f2f5fa;
  --default-text-color: #cfd6e2;
  --default-color: #cfd6e2;
  --text-color: color-mix(in srgb, var(--default-text-color), transparent 22%);
  --contrast-color: #ffffff;

  --nav-color: #e6eaf2;
  --nav-hover-color: var(--accent-color-light);
  --nav-mobile-background-color: #1b2029;
  --nav-dropdown-background-color: #1b2029;
  --nav-dropdown-color: #e6eaf2;
  --nav-dropdown-hover-color: var(--accent-color-light);

  --nb-white: #1b2029;
  --nb-bg: #12151c;
  --nb-text: #e6eaf2;
  --nb-muted: #9aa4b8;
  --nb-border: #2b3240;
  --nb-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --nb-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

  --filter-widget-bg: #1b2436;
  --filter-widget-border: #2b3654;

  --footer-background: #0c0f15;

  --placeholder-color: #9aa4b8;
}

/* Presets de sections : on garde l'alternance mais en tons sombres. */
html[data-theme="dark"] .light-background {
  --background-color: #171b23;
  --surface-color: #1b2029;
}

html[data-theme="dark"] .dark-background {
  --background-color: #0c0f15;
  --surface-color: #1b2029;
  --default-color: #f2f5fa;
  --heading-color: #f2f5fa;
}

/* Ombres portées plus discrètes sur fond sombre. */
html[data-theme="dark"] .scrolled .header {
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
}

/* Champs de formulaire lisibles sur fond sombre. */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .filter-search input,
html[data-theme="dark"] textarea {
  background-color: #12151c;
  /* border-color: #2b3240; */
  color: var(--heading-color);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--placeholder-color);
}

/* Options natives des menus déroulants (langue, filtres…). */
html[data-theme="dark"] .language-switcher select option,
html[data-theme="dark"] select option {
  background: #1b2029;
  color: #e6eaf2;
}

/* Bandeau cookies et surfaces cartonnées héritent de --surface-color,
   mais on renforce les bordures pour rester lisibles. */
html[data-theme="dark"] .cookie-consent {
  border: 1px solid #2b3240;
}

/* ==========================================================================
   Lisibilité des placeholders (retour de tests)
   Les placeholders basés sur --text-color (noir très transparent) étaient
   trop pâles ; on force une couleur nettement plus contrastée + opacity:1
   (Firefox applique sinon une opacité réduite par défaut).
   ========================================================================== */
input::placeholder,
textarea::placeholder,
select::placeholder,
.form-control::placeholder,
.form-select::placeholder {
  color: var(--placeholder-color);
  opacity: 1;
}

/* Logo de la navbar : version standard en clair, version blanche (celle du
   footer) en sombre, sinon le logo foncé est illisible sur fond sombre. */
.header .logo .logo-img-dark {
  display: none;
}

html[data-theme="dark"] .header .logo .logo-img-light {
  display: none;
}

html[data-theme="dark"] .header .logo .logo-img-dark {
  display: inline-block;
}

/* ==========================================================================
   Recherche globale (menu principal)
   Bouton loupe + panneau déroulant de résultats regroupés par type.
   Piloté par les tokens de couleur : s'adapte automatiquement au thème sombre.
   [x-cloak] évite le flash du panneau avant l'init d'Alpine.
   ========================================================================== */
[x-cloak] {
  display: none !important;
}

.global-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.global-search-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--nav-color, #212529), transparent 82%);
  background: transparent;
  color: var(--nav-color, #212529);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* font-size: 18px; */
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.global-search-toggle:hover,
.global-search-toggle[aria-expanded="true"] {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.global-search-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 88%);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  padding: 12px;
  z-index: 9999;
}

/* Largeur du panneau déroulant sur la barre desktop (le calque mobile inline
   gère sa propre largeur). Sans cette largeur explicite, le panneau absolu se
   réduisait à la largeur de son contenu et paraissait très étroit. */
.global-search:not(.global-search--inline) .global-search-panel {
  width: min(420px, calc(100vw - 30px));
}

.global-search-field {
  position: relative;
  display: flex;
  align-items: center;

  /* Retrait horizontal du texte dans le champ = marge du champ (20px) +
     rembourrage interne (40px). Le libellé adaptatif s'aligne dessus, et le
     bandeau desktop redéfinit ces deux valeurs pour son propre gabarit. */
  --gs-inset-left: 60px;
  --gs-inset-right: 60px;
  --gs-ph-size: 15px;
}

.global-search-field-icon {
  position: absolute;
  left: 35px;
  /* Loupe et libellé sont en BLANC uniquement dans le bandeau bleu du
     niveau 1 (voir « .global-search-desktop » plus bas). Ailleurs — panneau
     blanc du menu hamburger — ils reprennent la couleur des placeholders,
     sans quoi ils étaient blancs sur blanc, donc invisibles. */
  color: var(--placeholder-color);
  font-size: 15px;
  pointer-events: none;
}

/* ── Libellé adaptatif du champ de recherche ───────────────────────────── */
/* Calqué sur un placeholder natif, mais tronqué avec « … » et décliné en
   quatre longueurs : la plus longue qui tient dans le champ est affichée. */
.global-search-ph {
  position: absolute;
  left: var(--gs-inset-left);
  right: var(--gs-inset-right);
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  color: var(--placeholder-color);
  font-family: var(--default-font, inherit);
  line-height: 1.2;
  /* « font-size: 0 » sur le conteneur : les retours à la ligne entre les
     quatre <span> du gabarit produisent des nœuds texte qui décaleraient
     sinon le libellé d'une espace. La taille réelle est portée par le
     <span> affiché. */
  font-size: 0;
}

/* Une seule formulation visible à la fois. */
.global-search-ph > span {
  display: none;
  font-size: var(--gs-ph-size);
}

/* Dès que l'utilisateur saisit quelque chose, le libellé s'efface comme le
   ferait un placeholder natif. */
.global-search-input:not(:placeholder-shown) ~ .global-search-ph {
  display: none;
}

/* Paliers — du plus large au plus étroit.
   Les sélecteurs répètent « .global-search-ph > » : sans cela, la règle de
   masquage ci-dessus (une classe + un type) l'emporterait en spécificité sur
   une simple classe, et AUCUNE formulation ne s'afficherait. */
@media (min-width: 1400px) {
  .global-search-ph > .global-search-ph-lg {
    display: inline;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .global-search-ph > .global-search-ph-md {
    display: inline;
  }
}

@media (min-width: 400px) and (max-width: 1199.98px) {
  .global-search-ph > .global-search-ph-sm {
    display: inline;
  }
}

@media (max-width: 399.98px) {
  .global-search-ph > .global-search-ph-xs {
    display: inline;
  }
}

.global-search-input {
  width: 100%;
  padding: 11px 40px 11px 40px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 82%);
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  color: var(--heading-color);
  font-family: var(--default-font, inherit);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin: auto 20px;
}

.global-search-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
}

/* Le placeholder natif se réduit à une espace (le libellé visible est
   « .global-search-ph ») : la couleur ne sert plus qu'au curseur de saisie. */
.global-search-input::placeholder {
  color: var(--placeholder-color);
}

.global-search-spinner,
.global-search-clear {
  position: absolute;
  right: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.global-search-clear {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--heading-color), transparent 40%);
  cursor: pointer;
  font-size: 12px;
}

.global-search-clear:hover {
  color: var(--accent-color);
}

.global-search-spinner {
  color: var(--accent-color);
}

.global-search-results {
  margin-top: 10px;
  max-height: min(60vh, 460px);
  overflow-y: auto;
}

.global-search-group + .global-search-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--heading-color), transparent 90%);
}

.global-search-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-color);
  padding: 8px 8px 4px;
}

.global-search-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.global-search-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--heading-color);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.global-search-item:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
}

.global-search-item-title {
  font-size: 14.5px;
  font-weight: 500;
}

.global-search-item-meta {
  font-size: 12px;
  color: color-mix(in srgb, var(--heading-color), transparent 45%);
}

.global-search-empty,
.global-search-hint {
  padding: 22px 14px;
  text-align: center;
  color: color-mix(in srgb, var(--heading-color), transparent 40%);
  font-size: 14px;
}

.global-search-empty i {
  display: block;
  font-size: 26px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.global-search-empty p {
  margin: 0;
}

/* Variante « inline » (menu hamburger mobile) : champ toujours visible,
   panneau intégré au flux (ni bouton loupe, ni superposition flottante). */
.global-search--inline {
  position: static;
  display: block;
  width: 100%;
}

.global-search--inline .global-search-panel {
  position: static;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.global-search--inline .global-search-results {
  max-height: 46vh;
}

/* Entrée dédiée dans la liste du menu mobile. */
.nav-search-item {
  padding: 4px 0 12px;
}

/* Le menu mobile masque tout <ul> imbriqué (« .navmenu ul { display:none } »)
   et stylise ses <a> comme des liens de menu. On neutralise ces deux règles
   dans la recherche inline pour que les LISTES de résultats (et pas seulement
   les titres de groupes) s'affichent et restent lisibles/cliquables.
   Le préfixe « .navmenu » assure une spécificité supérieure aux règles du menu. */
.navmenu .global-search--inline ul {
  display: block;
  position: static;
  max-height: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.navmenu .global-search--inline .global-search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  padding: 9px 10px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: normal;
}

.navmenu .global-search--inline .global-search-item:hover {
  color: var(--accent-color);
}

/* Les <i> des titres de groupe ne doivent pas hériter de la pastille ronde
   appliquée aux icônes des liens du menu mobile (« .navmenu a i »). */
.navmenu .global-search--inline .global-search-group-title i {
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
}

/* Superposition des résultats sur le menu de navigation (mobile).
   Le panneau devient un calque fixe qui reprend la géométrie du panneau du
   menu (top:60px, marges latérales de 20px) : le champ reste épinglé en haut
   et la liste des résultats défile en dessous, par-dessus les liens du menu.
   « position: fixed » échappe au débordement (overflow) du panneau de menu. */
.global-search--inline .global-search-panel.global-search-panel--overlay {
  position: fixed;
  /* Mêmes marges latérales que le panneau du menu mobile (.navmenu ul).
     On borne le calque par « top » ET « bottom » (plutôt qu'une hauteur en
     « vh ») : sur mobile, « 100vh » inclut la zone masquée par la barre
     d'adresse du navigateur, ce qui faisait déborder le bas hors de l'écran.
     Avec top + bottom fixes, le panneau reste toujours dans la zone visible et
     la liste défile en interne (voir min-height:0 plus bas). */
  top: 70px;
  left: calc(10px + var(--nav-mobile-inset));
  right: calc(10px + var(--nav-mobile-inset));
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 88%);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.global-search-panel--overlay .global-search-field {
  flex: 0 0 auto;
}

.global-search-panel--overlay .global-search-results {
  flex: 1 1 auto;
  /* « min-height: 0 » est indispensable : sans lui, cet enfant flex ne peut
     pas rétrécir sous la hauteur de son contenu, donc overflow-y n'active
     jamais le défilement et la liste déborde hors de l'écran (partie cachée). */
  min-height: 0;
  max-height: none;
  margin-top: 10px;
  overflow-y: auto;
}

/* Sans terme saisi, l'invite « 2 caractères » n'encombre pas le menu mobile
   (le placeholder du champ suffit). */
.global-search--inline .global-search-hint {
  display: none;
}

@media (max-width: 1199.98px) {
  .global-search:not(.global-search--inline) {
    margin-left: auto;
  }

  .global-search:not(.global-search--inline) .global-search-panel {
    position: fixed;
    top: 72px;
    left: 15px;
    right: 15px;
    width: auto;
  }
}

/* ==========================================================================
   Justification des textes
   Les paragraphes et contenus rédactionnels du site sont justifiés pour un
   rendu homogène et professionnel. La césure automatique (hyphens) évite les
   « rivières » d'espaces trop larges. On EXCLUT ensuite les zones d'interface
   (navigation, boutons, badges, éléments centrés, légendes…) où la
   justification nuit à la lisibilité.
   ========================================================================== */
p,
li,
.content,
.content p,
.content li,
article p,
.post-content,
.post-content p,
.post-content li,
.entry-content,
.entry-content p,
blockquote {
  text-align: justify !important;
  text-justify: inter-word !important;
  -webkit-hyphens: auto !important;
          hyphens: auto !important;
}

/* Éléments d'UI et courts libellés : on rétablit un alignement naturel et on
   désactive la césure pour éviter les espacements disgracieux. */
.navmenu p,
.navmenu li,
.btn,
.btn p,
button,
button p,
.badge,
.breadcrumbs,
.breadcrumbs li,
figcaption,
label,
.form-label,
.text-center,
.text-center p,
.text-center li,
[class*="align-items-center"] p,
.section-title p,
.hero p,
.stats-item p,
.testimonial p,
.footer p,
.footer li {
  text-align: inherit !important;
  text-justify: auto !important;
  -webkit-hyphens: manual;
          hyphens: manual !important;
}

/* ==========================================================================
   Barre de navigation sur DEUX NIVEAUX (grands écrans ≥ 1200px)
   ------------------------------------------------------------------------
   Niveau 1 (.header-top)      : bandeau accent — logo, recherche globale,
                                 boutons « Contact » et « Demander Devis ».
   Niveau 2 (.header-nav-row)  : liens de navigation sur fond de page.

   En dessous de 1200px, la barre mobile historique est conservée : le
   niveau 2 ne porte ni hauteur ni décor, il se contente d'héberger le <nav>
   qui devient le panneau plein écran du menu hamburger.
   ========================================================================== */

/* Le niveau 2 est purement structurel sur mobile : aucun espacement propre,
   le <nav> y est vide tant que le menu hamburger n'est pas ouvert. */
@media (max-width: 1200px) {
  .header-nav-row,
  .header-nav-row > .container-fluid {
    padding: 0;
  }

  /* Le hamburger a quitté le <nav> (parti sur le niveau 2) pour rejoindre le
     niveau 1 : il lui faut le même rang que celui-ci (« .navmenu { order: 3 } »)
     pour rester à DROITE du logo, qui est en « order: 1 ». */
  .header-top .mobile-nav-toggle {
    order: 3;
  }
}

@media (min-width: 1200px) {

  /* Chaque niveau porte désormais son propre rembourrage vertical. */
  .header {
    padding: 0;
  }

  /* ── Niveau 1 : bandeau accent ─────────────────────────────────────── */
  /* Bandeau volontairement compact : sur un 14", chaque pixel gagné en
     hauteur d'en-tête est un pixel rendu au contenu. */
  .header-top {
    background: var(--accent-color);
    padding: 6px 0;
    transition: padding 0.3s ease;
  }

  .header-top > .container-fluid {
    gap: 12px;
    padding-block: 2px;
  }

  .header .logo {
    padding: 0;
  }

  .header .logo img {
    max-height: 34px;
    margin-right: 0;
    transition: max-height 0.3s ease;
  }

  /* Sur le bandeau accent, c'est toujours le logo blanc (celui du footer)
     qui s'affiche, quel que soit le thème. */
  .header-top .logo .logo-img-light {
    display: none;
  }

  .header-top .logo .logo-img-dark {
    display: inline-block;
  }

  /* La barre se compacte légèrement une fois la page défilée. */
  .scrolled .header-top {
    padding: 3px 0;
  }

  .scrolled .header .logo img {
    max-height: 28px;
  }

  /* ── Recherche globale : champ permanent au centre du bandeau ──────── */
  /* Champ resserré : il n'a plus à occuper la moitié du bandeau, ce qui
     laisse aussi de la marge aux liens et aux boutons sur les petits
     portables. « min-width: 0 » autorise le champ à se comprimer plutôt
     que de pousser les boutons hors du conteneur. */
  .global-search-desktop {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 400px;
    margin: 0 4px;
  }

  /* Dans le bandeau bleu, loupe et libellé repassent en blanc. Le retrait du
     libellé s'aligne sur le rembourrage du champ (34px, sans marge latérale). */
  .global-search-desktop .global-search-field {
    --gs-inset-left: 34px;
    --gs-inset-right: 34px;
    --gs-ph-size: 13px;
  }

  .global-search-desktop .global-search-field-icon,
  .global-search-desktop .global-search-ph {
    color: #fff;
  }

  .global-search-desktop .global-search {
    display: block;
    width: 100%;
  }

  /* Le rendu « inline » (conçu pour le menu mobile) est remis à plat :
     ni calque flottant, ni marges internes. */
  .global-search-desktop .global-search--inline .global-search-panel,
  .global-search-desktop .global-search--inline .global-search-panel.global-search-panel--overlay {
    position: static;
    inset: auto;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .global-search-desktop .global-search-input {
    margin: 0;
    padding: 7px 34px 7px 34px;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    /* border: 1px solid transparent; */
    /* background: var(--surface-color); */
    background: transparent;
    font-size: 13px;
  }

  .global-search-desktop .global-search-input:focus {
    border-color: var(--surface-color);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  }

  .global-search-desktop .global-search-field-icon {
    left: 12px;
    font-size: 13px;
  }

  .global-search-desktop .global-search-spinner,
  .global-search-desktop .global-search-clear {
    right: 10px;
  }

  /* Les résultats ne s'affichent qu'en présence d'un terme (le panneau reçoit
     alors la classe « --overlay »), sous la forme d'un calque sous le champ. */
  .global-search-desktop .global-search-results {
    display: none;
  }

  /* Le champ est étroit, mais le calque de résultats reste large et lisible
     (borné au viewport pour ne jamais provoquer de défilement horizontal). */
  .global-search-desktop .global-search-panel--overlay .global-search-results {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: min(440px, calc(100vw - 40px));
    margin: 0;
    padding: 8px;
    max-height: min(60vh, 460px);
    min-height: 0;
    overflow-y: auto;
    background: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--heading-color), transparent 88%);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
    z-index: 9999;
  }

  /* ── Bouton « Contact » (contour blanc) ────────────────────────────── */
  .btn-header-contact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 22px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    color: var(--contrast-color);
    font-family: var(--nav-font);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: 0.3s;
  }

  .btn-header-contact i {
    font-size: 16px;
    line-height: 0;
  }

  .btn-header-contact:hover,
  .btn-header-contact.active {
    background: var(--contrast-color);
    border-color: var(--contrast-color);
    color: var(--accent-color);
  }

  /* ── Bouton « Demander Devis » ─────────────────────────────────────── */
  /* Le style vit dans les jetons « --quote-btn-* » (voir :root) : la version
     petits écrans du menu hamburger réutilise EXACTEMENT les mêmes valeurs. */
  .header-top .btn-getstarted,
  .header-top .btn-getstarted:focus {
    background: var(--quote-btn-bg);
    color: var(--quote-btn-color);
    border: none !important;
    border-radius: var(--quote-btn-radius);
    padding: var(--quote-btn-padding) !important;
    font-family: var(--nav-font);
    font-size: var(--quote-btn-font-size);
    font-weight: var(--quote-btn-font-weight);
    line-height: 1.35;
  }

  .header-top .btn-getstarted:hover,
  .header-top .btn-getstarted:focus:hover {
    background: var(--quote-btn-hover-bg);
    color: var(--quote-btn-color);
  }

  /* ── Niveau 2 : les liens ──────────────────────────────────────────── */
  .header-nav-row {
    background: var(--background-color);
    border-bottom: 1px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  }

  .header-nav-row > .container-fluid {
    display: flex;
    align-items: center;
  }

  .header-nav-row .navmenu {
    width: 100%;
  }

  /* Les liens occupent toute la largeur utile, répartis régulièrement.
     Bande blanche resserrée : le rembourrage vertical vit désormais
     uniquement sur les liens. */
  .header-nav-row .navmenu > ul {
    width: 100%;
    justify-content: space-between;
    gap: 4px;
    padding-block: 0;
    flex-wrap: nowrap;
  }

  .header-nav-row .navmenu > ul > li > a,
  .header-nav-row .navmenu > ul > li > a:focus {
    position: relative;
    padding: 10px 5px;
    font-size: 13.5px;
    font-weight: 500;
  }

  .header-nav-row .navmenu > ul > li:last-child > a {
    padding-right: 5px;
  }

  /* Soulignement de la rubrique courante. */
  .header-nav-row .navmenu > ul > li > a.active::after {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-color);
  }

  /* Les menus déroulants s'alignent sur leur rubrique (le décalage d'origine
     était calé sur l'ancien rembourrage de 15px). */
  .header-nav-row .navmenu .dropdown ul {
    left: 0;
    /* Un menu ne peut jamais être plus large que la fenêtre. */
    max-width: calc(100vw - 24px);
  }

  /* CAUSE PRINCIPALE DU DÉFILEMENT HORIZONTAL : les menus déroulants des
     dernières rubriques (Tutoriels, Carrières…) partent du bord gauche de
     leur rubrique avec une largeur minimale de 200px — ils dépassaient donc
     le bord droit de la page. Comme ils restent dans le flux même fermés
     (« visibility: hidden »), ils allongeaient le document.
     Les quatre dernières rubriques ouvrent désormais leur menu vers la
     GAUCHE, ancré sur leur bord droit. */
  .header-nav-row .navmenu > ul > li:nth-last-child(-n + 4) > ul {
    left: auto;
    right: 0;
  }

  /* ── Thème sombre : bandeau accent assombri ────────────────────────── */
  html[data-theme="dark"] .header-top {
    /* background: var(--accent-color-dark); */
  }

  html[data-theme="dark"] .header-nav-row {
    border-bottom-color: color-mix(in srgb, var(--heading-color), transparent 85%);
  }
}

/* ==========================================================================
   Portables 13"/14" (≈ 1200 – 1400 px) : la rangée de liens doit tenir
   ------------------------------------------------------------------------
   Entre 1200px (bascule vers la barre à deux niveaux) et 1400px, la largeur
   utile est juste. Les ICÔNES RESTENT AFFICHÉES : la place se gagne sur les
   rembourrages, les gouttières, la taille de police et la taille des icônes
   elles-mêmes, jamais en les supprimant.
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header-nav-row .navmenu > ul {
    gap: 2px;
  }

  .header-nav-row .navmenu > ul > li > a,
  .header-nav-row .navmenu > ul > li > a:focus,
  .header-nav-row .navmenu > ul > li:last-child > a {
    padding: 10px 3px;
    font-size: 12.5px;
    /* Écart icône ↔ libellé resserré (8px par défaut). */
    gap: 5px;
  }

  /* Icône légèrement réduite, mais toujours lisible. */
  .header-nav-row .navmenu > ul > li > a .nav-link-icon {
    font-size: 14px !important;
  }

  /* Chevron des menus déroulants resserré lui aussi. */
  .header-nav-row .navmenu > ul > li > a .toggle-dropdown {
    font-size: 10px;
    margin-left: 2px !important;
  }

  .header-nav-row .navmenu > ul > li > a.active::after {
    left: 2px;
    right: 2px;
  }

  /* Les deux boutons du bandeau se resserrent d'autant. */
  .btn-header-contact {
    padding: 8px 14px;
    gap: 7px;
  }

  .header-top .btn-getstarted,
  .header-top .btn-getstarted:focus {
    padding: 8px 16px !important;
  }

  /* Champ resserré, mais assez large pour la formulation « md »
     (« Rechercher un service, une offre… ») : ~208px de texte pour ~232px
     d'espace utile. */
  .global-search-desktop {
    max-width: 300px;
  }
}

/* ==========================================================================
   États vides (composant <x-empty-state>)
   Utilisé quand une rubrique (marketplace, tutoriels, formations, offres
   d'emploi, réalisations…) n'a encore aucun contenu publié : on annonce ce
   qui arrive plutôt que d'afficher un « aucun résultat » décourageant.
   Tout est bâti sur les tokens, donc le thème sombre suit automatiquement.
   ========================================================================== */
.empty-state {
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 24px;
  text-align: center;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
}

.empty-state-icon i {
  font-size: 36px;
  line-height: 1;
}

.empty-state-title {
  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 12px;
}

.empty-state-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--nb-muted);
  margin-bottom: 0;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

/* Boutons de l'état vide : primaire plein, secondaire en contour. */
.empty-state-actions .btn-empty-state,
.empty-state-actions .btn-empty-state-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--accent-color);
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
}

.empty-state-actions .btn-empty-state {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.empty-state-actions .btn-empty-state:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 12%);
  border-color: color-mix(in srgb, var(--accent-color), #000 12%);
  color: var(--contrast-color);
}

.empty-state-actions .btn-empty-state-outline {
  background-color: transparent;
  color: var(--accent-color);
}

.empty-state-actions .btn-empty-state-outline:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

/* Variante compacte : filtre/recherche sans résultat, le contenu existe. */
.empty-state--compact {
  padding: 48px 20px;
}

.empty-state--compact .empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}

.empty-state--compact .empty-state-icon i {
  font-size: 28px;
}

.empty-state--compact .empty-state-title {
  font-size: 18px;
}

@media (max-width: 575px) {
  .empty-state {
    padding: 40px 16px;
  }

  .empty-state-title {
    font-size: 19px;
  }

  .empty-state-text {
    font-size: 15px;
  }

  .empty-state-actions .btn-empty-state,
  .empty-state-actions .btn-empty-state-outline {
    width: 100%;
    justify-content: center;
  }
}