@charset "UTF-8";
/* ==========================================================================
   PAGE D'ACTION — CMS 30 « Conditions salon & Auto Festival »

   Feuille chargée uniquement sur la page CMS de l'action, par
   override/controllers/front/CmsController.php (constante ID_CMS_ACTION).

   Le HTML vit dans le back-office (Préférences > CMS), une copie de
   référence est conservée dans themes/enetb-base/cms/.

   ---------------------------------------------------------------------
   PRÉFIXAGE DES CLASSES
   La maquette du client utilise des noms très génériques (.bar, .btn,
   .close, .row, .lead, .step, .grid…). Trois d'entre eux existent déjà
   dans le thème (.btn et .close de Bootstrap, .row de la grille, .lead) :
   les laisser tels quels revient à se battre à coups de spécificité sur
   chaque propriété. Tout est donc préfixé `af-`, dans la continuité de
   ce qui existait sur la version précédente de la page.

     maquette          →  ici
     .bar              →  .af-bar
     .wrap             →  .af-wrap
     .btn / .btn-sm    →  .af-btn / .af-btn--sm
     .hero             →  .af-hero
     .ladder / .step   →  .af-ladder / .af-step
     .phase / .tally   →  .af-phase / .af-tally
     .fest / .prog     →  .af-fest / .af-prog
     .amb-card         →  .af-amb-card
     .everywhere       →  .af-everywhere
     .close            →  .af-close
     footer            →  .af-footer

   Le balisage correspondant est versionné dans
   themes/enetb-base/cms/action-30-auto-festival.html
   ---------------------------------------------------------------------

   Tout est scopé sous .cms-30 : rien ne peut fuir sur le reste du shop, et
   les styles de .rte (typo du contenu CMS) sont neutralisés dans le
   périmètre .lp-af.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. Polices — celles de la charte

   La maquette du client est composée en Poppins. On ne la reprend pas :
   ni la police ni son <link> Google Fonts n'existent dans ce thème, et
   header.tpl a justement commenté le lien vers fonts.googleapis.com
   (autoblocker Usercentrics). La page utilise donc les deux familles de
   _variables.scss, dont une seule est réellement auto-hébergée :

     $heading-font  'Gotham Rounded'  → fonts/gotham-rounded/, poids 400/500/700
     $text-font     'Open Sans', …    → non embarquée, retombe sur Arial

   Aucun @font-face à déclarer ici : _fonts.scss s'en charge pour tout le
   shop, et global.css est chargé avant action.css.

   Conséquence sur les graisses : Gotham Rounded n'a pas de 600. Les
   valeurs viennent de $text-fw-* et $heading-fw-* pour que la page
   dégrade exactement comme le reste du site.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   2. Gabarit de page
   Le gabarit CMS est centré (#columns.mode-contained > .columns-container
   .container) et .rte est limité à 960px. Les sections de la landing ont des
   fonds colorés qui doivent aller de bord à bord : on ouvre le conteneur sur
   cette page uniquement.
   -------------------------------------------------------------------------- */
