/**
 * PAGES CSS - Life'Scape
 * Basé EXACTEMENT sur le CSS original WordPress (app.css_ver_1770660030)
 * NE PAS MODIFIER sans vérifier l'original
 */

/* === BREADCRUMB === (valeurs exactes CSS WordPress original ligne 8912-8932) */
.breadcrum {
    position: relative;
    z-index: 5;
}

.breadcrum,
.breadcrum p,
.breadcrum a {
    color: #301f1f;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: uppercase;
}

.breadcrum a {
    text-decoration: none;
}

.breadcrum a:hover {
    text-decoration: underline;
}

.breadcrumb_last {
    color: #301f1f;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .breadcrum {
        display: none;
    }
}

/* === SECTION TXT2-IMG (Page Concept - Texte + Image à droite) === */
.txt2-img {
    padding-top: 250px;
}

.txt2-img .container {
    box-sizing: border-box;
}

.txt2-img .container .content {
    display: flex;
}

.txt2-img .container .content .text-section {
    width: 70%;
}

.txt2-img .container .content .text-section h1 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 80px;
    position: relative;
}

.txt2-img .container .content .text-section h1:after {
    background-image: url('../images/general/Decoration.svg');
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 50px;
    width: 100%;
}

.txt2-img .container .content .text-section .first-txt {
    color: #464646;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 650px;
    padding-bottom: 70px;
    width: 100%;
}

.txt2-img .container .content .text-section .about-section h2 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.txt2-img .container .content .text-section .about-section > p {
    color: #483c3c;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 15px;
}

.txt2-img .container .content .text-section .about-section .wysiwyg p {
    color: #464646;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 550px;
    width: 100%;
}

.txt2-img .container .content .text-section .about-button {
    padding-top: 20px;
    width: 100%;
}

.txt2-img .container .content .text-section .about-button a {
    background-color: #483c3c;
    border: none;
    border-radius: 2rem;
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    z-index: 50;
}

.txt2-img .container .content .text-section .about-button a:hover {
    background-color: #2d2424;
    transform: translateY(-2px);
}

.txt2-img .container .content .image-section {
    padding-top: 100px;
    position: relative;
    width: 40%;
    z-index: 2;
}

.txt2-img .container .content .image-section img {
    position: relative;
    transform: rotate(26deg);
    width: 500px;
    z-index: 3;
}

.txt2-img .container .content .image-section:after {
    background-image: url('../images/general/smoke-2-6.webp');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 200%;
    left: -50%;
    position: absolute;
    top: -50%;
    width: 200%;
    z-index: 0;
}

/* === SECTION IMG2-TXT (L'univers Life'Scape - Images à gauche + Texte) === */
.img2-txt {
    padding-top: 100px;
}

.img2-txt .container {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.img2-txt .container .about-images {
    display: flex;
    gap: 20px;
    margin-top: -50px;
    position: relative;
    width: 60%;
}

.img2-txt .container .about-images .image-wrapper {
    aspect-ratio: 1/1;
    max-width: 300px;
    position: relative;
}

.img2-txt .container .about-images .image-wrapper img {
    height: 100%;
    margin-left: 12px;
    margin-top: 20px;
    object-fit: cover;
    position: relative;
    width: 93%;
    z-index: 11;
}

.img2-txt .container .about-images .image-wrapper:after {
    background-image: url('../images/general/img-filter.webp');
    background-position: 50%;
    background-size: cover;
    content: "";
    height: 120%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

.img2-txt .container .about-content {
    width: 50%;
}

.img2-txt .container .about-content h2 {
    word-wrap: break-word;
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-weight: 600;
    padding-bottom: 20px;
}

.img2-txt .container .about-content h3 {
    color: #483c3c;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 20px;
}

.img2-txt .container .about-content .about-description p {
    word-wrap: break-word;
    color: #464646;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 30px;
}

.img2-txt .container .about-content a {
    background-color: #483c3c;
    border: none;
    border-radius: 2rem;
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    z-index: 50;
}

.img2-txt .container .about-content a:hover {
    background-color: #2d2424;
    transform: translateY(-2px);
}

.img2-txt .separator {
    background-color: #dedbc3;
    padding-top: 80px;
    text-align: center;
    width: 100%;
}

.img2-txt .separator img {
    /* Pas de width ni opacity - laisser l'image à sa taille naturelle */
}

/* === SECTION RESTAURANT (Partenaires) === */
.restaurant-section {
    padding: 40px 20px;
}

.restaurant-section .container h2 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.restaurant-section .container .restaurant-description {
    color: #483c3c;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

.restaurant-section .container .restaurant-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding-top: 40px;
}

.restaurant-section .container .restaurant-list .restaurant-item {
    flex: 1 1 calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
    text-align: center;
}

/* Les 4 colonnes s'appliquaient a toutes les largeurs, jusqu'a 61px par colonne
   sur un telephone. La grille se reduit desormais avec l'ecran : 3 colonnes en
   tablette (2 gouttieres de 20px), 2 en mobile (1 gouttiere). */
@media (max-width: 1024px) {
    .restaurant-section .container .restaurant-list .restaurant-item {
        flex: 1 1 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }
}

@media (max-width: 768px) {
    .restaurant-section .container .restaurant-list .restaurant-item {
        flex: 1 1 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }

    .restaurant-section .container .restaurant-list .restaurant-item .restaurant-logo {
        height: 80px;
        /* Egalise le poids visuel : les logos larges (Regus) remplissaient la
           colonne bord a bord quand les autres respiraient. */
        padding: 0 0.75rem;
    }

    /* 20px pour un nom comme « Bienvenue chez nous » dans une colonne de 142px
       donnait quatre lignes tres serrees. */
    .restaurant-section .container .restaurant-list .restaurant-item .restaurant-details h3 {
        font-size: 17px;
    }
}

/* === AFFICHE DE LA PAGE ESCAPES MOBILES ===
   Occupe la place laissee par .section-text (55 % max) dans le .txt-imagep.
   Sous 768px, le conteneur passe en column-reverse : l'affiche se retrouve
   au-dessus du texte, ce qui convient bien a un visuel d'accroche. */
/* Double polaroid de la page Escapes Mobiles (format paysage).
   Deux photos encadrées de blanc, légèrement pivotées et superposées, dans
   l'esprit des pages de salles mais horizontales : les clichés montrent
   l'installation complète, qu'un cadrage carré amputerait. */
.escape-mobile-polaroids {
    align-self: center;
    width: 45%;
    position: relative;
    padding: 30px 2rem 40px;
    box-sizing: border-box;
}

.escape-mobile-polaroids .emp-photo {
    background: #fff;
    padding: 12px 12px 32px;
    box-shadow: 0 10px 26px rgba(72, 60, 60, 0.28);
    width: 78%;
}
.escape-mobile-polaroids .emp-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.escape-mobile-polaroids .emp-photo-1 {
    transform: rotate(-5deg);
    position: relative;
    z-index: 2;
}
.escape-mobile-polaroids .emp-photo-2 {
    transform: rotate(6deg);
    margin-left: auto;
    margin-top: -60px;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .escape-mobile-polaroids {
        width: 100%;
        margin-top: 2.5rem;
        padding-left: 0;
        padding-right: 0;
    }
    .escape-mobile-polaroids .emp-photo { width: 82%; }
    .escape-mobile-polaroids .emp-photo-2 { margin-top: -40px; }
}

/* Photo simple à coin arrondi, à côté de « À qui s'adressent... ». */
.escape-mobile-photo-side {
    align-self: center;
    width: 42%;
    padding-left: 2rem;
    box-sizing: border-box;
}
.escape-mobile-photo-side img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(72, 60, 60, 0.25);
}
@media (max-width: 768px) {
    .escape-mobile-photo-side {
        width: 100%;
        padding-left: 0;
        margin-top: 2rem;
    }
}

/* Liste des « obstacles » du scénario Protocole Invisible : chaque ligne est
   une expérience que le jeu fait éprouver. Puces dorées, texte en léger retrait
   italique pour trancher avec les paragraphes et rythmer la lecture. */
.section-text .escmob-obstacles {
    list-style: none;
    margin: 6px 0 18px;
    padding: 0;
    border-left: 3px solid #C19A59;
}
.section-text .escmob-obstacles li {
    position: relative;
    color: #483c3c;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
    padding: 6px 0 6px 26px;
}
.section-text .escmob-obstacles li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C19A59;
}
@media (max-width: 768px) {
    .section-text .escmob-obstacles {
        text-align: left;
        display: inline-block;
    }
}

/* Encadré « Format mobile » : referme le récit sur l'aspect pratique, détaché
   du corps du texte par un fond beige et une pastille dorée à gauche. */
.section-text p.escmob-note {
    margin-top: 22px;
    padding: 14px 18px;
    background: #DEDBC3;
    border-left: 4px solid #C19A59;
    border-radius: 4px;
    line-height: 1.5;
}

/* Récit d'un Escape Mobile placé à côté de la double polaroïd : typographie
   élargie et aérée pour que le bloc de texte occupe toute la hauteur des
   clichés plutôt que de flotter au-dessus. Le premier paragraphe fait office
   de chapô. Spécificité portée à cinq classes pour l'emporter sur la règle
   générale des paragraphes de .txt-and-polaroid. */
.txt-and-polaroid .container .txt-imagep .section-text.escmob-scenario h4 {
    font-size: 20px;
    padding-bottom: 26px;
}
.txt-and-polaroid .container .txt-imagep .section-text.escmob-scenario p {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 18px;
}
.txt-and-polaroid .container .txt-imagep .section-text.escmob-scenario p:last-child {
    margin-bottom: 0;
}

/* Titre de bannière des pages thématiques Escapes Mobiles, sur deux lignes :
   la catégorie en surtitre discret, puis la thématique en gros, légèrement
   décalée. Les deux héritent de la couleur du h1 (blanc sur la bannière,
   brun sous 630px quand l'image de fond disparaît). */
.banner .title-container h1.escmob-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Les deux lignes sont des <span> : le sélecteur universel `* { color }` de
   global.css les repeindrait en brun (il l'emporte sur la couleur héritée du
   h1). On force donc l'héritage pour retrouver le blanc du h1 sur la bannière
   — et le brun sous 630px, quand l'image de fond disparaît. */
