/*
Theme Name: Xpertzon (TT5 Child)
Template: twentytwentyfive
Version: 1.2.0
Description: Thème enfant TT5 — CSS global. Les feuilles de pages sont dans css/ (chargées par functions.php).
*/

/* --------------------------------------------------------------------------
   style.css — GLOBAL (toutes les pages)

   1.   BASE — rendu typographique, resets TT5
   2.   BOUTONS & ICÔNES — système réutilisable (notice d'utilisation ci-dessous)
   3.1  EN-TÊTE — header fixed, changement de logo au scroll, nav
   3.2  MENU : sous-menus (ul enfant) et états
   3.3  MENU sticky (.site-header.is-stuck) : header bleu ciel, sous-menus blancs
   3.4  MENU (suite) : boutons Inscription / Connexion + mobile plein écran
   4.   SECTIONS « SPLIT » — 2 colonnes 50/50, fonds plein cadre indépendants
   5.   GÉNÉRAL & CARTES
   6.   PIED DE PAGE
   7.   COMPOSANTS PARTAGÉS
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. BASE — rendu typographique, resets TT5
   ========================================================================== */

/* --- 1.1  --- */

/* Lissage typographique (rendu plus fin style Divi / macOS) */
body, html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Annulation du fond crème par défaut de TT4/TT5 */
body,
.wp-site-blocks {
  background-color: #ffffff !important;
}

/* Suppression des margin-top automatiques du thème parent */
main,
footer {
  margin-top: 0 !important;
}

/* Marges standard des pages, compte tenu du header fixed */
body.page-template-ap-standard main,
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-order-received main {
  margin: 100px 0 50px !important;
}

.wp-site-blocks :focus:not(:focus-visible) { outline: none; }
.wp-site-blocks :focus-visible {
  outline: 2px solid var(--wp--preset--color--bleu-clair);
  outline-offset: 2px;
}


/* ==========================================================================
   2. BOUTONS & ICÔNES — système réutilisable (notice d'utilisation ci-dessous)
   ==========================================================================

   1. SUR UN BLOC BOUTON GUTENBERG NATIF :
      ------------------------------------
      Le style "primaire" (orange/blanc) est DÉJÀ appliqué par défaut via
      theme.json — ne rien ajouter pour un bouton plein classique.
      Pour dévier de ce style par défaut, dans le panneau latéral droit >
      Avancé > Classe(s) CSS supplémentaire(s), ajouter UNE des variantes :
        - Contour (fond blanc, bordure/texte orange)  : btn--secondaire
        - LinkedIn (bleu nuit <-> blanc au survol)     : btn--linkedin
        - Désactivé / non cliquable                    : btn--desactive
        - Retour (contour bleu clair, flèche à gauche) : btn--retour   (+ btn--sans-fleche)
        - Lien texte seul, flèche à gauche (orange)    : btn--texte    (+ btn--sans-fleche)
      Modificateur combinable avec les variantes ci-dessus :
        - Retirer la flèche au survol                  : btn--sans-fleche

      /!\ btn--primaire ne sert JAMAIS ici : un bouton natif est déjà
      "primaire" sans rien ajouter (voir point 3).

      Icônes : IMPOSSIBLE d'en ajouter une à un bouton natif via le panneau
      (le champ classe ajoute une classe à un élément existant, il ne peut
      pas injecter un nouveau <span> dans le HTML). Si tu as besoin d'une
      icône, écris ce bouton-là en HTML brut (point 2).

   2. EN HTML BRUT (bloc HTML personnalisé / shortcode PHP / template) :
      ------------------------------------------------------------------
      <a href="/lien" class="btn btn--primaire">
          Mon texte
      </a>

      Avec icône (le <span> se met AVANT le texte ; currentColor la fait
      suivre automatiquement la couleur du texte, donc le survol aussi) :
      <a href="https://linkedin.com/..." target="_blank" rel="noopener"
         class="btn btn--linkedin btn--sans-fleche">
          <span class="btn__icone btn__icone--linkedin"></span>
          LinkedIn
      </a>

      Une seule variante à la fois parmi : btn--primaire / btn--secondaire
      / btn--linkedin / btn--desactive. btn--sans-fleche se combine avec
      n'importe laquelle.

   3. POURQUOI btn--primaire EXISTE ALORS QU'ON NE S'EN SERT PRESQUE JAMAIS :
      ------------------------------------------------------------------------
      theme.json stylise déjà tout bouton NATIF en "primaire" sans classe.
      btn--primaire n'est que la copie en CSS pur de ce même rendu, pour
      un lien écrit à la main qui, lui, ne profite pas de theme.json.
      Règle simple : bloc natif → jamais btn--primaire. HTML à la main
      qui doit ressembler à un bouton normal du site → btn--primaire.

   4. CENTRER UN BOUTON :
      --------------------
      La classe "centre-bouton" se pose sur le PARENT du bouton (Groupe,
      <div>, <p>...), jamais sur le bouton lui-même — c'est le conteneur
      qui centre son contenu, pas l'inverse.

   5. AJOUTER UNE NOUVELLE ICÔNE :
      -----------------------------
      Dupliquer .btn__icone--linkedin (section 7), changer le nom et le
      SVG en data-URI. Peu importe la couleur du <path> dans le SVG
      d'origine : un mask-image ne retient que la FORME, la couleur
      affichée vient toujours de currentColor.
   ========================================================================== */

