/* ==========================================================================
   DATAGONG — Couche Website (thème Kajabi Encore 2.14.9)
   ==========================================================================
   Ce fichier est le seul point d'entrée CSS Datagong du thème Website :
   styles.scss.liquid et scripts.js sont du code Kajabi que l'on ne modifie
   jamais. Il est chargé en bloquant depuis snippets/global_head.liquid
   (stylesheet_tag) car il affecte le premier rendu.

   Conventions (skill datagong-kajabi) :
   - jetons de marque en variables CSS --dg-* (jamais de couleur hexa
     hardcodée hors de :root) ;
   - composants préfixés .dg-<bloc>__<élément>--<modificateur> (BEM) ;
   - les surcharges de classes Encore natives (.btn, .product, .header…)
     sont regroupées par chantier et commentées.

   Plan du fichier :
     1. Jetons (:root)
     2. Fondations (typographie, focus, mouvement réduit, utilitaires)
     3. Composants partagés Datagong (.dg-btn, .dg-card, .dg-badge,
        .dg-progress-bar, .dg-overline)
     4. Harmonisation des boutons Encore (.btn, .form-btn)
   Les chantiers suivants (library, header/footer, login) s'ajoutent à la
   suite, chacun sous son propre bandeau.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   Palette identique à theme/assets/overrides.scss du thème Product
   (kajabi-course-datagong-templates), plus quelques jetons de mise en forme.
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de marque */
  --dg-primary:         #3B4859; /* ardoise : header, footer, titres, texte fort */
  --dg-primary-dark:    #2A3440; /* texte principal sur fond clair */
  --dg-primary-light:   #F0F2F5; /* fond de page */
  --dg-primary-lighter: #E8EDF3; /* piste des barres, badges neutres, filets */
  --dg-accent:          #FF7373; /* corail : CTA et états actifs uniquement */
  --dg-accent-hover:    #E55555;
  --dg-secondary:       #A0C4F2; /* bleu ciel : liens sur fond ardoise, tags */
  --dg-secondary-dark:  #6BA0DE; /* progression, survol des liens */
  --dg-success:         #10B981; /* terminé */
  --dg-white:           #FFFFFF;
  --dg-danger:          #B42318; /* messages d'erreur (6.5:1 sur --dg-danger-bg) */
  --dg-danger-bg:       #FEF3F2;
  --dg-danger-border:   #FECDCA;

  /* Gris des overlines et métadonnées. Le thème Product utilise #6B7785
     (4.56:1 sur blanc) ; on l'assombrit d'un cran pour rester AA (≥ 4.5:1)
     aussi sur le fond de page --dg-primary-light (4.85:1). */
  --dg-overline:        #5F6B79;

  /* Typographie : Ubuntu et Poppins viennent des réglages Encore
     (settings.font_family_body / _heading) ; JetBrains Mono est chargée
     dans global_head.liquid pour les overlines et compteurs. */
  --dg-font-body:    "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dg-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dg-font-mono:    "JetBrains Mono", "Consolas", "SFMono-Regular", Menlo, monospace;

  /* Formes et ombres (cartes et boutons du thème Product) */
  --dg-radius-card:  8px;
  --dg-radius-pill:  25px;
  --dg-radius-badge: 12px;
  --dg-shadow-card:       0 1px 4px rgba(59, 72, 89, 0.10);
  --dg-shadow-card-hover: 0 6px 20px rgba(59, 72, 89, 0.16);
  --dg-shadow-focus:      0 0 0 3px rgba(107, 160, 222, 0.35);

  /* Mouvement */
  --dg-transition-fast:   150ms ease;
  --dg-transition-normal: 200ms ease;

  /* Rythme : largeur utile alignée sur le .container Encore (1340 − 2×40) */
  --dg-container-max: 1260px;
}

/* --------------------------------------------------------------------------
   2. Fondations
   -------------------------------------------------------------------------- */

/* Le corps repasse en 400 via settings.font_weight_body ; on ne le force pas
   ici pour laisser le réglage d'éditeur faire foi. En revanche on fige les
   lissages hérités et on retire le filtre de survol d'Encore (brightness),
   qui éclaircit aussi les logos et les images cliquables. */
