.attps-uni-truncated-text {

    .attps-uni-truncated-text__content {
        transition: max-height 0.4s ease-in-out;
        display: block;
        overflow: hidden;

        &.truncated {
            display: -webkit-box;
            -webkit-line-clamp: var(--line-clamp, 4);
            line-clamp: var(--line-clamp, 4);
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;


            &>* {
                padding-top: 0;
                padding-bottom: 0;
                margin-top: 0;
                margin-bottom: 0;
            }
        }
    }

    .attps-uni-truncated-text__toggle {
        margin-top: 0.5rem;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }
}

.no-scroll {
    overflow: hidden;
}

header {
    position: relative;
    z-index: 10;
}

/* Lien « nos magasins » — bloc blocs_uni-stores-link (ex-shortcode [attps_uni_stores_link]) :
   styles à plat, ne dépendent d'aucun parent.

   La carte d'avis qui vivait ici a été remplacée par le bloc « Avis Google ·
   Note et nombre » d'attps-google-reviews-scrapper, qui porte ses propres
   styles — la donnée et son affichage sont désormais du même côté. */
.attps-uni-stores-link {
    background: #E3E3E3;
    color: #000;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attps-uni-stores-link__content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.attps-uni-stores-link .text {
    font-weight: bold;
    line-height: 1.2;
}

/* Le bloc « Lien magasins » (blocs_uni-stores-link) rend un <button> quand le
   clic ne navigue pas (recherche, choix direct) : même boîte que le lien. */