/* --- 1. Base commune (structure + la flèche) --- */
.wp-block-button__link,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  position: relative;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, padding-right 0.2s ease;
  border: 1px solid var(--wp--preset--color--orange);
  cursor: pointer;
}
.wp-block-button__link:hover,
.btn:hover {
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--orange);
  padding-right: 2.65rem;
}
.wp-block-button__link::after,
.btn::after {
  content: "→";
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translate(-6px, -50%);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.wp-block-button__link:hover::after,
.btn:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}

/* --- 2. Primaire (hors bloc Gutenberg natif — voir notice, point 3) --- */
.btn--primaire:not(.wp-block-button),
.wp-block-button.btn--primaire .wp-block-button__link {
  background-color: var(--wp--preset--color--orange);
  color: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--orange);
  border-radius: 3px;
  padding: 0.75rem 1.95rem;
  font-weight: 600;
}
.btn--primaire:not(.wp-block-button):hover,
.wp-block-button.btn--primaire .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--orange);
}

/* --- 3. Variante contour --- */
.btn--secondaire:not(.wp-block-button),
.wp-block-button.btn--secondaire .wp-block-button__link {
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--orange);
  border: 1px solid var(--wp--preset--color--orange);
  border-radius: 3px;
  padding: 0.75rem 1.95rem;
  font-weight: 600;
}
.btn--secondaire:not(.wp-block-button):hover,
.wp-block-button.btn--secondaire .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--orange);
  color: var(--wp--preset--color--blanc);
}

/* --- 4. Variante LinkedIn --- */
.btn--linkedin:not(.wp-block-button),
.wp-block-button.btn--linkedin .wp-block-button__link {
  background-color: var(--wp--preset--color--bleu-nuit);
  color: var(--wp--preset--color--blanc);
  border: 1px solid var(--wp--preset--color--bleu-nuit);
  border-radius: 3px;
  padding: 0.75rem 1.95rem;
  font-weight: 600;
}
.btn--linkedin:not(.wp-block-button):hover,
.wp-block-button.btn--linkedin .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu-nuit);
}

/* --- 5. Désactivé --- */
.btn--desactive:not(.wp-block-button),
.wp-block-button.btn--desactive .wp-block-button__link {
  background-color: var(--wp--preset--color--blanc);
  color: #999;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0.75rem 1.95rem;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
}

/* --- 6. Retirer la flèche --- */
.btn--sans-fleche:not(.wp-block-button)::after,
.wp-block-button.btn--sans-fleche .wp-block-button__link::after {
  content: none;
}
.btn--sans-fleche:not(.wp-block-button):hover,
.wp-block-button.btn--sans-fleche .wp-block-button__link:hover {
  padding-right: 1.95rem;
}

/* --- 7. Icônes en masque SVG (currentColor = suit automatiquement le survol) --- */
.btn__icone {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.btn__icone--linkedin {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45z"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45z"/></svg>');
}

/* --- 8. Centrage --- */
.centre-bouton {
  display: flex;
  justify-content: center;
}

/* --- 9. Variantes supplémentaires (déplacées ici : doivent venir APRÈS « Retirer la flèche ») --- */
/* Variante de bouton « retour » : contour bleu-clair, flèche à gauche.
   À ajouter au système de boutons (utiliser avec btn--sans-fleche). */
.wp-block-button.btn--retour .wp-block-button__link,
.btn--retour:not(.wp-block-button) {
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu-clair);
  border: 1px solid var(--wp--preset--color--bleu-clair);
  border-radius: 3px;
  padding: 0.75rem 1.95rem;
  font-weight: 600;
}
.wp-block-button.btn--retour .wp-block-button__link:hover,
.btn--retour:not(.wp-block-button):hover {
  background-color: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--blanc);
}
.wp-block-button.btn--retour .wp-block-button__link::before,
.btn--retour:not(.wp-block-button)::before { content: "←"; }

/* Variante de bouton « lien retour » (texte seul + flèche). À utiliser avec btn--sans-fleche. */
.wp-block-button.btn--texte .wp-block-button__link,
.btn--texte:not(.wp-block-button) {
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--wp--preset--color--orange);
  font-weight: 600;
}
.wp-block-button.btn--texte .wp-block-button__link:hover,
.btn--texte:not(.wp-block-button):hover {
  padding: 0;
  background-color: transparent;
  color: var(--wp--preset--color--bordeaux);
  text-decoration: underline;
}
.wp-block-button.btn--texte .wp-block-button__link::before,
.btn--texte:not(.wp-block-button)::before { content: "←"; }


/* ==========================================================================
   3.1 EN-TÊTE — header fixed, changement de logo au scroll, nav
   ========================================================================== */

/* Général */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: box-shadow 0.2s ease;
}
.site-header.is-stuck {
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
  background-color: var(--wp--preset--color--bleu-clair);
}

/* Compense la sortie du flux du header fixed (hauteur calculée en JS) */
body {
  padding-top: var(--header-height, 90px); /* valeur de repli le temps que le JS tourne */
}