.cms-19 #footer_top {
  margin-top: -24px;
}
.cms-19 #columns {
  padding-top: 0;
  padding-bottom: 0;
}
.cms-19 .columns-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
.cms-19 #center_column {
  padding: 0;
}
.cms-19 #center_column .rte {
  max-width: none;
  margin: 0;
}
.cms-19 .breadcrumb {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Neutralisation de la typo .rte
   Le contenu CMS est rendu dans .rte, qui impose ses puces, ses marges de
   paragraphe, la couleur des <strong> et le soulignement des liens.
   La landing apporte la sienne : on remet les compteurs à zéro, uniquement
   dans le périmètre .lp-af.
   -------------------------------------------------------------------------- */
.cms-19 .rte .lp-af p {
  margin-bottom: 0;
}
.cms-19 .rte .lp-af ul,
.cms-19 .rte .lp-af ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cms-19 .rte .lp-af strong,
.cms-19 .rte .lp-af b {
  color: inherit;
}
.cms-19 .rte .lp-af .af-btn,
.cms-19 .rte .lp-af .af-btn:hover,
.cms-19 .rte .lp-af .af-btn:focus,
.cms-19 .rte .lp-af .af-mark,
.cms-19 .rte .lp-af .af-mark:hover,
.cms-19 .rte .lp-af .af-mark:focus {
  text-decoration: none;
}

.cms-19 #center_column .rte .lp-af li {
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. Tokens et base
   -------------------------------------------------------------------------- */
.cms-19 .lp-af {
  /* Marque ------------------------------------------------------------ */
  --af-orange: #ff6d3a;
  --af-orange-dk: rgb(251.8, 65.1868020305, 0);
  --af-yellow: #ffbc50;
  --af-amber: #ffbc50;
  --af-forest: #1f4f48;
  --af-forest-2: rgb(39.6236363636, 100.9763636364, 92.0290909091);
  /* Neutres ----------------------------------------------------------- */
  --af-paper: #ffffff;
  --af-steel: #ece3dc;
  --af-steel-2: rgb(221.6444444444, 205.8444444444, 193.5555555556);
  --af-ink: rgb(45.9, 45.9, 45.9);
  --af-ink-2: rgba(34, 34, 34, 0.662745098);
  --af-ink-3: rgba(97.75, 97.75, 97.75, 0.662745098);
  /* Textes sur fond sombre -------------------------------------------- */
  --af-forest-text: rgb(205.72, 238.2, 229.24);
  --af-forest-text-2: rgb(152.92, 220.2, 201.64);
  --af-pledge-ink: rgb(120.8, 74.5508571429, 0);
  --af-amber-rgb: 255,
  188,
  80;
  /* Formes ------------------------------------------------------------ */
  --af-radius: var(--border-radius);
  --af-radius-sm: calc(var(--border-radius) * 0.75);
  --af-card-max: 1200px;
  --af-section-y: clamp(58px, 7.5vw, 76px);
  font-family: Open Sans, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--af-ink-2);
  background: var(--af-steel);
  overflow-x: clip;
}
.cms-19 .lp-af *,
.cms-19 .lp-af *::before,
.cms-19 .lp-af *::after {
  box-sizing: border-box;
}
.cms-19 .lp-af h1,
.cms-19 .lp-af h2,
.cms-19 .lp-af h3,
.cms-19 .lp-af h4 {
  font-family: Gotham Rounded, Arial, Helvetica, sans-serif;
  color: var(--af-ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.cms-19 .lp-af .af-step__num,
.cms-19 .lp-af .af-bigday__num,
.cms-19 .lp-af .af-bigday__txt b,
.cms-19 .lp-af .af-tally__row b,
.cms-19 .lp-af .af-tally__total b,
.cms-19 .lp-af .af-daylist__chip,
.cms-19 .lp-af .af-daylist__txt strong,
.cms-19 .lp-af .af-cd-big__n,
.cms-19 .lp-af .af-cd-big__over,
.cms-19 .lp-af .af-prog__v,
.cms-19 .lp-af .af-perk__v,
.cms-19 .lp-af .af-amb-card__when,
.cms-19 .lp-af .af-mp-list b {
  font-family: Gotham Rounded, Arial, Helvetica, sans-serif;
}
.cms-19 .lp-af .af-hero__lead,
.cms-19 .lp-af .af-ladder__sub,
.cms-19 .lp-af .af-phase__text,
.cms-19 .lp-af .af-fest__lead,
.cms-19 .lp-af .af-amb__sub,
.cms-19 .lp-af .af-close__text {
  line-height: 1.6;
}
.cms-19 .lp-af p {
  margin: 0;
}
.cms-19 .lp-af img {
  max-width: 100%;
}
.cms-19 .lp-af a {
  color: inherit;
}
.cms-19 .lp-af .af-sec {
  position: relative;
}
.cms-19 .lp-af .af-wrap {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 28px);
  position: relative;
  z-index: 10;
}
.cms-19 .lp-af .af-panel {
  max-width: var(--af-card-max);
  margin-inline: auto;
  border-radius: var(--af-radius);
}
.cms-19 .lp-af .af-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--af-orange);
}
.cms-19 .lp-af .af-eyebrow--pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 10px;
  border-radius: 999px;
  background: var(--af-orange);
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: 1;
}
.cms-19 .lp-af .af-eyebrow--pill b {
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--af-orange);
  font-family: Gotham Rounded, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.cms-19 .lp-af .scrollFixTop {
  display: block;
  position: relative;
  top: calc(var(--header-top-height, 90px) * -1);
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   5. Anti-FOUC des reveals
   La classe .gsap-ready est posée sur <html> par action.js : sans JS, ou si
   GSAP ne se charge pas, le contenu reste visible.
   -------------------------------------------------------------------------- */
html.gsap-ready .cms-19 .lp-af .af-reveal {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.gsap-ready .cms-19 .lp-af .af-reveal {
    opacity: 1;
  }
}
/* --------------------------------------------------------------------------
   6. Barre collante
   Elle se cale SOUS le header du shop, pas en haut de la fenêtre : d'où le
   `top` calculé sur --header-top-height plutôt que 0 comme dans la maquette.
   -------------------------------------------------------------------------- */
.cms-19 .lp-af .af-bar {
  position: sticky;
  top: calc(var(--header-top-height) + 47px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 9px clamp(20px, 4vw, 28px);
  background: var(--af-ink);
  color: #fff;
}
.cms-19 .lp-af .af-mark {
  font-family: Gotham Rounded, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-decoration: none;
  opacity: 0;
  display: none;
}
.cms-19 .lp-af .af-mark i {
  font-style: normal;
  color: var(--af-orange);
}
.cms-19 .lp-af .af-bar__cd {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cms-19 .lp-af .af-bar__cd b {
  color: var(--af-amber);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */
.cms-19 .lp-af .af-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 15px 30px;
  border: 2px solid var(--af-orange);
  border-radius: 999px;
  background: var(--af-orange);
  color: #ffffff;
  font-family: Gotham Rounded, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.16s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.16s cubic-bezier(0.23, 1, 0.32, 1), transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.cms-19 .lp-af .af-btn:hover, .cms-19 .lp-af .af-btn:focus-visible {
  background: var(--af-orange-dk);
  border-color: var(--af-orange-dk);
  color: #fff;
  transform: translateY(-2px);
}
.cms-19 .lp-af .af-btn--sm {
  padding: 9px 20px;
  font-size: 18px;
}
.cms-19 .lp-af .af-btn--line {
  background: transparent;
  border-color: var(--af-steel-2);
  color: var(--af-ink);
}
.cms-19 .lp-af .af-btn--line:hover, .cms-19 .lp-af .af-btn--line:focus-visible {
  background: var(--af-ink);
  border-color: var(--af-ink);
  color: #fff;
}
.cms-19 .lp-af .af-btn--pale {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.cms-19 .lp-af .af-btn--pale:hover, .cms-19 .lp-af .af-btn--pale:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--af-ink);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.cms-19 .lp-af .af-hero {
  padding: 48px 0;
  position: relative;
  margin-bottom: 64px;
}
.cms-19 .lp-af .af-hero::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  background: url("https://auto-festival.netlify.app/images/hero-bg.jpg");
  height: 100%;
  background-size: cover;
  background-image: radial-gradient(125% 105% at 50% 48%, rgba(11, 32, 25, 0.7) 0%, rgba(11, 32, 25, 0.66) 42%, rgba(11, 32, 25, 0.44) 72%, rgba(11, 32, 25, 0.32) 100%), linear-gradient(180deg, rgba(11, 32, 25, 0.58) 0%, rgba(11, 32, 25, 0) 18%, rgba(11, 32, 25, 0) 76%, rgba(11, 32, 25, 0.62) 100%), url(https://auto-festival.netlify.app/images/hero-bg.jpg);
  background-size: cover, cover, cover;
  background-position: center, center, center 42%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.cms-19 .lp-af .af-hero .af-eyebrow {
  margin-bottom: 22px;
}
.cms-19 .lp-af .af-hero__title {
  max-width: 16em;
  margin-bottom: 24px;
  font-size: clamp(36px, 5.4vw, 64px);
  font-weight: 700;
  margin-top: 0;
  color: white;
}
.cms-19 .lp-af .af-hero__title em {
  font-style: normal;
  color: var(--af-orange);
}
.cms-19 .lp-af .af-hero__lead {
  max-width: 44em;
  margin-bottom: 34px !important;
  font-size: clamp(17px, 1.5vw, 19.5px);
  color: white;
}
.cms-19 .lp-af .af-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cms-19 .lp-af .af-acts .af-btn--line {
  color: white;
}
.cms-19 .lp-af .af-acts__note {
  width: 100%;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--af-ink-3);
  color: white;
  z-index: 10;
}

/* --------------------------------------------------------------------------
   9. Escalier — les trois temps de l'opération
   Les trois cartes sont alignées sur leur base et décalées vers le haut :
   c'est ce décalage qui raconte la montée en puissance.
   -------------------------------------------------------------------------- */
.cms-19 .lp-af .af-ladder {
  padding: clamp(58px, 7vw, 72px) 0 clamp(64px, 8vw, 80px);
  background: var(--af-paper);
}
.cms-19 .lp-af .af-ladder__title {
  max-width: 22em;
  margin-bottom: 12px;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  margin-top: 0px;
}
.cms-19 .lp-af .af-ladder__sub {
  max-width: 46em;
  margin-bottom: clamp(38px, 5vw, 52px);
  margin-bottom: 52px !important;
}
.cms-19 .lp-af .af-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
}
.cms-19 .lp-af .af-step {
  position: relative;
  padding: 30px 28px;
  border: 1px solid var(--af-steel-2);
  border-radius: var(--af-radius-sm);
  background: var(--af-steel);
}
.cms-19 .lp-af .af-step__when {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--af-ink-3);
}
.cms-19 .lp-af .af-step__title {
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
  margin-top: 0px;
}
.cms-19 .lp-af .af-step__text {
  font-size: 14.5px;
  color: var(--af-ink-2);
}
.cms-19 .lp-af .af-step__num {
  display: block;
  margin: 4px 0 8px;
  font-size: clamp(40px, 5.6vw, 66px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--af-ink);
  font-variant-numeric: tabular-nums;
}
.cms-19 .lp-af .af-step__detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--af-steel-2);
  font-size: 13.5px;
  color: var(--af-ink-3);
}
.cms-19 .lp-af .af-step--1 {
  padding-bottom: 28px;
}
.cms-19 .lp-af .af-step--2 {
  padding-top: 44px;
}
.cms-19 .lp-af .af-step--3 {
  padding-top: 60px;
  border-color: var(--af-orange);
  background: var(--af-orange);
}
.cms-19 .lp-af .af-step--3 .af-step__when {
  color: rgba(255, 255, 255, 0.78);
}
.cms-19 .lp-af .af-step--3 .af-step__title,
.cms-19 .lp-af .af-step--3 .af-step__num {
  color: #fff;
}
.cms-19 .lp-af .af-step--3 .af-step__text {
  color: rgba(255, 255, 255, 0.92);
}
.cms-19 .lp-af .af-step--3 .af-step__detail {
  border-top-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}
