/**
 * @file
 * Style de base du bandeau et de la modale de repérage.
 *
 * Cette feuille est embarquée dans le module pour qu'il soit installable et
 * utilisable tel quel sur n'importe quel site Vicat, y compris ceux qui n'ont
 * pas de pipeline SCSS ni de thème custom (c'est le cas du site Solutions, qui
 * tourne sur le thème contrib dxpr_theme - cf.
 * docs/vicatswap-23/portage-solutions.md).
 *
 * ELLE CONTIENT LA TOTALITE DU STYLE, y compris ce qui est propre au thème
 * Corpo (typographies de la charte et intégration au header fixe, tout en bas
 * de ce fichier). C'est un choix assumé : le bandeau et la modale ne vivront
 * que le temps de la bascule (~6 mois maximum), après quoi le module sera
 * purement et simplement supprimé. Tout regrouper ici garantit qu'il ne restera
 * aucun résidu dans le thème - un nettoyage qui, en pratique, ne serait pas
 * fait. Aucun partiel SCSS n'accompagne donc ce fichier.
 *
 * Les valeurs de charte sont exposées en variables CSS --vsd-* : un autre site
 * (Solutions) n'a qu'à les redéfinir, sans réécrire une seule règle.
 *
 * Elle est déclarée dans le groupe "component" de vicat_switch_dns.libraries.yml,
 * donc chargée AVANT le CSS de thème (groupe "theme") : si un thème définissait
 * un jour ses propres règles sur ces classes, elles gagneraient sans !important.
 */

:root {
  --vsd-accent: #00a6aa;
  --vsd-accent-hover: #008c90;
  --vsd-on-accent: #fff;
  --vsd-dark: #036;
  --vsd-surface: #fff;
  --vsd-text: #555;
  --vsd-overlay: rgba(0, 20, 40, 0.55);
  --vsd-radius: 3px;

  /* Typographies de la charte Corpo. Les polices sont déclarées par le thème
     vicat ; sur un site qui ne les a pas, le navigateur retombe simplement sur
     la police générique indiquée en second. */
  --vsd-font-body: "JostRegular", sans-serif;
  --vsd-font-strong: "JostBold", sans-serif;
  --vsd-font-ui: "JostMedium", sans-serif;
  --vsd-font-title: "Spectral", serif;
}

/* -------------------------------------------------------------------------
 * Bandeau
 * ---------------------------------------------------------------------- */

.vicat-switch-dns-banner {
  position: relative;
  font-family: var(--vsd-font-body);
  z-index: 1;
  width: 100%;
  background-color: var(--vsd-accent);
  color: var(--vsd-on-accent);
}

.vicat-switch-dns-banner strong {
  font-family: var(--vsd-font-strong);
  font-weight: bold;
}

.vicat-switch-dns-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1400px;
  margin-inline: auto;
  padding: 12px 60px;
}

.vicat-switch-dns-banner__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
}

.vicat-switch-dns-banner__text p {
  color: inherit;
}

.vicat-switch-dns-banner__text>p:last-of-type {
  margin-bottom: 0;
}

.vicat-switch-dns-banner__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}

.vicat-switch-dns-banner__link-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-family: var(--vsd-font-ui);
  font-weight: normal;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--vsd-on-accent);
  font-size: 13px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.vicat-switch-dns-banner__link-pill:hover,
.vicat-switch-dns-banner__link-pill:focus {
  background-color: rgba(255, 255, 255, 0.3);
  color: var(--vsd-on-accent);
  text-decoration: none;
}

.vicat-switch-dns-banner__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--vsd-on-accent);
  opacity: 0.7;
  cursor: pointer;
}

.vicat-switch-dns-banner__close svg {
  width: 18px;
  height: 18px;
}

.vicat-switch-dns-banner__close:hover,
.vicat-switch-dns-banner__close:focus {
  opacity: 1;
}

/* -------------------------------------------------------------------------
 * Modale
 * ---------------------------------------------------------------------- */

.vicat-switch-dns-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--vsd-overlay);
  animation: vicatSwitchDnsModalFadeIn 0.25s ease;
}

.vicat-switch-dns-modal__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 580px;
  padding: 48px 44px 40px;
  border-top: 6px solid var(--vsd-dark);
  border-radius: 12px;
  background-color: var(--vsd-surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  animation: vicatSwitchDnsModalIn 0.3s ease;
}

/* Cible du focus posé à l'ouverture par vicat_switch_dns.js : la boîte reçoit
   un tabindex="-1" pour que Échap et le piège à focus fonctionnent, sans
   afficher d'anneau de focus au chargement. */
.vicat-switch-dns-modal__box:focus {
  outline: none;
}

.vicat-switch-dns-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--vsd-dark);
  opacity: 0.7;
  cursor: pointer;
}

.vicat-switch-dns-modal__close svg {
  width: 18px;
  height: 18px;
}

.vicat-switch-dns-modal__close:hover,
.vicat-switch-dns-modal__close:focus {
  opacity: 1;
}