a:hover,
.button-as-link:hover {
  -webkit-filter: none;
  filter: none;
}

/* Focus visible uniforme (WCAG 2.4.7) : anneau corail décalé sur les liens
   et boutons, anneau bleu ciel intérieur sur les champs de formulaire. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--dg-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.form-control:focus,
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--dg-secondary-dark);
  -webkit-box-shadow: var(--dg-shadow-focus);
  box-shadow: var(--dg-shadow-focus);
}

/* Mouvement réduit : on coupe les transitions et animations Datagong */
@media (prefers-reduced-motion: reduce) {
  .dg-btn,
  .dg-card,
  .dg-progress-bar__fill,
  .btn,
  .form-btn {
    -webkit-transition: none !important;
    transition: none !important;
  }
  .dg-card:hover {
    -webkit-transform: none !important;
    transform: none !important;
  }
}

/* Utilitaires */
.dg-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dg-container {
  width: 100%;
  max-width: var(--dg-container-max);
  margin: 0 auto;
  padding: 0 20px;
}

.dg-mono {
  font-family: var(--dg-font-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Composants partagés Datagong
   -------------------------------------------------------------------------- */

/* Overline : « FORMATION 3/12 », « MES FORMATIONS »… en JetBrains Mono,
   capitales espacées, comme .dg-sidebar__overline du thème Product. */
.dg-overline {
  display: block;
  margin: 0 0 6px;
  font-family: var(--dg-font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dg-overline);
}

.dg-overline--light {
  color: var(--dg-secondary);
}

/* Métadonnée mono (compteurs « 45 % », « 8 leçons ») */
.dg-meta {
  font-family: var(--dg-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  line-height: 1.4;
  color: var(--dg-overline);
  white-space: nowrap;
}

/* Bouton pilule : 50 px de haut, radius 25 px, graisse 700 (.dg-btn du
   thème Product). Le corail reste réservé aux CTA ; blanc sur corail
   mesure 2.64:1, voir journal (décision charte). */
.dg-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  margin: 0;
  padding: 0 33px;
  border: 2px solid transparent;
  border-radius: var(--dg-radius-pill);
  font-family: var(--dg-font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: background-color var(--dg-transition-normal), border-color var(--dg-transition-normal), color var(--dg-transition-normal), -webkit-transform var(--dg-transition-fast);
  transition: background-color var(--dg-transition-normal), border-color var(--dg-transition-normal), color var(--dg-transition-normal), transform var(--dg-transition-fast);
}

.dg-btn:hover,
.dg-btn:focus-visible {
  text-decoration: none;
}

.dg-btn:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

.dg-btn__icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  line-height: 0;
}

.dg-btn--accent {
  background-color: var(--dg-accent);
  border-color: var(--dg-accent);
  color: var(--dg-white) !important;
}
.dg-btn--accent:hover,
.dg-btn--accent:focus-visible {
  background-color: var(--dg-accent-hover);
  border-color: var(--dg-accent-hover);
  color: var(--dg-white) !important;
}

.dg-btn--primary {
  background-color: var(--dg-primary);
  border-color: var(--dg-primary);
  color: var(--dg-white) !important;
}
.dg-btn--primary:hover,
.dg-btn--primary:focus-visible {
  background-color: var(--dg-primary-dark);
  border-color: var(--dg-primary-dark);
  color: var(--dg-white) !important;
}

/* Secondaire : bleu ciel, texte ardoise foncé (7.0:1) */
.dg-btn--secondary {
  background-color: var(--dg-secondary);
  border-color: var(--dg-secondary);
  color: var(--dg-primary-dark) !important;
}
.dg-btn--secondary:hover,
.dg-btn--secondary:focus-visible {
  background-color: var(--dg-secondary-dark);
  border-color: var(--dg-secondary-dark);
  color: var(--dg-primary-dark) !important;
}

/* Contour : sur fond clair (ardoise) ou sur fond ardoise (blanc) */
.dg-btn--outline {
  background-color: transparent;
  border-color: var(--dg-primary);
  color: var(--dg-primary) !important;
}
.dg-btn--outline:hover,
.dg-btn--outline:focus-visible {
  background-color: var(--dg-primary);
  color: var(--dg-white) !important;
}
.dg-btn--outline-light {
  background-color: transparent;
  border-color: var(--dg-white);
  color: var(--dg-white) !important;
}
.dg-btn--outline-light:hover,
.dg-btn--outline-light:focus-visible {
  background-color: var(--dg-white);
  color: var(--dg-primary) !important;
}

.dg-btn--sm {
  min-height: 40px;
  padding: 0 22px;
  font-size: 15px;
}

.dg-btn--lg {
  min-height: 56px;
  padding: 0 40px;
  font-size: 19px;
}

.dg-btn--block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

/* Carte blanche : radius 8 px, ombre douce, élévation au survol
   (.dg-module-card du thème Product). */
.dg-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--dg-white);
  border-radius: var(--dg-radius-card);
  -webkit-box-shadow: var(--dg-shadow-card);
  box-shadow: var(--dg-shadow-card);
  color: var(--dg-primary-dark);
  -webkit-transition: -webkit-transform var(--dg-transition-normal), -webkit-box-shadow var(--dg-transition-normal);
  transition: transform var(--dg-transition-normal), box-shadow var(--dg-transition-normal);
}

