/* Compléments propres au nouveau site. La charte vient des feuilles de l'ancien thème (wwwroot/themes). */

/* Formulaires : équivalent des styles de Contact Form 7 (plugin non repris). */
.wpcf7-not-valid-tip {
    display: block;
    color: #dc3232;
    font-size: 1em;
}

.wpcf7-form .input-validation-error {
    border-color: #dc3232;
}

/* Fiche produit : le choix du créneau, ou de l'instance quand un jour en a plusieurs, garde les marges du calendrier au-dessus (le
   thème le collait aux bords du bloc). */
.field-group-slice,
.field-group-instance {
    padding: 0 15px;
}

/* Mentions de vente (limites par commande, paiement ultérieur) : bien visibles, comme les mentions en rouge du Marketplace. Même
   présentation que les messages du site (.site-message-info), alignées à gauche alors que le bloc de réservation est centré. */
.product-sale-notices {
    margin: 10px 15px;
    padding: 10px 14px;
    background: #fdf3e7;
    border-left: 4px solid #e8891d;
    border-radius: 0 3px 3px 0;
    color: #8a4b08;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.product-sale-notices li + li {
    margin-top: 4px;
}

#cart-modal .product-sale-notices {
    margin: 10px 0;
}

/* Produit non distribué : organisation présentée avec son logo et son nom, en lien vers son site. */
.product-not-distributed {
    margin: 20px 15px;
    text-align: center;
}

/* Encart de réservation : la marge basse du dernier élément (alerte, produit non réservable) restait hors du fond gris, collée
   au bloc suivant ; le formulaire la contient désormais. */
.bloc-reserv > #cart-form {
    display: flow-root;
}

/* … et l'encart est séparé du bloc suivant (promotions, notes), que cette marge écartait auparavant par accident. */
.product-column-right > .bloc-reserv {
    margin-bottom: 20px;
}

.product-not-distributed .producer-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.product-not-distributed .producer-link img {
    max-width: 120px;
    max-height: 90px;
}

/* Calendrier : dates complètes visibles mais non sélectionnables. */
#instance-datepicker td.day.full-date {
    color: #b94a48;
    text-decoration: line-through;
}

/* Date complète avec liste d'attente : sélectionnable, en orange plutôt que barrée. */
#instance-datepicker td.day.full-date.waiting-list-date {
    color: #e8891d;
    text-decoration: none;
    font-style: italic;
}

/* Boutons d'action à la charte de « Commander » (#order-button du thème) : Oswald en capitales espacées, turquoise, sur 80 % de
   la colonne. Pour « Voir les disponibilités » (avis d'une offre), « Lire les avis » (producteur) et la liste d'attente. */
.btn-charte {
    display: block;
    width: 80%;
    margin: 10px auto 20px;
    padding: 10px 24px;
    border: 1px solid #2bb6ae;
    border-radius: 0;
    background-color: #2bb6ae;
    color: #fff;
    font-family: 'Oswald', Arial;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
}

.btn-charte:hover,
.btn-charte:focus {
    color: #fff;
}

/* Fiche produit : la note (ratingLarge du thème, posée en absolu en haut à droite) recouvrait les titres longs. Le titre et la
   note se partagent la ligne, le titre passant à la ligne avant la note ; sous 768 px, le thème place déjà la note dessous. */
@media (min-width: 768px) {
    .product-metas2 {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 16px;
    }

    .product-metas2 > h1 {
        flex: 1 1 0;
        min-width: 0;
    }

    .product-metas2 > .ratingLarge {
        position: static;
        flex: 0 0 auto;
    }

    .product-metas2 > .product-info {
        flex-basis: 100%;
    }
}

/* Fiche produit : places restantes de la séance, juste au-dessus du bouton « Commander ». */
.seats-left {
    margin: 10px 0 0;
    text-align: center;
    font-family: 'Oswald', Arial;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #364f6b;
}

/* Fiche produit : encart de diagnostic des règles de vente (développement, ou « ?diagnostic=1 »), réservé à l'équipe. */
.product-diagnostic {
    clear: both;
    margin: 30px 0 10px;
    padding: 16px 20px;
    border: 2px dashed #e8891d;
    background: #fffaf3;
    font-size: 13px;
}

.product-diagnostic h2,
.product-diagnostic h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #364f6b;
}

.product-diagnostic h3 {
    margin-top: 16px;
    font-size: 15px;
}

.product-diagnostic-intro {
    color: #7a8a9a;
}

.product-diagnostic dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 16px;
    margin: 0;
}

.product-diagnostic dt {
    font-weight: 600;
}

.product-diagnostic dd {
    margin: 0;
}

/* Valeurs oui/non repérables d'un coup d'œil. */
.product-diagnostic .diagnostic-yes {
    color: #2e7d32;
    font-weight: 600;
}

.product-diagnostic .diagnostic-no {
    color: #c62828;
    font-weight: 600;
}

