/**
 * 2026 DMConcept
 *
 * NOTICE OF LICENSE
 *
 * This file is licenced under the Software License Agreement.
 * With the purchase or the installation of the software in your application
 * you accept the licence agreement
 *
 * @author    DMConcept <support@dmconcept.fr>
 * @copyright 2026 DMConcept
 * @license   Commercial license (You can not resell or redistribute this software.)
 *
 */

/* Mise en page produit : CYUP prend toute la largeur de la page. Le bloc image
   (product__left) est masque - son contenu est deja retire cote product.tpl via
   $configuratorService, on enleve ici le bloc lui-meme (plus de colonne reservee). */
.page-product .product__container {
    display: block;
}

.page-product .product__left {
    display: none;
}

.page-product .product__right {
    width: 100%;
}

/* A l'interieur du configurateur : panier a gauche (40%), etapes CYUP a droite (60%) */
#configurator .cyup--app {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

/* Hauteur du panier calculee en JS par CYUP : peut se figer en retard sur le contenu reel
   (nouvelle ligne du recap, etc.) et faire chevaucher les blocs suivants. On la neutralise
   pour laisser le panier s'ajuster naturellement au contenu (donc toujours >= au contenu,
   l'overflow:hidden ci-dessous ne peut alors plus rogner quoi que ce soit). */
#configurator .cyup--cart {
    order: -1;
    position: static;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    height: auto !important;
    overflow: hidden;
    gap: 0;
    border: 1px solid rgb(217, 222, 226);
    border-radius: var(--cyup-radius-btn);
}

/* Mobile (< md du theme, 768px) : une seule colonne, bloc de configuration en haut puis recap
   en dessous (inverse du desktop, ou .cyup--cart a order:-1). Doit rester APRES les regles de
   base de .cyup--app et .cyup--cart : meme specificite, c'est l'ordre dans le fichier qui tranche. */
@media (max-width: 767.98px) {
    #configurator .cyup--app {
        grid-template-columns: minmax(0, 1fr);
    }

    #configurator .cyup--cart {
        order: 2;
    }
}

/* Panier gauche : items du panier avant le recap info (par defaut CYUP fait l'inverse).
   items + info sont colles (bordure commune sur .cyup--cart, plus de bordure/radius propres). */
#configurator .cyup--cart__items {
    order: 1;
    max-height: none;
    overflow: visible;
    flex-shrink: 0;
    min-height: min-content;
    padding: 0;
    border: none;
    border-radius: 0;
}

/* Titre "Votre configuration" du recap panier : bandeau noir plein largeur, texte blanc
   (marge/padding gerees ici, .cyup--cart__items n'a plus de padding) */
#configurator .cyup--cart__items__recap__title {
    width: auto;
    margin: 1rem;
    padding: 0.875rem 1.5rem;
    background-color: var(--cyup-color-primary);
    border-radius: var(--cyup-radius-btn);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

/* Liste recap "Circuit / Mode / Membre GTRO / Option" : label gris a gauche, valeur noire grasse a droite
   (marge/padding gerees ici, .cyup--cart__items n'a plus de padding) */
#configurator .cyup--cart__items__list {
    list-style: none;
    margin: 0 1rem 1rem;
    padding: 0;
}

#configurator .cyup--cart__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#configurator .cyup--cart__item:last-child {
    border-bottom: none;
}

#configurator .cyup--cart__item__step__label a {
    color: #9a9a9a;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
}

#configurator .cyup--cart__item__entries {
    text-align: right;
}

/* Le span "Reponse X : " n'est redondant que lorsque la vraie valeur est dans un
   .cyup--cart__item__option a cote (etape circuit). Sur d'autres etapes (ex. date), CYUP
   met la valeur reelle DANS ce span - il ne faut alors pas le masquer. */
#configurator .cyup--cart__item__entry:has(.cyup--cart__item__option) > span {
    display: none;
}

#configurator .cyup--cart__item__entry > span {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--cyup-color-primary);
    text-transform: uppercase;
}