.dg-card--hover:hover,
.dg-card--hover:focus-within {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: var(--dg-shadow-card-hover);
  box-shadow: var(--dg-shadow-card-hover);
}

.dg-card__body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 20px 24px 24px;
}

/* Badge d'état (« À commencer / En cours / Terminé »). Mêmes fonds que
   dg-module-header__badge côté Product ; le texte passe en ardoise foncé
   sur corail (4.78:1) et sur vert (4.97:1) pour tenir le 4.5:1 exigé du
   petit texte, là où le blanc du thème Product plafonne à 2.6:1. */
.dg-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--dg-radius-badge);
  font-family: var(--dg-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--dg-primary-lighter);
  color: var(--dg-primary);
}

.dg-badge--todo {
  background-color: var(--dg-primary-lighter);
  color: var(--dg-primary);
}

.dg-badge--progress {
  background-color: var(--dg-accent);
  color: var(--dg-primary-dark);
}

.dg-badge--done {
  background-color: var(--dg-success);
  color: var(--dg-primary-dark);
}

/* Barre de progression : piste --dg-primary-lighter, remplissage bleu ciel.
   Le remplissage utilise --dg-secondary-dark (mieux perceptible sur la piste
   que #A0C4F2, 2.3:1 contre 1.5:1) ; la valeur est toujours doublée par un
   texte « NN % » et par les attributs ARIA posés par le snippet
   dg_progress_bar. */
.dg-progress-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--dg-primary-lighter);
}

.dg-progress-bar__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background-color: var(--dg-secondary-dark);
  -webkit-transition: width 300ms ease;
  transition: width 300ms ease;
}

.dg-progress-bar--done .dg-progress-bar__fill {
  background-color: var(--dg-success);
}

.dg-progress-bar--thin {
  height: 4px;
  border-radius: 2px;
}

/* Ligne « barre + pourcentage » */
.dg-progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.dg-progress .dg-progress-bar {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.dg-progress__value {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-width: 3.5ch;
  text-align: right;
}

/* --------------------------------------------------------------------------
   4. Harmonisation des boutons Encore
   Les .btn / .form-btn natifs gardent leurs couleurs et leur radius, qui
   sont des réglages d'éditeur inlinés par section. On aligne seulement ce
   que les réglages ne couvrent pas : plus d'ombre portée, survol par
   assombrissement (comme .dg-btn--accent → --dg-accent-hover) au lieu de
   l'éclaircissement Encore, texte non espacé.
   -------------------------------------------------------------------------- */
.btn,
.form-btn {
  letter-spacing: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn:hover,
.form-btn:hover {
  -webkit-filter: brightness(90%);
  filter: brightness(90%);
}

.btn:focus-visible,
.form-btn:focus-visible {
  outline: 2px solid var(--dg-accent);
  outline-offset: 3px;
  -webkit-filter: none;
  filter: none;
}

/* --------------------------------------------------------------------------
   5. Library : hero Datagong (sections/dg_library_hero.liquid)
   Image de fond plein cadre (image_tag, object-fit) + voile ardoise réglable,
   texte à gauche, carte « Reprendre là où vous en étiez » à droite sur
   desktop, empilée sous le texte en dessous de 992 px. Les marges verticales
   sont inlinées par la section depuis ses réglages spacer.
   -------------------------------------------------------------------------- */
.dg-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--dg-primary);
  color: var(--dg-white);
}