/* Fenêtre d'ajout au panier : rappel des places restantes sous le titre de l'offre. */
.modal-seats-left {
    margin: 4px 0 0;
    font-weight: 600;
    color: #364f6b;
}

/* Liste d'attente : même bouton, dans l'orange des dates en liste d'attente. */
.btn-charte.btn-waiting-list {
    background-color: #e8891d;
    border-color: #e8891d;
}

.btn-charte.btn-waiting-list:hover,
.btn-charte.btn-waiting-list:focus {
    background-color: #d27612;
    border-color: #d27612;
}

/* Fenêtre « liste d'attente », visiteur anonyme : invitation à se connecter pour préremplir le formulaire. */
.waiting-list-signin {
    background: #eaf6f5;
    border-radius: 4px;
    padding: 10px 14px;
}

.waiting-list-signin .btn {
    margin-left: 6px;
}

/* Produit sans photo dans AwoO : visuel par défaut du site (logo « R » sur fond turquoise clair), sur les cartes et la fiche. */
.articleContainer article .imgCont.no-photo,
#single-picture .product-image.no-photo {
    background: #e3f4f3 url(../themes/myawoo-child/assets/img/reservons-R.png) center / 60px no-repeat;
}

/* En-tête : compte client (connexion, espace client, déconnexion), à côté du panier. */
.navbar-new .nav-item-account > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.navbar-new .account-signout {
    margin: 0;
}

/* Bouton de déconnexion (formulaire POST) : même aspect que les liens voisins du menu (style.css du thème). */
.navbar-new .account-signout button {
    background: none;
    border: 0;
    color: #fff;
    font-size: 12.5px;
    line-height: 20px;
    padding: 6px 8px;
    margin: 8px 0 0 4px;
    cursor: pointer;
}

.navbar-new .account-signout button:hover,
.navbar-new .account-signout button:focus {
    background-color: #2bb6ae;
}

/* Accueil : univers alignés par le haut (les textes de longueurs différentes décalaient les images d'une colonne à l'autre). */
.bloc-univ {
    vertical-align: top;
}

/* Accueil : aide de géolocalisation lisible sur la photo. */
#slider-home .infos {
    font-style: normal;
    font-size: 13px;
    line-height: 17px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Pied de page : « Suivez-nous ! » en texte, et les icônes des réseaux affichées aussi sur mobile. */
.footer-follow {
    margin: 0 0 8px;
    color: #2bb6ae;
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
}

.footer-social .nav-social li.hide780,
.footer-social .nav-social li.hide1080 {
    display: inline-block !important;
}

/* Boutons : les actions principales (rechercher, voir l'offre, commander, envoyer) en turquoise, les liens secondaires (cliquez-ici,
   lire les avis, retour) en bleu marine. « Commander » passe donc au turquoise une fois la date choisie. */
#order-button:not(:disabled) {
    border-color: #2bb6ae;
    background-color: #2bb6ae;
    color: #fff;
}

#order-button:not(:disabled):hover,
#order-button:not(:disabled):focus {
    border-color: #239a93;
    background-color: #239a93;
    color: #fff;
}

/* Pages courtes (connexion, page introuvable…) : le pied de page reste en bas de l'écran. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > .globalFooter {
    margin-top: auto;
}

/* Formulaires (contact, espace pro, connexion, liste d'attente) : mêmes champs partout. */
.wpcf7-form input[type=text],
.wpcf7-form input[type=tel],
.wpcf7-form input[type=email],
.wpcf7-form textarea,
.account-form .form-control,
.site-modal .form-control {
    width: 100%;
    height: auto;
    padding: 10px 12px;
    border: 1px solid #cdd2d8;
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
    color: #364f6b;
    font-size: 15px;
}

.wpcf7-form input[type=text]:focus,
.wpcf7-form input[type=tel]:focus,
.wpcf7-form input[type=email]:focus,
.wpcf7-form textarea:focus,
.account-form .form-control:focus,
.site-modal .form-control:focus {
    border-color: #2bb6ae;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(43, 182, 174, 0.15);
}

.account-form .btLight,
.wpcf7-submit {
    padding: 12px 22px;
    font-size: 13px;
}

.form-required-note {
    margin: 10px 0 0;
    color: #7a8a9a;
    font-size: 13px;
}

/* Espace pro : choix de l'orientation, options espacées. */
.wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 20px 0 0;
    font-weight: 400;
}

/* Colonne de droite des pages de contenu (adresse de la page Contact). */
.content-card {
    margin: 20px 0;
    padding: 18px 20px;
    background: #fff;
    border-left: 4px solid #2bb6ae;
}

.content-card h3 {
    margin-top: 0;
    font-size: 20px;
}

.content-card p:last-child {
    margin-bottom: 0;
}

/* Page introuvable et page d'erreur : contenu centré. */
.error-page {
    min-height: 260px;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}