.vicat-switch-dns-modal__title {
  margin: 0;
  padding-bottom: 0;
  font-family: var(--vsd-font-title);
  color: var(--vsd-dark);
  font-size: 30px;
  line-height: 1.2;
  font-weight: bold;
}

.vicat-switch-dns-modal__text {
  color: var(--vsd-text);
  font-size: 16px;
  line-height: 1.7;
}

.vicat-switch-dns-modal__text p {
  color: inherit;
}

.vicat-switch-dns-modal__text p:last-of-type {
  margin-bottom: 0;
}

.vicat-switch-dns-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.vicat-switch-dns-modal__action {
  display: inline-flex;
  align-items: center;
  border: none;
  font-family: var(--vsd-font-ui);
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
}

.vicat-switch-dns-modal__action--solid {
  padding: 12px 22px;
  border-radius: var(--vsd-radius);
  background-color: var(--vsd-accent);
  color: var(--vsd-on-accent);
  text-decoration: none;
  font-weight: normal;
}

.vicat-switch-dns-modal__action--solid:hover,
.vicat-switch-dns-modal__action--solid:focus {
  background-color: var(--vsd-accent-hover);
  color: var(--vsd-on-accent);
  text-decoration: none;
}

.vicat-switch-dns-modal__action--link {
  display: inline-flex;
  padding: 12px 18px;
  background: none;
  color: var(--vsd-dark);
  white-space: nowrap;
  text-decoration: none;
  font-weight: normal;
}

.body--dxpr-theme-nav-mobile .vicat-switch-dns-modal__action,
.body--dxpr-theme-nav-desktop .vicat-switch-dns-modal__action {
  font-family: inherit;
  font-weight: 600;
}

.body--dxpr-theme-nav-mobile .vicat-switch-dns-modal__action--link,
.body--dxpr-theme-nav-desktop .vicat-switch-dns-modal__action--link {}

.vicat-switch-dns-modal__action--link:hover,
.vicat-switch-dns-modal__action--link:focus {
  color: var(--vsd-accent-hover);
  text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Anti-flash
 *
 * Classes posées sur <html> par le script synchrone du <head>
 * (js/vicat_switch_dns.early_cookie_check.js) quand le cookie de fermeture est
 * déjà présent, ou à l'arrivée depuis un lien de redirection (?from=...).
 * L'élément ne doit alors jamais s'afficher, même une fraction de seconde.
 * ---------------------------------------------------------------------- */

html.js-vicat-switch-dns-banner-seen .vicat-switch-dns-banner,
html.js-vicat-switch-dns-modal-seen .vicat-switch-dns-modal {
  display: none;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
  .vicat-switch-dns-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-inline: 24px;
  }

  .vicat-switch-dns-modal__box {
    padding: 40px 24px 32px;
  }

  .vicat-switch-dns-modal__title {
    font-size: 24px;
  }
}

/* -------------------------------------------------------------------------
 * Intégration au header du thème Corpo
 *
 * Le header du thème vicat est en "position: fixed" (layout/_header.scss) et le
 * contenu compense par un margin-top (base/_base.scss : main#main a 104px, 69px
 * sous 768px). Sans rien faire, le header recouvrirait le bandeau.
 *
 * Quand le bandeau est affiché, on passe donc le header en "sticky" : il se
 * cale naturellement sous le bandeau quelle que soit sa hauteur réelle (le
 * texte est configurable et peut passer sur deux lignes en mobile), sans aucun
 * JS de mesure. La classe has--vicat-switch-dns-banner est posée sur <body> par
 * hook_preprocess_html().
 *
 * Ces sélecteurs (.header, main#main) et ces valeurs appartiennent au thème
 * Corpo. Sur le site Solutions ils ne correspondent à rien - dxpr_theme n'a ni
 * main#main ni classe "header" (il utilise navbar-header,
 * secondary-header-container...) - ces règles y sont donc simplement inertes.
 * Aucune détection de site n'est nécessaire.
 * ---------------------------------------------------------------------- */

body.has--vicat-switch-dns-banner .header {
  position: sticky;
}

body.has--vicat-switch-dns-banner main#main {
  margin-top: 0;
}

/* Anti-flash, suite : quand le cookie de fermeture est déjà là, le bandeau
   n'est jamais affiché, donc le header et le contenu doivent immédiatement
   retrouver le comportement d'origine du thème. */
html.js-vicat-switch-dns-banner-seen body.has--vicat-switch-dns-banner .header {
  position: fixed;
}

html.js-vicat-switch-dns-banner-seen body.has--vicat-switch-dns-banner main#main {
  margin-top: 104px;
}

@media (max-width: 767px) {
  body.has--vicat-switch-dns-banner main#main {
    margin-top: 0;
  }

  html.js-vicat-switch-dns-banner-seen body.has--vicat-switch-dns-banner main#main {
    margin-top: 69px;
  }
}

@keyframes vicatSwitchDnsModalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes vicatSwitchDnsModalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}