/* Plusieurs options selectionnees sur une meme etape : une ligne par option (par defaut
   CYUP les met en row et elles se collent les unes aux autres) */
#configurator .cyup--cart__item__step__options {
    flex-direction: column;
    gap: 0.25rem;
}

/* Bandeau d'info/promo (ex. "-3% pour la seconde voiture...") : fond orange clair, bordure,
   icone + texte alignes sur la meme ligne (CYUP le laisse par defaut a width:16px, ce qui
   casse completement l'alignement icone/texte) */
#configurator .cyup_description {
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    background-color: #fdf3ed;
    border: 1px solid rgba(233, 102, 29, 0.27);
    box-sizing: border-box;
}

#configurator .cyup_description_icon {
    background-color: var(--cyup-color-secondary);
}

#configurator .cyup_description_content {
    flex: 1 1 auto;
    width: auto;
}

#configurator .cyup--cart__item__option {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--cyup-color-primary);
    text-transform: uppercase;
    text-align: right;
}

/* Etapes de type "option" (checkbox/quantite) : step (label+options) prend toute la ligne,
   label a gauche, valeur a droite - meme resultat que le format "entries" des etapes radio */
#configurator .cyup--cart__item__step {
    flex: 1;
    justify-content: space-between;
}

#configurator .cyup--cart__items__list .cyup--displayPrice {
    display: none;
}

#configurator .cyup--cart__info {
    order: 2;
    flex-shrink: 0;
    min-height: min-content;
    border: none;
    border-radius: 0;
}

/* Titre "Roulage libre" duplique dans le panier info : deja affiche dans le recap au-dessus */
#configurator .cyup--cart__info__title {
    display: none;
}

.cyup-product-variants {
    margin-bottom: 1rem;
}

#configurator {
    background-color: unset;
}

#configurator-loader-container {
    overflow-x: hidden;
}

#configurator-loader-wrapper {
    height: 300px;
    width: 100%;
    display: grid;
    place-items: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 2px 2px 10px 0 #bfc6cc;
    margin-block-end: 20px;
    padding: 0 0 10px;
}

#configurator-loader-inside-wrapper {
    color: #566ffb;
    font-size: 1.3rem;
    line-height: 1.8rem;
    text-align: center;
}

#configurator-loader {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-block;
    border-top: 5px solid #222542;
    border-right: 5px solid transparent;
    box-sizing: border-box;
    animation: configurator-loader-rotation 1s linear infinite;
}

#configurator-loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border-left: 5px solid #566ffb;
    border-bottom: 5px solid transparent;
    animation: configurator-loader-rotation 0.5s linear infinite reverse;
}

@keyframes configurator-loader-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#configurator.no-prices .cyup--cart__info__total,
#configurator.no-prices .cyup--displayPrice,
body:not(.update-cyup-cart) #configurator.no-prices .cyup--addCart__button:not(.add-to-quote) {
    display: none;
}

#configurator.no-prices .cyup--addCart__button.add-to-quote {
    margin-top: 0 !important;
}

/**
 * Refonte configurateur - Etape "Choix du circuit"
 * Variables de marque GTRO
 */
#configurator {
    --cyup-color-primary: #000000;
    --cyup-color-secondary: #e9661d;
    --cyup-color-step-bg: #f4f4f4;
    --cyup-color-tile-border: var(--cyup-color-primary);
    --cyup-radius-step: 16px;
    --cyup-radius-tile: 16px;
    --cyup-radius-btn: 8px;

    /* CYUP expose ses propres variables de theme (definies sur :root par static.cyup.fr/css/cyup.css) :
       tout le bleu par defaut (agenda, badges, cellules/puces selectionnees, etc.) vient de
       --cyup-primary-main. La surcharger ici couvre tout d'un coup, plutot que de cibler
       chaque composant CYUP individuellement. */
    --cyup-primary-main: var(--cyup-color-secondary);
    --cyup-primary-light: #f2a377;
    --cyup-primary-dark: #af4d16;

    /* Meme principe pour la police : CYUP utilise "Roboto" par defaut sur tout son texte
       (boutons, prix, labels...) via --cyup-font-family. Le site utilise Montserrat pour le
       corps de texte (Impact restant reserve aux titres, deja applique via les balises h1-h6
       du theme sur nos propres titres comme .gtro-circuit-recap__title). */
    --cyup-font-family: "Montserrat", sans-serif;
}