.error-page h1 {
    margin-bottom: 15px;
}

.error-page p {
    margin-bottom: 20px;
}

/* Menu des univers ou bouton ☰ selon la place : sur les pages intérieures, le logo carré est au centre de la barre du menu, qui le
   chevaucherait. Le seuil de 1430 px laisse une dizaine de pixels entre le logo et « Accueil » en français, sans compte connecté ;
   au-delà, le script du thème ajoute nav-crowded au body tant que le menu toucherait le logo (compte connecté, libellés plus longs
   des autres langues). Sur l'accueil, le logo est plus bas et le menu tient jusqu'à 992 px. Les bornes en .98 évitent un trou entre
   deux requêtes aux largeurs fractionnaires (zoom). */
.navbar-new .nav-item-menu {
    display: none;
}

/* Écrans étroits : la marge négative de Bootstrap (-15 px) faisait déborder le bouton ☰ de quelques pixels à droite de l'écran.
   Chrome et Edge sur Android élargissent alors la mise en page pour englober ce débordement, jusqu'à 980 px : le site s'affichait
   en version « ordinateur », réduite, sur les vrais téléphones (pas dans la simulation mobile des outils du navigateur). */
@media (max-width: 991.98px) {
    .navbar-new .navbar-right {
        margin-right: 0;
    }
}

@media (max-width: 991.98px) {
    .navbar-new .nav-links {
        display: none !important;
    }

    .navbar-new .nav-item-menu {
        display: block;
    }
}

@media (min-width: 992px) and (max-width: 1429.98px) {
    body:not(:has(#slider-home)) .navbar-new .nav-links {
        display: none !important;
    }

    body:not(:has(#slider-home)) .navbar-new .nav-item-menu {
        display: block;
    }

    body:has(#slider-home) .navbar-new .mobile-menu {
        display: none !important;
    }
}

@media (min-width: 1430px) {
    body.nav-crowded .navbar-new .nav-links {
        display: none !important;
    }

    body.nav-crowded .navbar-new .nav-item-menu {
        display: block;
    }

    body:not(.nav-crowded) .navbar-new .mobile-menu {
        display: none !important;
    }
}

/* Choix de langue : drapeau et code à gauche de la barre, avant les réseaux sociaux (hors du menu de droite, dont la largeur
   fixe les seuils ci-dessus) ; liste déroulante des langues avec leur drapeau, comme le Marketplace. */
.navbar-new .navbar-header > .language-menu,
.navbar-new .navbar-header > .nav-social {
    display: inline-block;
    vertical-align: top;
}

.language-menu {
    margin-right: 8px;
}

.language-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 18px 4px 14px;
    background: none;
    border: 0;
    color: #fff;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
}

.language-toggle img,
.language-menu .dropdown-menu img {
    flex: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

.language-menu .dropdown-menu {
    min-width: 170px;
    padding: 6px 0;
}

.navbar-new .language-menu .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: #364f6b;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 14px;
    text-transform: none;
}

.navbar-new .language-menu .dropdown-menu > li > a:hover,
.navbar-new .language-menu .dropdown-menu > li > a:focus {
    background: #f0f4f8;
    color: #364f6b;
}

.navbar-new .language-menu .dropdown-menu > .active > a,
.navbar-new .language-menu .dropdown-menu > .active > a:hover,
.navbar-new .language-menu .dropdown-menu > .active > a:focus {
    background: #2bb6ae;
    color: #fff;
}

/* Page de contenu rédigée en français, affichée dans une autre langue. */
.content-language-notice {
    margin: 0 0 20px;
}

/* Menu des écrans étroits : bouton à côté du compte et du panier, liste déroulante sous la barre. */
.navbar-new .menu-toggle {
    background: none;
    border: 0;
    color: #fff;
    margin: 8px 0 0 4px;
    padding: 6px 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.navbar-new .menu-toggle:not(.collapsed) {
    background-color: #2bb6ae;
}

.navbar-new .mobile-menu {
    clear: both;
    background: rgba(54, 79, 107, 0.97);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.navbar-new .mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.navbar-new .mobile-menu li > a {
    display: block;
    margin: 0;
    padding: 13px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
}

.navbar-new .mobile-menu li:first-child > a {
    border-top: 0;
}

.navbar-new .mobile-menu li > a:hover,
.navbar-new .mobile-menu li > a:focus {
    background-color: #2bb6ae;
    color: #fff;
}

/* Pages de connexion. */
.account-form form {
    margin: 20px 0;
}

/* Échec de connexion : encadré bien visible (le thème neutralise le fond des alertes Bootstrap). */
.account-form .account-error {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #fdecea;
    border: 1px solid #f5c6c2;
    border-left: 4px solid #c9302c;
    border-radius: 3px;
    color: #6b1d19;
}

.account-form .account-error .glyphicon {
    color: #c9302c;
    font-size: 20px;
    margin-top: 2px;
}

.account-form .account-error strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.1em;
}

.account-form .account-error p {
    margin: 0;
}

.account-form .has-error .form-control {
    border: 1px solid #c9302c;
    background: #fffafa;
}

.account-forgot {
    margin-top: 15px;
}

.account-forgot a {
    color: #2c4f6f;
    text-decoration: underline;
}

.account-forgot a:hover,
.account-forgot a:focus {
    color: #2bb6ae;
}

.account-candidates li {
    margin-bottom: 8px;
}

.account-candidates .btn {
    white-space: normal;
    text-align: left;
}

/* Champ « lieu » : suggestions de villes et lieux-dits d'AwoO. */
.town-autocomplete {
    position: relative;
}

/* Position et largeur calculées par le script, sous le champ. */
.town-suggestions {
    position: absolute;
    z-index: 1000;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-align: left;
    max-height: 320px;
    overflow-y: auto;
}

.town-suggestions li {
    padding: 8px 12px;
    cursor: pointer;
    color: #364f6b;
}

.town-suggestions li.active,
.town-suggestions li:hover {
    background: #2bb6ae;
    color: #fff;
}

.town-suggestions .town-zip {
    opacity: 0.7;
    font-size: 0.9em;
}

/* Qui sommes-nous : illustration à la place de l'ancienne photo d'équipe. */
.about-illustration {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: 20px auto 30px;
}

/* Qui sommes-nous : lien vers le site de Partner Talent, reconnaissable comme lien. */
.about-link {
    color: #2c4f6f;
    text-decoration: underline;
}

.about-link:hover,
.about-link:focus {
    color: #2bb6ae;
}

/* Cartes : masquées, Google Maps n'est chargé qu'au clic sur « Voir sur la carte » (pas de service tiers sans action du visiteur). */
/* Le thème affiche #gmap par son identifiant : sans « !important », la carte masquée gardait sa place (un grand vide). */
#gmap[hidden] {
    display: none !important;
}

.producerInfos .map-show {
    display: inline-block;
    margin-top: 4px;
    text-decoration: underline;
}

/* Lien vers la page Facebook (remplace le module Facebook, qui déposait ses cookies sans consentement). */
.news-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0;
    padding: 16px 18px;
    background: #1877f2;
    border-radius: 4px;
    color: #fff;
}