.dg-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.dg-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.dg-hero__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(59, 72, 89, 0.72);
}

.dg-hero__inner {
  position: relative;
  z-index: 1;
}

.dg-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: end;
}

.dg-hero__grid--with-aside {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 48px;
}

.dg-hero__overline {
  margin-bottom: 14px;
}

.dg-hero__title {
  margin: 0 0 14px;
  color: inherit;
  letter-spacing: -0.01em;
}

.dg-hero .dg-hero__title {
  color: inherit;
}

.dg-hero__subtitle {
  max-width: 640px;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: inherit;
  opacity: 0.88;
}

/* Carte de reprise : blanche sur le voile, texte ardoise même dans une
   section .background-dark (Encore force les liens et le texte en blanc). */
.dg-hero .dg-resume {
  padding: 22px 24px 24px;
  color: var(--dg-primary-dark);
}

.dg-hero .dg-resume__label {
  margin-bottom: 10px;
}

.dg-hero .dg-resume__course {
  margin: 0 0 4px;
  font-family: var(--dg-font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dg-primary-dark);
}

.dg-hero .dg-resume__lesson {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dg-primary);
  opacity: 0.85;
}

.dg-hero .dg-resume__progress {
  margin-bottom: 18px;
}

.dg-hero .dg-resume__cta {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.dg-hero .dg-resume--done .dg-resume__lesson {
  color: var(--dg-success);
  opacity: 1;
  font-weight: 700;
}

@media (max-width: 991px) {
  .dg-hero__grid--with-aside {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .dg-hero .dg-resume {
    max-width: 480px;
  }
}

@media (max-width: 767px) {
  .dg-hero__subtitle {
    font-size: 16px;
  }
  .dg-hero .dg-resume {
    padding: 18px 18px 20px;
  }
}

/* --------------------------------------------------------------------------
   6. Library : en-tête de grille et cartes de cours
   (sections/products.liquid + snippets/product.liquid)
   La grille reste celle d'Encore (.row / .col-4 : 3 colonnes dès 768 px,
   1 colonne en dessous) ; on ramène la tablette à 2 colonnes. Fond de page,
   rayon 8 px, alignement à gauche et couleur de la barre viennent des
   réglages de la section (inlinés par Encore) ; le reste est ici.
   -------------------------------------------------------------------------- */
.products .dg-products__header {
  margin-bottom: 8px;
}

.products .dg-products__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 14px;
}

.products .dg-products__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .products .dg-products__col.col-4 {
    width: 50%;
  }
}

.products .dg-course-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--dg-radius-card);
  -webkit-box-shadow: var(--dg-shadow-card);
  box-shadow: var(--dg-shadow-card);
  -webkit-transition: -webkit-transform var(--dg-transition-normal), -webkit-box-shadow var(--dg-transition-normal);
  transition: transform var(--dg-transition-normal), box-shadow var(--dg-transition-normal);
}

.products .dg-course-card:hover,
.products .dg-course-card:focus-within {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: var(--dg-shadow-card-hover);
  box-shadow: var(--dg-shadow-card-hover);
}

/* Vignette 16:9 (padding-top plutôt qu'aspect-ratio pour les vieux Safari) */
.products .dg-course-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 56.25%;
  background-color: var(--dg-primary-lighter);
}

.products .dg-course-card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
}

.products .dg-course-card:hover .dg-course-card__img {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

.products .dg-course-card__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 18px 20px 22px;
  text-align: left;
}

.products .dg-course-card__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.products .dg-course-card__overline {
  margin: 0;
}

.products .dg-course-card__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.products .dg-course-card__title {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.35;
}

.products .dg-course-card__title a {
  color: inherit;
  text-decoration: none;
}