/* Conteneur d'etape (etape active en "step-by-step", et etapes en liste) */
#configurator .cyup--sbs__focus,
#configurator .cyup--step {
    background-color: var(--cyup-color-step-bg);
    border-radius: var(--cyup-radius-step);
}

/* L'etape en cours (unique visible en mode step-by-step) est mise en avant */
#configurator .cyup--sbs__focus {
    border: 1px solid var(--cyup-color-secondary);
}

#configurator .cyup--step {
    border: none;
}

#configurator .step_display_none {
    display: none;
}

/* Barre d'avancement globale */
#configurator .cyup--sbs__progress {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
}

/* Barre d'origine (simple remplissage) remplacee visuellement par les bulles numerotees
   generees en JS (voir front.js) - gardee en DOM (CYUP la maintient a jour) mais masquee. */
#configurator .cyup--sbs__progress__bar {
    display: none;
}

/* Bulles numerotees "1 - 2 - 3 - 4" injectees par front.js, en lieu et place de la barre */
#configurator .gtro-step-bubbles {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

#configurator .gtro-step-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border: 2px solid #e5e5e5;
    border-radius: 50%;
    background-color: #fff;
    color: #9a9a9a;
    font-size: 0.75rem;
    font-weight: 700;
}

#configurator .gtro-step-bubble--done {
    background-color: var(--cyup-color-secondary);
    border-color: var(--cyup-color-secondary);
    color: #fff;
    font-size: 1.125rem;
}

#configurator .gtro-step-bubble--current {
    border-color: var(--cyup-color-secondary);
    color: var(--cyup-color-secondary);
}

#configurator .gtro-step-bubble-line {
    flex: 1 1 auto;
    min-width: 12px;
    height: 2px;
    background-color: #e5e5e5;
}

#configurator .gtro-step-bubble-line--done {
    background-color: var(--cyup-color-secondary);
}

#configurator .cyup--sbs__progress__label {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #9a9a9a;
    text-transform: uppercase;
}

/* Titre d'etape : numero masque, puce chevron + libelle en majuscules */
#configurator .cyup--sbs__focus__number {
    display: none;
}

#configurator .cyup--sbs__focus__header,
#configurator .cyup--step__header__infos {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Pas de prix dans l'en-tete d'etape */
#configurator .cyup--sbs__focus__header .cyup--displayPrice {
    display: none;
}

/* Pastille de prix CYUP : meme theme que le badge de reduction (-20%) du thème */
#configurator .cyup--sbs-collapsed .cyup--displayPrice {
    padding: 0.375rem 1rem;
    font-weight: 600;
    color: var(--cyup-color-secondary);
    background-color: #fff;
    border: 1px solid var(--cyup-color-secondary);
    border-radius: 999px;
}

/* Etape terminee (liste recapitulative) : theme orange a la place du vert par defaut */
#configurator .cyup--sbs-collapsed.cyup--sbs-collapsed--done {
    background-color: rgba(233, 102, 29, 0.08);
    border-color: rgba(233, 102, 29, 0.35);
}

#configurator .cyup--sbs-collapsed__index--done {
    background-color: var(--cyup-color-secondary);
}

#configurator .cyup--sbs__focus__label,
#configurator .cyup--step__header__infos__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cyup-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

#configurator .cyup--sbs__focus__label::before,
#configurator .cyup--step__header__infos__title::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 12px;
    margin-right: 10px;
    vertical-align: middle;
    background-color: var(--cyup-color-secondary);
    mask: url('/themes/gtro/assets/img/icon-chevron-gtro.svg') no-repeat center / contain;
    -webkit-mask: url('/themes/gtro/assets/img/icon-chevron-gtro.svg') no-repeat center / contain;
}