/* Décalage pour la barre d'admin WP quand on est connecté */
body.admin-bar .site-header {
  top: 32px;
}

/* Changement de logo (couleur → noir/blanc) quand le header devient "stuck" */
.logo-wrap {
  position: relative;
}
.logo-wrap .logo-normal,
.logo-wrap .logo-nb {
  transition: opacity 0.2s ease;
}
.logo-wrap .logo-nb {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  margin-top: 0;
}
.site-header.is-stuck .logo-normal { opacity: 0; }
.site-header.is-stuck .logo-nb { opacity: 1; }

/* Style des items du menu */
.site-header nav .wp-block-navigation-item {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 500;
}
.site-header.is-stuck .wp-block-navigation-item {
  color: var(--wp--preset--color--blanc);
}

/* Menu */

/* Item de menu actif (page courante) — état normal */
.site-header nav .wp-block-navigation-item.current-menu-item,
.site-header nav .wp-block-navigation-item.current-menu-parent,
.site-header nav .wp-block-navigation-item.current-menu-ancestor {
  color: var(--wp--preset--color--bleu-clair);
}

/* Idem, en version stuck (fond bleu clair → texte orange) */
.site-header.is-stuck nav .wp-block-navigation-item.current-menu-item,
.site-header.is-stuck nav .wp-block-navigation-item.current-menu-parent,
.site-header.is-stuck nav .wp-block-navigation-item.current-menu-ancestor {
  color: var(--wp--preset--color--orange);
}

.site-header nav a:hover {
  text-decoration: none;
}

/* Sous-menu : fond blanc → texte noir par défaut, bleu clair au survol,
   indépendant du blanc utilisé pour les items de premier niveau (fond bleu) */
.site-header nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
  color: var(--wp--preset--color--bleu-clair);
}
.site-header.is-stuck nav .wp-block-navigation__submenu-container .wp-block-navigation-item:not(.current-menu-item) > a {
  color: var(--wp--preset--color--texte-fonce);
}
.site-header.is-stuck nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
  color: var(--wp--preset--color--orange);
}


/* ==========================================================================
   3.2 MENU : sous-menus (ul enfant) et états
   ========================================================================== */

/* Sous-menu : largeur = item le plus large, sans cadre, angles 3px, ombre douce */
.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
  width: max-content;
  min-width: 100%;                  /* au moins aussi large que le parent ; à retirer si tu ne le veux pas */
  max-width: none;
  padding: 1rem;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
              0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Liens enfants : jamais de retour à la ligne, fond arrondi au survol */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  border-radius: 3px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Survol par défaut */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Page courante (enfant) et parent de la page courante : texte en bleu ciel, sans fond */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.has-child:has(.current-menu-item) > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--bleu-clair);
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content:hover {
  background-color: transparent;
}

/* Survol coloré, par lien (classes déjà posées dans l'éditeur) : fond de couleur + texte blanc */
.wp-block-navigation .wp-block-navigation-item.me-faire-accompagner > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item.me-faire-accompagner > .wp-block-navigation-item__content:focus-visible {
  background-color: var(--wp--preset--color--bordeaux);
  color: var(--wp--preset--color--blanc);
}
.wp-block-navigation .wp-block-navigation-item.proposez-savoir-faire > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item.proposez-savoir-faire > .wp-block-navigation-item__content:focus-visible {
  background-color: var(--wp--preset--color--orange);
  color: var(--wp--preset--color--blanc);
}
.wp-block-navigation .wp-block-navigation-item.je-recrute > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item.je-recrute > .wp-block-navigation-item__content:focus-visible {
  background-color: var(--wp--preset--color--bleu-nuit);
  color: var(--wp--preset--color--blanc);
}

/* Menu plein écran (mobile) : on neutralise ombre, largeur et retour à la ligne */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
  width: auto;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  white-space: normal;
}

/* Bouton « Mon espace candidat » : pastille bleu clair (texte + flèche) */
.wp-block-navigation .wp-block-navigation-item.has-child.espace {
  background-color: var(--wp--preset--color--bleu-clair);
  border: 1px solid var(--wp--preset--color--bleu-clair);
  border-radius: 5px;
  transition: background-color 0.2s ease;
}
.wp-block-navigation .wp-block-navigation-item.has-child.espace:hover {
  background-color: color-mix(in srgb, var(--wp--preset--color--bleu-clair) 70%, white);
}
nav.wp-block-navigation .wp-block-navigation-item.has-child.espace > .wp-block-navigation-item__content {
  padding: 10px 4px 10px 10px;
  padding: 7.5px 4px 7.5px 10px;
  color: var(--wp--preset--color--blanc);   /* bat le bleu « page courante » */
}
.wp-block-navigation .wp-block-navigation-item.has-child.espace > .wp-block-navigation__submenu-icon {
  margin-right: 10px;
  color: var(--wp--preset--color--blanc);
}


/* ==========================================================================
   3.3 MENU sticky (.site-header.is-stuck) : header bleu ciel, sous-menus blancs
   ========================================================================== */

