/**
 * @file
 * Styles pour le Widget Compte à rebours.
 *
 * Spécifications EXACTES selon le document :
 * Desktop (1920px) : Conteneur 360px × 95px, Avatar 130px, Border-radius 70px
 * Tablette (768-1024px) : Conteneur 320px × 80px, Avatar 100px, Border-radius 40px
 * Mobile (<768px) : Hauteur 65px, Scale 0.8, Centré
 */

/* ==========================================================================
   Variables CSS
   ========================================================================== */

:root {
  --countdown-bg-color: #004899;
  --countdown-text-color: #ffffff;
  --countdown-border-color: #f9c706;
  --countdown-hover-bg: #f9c706;
  --countdown-hover-text: #004899;
  --countdown-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  --countdown-transition: 0.3s ease;
  --countdown-flash-info-offset: 0px;
  /* Toujours sous les couches de navigation / dropdown */
  --countdown-z-index: 40;
}

/* ==========================================================================
   Widget Container - Base
   ========================================================================== */

.countdown-widget {
  /* Positionnement fixe viewport (desktop/tablette) — sticky au scroll géré en JS */
  position: absolute;
  z-index: var(--countdown-z-index, 40);

  /* Reset link styles */
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;

  /* Style de base */
  color: var(--countdown-text-color);
  outline: none;
  background-color: transparent;

  /* Transition */
  transition: background-color var(--countdown-transition);
}

/* ==========================================================================
   Wrappers de page Desktop/Mobile
   ========================================================================== */

/* Wrapper de page pour desktop - visible uniquement sur desktop */
.countdown-widget-wrapper--desktop {
  display: block;
}

/* Wrapper de page pour tablette - masqué par défaut */
.countdown-widget-wrapper--tablet {
  display: none;
}

/* Wrapper de page pour mobile - masqué par défaut */
.countdown-widget-wrapper--mobile {
  display: none;
}

/* ==========================================================================
   Wrappers internes Desktop/Tablet/Mobile du widget
   ========================================================================== */

/* Wrapper Desktop - visible sur desktop uniquement */
.countdown-widget__desktop-wrapper {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}

/* Wrapper Tablet - masqué par défaut */
.countdown-widget__tablet-wrapper {
  display: none;
}

/* Wrapper Mobile - masqué par défaut */
.countdown-widget__mobile-wrapper {
  display: none;
}

/* ==========================================================================
   VERSION DESKTOP (1920px) - Spécifications exactes
   ========================================================================== */

/* Conteneur principal Desktop */
.countdown-widget__content--desktop {
  /* TEC-001: Dimensions - Plus large pour contenir titre + compteur */
  width: 360px;
  min-width: 320px;
  height: 95px;

  /* TEC-002: Style - Fond Bleu #004899, Texte Blanc #FFFFFF */
  background-color: var(--countdown-bg-color);
  color: var(--countdown-text-color);

  /* TEC-003: Bords - border-radius 75px pour effet capsule, box-shadow */
  border: 3px solid var(--countdown-border-color);
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  box-shadow: var(--countdown-shadow);

  /* TEC-004: Padding - Espace pour le titre ET le compteur */
  padding: 45px 60px 45px 45px;

  /* Flexbox vertical - titre au-dessus, compteur en dessous */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  /* Position et box-sizing */
  position: relative;
  box-sizing: border-box;

  /* Transition */
  transition: background-color var(--countdown-transition);
}

/* Sans avatar - ajuster padding */
.countdown-widget__desktop-wrapper:not(:has(.countdown-widget__avatar--desktop))
  .countdown-widget__content--desktop {
  padding-left: 45px;
  padding-right: 45px;
}

/* ==========================================================================
   Position du widget - Desktop
   ========================================================================== */

/* Position gauche (ADM-006) - 59px du bord, 220px du haut (position initiale) */
/* Décalage dynamique si flash-info actif (--countdown-flash-info-offset géré en JS) */
.countdown-widget--left {
  left: 59px;
  top: calc(220px + var(--countdown-flash-info-offset, 0px));
}