.products .dg-course-card__title a:hover,
.products .dg-course-card__title a:focus-visible {
  color: var(--dg-primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--dg-secondary-dark);
  text-underline-offset: 3px;
}

.products .dg-course-card__excerpt {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.85;
}

.products .dg-course-card__progress {
  margin-top: auto;
  padding-top: 12px;
}

.products .dg-course-card__actions {
  margin-top: 18px;
  text-align: left;
}

/* Bouton de carte : pilule 48 px (cible tactile), couleurs inlinées par la
   section depuis btn_background_color / btn_text_color, survol assombri */
.products .dg-btn--card {
  min-height: 48px;
  padding: 0 26px;
  font-size: 16px;
}

.products .dg-btn--card.dg-btn--sm {
  min-height: 44px;
  padding: 0 22px;
  font-size: 15px;
}

.products .dg-btn--card:hover,
.products .dg-btn--card:focus-visible {
  -webkit-filter: brightness(90%);
  filter: brightness(90%);
}

@media (max-width: 767px) {
  .products .dg-products__title {
    font-size: 20px;
  }
  .products .dg-course-card__body {
    padding: 16px 16px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .products .dg-course-card,
  .products .dg-course-card__img {
    -webkit-transition: none;
    transition: none;
  }
  .products .dg-course-card:hover,
  .products .dg-course-card:focus-within,
  .products .dg-course-card:hover .dg-course-card__img {
    -webkit-transform: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   7. Header : contexte membre (sections/header.liquid)
   Fond ardoise, texte blanc et couleur du hamburger viennent des réglages
   de la section (inlinés par Encore). Ici : hauteur compacte, lien membre
   « Mes formations » (snippets/dg_header_member_link.liquid), menu
   utilisateur (avatar cerclé, menu blanc à coins 8 px), cibles tactiles
   48 px et panneau mobile. Le JS Encore déplace les blocs
   .header__switch-content dans .header__content--mobile sous 768 px.
   -------------------------------------------------------------------------- */
.header .header__content--desktop {
  padding: 14px 0;
}

.header .header__container {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header .logo {
  display: inline-block;
  line-height: 0;
}

.header .logo__image {
  height: auto;
}

/* Lien membre */
.header .dg-member-link {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header .link-list .dg-member-link__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 44px;
  margin: 0 6px 0 0;
  padding: 0 16px;
  border-radius: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  -webkit-transition: background-color var(--dg-transition-fast), color var(--dg-transition-fast);
  transition: background-color var(--dg-transition-fast), color var(--dg-transition-fast);
}

.header .link-list .dg-member-link__link:hover,
.header .link-list .dg-member-link__link:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--dg-secondary);
}

.header .link-list .dg-member-link__link--active {
  background-color: rgba(160, 196, 242, 0.16);
}

/* Menu utilisateur */
.header .user {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header .user .dropdown__trigger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 44px;
  padding: 2px;
  border-radius: 50%;
}

.header .user .dropdown__trigger:focus-visible {
  outline: 2px solid var(--dg-accent);
  outline-offset: 3px;
}

.header .user__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
  -webkit-transition: border-color var(--dg-transition-fast);
  transition: border-color var(--dg-transition-fast);
}

.header .user .dropdown__trigger:hover .user__avatar,
.header .user .dropdown__trigger:focus-visible .user__avatar,
.header .user .dropdown--open .user__avatar {
  border-color: var(--dg-secondary);
}

.header .user .dropdown__menu {
  top: 54px;
  min-width: 220px;
  padding: 8px 0;
  border-radius: var(--dg-radius-card);
  -webkit-box-shadow: var(--dg-shadow-card-hover);
  box-shadow: var(--dg-shadow-card-hover);
}

.header .user .dropdown__item a {
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.header .user .dropdown__item a:hover,
.header .user .dropdown__item a:focus-visible {
  background-color: var(--dg-primary-light);
}

/* Lien de connexion (visiteur) */
.header .user__login a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.header .user__login a:hover,
.header .user__login a:focus-visible {
  border-color: var(--dg-secondary);
  color: var(--dg-secondary);
}

/* Hamburger : cible tactile 44 px autour des 30 px de traits d'Encore */
.header .hamburger {
  width: 44px;
  height: 44px;
  padding: 10px 7px;
}

.header .hamburger__slices {
  width: 30px;
  height: 24px;
}

@media (max-width: 767px) {
  .header .header__content--desktop {
    padding: 12px 0;
  }
  .header .header__content--mobile {
    padding: 4px 0 12px;
  }
  .header .header__content--mobile .dg-member-link {
    display: block;
  }
  .header .header__content--mobile .link-list .dg-member-link__link {
    display: block;
    min-height: 48px;
    margin: 0;
    padding: 12px 20px;
    border-radius: 0;
  }
  .header .header__content--mobile .link-list .dg-member-link__link:hover,
  .header .header__content--mobile .link-list .dg-member-link__link--active {
    background-color: rgba(255, 255, 255, 0.08);
  }
  .header .header__content--mobile .dropdown__item a,
  .header .header__content--mobile .user__login a {
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 0;
  }
  .header .header__content--mobile .dropdown__item a:hover,
  .header .header__content--mobile .dropdown__item a:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
  }
  .header .header__content--mobile .user .dropdown__trigger {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8. Footer (sections/footer.liquid)
   Grille deux lignes sur desktop : logo | icônes sociales, puis copyright |
   liens légaux (snippets/dg_footer_legal_links.liquid). Chaque bloc porte
   une classe footer__block--<type> posée par la section ; une zone vide
   (bloc masqué) ne décale pas les autres, ce qui règle le recentrage du
   copyright noté en Entrée 13. Couleurs de fond et de texte : réglages.
   -------------------------------------------------------------------------- */
.footer .footer__content {
  padding: 32px 0 24px;
}

.footer .footer__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "logo social"
    "copyright legal";
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 18px;
  -webkit-column-gap: 24px;
  -moz-column-gap: 24px;
  column-gap: 24px;
}

.footer .footer__block {
  margin: 0;
}

.footer .footer__block--logo {
  grid-area: logo;
}

.footer .footer__block--social {
  grid-area: social;
  justify-self: end;
}

.footer .footer__block--copyright {
  grid-area: copyright;
}

.footer .footer__block--legal {
  grid-area: legal;
  justify-self: end;
}

.footer .logo {
  display: inline-block;
  line-height: 0;
}

.footer .logo__image {
  height: auto;
}

.footer .copyright {
  font-family: var(--dg-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer .social-icons__icon {
  width: 40px;
  height: 40px;
  margin: 0 0 0 8px;
  border-radius: 50%;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.08);
  -webkit-transition: background-color var(--dg-transition-fast);
  transition: background-color var(--dg-transition-fast);
}

.footer .social-icons__icon:hover,
.footer .social-icons__icon:focus-visible {
  background-color: rgba(255, 255, 255, 0.18);
  -webkit-filter: none;
  filter: none;
}

.footer .dg-legal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.footer .dg-legal .dg-legal__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  color: var(--dg-secondary);
  text-decoration: none;
}

.footer .dg-legal .dg-legal__link:hover,
.footer .dg-legal .dg-legal__link:focus-visible {
  color: var(--dg-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer .powered-by {
  font-size: 12px;
  padding: 12px 0 0;
}

@media (max-width: 767px) {
  .footer .footer__content {
    padding: 28px 0 20px;
  }
  .footer .footer__container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "logo"
      "social"
      "legal"
      "copyright";
    justify-items: center;
    row-gap: 16px;
    text-align: center;
  }
  .footer .footer__block--social,
  .footer .footer__block--legal {
    justify-self: center;
  }
  .footer .dg-legal {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .footer .social-icons__icon {
    margin: 0 4px;
  }
}

/* --------------------------------------------------------------------------
   9. Login et pages mot de passe (.dg-auth-page)
   Classe posée sur la <section> de sections/login.liquid et des templates
   forgot_password*.liquid. Fond clair (réglage background_color côté login,
   CSS côté mot de passe), carte blanche centrée, champs 48 px, bouton pilule
   pleine largeur (couleurs inlinées par la section), messages d'erreur AA.
   -------------------------------------------------------------------------- */
.dg-auth-page {
  background-color: var(--dg-primary-light);
}

/* Hauteur : la vue moins header et footer, plancher 560 px sur les petits
   écrans (pas de max() : libsass le prend pour sa propre fonction). */
.dg-auth-page .sizer--full {
  min-height: calc(100vh - 240px);
}

@media (max-height: 800px) {
  .dg-auth-page .sizer--full {
    min-height: 560px;
  }
}

.dg-auth-page .row > [class*="col-"] {
  width: 100%;
  max-width: 520px;
}

.dg-auth-page .auth__content {
  padding: 40px 40px 32px;
  background-color: var(--dg-white);
  border-radius: var(--dg-radius-card);
  -webkit-box-shadow: var(--dg-shadow-card);
  box-shadow: var(--dg-shadow-card);
  color: var(--dg-primary-dark);
  text-align: left;
}

.dg-auth-page .auth__image {
  margin-bottom: 24px;
  text-align: center;
}

.dg-auth-page .dg-auth__overline {
  margin-bottom: 8px;
  text-align: center;
}

.dg-auth-page .auth__title {
  margin: 0 0 24px;
  font-size: 28px;
  line-height: 1.25;
  text-align: center;
  color: var(--dg-primary-dark);
}

.dg-auth-page .form-group {
  margin-bottom: 18px;
}

.dg-auth-page .form-group label,
.dg-auth-page .auth__label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dg-primary);
}

.dg-auth-page .form-control {
  min-height: 48px;
  padding: 10px 14px;
  font-size: 16px;
  color: var(--dg-primary-dark);
  background-color: var(--dg-white);
  border: 1px solid rgba(59, 72, 89, 0.25);
  border-radius: 8px;
}

.dg-auth-page .form-control:focus {
  border-color: var(--dg-secondary-dark);
  -webkit-box-shadow: var(--dg-shadow-focus);
  box-shadow: var(--dg-shadow-focus);
}

/* « Se souvenir de moi » : case native colorée, ligne cliquable de 44 px
   (classe dg-auth__check posée sur le label dans block_login.liquid) */
.dg-auth-page .form-group .dg-auth__check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
}

.dg-auth-page input[type="checkbox"].boolean {
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  accent-color: var(--dg-primary);
  cursor: pointer;
}

.dg-auth-page input[type="checkbox"] + .auth__label {
  display: inline;
  margin: 0;
  font-weight: 400;
  vertical-align: middle;
}

/* Bouton : pilule pleine largeur, 50 px ; couleurs et rayon depuis les réglages */
.dg-auth-page .form-btn,
.dg-auth-page .auth__content .btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  margin-top: 8px;
  font-size: 17px;
}

