/* ==========================================================================
   Barre du haut, badge ouvert/ferme et fenetre d'appel (2026-09-14)
   --------------------------------------------------------------------------
   Markup : src/lib/appel.ts (injecte au build). Comportement : src/scripts/appel.ts.
   Charge APRES atd30.webflow.css, depuis chaque page : a specificite egale, ces regles gagnent.

   Direction validee par l'operateur :
   - a partir de 1280 px : logo / menu / bouton urgence + badge accole au rond telephone. Une ligne
     d'horaires au-dessus de la pilule a ete essayee puis retiree le 2026-09-14 : l'horaire du
     jour vit dans la fenetre ;
   - sous 1280 px, la navigation mobile (seuil remonte de 991 a 1279 px dans
     atd30.webflow.css et atd30-nav-mobile.js) et un point vert ou gris sur le rond ;
   - le rond ouvre un panneau (ordinateur) ou une feuille (mobile) ; quand c'est ferme, la
     demande par formulaire passe devant l'appel.
   ========================================================================== */

.atd-etat[hidden],
.atd-point[hidden],
.atd-appel[hidden],
.atd-appel-voile[hidden],
.atd-appel [hidden] {
  display: none !important;
}

/* ---------- couleurs d'etat, communes ---------- */
.atd-point {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #8a93a8;
}
.est-ouvert .atd-point,
.atd-point.est-ouvert {
  background-color: #1b9a57;
  box-shadow: 0 0 0 3px #1b9a572e;
}

/* ---------- ordinateur ---------- */
.atd-etat {
  display: none;
}

@media screen and (min-width: 1280px) {
  /* Trois colonnes, le menu centre dans celle du milieu : autant d'air entre le logo et le menu
     qu'entre le menu et le bouton. Un centrage exact sur la pilule a ete essaye et mesure le
     2026-09-14 : avec le rond telephone garde a cote du bouton, le bloc de droite (349 px)
     depasse la colonne egale, et le menu venait se coller au bouton (24 px d'un cote, 128 de
     l'autre a 1920 px). L'equilibre qui se voit est celui des espaces. */
  .navbar-wrapper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    padding: 10px 10px 10px 30px;
  }
  .navbar-logo-a {
    justify-self: start;
  }
  .navbar-navbar {
    justify-self: center;
  }
  .navbar-cta {
    justify-self: end;
    align-items: center;
    position: relative;
  }
  .navbar-logo-img {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
  }

  /* L'icone maison part : le logo ramene deja a l'accueil, et c'etait une troisieme tache
     de couleur vive dans la barre. */
  .navbar-nav > a.navbar-nav-a.w-inline-block:first-child {
    display: none;
  }
  /* Menu en capsule (piste A, choisie par l'operateur le 2026-09-14 parmi trois rendus sur le
     site). Les liens posaient du texte nu entre le logo et le bouton ; la capsule en fait un objet.
     Page en cours et survol : pilule blanche. Les tailles descendent par tranche de largeur plus
     bas, sinon la capsule touchait le logo et le bouton (7 px a 1440, 5 px a 1280, mesures). */
  .navbar-nav {
    column-gap: 2px;
    padding: 5px;
    border-radius: 999px;
    background-color: var(--_variables---gris);
  }
  .navbar-nav > a.navbar-nav-a.w-nav-link,
  .navbar-nav-a-dropdown-toggle {
    padding: 10px 13px;
    border-radius: 999px;
    transition: background-color .2s ease, box-shadow .2s ease;
  }
  .navbar-nav > a.navbar-nav-a.w-nav-link:hover,
  .navbar-nav-a-dropdown-toggle:hover,
  .navbar-nav-a-dropdown.w--open .navbar-nav-a-dropdown-toggle {
    background-color: var(--_variables---white);
  }
  /* Page en cours, lien simple ou lanceur de menu deroulant. Le lanceur est marque des qu'un
     element du menu est la page en cours : sur /contact, Webflow ne marque que « Nous contacter »
     dans la liste. Le gabarit la marquait en orange gras ; dans la capsule, la pilule blanche
     suffit. */
  .navbar-nav > a.navbar-nav-a.w-nav-link.w--current,
  .navbar-nav-a-dropdown:has(.w--current) > .navbar-nav-a-dropdown-toggle {
    background-color: var(--_variables---white);
    box-shadow: 0 1px 4px #062f911f;
  }
  .navbar-nav > a.navbar-nav-a.w-nav-link.w--current,
  .navbar-nav-a-dropdown:has(.w--current) > .navbar-nav-a-dropdown-toggle .navbar-nav-a-dropdown-p {
    color: var(--_variables---dark-blue);
    font-weight: 400;
  }
  .navbar-nav > a.navbar-nav-a.w-nav-link:focus-visible,
  .navbar-nav-a-dropdown-toggle-a:focus-visible {
    outline: 2px solid var(--_variables---medium-blue);
    outline-offset: 2px;
  }
  /* Un cran plus appuye que le 400, sans aller au 600 (2026-09-14, choix de l'operateur sur
     rendus compares). Le site n'a Mosvita qu'en Regular, SemiBold et Bold : un 500 s'afficherait
     en 400, et le 600 a ete juge trop gras. Le contour de 0,2 px en couleur du texte epaissit le
     trait sans elargir le mot, l'espacement de la capsule reste donc celui du 400. */
  .navbar-nav-a,
  .navbar-nav-a-dropdown-p {
    font-size: 15px;
    font-weight: 400;
    -webkit-text-stroke: .2px currentColor;
    white-space: nowrap;
  }
  .navbar-cta .cta {
    white-space: nowrap;
  }

  /* Badge accole au rond : il glisse sous son bord gauche, les deux se lisent comme un seul
     objet « telephone ». */
  .atd-etat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Largeur reservee des le chargement, la meme pour « Ouvert » et « Fermé » : le badge
       apparaissait apres calcul de l'etat, elargissait le bloc de droite et faisait sauter la
       capsule a chaque changement de page (signale par l'operateur le 2026-09-14). */
    box-sizing: border-box;
    min-width: 98px;
    height: 30px;
    margin-left: 2px;
    margin-right: -22px;
    padding: 0 28px 0 11px;
    border-radius: 999px;
    font-family: var(--_variables---mosvita);
    /* Taille et graisse du texte du site (Mosvita 400) : un 12 px semi-gras detonnait. */
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    color: #4a5468;
    background-color: #eef0f5;
  }
  .atd-etat.est-ouvert {
    color: #0d6a39;
    background-color: #e3f4ea;
  }
  /* Tant que l'etat n'est pas calcule : invisible, mais present dans la mise en page. */
  .atd-etat:not(.est-ouvert):not(.est-ferme) {
    visibility: hidden;
  }
  .navbar-i-phone-div {
    position: relative;
    z-index: 1;
  }
}