.news-card:hover,
.news-card:focus {
    background: #0f63d1;
    color: #fff;
    text-decoration: none;
}

.news-card img {
    flex: none;
    width: 36px;
    height: 36px;
}

.news-card strong {
    display: block;
    font-size: 1.15em;
}

/* Recherche : le mot-clé reprend le style des champs du thème, sans la flèche des listes déroulantes, et sans déborder du panneau. */
#keyword {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-image: none;
}

/* Bandeau de recherche des pages intérieures (grands écrans) : le cadre suit son contenu au lieu d'une largeur fixe, qui laissait un
   vide à droite (sur les pages de recherche, le champ ville est dans les filtres). */
@media (min-width: 1024px) {
    .pageHeader .panel-top {
        display: table;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .pageHeader .panel-top .gr-univ,
    .pageHeader .panel-top .gr-loc {
        width: 235px;
    }

    /* Univers, ville et bouton toujours sur une ligne : à quelques pixels près (bouton plus court en anglais), le bouton passait
       à la ligne. */
    .pageHeader .panel-top .panel-body {
        white-space: nowrap;
    }

    .pageHeader .panel-top .form-group {
        white-space: normal;
    }
}

/* Bandeau de recherche des écrans étroits : univers, ville et bouton les uns sous les autres (la ville reste toujours disponible). */
@media (max-width: 1023px) {
    .pageHeader .panel-top {
        width: calc(100% - 30px);
        max-width: 440px;
        margin: 10px auto 16px;
    }

    .pageHeader .panel-top .form-group,
    .pageHeader .panel-top .gr-univ {
        display: block;
        width: 100%;
        margin: 0 0 8px;
    }

    .pageHeader .panel-top .gr-submit {
        margin-bottom: 0;
    }

    .pageHeader .panel-top .gr-submit .btLight {
        display: block;
        width: 100%;
    }

    .pageHeader .panel-top .gr-submit .btLight img {
        display: none !important;
    }
}

/* Distance : valeur affichée à droite du libellé (le thème limite les libellés des filtres à 24 % de la largeur). */
.search-form-side .distance-group label {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.distance-value-wrap {
    color: #2bb6ae;
}

/* Recherche : nombre de résultats à gauche et tri à droite, sur une même ligne (PC et mobile). Le nombre de la liste elle-même
   (rechargée par le script) est masqué : celui de l'en-tête le remplace. */
.search-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin: 10px 0 5px;
}

.search-header .nb-results {
    font-size: 26px;
    line-height: 1.2;
}

#search-results .nb-results {
    display: none;
}