/* Niveau 1 : page courante / parent de la page courante en orange (bleu invisible sur bleu).
   Le bouton « espace » garde son texte blanc. */
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:not(.espace).current-menu-item > .wp-block-navigation-item__content,
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:not(.espace).current-menu-ancestor > .wp-block-navigation-item__content,
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item.has-child:not(.espace):has(.current-menu-item) > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--orange);
}

/* Sous-menus : fond blanc, donc exactement le comportement hors sticky */
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--wp--preset--color--texte-fonce);
}
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--texte-fonce);
  background-color: rgba(0, 0, 0, 0.03);
}
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--bleu-clair);
}
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content:hover {
  background-color: transparent;
}

/* Survols colorés (fond de couleur + texte blanc), identiques au non-sticky */
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.me-faire-accompagner > .wp-block-navigation-item__content:hover,
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.me-faire-accompagner > .wp-block-navigation-item__content:focus-visible {
  background-color: var(--wp--preset--color--bordeaux);
  color: var(--wp--preset--color--blanc);
}
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.proposez-savoir-faire > .wp-block-navigation-item__content:hover,
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.proposez-savoir-faire > .wp-block-navigation-item__content:focus-visible {
  background-color: var(--wp--preset--color--orange);
  color: var(--wp--preset--color--blanc);
}
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.je-recrute > .wp-block-navigation-item__content:hover,
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.je-recrute > .wp-block-navigation-item__content:focus-visible {
  background-color: var(--wp--preset--color--bleu-nuit);
  color: var(--wp--preset--color--blanc);
}
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation__submenu-container.espace > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation__submenu-container.espace > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
  background-color: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--blanc);
}

/* Sticky : « Mon espace candidat » en bleu ciel sur fond blanc (inverse du non-sticky) */
.site-header.is-stuck .wp-block-navigation .wp-block-navigation-item.has-child.espace {
  background-color: var(--wp--preset--color--blanc);
  border-color: var(--wp--preset--color--blanc);
}
.site-header.is-stuck .wp-block-navigation .wp-block-navigation-item.has-child.espace:hover {
  background-color: color-mix(in srgb, var(--wp--preset--color--blanc) 88%, var(--wp--preset--color--bleu-clair));
}
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.has-child.espace > .wp-block-navigation-item__content,
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.has-child.espace:hover > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--bleu-clair);
}
.site-header.is-stuck .wp-block-navigation .wp-block-navigation-item.has-child.espace > .wp-block-navigation__submenu-icon,
.site-header.is-stuck .wp-block-navigation .wp-block-navigation-item.has-child.espace > .wp-block-navigation__submenu-icon svg,
.site-header.is-stuck .wp-block-navigation .wp-block-navigation-item.has-child.espace > .wp-block-navigation__submenu-icon svg path {
  color: var(--wp--preset--color--bleu-clair);
  stroke: var(--wp--preset--color--bleu-clair);
}


/* ==========================================================================
   3.4 MENU (suite) : boutons Inscription / Connexion + mobile plein écran
   ========================================================================== */

/* --- Boutons S'inscrire / Se connecter (bureau) --- */
.wp-block-navigation-item.inscription > .wp-block-navigation-item__content,
.wp-block-navigation-item.connexion > .wp-block-navigation-item__content {
  padding: 7.5px 14px;
  border: 1px solid var(--wp--preset--color--bleu-clair);
  border-radius: 5px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-navigation-item.inscription > .wp-block-navigation-item__content {
  background-color: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--blanc);
}
.wp-block-navigation-item.inscription > .wp-block-navigation-item__content:hover {
  background-color: color-mix(in srgb, var(--wp--preset--color--bleu-clair) 70%, white);
}
.wp-block-navigation-item.connexion > .wp-block-navigation-item__content {
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu-clair);
}
.wp-block-navigation-item.connexion > .wp-block-navigation-item__content:hover {
  background-color: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--blanc);
}
/* Sticky : inversés, comme « Mon espace candidat » */
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.inscription > .wp-block-navigation-item__content {
  background-color: var(--wp--preset--color--blanc);
  border-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu-clair);
}
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.connexion > .wp-block-navigation-item__content {
  background-color: transparent;
  border-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--blanc);
}
.site-header.is-stuck nav.wp-block-navigation .wp-block-navigation-item.connexion > .wp-block-navigation-item__content:hover {
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu-clair);
}

/* --- Menu plein écran (mobile) --- */
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch;
  gap: 0;
  width: 100%;
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-start;
  width: 100%;
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 0.85rem 0;
  text-align: left;
  color: var(--wp--preset--color--texte-fonce);   /* lisible aussi quand le header est sticky */
}
/* Sous-menus : décalés, filet bleu à gauche, un peu plus petits */
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  width: auto;
  align-items: flex-start;
  margin: 0 0 0.5rem 0.25rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--bleu-clair) 45%, transparent);
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.55rem 0;
  font-size: 0.92em;
}
/* Page courante */
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content,
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child:has(.current-menu-item) > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--bleu-clair);
}
/* Le « | » n'a pas de sens en mobile */
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.separateur {
  display: none;
}

