/* =========================================================
   ESPACE CLIENT — affichage/masquage du panneau
   Mécanisme de bascule mutualisé homepage + pages intérieures
   (toggle JS dans nav-panel.js). L'apparence (position, couleurs,
   formulaire) reste propre à chaque page (v2/css/common.css pour la
   homepage, css/commun.css pour les pages intérieures) : ici on ne
   gère QUE la transition ouvert/fermé, pour remplacer proprement
   l'ancien slideDown()/slideUp() jQuery (incompatible avec un simple
   toggle de classe) sans dupliquer la mécanique par page.
   ========================================================= */
#header-user-panel {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

#header-user-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* =========================================================
   BOUTON HAMBURGER
   Défini ici (chargé sur toutes les pages) plutôt que dans
   v2/common.css (homepage uniquement), pour que le bouton
   fonctionne aussi sur les pages intérieures.
   ========================================================= */
.header__menu-btn {
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}

.header__menu-btn:focus {
  outline: none;
}

.header__menu-btn:focus-visible {
  border-radius: 0;
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Pages intérieures (header.main-header) : la nav desktop existante
   (liste de liens) reste inchangée, le burger n'apparaît qu'en mobile,
   au même point de rupture que l'ancien menu (979px). */
.main-header .header__menu-btn {
  display: none;
}

@media only screen and (max-width: 979px) {
  .main-header .header__menu-btn {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    z-index: 2;
  }

  /* L'ancien <nav> (liste desktop) reste dans le DOM, masqué en mobile,
     mais restait positionné en absolute pleine largeur/hauteur par-dessus
     le header — il interceptait le clic sur le nouveau bouton. Son
     contenu (ul) étant déjà invisible ici, on désactive juste le pointeur. */
  .main-header .content nav {
    pointer-events: none;
  }
}

/* =========================================================
   NAV PANEL
   ========================================================= */
body.nav-open { overflow: hidden; }

.nav-panel {
  position: fixed;
  inset: 0;
  /* Au-dessus de header.main-header (z-index: 10000, pages intérieures) */
  z-index: 10500;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.nav-panel--open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s ease;
}

.nav-panel__head {
  padding: var(--margin-mobile);
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-panel__close {
  flex-shrink: 0;
  width: var(--tap-target);
  height: var(--tap-target);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  padding: 0;
  border-radius: 50%;
  transition: background 0.15s;
}

.nav-panel__close:focus {
  outline: none;
}

.nav-panel__close:hover {
  background: var(--color-primary-light);
}

.nav-panel__close:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.nav-panel__brands {
  display: flex;
  align-items: center;
  height: 30px;
}

.nav-panel__brands img {
  max-height: 100%;
}

.nav-panel__user-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: 0 var(--margin-mobile);
}

.nav-panel__user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border: 1px solid var(--color-primary-light);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--fs-btn);
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
  transition: background 0.15s;
}

.nav-panel__user-card:hover { background: var(--color-primary-light); }

.nav-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-panel__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: var(--margin-mobile);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--fs-list-item);
  font-weight: 500;
}