/* 1280 a 1439 px : mesure a 1280, 10 px seulement de chaque cote du menu. Menu et bouton se
   resserrent un peu pour rendre environ 24 px d'air. */
@media screen and (min-width: 1440px) and (max-width: 1599px) {
  .navbar-nav > a.navbar-nav-a.w-nav-link,
  .navbar-nav-a-dropdown-toggle {
    padding: 10px 11px;
  }
  .navbar-nav-a,
  .navbar-nav-a-dropdown-p {
    font-size: 14px;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .navbar-wrapper {
    column-gap: 18px;
  }
  .navbar-nav {
    column-gap: 0;
    padding: 4px;
  }
  .navbar-nav > a.navbar-nav-a.w-nav-link,
  .navbar-nav-a-dropdown-toggle {
    padding: 8px 9px;
  }
  .navbar-nav-a,
  .navbar-nav-a-dropdown-p {
    font-size: 13px;
  }
  .navbar-cta .cta {
    padding: 14px 18px;
    font-size: 16px;
  }
}

/* Seuil pose d'abord a 1200 px (choix de l'operateur), remonte a 1280 le 2026-09-14 : a 1200 px
   le menu (665 px, libelles du contenu) n'avait que 575 px entre le logo et le bloc telephone et
   chevauchait les deux. Entre 992 et 1279 px, la navigation mobile a pris le relais : le menu d'ordinateur du
   gabarit, que Webflow n'escamote qu'a partir de 991 px, doit partir aussi. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .navbar-navbar {
    display: none;
  }
}

/* ---------- point sur le rond, mobile ---------- */
.atd-rond-point {
  display: none;
}
@media screen and (max-width: 1279px) {
  .navbar-i-phone-div {
    position: relative;
  }
  .atd-rond-point {
    display: block;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--_variables---white);
    box-shadow: none;
  }
  .atd-rond-point.est-ouvert {
    box-shadow: none;
  }
}