/* « Mon espace candidat » : plus de pastille en mobile, une entrée de menu comme les autres */
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.espace {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 0;
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.espace > .wp-block-navigation-item__content,
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.espace > .wp-block-navigation__submenu-icon {
  padding-block: 0.85rem;
  color: var(--wp--preset--color--texte-fonce);
  stroke: var(--wp--preset--color--texte-fonce);
}

/* S'inscrire / Se connecter : boutons pleine largeur, sous le reste */
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.inscription,
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.connexion {
  margin-top: 0.75rem;
  border-bottom: 0;
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.inscription > .wp-block-navigation-item__content,
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.connexion > .wp-block-navigation-item__content {
  padding: 0.8rem 1rem;
  text-align: center;
  border: 1px solid var(--wp--preset--color--bleu-clair);
  border-radius: 5px;
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.inscription > .wp-block-navigation-item__content {
  background-color: var(--wp--preset--color--bleu-clair);
  color: var(--wp--preset--color--blanc);
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.connexion > .wp-block-navigation-item__content {
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--bleu-clair);
}







/* ===== Overlay mobile : padding au survol ===== */
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding: 0.85rem 0.75rem;   /* était 0.85rem 0 */
  border-radius: 3px;
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  padding-left: .5rem;        /* compense le padding horizontal des liens enfants */
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: .55rem .75rem;
}

/* ===== Overlay mobile : "Mon espace candidat" en bloc distinct ===== */
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.espace {
  margin-top: 1.25rem;
  padding: .25rem;
  background-color: color-mix(in srgb, var(--wp--preset--color--bleu-clair) 10%, var(--wp--preset--color--blanc, #fff));
  border: 1px solid var(--wp--preset--color--bleu-clair);
  border-radius: 5px;
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.espace > .wp-block-navigation-item__content {
  padding: 0.7rem 0.75rem;    /* écrase le 10px 4px 10px 10px de la pastille desktop → plus de décalage */
  color: var(--wp--preset--color--bleu-clair);
  font-weight: 500;
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.espace > .wp-block-navigation__submenu-icon {
  padding-block: 0.7rem;
  color: var(--wp--preset--color--bleu-clair);
  stroke: var(--wp--preset--color--bleu-clair);
}



/* ===== Overlay mobile : S'inscrire / Se connecter en tête, sans débordement ===== */
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.inscription,
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.connexion {
  order: -1;               /* remonte en haut du menu */
  width: 100%;
  margin: 0 0 .5rem;
  border-bottom: 0;
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.connexion {
  margin-bottom: 1rem;     /* respiration avant les liens de navigation */
}
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.inscription > .wp-block-navigation-item__content,
body nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.connexion > .wp-block-navigation-item__content {
  box-sizing: border-box;  /* le padding/bordure ne s'ajoutent plus à la largeur */
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: center;
}


/* ==========================================================================
   4. SECTIONS « SPLIT » — 2 colonnes 50/50, fonds plein cadre indépendants
   --------------------------------------------------------------------------
   Structure dans l'éditeur :
     Groupe (classe "section-split" [+ g-xxx] [+ d-xxx])
       └─ Colonnes (50/50, largeur par défaut → hérite de min(80%,1080px))
            ⚠️ Le bloc Colonnes lui-même doit rester en largeur PAR DÉFAUT
            (ni Large ni Pleine largeur) — seul le Groupe "section-split"
            est en Pleine largeur. Si une colonne sert à afficher une photo
            (voir g-photo/d-photo ci-dessous), elle reste VIDE : le fond
            vient du pseudo-élément du Groupe, pas de la colonne elle-même
            — une colonne enfermée dans les 1080px ne peut pas, par
            construction, faire déborder son propre fond jusqu'au bord
            de l'écran.

   Convention de nommage (gauche = ::before, droite = ::after) :
     g-<slug> / d-<slug>       → couleur plane (palette du thème)
     g-degrade-xxx / d-degrade-xxx → dégradé
     g-photo / d-photo         → active une photo (+ dégradé de fondu)
       à combiner avec une classe "photo-xxx" qui fournit l'URL
     (aucune classe)           → rien, transparent
     bleed-gauche/droite       → cas à part : une VRAIE image (bloc Image/
     Cover) qui doit déborder, plutôt qu'un pseudo-élément décoratif
   ========================================================================== */

.section-split {
  position: relative;
  z-index: 0; /* crée un contexte d'empilement : les z-index -1 des enfants restent confinés ici */
    margin-top: 0 !important;
}
.section-split > .wp-block-columns {
    gap:0;
 }
.section-split::before,
.section-split::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;
  z-index: -1;
}
.section-split::before { left: 0; }
.section-split::after  { left: 50vw; }

/* Filet de sécurité au cas où le bloc Colonnes n'hérite pas du content width */
.section-split > .wp-block-columns {
  width: min(80%, 1080px);
  margin-inline: auto;
}

/* Padding de la colonne de texte */
.section-split.g-txt { padding: 75px 5% 75px 0; }
.section-split.d-txt { padding: 75px 0 75px 5%; }

/* Hero */
.entreprise .section-split h1,
.candidat .section-split h1 {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 3px;
  line-height: 1.4em;
  margin-bottom: 30px;
}
.entreprise .section-split h1 {
  color: var(--wp--preset--color--orange);
}
.candidat .section-split h1 {
  color: var(--wp--preset--color--bleu-nuit);
}
.entreprise .section-split .txt1-hero,
.candidat .section-split .txt1-hero {
  font-size: 32px; 
  color:var(--wp--preset--color--blanc); 
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 30px;
}
.entreprise .section-split .txt2-hero,
.candidat .section-split .txt2-hero {
  font-weight: 400;;
}
.entreprise .section-split .txt2-hero {
  color:var(--wp--preset--color--blanc); 
}

/* Généralités des pages */
.section-split h2 {
  color:var(--wp--preset--color--orange);
  font-weight: bold;
}
.section-split p.sous-titre-section {
  font-weight: bold;
  font-size: 32px;
  line-height: 1.2;
}
.section-split h3 {
  font-weight: bold;
  margin: 30px 0 8px;
  line-height: 1.3;
}
/* .section-split:not(.hero) p:not(.sous-titre-section) {
  margin:0;
} */
.section-split.txt-blanc h3,
.section-split.txt-blanc p {
  color:var(--wp--preset--color--blanc);
}

/* --- 4.1 Couleurs plates, combinables avec g-/d- ---
   Chaque classe pose une variable (--couleur-g / --couleur-d) plutôt que
   le fond directement : ça permet à g-photo/d-photo (4.3) de savoir quelle
   est "la couleur d'en face" pour son dégradé, sans la recopier en dur. */

.section-split.g-bleu-clair { --couleur-g: var(--wp--preset--color--bleu-clair); }
.section-split.g-orange     { --couleur-g: var(--wp--preset--color--orange); }
.section-split.g-bleu-nuit  { --couleur-g: var(--wp--preset--color--bleu-nuit); }
.section-split.g-bordeaux   { --couleur-g: var(--wp--preset--color--bordeaux); }
.section-split.g-or         { --couleur-g: var(--wp--preset--color--or); }
.section-split.g-blanc      { --couleur-g: var(--wp--preset--color--blanc); }

.section-split.d-bleu-clair { --couleur-d: var(--wp--preset--color--bleu-clair); }
.section-split.d-orange     { --couleur-d: var(--wp--preset--color--orange); }
.section-split.d-bleu-nuit  { --couleur-d: var(--wp--preset--color--bleu-nuit); }
.section-split.d-bordeaux   { --couleur-d: var(--wp--preset--color--bordeaux); }
.section-split.d-or         { --couleur-d: var(--wp--preset--color--or); }
.section-split.d-blanc      { --couleur-d: var(--wp--preset--color--blanc); }

/* Application effective de la couleur (écrasée par g-degrade-xxx/g-photo
   ci-dessous si présents, qui sont plus spécifiques) */
.section-split::before { background: var(--couleur-g, transparent); }
.section-split::after  { background: var(--couleur-d, transparent); }

/* --- 4.2 Dégradés, même logique — ajouter ici au fil de l'eau --- */
.section-split.g-degrade-bleu::before {
  background: linear-gradient(135deg, var(--wp--preset--color--bleu-clair), var(--wp--preset--color--bleu-nuit));
}
.section-split.d-degrade-or::after {
  background: linear-gradient(135deg, var(--wp--preset--color--or), var(--wp--preset--color--bordeaux));
}

/* --- 4.3 Photos (image + dégradé de fondu), même logique g-/d- ---
   Principe : "g-photo"/"d-photo" active le fond image+dégradé sur le
   pseudo-élément concerné ; une classe "photo-xxx" séparée fournit
   juste l'URL (variable CSS --photo-url) et, si besoin, le cadrage
   (--photo-pos). Les deux classes se combinent sur le Groupe.
 
   La couleur vers laquelle le dégradé fond n'est jamais codée en dur :
   c'est toujours celle du côté COMPAGNON (le g-<couleur>/d-<couleur> posé
   en face, via --couleur-g/--couleur-d — voir 4.1). Et le sens du dégradé
   suit le côté de la photo : il pousse vers la droite quand la photo est
   à droite (d-photo), vers la gauche quand elle est à gauche (g-photo) —
   la photo reste nette près du texte, et fond vers la couleur en
   s'approchant du bord de l'écran.
 
   Exemple dans l'éditeur, "Classe CSS supplémentaire" du Groupe :
     section-split d-photo photo-kupg1j g-bleu-nuit
   (photo à droite, fondu vers le bleu nuit du côté gauche)
 
   Pour ajouter une nouvelle photo : une ligne "photo-xxx" en plus,
   sur le modèle de photo-mec / photo-kupg1j ci-dessous. Aucune couleur
   à préciser : elle vient automatiquement du g-xxx/d-xxx posé en face. */
 
.section-split.d-photo::after {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--photo-pos, center top);
  background-image:
    linear-gradient(90deg,
      var(--couleur-g, var(--wp--preset--color--bleu-nuit)) 0%,
      color-mix(in srgb, var(--couleur-g, var(--wp--preset--color--bleu-nuit)) 50%, transparent) 25%,
      color-mix(in srgb, var(--couleur-g, var(--wp--preset--color--bleu-nuit)) 0%, transparent) 75%
    ),
    var(--photo-url);
}

.section-split.g-photo::before {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--photo-pos, center top);
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--couleur-d, var(--wp--preset--color--bleu-nuit)) 0%, transparent) 25%,
      color-mix(in srgb, var(--couleur-d, var(--wp--preset--color--bleu-nuit)) 50%, transparent) 75%,
      var(--couleur-d, var(--wp--preset--color--bleu-nuit)) 100%
    ),
    var(--photo-url);
}

/* Variante sans dégradé : photo brute, aucune couleur mélangée */
.section-split.g-photo.sans-degrade::before,
.section-split.d-photo.sans-degrade::after {
  background-image: var(--photo-url);
}

/* Accueil */
.section-split.photo-accueil-hero {
  --photo-url: url('https://xpertzon.fr/wp-content/uploads/2024/06/photo-accueil-1024x768-1.jpg');
}
.section-split.photo-accueil-entreprises {
  --photo-url: url('https://xpertzon.fr/wp-content/uploads/2024/06/KUPG1j69-800px.png');
  --photo-pos: left top;
}
.section-split.photo-accueil-candidats {
  --photo-url: url('https://xpertzon.fr/wp-content/uploads/2024/06/iStock-1308883292-copie.jpg');
  --photo-pos: right top;
}
.section-split.photo-accueil-rebond {
  --photo-url: url('https://xpertzon.fr/wp-content/uploads/2025/02/accompagnement-1-800px.jpg');
  --photo-pos: left top;
}

/* Entreprise */
.section-split.photo-entreprise-hero {
  --photo-url: url('https://xpertzon.fr/wp-content/uploads/2024/05/business-8676559_1280-1080x720-1.jpg');
}
.section-split.photo-entreprise-permanents-missions {
  --photo-url: url('https://xpertzon.fr/wp-content/uploads/2024/06/mec-800px.jpg');
}

/* Candidat */
.section-split.photo-candidat-hero {
  --photo-url: url('https://xpertzon.fr/wp-content/uploads/2024/06/iStock-1328351493-800x850-1.jpg');
}
.section-split.photo-candidat-comment-fonctionne {
  --photo-url: url('https://xpertzon.fr/wp-content/uploads/2024/06/3-800px.png');
}

/* --- 4.4 Bleed d'une VRAIE image (bloc Image/Cover, pas une décoration) ---
   Cas à part : quand l'image EST le contenu (pas juste un fond décoratif),
   on la sort du flux directement, à poser sur le bloc Image/Cover lui-même
   (pas sur le Groupe section-split), en "Classe CSS supplémentaire" du
   bloc image. */
.bleed-gauche,
.bleed-droite {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;
  z-index: -1;
  object-fit: cover;
}
.bleed-gauche { left: 0; }
.bleed-droite { left: 50vw; }

/* --- 4.5 Responsive : les colonnes WP s'empilent, on abandonne le split vw
   et on colore chaque colonne en pleine largeur directement --- */
@media (max-width: 599px) {
  .section-split::before,
  .section-split::after {
    content: none;
  }
  .section-split.g-bleu-clair .wp-block-column:first-child,
  .section-split.d-bleu-clair .wp-block-column:last-child {
    background-color: var(--wp--preset--color--bleu-clair);
  }
  .section-split.g-bleu-nuit .wp-block-column:first-child,
  .section-split.d-bleu-nuit .wp-block-column:last-child {
    background-color: var(--wp--preset--color--bleu-nuit);
  }
  .section-split.g-orange .wp-block-column:first-child,
  .section-split.d-orange .wp-block-column:last-child {
    background-color: var(--wp--preset--color--orange);
  }
  .section-split.g-bordeaux .wp-block-column:first-child,
  .section-split.d-bordeaux .wp-block-column:last-child {
    background-color: var(--wp--preset--color--bordeaux);
  }
  .section-split.g-or .wp-block-column:first-child,
  .section-split.d-or .wp-block-column:last-child {
    background-color: var(--wp--preset--color--or);
  }
  .section-split.g-blanc .wp-block-column:first-child,
  .section-split.d-blanc .wp-block-column:last-child {
    background-color: var(--wp--preset--color--blanc);
  }
  /* Correctif mobile : le bloc Colonnes doit être pleine largeur (le filet de sécurité
     min(80%, 1080px) laissait une marge de chaque côté) et le padding de la colonne de
     texte passe du Groupe à la colonne colorée. */
  .section-split.g-txt,
  .section-split.d-txt { padding: 0; }
  .section-split > .wp-block-columns { width: 100%; margin-inline: 0; }
  .section-split.g-txt > .wp-block-columns > .wp-block-column:first-child,
  .section-split.d-txt > .wp-block-columns > .wp-block-column:last-child { padding: 50px 10%; }
}


/* ==========================================================================
   5. GÉNÉRAL & CARTES
   ========================================================================== */

  h2 {
    font-weight: bold;
  }

  /* Colonne sticky ("Qui sommes-nous") */
  .colonnes-sidebar-sticky {
    align-items: flex-start!important;
  }
  .colonnes-sidebar-sticky .colonne-sticky {
    position: sticky;
    top: calc(var(--header-height, 90px) + 90px);
  }

  /* Tags */
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0;
  }
  .tags--centre {
    justify-content: center;
  }

  .tags span {
    display: inline-block;
    /* white-space: nowrap; */
    overflow-wrap: break-word;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 12px;
  }

  /* Couleur posée sur le conteneur, héritée par tous les .tag qu'il contient */
  .tags--blanc-orange span {
    background-color: rgba(255, 255, 255, 0.94);
    color: var(--wp--preset--color--orange);
  }
  .tags--orange-blanc span {
    background-color: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--blanc);
  }
  .tags--bleu-clair-blanc span {
    background-color: var(--wp--preset--color--bleu-clair);
    color: var(--wp--preset--color--blanc);
  }
  .tags--bordeaux-blanc span {
    background-color: var(--wp--preset--color--bordeaux);
    color: var(--wp--preset--color--blanc);
  }

  /* Section pleine largeur collée aux voisines (fonds de couleur bord à bord) */
  .wp-block-group.section-collee {
    margin-block: 0;
    padding-block: 0;
  }

  /* ==========================================================================
   5.2 CARTES
   ========================================================================== */