#configurator .cyup--step__header__decorative {
    margin-block: 1rem;
    border-color: rgba(0, 0, 0, 0.1);
}

/* Conteneur des choix d'une etape : liste verticale par defaut (radio, agenda...) */
#configurator .options-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Etapes a cartes visuelles (circuit, options) : vignettes de taille fixe (150px),
   le nombre par ligne s'adapte a la largeur disponible (pas fige a 3 ou 4) */
#configurator .step_circuit .options-wrapper,
#configurator :is(.step_option, .step_options) .options-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, 150px);
    gap: 1rem;
}

#configurator .cyup--option__image__label {
    cursor: pointer;
}

#configurator .cyup--option__image__illustration {
    position: relative;
    width: 150px;
    height: 150px;
    padding: 1rem;
    box-sizing: border-box;
    border: 1px solid var(--cyup-color-tile-border);
    border-radius: var(--cyup-radius-tile);
    transition: border-color 0.2s ease;
}

#configurator .cyup--option__image__label:has(.cyup--option__image__input:checked) .cyup--option__image__illustration {
    border: 2px solid var(--cyup-color-secondary);
}

#configurator .cyup--option__image__picture {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
}

/* Option forcee/lecture seule (input disabled, deja imposee) : CYUP grise l'image a 0.5,
   on l'affiche pleine opacite comme les autres */
#configurator .cyup--option__image__input:disabled ~ .cyup--option__image__picture {
    opacity: 1;
}

#configurator .cyup--option__image__description {
    margin-top: 0.75rem;
    text-align: center;
}

#configurator .cyup--option__image__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cyup-color-primary);
    text-transform: uppercase;
}

/* Etape "circuit" : pastille de selection (coche), en coin de vignette comme le badge de prix */
#configurator .step_circuit .cyup--option__image__marked {
    display: none;
    position: absolute;
    top: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    margin: 0;
    background-color: var(--cyup-color-secondary);
    border-radius: 0 var(--cyup-radius-tile) 0 8px;
}

#configurator .step_circuit .cyup--option__image__input:checked ~ .cyup--option__image__marked {
    display: block;
}

#configurator .step_circuit .cyup--option__image__marked::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 60%;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Etape "options" : pas de pastille de coche (la bordure orange suffit, le coin est deja pris par le prix) */
#configurator :is(.step_option, .step_options) .cyup--option__image__marked {
    display: none;
}

/* Etape "options" : badge de prix en coin de vignette (remplace la coche) - uniquement sur la vignette, pas dans le recapitulatif d'etape terminee */
#configurator :is(.step_option, .step_options) .cyup--option__image__illustration .cyup--displayPrice {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: auto;
    left: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background-color: var(--cyup-color-primary);
    border-radius: 0 var(--cyup-radius-tile) 0 8px;
}

#configurator :is(.step_option, .step_options) .cyup--option__image__input:checked ~ .cyup--displayPrice {
    background-color: var(--cyup-color-secondary);
}

/* Etape "options" : le titre prolonge la vignette (meme bloc visuel que l'illustration) ;
   la quantite reste en dehors, sur toute la largeur du bloc (affiche si cochee) */
#configurator :is(.step_option, .step_options) .cyup--option__image__description {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
}

#configurator :is(.step_option, .step_options) .cyup--option__image__illustration {
    border-bottom: none;
    border-radius: var(--cyup-radius-tile) var(--cyup-radius-tile) 0 0;
}

#configurator :is(.step_option, .step_options) .cyup--option__image__label:has(.cyup--option__image__input:checked) .cyup--option__image__illustration {
    border: 2px solid var(--cyup-color-secondary);
    border-bottom: none;
}

#configurator :is(.step_option, .step_options) .cyup--option__image__title {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 90px;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--cyup-color-tile-border);
    border-top: none;
    border-radius: 0 0 var(--cyup-radius-tile) var(--cyup-radius-tile);
    box-sizing: border-box;
}

#configurator :is(.step_option, .step_options) .cyup--option__image__label:has(.cyup--option__image__input:checked) .cyup--option__image__title {
    border: 2px solid var(--cyup-color-secondary);
    border-top: none;
}