button.attps-uni-stores-link {
    appearance: none;
    border: 0;
    border-radius: 0;
    font: inherit;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

/* Habillage « bouton du site » : l'enveloppe porte le socle du builder et
   centre le bouton — étirer la boîte du bloc ne déforme pas le bouton. */
.attps-uni-stores-link-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Le double libellé d'un bouton « Choisir » : le CSS montre celui qui
   correspond à l'état (is-active posé par stores.js). */
.attps-uni-stores-link__label-active,
.is-active.attps-uni-stores-link--has-active .attps-uni-stores-link__label {
    display: none;
}

.is-active.attps-uni-stores-link--has-active .attps-uni-stores-link__label-active {
    display: inline;
}

.attps-uni-stores-link__sub {
    display: block;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.2;
}

/* Icône seule sous 768px : le texte reste dans le DOM pour les lecteurs
   d'écran, seule sa boîte disparaît. */
@media (max-width: 767.98px) {
    .attps-uni-stores-link--icon-only-sm .text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Affichage selon la sélection de magasin : stores.js pose uni-store-has ou
   uni-store-none sur <html>. Tant qu'aucune des deux n'est là (script pas
   encore passé), l'élément conditionnel reste caché : pas de saut à l'écran. */
html:not(.uni-store-has):not(.uni-store-none) [data-uni-store-show],
html.uni-store-none [data-uni-store-show="chosen"],
html.uni-store-has [data-uni-store-show="none"] {
    display: none !important;
}

/* La liste ancrée (plusieurs magasins visés) : une ligne par magasin, le nom à
   gauche, le numéro ou l'adresse à droite. */
.attps-uni-stores-list,
.attps-uni-stores-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.attps-uni-stores-list {
    min-width: 16rem;
}

/* Un menu déroulant, pas une modale : hauteur plafonnée (la liste défile),
   corps serré. Sur mobile, la feuille basse du bloc Modale reprend la main. */
.attps-uni-stores-list-modal.atb-modal--anchor {
    max-height: min(70vh, 30rem);
}

.attps-uni-stores-list-modal .atb-modal__body {
    padding: 0.5rem;
}

.attps-uni-stores-list-modal .atb-modal__head {
    padding-bottom: 0.25rem;
}

.attps-uni-stores-list__item {
    appearance: none;
    background: none;
    border: 0;
    border-radius: 0.375rem;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    text-align: left;
}

.attps-uni-stores-list__item:hover,
.attps-uni-stores-list__item:focus-visible {
    background: color-mix(in srgb, var(--atb-primary, #0099dd) 10%, transparent);
}

.attps-uni-stores-list__item.is-active {
    color: var(--atb-accent, #e92095);
}

.attps-uni-stores-list__label {
    font-weight: 600;
}

.attps-uni-stores-list__meta {
    font-size: 0.85em;
    color: var(--atb-grey, #6c7993);
    white-space: nowrap;
}

.attps-uni-stores-list-modal .atb-modal__title {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--atb-grey, #6c7993);
}

/* Barre fixe en bas d'écran du header mobile — colonne du builder portant la
   classe (page d'options Commons › Header).

   Écrit SANS imbrication CSS, volontairement : ces règles vivaient dans le CSS
   perso de la colonne, en syntaxe `& { … }`, que Safari ne comprend qu'à
   partir d'iOS 16.5. Sur un iPhone plus ancien, tout le bloc était jeté, la
   colonne n'était jamais fixée et restait dans le flux, en haut du header,
   par-dessus le reste (vu le 04/09/2026). Des sélecteurs plats passent partout.

   Spécificité (0,3,0), au-dessus des règles de grille du builder sur
   `.atb-row .atb-column` (largeur, arrondi par variable) :
   l'ancien `#id` les battait d'office, une classe seule perdait — la barre
   tombait à 250 px de large et sans arrondi. La colonne est dans la boîte de
   disposition de la ligne (`.atb-row > .atb-row__layout > .atb-column`) : même
   spécificité avec `.atb-row__layout > .atb-column…`. */
.atb-row__layout > .atb-column.attps-uni-header-mobile-bottom-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0.7rem;
    border-radius: 1rem 1rem 0 0;
    overflow: hidden;
}

.atb-row__layout > .atb-column.attps-uni-header-mobile-bottom-fixed > * {
    flex: 1;
}

/* Menu mobile ouvert (panneau du header refondu, borné par cette barre) : le
   panneau s'arrête au bord de la barre, dont les angles arrondis laissaient
   voir la page derrière. L'ancien menu, lui, passait SOUS la barre et les
   angles montraient son blanc. On peint donc un fond clair derrière la barre
   tant qu'une modale bloque la page (`html.atb-modal-open`). Pseudo-élément
   `::before` de la LIGNE : peint avant la colonne fixe dans le même contexte
   d'empilement (la ligne, z-index 2), donc sous la barre et au-dessus de la
   page. Hauteur = celle de la barre (72 px mesurés). */
html.atb-modal-open .atb-row:has(> .atb-row__layout > .atb-column.attps-uni-header-mobile-bottom-fixed)::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--attps-bottom-fixed-height, 4.5rem);
    background: var(--atb-light);
}

.atb-row__layout > .atb-column.attps-uni-header-mobile-bottom-fixed > *:first-child {
    border-right: 1px solid #fff;
}

.atb-row__layout > .atb-column.attps-uni-header-mobile-bottom-fixed .attps-uni-stores-link {
    padding: 0;
}


/* Bottom-bar / déclencheur du méga menu — autonome ([attps_uni_header_bottom_bar]).
   Le contenu du panneau .attps-uni-mega-menu est stylé plus bas (déjà autonome).
   Les sélecteurs internes (&) restent relatifs à .attps-uni-header-bottom-bar :
   l'ouverture au survol/clic fonctionne partout. */
.attps-uni-header-bottom-bar {
    width: 100%;
    background: var(--atb-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    position: relative;

    .attps-uni-header-bottom-bar__content {
        width: 90%;
        list-style: none;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
        gap: var(--atb-space-2);

        li {

            .attps-uni-header-bottom-bar__item {
                background: color-mix(in oklab, var(--atb-light) 10%, transparent);
                color: var(--atb-light);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.5rem;
                border-radius: var(--atb-radius-lg);
                gap: var(--atb-space-2);
                height: 100%;
                transition: 150ms ease-in-out;
                cursor: pointer;

                .label-term {
                    font-weight: bold;
                    text-transform: uppercase;
                    line-height: 1;
                }

                /* La taille venait des attributs du fichier SVG (22px de haut
                   pour la plupart) ; le champ at_icon les remplace par 1em. On
                   la fixe donc ici, comme partout ailleurs. */
                .atgf-icon {
                    height: 1.375rem;
                    flex: 0 0 auto;

                    /* La largeur suit le ratio : ces icônes vont du 11×22 au
                       31×16, et le `width: 100%` de la règle de base les
                       enfermerait dans un carré. */
                    img,
                    svg {
                        width: auto;
                        height: 100%;
                    }
                }

                /* La reprise de currentColor est déjà portée par la règle de
                   base `.atgf-icon` (attps-builder/custom.css). */

                &:hover {
                    background: var(--atb-light);
                    color: var(--atb-primary);
                }
            }

            &.is-active .attps-uni-header-bottom-bar__item {
                background: var(--atb-light);
                color: var(--atb-primary);
            }

            /* Clic : l'item verrouillé reste ouvert */
            &.is-active .attps-uni-mega-menu {
                display: block;
            }

            /* Survol : n'ouvre que si aucun item n'est verrouillé au clic
                       (le clic prend le pas sur le hover) */
            .attps-uni-header-bottom-bar:not(:has(li.is-active)) &:hover .attps-uni-mega-menu {
                display: block;
            }

            .attps-uni-mega-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--atb-primary);

                &::before {
                    content: "";
                    position: absolute;
                    bottom: 100%;
                    left: 0;
                    right: 0;
                    height: 1rem;
                }

                .atb-row {
                    padding: var(--atb-space-8) 0;
                    --row-l-w: 90%;
                }
            }
        }

    }
}

.attps-uni-mega-menu {
    padding: 0;

    .attps-uni-mega-menu__wrapper {
        .attps-uni-mega-menu__content {
            .attps-uni-mega-menu__content__title {
                text-transform: uppercase;
                font-size: var(--atb-text-2xl);
            }

            .attps-uni-mega-menu__content__childs-terms {

                list-style: none;
                --atb-flex-col-gap: 1.5rem;
                column-gap: var(--atb-flex-col-gap);
                row-gap: 0.5rem;
                padding: 0;


                li {

                    a {
                        line-height: var(--atb-leading-tight);
                        padding: var(--atb-space-4);
                        border-radius: var(--atb-radius);
                        display: block;

                        &:hover {
                            background-color: color-mix(in srgb, var(--atb-light) 10%, transparent);
                        }

                        .attps-uni-mega-menu__content__item__description {}
                    }
                }
            }

            .attps-uni-mega-menu__content__button {
                border-radius: var(--atb-radius);
                width: 100%;
                max-width: 280px;
                min-width: fit-content;
            }
        }

        .attps-uni-mega-menu__sidebar {
            display: flex;
            flex-direction: row;
            /* annule le flex-direction: column hérité de .atb-column,
               pour retrouver le même comportement wrap que .atb-row */
            flex-wrap: wrap;
            align-items: stretch;
            /* évite que l'image s'étire à la hauteur du form (stretch) */
            align-content: flex-start;
            --atb-flex-col-min-width: 250px;
            --atb-flex-col-gap: 1rem;
            column-gap: var(--atb-flex-col-gap);
            row-gap: var(--atb-flex-col-gap);


            .attps-uni-mega-menu__sidebar__image {
                display: flex;
                position: relative;
                min-height: 300px;
                margin-bottom: 0;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: var(--atb-radius);
                    position: absolute;
                }
            }

            .attps-uni-mega-menu__sidebar__more {
                border-radius: var(--atb-radius);
                overflow: hidden;

                &>* {
                    height: 100%;

                    &:has(:only-child) {
                        height: 100%;
                    }
                }
            }
        }
    }
}


/* Catégories de l'en-tête mobile : [attps_uni_header_terms], rendu « niveau
   par niveau » du champ at_nav (atb-nav.css). Règles PLATES exprès : ce menu
   n'est visible que sur mobile, où l'imbrication CSS manque encore à d'anciens
   Safari. Le niveau 1 reprend les capsules bleues de l'ancienne liste ; les
   sous-catégories, dans leur panneau, restent sobres. Scopé sur la CLASSE du
   <nav> : le shortcode vit dans la modale « menu-mobile » du header (15/09/2026). */
.attps-uni-header-mobile__terms {
    --atb-nav-gap: var(--atb-space-1);
    --atb-nav-padding: var(--atb-space-2) var(--atb-space-4);
    --atb-nav-pill-radius: var(--atb-radius-pill);
    --atb-nav-font-size: var(--atb-text-lg);
    --atb-nav-font-weight: 700;
    --atb-nav-icon-size: var(--atb-space-6);
    --atb-nav-drill-bg: var(--atb-light);
    padding-top: var(--atb-space-4);
}

/* Le niveau 1 : capsules bleues, texte clair (la couleur du menu est posée sur
   sa racine et héritée, il faut donc la reposer ICI, pas seulement la variable). */
.attps-uni-header-mobile__terms .atb-nav__list--1 > .atb-nav__item > .atb-nav__row {
    --atb-nav-color-hover: var(--atb-light);
    --atb-nav-color-active: var(--atb-light);
    color: var(--atb-light);
    background-color: var(--atb-primary);
    text-transform: uppercase;
    line-height: var(--atb-leading-relaxed);
}

.attps-uni-header-mobile__terms .atb-nav__list--1 > .atb-nav__item > .atb-nav__row:hover {
    background-color: var(--atb-primary);
}

.attps-uni-header-mobile__terms .atb-nav__list--1 > .atb-nav__item > .atb-nav__row .atb-nav__link,
.attps-uni-header-mobile__terms .atb-nav__list--1 > .atb-nav__item > .atb-nav__row .atb-nav__toggle {
    color: inherit;
}

.attps-uni-header-mobile__terms .atb-nav__list--1 > .atb-nav__item > .atb-nav__row .atb-nav__link {
    gap: var(--atb-space-4);
}

/* Les icônes des catégories (groupe atb_icon, souvent un SVG en ligne) :
   bornées à la taille d'icône du menu, sinon chacune vient avec la sienne. */
.attps-uni-header-mobile__terms .atb-nav__icon .atgf-icon,
.attps-uni-header-mobile__terms .atb-nav__icon .atb-icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
}