.countdown-widget--left .countdown-widget__desktop-wrapper {
  flex-direction: row;
}

.countdown-widget--left .countdown-widget__content--desktop {
  /* Avatar déborde à gauche, donc padding-left réduit, padding-right plus grand */
  padding: 45px 60px 45px 45px;
  /* Bordures arrondies à droite (côté opposé à l'avatar) */
  border-top-right-radius: 70px;
  border-bottom-right-radius: 70px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.countdown-widget--left .countdown-widget__avatar--desktop {
  /* Avatar déborde sur le conteneur bleu */
  margin-right: -40px;
  margin-left: 0;
}

/* Position droite (ADM-006) - 59px du bord, 220px du haut (position initiale) */
.countdown-widget--right {
  right: 59px;
  top: calc(220px + var(--countdown-flash-info-offset, 0px));
}

/* ==========================================================================
   Desktop/Tablette : position fixed + état sticky (marge 20px en haut)
   Spécifications : sticky quand le bord supérieur du widget atteint le viewport.
   Ne s'applique pas au mobile.
   ========================================================================== */

@media (min-width: 768px) {
  .countdown-widget {
    position: fixed;
    transition: top 0.4s ease;
  }

  /* Mode sticky : 80px du haut quand on scroll (flash-info hors écran) */
  .countdown-widget--sticky.countdown-widget--left,
  .countdown-widget--sticky.countdown-widget--right {
    top: 80px;
  }
}

.countdown-widget--right .countdown-widget__desktop-wrapper {
  flex-direction: row-reverse;
}

.countdown-widget--right .countdown-widget__content--desktop {
  /* Avatar déborde à droite, donc padding-right réduit, padding-left plus grand */
  padding: 45px 45px 45px 45px;
  /* Bordures arrondies à gauche (côté opposé à l'avatar) */
  border-top-left-radius: 70px;
  border-bottom-left-radius: 70px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.countdown-widget--right .countdown-widget__avatar--desktop {
  /* Avatar déborde sur le conteneur bleu */
  margin-left: -30px;
  margin-right: 0;
}

/* ==========================================================================
   Avatar - Desktop (TEC-005, TEC-006)
   ========================================================================== */

.countdown-widget__avatar--desktop {
  /* TEC-005: Visuel - Cercle parfait 170px × 170px (plus gros), border-radius 50% */
  width: 130px;
  height: 130px;
  flex-shrink: 0;

  /* TEC-006: Position - Alignement vertical centré, débordement à gauche */
  position: relative;
  margin-right: -40px;

  /* Cercle parfait */
  border-radius: 50%;
  overflow: hidden;

  /* Ombre */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* Z-index */
  z-index: 10;
}

.countdown-widget__avatar--mobile {
  display: none;
}

.countdown-widget__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   Typographie - Desktop (TEC-007)
   ========================================================================== */

/* Titre Desktop */
.countdown-widget__title {
  /* Conteneur - IMPORTANT: doit être visible */
  width: 100%;
  overflow: visible;
  position: relative;
  visibility: visible !important;
  opacity: 1 !important;

  /* TEC-007: Titre - Galano Grotesque, 20px (plus gros), Bold, Majuscules */
  font-family:
    "Galano Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;

  /* Couleur */
  color: var(--countdown-text-color);

  /* Espacement */
  margin-bottom: 0;
  padding: 0;
}

.countdown-widget__title-text {
  display: inline-block;
  white-space: nowrap;
}

/* Compteur Desktop */
.countdown-widget__counter {
  /* TEC-007: Compteur - Flexbox horizontal, Gap 25px (plus d'espace) */
  display: flex;
  gap: 15px;
  align-items: flex-start;
  width: 100%;
  justify-content: center;
}

/* Bloc de temps */
.countdown-widget__time-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 40px;
}

/* Chiffres Desktop */
.countdown-widget__digits {
  /* TEC-007: Chiffres - 48px (beaucoup plus gros), Bold */
  font-family:
    "Galano Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 25px;
  font-weight: bold; /* Bold */
  line-height: 1;

  /* Couleur */
  color: var(--countdown-text-color);

  /* Largeur fixe par unité pour éviter les sauts visuels */
  min-width: 40px;
  text-align: center;
}

/* Libellés Desktop */
.countdown-widget__label {
  /* TEC-007: Libellés - 14px (un peu plus gros), Regular, Capitalize */
  font-family:
    "Galano Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: regular;
  text-transform: capitalize;
  line-height: 1;

  /* Couleur */
  color: var(--countdown-text-color);

  /* Espacement */
  margin-top: 6px;
}

/* ==========================================================================
   Hover Effect (FUN-006)
   ========================================================================== */

/* FUN-006: Transition 0.3s : Fond #F9C706, Texte #004899 */
.countdown-widget:hover .countdown-widget__content--desktop,
.countdown-widget:focus .countdown-widget__content--desktop {
  background-color: var(--countdown-hover-bg);
}

/* Le texte passe en bleu au hover */
.countdown-widget:hover .countdown-widget__title,
.countdown-widget:hover .countdown-widget__title-text,
.countdown-widget:hover .countdown-widget__digits,
.countdown-widget:hover .countdown-widget__label,
.countdown-widget:focus .countdown-widget__title,
.countdown-widget:focus .countdown-widget__title-text,
.countdown-widget:focus .countdown-widget__digits,
.countdown-widget:focus .countdown-widget__label {
  color: var(--countdown-hover-text);
}

/* ==========================================================================
   VERSION TABLETTE (768px - 1024px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Masquer le wrapper desktop sur tablette */
  .countdown-widget-wrapper--desktop {
    display: none !important;
  }

  /* Afficher le wrapper tablette */
  .countdown-widget-wrapper--tablet {
    display: block !important;
  }

  /* Masquer le wrapper interne desktop */
  .countdown-widget__desktop-wrapper {
    display: none !important;
  }

  .countdown-widget__avatar--desktop {
    display: none !important;
  }

  /* Afficher le wrapper interne tablette */
  .countdown-widget__tablet-wrapper {
    display: flex !important;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
  }

  /* Widget tablette - position fixed, z-index sous le menu déroulant */
  /* Widget tablette - position fixed, z-index sous le menu déroulant */
  .countdown-widget {
    position: fixed;
    z-index: var(--countdown-z-index, 40);
  }

  /* Conteneur principal Tablette */
  .countdown-widget__content--tablet {
    /* Dimensions tablette : 320px × 80px */
    width: 320px;
    min-width: 320px;
    height: 80px;

    /* Style - Fond Bleu #004899, Texte Blanc #FFFFFF */
    background-color: var(--countdown-bg-color);
    color: var(--countdown-text-color);

    /* Bords - border-radius 40px pour effet capsule, box-shadow */
    border: 3px solid var(--countdown-border-color);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    box-shadow: var(--countdown-shadow);

    /* Padding - Espace pour le titre ET le compteur */
    padding: 25px 35px 25px 25px;

    /* Flexbox vertical - titre au-dessus, compteur en dessous */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* Position et box-sizing */
    position: relative;
    box-sizing: border-box;

    /* Transition */
    transition: background-color var(--countdown-transition);
  }

  /* Sans avatar - ajuster padding */
  .countdown-widget__tablet-wrapper:not(:has(.countdown-widget__avatar--tablet))
    .countdown-widget__content--tablet {
    padding-left: 25px;
    padding-right: 25px;
  }

  /* Position gauche - 59px du bord (ADM-006), 220px du haut */
  .countdown-widget--left {
    left: 59px;
    top: calc(220px + var(--countdown-flash-info-offset, 0px));
  }

  .countdown-widget--left .countdown-widget__tablet-wrapper {
    flex-direction: row;
  }

  .countdown-widget--left .countdown-widget__content--tablet {
    padding: 25px 35px 25px 25px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .countdown-widget--left .countdown-widget__avatar--tablet {
    margin-right: -30px;
    margin-left: 0;
  }

  /* Position droite - 59px du bord (ADM-006), 220px du haut */
  .countdown-widget--right {
    right: 59px;
    top: calc(220px + var(--countdown-flash-info-offset, 0px));
  }

  .countdown-widget--right .countdown-widget__tablet-wrapper {
    flex-direction: row-reverse;
  }

  .countdown-widget--right .countdown-widget__content--tablet {
    padding: 25px 25px 25px 35px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .countdown-widget--right .countdown-widget__avatar--tablet {
    margin-left: -30px;
    margin-right: 0;
  }

  /* Avatar Tablette - Cercle parfait 100px × 100px */
  .countdown-widget__avatar--tablet {
    width: 100px;
    height: 100px;
    flex-shrink: 0;

    /* Position - Alignement vertical centré, débordement */
    position: relative;
    margin-right: -30px;

    /* Cercle parfait */
    border-radius: 50%;
    overflow: hidden;

    /* Ombre */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);

    /* Z-index */
    z-index: 10;
  }

  .countdown-widget__avatar--mobile {
    display: none;
  }

  /* Titre Tablette */
  .countdown-widget__title {
    /* Conteneur - doit être visible */
    width: 100%;
    overflow: visible;
    position: relative;
    visibility: visible !important;
    opacity: 1 !important;

    /* Typographie - Galano Grotesque, 14px, Bold, Majuscules */
    font-family:
      "Galano Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-align: center;

    /* Couleur */
    color: var(--countdown-text-color);

    /* Espacement */
    margin-bottom: 0;
    padding: 0;
  }

  .countdown-widget__title-text {
    display: inline-block;
    white-space: nowrap;
  }

  /* Compteur Tablette */
  .countdown-widget__counter {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    justify-content: center;
  }

  /* Bloc de temps Tablette */
  .countdown-widget__time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 35px;
  }

  /* Chiffres Tablette */
  .countdown-widget__digits {
    font-family:
      "Galano Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;

    /* Couleur */
    color: var(--countdown-text-color);

    /* Largeur fixe par unité pour éviter les sauts visuels */
    min-width: 35px;
    text-align: center;
  }

  /* Libellés Tablette */
  .countdown-widget__label {
    font-family:
      "Galano Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-transform: capitalize;
    line-height: 1;

    /* Couleur */
    color: var(--countdown-text-color);

    /* Espacement */
    margin-top: 4px;
  }

  /* Hover Effect Tablette */
  .countdown-widget:hover .countdown-widget__content--tablet,
  .countdown-widget:focus .countdown-widget__content--tablet {
    background-color: var(--countdown-hover-bg);
  }

  .countdown-widget:hover .countdown-widget__title,
  .countdown-widget:hover .countdown-widget__title-text,
  .countdown-widget:hover .countdown-widget__digits,
  .countdown-widget:hover .countdown-widget__label,
  .countdown-widget:focus .countdown-widget__title,
  .countdown-widget:focus .countdown-widget__title-text,
  .countdown-widget:focus .countdown-widget__digits,
  .countdown-widget:focus .countdown-widget__label {
    color: var(--countdown-hover-text);
  }
}