.nav-panel__icon-badge {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.nav-panel__item-arrow { margin-left: auto; color: var(--color-primary); }

.nav-panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nav-panel__body > a.btn {
  width: calc(100% - 2 * var(--margin-mobile));
  margin-inline: var(--margin-mobile);
}

.nav-panel__footer {
  padding: var(--space-4) var(--margin-mobile) var(--space-4);
}

.nav-panel__social {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

/* Overlay backdrop (desktop uniquement) */
.nav-panel__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10499;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

@media (min-width: 1024px) {
  .nav-panel__overlay { display: block; }
  .nav-panel__overlay--visible { opacity: 1; pointer-events: auto; }
  .nav-panel { right: auto; width: 375px; }
}






















/* =========================================================
   TOP BANNER
   ========================================================= */
.top-banner {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-footer-link);
  text-align: center;
  padding: 8px var(--margin-mobile);
  line-height:18px;
  position: relative;
  white-space: nowrap;
  z-index: 2;
}

/* Clips the scrolling track exactly at the toggle button's left edge, so
   text never scrolls under/past it (the button sits outside this viewport,
   in the reserved width — clipping on .top-banner itself only clips at its
   border edge, letting text peek out to the right of the button first). */
.top-banner__viewport {
  overflow: hidden;
  width: calc(100% - var(--margin-mobile) - 16px - 8px);
  white-space: nowrap;
}

.top-banner__inner {
  display: inline-flex;
  gap: 180px;
  animation: marquee 180s linear infinite;
  white-space: nowrap;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.top-banner__link, .top-banner__link:hover {
  color: inherit;
  text-decoration: none;
}

.top-banner:hover .top-banner__inner,
.top-banner:focus-within .top-banner__inner,
.top-banner--paused .top-banner__inner {
  animation-play-state: paused;
}

@media (min-width: 1024px) {
  .top-banner {
    font-size: var(--fs-article);
    padding: 10px 16px;
    line-height:20px;
  }
}

.top-banner__toggle {
  position: absolute;
  top: 50%;
  right: var(--margin-mobile);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  cursor: pointer;
  z-index: 3;
}

.top-banner__toggle:hover,
.top-banner__toggle:focus-visible {
  box-shadow: inset 0 0 0 24px rgba(255, 255, 255, 0.15);
}

.top-banner__toggle .icon-play { display: none; }
.top-banner--paused .top-banner__toggle .icon-pause { display: none; }
.top-banner--paused .top-banner__toggle .icon-play  { display: block; }

@media (prefers-reduced-motion: reduce) {
  .top-banner__inner { animation: none; }
  .top-banner__toggle { display: none; }
}



/* CTA button (utilisé par le CTA "Trouver un centre partenaire" du panneau).
   Défini ici (chargé sur toutes les pages) plutôt que dans v2/common.css
   (homepage uniquement), pour que le panneau de nav s'affiche correctement
   aussi sur les pages intérieures. Scopé à .nav-panel : sur les pages
   intérieures, un ".btn" nu entrerait en conflit avec le ".btn" de
   Bootstrap (chargé par BaseController, utilisé par plusieurs templates
   legacy — breadcrumb, fiche centre, tunnel...). */
.nav-panel .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-btn);
  font-weight: 700;
  font-family: inherit;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.nav-panel .btn--arrow::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: url('../assets/icons/ui/arrow-right.svg');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.nav-panel .btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.nav-panel .btn--primary:hover, .nav-panel .btn--primary--solid {
  background-color: var(--color-primary-dark);
}

.nav-panel .btn--primary:focus-visible, .nav-panel .btn--primary--outline {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
}

.nav-panel .btn--block {
  width: 100%;
}

/* Icon round button (carousel, social) */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  box-sizing: border-box;
}

.btn-icon-dark {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-icon:hover, .btn-icon--solid {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-icon:hover img,
.btn-icon--solid img {
  filter: brightness(0) invert(1);
}

.btn-icon-dark:hover, .btn-icon-dark--solid {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.btn-icon:focus-visible, .btn-icon--outline {
  outline:none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
}

.btn-icon-dark:focus-visible, .btn-icon-dark--outline {
  outline:none;
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
}

.btn-icon[disabled],
.btn-icon--disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}



/* =========================================================
   SUIVEZ-NOUS
   ========================================================= */
.social-bar {
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
  padding-inline: var(--margin-mobile);
}

@media (min-width: 1024px) {
  .social-bar {
    padding-inline: var(--margin-desktop);
  }
}

.social-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-bottom: var(--space-4);
}

.social-bar__inner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-primary);
}

.social-bar__label {
  font-size: var(--fs-list-item);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .social-bar__label {
    font-size: var(--fs-body-bold-desktop);
    text-decoration: underline;
  }
}

.social-bar__icons {
  display: flex;
  gap: var(--space-3);
}

.social-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary);
  flex-shrink: 0;
}

.social-bar__link img {
  max-width: 17px;
  max-height: 17px;
  display: block;
}








#popin-nouveaucl-suisjeconcerne.alert-popup-bootstrap,
#popin-nouveaucl-suisjeconcerne.overrideBootstrapModal .modal-dialog { padding:0;max-width:640px;box-sizing:border-box;max-height: 90vh;margin: 5vh auto; }