.cms-19 .lp-af .af-ladder__caption {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--af-ink-3);
}

/* --------------------------------------------------------------------------
   10. Phases — bloc texte + récapitulatif chiffré
   -------------------------------------------------------------------------- */
.cms-19 .lp-af {
  /* ---- Récapitulatif chiffré ---- */
  /* ---- Liste des services Move+ ---- */
  /* ---- La date, en grand ---- */
  /* ---- Les jours suivants ---- */
}
.cms-19 .lp-af .af-phase {
  padding: var(--af-section-y) 0;
}
.cms-19 .lp-af .af-phase--alt {
  background: var(--af-paper);
}
.cms-19 .lp-af .af-phase--alt .af-tally {
  background: var(--af-steel);
}
.cms-19 .lp-af .af-phase__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 56px);
  align-items: start;
}
.cms-19 .lp-af .af-phase .af-eyebrow {
  margin-bottom: 18px;
}
.cms-19 .lp-af .af-phase__title {
  margin-bottom: 20px;
  font-size: clamp(27px, 3.4vw, 42px);
  font-weight: 700;
  margin-top: 0;
}
.cms-19 .lp-af .af-phase__text {
  margin-bottom: 16px !important;
  font-size: 16.5px;
}
.cms-19 .lp-af .af-strong {
  font-weight: 500;
  color: var(--af-ink);
}
.cms-19 .lp-af .af-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cms-19 .lp-af .af-tally {
  padding: 30px 32px;
  border: 1px solid var(--af-steel-2);
  border-radius: var(--af-radius-sm);
  background: var(--af-steel);
  background: white;
  align-self: start;
  position: sticky;
  top: 208px;
}
.cms-19 .lp-af .af-tally__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  font-size: 15.5px;
}
.cms-19 .lp-af .af-tally__row + .af-tally__row {
  border-top: 1px solid var(--af-steel-2);
}
.cms-19 .lp-af .af-tally__row b {
  white-space: nowrap;
  font-weight: 600;
  color: var(--af-ink);
}
.cms-19 .lp-af .af-tally__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 2px solid var(--af-orange);
}
.cms-19 .lp-af .af-tally__total span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--af-ink-3);
}
.cms-19 .lp-af .af-tally__total b {
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--af-ink);
  font-variant-numeric: tabular-nums;
}
.cms-19 .lp-af .af-tally--hot .af-tally__total b {
  color: var(--af-orange);
}
.cms-19 .lp-af .af-pledge {
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: var(--af-radius-sm);
  background: var(--af-yellow);
  font-size: 17px;
  font-weight: 500;
  color: var(--af-pledge-ink);
}
.cms-19 .lp-af .af-mp-list {
  margin: 6px 0 26px !important;
}
.cms-19 .lp-af .af-mp-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0 !important;
  border-bottom: 1px solid var(--af-steel-2);
}
.cms-19 .lp-af .af-mp-list li:first-child {
  border-top: 1px solid var(--af-steel-2);
}
.cms-19 .lp-af .af-mp-list b {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--af-ink);
}
.cms-19 .lp-af .af-mp-list i {
  margin-left: auto;
  font-style: normal;
  font-size: 14.5px;
  white-space: nowrap;
  color: var(--af-ink-3);
}
.cms-19 .lp-af .af-mp-tick {
  flex: 0 0 22px;
  align-self: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--af-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
.cms-19 .lp-af .af-bigday {
  display: flex;
  align-items: end;
  gap: 18px;
  margin: 6px 0 20px;
}
.cms-19 .lp-af .af-bigday__num {
  font-size: clamp(76px, 10vw, 124px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.055em;
  color: var(--af-orange);
  font-variant-numeric: tabular-nums;
}
.cms-19 .lp-af .af-bigday__txt {
  display: flex;
  flex-direction: column;
  font-size: clamp(17px, 1.9vw, 23px);
  font-weight: 500;
  line-height: 1.2;
  text-transform: lowercase;
  color: var(--af-ink-3);
}
.cms-19 .lp-af .af-bigday__txt b {
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--af-ink);
}
.cms-19 .lp-af .af-sep {
  height: 1px;
  margin: 30px 0 0px !important;
  border: 0;
  background: var(--af-steel-2);
}
.cms-19 .lp-af .af-daylist {
  margin: 0 0 28px !important;
}
.cms-19 .lp-af .af-daylist li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0 !important;
}
.cms-19 .lp-af .af-daylist li + li {
  border-top: 1px solid var(--af-steel-2);
}
.cms-19 .lp-af .af-daylist__chip {
  display: flex;
  flex: 0 0 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 58px;
  border-radius: var(--af-radius-sm);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cms-19 .lp-af .af-daylist__chip b {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.82;
}
.cms-19 .lp-af .af-daylist__txt {
  font-size: 15px;
  line-height: 1.5;
  color: var(--af-ink-3);
}
.cms-19 .lp-af .af-daylist__txt strong {
  display: block;
  margin-bottom: 1px;
  font-size: 16px;
  font-weight: 700;
  color: var(--af-ink);
}
.cms-19 .lp-af .af-daylist__item--on .af-daylist__chip {
  background: var(--af-orange);
  color: #fff;
}
.cms-19 .lp-af .af-daylist__item--off .af-daylist__chip {
  background: var(--af-steel-2);
  color: var(--af-ink-3);
}
.cms-19 .lp-af .af-daylist__item--off .af-daylist__txt strong {
  color: var(--af-ink-2);
}

/* --------------------------------------------------------------------------
   11. Festival — la section spectacle
   Empilement, du fond vers l'avant :
     .af-fest            fond vert, isolation:isolate (contient les blend modes)
     .af-fest__photo     la photo, en fondu
     .af-fest__fx        faisceaux + halos, injectés par action.js
     .af-wrap            le contenu
   -------------------------------------------------------------------------- */
.cms-19 .lp-af {
  /* ---- Grille programme ---- */
  /* ------------------------------------------------------------------
     Effets lumineux
     Le calque .af-fest__fx et ses enfants sont créés par action.js : le
     CMS reste propre, et rien ne s'affiche si les animations sont
     désactivées (prefers-reduced-motion) ou si GSAP ne se charge pas.

     Le calque entier est en mix-blend-mode: screen, et l'isolation:isolate
     de .af-fest empêche cet éclaircissement de déborder sur le reste de
     la page. Seuls des transform et des opacity sont animés : les blur(),
     coûteux, ne sont calculés qu'une fois.
     ------------------------------------------------------------------ */
}
.cms-19 .lp-af .af-fest {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 9vw, 96px) 0;
  background: var(--af-forest);
  color: var(--af-forest-text);
}
.cms-19 .lp-af .af-fest__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/img/cms/pages/auto-festival/hero-bg.jpg") center 45%/cover no-repeat;
  opacity: 0.26;
}
.cms-19 .lp-af .af-fest .af-wrap {
  position: relative;
  z-index: 3;
}
.cms-19 .lp-af .af-fest__lockup {
  display: block;
  width: clamp(280px, 26vw, 375px);
  height: auto;
  margin-bottom: 28px;
  filter: drop-shadow(0 0 0 rgba(255, 188, 80, 0));
}
.cms-19 .lp-af .af-fest__title {
  max-width: 20em;
  margin-bottom: 18px;
  font-size: clamp(27px, 3.4vw, 42px);
  font-weight: 700;
  color: #fff;
}
.cms-19 .lp-af .af-fest__lead {
  max-width: 40em;
  margin-bottom: 32px !important;
  font-size: 17.5px;
}
.cms-19 .lp-af .af-prog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}
.cms-19 .lp-af .af-prog__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  border-radius: var(--af-radius-sm);
  background: var(--af-forest-2);
  box-shadow: inset 0 0 0 1px rgba(255, 188, 80, 0.12);
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}
.cms-19 .lp-af .af-prog__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.09) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.cms-19 .lp-af .af-prog__card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(255, 188, 80, 0.4), 0 10px 26px rgba(0, 0, 0, 0.25);
}
.cms-19 .lp-af .af-prog__card:hover::after {
  transform: translateX(110%);
}
.cms-19 .lp-af .af-prog__k {
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--af-amber);
}
.cms-19 .lp-af .af-prog__v {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.cms-19 .lp-af .af-prog__text {
  margin-top: auto;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--af-forest-text-2);
}
.cms-19 .lp-af .af-fest__fx {
  position: absolute;
  inset: -10% -5%;
  z-index: 1;
  pointer-events: none;
  contain: layout paint style;
  mix-blend-mode: screen;
}
.cms-19 .lp-af .af-fest__beam {
  position: absolute;
  top: -12%;
  left: 50%;
  width: clamp(170px, 22vw, 300px);
  height: 145%;
  transform-origin: 50% 0;
  clip-path: polygon(45% 0%, 55% 0%, 100% 100%, 0% 100%);
  filter: blur(8px);
  will-change: transform;
}
.cms-19 .lp-af .af-fest__beam--1 {
  background: linear-gradient(to bottom, rgba(255, 109, 58, 0.55) 0%, rgba(255, 109, 58, 0.16) 45%, rgba(255, 109, 58, 0) 85%);
}
.cms-19 .lp-af .af-fest__beam--2 {
  background: linear-gradient(to bottom, rgba(255, 188, 80, 0.5) 0%, rgba(255, 188, 80, 0.14) 45%, rgba(255, 188, 80, 0) 85%);
}
.cms-19 .lp-af .af-fest__beam--3 {
  background: linear-gradient(to bottom, rgba(79, 195, 163, 0.5) 0%, rgba(79, 195, 163, 0.14) 45%, rgba(79, 195, 163, 0) 85%);
}
.cms-19 .lp-af .af-fest__beam--4 {
  background: linear-gradient(to bottom, rgba(255, 109, 58, 0.3) 0%, rgba(255, 109, 58, 0.09) 45%, rgba(255, 109, 58, 0) 85%);
}
.cms-19 .lp-af .af-fest__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  will-change: transform, opacity;
}
.cms-19 .lp-af .af-fest__orb--1 {
  top: 4%;
  left: 6%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(255, 109, 58, 0.5) 0%, rgba(255, 109, 58, 0) 70%);
}
.cms-19 .lp-af .af-fest__orb--2 {
  top: 34%;
  right: 4%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 188, 80, 0.42) 0%, rgba(255, 188, 80, 0) 70%);
}
.cms-19 .lp-af .af-fest__orb--3 {
  bottom: -6%;
  left: 38%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(79, 195, 163, 0.4) 0%, rgba(79, 195, 163, 0) 70%);
}
.cms-19 .lp-af .af-fest__haze {
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.07) 50%, transparent 100%);
  will-change: transform;
}
.cms-19 .lp-af .af-fest--lit .af-fest__lockup {
  filter: drop-shadow(0 0 calc(var(--af-glow, 0) * 34px) rgba(var(--af-amber-rgb), calc(var(--af-glow, 0) * 0.55))) drop-shadow(0 6px 22px rgba(0, 0, 0, 0.4));
}