.banner .title-container h1.escmob-title .escmob-title-cat,
.banner .title-container h1.escmob-title .escmob-title-theme {
    color: inherit;
}
.banner .title-container h1.escmob-title .escmob-title-cat {
    font-family: Montserrat, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.banner .title-container h1.escmob-title .escmob-title-theme {
    padding-left: 1.6em;
}
@media (max-width: 630px) {
    .banner .title-container h1.escmob-title {
        align-items: center;
        text-align: center;
    }
    .banner .title-container h1.escmob-title .escmob-title-cat {
        font-size: 0.8rem;
    }
    .banner .title-container h1.escmob-title .escmob-title-theme {
        padding-left: 0;
    }
}

/* === FAQ VISIBLE, RÉUTILISABLE (Escapes Mobiles, groupes, escape box…) ===
   Contenu réellement affiché (et non seulement en JSON-LD) : c'est le texte
   que les moteurs de réponse IA lisent et citent. Ouverte par défaut
   (<details open>), repliable au clic pour le confort de lecture. */
.faq-section {
    padding: 70px 0;
}
.faq-section .faq-section-head {
    text-align: center;
    margin-bottom: 40px;
}
.faq-section .faq-section-head h2 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-weight: 600;
}
.faq-section .faq-section-list {
    max-width: 860px;
    margin: 0 auto;
}
.faq-section .faq-item {
    border-bottom: 1px solid rgba(72, 60, 60, 0.18);
    padding: 20px 0;
}
.faq-section .faq-item .faq-q {
    color: #483c3c;
    font-family: Montserrat, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.faq-section .faq-item .faq-q::-webkit-details-marker { display: none; }
.faq-section .faq-item .faq-q::after {
    content: "–";
    color: #C19A59;
    font-size: 24px;
    line-height: 1;
    flex: 0 0 auto;
}
.faq-section .faq-item:not([open]) .faq-q::after {
    content: "+";
}
.faq-section .faq-item .faq-a {
    color: #333;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    margin-top: 14px;
    padding-right: 40px;
}
/* Un lien dans une réponse doit se voir : sans cette règle il héritait de la
   couleur du texte et rien ne le distinguait, ni à l'œil ni au survol. */
.faq-section .faq-item .faq-a a {
    color: #483c3c;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.faq-section .faq-item .faq-a a:hover {
    color: #C19A59;
}
@media (max-width: 768px) {
    .faq-section { padding: 45px 0; }
    .faq-section .faq-section-head h2 { font-size: 30px; }
    .faq-section .faq-item .faq-a { padding-right: 0; }
}

/* === RÉSERVATION DES ESCAPE BOX ===
   Bouton d'appel « Réserver votre box » (page Escape Box) et section qui
   accueille le widget de catalogue resabox. */
.box-reserve-cta {
    text-align: center;
    margin: 10px auto 55px;
    position: relative;
    z-index: 20;
}
/* Même habillage que les boutons de tarif des box (.package-button a) :
   brun #483c3c, Work Sans 700, majuscules, pilule arrondie. */
.box-reserve-btn {
    display: inline-block;
    background-color: #483c3c;
    border: none;
    border-radius: 2rem;
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    padding: 12px 42px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.box-reserve-btn:hover {
    background-color: #2d2424;
    transform: translateY(-2px);
    color: #fff;
}
/* Sur mobile, .txt-img2 (la section « Qu'est-ce qu'une Escape Box ? ») porte un
   margin-bottom: -150px destiné à chevaucher la section suivante ; il remontait
   le bouton par-dessus le texte de l'intro. On compense pour le replacer sous
   le paragraphe (la marge négative et ce margin-top se combinent à ~25px). */
@media (max-width: 768px) {
    .box-reserve-cta {
        margin-top: 175px;
    }
}
.resabox-section {
    padding: 40px 0 70px;
}
.resabox-section .section-text {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 34px;
}
.resabox-section .section-text h2 {
    font-family: Gelasio, serif;
    font-size: 34px;
    color: #483c3c;
    margin-bottom: 14px;
}
.resabox-section .section-text p {
    font-family: Montserrat, sans-serif;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
}

/* Cartes du widget resabox. Par défaut la carte est transparente (le beige
   #DEDBC3 de la page transparaît) : les cartes se fondaient dans le fond. On
   leur donne un crème CLAIR — plus clair que le beige de page pour ressortir —
   et une ombre douce. Le !important est nécessaire : widget.css est injecté
   après pages.css. Scopé sous .resabox-catalog, présent seulement ici. */
.resabox-catalog .resabox-card,
.resabox-catalog .resabox-card__body {
    background-color: #F5F0E2 !important;
}
.resabox-catalog .resabox-card {
    border: 1px solid rgba(72, 60, 60, 0.12) !important;
    box-shadow: 0 8px 22px rgba(72, 60, 60, 0.15) !important;
}

/* Boutons « Réserver » du widget : marron de la charte (comme les boutons du
   site) au lieu du bleu d'accent par défaut. Doublé du réglage data-settings,
   mais cette règle garantit la couleur et le survol quoi qu'il arrive. */
.resabox-catalog .resabox-card__button {
    background-color: #483c3c !important;
    border-color: #483c3c !important;
    color: #fff !important;
}
.resabox-catalog .resabox-card__button:hover {
    background-color: #2d2424 !important;
}

/* Étapes suivantes du widget (dates, informations, paiement) : les panneaux
   sont transparents par défaut et laissaient voir le beige de page. On leur
   donne le même crème que les cartes du catalogue, avec une hiérarchie : les
   grands panneaux en #F5F0E2, les sous-tuiles (colonnes retrait/retour) un ton
   plus clair. Classes relevées sur le widget réel. */
.resabox-catalog .resabox-boxpanel,
.resabox-catalog .resabox-panel {
    background-color: #F5F0E2 !important;
    border: 1px solid rgba(72, 60, 60, 0.12) !important;
    box-shadow: 0 8px 22px rgba(72, 60, 60, 0.15) !important;
    border-radius: 14px !important;
}
.resabox-catalog .resabox-column {
    background-color: #FBF8EF !important;
    border: 1px solid rgba(72, 60, 60, 0.10) !important;
    border-radius: 10px !important;
}

/* Écran de remerciement : le widget remplit .resabox-confirmation au retour du
   paiement. On masque alors notre titre et notre description d'introduction,
   qui n'ont plus de sens à ce moment-là. En navigation normale ce bloc reste
   vide (:empty), donc l'introduction s'affiche. :has() est supporté par les
   navigateurs cibles. */
.resabox-section .container:has(.resabox-confirmation:not(:empty)) .section-text {
    display: none;
}

/* === BOUTONS DES PAGES ESCAPES MOBILES ===
   La pilule sombre du site n'existe que sous .txt2-img ; ailleurs, .btn seul
   retombe sur le bouton generique de main.css, qui n'est pas a la charte.
   Cette classe la porte explicitement, pour les boutons « Decouvrir » des
   cadres thematiques comme pour les appels a l'action de bas de section. */
.escape-mobile-btn {
    background-color: #483c3c;
    border: none;
    border-radius: 2rem;
    color: #fff;
    display: inline-block;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-top: 1rem;
    padding: 13px 28px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.escape-mobile-btn:hover {
    background-color: #2d2424;
    color: #fff;
    transform: translateY(-2px);
}

/* Boite de hauteur fixe : les logos ont des proportions tres differentes, et
   sans cadre commun les fiches se decalaient les unes par rapport aux autres. */
.restaurant-section .container .restaurant-list .restaurant-item .restaurant-logo {
    align-items: center;
    display: flex;
    height: 100px;
    justify-content: center;
}

/* Le logo est un lien vers le site du partenaire, au meme titre que son nom :
   le lien occupe toute la boite pour que la zone cliquable couvre l'image. */
.restaurant-section .container .restaurant-list .restaurant-item .restaurant-logo a {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

/* max-width manquait : l'image se rendait a sa largeur intrinseque, jusqu'a
   143px dans une colonne de 61 sur mobile. Six logos sur sept debordaient de
   leur colonne et trois se chevauchaient. */
.restaurant-section .container .restaurant-list .restaurant-item .restaurant-logo img {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: auto;
}

/* Repere au survol, sur les appareils qui en ont un : sans retour visuel, rien
   n'indiquait que le logo etait devenu cliquable. */
@media (hover: hover) {
    .restaurant-section .container .restaurant-list .restaurant-item .restaurant-logo a:hover img {
        opacity: 0.75;
        transform: scale(1.05);
    }
}

.restaurant-section .container .restaurant-list .restaurant-item .restaurant-details {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.restaurant-section .container .restaurant-list .restaurant-item .restaurant-details h3 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.restaurant-section .container .restaurant-list .restaurant-item .restaurant-details h3 a {
    color: #483c3c;
    text-decoration: none;
}

.restaurant-section .container .restaurant-list .restaurant-item .restaurant-details h3 a:hover {
    text-decoration: underline;
}

.restaurant-section .container .restaurant-list .restaurant-item .restaurant-details .restaurant-address {
    margin-bottom: -15px;
}

.restaurant-section .container .restaurant-list .restaurant-item .restaurant-details .restaurant-phone {
    margin-top: -15px;
}

.restaurant-section .container .restaurant-list .restaurant-item .restaurant-details .restaurant-address p,
.restaurant-section .container .restaurant-list .restaurant-item .restaurant-details .restaurant-zip-code p,
.restaurant-section .container .restaurant-list .restaurant-item .restaurant-details .restaurant-phone p {
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

/* === ESCAPE BOX PAGE STYLES === */

/* Banner Section */
/* Banner Section - VALEURS EXACTES DU CSS ORIGINAL */
.banner {
    background-repeat: no-repeat;
    background-size: cover;
    height: 800px;
    position: relative;
    width: 100%;
    z-index: 0;
}

/* La banniere occupe le haut de la page, et le papier dechire du header la
 * recouvre — exactement comme sur le site d'origine, ou .banner n'a ni marge
 * haute ni bande rapportee : { height: 800px; position: relative; z-index: 0 }
 * et rien d'autre.
 *
 * La version precedente decalait l'image de 130px et masquait la jointure avec
 * une bande de paper_origin_croped.webp. Deux papiers differents se
 * rencontraient donc en haut de page — celui de la bande et le voile general
 * (header-overlay.svg) — d'ou la coupe horizontale nette que l'on voyait
 * courir sous le menu, la ou les deux cremes ne coincidaient pas.
 *
 * L'image part maintenant de tout en haut. Le voile de body::before, passe
 * en z-index 1, la surplombe et vient y mordre. Aucune jointure, donc aucune
 * coupe : il n'y a plus qu'un seul papier sur toute la largeur.
 */
.banner:before {
    background: rgba(48, 31, 31, 0.63);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.banner .container {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    position: relative;
    z-index: 2;
}

.banner .title-container {
    box-sizing: border-box;
}

.banner .title-container h1 {
    color: #fff;
    font-family: Gelasio, sans-serif;
    font-size: 2.8125rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/* Overlay-box - effet parchemin inversé - VALEURS EXACTES */
.overlay-box {
    background-image: url('../images/general/paper_origin_croped.webp');
    background-size: cover;
    height: 100%;
    left: 0;
    max-height: 270px;
    position: absolute;
    transform: translateY(-265px) scaleY(-1);
    width: 100vw;
}

/* txt-img2 Section */
.txt-img2 {
    background: #dedbc3;
    padding-top: 150px;
    position: relative;
    z-index: 5;
}

.txt-img2 .container {
    box-sizing: border-box;
    position: relative;
}

.txt-img2 .container .txt-imagep {
    display: flex;
    position: relative;
    z-index: 2;
}

.txt-img2 .container .txt-imagep .section-text {
    margin-top: 65px;
    max-width: 55%;
}

.txt-img2 .container .txt-imagep .section-text h1,
.txt-img2 .container .txt-imagep .section-text h2 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 20px;
}

.txt-img2 .container .txt-imagep .section-text p {
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 15px;
}

.txt-img2 .container .txt-imagep .section-text p:last-child {
    margin-bottom: 0;
}

.txt-img2 .container .txt-imagep .section-picture {
    margin-bottom: 20px;
    position: relative;
    width: 45%;
    z-index: 20;
}

.txt-img2 .container .txt-imagep .section-picture img {
    display: block;
    height: auto;
    object-fit: cover;
    position: relative;
    width: 100%;
    z-index: 2;
}

.txt-img2 .container .txt-imagep .section-picture:after {
    background-image: url('../images/general/Smoke.webp');
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 200%;
    left: -50px;
    position: absolute;
    top: -200px;
    width: 200%;
    z-index: 1;
}

/* txt-img3 Section - Annoncez une grande nouvelle */
.txt-img3 {
    background: #dedbc3;
    padding-bottom: 100px;
    padding-top: 150px;
    position: relative;
    z-index: 5;
}

.txt-img3 .container {
    box-sizing: border-box;
    position: relative;
}

.txt-img3 .container .txt-imagep {
    display: flex;
    gap: 100px;
    position: relative;
    z-index: 2;
}

.txt-img3 .container .txt-imagep .section-text {
    margin-top: 65px;
    max-width: 55%;
}

.txt-img3 .container .txt-imagep .section-text h1,
.txt-img3 .container .txt-imagep .section-text h2 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 20px;
}

.txt-img3 .container .txt-imagep .section-text p {
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 15px;
}

.txt-img3 .container .txt-imagep .section-text p:last-child {
    margin-bottom: 0;
}

.txt-img3 .container .txt-imagep .section-picture {
    margin-bottom: 20px;
    position: relative;
    width: 45%;
    z-index: 20;
}

.txt-img3 .container .txt-imagep .section-picture img {
    display: block;
    height: auto;
    max-width: 400px;
    object-fit: cover;
    position: relative;
    width: 100%;
    z-index: 2;
}

.txt-img3 .container .txt-imagep .section-picture:after {
    background-image: url('../images/general/Smoke.webp');
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 200%;
    left: -160px;
    position: absolute;
    top: -150px;
    width: 200%;
    z-index: 1;
}

/* text-image-logo Section - VALEURS EXACTES DU CSS ORIGINAL */
.text-image-logo {
    overflow: visible;
}

.text-image-logo .container {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    margin-top: -150px;
    position: relative;
    overflow: visible;
}

.text-image-logo .container.reverse-columns {
    flex-direction: row-reverse;
}

.text-image-logo .container.reverse-columns .content-container {
    padding-top: 130px;
    width: 70%;
}

.text-image-logo .container.reverse-columns .content-container h2 {
    color: #483c3c;
    font-family: Gelasio;
    font-size: 45px;
    font-weight: 600;
    line-height: 66.5%;
    margin-top: 150px;
    padding-bottom: 20px;
}

.text-image-logo .container.reverse-columns .content-container h3 {
    color: #483c3c;
    font-family: Work Sans;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 20px;
}

.text-image-logo .container.reverse-columns .content-container p {
    color: #000;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 300;
}

.text-image-logo .container.reverse-columns .content-container .logos-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 50px;
}

.text-image-logo .container.reverse-columns .content-container .logos-container .logo-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: auto;
}

.text-image-logo .container.reverse-columns .content-container .logos-container .logo-item img {
    width: 30px;
}

.text-image-logo .container.reverse-columns .content-container .logos-container .logo-item:last-child img {
    width: 50px;
}

/* CRITIQUE: marge négative pour coller l'image au bord gauche */
.text-image-logo .container.reverse-columns .image-single-container .image-single {
    margin-left: -260px;
}

/* CRITIQUE: marges négatives pour coller l'image au bord droit */
.text-image-logo .container:not(.reverse-columns) .image-single-container .image-single {
    margin-right: -245px;
    margin-top: -230px;
}

.text-image-logo .container .content-container {
    width: 70%;
}

.text-image-logo .container .content-container h2 {
    color: #483c3c;
    font-family: Gelasio;
    font-size: 45px;
    font-weight: 600;
    padding-bottom: 20px;
}

.text-image-logo .container .content-container h3 {
    color: #483c3c;
    font-family: Work Sans;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 20px;
}

.text-image-logo .container .content-container p {
    color: #000;
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 300;
}

.text-image-logo .container .content-container .logos-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 50px;
}

.text-image-logo .container .content-container .logos-container .logo-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: auto;
}

.logos-container .logo-item img {
    width: 30px;
}

.logo-item .logo-text {
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #483C3C;
}

.image-single-container {
    position: relative;
}

.image-single img {
    width: 100%;
}

.text-image-logo .headband {
    background-image: url('../images/general/background-process.webp');
    background-repeat: no-repeat;
    background-size: cover;
    left: 20%;
    position: absolute;
    text-align: center;
    top: 400px;
    width: 300px;
    z-index: 1;
}

.text-image-logo .headband p {
    color: #483c3c;
    font-family: Gelasio;
    font-size: 20px;
    font-weight: 600;
    padding-top: 5px;
}

/* Package Block Section */
.package-block {
    padding-bottom: 50px;
    position: relative;
    z-index: 0;
}

.package-block .container {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.package-block .container h2 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 20px;
    padding-top: 50px;
    text-align: center;
    width: 100%;
}

.package-block .container .packages {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Grille 3x3 - 3 packages par ligne */
.package-block .container .packages .package-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(33.33% - 20px);
    margin-bottom: 30px;
}

.package-block .container .packages .package-item .package-title-txt {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.package-block .container .packages .package-item .package-title-txt h3 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 22.195px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.package-block .container .packages .package-item .package-title-txt .package-item-box-img {
    height: 220px;
    max-height: 310px;
    max-width: 310px;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}

.package-block .container .packages .package-item .package-title-txt .package-item-box-img img {
    height: auto;
    max-width: 210px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.package-block .container .packages .package-item .package-title-txt .package-item-box-img:after {
    content: url('../images/general/smoke-2-6.webp');
    height: 100%;
    left: 0;
    position: absolute;
    top: -50px;
    z-index: 0;
}

.package-block .container .packages .package-item .package-title-txt p {
    align-items: center;
    color: #000;
    display: flex;
    flex-direction: column;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    gap: 8px;
    /* min-height, pas height : la hauteur fixe servait à aligner les cartes
       entre elles, mais elle ne tenait que pour les descriptions courtes. Au-delà
       le texte sortait de sa boîte et se posait sur l'âge et la durée juste en
       dessous — 80px de débordement sur téléphone, 35 sur tablette, 8 encore sur
       ordinateur. En min-height l'alignement est conservé et le texte pousse ce
       qui le suit au lieu de le recouvrir. */
    min-height: 150px;
    line-height: normal;
    max-width: 400px;
    padding-bottom: 20px;
    padding-top: 50px;
    text-align: center;
    width: 100%;
}

.package-block .container .packages .package-item .package-title-txt .package-item-additional-info {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    max-width: 280px;
    text-align: center;
    width: 100%;
}

.package-block .container .packages .package-item .package-title-txt .package-item-additional-info span {
    align-items: center;
    color: #000;
    display: flex;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    gap: 8px;
    line-height: normal;
    text-align: center;
}

.package-block .container .packages .package-item .package-button {
    padding-top: 30px;
    margin-top: auto;
    width: 100%;
    text-align: center;
}

.package-block .container .packages .package-item .package-button a {
    background-color: #483c3c;
    border: none;
    border-radius: 2rem;
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    padding: 5px 30px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    z-index: 50;
}

.package-block .container .packages .package-item .package-button a:hover {
    background-color: #2d2424;
    transform: translateY(-2px);
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
    .txt2-img .container,
    .txt-img2 .container,
    .package-block .container {
        padding: 0 20px !important;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .txt2-img {
        padding-top: 250px;
    }

    .txt2-img .container .breadcrum {
        padding-bottom: 40px;
    }

    .txt2-img .container .content {
        align-items: center;
        flex-direction: column;
    }

    .txt2-img .container .content .text-section {
        width: 100%;
    }

    .txt2-img .container .content .text-section h1 {
        font-size: 35px;
        margin-bottom: 40px;
    }

    .txt2-img .container .content .text-section h1:after {
        display: none;
    }

    .txt2-img .container .content .text-section .first-txt {
        max-width: 100%;
        padding-bottom: 50px;
    }

    .txt2-img .container .content .text-section .about-section h2 {
        font-size: 35px;
        margin-top: 40px;
    }

    .txt2-img .container .content .text-section .about-section p {
        font-size: 16px;
        padding-bottom: 10px;
    }

    .txt2-img .container .content .text-section .about-section .wysiwyg p {
        font-size: 14px;
        max-width: 100%;
    }

    .txt2-img .container .content .text-section .about-button {
        padding-top: 10px;
    }

    .txt2-img .container .content .image-section {
        display: none;
    }

    .img2-txt .container {
        flex-direction: column;
    }

    .img2-txt .container .about-images {
        display: none;
    }

    .img2-txt .container .about-content {
        padding: 0 10px;
        width: 100%;
    }

    .img2-txt .container .about-content h2 {
        font-size: 35px;
    }

    .img2-txt .container .about-content h3 {
        font-size: 16px;
    }

    .img2-txt .container .about-content .about-description p {
        font-size: 14px;
    }

    .img2-txt .separator {
        padding-bottom: 30px;
        padding-top: 30px;
    }

    .restaurant-section .container h2 {
        font-size: 35px;
    }

    .restaurant-section .container .restaurant-description {
        font-size: 16px;
    }

    .restaurant-section .container .restaurant-list .restaurant-item .restaurant-details h3 {
        font-size: 18px;
    }

    .txt-img2 {
        margin-bottom: -150px;
        padding-top: 0;
    }

    .txt-img2 .container .txt-imagep {
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .txt-img2 .container .txt-imagep .section-text {
        margin-top: 30px;
        max-width: 100%;
        padding: 0 20px;
    }

    .txt-img2 .container .txt-imagep .section-text h1,
    .txt-img2 .container .txt-imagep .section-text h2 {
        font-size: 28px;
    }

    .txt-img2 .container .txt-imagep .section-picture {
        display: none;
    }

    .text-image-logo .container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .text-image-logo .container.reverse-columns .content-container,
    .text-image-logo .container.reverse-columns .image-single-container {
        order: 0;
    }

    .text-image-logo .content-container h2 {
        font-size: 35px;
    }

    .package-block .container h2 {
        font-size: 30px;
        padding-bottom: 20px;
        padding-top: 50px;
    }

    .package-block .container .packages {
        justify-content: center;
    }

    .banner .title-container h1 {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .txt2-img {
        padding-top: 250px;
    }

    .txt2-img .container .content .text-section h1 {
        font-size: 28px;
    }

    .txt2-img .container .content .text-section .first-txt {
        font-size: 12px;
        padding-bottom: 30px;
    }

    .txt2-img .container .content .text-section .about-section h2 {
        font-size: 28px;
    }

    .txt2-img .container .content .text-section .about-section p {
        font-size: 14px;
    }

    .restaurant-section .container h2 {
        font-size: 28px;
    }

    .restaurant-section .container .restaurant-description {
        font-size: 14px;
    }

    .restaurant-section .container .restaurant-list .restaurant-item .restaurant-logo img {
        max-height: 80px;
    }

    .restaurant-section .container .restaurant-list .restaurant-item .restaurant-details h3 {
        font-size: 16px;
    }

    .restaurant-section .container .restaurant-list .restaurant-item .restaurant-details .restaurant-address p,
    .restaurant-section .container .restaurant-list .restaurant-item .restaurant-details .restaurant-zip-code p,
    .restaurant-section .container .restaurant-list .restaurant-item .restaurant-details .restaurant-phone p {
        font-size: 12px;
    }

    /* Packages: 1 par ligne sur mobile */
    .package-block .container .packages .package-item {
        flex: 0 0 100%;
    }

    .package-block .container .packages .package-item .package-title-txt h3 {
        font-size: 18px;
    }

    /* La fumee fait 333px pour une carte de 148 : ancree a gauche, elle ne
       debordait que du cote droit et paraissait decalee. Centree sur la carte,
       elle deborde symetriquement. */
    .package-block .container .packages .package-item .package-title-txt .package-item-box-img:after {
        left: 50%;
        transform: translateX(-50%);
    }

    .package-block .container .packages .package-item .package-title-txt p {
        font-size: 12px;
        max-width: 240px;
    }

    .package-block .container .packages .package-item .package-title-txt .package-item-additional-info span {
        font-size: 12px;
    }

    .package-block .container .packages .package-item .package-button {
        padding-bottom: 30px;
    }

    .banner {
        padding: 180px 20px 80px;
    }

    .banner .title-container h1 {
        font-size: 2.5rem;
    }

    .headband p {
        font-size: 1.5rem;
    }

    .logos-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 425px) {
    .img2-txt .container .about-content {
        padding: 0 15px;
        width: 100%;
    }

    .img2-txt .separator {
        padding-bottom: 30px;
        padding-top: 30px;
    }
}

/* Media queries spécifiques Escape Box - VALEURS EXACTES DU CSS ORIGINAL */
@media (max-width: 991px) {
    .text-image-logo .container {
        margin-top: 50px;
        padding: 0 20px !important;
        text-align: center;
    }

    .txt-img2 .container,
    .txt-img3 .container {
        padding: 0 20px !important;
        width: 100%;
    }

    .banner .container {
        padding: 0 20px !important;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .txt-img2 {
        margin-bottom: -150px;
        padding-top: 0;
    }

    .txt-img2 .container .txt-imagep,
    .txt-img3 .container .txt-imagep {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .txt-img2 .container .txt-imagep .section-text,
    .txt-img3 .container .txt-imagep .section-text {
        margin-top: 30px;
        max-width: 100%;
        padding: 0 20px;
    }

    .txt-img2 .container .txt-imagep .section-text h1,
    .txt-img2 .container .txt-imagep .section-text h2,
    .txt-img3 .container .txt-imagep .section-text h1,
    .txt-img3 .container .txt-imagep .section-text h2 {
        font-size: 28px;
    }

    .txt-img2 .container .txt-imagep .section-text p,
    .txt-img3 .container .txt-imagep .section-text p {
        font-size: 14px;
    }

    .txt-img2 .container .txt-imagep .section-picture,
    .txt-img3 .container .txt-imagep .section-picture {
        display: none;
    }

    .txt-img3 {
        padding-bottom: 50px;
        padding-top: 0;
    }

    /* Packages: 2 par ligne sur tablette */
    .package-block .container .packages .package-item {
        flex: 0 0 calc(50% - 20px);
    }

    .text-image-logo .container.reverse-columns .content-container {
        padding: 0 20px;
        width: 100%;
    }

    .text-image-logo .container.reverse-columns .content-container h2 {
        font-size: 30px;
    }

    .text-image-logo .container.reverse-columns .content-container h3 {
        font-size: 16px;
    }

    .text-image-logo .container.reverse-columns .content-container p {
        font-size: 14px;
    }

    .text-image-logo .container.reverse-columns .content-container .logos-container {
        align-items: center;
        flex-direction: column;
    }

    .text-image-logo .container.reverse-columns .image-single-container {
        display: none;
    }

    .text-image-logo .container .content-container {
        width: 100%;
    }

    .text-image-logo .container .content-container h2 {
        font-size: 30px;
    }

    .text-image-logo .container .content-container h3 {
        font-size: 16px;
    }

    .text-image-logo .container .content-container p {
        font-size: 14px;
    }

    .text-image-logo .container .content-container .logos-container {
        align-items: center;
        flex-direction: column;
    }

    .text-image-logo .container:not(.reverse-columns) .image-single-container {
        display: none;
    }

    .text-image-logo .headband {
        display: none;
    }
}

@media (max-width: 630px) {
    .banner {
        background-image: none !important;
        padding: 0 !important;
        width: 100%;
    }

    .banner:before {
        display: none;
    }

    .banner .container {
        margin-top: 100px;
    }

    .banner .title-container h1 {
        color: #483c3c;
    }

    .banner .title-container {
        padding: 0 20px !important;
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .text-image-logo .container .content-container h2 {
        font-size: 25px;
    }

    .text-image-logo .container .content-container h3 {
        font-size: 14px;
    }

    .text-image-logo .container .content-container p {
        font-size: 12px;
    }

    .text-image-logo .container .content-container .logos-container {
        padding-top: 20px;
    }
}

/* ========================================
   PAGE CHÈQUES CADEAUX
   ======================================== */

/* Section gift-card */
.gift-card {
    background: #dedbc3;
    padding-top: 230px;
    position: relative;
    z-index: 5;
}

@media (max-width: 768px) {
    .gift-card {
        margin-bottom: 0;
        padding-top: 230px;
    }
}

.gift-card .container {
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 991px) {
    .gift-card .container {
        padding: 0 20px !important;
        width: 100%;
    }
}

.gift-card .container .txt-imagep {
    display: flex;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .gift-card .container .txt-imagep {
        align-items: center;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

.gift-card .container .txt-imagep .section-text {
    margin-top: 65px;
    max-width: 55%;
}

@media (max-width: 768px) {
    .gift-card .container .txt-imagep .section-text {
        margin-top: 20px;
        max-width: 100%;
        padding: 0 10px;
    }
}

.gift-card .container .txt-imagep .section-text h1 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 20px;
    padding-top: 100px;
}

@media (max-width: 768px) {
    .gift-card .container .txt-imagep .section-text h1 {
        font-size: 24px;
        padding-top: 20px;
    }
}

.gift-card .container .txt-imagep .section-text p {
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 15px;
}

.gift-card .container .txt-imagep .section-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .gift-card .container .txt-imagep .section-text p {
        font-size: 12px;
        line-height: 1.5;
    }
}

.gift-card .container .txt-imagep .section-picture {
    margin-top: 100px;
    position: relative;
    width: 45%;
    z-index: 20;
}

.gift-card .container .txt-imagep .section-picture img {
    display: block;
    height: auto;
    object-fit: cover;
    position: relative;
    width: 100%;
    z-index: 2;
}

.gift-card .container .txt-imagep .section-picture:after {
    background-image: url('../images/general/smoke-2-6.webp');
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 200%;
    left: -50px;
    position: absolute;
    top: -200px;
    width: 200%;
    z-index: 1;
}

@media (max-width: 768px) {
    .gift-card .container .txt-imagep .section-picture {
        display: none;
    }
}

/* Gift overlay */
.gift-overlay {
    background-image: url('../images/general/paper_origin_croped.webp');
    background-size: cover;
    height: 100%;
    left: 0;
    max-height: 270px;
    position: absolute;
    transform: translateY(110px) scaleY(-1);
    width: 100vw;
}

@media (max-width: 1024px) {
    .gift-overlay {
        transform: translateY(-80px);
    }
}

.gift-overlay .small-image-reviews {
    height: 410px;
    left: -50px;
    position: absolute;
    top: 0;
    transform: scaleY(-1) rotate(80deg);
    width: 400px;
    z-index: 50;
}

.gift-overlay .small-image-reviews img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
    z-index: 50;
}

@media (max-width: 1024px) {
    .gift-overlay .small-image-reviews {
        display: none;
    }
}

/* Section advantage */
.advantage {
    padding-top: 400px;
}

@media (max-width: 768px) {
    .advantage {
        padding-top: 200px;
    }
}

.advantage .container {
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 991px) {
    .advantage .container {
        padding: 0 20px !important;
        width: 100%;
    }
}

.advantage .container h2 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .advantage .container h2 {
        font-size: 28px;
    }
}

.advantage .container .title-advantage {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .advantage .container .title-advantage {
        font-size: 28px;
    }
}

.advantage .container .description-advantage {
    color: #483c3c;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin: 0 auto;
    max-width: 850px;
    padding-bottom: 75px;
    text-align: center;
    width: 100%;
}

@media (max-width: 768px) {
    .advantage .container .description-advantage {
        font-size: 14px;
        padding-bottom: 50px;
    }
}

/* Modality (les 3 avantages) */
.advantage .container .modality {
    display: flex;
    justify-content: space-between;
    position: relative;
}

@media (max-width: 768px) {
    .advantage .container .modality {
        align-items: center;
        flex-direction: column;
    }
}

.advantage .container .modality .modality-item {
    position: relative;
    text-align: center;
}

.advantage .container .modality .modality-item .modality-logo {
    max-width: 100px;
    height: auto;
}

.advantage .container .modality .modality-item .modality-txt {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-top: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .advantage .container .modality .modality-item .modality-txt {
        font-size: 20px;
    }
}

/* Séparateurs entre les modalités */
.advantage .container .modality .modality-item:nth-child(2):before,
.advantage .container .modality .modality-item:nth-child(2):after {
    background-image: url('../images/general/square.svg');
    background-repeat: no-repeat;
    content: "";
    height: 2rem;
    position: absolute;
    width: 2rem;
}

.advantage .container .modality .modality-item:nth-child(2):before {
    left: -150px;
    top: 40%;
    transform: translateY(-50%);
}

.advantage .container .modality .modality-item:nth-child(2):after {
    right: -150px;
    top: 40%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .advantage .container .modality .modality-item:nth-child(2):before,
    .advantage .container .modality .modality-item:nth-child(2):after {
        display: none;
    }
}

/* Separator */
.advantage .container .separator {
    padding-bottom: 50px;
    padding-top: 30px;
    text-align: center;
    width: 100%;
}

@media (max-width: 450px) {
    .advantage .container .separator {
        padding-bottom: 30px;
    }
}

/* iframe 4escape.io */
.advantage .container .iframe-gift {
    overflow: hidden;
    width: 100%;
}

/* ========================================
   PAGE CONTACT
   ======================================== */

/* Section formulaire */
.form {
    padding-top: 250px;
}

.form .container {
    box-sizing: border-box;
}

@media (max-width: 991px) {
    .form .container {
        padding: 0 20px !important;
        width: 100%;
    }
}

/* Section1 - Titre et description */
.form .container .section1 {
    margin-top: -30px;
    width: 100%;
}

.form .container .section1 .form-title {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.form .container .section1 .form-description {
    color: #464646;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 auto;
    max-width: 400px;
    padding-top: 10px;
    text-align: center;
    width: 100%;
}

.form .container .section1 .form-number {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-top: 30px;
    text-align: center;
}

.form .container .separator {
    padding-bottom: 40px;
    padding-top: 30px;
    text-align: center;
    width: 100%;
}

/* Section2 - Images + Formulaire */
.form .container .section2 {
    display: flex;
    position: relative;
    width: 100%;
}

.form .container .section2 .form-image {
    left: -400px;
    position: absolute;
    top: -400px;
}

.form .container .section2 .form-image img {
    height: auto;
    max-width: 500px;
}

@media (max-width: 768px) {
    .form .container .section2 .form-image {
        display: none;
    }
}

.form .container .section2 .form-content {
    margin: 0 auto;
    width: 40%;
}

@media (max-width: 991px) {
    .form .container .section2 .form-content {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .form .container .section2 .form-content {
        padding-right: 10px;
        width: 100%;
    }
}

.form .container .section2 .form-content .form-description2 {
    color: #483c3c;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-align: center;
}

.form .container .section2 .form-image2 {
    position: absolute;
    right: -400px;
    top: -400px;
}

.form .container .section2 .form-image2 img {
    height: auto;
    max-width: 500px;
}

@media (max-width: 768px) {
    .form .container .section2 .form-image2 {
        display: none;
    }
}

/* Formulaire */
.form .container .section2 .cqt-form .one-col {
    display: grid;
    grid-template-columns: 1fr;
}

.form .container .section2 .cqt-form .two-cols {
    column-gap: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
    .form .container .section2 .cqt-form .two-cols {
        grid-template-columns: 1fr;
    }
}

.form .container .section2 .cqt-form .acceptance-field p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #464646;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
}

.form .container .section2 .cqt-form .acceptance-field .wpcf7-acceptance {
    margin-right: 0;
    flex-shrink: 0;
}

.form .container .section2 .cqt-form .acceptance-field input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #483c3c;
}

@media (max-width: 768px) {
    .form .container .section2 .cqt-form .acceptance-field {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

.form .container .section2 .cqt-form span {
    display: block;
}

.form .container .section2 .cqt-form input:not([type=checkbox]),
.form .container .section2 .cqt-form textarea:not([type=checkbox]) {
    background-color: #f4f2e3;
    border: none;
    border-radius: 8px;
    display: flex;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    padding: 9px 0 9px 12px;
    width: 100%;
}

.form .container .section2 .cqt-form input:not([type=checkbox])::placeholder,
.form .container .section2 .cqt-form textarea:not([type=checkbox])::placeholder {
    color: #464646;
    font-family: Montserrat, sans-serif;
    font-weight: 300;
}

.form .container .section2 .cqt-form input:not([type=checkbox]):focus,
.form .container .section2 .cqt-form textarea:not([type=checkbox]):focus {
    border: 1px solid rgba(0, 0, 0, 0.07);
    outline: none;
}

@media (max-width: 768px) {
    .form .container .section2 .cqt-form input,
    .form .container .section2 .cqt-form textarea {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

/* La hauteur fixe ne vise QUE les champs de saisie.
   Sans l'exclusion du bouton d'envoi, celui-ci héritait de height: 36px alors
   qu'il a 16px de rembourrage en haut et en bas : en box-sizing: border-box, la
   zone de contenu tombait à 4px et le libellé se retrouvait décentré
   verticalement. Le CSS d'origine ne fixait aucune hauteur sur ce bouton. */
.form .container .section2 .cqt-form input:not([type=checkbox]):not([type=submit]) {
    height: 36px;
}

.form .container .section2 .cqt-form textarea {
    border-radius: 6px;
    height: 180px;
    resize: none;
}

/* Bouton submit */
.form .container .section2 .cqt-form .submit-btn {
    position: relative;
    text-align: center;
    z-index: 30;
}

/* Centrage du bouton : la balise <p> wrapper hérite text-align:center */
.form .container .section2 .form-content p {
    text-align: center;
}

.form .container .section2 .cqt-form .submit-btn p {
    text-align: center;
    margin: 0;
}

.form .container .section2 .cqt-form .submit-btn input[type="submit"] {
    background-color: #483c3c;
    border: none;
    border-radius: 2rem;
    color: #fff;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 1rem 40px;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.3s ease;
    z-index: 50;
    position: relative;
}

.form .container .section2 .cqt-form .submit-btn input[type="submit"]:hover {
    background-color: #2d2424;
    transform: translateY(-2px);
}

/* ========================================
   SECTION CARTE (MAP)
   ======================================== */

.map-section {
    padding-top: 100px;
    position: relative;
}

.map-section .container,
.map-section .container h2 {
    position: relative;
    z-index: 3;
}

.map-section .container .map-title {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.map-section .container .map-title:before {
    content: url('../images/general/whitesmoke.svg');
    height: 100%;
    position: absolute;
    right: 0;
    top: -200px;
    width: auto;
    z-index: 1;
}

.map-section .container .map-description {
    color: #464646;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 80px;
    position: relative;
    text-align: center;
    z-index: 3;
}

.map-section .container .map-container {
    position: relative;
    z-index: 3;
}

/* Carte Leaflet (remplace l'ancienne iframe uMap).
   Leaflet exige une hauteur explicite sur son conteneur : sans elle, la carte
   se replie à zéro pixel et reste invisible. */
.map-section .container .ls-map {
    height: 502px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    /* Sous la pastille du bandeau cookies et le menu, jamais au-dessus. */
    z-index: 1;
}

/* Contrôles et attribution aux couleurs du site */
.ls-map .leaflet-control-zoom a {
    color: #483c3c;
}

.ls-map .leaflet-popup-content {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

.ls-map .leaflet-popup-content a {
    color: #C19A59;
    font-weight: 600;
}

@media (max-width: 768px) {
    .map-section .container .ls-map {
        height: 360px;
    }
}

/* Section "Comment s'y rendre" */
.map-section .container .go-section {
    position: relative;
}

.map-section .container .go-section .go-title {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
}

.map-section .container .go-section .go-description {
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 15.63px;
    font-style: normal;
    font-weight: 400;
    margin-top: -2px;
    text-align: center;
}

/* Moyens de transport */
.map-section .container .transportation-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-top: 50px;
}

.map-section .container .transportation-section .transportation-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px;
}

.map-section .container .transportation-section .transportation-item .transportation-description {
    max-width: 170px;
    text-align: center;
    width: 100%;
}

/* Effets de fumée */
.map-section:after {
    content: url('../images/general/smoke-2-13.webp');
    height: 100%;
    position: absolute;
    right: 0;
    top: 300px;
    width: 100%;
    z-index: 1;
}

@media (max-width: 768px) {
    .map-section:after {
        display: none;
    }
}

.map-section:before {
    content: url('../images/general/smoke-single.webp');
    height: 100%;
    position: absolute;
    right: 0;
    top: 350px;
    width: auto;
    z-index: 1;
}

@media (max-width: 768px) {
    .map-section:before {
        display: none;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .map-section .container .map-title {
        font-size: 35px;
    }

    .map-section .container .map-description {
        font-size: 13px;
        padding-bottom: 60px;
    }

    .map-section .container .go-section .go-title {
        font-size: 35px;
    }

    .map-section .container .go-description {
        font-size: 14px;
    }

    .map-section .container .transportation-section {
        justify-content: space-around;
    }
}

@media (max-width: 768px) {
    .map-section .container .map-title {
        font-size: 28px;
    }

    .map-section .container .map-description {
        font-size: 12px;
        padding-bottom: 40px;
    }

    .map-section .container .go-section .go-title {
        font-size: 28px;
    }

    .map-section .container .go-description {
        font-size: 13px;
    }

    .map-section .container .transportation-section .transportation-item {
        margin-bottom: 15px;
    }

    .map-section .container .transportation-section .transportation-item .transportation-description {
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .map-section .container .map-title {
        font-size: 22px;
    }

    .map-section .container .map-description {
        font-size: 11px;
        padding-bottom: 30px;
    }

    .map-section .container .go-section .go-title {
        font-size: 22px;
    }

    .map-section .container .go-description {
        font-size: 12px;
    }

    .map-section .container .transportation-section {
        align-items: center;
        flex-direction: column;
    }

    .map-section .container .transportation-section .transportation-item {
        margin-bottom: 10px;
    }

    .map-section .container .transportation-section .transportation-item .transportation-description {
        max-width: 120px;
    }
}

/* ========================================
   PAGES GROUPES (Team Building, EVJF/EVG, Anniversaires, Soirée Énigmes)
   CSS extrait du site WordPress original
   ======================================== */

/* Overlays */
.overlay-box {
    background-image: url('../images/general/paper_origin_croped.webp');
    background-size: cover;
    height: 100%;
    left: 0;
    max-height: 270px;
    position: absolute;
    transform: translateY(-265px) scaleY(-1);
    width: 100vw;
}

.overlay-srvc-top2 {
    background-image: url('../images/general/paper_origin_croped.webp');
    background-size: cover;
    height: 100%;
    left: 0;
    max-height: 270px;
    position: absolute;
    transform: scaleY(1);
    width: 100vw;
    z-index: 0;
}

.timeline-overlay {
    background-image: url('../images/general/paper_origin_croped.webp');
    background-size: cover;
    height: 100%;
    left: 0;
    max-height: 270px;
    position: absolute;
    transform: scale(-1) translateY(270px);
    width: 100vw;
    z-index: 10;
}

@media (max-width: 768px) {
    .timeline-overlay {
        transform: scale(-1) translateY(320px);
    }
}

@media (max-width: 425px) {
    .timeline-overlay {
        transform: scale(-1) translateY(260px);
    }
}

.video-overlay {
    background-image: url('../images/general/paper_origin_croped.webp');
    background-size: cover;
    height: 100%;
    left: 0;
    max-height: 270px;
    position: absolute;
    transform: translateY(-300px);
    width: 100vw;
    z-index: 2;
}

/* Section texte et polaroid */
.txt-and-polaroid {
    position: relative;
}

.txt-and-polaroid .container {
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 991px) {
    .txt-and-polaroid .container {
        padding: 0 20px !important;
        width: 100%;
    }
}

.txt-and-polaroid .container .txt-imagep {
    display: flex;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .txt-and-polaroid .container .txt-imagep {
        align-items: center;
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
        width: 100%;
    }
}

.txt-and-polaroid .container .txt-imagep .section-text {
    margin-top: 65px;
    max-width: 55%;
}

@media (max-width: 768px) {
    .txt-and-polaroid .container .txt-imagep .section-text {
        margin-top: 50px;
        max-width: 100%;
        padding: 0 20px;
    }
}

.txt-and-polaroid .container .txt-imagep .section-text h3 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 20px;
}

@media (max-width: 768px) {
    .txt-and-polaroid .container .txt-imagep .section-text h3 {
        font-size: 30px;
    }
}

.txt-and-polaroid .container .txt-imagep .section-text h4 {
    color: #483c3c;
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px;
}

.txt-and-polaroid .container .txt-imagep .section-text p {
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.txt-and-polaroid .container .txt-imagep .section-pictures {
    margin-bottom: 20px;
    position: relative;
    transform: translateX(150px);
    width: 45%;
    z-index: 20;
}

@media (max-width: 768px) {
    .txt-and-polaroid .container .txt-imagep .section-pictures {
        display: none;
    }
}

.txt-and-polaroid .container .txt-imagep .section-pictures .image-filter {
    left: 0;
    position: relative;
    top: 5px;
    width: 100%;
    z-index: 20;
}

.txt-and-polaroid .container .txt-imagep .section-pictures .polaroid {
    max-width: 355px;
    overflow: hidden;
    position: relative;
    z-index: 20;
}

.txt-and-polaroid .container .txt-imagep .section-pictures .polaroid.even {
    position: relative;
    transform: rotate(15deg);
}

.txt-and-polaroid .container .txt-imagep .section-pictures .polaroid.even .image-main {
    height: 320px;
    max-width: 320px;
    object-fit: cover;
    position: absolute;
    transform: translate(24px, 29px);
    z-index: 30;
}

.txt-and-polaroid .container .txt-imagep .section-pictures .polaroid.odd {
    position: absolute;
    transform: rotate(25deg) translateY(-250px);
}

.txt-and-polaroid .container .txt-imagep .section-pictures .polaroid.odd .image-main {
    height: 300px;
    max-width: 300px;
    object-fit: cover;
    position: absolute;
    transform: translate(20px, 27px);
    z-index: 30;
}

/* Section carrés */
.square-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto !important;
    justify-content: center;
    margin-bottom: 300px;
    margin-top: 30px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 5;
}

.square-section .square-title-text h3 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 2rem;
    z-index: 5;
}

.square-section .square-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 5rem;
    justify-content: center;
    width: 100%;
}

@media (max-width: 768px) {
    .square-section .square-container {
        flex-direction: column;
        /* Gouttiere laterale du cadre. S'ajoute aux 15px de .container, soit
           47px de marge de chaque cote sur un ecran de 375. */
        padding: 0 2rem;
    }
}

/* 386px de large sur un ecran de 375 : le cadre art-deco depassait de 5,5px de
   chaque cote et ses angles etaient rognes par les bords de l'ecran.
   max-width le ramene dans la largeur disponible, et min-height evite que
   Safari ne comprime le texte quand il depasse les 400px imposes. */
.square-section .square-container .square {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    justify-content: center;
    position: relative !important;
    width: 386px;
    max-width: 100%;
}

.square-section .square-container .square .square-frame {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.square-section .square-container .square .square-frame img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.square-section .square-container .square .square-text {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 80%;
    z-index: 1;
}

.square-section .square-container .square .square-text h4 {
    font-family: Gelasio, serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.square-section .square-container .square .square-text p {
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

/* Timeline */
.timeline {
    padding-bottom: 30px;
    position: relative;
    z-index: 1;
}

.timeline .container {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.timeline .container .block-title h3 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 35px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 100px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.timeline .container .block-process {
    margin: auto;
    position: relative;
    width: fit-content;
}

.timeline .container .block-process .image-left {
    width: 58vw;
    max-width: 900px;
    position: absolute;
    right: calc(100% + 10px);
    top: 0;
    z-index: -1;
}

@media (max-width: 768px) {
    .timeline .container .block-process .image-left {
        display: none;
    }
}

.timeline .container .block-process .list-process {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    max-width: 400px;
    position: relative;
    width: 100%;
}

.timeline .container .block-process .list-process .process-step {
    align-items: center;
    background-image: url('../images/general/background-process.webp');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15px 40px;
    text-align: center;
    width: 100%;
    z-index: 1;
}

.timeline .container .block-process .list-process .process-step h4 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    width: 100%;
}

.timeline .container .block-process .list-process .process-step p {
    color: #000;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-align: center;
}

.timeline .container .block-process .list-process .process-separator {
    margin-bottom: -50px;
    margin-top: -45px;
}

.timeline .container .block-process .image-right {
    bottom: 0;
    left: calc(100% + 10px);
    width: 58vw;
    max-width: 900px;
    position: absolute;
    z-index: -1;
}

@media (max-width: 768px) {
    .timeline .container .block-process .image-right {
        display: none;
    }
}

/* Container vidéo */
.video-container {
    display: inline-block;
    margin-top: -300px;
    position: relative;
    width: 100%;
    z-index: 1;
}

@media (max-width: 768px) {
    .video-container {
        margin-top: 0;
        transform: translateY(-200px);
    }
}

.video-container video {
    cursor: pointer;
    width: 100%;
}

.video-container #playpause-overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 60px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
}

.video-container #playpause-overlay #pause-icon,
.video-container #playpause-overlay #play-icon {
    height: 36px;
    width: 36px;
}

.video-container #playpause-overlay #pause-icon {
    display: none;
}

/* Section partenaires */
.partners-section h2 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 40px;
    text-align: center;
}

.partners-section .partners-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
    justify-content: center;
}

.partners-section .partner-frame {
    height: 100%;
}

.partners-section .partner-frame img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

/* Formulaire de service (pages groupes) */
.srvc-form {
    padding-top: 30px;
    position: relative;
}

@media (max-width: 768px) {
    .srvc-form {
        padding-top: 100px;
    }
}

.srvc-form .container h2 {
    color: #483c3c;
    font-family: Gelasio, serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
}

.srvc-form .container .form-wrapper {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: 50%;
    min-height: 100vh;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}

@media (max-width: 991px) {
    .srvc-form .container .form-wrapper {
        max-width: 100%;
        padding: 0 20px !important;
    }
}

.srvc-form .container .form-wrapper .cqt-form .one-col {
    display: grid;
    grid-template-columns: 1fr;
}

.srvc-form .container .form-wrapper .cqt-form .two-cols {
    column-gap: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
    .srvc-form .container .form-wrapper .cqt-form .two-cols {
        grid-template-columns: 1fr;
    }
}

.srvc-form .container .form-wrapper .cqt-form span input:not([type="checkbox"]),
.srvc-form .container .form-wrapper .cqt-form span textarea:not([type="checkbox"]),
.srvc-form .container .form-wrapper .cqt-form span select {
    background-color: #f4f2e3;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    padding: 16px 25px 17px;
    width: 100%;
}

.srvc-form .container .form-wrapper .cqt-form span textarea {
    border-radius: 6px;
    height: 180px;
    resize: none;
}

.srvc-form .container .form-wrapper .acceptance-field p {
    color: #464646;
    display: grid;
    font-family: Montserrat, sans-serif;
    grid-template-columns: 18px 1fr;
}

.srvc-form .container .form-wrapper .submit-btn {
    width: 100%;
}

.srvc-form .container .form-wrapper .submit-btn .wpcf7-submit {
    background-color: #483c3c;
    border: none;
    border-radius: 2rem;
    color: #fff;
    font-family: Work Sans, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 1rem 40px;
    text-align: center;
    text-transform: uppercase;
}

.srvc-form:before {
    opacity: 0.7;
    top: -350px;
    transform: scaleX(-1);
}

.srvc-form:after,
.srvc-form:before {
    background-image: url('../images/general/whitesmoke.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
    pointer-events: none;
}

.srvc-form:after {
    opacity: 0.8;
    top: 250px;
}

.srvc-form .container {
    position: relative;
    z-index: 1;
}
/* Separator */
.separator {
    padding-bottom: 80px;
    padding-top: 60px;
    text-align: center;
    width: 100%;
}

@media (max-width: 480px) {
    .separator {
        padding-bottom: 30px;
    }
}

/* ========================================
   ANNIVERSAIRES ENFANTS - ROOMS SECTION
   ======================================== */

.square-section .rooms-availability {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

@media (max-width: 991px) {
  .square-section .rooms-availability {
    display: flex;
    flex-direction: column;
    padding: 0 20px !important;
    width: 100%;
  }
}

@media (max-width: 895px) {
  .square-section .rooms-availability {
    margin-bottom: 50px;
  }
}

.square-section .rooms-availability h3 {
  font-family: Gelasio, serif;
  font-size: 45px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-bottom: 50px;
  padding-top: 50px;
}

.square-section .rooms-availability .rooms-repeater {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  justify-content: space-evenly;
  margin-bottom: 60px;
  width: 100%;
}

@media (max-width: 991px) {
  .square-section .rooms-availability .rooms-repeater {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 100px;
    justify-content: center;
    padding: 0 20px !important;
    width: 100%;
  }
}

/* min-height et non height : la carte etait figee a 240px pour un contenu de
   342px. Le bouton debordait de 102px, et Safari, qui ecrase les items flex
   d'un conteneur a hauteur figee au lieu de les laisser deborder, le coupait
   en deux. */
.square-section .rooms-availability .rooms-repeater .room {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  margin-top: 50px;
  position: relative;
  width: 15rem;
}

/* Aucun de ces trois blocs ne doit etre comprime par le conteneur flex. */
.square-section .rooms-availability .rooms-repeater .room .rooms-front,
.square-section .rooms-availability .rooms-repeater .room .room-title,
.square-section .rooms-availability .rooms-repeater .room .room-link {
  flex-shrink: 0;
}

.square-section .rooms-availability .rooms-repeater .room .rooms-background {
  position: absolute;
  top: -100px;
  transform: translateX(-60px);
  z-index: 1;
}

.square-section .rooms-availability .rooms-repeater .room .rooms-background img {
  width: 150%;
}

.square-section .rooms-availability .rooms-repeater .room .rooms-front {
  height: 100px;
  padding-bottom: 100px;
  transform: translateX(-25px);
  width: 50%;
  z-index: 2;
}

.square-section .rooms-availability .rooms-repeater .room .rooms-front img {
  width: 150%;
}

/* Quand pas de rooms-background (image banner avec smoke inclus) */
.square-section .rooms-availability .rooms-repeater .room:not(:has(.rooms-background)) .rooms-front {
  height: 200px;
  padding-bottom: 0;
  transform: none;
  width: 100%;
  overflow: hidden;
}

.square-section .rooms-availability .rooms-repeater .room:not(:has(.rooms-background)) .rooms-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.square-section .rooms-availability .rooms-repeater .room:not(:has(.rooms-background)) .room-title {
  margin-top: 10px;
}

.square-section .rooms-availability .rooms-repeater .room .room-title {
  margin-top: 100px;
  z-index: 8;
}

.square-section .rooms-availability .rooms-repeater .room .room-link {
  background-color: #483c3c;
  border: none;
  border-radius: 2rem;
  color: #fff;
  cursor: pointer;
  font-family: Work Sans, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 30px;
  padding: 15px 30px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.3s ease;
  z-index: 8;
}

.square-section .rooms-availability .rooms-repeater .room .room-link:hover {
  background-color: #2d2424;
  transform: translateY(-2px);
}

.square-section .rooms-availability .rooms-repeater .room .room-link a {
  color: #fff;
  font-family: Work Sans, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  height: 100%;
  line-height: normal;
  text-transform: uppercase;
  width: 100%;
}

/* ========================================
   ANNIVERSAIRES ENFANTS - TARIFS SECTION
   ======================================== */

.overlay-spp {
  background-image: url('../images/general/paper_origin_croped.webp');
  background-size: cover;
  height: 100%;
  left: 0;
  max-height: 270px;
  position: absolute;
  transform: scaleY(1);
  width: 100vw;
}

.special-price {
  margin-top: 230px;
  position: relative;
  z-index: 1;
}

.special-price:before {
  background-image: url('../images/general/whitesmoke.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  top: 200px;
  width: 100%;
  z-index: 0;
}

.special-price .container {
  box-sizing: border-box;
  display: flex;
  position: relative;
  z-index: 2;
}

@media (max-width: 991px) {
  .special-price .container {
    align-items: center;
    flex-direction: column;
    padding: 20px !important;
    text-align: center;
  }
}

.special-price .container .content {
  margin-top: 65px;
  max-width: 55%;
}

@media (max-width: 768px) {
  .special-price .container .content {
    margin-top: 20px;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .special-price .container .content {
    margin-top: 10px;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .special-price .container .content .special-price-header {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.special-price .container .content .special-price-header h2 {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 45px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

@media (max-width: 661px) {
  .special-price .container .content .special-price-header h2 {
    font-size: 35px;
    white-space: normal;
  }
}

.special-price .container .content .special-price-header p {
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  max-width: 420px;
  padding-bottom: 60px;
  width: 100%;
}

@media (max-width: 768px) {
  .special-price .container .content .special-price-header p {
    max-width: 100%;
  }

  .special-price .container .content .offers .offer1,
  .special-price .container .content .offers .offer2 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.special-price .container .content .offers .offer1 h3,
.special-price .container .content .offers .offer2 h3 {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.special-price .container .content .offers .offer1 p,
.special-price .container .content .offers .offer2 p {
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  max-width: 380px;
  width: 100%;
}

@media (max-width: 768px) {
  .special-price .container .content .offers .offer1 p,
  .special-price .container .content .offers .offer2 p {
    max-width: 100%;
  }
}

.special-price .container .content .offers .offer1 .price,
.special-price .container .content .offers .offer2 .price {
  height: 100px;
  padding-bottom: 50px;
  padding-left: 50px;
  position: relative;
}

@media (max-width: 768px) {
  .special-price .container .content .offers .offer1 .price,
  .special-price .container .content .offers .offer2 .price {
    padding-left: 20px;
  }
}

.special-price .container .content .offers .offer1 .price p,
.special-price .container .content .offers .offer2 .price p {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding-top: 30px;
  position: relative;
  z-index: 2;
}

@media (max-width: 480px) {
  .special-price .container .content .offers .offer1 .price p,
  .special-price .container .content .offers .offer2 .price p {
    font-size: 20px;
  }
}

.special-price .container .content .offers .offer1 .price span,
.special-price .container .content .offers .offer2 .price span {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  position: relative;
  z-index: 2;
}

@media (max-width: 480px) {
  .special-price .container .content .offers .offer1 .price span,
  .special-price .container .content .offers .offer2 .price span {
    font-size: 14px;
  }
}

.special-price .container .content .offers .offer1 .price .frame-icon,
.special-price .container .content .offers .offer2 .price .frame-icon {
  background-image: url('../images/general/frame.svg');
  background-repeat: no-repeat;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

@media (max-width: 480px) {
  .special-price .container .content .offers .offer1 .price .frame-icon,
  .special-price .container .content .offers .offer2 .price .frame-icon {
    background-position: 50%;
    top: -5px;
  }
}

.special-price .container .content .offers .separator-price {
  padding-bottom: 30px;
  padding-top: 30px;
  width: 100%;
}

@media (max-width: 480px) {
  .special-price .container .content .offers .separator-price {
    padding-bottom: 30px;
    padding-top: 30px;
  }
}

.special-price .container .special-price-image {
  margin-bottom: 20px;
  margin-left: 200px;
  margin-top: 150px;
  position: relative;
  width: 45%;
  z-index: 20;
}

.special-price .container .special-price-image img {
  display: block;
  height: auto;
  margin-left: 100px;
  object-fit: cover;
  position: relative;
  width: 100%;
  z-index: 2;
}

.special-price .container .special-price-image:after {
  background-image: url('../images/general/smoke-2-6.webp');
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 150%;
  left: -50px;
  position: absolute;
  top: -100px;
  width: 150%;
  z-index: 1;
}

@media (max-width: 768px) {
  .special-price .container .special-price-image {
    display: none;
  }
}

/* ========================================
   TARIFS ET HORAIRES
   ======================================== */

.slider-price {
  padding-top: 250px;
  position: relative;
}

.slider-price:before {
  content: url('../images/general/whitesmoke.svg');
  height: 100%;
  position: absolute;
  right: 0;
  top: 150px;
  z-index: 0;
}

@media (max-width: 768px) {
  .slider-price:before {
    display: none;
  }
}

.slider-price .container {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .slider-price .container {
    padding: 0 20px !important;
    width: 100%;
  }
}

.slider-price .container .price-title {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 45px;
  font-weight: 600;
  line-height: normal;
  margin-top: -30px;
  text-align: center;
  width: 100%;
}

.slider-price .container .separator {
  padding-bottom: 30px;
  padding-top: 30px;
  text-align: center;
}

@media (max-width: 321px) {
  .slider-price .container .separator {
    display: none;
  }
}

.slider-price .container .swiper {
  overflow: visible !important;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

.slider-price .container .swiper .swiper-slide {
  align-items: center;
  background: #d5d1ba;
  display: flex;
  height: 300px;
  justify-content: center;
  text-align: center;
  width: 220px !important;
  min-width: 220px !important;
}

.slider-price .container .swiper .swiper-slide .price-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.slider-price .container .swiper .swiper-slide .price-item .price-logo {
  margin-bottom: 15px;
}

.slider-price .container .swiper .swiper-slide .price-item .price-logo img {
  width: 60px;
  height: 60px;
}

.slider-price .container .swiper .swiper-slide .price-item .price-details .price-players {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 18.74px;
  font-weight: 600;
  line-height: normal;
  margin-top: -3px;
  text-align: center;
}

.slider-price .container .swiper .swiper-slide .price-item .price-details .price-amount {
  height: 80px;
  position: relative;
}

.slider-price .container .swiper .swiper-slide .price-item .price-details .price-amount p {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  padding-top: 30px;
  position: relative;
  z-index: 2;
}

.slider-price .container .swiper .swiper-slide .price-item .price-details .price-amount span {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.slider-price .container .swiper .swiper-slide .price-item .price-details .price-amount .frame-icon {
  background-image: url('../images/general/frame.svg');
  background-position: center;
  background-repeat: no-repeat;
  height: 200%;
  left: 50%;
  position: absolute;
  top: 50px;
  transform: translate(-50%, -50%);
  width: 200%;
  z-index: 1;
}

.slider-price .container .slider-controls {
  display: flex;
  gap: 60px;
  justify-content: center;
  margin-top: -20px;
  position: relative;
  width: 100%;
  z-index: 1000;
}

@media (max-width: 991px) {
  .slider-price .container .slider-controls {
    display: none;
  }
}

.slider-price .container .slider-controls .swiper-button-next,
.slider-price .container .slider-controls .swiper-button-prev {
  cursor: pointer;
}

.slider-price .container .slider-controls .swiper-button-next::after,
.slider-price .container .slider-controls .swiper-button-prev::after {
  display: none;
}

/* PRICING BLOCK - Tarifs Réduits */

.pricing-block {
  padding-top: 85px;
  position: relative;
}

.pricing-block .container {
  position: relative;
  z-index: 1;
}

.pricing-block .container .pricing-title h2 {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 45px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  z-index: 10;
}

.pricing-block .container .offers {
  display: flex;
  gap: 50px;
  justify-content: center;
  padding-top: 50px;
  z-index: 1;
}

@media (max-width: 480px) {
  .pricing-block .container .offers {
    align-items: center;
    flex-direction: column;
  }
}

.pricing-block .container .offers .individual-offer,
.pricing-block .container .offers .study-offer {
  background: #d5d1ba;
  max-width: 280px;
  padding: 30px 20px;
  width: 100%;
  z-index: 1;
}

.pricing-block .container .offers .individual-offer .offer-header,
.pricing-block .container .offers .study-offer .offer-header {
  text-align: center;
  width: 100%;
}

.pricing-block .container .offers .individual-offer .offer-header h3,
.pricing-block .container .offers .study-offer .offer-header h3 {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 17.769px;
  font-weight: 600;
  line-height: normal;
  padding-bottom: 10px;
  text-align: center;
}

.pricing-block .container .offers .individual-offer .offer-header p,
.pricing-block .container .offers .study-offer .offer-header p {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 14.13px;
  font-weight: 600;
  line-height: normal;
  margin-top: 0;
  text-align: center;
}

.pricing-block .container .offers .individual-offer .offer-details .offer-price,
.pricing-block .container .offers .study-offer .offer-details .offer-price {
  height: 100px;
  position: relative;
  z-index: 1;
}

.pricing-block .container .offers .individual-offer .offer-details .offer-price p,
.pricing-block .container .offers .study-offer .offer-details .offer-price p {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  padding-top: 35px;
  position: relative;
  text-align: center;
  z-index: 2;
}

.pricing-block .container .offers .individual-offer .offer-details .offer-price span,
.pricing-block .container .offers .study-offer .offer-details .offer-price span {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.pricing-block .container .offers .individual-offer .offer-details .offer-price .frame-icon,
.pricing-block .container .offers .study-offer .offer-details .offer-price .frame-icon {
  background-image: url('../images/general/frame.svg');
  background-position: center;
  background-repeat: no-repeat;
  height: 200%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  z-index: 1;
}

.pricing-block .container .offers .individual-offer .offer-details .offer-description,
.pricing-block .container .offers .study-offer .offer-details .offer-description {
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
  padding-top: 10px;
  text-align: center;
}

.pricing-block .container .offers .individual-offer .offer-details .offer-extra-description,
.pricing-block .container .offers .study-offer .offer-details .offer-extra-description {
  color: #666;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding-top: 10px;
  text-align: center;
}

.pricing-block .container .offers .separator-vertical {
  padding-top: 80px;
  z-index: 1;
}

@media (max-width: 426px) {
  .pricing-block .container .offers .separator-vertical {
    display: none;
  }
}

.pricing-block .container .min-price-section {
  position: absolute;
  right: -350px;
  top: 0;
  z-index: 1;
}

@media (max-width: 991px) {
  .pricing-block .container .min-price-section {
    display: none;
  }
}

.pricing-block .container .min-price-section .min-price-image {
  max-width: 400px;
  width: 100%;
}

/* MODALITY OVERLAY */

.modality-overlay {
  background-image: url('../images/general/paper_origin_croped.webp');
  background-size: cover;
  height: 100%;
  left: 0;
  max-height: 270px;
  position: absolute;
  transform: scale(-1);
  width: 100vw;
}

/* MODALITY SECTION - Modalités de paiement */

.modality-section {
  padding-top: 300px;
  position: relative;
}

@media (max-width: 768px) {
  .modality-section {
    padding-top: 150px;
  }
}

.modality-section .container {
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .modality-section .container {
    padding: 0 20px !important;
    width: 100%;
  }
}

.modality-section .container .modality-header {
  text-align: center;
  width: 100%;
}

.modality-section .container .modality-header h1 {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 35px;
  font-weight: 600;
  line-height: normal;
  padding-bottom: 20px;
}

@media (max-width: 768px) {
  .modality-section .container .modality-header h1 {
    font-size: 28px;
  }
}

.modality-section .container .modality-header p {
  color: #464646;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
  width: 100%;
}

.modality-section .container .modality-content {
  padding-top: 70px;
  text-align: center;
  width: 100%;
}

.modality-section .container .modality-content h2 {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 35px;
  font-weight: 600;
  line-height: normal;
  padding-bottom: 40px;
}

.modality-section .container .modality-content .modality-images {
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 100px;
  align-items: center;
}

@media (max-width: 768px) {
  .modality-section .container .modality-content .modality-images {
    align-items: center;
    flex-direction: column;
    gap: 20px;
  }
}

.modality-section .container .modality-footer {
  position: relative;
  text-align: center;
  width: 100%;
}

.modality-section .container .modality-footer h3 {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 35px;
  font-weight: 600;
  line-height: normal;
  margin-top: 30px;
  padding-bottom: 20px;
}

.modality-section .container .modality-footer p {
  color: #464646;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
  width: 100%;
}

.modality-section .container .modality-footer .bigframe-icon {
  background-image: url('../images/general/bigframe.png');
  background-position: center;
  background-repeat: no-repeat;
  height: 250%;
  position: absolute;
  top: -100px;
  width: 100%;
  z-index: 1;
}

@media (max-width: 768px) {
  .modality-section .container .modality-footer .bigframe-icon {
    display: none;
  }
}

/* MODALITY OVERLAY 2 (valeurs exactes CSS WordPress original ligne 2550) */

.modality-overlay2 {
  background-image: url('../images/general/paper_origin_croped.webp');
  background-size: cover;
  height: 260px;
  left: 0;
  position: absolute;
  width: 100vw;
}

.modality-overlay2 .min-image {
  height: 400px;
  position: absolute;
  right: 150px;
  top: 0;
  transform: rotate(40deg);
  width: 300px;
  z-index: 2;
}

.modality-overlay2 .min-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
  z-index: 2;
}

@media (max-width: 768px) {
  .modality-overlay2 .min-image {
    display: none;
  }
}

/* SCHEDULEG SECTION - Horaires */

.scheduleg-section {
  padding-bottom: 250px;
  padding-top: 250px;
  position: relative;
}

@media (max-width: 768px) {
  .scheduleg-section {
    padding-bottom: 0;
    padding-top: 80px;
  }
}

.scheduleg-section .container {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  position: relative;
  width: 100%;
}

.scheduleg-section .container h2 {
  font-family: Gelasio, serif;
  font-size: 2.8125rem;
  font-weight: 400;
  line-height: normal;
  padding-bottom: 20px;
  z-index: 5;
  color: #483c3c;
}

.scheduleg-section .container .time-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  z-index: 5;
}

.scheduleg-section .container .time-container .decoration-line {
  text-align: center;
  padding: 10px 0;
  width: 100%;
}

.scheduleg-section .container .time-container .schedule-container,
.scheduleg-section .container .time-container .schedule-specials-container {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 20px;
  padding-top: 10px;
  width: 100%;
}

@media (max-width: 576px) {
  .scheduleg-section .container .time-container .schedule-container,
  .scheduleg-section .container .time-container .schedule-specials-container {
    flex-direction: column;
    width: 100%;
  }
}

.scheduleg-section .container .time-container .schedule-container .schedule-item,
.scheduleg-section .container .time-container .schedule-specials-container .schedule-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 30%;
  padding: 10px 20px;
}

@media (max-width: 576px) {
  .scheduleg-section .container .time-container .schedule-container .schedule-item,
  .scheduleg-section .container .time-container .schedule-specials-container .schedule-item {
    width: 80%;
  }
}

.scheduleg-section .container .time-container .schedule-item .schedule-days {
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #483c3c;
}

.scheduleg-section .container .time-container .schedule-item .schedule-time {
  font-family: Gelasio, serif;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: normal;
  color: #483c3c;
}

.scheduleg-section .container .time-container .schedule-container .schedule-item:after {
  background-image: url('../images/general/square.svg');
  background-repeat: no-repeat;
  content: "";
  height: 2rem;
  left: 0;
  position: absolute;
  top: 30px;
  width: 2rem;
}

.scheduleg-section .container .time-container .schedule-container .schedule-item:last-child:before {
  background-image: url('../images/general/square.svg');
  background-repeat: no-repeat;
  content: "";
  height: 2rem;
  position: absolute;
  right: 0;
  top: 30px;
  width: 2rem;
}

.scheduleg-section .min-image {
  left: -200px;
  position: absolute;
  top: 200px;
  z-index: 2;
}

.scheduleg-section .min-image img {
  height: 550px;
  object-fit: cover;
  width: 564px;
}

@media (max-width: 768px) {
  .scheduleg-section .min-image {
    display: none;
  }
}

/* ============================================
   JOURNAL DE BORD - Blog / Archive Posts
   CSS EXACT du site WordPress original
   ============================================ */

.overlay-posts {
  align-items: center;
  background-image: url(../images/general/section-overlay.svg);
  background-size: cover;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  max-height: 270px;
  position: absolute;
  transform: translateY(-265px);
  width: 100vw;
}

.overlay-posts2 {
  align-items: center;
  background-image: url(../images/general/section-overlay.svg);
  background-size: cover;
  display: flex;
  height: 270px;
  justify-content: center;
  left: 0;
  margin-top: 0;
  position: relative;
  width: 100vw;
  z-index: 1;
}

.archive-posts { position: relative; padding-bottom: 80px; }

.archive-posts .container .archive_posts {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  width: 100%;
}
@media (max-width: 1024px) { .archive-posts .container .archive_posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .archive-posts .container .archive_posts { grid-template-columns: 1fr; } }

.archive-posts .container .archive_posts ul {
  align-items: center; display: flex; justify-content: center;
  list-style: none; margin: 0; padding: 0; width: 100%;
}
.archive-posts .container .archive_posts ul li { list-style-type: none; }
.archive-posts::after {
  content: url('../images/general/newspaper-left.webp');
  height: auto;
  left: -30px;
  position: absolute;
  top: 250px;
  width: auto;
  z-index: 0;
}
.archive-posts::before {
  content: url('../images/general/newspaper-right.webp');
  height: auto;
  position: absolute;
  right: -200px;
  top: 0;
  transform: rotate(40deg);
  width: auto;
  z-index: 0;
}
@media (max-width: 480px) {
  .archive-posts::after, .archive-posts::before { display: none; }
}

.post-card {
  margin-bottom: 20px;
  max-width: 305px;
}
.post-card .post-image { position: relative; }
.post-card .post-image img {
  height: 295px;
  margin-left: 13px;
  margin-top: 20px;
  object-fit: cover;
  position: relative;
  width: 281px;
  z-index: 2;
}
.post-card .post-image::after {
  background-image: url('../images/general/img-filter.webp');
  background-position: 50%;
  background-size: cover;
  content: "";
  height: 385px;
  left: 0;
  position: absolute;
  top: 0;
  width: 305px;
  z-index: 1;
}
.post-card .post-title {
  color: #483c3c;
  font-family: Gelasio, serif;
  font-size: 14.227px;
  font-weight: 600;
  padding-left: 11px;
  padding-right: 11px;
  padding-top: 5px;
  position: relative;
  width: 100%;
  z-index: 2;
}
.post-card .post-title a {
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-width: 300px;
  overflow: hidden;
  text-decoration: none;
  width: 100%;
}
.post-card .more {
  color: #483c3c;
  display: inline-block;
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding-left: 11px;
  padding-top: 10px;
  position: relative;
  text-decoration-line: underline;
  text-transform: uppercase;
  z-index: 2;
}
.post-card .more a {
  color: #000;
  position: relative;
  text-decoration-line: underline;
  z-index: 2;
}

/* ============================================
   ARTICLE BLOG - Overlay + Blocs de contenu
   ============================================ */

.overlay-srvc-top {
  background-image: url('../images/general/paper_origin_croped.webp');
  background-size: cover;
  height: 100%;
  left: 0;
  max-height: 270px;
  position: absolute;
  transform: translateY(-265px) scaleY(-1);
  width: 100vw;
}
@media (max-width: 630px) { .overlay-srvc-top { display: none; } }

.banner .title-container .breadcrumb-single span,
.banner .title-container .breadcrumb-single span a {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 300;
  text-decoration: none;
  text-transform: uppercase;
}
@media (max-width: 630px) { .banner .title-container .breadcrumb-single { display: none; } }

.block--text .container { box-sizing: border-box; }

.block--text .container h2,
.block--text .container h3,
.block--text .container h4,
.block--text .container h5,
.block--text .container h6 {
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 25px !important;
  margin-bottom: 15px;
}
@media (max-width: 991px) {
  .block--text .container h2,
  .block--text .container h3,
  .block--text .container h4,
  .block--text .container h5,
  .block--text .container h6 { font-size: 20px !important; line-height: 30px !important; }
}
@media (max-width: 630px) {
  .block--text .container h2,
  .block--text .container h3,
  .block--text .container h4,
  .block--text .container h5,
  .block--text .container h6 { font-size: 18px !important; line-height: 30px !important; }
}
.block--text .container p,
.block--text .container span {
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
}
@media (max-width: 991px) {
  .block--text .container p,
  .block--text .container span { padding-left: 10px !important; padding-right: 10px !important; }
  .block--text .container { padding: 0 20px !important; width: 100%; }
}
.block--text .container strong { color: #000; }
.block--text .container .link-container { margin-top: 20px; }

.block--text-image-single {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.block--text-image-single.reverse-columns { flex-direction: row-reverse; }
@media (max-width: 991px) {
  .block--text-image-single,
  .block--text-image-single.reverse-columns { flex-direction: column; }
}
.block--text-image-single .container {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: inherit;
  width: 100%;
}
@media (max-width: 991px) {
  .block--text-image-single .container { padding: 0 20px !important; width: 100%; }
}
.block--text-image-single .content-container,
.block--text-image-single .image-single-container {
  flex: 1 1 50%;
  margin: 0;
  padding: 20px;
}
.block--text-image-single .image-single-container {
  display: flex;
  justify-content: center;
}
@media (max-width: 991px) {
  .block--text-image-single .content-container,
  .block--text-image-single .image-single-container { padding: 0 20px !important; width: 100%; }
}
.block--text-image-single .content-container h2 {
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 25px !important;
  margin-bottom: 15px;
}
@media (max-width: 991px) {
  .block--text-image-single .content-container h2 { font-size: 20px !important; line-height: 30px !important; }
}
@media (max-width: 630px) {
  .block--text-image-single .content-container h2 { font-size: 18px !important; line-height: 30px !important; }
}
.block--text-image-single .content-container .description,
.block--text-image-single .content-container .txt-ctnr,
.block--text-image-single .content-container .description p,
.block--text-image-single .content-container .txt-ctnr p,
.block--text-image-single .content-container .description h3,
.block--text-image-single .content-container .txt-ctnr h3 {
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  line-height: 22px;
}
@media (max-width: 991px) {
  .block--text-image-single .content-container { padding: 0 20px !important; width: 100%; }
}
.block--text-image-single .image-single {
  max-width: 100%;
  position: relative;
  width: 100%;
}
.block--text-image-single .image-single img.main-image {
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}
@media (max-width: 991px) {
  .block--text-image-single .image-single { padding: 0 20px !important; width: 100%; }
}

/* === Variantes mobiles des images de fond (généré) === */
/* Un téléphone n'a pas besoin d'une image de 1600 px de large.
   Seule l'URL change : taille, position et répétition restent celles
   de la règle d'origine, donc le rendu est identique.
   Généré par _docs/tooling/css-mobile-backgrounds.py — ne pas éditer. */
@media (max-width: 768px) {
    .overlay-box {
        background-image: url('../images/general/paper_origin_croped-800w.webp');
    }
    .txt-img2 .container .txt-imagep .section-picture:after {
        background-image: url('../images/general/Smoke-800w.webp');
    }
    .txt-img3 .container .txt-imagep .section-picture:after {
        background-image: url('../images/general/Smoke-800w.webp');
    }
    .gift-overlay {
        background-image: url('../images/general/paper_origin_croped-800w.webp');
    }
    .overlay-box {
        background-image: url('../images/general/paper_origin_croped-800w.webp');
    }
    .overlay-srvc-top2 {
        background-image: url('../images/general/paper_origin_croped-800w.webp');
    }
    .timeline-overlay {
        background-image: url('../images/general/paper_origin_croped-800w.webp');
    }
    .video-overlay {
        background-image: url('../images/general/paper_origin_croped-800w.webp');
    }
    .overlay-spp {
        background-image: url('../images/general/paper_origin_croped-800w.webp');
    }
    .modality-overlay {
        background-image: url('../images/general/paper_origin_croped-800w.webp');
    }
    .modality-overlay2 {
        background-image: url('../images/general/paper_origin_croped-800w.webp');
    }
    .overlay-srvc-top {
        background-image: url('../images/general/paper_origin_croped-800w.webp');
    }
}


/* Bannière compacte pour les pages légales (mentions, CGV) : un hero de 800px
   serait disproportionné pour une page de texte administratif.
   Le header du site est en position absolute et mesure ~297px : on aligne donc
   le titre EN BAS de la bannière plutôt qu'au centre, sinon il passerait
   derrière la barre de navigation. */
/* En-tête des pages légales (mentions, CGV).
   On n'utilise PAS le hero .banner du blog : son image a une moitié basse claire
   qui rend le titre blanc illisible, et ses bords « papier déchiré » rognent la
   zone du titre. Un aplat brun de la charte est sobre, toujours lisible, et sans
   surprise. Le header du site est en position absolute (~297px de haut sur
   desktop, ~198px sur mobile) : le rembourrage haut dégage le titre. */
.legal-hero {
    background-color: #3a2e2e;
    color: #fff;
    text-align: center;
    padding: 340px 0 55px;
}
.legal-hero h1 {
    color: #fff;
    font-family: Gelasio, serif;
    font-size: 2.8125rem;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
}
.legal-hero .legal-breadcrumb {
    margin-top: 14px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
}
/* Sur le fond brun, tout le fil d'Ariane doit être clair. On force la couleur
   sur le lien, l'élément courant ET le séparateur : sinon l'élément courant
   hérite du brun foncé #483c3c du style de breadcrumb global et disparaît. */
.legal-hero .legal-breadcrumb,
.legal-hero .legal-breadcrumb a,
.legal-hero .legal-breadcrumb span {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
}
.legal-hero .legal-breadcrumb a { text-decoration: underline; }
.legal-hero .legal-breadcrumb a:hover { color: #fff !important; }
.legal-hero .legal-breadcrumb [aria-current] { color: #fff !important; font-weight: 600; }

/* Colonne de lecture resserrée pour le corps des pages légales.
   Une ligne de texte administratif de 1240px de large est pénible à lire ;
   on borne la zone à 800px, centrée, pour une longueur de ligne confortable.
   Le padding latéral préserve les marges sur les petits écrans. */
.legal-body .container {
    max-width: 860px;
    padding-left: 30px;
    padding-right: 30px;
}

@media (max-width: 1024px) {
    .legal-hero {
        padding-top: calc(var(--header-bas, 198px) + 2.5rem);
        padding-bottom: 40px;
    }
    .legal-hero h1 { font-size: 2.1rem; }
}

/* ============================================================
   Escape Box : une carte par ligne sur téléphone
   ============================================================
   Un bloc @media (max-width: 480px) prévoyait déjà flex: 0 0 100%, mais la
   règle « 2 par ligne sur tablette » est déclarée plus bas dans le fichier :
   à spécificité égale, c'est elle qui gagnait, jusque sur un écran de 375px.
   Chaque carte n'y faisait plus que 148px de large, et les fumées des deux
   colonnes se rejoignaient en une seule masse.

   Placée en fin de fichier, cette règle passe après les deux. La borne est à
   576px, la limite habituelle du site entre téléphone et tablette.
   ============================================================ */
@media (max-width: 576px) {
    .package-block .container .packages .package-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================================
   Pages du menu Groupes : la découpe de « Nos salles »
   ============================================================
   Team Building, Anniversaires, EVJF/EVG et Soirée Énigmes reprennent le tracé
   qui sépare le menu du contenu sur les pages sans bannière — celui que dessine
   header-overlay.svg.

   Le motif ne sert pas d'image mais de MASQUE : on peint dedans la couleur du
   fond de page. Deux raisons.

   Employé comme image, il apporte ses propres teintes olive, et sur les pages
   sans bannière il est composé en mix-blend-mode: color-burn — ce qui assombrit
   le fond et donne le jaune qu'on ne veut pas ici. En masque, seule sa forme
   est reprise ; la couleur, c'est nous qui la choisissons.

   #DEDBC3 est exactement le fond porté par html (voir global.css) : la bande au-
   dessus du tracé et le tracé lui-même sont donc d'un seul tenant, sans
   jonction visible.

   scaleY(-1) reprend le retournement de header::before : sans lui la déchirure
   pointe vers le haut.
   ============================================================ */
@media (min-width: 631px) {
    .banner.banner--decoupe-salles::after {
        height: 240px;
        /* La forme vient du masque, le grain de cette texture.
           papier-texture.webp est la partie PLEINE de paper_origin_croped,
           composée sur #DEDBC3 : plus aucune transparence, donc plus de trou
           possible à l'intérieur du masque. C'est cette transparence résiduelle
           qui laissait réapparaître la photo derrière le menu. */
        background-color: #DEDBC3;
        background-image: url('../images/general/papier-texture.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transform: scaleY(-1);
        -webkit-mask-image: url('../images/header-overlay.svg');
                mask-image: url('../images/header-overlay.svg');
        -webkit-mask-size: cover;
                mask-size: cover;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
    }
}