/* ============================================================
   ALERTE v3 + FIL D'ARIANE v3 — styles de js/alerte-v3.js
   Fichier à part depuis le 07/10/2026, chargé sur TOUTES les pages par
   param/head.php, quel que soit l'en-tête. Avant, ces règles étaient en fin de
   css/custom-header-v2.css : la page de recherche (en-tête v2.1, qui charge
   custom-header-v2.1.css) recevait le script sans ses styles — chevron géant,
   page vide en haut.
   ============================================================ */

/* ============================================================
   BANDEAU D'ALERTE v3 (06/10/2026) — classe .al3 (content/alerte-v2.php)
   Défilement continu et fluide (translate, deux copies du texte : la boucle
   ne saute jamais), vitesse constante réglée par js/alerte-v3.js, pause au
   survol, bords en fondu, icône qui pulse doucement. Couleurs alert_* inchangées.
   ============================================================ */
.marque.alert.al3{
  display: flex !important;
  align-items: center;
  position: relative;
  height: 46px !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer;
}
.al3 .al3-ico{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 100%;
  position: relative;
  z-index: 2;
}
.al3 .al3-ico img{
  position: static !important;
  margin: 0 !important;
  height: 24px !important;
  animation: al3Phare 2.4s ease-in-out infinite;
}
/* icône choisie dans l'admin (param/alerte-icone.php) : dessin au trait ou émoticône, même pulsation */
.al3 .al3-ico .al3-svg{ width: 26px; height: 26px; color: #fff; animation: al3Phare 2.4s ease-in-out infinite; }
.al3 .al3-ico .al3-emo{ font-size: 24px; line-height: 1; animation: al3Phare 2.4s ease-in-out infinite; }
.al3 .al3-piste{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-left: 14px;            /* le texte ne frôle pas l'icône qui pulse */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 46px), transparent 100%);
}
.al3 .al3-defil{
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.al3 .al3-txt{
  display: inline-block;
  font-size: 19px;
  line-height: 46px;
  color: #fff;
  letter-spacing: .01em;
}
.al3 .al3-txt::after{
  content: "\2022";            /* point de séparation entre deux passages */
  display: inline-block;
  margin: 0 42px;
  opacity: .7;
}
.al3.al3-anime .al3-defil{ animation: al3Defil var(--al3-duree, 20s) linear infinite; }
.al3.al3-anime:hover .al3-defil,
.al3.al3-anime:focus-visible .al3-defil{ animation-play-state: paused; }
@keyframes al3Defil{ from{ transform: translate3d(0, 0, 0); } to{ transform: translate3d(-50%, 0, 0); } }
@keyframes al3Phare{ 0%, 100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.1); opacity: .82; } }
/* texte qui tient dans la largeur, ou animations réduites : il ne défile pas */
.al3:not(.al3-anime) .al3-txt + .al3-txt{ display: none; }
.al3:not(.al3-anime) .al3-txt::after{ content: none; }
.al3.al3-statique .al3-defil{ display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.al3:focus-visible{ outline: 3px solid #fff; outline-offset: -3px; }
/* sortie du menu par js/alerte-v3.js : fixée sous le menu (et sous la rangée d'icônes
   quand elle apparaît), sous les sous-menus (z-index 9) */
.marque.alert.al3.al3-fixe{
  position: fixed !important;
  left: 0; right: 0;
  width: 100% !important;
  margin: 0 !important;
  z-index: 7;
  transition: top .25s ease;
}
@media (max-width: 767px){
  .marque.alert.al3{ height: 36px !important; }
  .al3 .al3-ico{ width: 40px; }
  .al3 .al3-piste{ margin-left: 8px; }
  .al3 .al3-ico img{ height: 19px !important; }
  .al3 .al3-ico .al3-svg{ width: 21px; height: 21px; }
  .al3 .al3-ico .al3-emo{ font-size: 19px; }
  .al3 .al3-txt{ font-size: 15px; line-height: 36px; }
  .al3 .al3-txt::after{ margin: 0 30px; }
}
@media (prefers-reduced-motion: reduce){
  .al3 .al3-ico img, .al3 .al3-ico .al3-svg, .al3 .al3-ico .al3-emo{ animation: none; }
}


/* ============================================================
   FIL D'ARIANE v3 (06/10/2026) — reconstruit par js/alerte-v3.js (classe .ar3-on)
   Même dessin que le fil d'Ariane du menu (barre grise, chevron turquoise qui
   pivote et passe au vert au survol), sur une seule ligne : le dernier élément
   se coupe avec « … », puis les autres si vraiment nécessaire.
   ============================================================ */
#arianne.ar3-on{
  display: flex !important;
  align-items: center;
  height: 40px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: content-box;      /* largeur + marges posées par nav-v2.js = toute la largeur */
  overflow: hidden;
  background: #e5e5e5 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  color: #333;
  font-size: 15px;
  z-index: 6;
}
#arianne.ar3-on.ar3-colle{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.ar3{ display: flex; align-items: center; min-width: 0; width: 100%; }
.ar3-vh{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ar3-liste{
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
/* les parents gardent leur nom (45 % de la largeur au plus) ; seul le dernier
   se coupe ; s'il devient trop court, js/alerte-v3.js replie les niveaux du milieu en « … » */
.ar3-liste li{ display: flex; align-items: center; min-width: 0; flex: 0 0 auto; max-width: 45%; }
.ar3-liste li.ar3-dernier{ flex: 0 1 auto; max-width: none; }
.ar3-liste li.ar3-plie{ display: none; }
.ar3-liste li.ar3-accueil{ max-width: none; }
#arianne .ar3-accueil .ar3-txt{ display: flex; align-items: center; overflow: visible; }
#arianne .ar3-accueil img{ display: block; width: 22px; height: 22px; margin: 0; transition: transform .2s ease; }
#arianne .ar3-accueil a.ar3-txt:hover img{ transform: scale(1.08); }
.ar3-liste li.ar3-points .ar3-txt{ cursor: default; }
#arianne .ar3-txt{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  text-decoration: none;
}
#arianne a.ar3-txt:hover{ text-decoration: underline; color: #000; }
#arianne .ar3-dernier .ar3-txt{ color: #000; }
.ar3-fl{
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin: 0 13px;
  fill: none;
  stroke: #1f9fb5;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease, stroke .25s ease;
}
/* survol d'un parent : son chevron pivote (« retour ») et passe au vert, comme dans le menu */
.ar3-liste li:hover > .ar3-fl{ transform: rotateY(180deg); stroke: #8ec809; }
@media (max-width: 767px){
  #arianne.ar3-on{ height: 34px; font-size: 13px; margin-top: 0 !important; box-sizing: border-box; }  /* 100 % + marges 5 % : sans ça, 10 % de trop */
  .ar3-fl{ width: 10px; height: 10px; margin: 0 8px; }
  #arianne .ar3-accueil img{ width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce){
  .ar3-fl{ transition: none; }
}