.search-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

@media (max-width: 767px) {
    .search-header {
        padding: 0 10px;
    }

    .search-header .nb-results {
        font-size: 20px;
    }

    .search-sort label {
        font-size: 13px;
    }
}

.search-sort label {
    margin: 0;
    font-weight: 700;
}

/* Une seule flèche : celle du thème (la flèche native de la liste est masquée). */
.search-sort select {
    width: auto;
    padding-right: 34px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Sans résultat, le tri n'a pas lieu d'être. */
.col-md-9:has(.no-results) .search-header {
    display: none;
}

.no-results {
    margin: 30px auto 40px;
    padding: 30px 20px;
    max-width: 620px;
    background: #fff;
    text-align: center;
}

.no-results .glyphicon {
    color: #2bb6ae;
    font-size: 34px;
}

.no-results h2 {
    margin: 12px 0 10px;
    font-size: 24px;
}

.no-results p {
    margin-bottom: 18px;
}

/* Cartes de résultats (grands écrans) : titre sur une ligne terminée par « … » (titre complet au survol), description coupée
   proprement sur six lignes, prix à côté de la ville sans la chevaucher. */
@media (min-width: 768px) {
    .articleContainer article .content .title {
        white-space: nowrap;
    }

    .articleContainer article .content p {
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
    }
}

.articleContainer article footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.articleContainer article footer ul {
    flex: 1 1 auto;
    min-width: 0;
}

.articleContainer article footer .blocInfos {
    position: static;
    flex: none;
}

/* Étoiles : une seule couleur sur tout le site (turquoise de la charte), et sans le trait du champ de saisie de l'extension. */
.rating-container .filled-stars,
#evaluations .rating-container .filled-stars {
    color: #2bb6ae;
}

.rating-container .rating-input {
    opacity: 0;
    pointer-events: none;
}

/* Fiche produit : nombre d'avis à côté de la note, plus discret que la note elle-même. */
.ratingLarge .review-count {
    font-size: 18px;
}

/* Listes en bas de fiche (mêmes ville et activité, autres villes, département) : colonnes alignées, sans défilement. */
.panel-more .panel-body ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    max-height: none;
    overflow: visible;
}

.panel-more .panel-body ul li {
    display: block;
    width: auto;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .panel-more .panel-body ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Adresse (fiche produit, producteur) : carte masquée tant qu'elle n'est pas demandée ; les informations occupent alors la largeur. */
.panel-body:has(> #gmap[hidden]) .local-left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 40px;
    width: 100%;
    padding-top: 10px;
}

.panel-body:has(> #gmap[hidden]) .local-left h2 {
    flex-basis: 100%;
}

.panel-body:has(> #gmap[hidden]) .local-left .producerInfos {
    flex: 0 1 340px;
    min-width: 240px;
}

.panel-body:has(> #gmap[hidden]) .local-left .producerInfos li {
    max-width: none;
    text-align: left;
}

.panel-body:has(> #gmap[hidden]) .local-left .logoProducer {
    margin: 0;
}

/* Tarifs (grille) : tableau aligné, libellés à gauche et prix à droite. */
.price-table {
    width: 100%;
}

.price-table th,
.price-table td {
    padding: 6px 8px;
    vertical-align: top;
}

.price-table tbody td:first-child,
.price-table tbody th {
    text-align: left;
}

.price-table tbody td:first-child,
.price-table tbody th {
    width: 40%;
}

.price-table thead th {
    text-align: right;
}

.price-table tbody td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.price-table tbody tr + tr td,
.price-table tbody tr + tr th {
    border-top: 1px solid #ebedf0;
}

/* Fiche produit sur mobile : les volets de la colonne de réservation (tarifs, options, promotions) ont le même style que ceux de
   la description (titre en capitales, flèche turquoise, simple filet), au lieu d'un encadré blanc ou d'un fond gris. */
@media (max-width: 767px) {
    .product-column-right .mobile-collapse.panel,
    .product-column-right .mobile-collapse.panel-col {
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .product-column-right .mobile-collapse > .panel-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border: 0;
        border-bottom: 1px solid #ebedf0;
        background: transparent;
        color: #364f6b;
        font-family: 'Oswald', Arial;
        font-size: 16px;
        letter-spacing: 0.5px;
        text-align: left;
        text-transform: uppercase;
    }

    .product-column-right .mobile-collapse > .panel-heading .glyphicon {
        color: #2bb6ae;
    }

    .product-column-right .mobile-collapse > .panel-body {
        padding: 10px 0;
    }
}

/* Options : liste alignée à gauche, comme les autres blocs. */
.product-column-right .panel .panel-body ul {
    text-align: left;
}

/* Fiche produit : icônes du niveau et des intervenants dans la ligne d'informations (même principe que celles du thème). */
.product-info ul li.level {
    background-image: url(../img/ico_level.svg);
}

.product-info ul li.contributors {
    background-image: url(../img/ico_contributor.svg);
}

/* Fiche produit : support d'activité (« Pratique »), liens et documents, réponses aux avis. */
.product-practice-image {
    float: right;
    max-width: 120px;
    margin: 0 0 10px 15px;
}

.product-practice .panel-body::after {
    content: "";
    display: block;
    clear: both;
}

.product-links li {
    margin-bottom: 6px;
}

.product-links .glyphicon {
    margin-right: 6px;
    color: #2c4f6f;
}

.testimony-response {
    margin: 8px 0 0 20px;
    padding-left: 10px;
    border-left: 3px solid #2c4f6f;
    font-size: 0.95em;
}

.product-flash {
    margin: 10px 15px;
}

/* Fenêtres du site (ajout au panier, liste d'attente) : un seul modèle. En-tête turquoise, résumé du choix, contenu qui défile
   quand il est long, actions toujours visibles en bas. */
.site-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 60px);
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.site-modal .modal-header {
    flex: none;
    padding: 16px 24px;
    background: #2bb6ae;
    border-bottom: 0;
}