/* --------------------------------------------------------------------------
   12. Ambassadeurs
   -------------------------------------------------------------------------- */
.cms-19 .lp-af .af-amb {
  padding: var(--af-section-y) 0;
}
.cms-19 .lp-af .af-amb__title {
  margin-bottom: 14px;
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 700;
  margin-top: 0px;
}
.cms-19 .lp-af .af-amb__sub {
  max-width: 44em;
  margin-bottom: clamp(34px, 4.5vw, 44px);
  margin-bottom: 52px !important;
}
.cms-19 .lp-af .af-amb__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.cms-19 .lp-af .af-amb-card {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--af-radius);
  background: var(--af-paper);
}
.cms-19 .lp-af .af-amb-card__img {
  overflow: hidden;
  line-height: 0;
  background: var(--af-steel-2);
}
.cms-19 .lp-af .af-amb-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cms-19 .lp-af .af-amb-card__body {
  padding: 26px 28px;
}
.cms-19 .lp-af .af-amb-card__when {
  display: inline-block;
  margin-bottom: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--af-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.cms-19 .lp-af .af-amb-card__name {
  margin-bottom: 4px;
  font-size: 21px;
  font-weight: 700;
  margin-top: 0px;
}
.cms-19 .lp-af .af-amb-card__role {
  margin-bottom: 15px !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--af-orange);
}
.cms-19 .lp-af .af-amb-card__list li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 22px;
  font-size: 15px;
}
.cms-19 .lp-af .af-amb-card__list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--af-steel-2);
}