/* ---------- fenetre d'appel ---------- */
.atd-appel {
  box-sizing: border-box;
  background-color: var(--_variables---white);
  color: var(--_variables---dark-blue);
  font-family: var(--_variables---mosvita);
  text-align: left;
}
.atd-appel-poignee {
  display: none;
}
.atd-appel-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.atd-appel-titre {
  margin: 0;
  font-family: var(--_variables---cal-sans);
  font-size: 20px;
  line-height: 1.1;
}
.atd-appel-fermer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--_variables---gris);
  color: var(--_variables---dark-blue);
  cursor: pointer;
}
/* Point accroche a la PREMIERE ligne : centre, il flottait entre deux lignes quand le texte
   revenait a la ligne (« Réouvre mercredi à 8h30 »). */
.atd-appel-etat .atd-point {
  margin-top: 6px;
}
.atd-appel-etat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.35;
}
/* Horaire du jour, aligne sur le texte de la ligne d'etat (point 8 px + ecart 8 px). */
.atd-appel-jour {
  margin: 4px 0 0 16px;
  font-size: 15px;
  line-height: 1.35;
  color: #4a5468;
}
.atd-appel-aide {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: #4a5468;
}
.atd-appel-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.atd-appel-tel,
.atd-appel-demande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Ouvert : l'appel devant, la demande en lien discret. */
.atd-appel-tel {
  min-height: 54px;
  background-color: var(--_variables---blue);
  color: var(--_variables---white);
  font-family: var(--_variables---cal-sans);
  font-size: 21px;
}
.atd-appel-tel:hover {
  background-color: var(--_variables---medium-blue);
}
.atd-appel-demande {
  min-height: 46px;
  color: var(--_variables---medium-blue);
  font-size: 15px;
  box-shadow: inset 0 0 0 1.5px #d6def2;
}
.atd-appel-demande:hover {
  box-shadow: inset 0 0 0 1.5px var(--_variables---medium-blue);
}
/* Ferme : la demande passe devant, le numero reste accessible dessous. */
.atd-appel.est-ferme .atd-appel-actions {
  flex-direction: column-reverse;
}
.atd-appel.est-ferme .atd-appel-demande {
  min-height: 54px;
  background-color: var(--_variables---blue);
  color: var(--_variables---white);
  font-family: var(--_variables---cal-sans);
  font-size: 19px;
  box-shadow: none;
}
.atd-appel.est-ferme .atd-appel-demande:hover {
  background-color: var(--_variables---medium-blue);
}
.atd-appel.est-ferme .atd-appel-tel {
  min-height: 46px;
  background-color: transparent;
  color: var(--_variables---medium-blue);
  font-size: 18px;
  box-shadow: inset 0 0 0 1.5px #d6def2;
}
.atd-appel.est-ferme .atd-appel-tel:hover {
  box-shadow: inset 0 0 0 1.5px var(--_variables---medium-blue);
}
.atd-appel a:focus-visible,
.atd-appel button:focus-visible,
.navbar-i-phone-div:focus-visible {
  outline: 2px solid var(--_variables---medium-blue);
  outline-offset: 3px;
}

/* Libelles visibles seulement dans l'editeur du portail. */
.atd-appel-textes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #d6def2;
  font-size: 12px;
  color: #4a5468;
}

/* Panneau sous le rond, ordinateur. */
@media screen and (min-width: 1280px) {
  /* top et right poses par le script, sous le rond. Au-dessus de la barre (9999). */
  .atd-appel {
    position: fixed;
    z-index: 10001;
    /* 360 et non 330 : « Fermé actuellement · Réouvre demain à 8h30 » tient sur une ligne. */
    width: 360px;
    padding: 18px;
    border: 1px solid var(--_variables---gris);
    border-radius: 22px;
    box-shadow: 0 20px 50px #062f9129;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .18s cubic-bezier(.22, 1, .36, 1), transform .24s cubic-bezier(.22, 1, .36, 1);
  }
  .atd-appel.est-visible {
    opacity: 1;
    transform: none;
  }
  .atd-appel-voile {
    display: none !important;
  }
}

/* Feuille montante, mobile : meme geste et meme voile que le menu. */
@media screen and (max-width: 1279px) {
  /* Au-dessus de la barre (9999) et de la barre d'onglets (9998). */
  .atd-appel-voile {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: #062f918c;
    opacity: 0;
    transition: opacity .24s ease;
  }
  .atd-appel-voile.est-visible {
    opacity: 1;
  }
  .atd-appel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    max-height: 88vh;
    overflow-y: auto;
    padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -12px 40px #062f912e;
    transform: translateY(104%);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  }
  .atd-appel.est-visible {
    transform: none;
  }
  .atd-appel-poignee {
    display: block;
    width: 40px;
    height: 5px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background-color: #d6def2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atd-appel,
  .atd-appel-voile,
  .atd-appel-tel,
  .atd-appel-demande {
    transition: none;
  }
}