.cartes {
  gap:3rem;
}
.carte {
  background-color: var(--wp--preset--color--vert-pale);
  border-radius: 3px; /* même valeur que tes boutons, cohérence visuelle */
  padding: 40px;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); */
}
/* Témoignages */
.entreprise .carte {
  background-color: var(--wp--preset--color--vert-kaki);
}
/* Témoignages */
.etoiles {
  font-size: 24px;
  letter-spacing: 4px;
  color: var(--wp--preset--color--orange);
}
/* Témoignages */
.entreprise .carte p:not(.etoiles) {
  color: var(--wp--preset--color--blanc);
}


/* ==========================================================================
   6. PIED DE PAGE
   ========================================================================== */

footer {
  background-color: var(--wp--preset--color--texte-fonce);
}
footer .footer-haut {
  /* NOTE : pas de slug "footer-haut" déclaré dans theme.json — hérite donc
     du fond de <footer> ci-dessus. À déclarer dans theme.json si une teinte
     distincte est voulue, sinon cette règle peut être supprimée. */
  background-color: var(--wp--preset--color--footer-haut);
  padding: 50px;
}
footer .footer-bas {
  background-color: var(--wp--preset--color--footer-bas);
  padding: 50px;
}
footer p,
footer a,
footer li {
  color: var(--wp--preset--color--blanc);
  font-size: 15px;
  font-weight: 400;
}
footer p.lien-orange a {
  color: var(--wp--preset--color--orange);
}