/* --------------------------------------------------------------------------
   13. Réseau — les autres concessions
   -------------------------------------------------------------------------- */
.cms-19 .lp-af .af-everywhere {
  padding: clamp(58px, 7vw, 72px) 0;
  background: var(--af-paper);
}
.cms-19 .lp-af .af-everywhere__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 56px);
  align-items: center;
}
.cms-19 .lp-af .af-everywhere__title {
  margin-bottom: 18px;
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 700;
  margin-top: 0px;
}
.cms-19 .lp-af .af-towns {
  margin-top: 22px;
  font-size: 14.5px;
  color: var(--af-ink-3);
}
.cms-19 .lp-af .af-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-self: end;
}
.cms-19 .lp-af .af-perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 20px 24px;
  border-radius: var(--af-radius-sm);
  background: var(--af-steel);
  text-align: center;
}
.cms-19 .lp-af .af-perk__ico {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cms-19 .lp-af .af-perk__ico--music {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23FF6D3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22.5V8.5l12-2.5v14'/%3E%3Ccircle cx='8.5' cy='23' r='3.6'/%3E%3Ccircle cx='20.5' cy='20' r='3.6'/%3E%3C/svg%3E");
}
.cms-19 .lp-af .af-perk__ico--fest {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23FF6D3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 26l7-16 9 9z'/%3E%3Cpath d='M20 6.5v3M25.5 9l-2 2M26.5 15.5h-3'/%3E%3C/svg%3E");
}
.cms-19 .lp-af .af-perk__ico--food {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23FF6D3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12h9l-1.3 13.2A2 2 0 0 1 13.7 27h-2.4a2 2 0 0 1-2-1.8z'/%3E%3Cpath d='M6.5 12h12M15 12l2.2-6'/%3E%3Cpath d='M23 27V15.5M23 15.5c2 0 3.5-1.6 3.5-3.5S25 8.5 23 8.5'/%3E%3C/svg%3E");
}
.cms-19 .lp-af .af-perk__v {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--af-ink);
}
.cms-19 .lp-af .af-perk__text {
  margin-top: 2px;
  font-size: 14.5px;
  color: var(--af-ink-3);
}