.site-modal .modal-title {
    color: #fff;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Fermeture : la croix accompagnée du mot « Fermer », pour qu'on la trouve (un clic hors de la fenêtre la ferme aussi). */
.site-modal .modal-header .close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    padding: 2px 4px;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    text-shadow: none;
    opacity: 0.9;
}

.site-modal .modal-close-label {
    font-family: 'Oswald', Arial;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.site-modal .modal-header .close:hover,
.site-modal .modal-header .close:focus {
    color: #fff;
    opacity: 1;
}

.site-modal .modal-body {
    flex: 1 1 auto;
    padding: 20px 24px;
    overflow-y: auto;
    color: #364f6b;
    font-size: 15px;
}

.site-modal .modal-body h5 {
    margin: 18px 0 8px;
    color: #2bb6ae;
    font-size: 13px;
    letter-spacing: 0.6px;
}

.site-modal .modal-body h5:first-child {
    margin-top: 0;
}

.site-modal .modal-summary {
    margin-bottom: 4px;
    padding: 12px 16px;
    background: #f5f7fa;
    border-left: 4px solid #2bb6ae;
    border-radius: 0 4px 4px 0;
}

.site-modal .modal-summary p {
    margin: 0 0 6px;
}

.site-modal .modal-summary p:last-child {
    margin-bottom: 0;
}

.site-modal .modal-summary-title {
    font-weight: 700;
}

.site-modal .selling-instructions {
    margin-bottom: 15px;
    padding: 10px 12px;
    background: #fdf3e7;
    border-left: 4px solid #e8891d;
}

/* Horaires : toutes les séances visibles ; au-delà d'environ six, le tableau défile dans un cadre (barre de défilement visible). */
.site-modal .occurences-table {
    max-height: 230px;
    margin-top: 0;
    overflow-y: auto;
    border: 1px solid #e3e8ee;
    border-radius: 4px;
}

.site-modal .occurences-table .table,
.site-modal #modal-price-types {
    margin-bottom: 0;
}

.site-modal .table > thead > tr > td {
    color: #7a8a9a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.site-modal .occurences-table .table > thead > tr > td {
    position: sticky;
    top: 0;
    background: #fff;
}

.site-modal .table > tbody > tr > td {
    padding: 8px;
    vertical-align: middle;
}

/* Prix et quantité sur une même ligne (passent l'un sous l'autre sur un écran étroit). */
.site-modal .modal-price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin-top: 18px;
}

.site-modal .modal-price-line p,
.site-modal #modal-quantity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.site-modal .modal-label {
    margin: 0;
    font-weight: 700;
}

.site-modal .modal-total-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e3e8ee;
    font-family: 'Oswald', Arial;
    font-size: 18px;
    text-transform: uppercase;
}

.site-modal .modal-total-line .total-price {
    display: inline;
    margin: 0;
    color: #2bb6ae;
    font-size: 28px;
    font-weight: 400;
}

/* Le thème décale les tableaux de 10 % sur toute leur largeur : ils débordaient (barre de défilement horizontale). */
.site-modal .table,
.site-modal .occurences-table .table {
    width: 100%;
    margin: 0;
}

.site-modal .occurences-table {
    overflow-x: hidden;
}

.site-modal .product-sale-notices {
    margin: 15px 0 0;
}

/* Actions : deux boutons de même taille côte à côte ; l'action principale en turquoise. */
.site-modal .modal-actions {
    display: flex;
    flex: none;
    gap: 12px;
    padding: 16px 24px;
    background: #f5f7fa;
    border-top: 1px solid #e3e8ee;
}

.site-modal .modal-actions .modal-btn + .modal-btn {
    margin-left: 0;
}