/* Lien secondaire (mot de passe oublié, retour à la connexion) */
.dg-auth-page .auth__link {
  margin-top: 20px;
  font-size: 15px;
  text-align: center;
}

.dg-auth-page .auth__link a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--dg-primary);
  text-decoration: underline;
  text-decoration-color: var(--dg-secondary-dark);
  text-underline-offset: 3px;
}

.dg-auth-page .auth__link a:hover,
.dg-auth-page .auth__link a:focus-visible {
  color: var(--dg-primary-dark);
  text-decoration-color: currentColor;
}

/* Messages d'erreur */
.dg-auth-page .alert--danger {
  margin: 0 0 18px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  color: var(--dg-danger);
  background-color: var(--dg-danger-bg);
  border: 1px solid var(--dg-danger-border);
  border-radius: 8px;
}

.dg-auth-page .form-group .auth__message,
.dg-auth-page .auth__group--error .auth__message {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--dg-danger);
}

.dg-auth-page .auth__group--error .form-control {
  border-color: var(--dg-danger);
}

/* Séparateur du login social (si activé un jour) */
.dg-auth-page .auth__content .divider {
  margin: 18px 0;
  font-size: 13px;
  color: var(--dg-overline);
}

@media (max-width: 767px) {
  .dg-auth-page .sizer--full {
    min-height: 0;
  }
  .dg-auth-page .auth__content {
    padding: 28px 20px 24px;
  }
  .dg-auth-page .auth__title {
    font-size: 24px;
  }
}