/* --------------------------------------------------------------------------
   14. Clôture — dernier appel
   -------------------------------------------------------------------------- */
.cms-19 .lp-af .af-close {
  margin: 34px auto 0;
  padding: clamp(64px, 8vw, 80px) 0;
  background: var(--af-ink);
  position: relative;
  overflow: hidden;
}
.cms-19 .lp-af .af-close::after {
  position: absolute;
  bottom: -2.5%;
  right: -7.5%;
  content: "";
  height: auto;
  aspect-ratio: 1;
  width: 30%;
  transform: rotate(35deg);
  opacity: 0.25;
  background: url("../img/construct/sigle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
}
.cms-19 .lp-af .af-close .af-acts {
  justify-content: center;
}
.cms-19 .lp-af .af-close__title {
  max-width: 22em;
  margin-bottom: 18px;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  color: #fff;
  margin-top: 0px;
  margin: 0 auto;
  text-align: center;
}
.cms-19 .lp-af .af-close__text {
  max-width: 40em;
  margin-bottom: 14px;
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
}
.cms-19 .lp-af .af-cd-big {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin: 48px 0 48px;
  justify-content: center;
}
.cms-19 .lp-af .af-cd-big__cell {
  min-width: 74px;
}
.cms-19 .lp-af .af-cd-big__n {
  font-size: clamp(42px, 5.4vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cms-19 .lp-af .af-cd-big__u {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.cms-19 .lp-af .af-cd-big__over {
  margin: 34px 0 36px;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--af-amber);
}

/* --------------------------------------------------------------------------
   15. Pied de page de la landing
   <footer> est supprimé par l'éditeur : c'est un <div class="af-footer">.
   -------------------------------------------------------------------------- */
.cms-19 .lp-af .af-footer {
  padding: 34px 0;
  background: var(--af-steel);
  font-size: 13px;
  color: var(--af-ink-3);
}
.cms-19 .lp-af .af-footer__row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.cms-19 .lp-af .af-footer a {
  color: var(--af-ink-2);
  text-decoration: none;
}
.cms-19 .lp-af .af-footer a:hover, .cms-19 .lp-af .af-footer a:focus-visible {
  color: var(--af-orange);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   16. Responsive
   Les paliers de la maquette sont conservés tels quels : ils tombent entre
   les paliers du thème (md ≈ 1020px, sm ≈ 750px) et correspondent à des
   ruptures de contenu précises.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .cms-19 .lp-af .af-bar .af-mark {
    display: none;
  }
  .cms-19 .lp-af .af-hero {
    margin-bottom: 0px;
  }
  .cms-19 .lp-af .af-ladder,
  .cms-19 .lp-af .af-phase--alt,
  .cms-19 .lp-af .af-everywhere,
  .cms-19 .lp-af .af-fest,
  .cms-19 .lp-af .af-close {
    border-radius: 0;
  }
  .cms-19 .lp-af .af-close {
    margin-top: 0;
  }
}
@media (max-width: 900px) {
  .cms-19 .lp-af .af-nowrap {
    white-space: normal;
  }
  .cms-19 .lp-af .af-phase__grid,
  .cms-19 .lp-af .af-everywhere__grid {
    grid-template-columns: 1fr;
  }
  .cms-19 .lp-af .af-amb__grid {
    grid-template-columns: 1fr;
  }
  .cms-19 .lp-af .af-steps {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .cms-19 .lp-af .af-step--2,
  .cms-19 .lp-af .af-step--3 {
    padding-top: 30px;
  }
  .cms-19 .lp-af .af-ladder,
  .cms-19 .lp-af .af-phase--alt,
  .cms-19 .lp-af .af-everywhere,
  .cms-19 .lp-af .af-fest,
  .cms-19 .lp-af .af-close {
    border-radius: 0;
  }
}
@media (max-width: 820px) {
  .cms-19 .lp-af .af-prog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .cms-19 .lp-af .af-perks {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 679px) {
  .cms-19 .lp-af .af-bar {
    top: calc(var(--header-top-height) + 62px);
  }
}
@media (max-width: 560px) {
  .cms-19 .lp-af .af-bar {
    padding: 8px 12px;
    justify-content: end;
  }
  .cms-19 .lp-af .af-eyebrow--pill {
    padding: 9px 16px 10px 10px;
  }
  .cms-19 .lp-af .af-eyebrow--pill b {
    margin-top: 1px;
  }
  .cms-19 .lp-af .af-bar__cd {
    display: none;
  }
  .cms-19 .lp-af .af-hero {
    padding: 56px 0 50px;
  }
  .cms-19 .lp-af .af-ladder,
  .cms-19 .lp-af .af-phase,
  .cms-19 .lp-af .af-amb,
  .cms-19 .lp-af .af-everywhere,
  .cms-19 .lp-af .af-close {
    padding-top: 58px;
    padding-bottom: 58px;
    margin-top: 0;
  }
  .cms-19 .lp-af .af-amb-card {
    grid-template-columns: 1fr;
  }
  .cms-19 .lp-af .af-amb-card:last-of-type-card__img img {
    object-position: center 40%;
  }
  .cms-19 .lp-af .af-amb-card__img img {
    height: 250px;
    object-position: center 55%;
    margin-bottom: 0;
  }
  .cms-19 .lp-af .af-acts .af-btn {
    width: 100%;
  }
}
@media (max-width: 540px) {
  .cms-19 .lp-af .af-prog {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .cms-19 .lp-af .af-bigday {
    gap: 14px;
  }
  .cms-19 .lp-af .af-daylist li {
    gap: 13px;
  }
  .cms-19 .lp-af .af-mp-list li {
    flex-wrap: wrap;
  }
  .cms-19 .lp-af .af-mp-list i {
    width: 100%;
    margin-left: 36px;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   17. Animations réduites
   Les FX du festival ne sont pas injectés du tout dans ce cas (action.js
   sort avant) : il ne reste que les transitions CSS à neutraliser.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cms-19 .lp-af .af-btn,
  .cms-19 .lp-af .af-prog__card,
  .cms-19 .lp-af .af-prog__card::after,
  .cms-19 .lp-af .af-footer a {
    transition: none;
  }
  .cms-19 .lp-af .af-btn:hover,
  .cms-19 .lp-af .af-prog__card:hover {
    transform: none;
  }
}

/*# sourceMappingURL=action.css.map */