.attps-uni-header-mobile__terms .atb-nav__icon svg,
.attps-uni-header-mobile__terms .atb-nav__icon img {
    width: 100%;
    height: 100%;
}

/* Le panneau des sous-catégories : sobre, texte sombre. */
.attps-uni-header-mobile__terms .atb-nav__drill-panel:not([data-atb-drill-root]) {
    --atb-nav-font-size: var(--atb-text-base);
    color: var(--atb-secondary);
    font-size: var(--atb-text-base);
}

#gform_wrapper_2 {
    font-family: var(--atb-font-condensed, inherit);

    .gform_required_legend {
        display: none !important;
    }

    form {

        .gform_body {
            .gform_fields {
                --gf-form-gap-y: var(--atb-space-4);
                --gf-form-gap-x: 0rem;
                display: grid !important;

                .gfield--type-consent {
                    order: 4;


                    label {
                        font-size: var(--atb-text-sm);
                        line-height: var(--atb-leading-relaxed);
                        color: inherit;
                    }
                }

                .gfield--input-type-email {
                    grid-column: span 8 !important;

                    input {
                        color: var(--atb-light);
                        padding: var(--atb-space-3) var(--atb-space-3);
                        border-radius: var(--atb-radius) 0 0 var(--atb-radius);
                        border: 1px solid color-mix(in srgb, var(--atb-light) 12%, transparent);
                        border-right: 0;
                        background: color-mix(in srgb, var(--atb-light) 5%, transparent);
                        line-height: var(--atb-leading-relaxed);
                        height: auto;
                        box-sizing: border-box;

                        &::placeholder {
                            color: color-mix(in srgb, var(--atb-light) 60%, transparent);
                            opacity: 0.6;
                        }
                    }
                }

                #field_submit_2 {
                    grid-column: span 4 !important;
                    align-items: flex-start;
                    height: fit-content;
                    position: relative;
                    transition: 150ms ease-in-out;
                    max-width: 175px;
                    min-width: 150px;


                    &::before {
                        content: "\e20a";
                        position: absolute;
                        font-family: "Font Awesome 7 Pro";
                        top: 50%;
                        left: 1rem;
                        transform: translateY(-50%);
                        color: var(--atb-secondary);
                        rotate: -45deg;
                        transition: 150ms ease-in-out;
                        transform-origin: top;
                    }

                    &:hover::before {
                        color: var(--atb-light);
                        rotate: 0deg;
                    }

                    /* Le bouton d'envoi est rendu en <button> par
                       attps-get-field (filtre atgf_gform_button_forms) ; on
                       garde input[type="submit"] pour rester bon si la
                       conversion est désactivée. */
                    button[type="submit"],
                    input[type="submit"],
                    .at-gfbtn {
                        width: 100%;
                        --gf-local-color: var(--atb-secondary);
                        background: var(--atb-light);
                        border-radius: 0 var(--atb-radius) var(--atb-radius) 0;
                        padding: var(--atb-space-3) var(--atb-space-3);
                        padding-left: var(--atb-space-6);
                        border: 1px solid color-mix(in srgb, var(--atb-light) 100%, transparent);
                        line-height: var(--atb-leading-relaxed);
                        font-weight: bold;
                        border-left: 0;
                        transition: 150ms ease-in-out;

                        &:hover {
                            background: var(--atb-secondary);
                            --gf-local-color: var(--atb-light);
                            border-color: var(--atb-secondary);
                        }
                    }
                }
            }
        }
    }
}