/* visibility (et non display) : l'espace du selecteur de qte reste toujours reserve, la
   coche/decoche d'une option ne fait donc plus changer la taille de la vignette. */
#configurator :is(.step_option, .step_options) .cyup--quantity {
    display: flex;
    visibility: hidden;
    order: 2;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
}

/* Le CSS statique CYUP remet du noir (bordure/couleur) au focus : on reimpose le theme */
#configurator .cyup--quantity:focus-within {
    border: none;
    outline: none;
    box-shadow: none;
}

#configurator .cyup--quantity:focus-within .cyup--quantity__btn {
    color: #fff;
    background-color: var(--cyup-color-secondary);
}

#configurator .cyup--quantity:focus-within .cyup--quantity__input {
    color: var(--cyup-color-secondary);
}

#configurator :is(.step_option, .step_options) .cyup--option__image__label:has(.cyup--option__image__input:checked) .cyup--quantity {
    visibility: visible;
}

#configurator :is(.step_option, .step_options) .cyup--quantity__btn {
    width: 32px;
    height: 32px;
    color: #fff;
    background-color: var(--cyup-color-secondary);
    border: none;
    border-radius: var(--cyup-radius-btn);
}

#configurator :is(.step_option, .step_options) .cyup--quantity__input {
    width: 2ch;
    color: var(--cyup-color-secondary);
    font-weight: 700;
    text-align: center;
    background: none;
    border: none;
}

/* Loupe de zoom masquee sur cette etape (non presente sur la maquette) */
#configurator .cyup--zoom {
    display: none;
}

/* Options a choix radio (ex: Etes-vous membre club ?) */
#configurator .cyup--option__radio__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#configurator .cyup--option__radio__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--cyup-color-primary);
    cursor: pointer;
}

#configurator .cyup--option__radio__input {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid var(--cyup-color-primary);
    border-radius: 50%;
}

#configurator .cyup--option__radio__input:checked {
    border-color: var(--cyup-color-secondary);
    background-color: var(--cyup-color-secondary);
}

/* Pastille de prix par choix radio : grisee par defaut, orange pleine si cochee */
#configurator .cyup--option__radio .cyup--displayPrice {
    /* padding: 0.375rem 1rem; */
    font-weight: 600;
    color: #6b6b6b;
    background-color: #d9d9d9;
    border-radius: var(--cyup-radius-btn);
}

#configurator .cyup--option__radio:has(.cyup--option__radio__input:checked) .cyup--displayPrice {
    color: #fff;
    background-color: var(--cyup-color-secondary);
}

/* Pied de carte : separateur puis navigation entre etapes */
#configurator .cyup--sbs__focus__nav {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#configurator .cyup--sbs__focus__nav:has(.cyup--sbs__focus__nav__prev) {
    justify-content: space-between;
}

#configurator .cyup--sbs__focus__nav__prev {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--cyup-radius-btn);
}

#configurator .cyup--sbs__focus__nav__next {
    background-color: var(--cyup-color-secondary);
    border-radius: var(--cyup-radius-btn);
}

/* Mini-recap panier dans l'en-tete d'etape : masque (le panier complet est deja visible a gauche) */
#configurator .cyup--sbs__focus__cart {
    display: none;
}

/* Bouton "Ajouter au panier" CYUP : theme orange, pleine largeur */
#configurator .cyup--addCart {
    width: 100%;
}

#configurator .cyup--addCart__button {
    width: 100%;
    justify-content: center;
    background-color: var(--cyup-color-secondary);
    border-radius: var(--cyup-radius-btn);
}

/* Etape "Choisir sa date" : fond des creneaux suggeres, theme orange clair */
#configurator .cyup--agenda__slots {
    background-color: #fdf3ed;
    border-color: rgba(233, 102, 29, 0.27);
}

/* Etape "Choisir sa date" : le bleu par defaut de l'agenda vient de --cyup-primary-main,
   deja surchargee plus haut. Seul le fond (teinte specifique, non derivee de la variable)
   reste a gerer ici. */