/* Pastilles réseaux sociaux */
.wp-block-social-links .wp-social-link {
  width: 36px;
  height: 36px;
  background-color: var(--wp--preset--color--orange);
  color: var(--wp--preset--color--blanc);
}
.wp-block-social-links .wp-social-link:hover {
  background-color: var(--wp--preset--color--blanc);
  color: var(--wp--preset--color--orange);
}
.wp-block-social-links .wp-social-link a,
.wp-block-social-links .wp-social-link svg {
  font-size: 25px;
}

footer .footer-bas p,
footer .footer-bas a {
  font-size: 13px;
  text-decoration: none;
}
footer .footer-bas a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   7. COMPOSANTS PARTAGÉS — jQuery UI (autocomplete, datepicker)
   Utilisés par la page Expert, « Je recrute » et la page Mission : chargés partout.
   ========================================================================== */

/* Autocomplete jQuery UI (menu injecté dans <body>) */
.ui-autocomplete {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--wp--preset--color--blanc);
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  font-size: 14px;
  color: var(--wp--preset--color--texte-fonce);
  width: 250px !important;      /* jQuery UI écrit un width inline : seul !important le bat */
  max-width: none !important;
}
.ui-autocomplete .ui-menu-item {
  padding: 2px 0 2px 10px;
  cursor: pointer;
}
.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-menu-item.ui-state-parent-active {
  background-color: #f5f5f5;
}
/* Sans la feuille jquery-ui, le message d'accessibilité s'affiche en clair */
.ui-helper-hidden-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* Calendrier (datepicker) */
#ui-datepicker-div { padding: 15px; background-color: var(--wp--preset--color--blanc); }
.ui-datepicker-prev, .ui-datepicker-next { display: none; }
.ui-datepicker {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  background-color: var(--wp--preset--color--blanc);
  font-family: Arial, sans-serif;
  font-size: 14px;
}
.ui-datepicker select {
  max-width: 25rem;
  min-height: 30px;
  margin: 0 1px;
  padding: 0 24px 0 8px;
  border-color: #8c8f94;
  -webkit-appearance: none;
  background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
  background-size: 16px 16px;
  font-size: 14px;
  vertical-align: middle;
  cursor: pointer;
}
.ui-datepicker-weekday { font-weight: 700; }
.ui-datepicker-calendar td { padding: 5px; }
.ui-datepicker-calendar td:hover { background-color: #f0f0f0; cursor: pointer; }
.ui-datepicker-calendar .ui-state-default { padding: 3px; }
.ui-datepicker-calendar .ui-state-active { background-color: #337ab7; color: #fff; }
.ui-datepicker-calendar .ui-state-active:hover { background-color: #286090; }