/* ==========================================================================
   VERSION MOBILE (< 768px) - MOB-001 à MOB-007
   ========================================================================== */

@media (max-width: 767px) {
  /* Masquer les wrappers desktop et tablette */
  .countdown-widget-wrapper--desktop,
  .countdown-widget-wrapper--tablet {
    display: none !important;
  }

  /* Afficher le wrapper de page mobile */
  .countdown-widget-wrapper--mobile {
    display: block !important;
  }

  /* Masquer les wrappers internes desktop et tablette */
  .countdown-widget__desktop-wrapper,
  .countdown-widget__tablet-wrapper {
    display: none !important;
  }

  .countdown-widget__avatar--desktop,
  .countdown-widget__avatar--tablet {
    display: none !important;
  }

  /* Afficher le wrapper interne mobile */
  .countdown-widget__mobile-wrapper {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .countdown-widget {
    /* MOB-002: Position - Sous le header-bar en position relative (flow normal) */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 998;

    /* MOB-003: Dimensions - Hauteur égale à l'avatar (65px), largeur fluide 100% */
    width: 100%;
    height: 65px;
    min-height: 65px;

    /* PAS de scale - affichage à taille normale selon l'image */
    transform: none;

    /* Style */
    border-radius: 0;
    border: none;
    background-color: var(--countdown-bg-color);

    /* Flexbox */
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  /* Contenu mobile */
  .countdown-widget__content--mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
  }

  /* MOB-005: Titre - 13px, Regular, Majuscules sur 3 lignes max */
  .countdown-widget__title {
    font-size: 12px;
    margin: 0;
    width: auto;
    max-width: 100px;
    white-space: normal;
    line-height: 1.15;
    text-align: left;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
  }

  .countdown-widget__title-text {
    white-space: normal;
  }

  /* MOB-006: Compteur - Chiffres 24px, Bold, bien espacé, alignés en haut (mobile uniquement) */
  .countdown-widget__counter {
    gap: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .countdown-widget__time-block {
    min-width: 32px;
    max-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  /* Chiffres mobile - plus gros et lisibles */
  .countdown-widget__digits {
    font-size: 20px;
    font-weight: 700; /* Bold */
    min-width: 32px;
    text-align: center;
    line-height: 1;
  }

  /* MOB-007: Libellés - 11px, Regular, Capitalize */
  .countdown-widget__label {
    font-size: 11px;
    font-weight: regular;
    text-transform: capitalize;
    margin-top: 3px;
    line-height: 1;
  }

  /* Avatar mobile - rectangulaire, à droite */
  .countdown-widget__avatar--mobile {
    display: flex !important;
    width: 65px;
    height: 65px;
    min-width: 65px;
    flex-shrink: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Hover sur mobile - FUN-006 */
  .countdown-widget:hover,
  .countdown-widget:focus {
    background-color: var(--countdown-hover-bg);
  }

  .countdown-widget:hover .countdown-widget__title,
  .countdown-widget:hover .countdown-widget__digits,
  .countdown-widget:hover .countdown-widget__label {
    color: var(--countdown-hover-text);
  }

  /* Désactiver hover sur écrans tactiles */
  @media (hover: none) {
    .countdown-widget:hover,
    .countdown-widget:focus {
      background-color: var(--countdown-bg-color);
    }

    .countdown-widget:hover .countdown-widget__title,
    .countdown-widget:hover .countdown-widget__digits,
    .countdown-widget:hover .countdown-widget__label {
      color: var(--countdown-text-color);
    }
  }
}

/* ==========================================================================
   Très petit mobile (< 360px)
   ========================================================================== */

@media (max-width: 359px) {
  .countdown-widget {
    padding: 10px;
    min-height: 60px;
  }

  .countdown-widget__title {
    font-size: 10px;
    max-width: 80px;
  }

  .countdown-widget__counter {
    gap: 6px;
  }

  .countdown-widget__time-block {
    min-width: 28px;
  }

  .countdown-widget__digits {
    font-size: 18px;
    min-width: 28px;
  }

  .countdown-widget__label {
    font-size: 9px;
  }

  .countdown-widget__avatar--mobile {
    width: 50px;
    height: 50px;
    min-width: 50px;
  }
}

/* ==========================================================================
   État caché (FUN-004)
   ========================================================================== */

.countdown-widget--hidden {
  display: none !important;
}

/* ==========================================================================
   Accessibilité
   ========================================================================== */

.countdown-widget:focus-visible {
  outline: 3px solid var(--countdown-hover-bg);
  outline-offset: 3px;
}

/* ==========================================================================
   Mode inversé (ADM-007) : bordure bleue, fond jaune, texte noir
   ========================================================================== */

.countdown-widget--inverted {
  --countdown-bg-color: #f9c706;
  --countdown-text-color: #000000;
  --countdown-border-color: #004899;
  --countdown-hover-bg: #004899;
  --countdown-hover-text: #ffffff;
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .countdown-widget {
    display: none !important;
  }
}