.slide-out-blurred-right {
    -webkit-animation: slide-out-blurred-right 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
    animation: slide-out-blurred-right 0.45s cubic-bezier(0.755, 0.050, 0.855, 0.060) both;
}

.slide-in-blurred-right {
    -webkit-animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    animation: slide-in-blurred-right 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}

/* Mouvement réduit : on écrase la durée plutôt que de couper l'animation.
   `animation: none` ne déclencherait pas `animationend`, et les scripts qui
   attendent la fin de la sortie (devis express) resteraient en plan. */
@media (prefers-reduced-motion: reduce) {

    .slide-out-blurred-right,
    .slide-in-blurred-right {
        -webkit-animation-duration: 0.01ms;
        animation-duration: 0.01ms;
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2026-7-28 16:26:38
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-blurred-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-blurred-right {
    0% {
        -webkit-transform: translateX(0) scaleY(1) scaleX(1);
        transform: translateX(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(1000px) scaleX(2) scaleY(0.2);
        transform: translateX(1000px) scaleX(2) scaleY(0.2);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }
}

@keyframes slide-out-blurred-right {
    0% {
        -webkit-transform: translateX(0) scaleY(1) scaleX(1);
        transform: translateX(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(1000px) scaleX(2) scaleY(0.2);
        transform: translateX(1000px) scaleX(2) scaleY(0.2);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2026-7-28 16:28:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-blurred-right {
    0% {
        -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
        transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) scaleY(1) scaleX(1);
        transform: translateX(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes slide-in-blurred-right {
    0% {
        -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
        transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) scaleY(1) scaleX(1);
        transform: translateX(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}