.modal-btn {
    flex: 1 1 0;
    padding: 12px 14px;
    border: 2px solid #2bb6ae;
    border-radius: 3px;
    background: #2bb6ae;
    color: #fff;
    font-family: 'Oswald', Arial;
    font-size: 15px;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: normal;
    cursor: pointer;
}

.modal-btn:hover,
.modal-btn:focus {
    border-color: #239a93;
    background: #239a93;
    color: #fff;
}

.modal-btn-secondary {
    border-color: #364f6b;
    background: #fff;
    color: #364f6b;
}

.modal-btn-secondary:hover,
.modal-btn-secondary:focus {
    border-color: #364f6b;
    background: #364f6b;
    color: #fff;
}

/* Le thème met en forme les deux boutons du panier par leur identifiant (largeur, marges, couleurs) : neutralisé ici. */
.site-modal #cart-submit-continue,
.site-modal #cart-submit-checkout {
    display: block;
    width: auto;
    margin: 0;
    padding: 12px 14px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.site-modal #cart-submit-checkout {
    border: 2px solid #2bb6ae;
    background: #2bb6ae;
    color: #fff;
}

.site-modal #cart-submit-checkout:hover,
.site-modal #cart-submit-checkout:focus {
    border-color: #239a93;
    background: #239a93;
    color: #fff;
}

.site-modal #cart-submit-continue {
    border: 2px solid #364f6b;
    background: #fff;
    color: #364f6b;
}

.site-modal #cart-submit-continue:hover,
.site-modal #cart-submit-continue:focus {
    background: #364f6b;
    color: #fff;
}

.site-modal #cart-submit-continue:disabled,
.site-modal #cart-submit-checkout:disabled,
.modal-btn:disabled,
.modal-btn:disabled:hover {
    border-color: #c5ced8;
    background: #e9edf1;
    color: #8a97a5;
    cursor: not-allowed;
}

/* Mobile : la fenêtre monte du bas de l'écran en laissant voir le haut de la page (le thème la mettait plein écran) ; toucher cette
   partie la ferme. Les actions restent en bas, l'action principale en premier. */
@media (max-width: 767px) {
    .modal.in.site-modal .modal-dialog {
        height: calc(100% - 56px);
        margin-top: 56px;
    }

    .modal.in.site-modal .modal-dialog .modal-content {
        height: 100%;
        max-height: none;
        border-radius: 12px 12px 0 0;
    }

    .site-modal .modal-header,
    .site-modal .modal-body,
    .site-modal .modal-actions {
        padding-left: 16px;
        padding-right: 16px;
    }

    .site-modal .modal-actions {
        flex-direction: column-reverse;
    }

    .site-modal .modal-btn {
        flex: none;
        width: 100%;
    }
}

/* Messages du site (vente close, complet, liste d'attente, confirmation d'envoi, erreurs) : encadré à filet coloré, même principe
   que les mentions de vente (le thème neutralise le fond des alertes Bootstrap). */
