/* ==========================================================================
   DÔMES PRESSING — Bandeau d'annonce de l'en-tête
   Ajouté le 24/08/2026.

   Trois zones en grille : gauche, centre, droite. Sous 680 px les latérales
   disparaissent et le centre occupe toute la largeur.

   Le défilement reprend la mécanique du bandeau des avis : deux séries
   identiques dans .dp-bandeau__piste, la piste se translate de -50 %, la
   boucle est invisible. La gouttière est portée par chaque message en
   padding-right (pas de gap) pour que la moitié de la piste corresponde
   exactement à une série.

   Contrastes vérifiés, tous au-dessus du seuil WCAG AA de 4,5 :
   marine 8,78 / 10,65 / lien 6,65 — clair 6,52 / 9,47 / lien 6,19 —
   blanc 6,90 / 10,65 / lien 5,27 — pastille terre cuite 5,18.
   ========================================================================== */

.dp-bandeau{
  --b-fond:#E9F3FB;
  --b-texte:#3D5878;
  --b-fort:#003A8A;
  --b-lien:#0B5C9B;
  --b-filet:#D3E4F5;

  background:var(--b-fond);
  color:var(--b-texte);
  border-bottom:1px solid var(--b-filet);
  font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:.86rem;
  line-height:1.4;
  position:relative;
  z-index:101;
}

.dp-bandeau__wrap{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:24px;
  display:grid;
  grid-template-columns:1fr minmax(0,2fr) 1fr;
  align-items:center;
  gap:20px;
  min-height:40px;
}

/* Sans zone latérale, le centre prend toute la largeur. */
.dp-bandeau--seul .dp-bandeau__wrap{grid-template-columns:1fr}
.dp-bandeau--seul .dp-bandeau__cote{display:none}

/* ---------- Zones latérales ---------- */
.dp-bandeau__cote{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:600;
  font-size:.82rem;
  white-space:nowrap;
}
.dp-bandeau__cote--droite{justify-content:flex-end}
.dp-bandeau__cote svg{width:14px;height:14px;flex:none;opacity:.85}
.dp-bandeau__cote > span{overflow:hidden;text-overflow:ellipsis}

/* ---------- Zone centre ---------- */
.dp-bandeau__centre{min-width:0;overflow:hidden;text-align:center}

.dp-bandeau.dp-bandeau .dp-bandeau__statique{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:600;
  color:var(--b-fort);
}

/* ---------- Défilement ---------- */
.dp-bandeau__centre--defile{overflow:hidden}
.dp-bandeau__piste{
  display:inline-flex;
  white-space:nowrap;
  will-change:transform;
  animation:dp-bandeau-defile var(--dp-bandeau-vitesse,24s) linear infinite;
}
.dp-bandeau__piste > span[aria-hidden]{display:inline-flex}
.dp-bandeau__centre--defile:hover .dp-bandeau__piste,
.dp-bandeau__centre--defile:focus-within .dp-bandeau__piste{animation-play-state:paused}

.dp-bandeau.dp-bandeau .dp-bandeau__msg{
  display:inline-flex;
  align-items:center;
  font-weight:600;
  color:var(--b-fort);
  padding-right:64px;
  position:relative;
}
.dp-bandeau__msg::after{
  content:"";
  position:absolute;
  right:29px;
  top:50%;
  width:5px;
  height:5px;
  margin-top:-2px;
  border-radius:50%;
  background:currentColor;
  opacity:.35;
}

@keyframes dp-bandeau-defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- L'offre du moment ---------- */
.dp-bandeau__offre{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:0;
  max-width:100%;
}
.dp-bandeau.dp-bandeau .dp-bandeau__offre-txt{
  font-weight:700;
  color:var(--b-fort);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dp-bandeau__pastille{
  display:inline-flex;
  align-items:center;
  flex:none;
  background:#C2410C;
  color:#fff;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:800;
  font-size:.74rem;
  letter-spacing:.02em;
  padding:2px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.dp-bandeau.dp-bandeau .dp-bandeau__lien{
  flex:none;
  color:var(--b-lien);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.dp-bandeau.dp-bandeau .dp-bandeau__lien:hover,
.dp-bandeau.dp-bandeau .dp-bandeau__lien:focus{color:var(--b-fort)}

/* ==========================================================================
   Les trois habillages
   ========================================================================== */

/* A — Marine plein : l'exception. Fermeture, congés, changement d'horaires. */
.dp-bandeau--marine{
  --b-fond:#003A8A;
  --b-texte:#DCEBFB;
  --b-fort:#FFFFFF;
  --b-lien:#9FD3F5;
  --b-filet:transparent;
}

/* B — Bleu clair : le régime normal. Valeur par défaut. */
.dp-bandeau--clair{
  --b-fond:#E9F3FB;
  --b-texte:#3D5878;
  --b-fort:#003A8A;
  --b-lien:#0B5C9B;
  --b-filet:#D3E4F5;
}

/* C — Blanc, filet bleu : le fond de décor, pour une info permanente. */
.dp-bandeau--fin{
  --b-fond:#FFFFFF;
  --b-texte:#4A5B75;
  --b-fort:#003A8A;
  --b-lien:#0E6FB8;
  --b-filet:#DCE7F3;
  font-size:.83rem;
}
.dp-bandeau--fin .dp-bandeau__wrap{min-height:36px}

/* ==========================================================================
   Téléphone : seule la zone du centre subsiste
   ========================================================================== */
@media (max-width:680px){
  .dp-bandeau__wrap{
    grid-template-columns:1fr;
    padding-inline:18px;
    gap:0;
    min-height:38px;
  }
  .dp-bandeau__cote{display:none}
  .dp-bandeau__offre{width:100%}
}

/* ==========================================================================
   Animations réduites : le texte s'arrête et reste lisible
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .dp-bandeau__piste{
    animation:none;
    transform:none;
    max-width:100%;
    overflow:hidden;
  }
  .dp-bandeau__piste > span[aria-hidden]{display:none}
  .dp-bandeau.dp-bandeau .dp-bandeau__msg{padding-right:26px}
  .dp-bandeau__msg::after{right:10px}
}

/* ==========================================================================
   Impression : le bandeau ne sert à rien sur papier
   ========================================================================== */
@media print{
  .dp-bandeau{display:none !important}
}

/* ==========================================================================
   Bandeau collé

   L'en-tête est déjà collé (position:sticky, top:0). Si le bandeau se colle
   aussi, les deux se superposeraient : on décale donc l'en-tête de la hauteur
   exacte du bandeau, hauteur connue puisque le texte ne passe jamais à la
   ligne (white-space:nowrap). La classe est posée sur le corps de page par
   dp_bandeau_body_class(), et répétée ici pour passer devant `.header`.
   ========================================================================== */
.dp-bandeau--colle{position:sticky;top:0;z-index:102}

body.dp-bandeau-colle{--dp-bandeau-h:41px}
body.dp-bandeau-colle--fin{--dp-bandeau-h:37px}

body.dp-bandeau-colle .header{top:var(--dp-bandeau-h)}
body.dp-bandeau-colle .mobile-nav{top:calc(var(--header-h, 82px) + var(--dp-bandeau-h))}

@media (max-width:680px){
  body.dp-bandeau-colle{--dp-bandeau-h:39px}
  body.dp-bandeau-colle--fin{--dp-bandeau-h:39px}
}