/* ============================================================
   ÉVOLUTIONS UX — CARROUSELS OWL : DES FLÈCHES À LA PLACE DES POINTS
   ------------------------------------------------------------
   Règle 6 du cahier des charges, sur tout le site : « les points sont
   remplacés par des flèches horizontales et le défilement automatique
   est supprimé ». Réglages dans js/slideshow/slider.js, accessibilité
   des flèches dans js/evolutions/carrousels.js.

   Chaque flèche contient deux tracés SVG ; ce fichier choisit lequel
   montrer :
   - galeries (#BLOC_SLIDER) et chronologies (#Bloc_Slider_Date) avaient
     déjà des flèches : mêmes carrés, même place, même chevron qu'avant
     (l'image de 15 px devient un SVG de 15 px) ;
   - carrousel de l'accueil (#slider_1, repris par la section Carrousel
     des nouveaux gabarits) et carrousel recrutement (#bloc_recrutement)
     n'avaient que des points : ils reçoivent la paire de flèches du
     design des nouveaux blocs (`.slider__fleche`), placée dans un espace
     libre pour ne pas décaler la page.
   ============================================================ */

/* ---- Tracé par défaut : le chevron ---- */
.owl-nav .owl-fleche{ display: block; }
.owl-nav .owl-fleche--longue{ display: none; }

/* Flèche sans objet en bout de carrousel (Owl : `.disabled`) : estompée,
   comme celles des nouveaux blocs. Les pages SGT la masquaient déjà
   (`.cache-nav` de js/script.js, prioritaire). */
.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled{ opacity: .3; cursor: default; }

/* Focus clavier visible sur fond clair comme sur photo */
.owl-nav .owl-prev:focus-visible,
.owl-nav .owl-next:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #222221;
}


/* ---- Galeries et chronologies : le chevron centré dans le carré ----
   Taille et position des carrés inchangées (style.css). */
#BLOC_SLIDER .owl-prev,
#BLOC_SLIDER .owl-next,
#Bloc_Slider_Date .owl-prev,
#Bloc_Slider_Date .owl-next{
  display: flex;
  align-items: center;
  justify-content: center;
}
#BLOC_SLIDER .owl-nav{ color: #222221; }     /* comme back-copie.png : chevron foncé, carré blanc */
#Bloc_Slider_Date .owl-nav{ color: #fff; }   /* comme back.png : chevron blanc, carré bleu */


/* ---- Accueil et recrutement : la paire de flèches du design ---- */
#slider_1 .owl-nav,
#bloc_recrutement .owl-nav{
  display: flex;             /* style.css les masquait : seuls les points servaient */
  gap: 10px;
  position: relative;
  z-index: 1;
}
/* Owl masque la navigation quand tout tient à l'écran : on le respecte */
#slider_1 .owl-nav.disabled,
#bloc_recrutement .owl-nav.disabled{ display: none; }

#slider_1 .owl-nav .owl-prev,
#slider_1 .owl-nav .owl-next,
#bloc_recrutement .owl-nav .owl-prev,
#bloc_recrutement .owl-nav .owl-next{
  position: static;          /* style.css : `.owl-prev { position: absolute; top: 115px }`, sans portée */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid #222221;
  color: #222221;
  background: none;
  transition: opacity .3s ease;
}
#slider_1 .owl-fleche--chevron,
#bloc_recrutement .owl-fleche--chevron{ display: none; }
#slider_1 .owl-fleche--longue,
#bloc_recrutement .owl-fleche--longue{ display: block; }

/* Accueil : sous l'image, alignées sur son bord droit. Le contenu occupe
   80 % de la largeur à 13 % du bord gauche, avec 5 % de marge basse
   (style.css) : les flèches remontent dans cette marge, la section garde
   sa hauteur. */
#slider_1 .owl-nav{
  justify-content: flex-end;
  width: 80%;
  margin: calc(24px - 5%) 7% 0 13%;
}

/* Recrutement : sur la ligne du bouton « En savoir plus », à droite.
   La piste a 2 % de marge basse et le bouton 40 px de haut. */
#bloc_recrutement .owl-nav{
  justify-content: flex-end;
  margin-top: calc(-43px - 2%);
}

/* Contenu centré et empilé : flèches centrées sous le contenu, à la
   place des points (style.css passe en colonne sous 1000 px pour le
   recrutement, sous 850 px pour l'accueil). */
@media screen and (max-width: 1000px){
  #bloc_recrutement .owl-nav{ justify-content: center; margin-top: 16px; }
}
@media screen and (max-width: 850px){
  #slider_1 .owl-nav{ justify-content: center; width: auto; margin: 12px 0 0; }
}