.site-message {
    margin: 12px 15px;
    padding: 10px 14px;
    border-left: 4px solid;
    border-radius: 0 3px 3px 0;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

/* Icône en colonne à gauche : les lignes suivantes du texte restent alignées sur la première, pas sous l'icône. Même écart que les
   mentions de vente. */
.site-message:has(> .glyphicon),
.product-sale-notices li {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.site-message .glyphicon,
.product-sale-notices .glyphicon {
    flex: none;
    top: 2px;
}

.site-message-error {
    background: #fdecea;
    border-left-color: #c9302c;
    color: #6b1d19;
}

.site-message-info {
    background: #fdf3e7;
    border-left-color: #e8891d;
    color: #8a4b08;
}

.site-message-success {
    background: #eaf7f1;
    border-left-color: #2bb6ae;
    color: #1d5c4f;
}

/* Résumé des erreurs des formulaires : affiché seulement quand il y en a. */
.validation-summary-valid {
    display: none;
}

.wpcf7-form .site-message,
.navbar-new + .site-message,
.container > .site-message,
.col-md-8 > .site-message {
    margin-left: 0;
    margin-right: 0;
}

/* Messages affichés dans la page à la place des alertes du navigateur (date à choisir, position introuvable). */
.field-hint {
    margin: 10px 0 0;
    padding: 9px 12px;
    background: #fdf3e7;
    border-left: 4px solid #e8891d;
    border-radius: 0 3px 3px 0;
    color: #8a4b08;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
}

/* Quantités : boutons − et + de part et d'autre du champ. */
.quantity-stepper {
    display: inline-flex;
    align-items: stretch;
}

.quantity-stepper .modal-quantity {
    width: 60px;
    margin: 0 4px;
    text-align: center;
}

.quantity-stepper .quantity-step {
    padding: 4px 10px;
}

/* Liens de retour au-dessus du fil d'Ariane (affichés aussi sur mobile) : « Retour aux résultats » sur la fiche, « Retour à
   l'offre » sur les avis d'une offre et les pages producteur (dont le gabarit centre les textes). */
.back-link {
    margin: 15px 0 0;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
}

.back-link a {
    color: #364f6b;
}

.back-link a:hover,
.back-link a:focus {
    color: #2bb6ae;
    text-decoration: none;
}

.back-link .glyphicon {
    top: 2px;
    font-size: 12px;
}

/* Lien vers tous les avis d'une offre (fiche) ou d'un producteur (page des avis de l'offre). */
.see-all-reviews {
    margin: 10px 0 20px;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.see-all-reviews a,
.ratingLarge a.review-count {
    color: #364f6b;
}

.see-all-reviews a:hover,
.see-all-reviews a:focus,
.ratingLarge a.review-count:hover,
.ratingLarge a.review-count:focus {
    color: #2bb6ae;
    text-decoration: none;
}

.see-all-reviews .glyphicon {
    top: 2px;
    font-size: 12px;
}

/* Page des avis d'une offre : note à côté du titre, notes par critère dans la colonne de droite. */
.product-reviews .prod-rating {
    margin: 0 0 10px;
}

/* Le thème partageait la colonne de gauche entre notes (42 %) et avis (56 %) : les avis prennent toute la largeur, les notes toute
   la colonne de droite, comme sur la page des avis d'un producteur (.producerMain du thème). Sous 992 px, le thème empile déjà. */
@media (min-width: 992px) {
    .product-reviews #product-testimonies {
        display: block;
        width: 100%;
        padding: 15px 0 0;
    }

    .product-reviews .product-column-right #evaluations {
        display: block;
        width: 100%;
        padding: 0;
    }
}

/* ===== Animations discrètes =====
   Apparition des cartes au défilement, survol des cartes, boutons et liens du menu, photo d'accueil. Courtes et légères ;
   aucune pour les visiteurs qui ont demandé à réduire les animations dans leur système (prefers-reduced-motion). */
@media (prefers-reduced-motion: no-preference) {

    /* Apparition au défilement : la classe reveal est posée par le script du thème (sans script, tout reste visible) ;
       --reveal-delay décale les cartes d'une même rangée. */
    .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        transition-delay: var(--reveal-delay, 0ms);
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    /* Survol des cartes (recherche, offres d'un producteur) : légère élévation et zoom lent de la photo, portée par un
       calque qui reprend le fond de la carte pour ne pas déborder sur le texte. */
    .articleContainer article {
        transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    }

    .articleContainer article:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(35, 50, 76, 0.14);
    }

    .articleContainer article .imgCont {
        overflow: hidden;
    }

    .articleContainer article .imgCont::before {
        content: '';
        position: absolute;
        inset: 0;
        background: inherit;
        background-size: cover;
        transition: transform 0.6s ease-out;
    }

    /* Produit sans photo : le calque garde le logo « R » à sa taille. */
    .articleContainer article .imgCont.no-photo::before {
        background-size: 60px;
    }

    .articleContainer article:hover .imgCont::before {
        transform: scale(1.06);
    }

    /* Univers de l'accueil : la photo ronde grossit légèrement au survol. */
    .bloc-univ img {
        transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    }

    .bloc-univ:hover img {
        transform: scale(1.05);
        box-shadow: 0 10px 22px rgba(35, 50, 76, 0.18);
    }

    /* Boutons : couleurs en fondu et léger soulèvement au survol. */
    .btDark,
    .btLight,
    .btn-charte,
    #order-button,
    #cart-submit-checkout,
    .modal-btn {
        transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
    }

    .btDark:hover,
    .btLight:hover,
    .btn-charte:hover,
    #order-button:hover,
    #cart-submit-checkout:hover,
    .modal-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(35, 50, 76, 0.18);
    }

    /* Menu : fond en fondu et soulignement qui se déploie depuis le centre. */
    .navbar-new .nav-links > li > a {
        position: relative;
        transition: background-color 0.2s ease-out;
    }

    .navbar-new .nav-links > li > a::after {
        content: '';
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 3px;
        height: 2px;
        background: #fff;
        transform: scaleX(0);
        transition: transform 0.25s ease-out;
    }

    .navbar-new .nav-links > li > a:hover::after,
    .navbar-new .nav-links > li > a:focus-visible::after {
        transform: scaleX(1);
    }

    /* Photo d'accueil : zoom très lent, en va-et-vient, porté par un calque qui reprend la photo (le fond du thème est imposé
       en !important) ; le formulaire reste au-dessus. */
    #slider-home {
        overflow: hidden;
    }

    #slider-home::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: inherit;
        background-size: cover;
        background-position: center;
        animation: home-kenburns 30s ease-in-out infinite alternate;
    }

    #slider-home > .maskBg {
        position: relative;
        z-index: 1;
    }
}

@keyframes home-kenburns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08) translate(-1%, -1%);
    }
}