#popin-nouveaucl-suisjeconcerne.alert-popup-bootstrap .modal-dialog { max-height:100%;overflow:auto; }

#popin-nouveaucl-suisjeconcerne .modal-content { padding:40px;text-align:left;max-height:80vh; }
#popin-nouveaucl-suisjeconcerne.overrideBootstrapModal .modal-content { overflow:auto; }

#popin-nouveaucl-suisjeconcerne .modal-header,
#popin-nouveaucl-suisjeconcerne .modal-body { padding:0; }

#popin-nouveaucl-suisjeconcerne .modal-body { display:flex;gap:40px;flex-direction: column; }

#popin-nouveaucl-suisjeconcerne .modal-body .intro .title,
#popin-nouveaucl-suisjeconcerne .mep_progressive .title,
#popin-nouveaucl-suisjeconcerne .freq_controles .title { font-size:18px;font-weight:500;line-height:24px; }

#popin-nouveaucl-suisjeconcerne .modal-body .intro { display:flex;flex-direction:column;gap:16px;padding: 0 38px;margin:auto; }
#popin-nouveaucl-suisjeconcerne .modal-body .intro .title { color:#000;text-align:center; }
#popin-nouveaucl-suisjeconcerne .modal-body .intro .image { background-image:url('/Dekra/img/icons/nouveau_cl_hp.png');background-size: contain;margin:auto;width:187px;height:104px; }

#popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive .title,
#popin-nouveaucl-suisjeconcerne .modal-body .freq_controles .title { color: #008132; }

#popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive,
#popin-nouveaucl-suisjeconcerne .modal-body .freq_controles { display:flex;flex-direction:column;gap:16px; }

#popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive .table { display:flex;padding:8px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:4px;border: 1px solid #D3D3D3; }
#popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive .table .head { font-weight:700; }
#popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive .table .row { flex-wrap:nowrap;margin:0;display:flex;padding:10px;align-items:center;gap:26px;width:100%;box-sizing:border-box;color: #2B2B2B;font-size:14px;line-height:20px; }
#popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive .table .row.green { background: #F3F9F4; }
#popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive .table .row > div { width:50%; }
#popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive .mentions { margin:0;padding:0;color:#6F6E6B;font-size:12px;font-weight:400;line-height:18px; }
#popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive .mentions li { list-style:none; }

#popin-nouveaucl-suisjeconcerne .modal-body .freq_controles ul { margin:0;padding:0;padding-left:30px; }
#popin-nouveaucl-suisjeconcerne .modal-body .freq_controles li { font-size:16px;font-weight:400;line-height:24px;margin-bottom:10px; }

#popin-nouveaucl-suisjeconcerne .modal-body .button-container { display:flex;justify-content:center; }
#popin-nouveaucl-suisjeconcerne .modal-body .button-container .dekrav2-btn { width:auto; }

@media only screen and (max-width:700px) {
  #popin-nouveaucl-suisjeconcerne { padding:32px 16px;box-sizing:border-box; }
  #popin-nouveaucl-suisjeconcerne .modal-body { gap:32px; }
  #popin-nouveaucl-suisjeconcerne .modal-content { padding:32px 16px; }
  #popin-nouveaucl-suisjeconcerne .modal-body .intro { padding:0; }
  #popin-nouveaucl-suisjeconcerne .modal-body .intro .title,
  #popin-nouveaucl-suisjeconcerne .mep_progressive .title,
  #popin-nouveaucl-suisjeconcerne .freq_controles .title { font-size:16px;line-height:20px; }
  #popin-nouveaucl-suisjeconcerne .modal-body .intro .image { width:144px;height:80px; }

  #popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive .table .row.head { line-height:18px; }
  #popin-nouveaucl-suisjeconcerne .modal-body .mep_progressive .table .row { padding:8px;font-size:13px;line-height:20px; }
  #popin-nouveaucl-suisjeconcerne .modal-body .freq_controles li { font-size:14px; }
}