#configurator .cyup--agenda__suggestion-badge {
    background-color: rgba(233, 102, 29, 0.12);
}

/* Bloc recap panier : "TOTAL" en petit gris, prix en gros orange, TTC/pers en gris */
#configurator .cyup--cart__info__total__before::before {
    content: 'Total';
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #9a9a9a;
    text-transform: uppercase;
}

#configurator .cyup--cart__info__total {
    align-self: flex-start;
}

#configurator .cyup--cart__total__amount {
    align-items: flex-start;
    gap: 0.375rem;
    color: var(--cyup-color-secondary);
}

#configurator .cyup--cart__total__amount .cyup--displayPrice__value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--cyup-color-secondary);
}

#configurator .cyup--cart__total__amount .cyup--displayPrice__priceWithoutReduction {
    font-size: 1rem;
    font-weight: 600;
    color: #9a9a9a;
}

#configurator .cyup--cart__total__amount__taxe {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: #9a9a9a;
    text-transform: uppercase;
}

#configurator .cyup--agenda__jump-month:hover:not(.cyup--agenda__jump-month--active) {
    color: var(--cyup-color-secondary);
    border-color: var(--cyup-color-secondary);
}

.cyup--agenda__chip-spots,
.cyup--agenda__chip--selected .cyup--agenda__chip-time,
.cyup--agenda__chip--selected .cyup--agenda__chip-title{
    color: var(--cyup-color-primary);
}
.cyup--agenda__body{
    display: inline;   
}

.cyup--agenda__chip:hover:not(.cyup--agenda__chip--full):not(.cyup--agenda__chip--selected) {
    border-color: var(--cyup-color-secondary);
}

.cyup--agenda__cell--available:hover{
    border-color: var(--cyup-color-secondary);
    color: var(--cyup-color-secondary);
}

/* Bloc recap circuit (contenu dynamique CYUP, cf. maquette "Circuit Nogaro") */
.gtro-circuit-recap {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    /* border-radius: var(--cyup-radius-tile); */
    /* border: 1px solid var(--cyup-color-tile-border); */
}

.gtro-circuit-recap__header {
    padding: 1.5rem 1.5rem 0;
    background-color: var(--cyup-color-step-bg);
}

.gtro-circuit-recap__badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--cyup-color-secondary);
    text-transform: uppercase;
}

.gtro-circuit-recap__badge-line {
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: var(--cyup-color-secondary);
}

.gtro-circuit-recap__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--cyup-color-primary);
    text-transform: uppercase;
}

.gtro-circuit-recap__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1.5rem;
    background-color: var(--cyup-color-step-bg);
}

.gtro-circuit-recap__image img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 200px;
    object-fit: contain;
    transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.5s ease-out;
}

/* Changement de circuit (voir front.js) : la derniere image affichee reste en fond
   (--gtro-prev-image, meme cadre que l'img) tant que la nouvelle n'est pas chargee. Puis les
   deux se croisent : l'ancienne part vers le bas gauche, la nouvelle arrive du haut droite. */
.gtro-circuit-recap__image::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    bottom: 1.5rem;
    left: 50%;
    width: calc(100% - 3rem);
    max-width: 420px;
    background: var(--gtro-prev-image, none) center / contain no-repeat;
    opacity: 0;
    transform: translate(calc(-50% - 80%), 60%);
    transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.7s ease-in;
    pointer-events: none;
}

.gtro-image-pending img {
    opacity: 0;
    transform: translate(80%, -60%);
}

.gtro-image-pending::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .gtro-circuit-recap__image img,
    .gtro-circuit-recap__image::before {
        transition: none;
    }
}

.gtro-circuit-recap__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.gtro-circuit-recap__stat {
    padding: 1.25rem 1.5rem;
}

.gtro-circuit-recap__stat-value {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cyup-color-secondary);
}

.gtro-circuit-recap__stat-unit {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cyup-color-secondary);
}

.gtro-circuit-recap__stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #6b6b6b;
    text-transform: uppercase;
}