/*
Theme Name: Dom Aventura (Tourm enfant)
Theme URI: https://domaventura.com
Author: Quentin Pol
Description: Thème enfant de Tourm pour Dom Aventura. Toute personnalisation vit ici : une mise à jour du thème parent ne l'effacera pas.
Template: tourm
Version: 1.2.0
Text Domain: tourm-child
*/

/* =============================================================================
   1. La charte
   Valeurs issues de assets/domaventura_charte_graphique.html (29/06/2026).
   ========================================================================== */

:root {
    --dv-or:        #F2C94C;  /* Solar Gold — CTA, accents */
    --dv-or-fonce:  #D4A825;  /* survol de l'or */
    --dv-turquoise: #1ABBC8;  /* Caribbean Teal — liens, icônes */
    --dv-orange:    #EF6C10;  /* Sunset Orange — CTA « urgence » (Vuelos) */
    --dv-ambre:     #A47644;  /* Investment Amber — section Inversiones */
    --dv-fond:      #0D1B2A;  /* Deep Ocean — fond du site */
    --dv-surface:   #112233;  /* Midnight Surface — cartes, sections alternées */
    --dv-clair:     #F0F4F8;  /* Ice White — texte sur fond sombre */
    --dv-attenue:   #8899AA;  /* Steel Blue — texte secondaire */
    --dv-texte:     #C8D8E8;  /* corps de texte */
    --dv-bordure:   #1E3A52;
}

/* =============================================================================
   2. Le site est sombre

   Tourm est un thème CLAIR. La charte impose un fond « Deep Ocean ». Comme la quasi-totalité
   du site est faite de conteneurs Elementor (dont l'en-tête et le pied de page, via Tourm
   Builder), on maîtrise chaque fond ; il reste à retourner les quelques surfaces que le thème
   peint lui-même en blanc.

   ⚠️ Contraste. L'or (#F2C94C) et le turquoise (#1ABBC8) sont des couleurs CLAIRES : du texte
   blanc dessus donne 1,7:1 et 2,0:1 — très en dessous du plancher de 4,5:1 du WCAG AA.
   Les boutons portent donc du texte SOMBRE. Ne pas « corriger » en remettant du blanc.
   ========================================================================== */

body,
.site,
#content,
.wp-site-blocks,
.tourm-main-wrapper,
.tourm-content-wrapper,
main,
main.site-main,
#primary,
.elementor,
.elementor-inner {
    background-color: var(--dv-fond);
    color: var(--dv-texte);
}

/* Pourquoi tous ces conteneurs, et pas seulement `body` :
   Elementor charge les images de fond de section EN DIFFÉRÉ. Tant qu'une section n'est pas
   entrée dans l'écran, elle est transparente — et laisse voir ce qu'il y a derrière. Si l'un
   de ces conteneurs du thème est resté blanc, le visiteur voit une bande blanche traverser un
   site sombre, le temps que l'image arrive. Ils doivent donc TOUS être sombres. */

/* Elementor pose parfois un fond blanc sur ses conteneurs de page. */
.elementor-widget-container { color: inherit; }

/* =============================================================================
   3. En-tête
   ========================================================================== */

.th-header.header-layout1,
.th-header.header-layout1 .sticky-wrapper,
.th-header.header-layout1 .menu-area {
    background-color: var(--dv-fond);
}

/* Le motif topographique du thème est dessiné pour un fond CLAIR : sur le nôtre il ressort
   en traits blancs derrière le logo. Tourm le pose en style INLINE sur `.menu-area` —
   d'où le `!important`, qui est ici le seul recours. */
.th-header .menu-area,
.th-header .menu-area.background-image {
    background-image: none !important;
}

.th-header .header-top {
    background-color: var(--dv-surface);
    border-bottom: 1px solid var(--dv-bordure);
}

/* ⚠️ Le `span` interne, et pas seulement le `li`.
   Tourm enveloppe le texte de la barre supérieure dans un <span> auquel il donne sa propre
   couleur — `--black-color2`, soit #0D0D0C. Colorer le <li> ne sert donc à rien : l'e-mail et
   la localisation restaient écrits en noir sur le fond « Deep Ocean ». Invisibles. */
.th-header .header-top,
.th-header .header-top a,
.th-header .header-top i,
.th-header .header-top span,
.th-header .header-top li,
.th-header .header-links li,
.th-header .header-links li span,
.th-header .header-links a,
.th-header .header-links a span {
    color: var(--dv-attenue);
}

.th-header .header-top a:hover,
.th-header .header-top a:hover span,
.th-header .header-links a:hover,
.th-header .header-links a:hover span {
    color: var(--dv-or);
}

/* Les icônes de la barre supérieure, dans le turquoise de la charte : elles séparent
   les informations sans crier. */
.th-header .header-top i,
.th-header .header-links i {
    color: var(--dv-turquoise);
}

/* Le logo est fourni à 1221×320 : sans contrainte, il s'affiche à sa taille native. */
.th-header .header-logo img,
.th-header .header-logo a img {
    height: 56px;
    width: auto;
    max-width: none;
}

@media (max-width: 991px) {
    .th-header .header-logo img { height: 44px; }
}

/* Menu principal.
 *
 * ⚠️ Le sélecteur porte `.header-layout1` — c'est nécessaire, pas décoratif.
 * Tourm écrit `.header-layout1 .main-menu > ul > li > a:hover { color: var(--black-color2) }`,
 * soit du NOIR au survol. Une règle `.th-header .main-menu > ul > li > a:hover` a exactement la
 * même spécificité (3 classes, 3 éléments) : à égalité, c'est l'ordre de chargement qui tranche,
 * et la feuille du thème passait après la nôtre. Le libellé survolé devenait donc invisible.
 * En reprenant `.header-layout1` ET `.th-header`, on repasse devant pour de bon. */
.th-header.header-layout1 .main-menu > ul > li > a,
.th-header .main-menu > ul > li > a {
    color: var(--dv-clair);
}
.th-header.header-layout1 .main-menu > ul > li > a:hover,
.th-header.header-layout1 .main-menu > ul > li > a.active,
.th-header.header-layout1 .main-menu > ul > li.current-menu-item > a,
.th-header.header-layout1 .main-menu > ul > li.current-menu-ancestor > a,
.th-header .main-menu > ul > li > a:hover,
.th-header .main-menu > ul > li.current-menu-item > a,
.th-header .main-menu > ul > li.current-menu-ancestor > a {
    color: var(--dv-or);
}

/* Le chevron des entrées à sous-menu suit la même règle — le thème le repeint en noir aussi. */
.th-header.header-layout1 .main-menu ul li.menu-item-has-children > a:hover:after,
.th-header.header-layout1 .main-menu ul li.menu-item-has-children > a.active:after,
.th-header .main-menu ul li.menu-item-has-children > a:hover:after {
    color: var(--dv-or);
}

/* Le soulignement animé du thème passe sous le libellé : il doit être doré, pas turquoise. */
.th-header.header-layout1 .main-menu > ul > li > a:before {
    background-color: var(--dv-or);
}

/* Tourm met un `text-transform: capitalize` sur les libellés de menu, qui transformait
   « Bayahibe: Snorkel y Saona » en « Snorkel Y Saona ». Un titre est du contenu : il s'affiche
   tel qu'il est écrit. */
.th-header .main-menu ul li a,
.th-menu-wrapper .th-mobile-menu ul li a {
    text-transform: none;
}

/* Sous-menus */
.th-header .main-menu ul.sub-menu {
    background-color: var(--dv-surface);
    border: 1px solid var(--dv-bordure);
}
.th-header .main-menu ul.sub-menu li a {
    color: var(--dv-texte);
    border-bottom-color: var(--dv-bordure);
}
.th-header .main-menu ul.sub-menu li a:hover {
    color: var(--dv-or);
    background-color: rgba(242, 201, 76, 0.06);
}

/* =============================================================================
   3 bis. Le menu mobile

   Tourm dessine son panneau hors-écran pour un thème CLAIR : fond blanc, en-tête de panneau
   blanc, bouton de fermeture sombre. Sur notre site sombre, le logo (qui est BLANC) devenait
   invisible sur le fond blanc du panneau, et la moitié basse du panneau restait une grande
   surface blanche. Tout le panneau doit donc être retourné.
   ========================================================================== */

.th-menu-wrapper,
.th-menu-wrapper .th-menu-area,
.th-menu-wrapper .th-mobile-menu,
.th-menu-wrapper .mobile-logo,
.th-menu-wrapper .th-mobile-menu > ul,
.th-menu-area {
    background-color: var(--dv-fond) !important;
    background-image: none !important;
}

/* L'en-tête du panneau (là où loge le logo) : une teinte plus claire, pour le détacher. */
.th-menu-wrapper .mobile-logo {
    background-color: var(--dv-surface) !important;
    border-bottom: 1px solid var(--dv-bordure);
    padding: 22px 20px;
}
.th-menu-wrapper .mobile-logo img {
    max-width: 190px;
    height: auto;
}

.th-menu-wrapper .th-mobile-menu ul li {
    border-bottom: 1px solid var(--dv-bordure);
}
.th-menu-wrapper .th-mobile-menu ul li a {
    color: var(--dv-clair);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
.th-menu-wrapper .th-mobile-menu ul li a:hover,
.th-menu-wrapper .th-mobile-menu ul li.current-menu-item > a {
    color: var(--dv-or);
}

/* Le bouton « déplier » d'une entrée à sous-menu.
   C'est un `::after` sur le lien, peint en `--smoke-color` (blanc cassé) avec un « + » en
   `--title-color` (noir). Sur le panneau sombre, ça donnait une pastille blanche muette.
   Le sélecteur reprend `.th-menu-wrapper` : à spécificité égale, la feuille du thème passe
   après la nôtre et gagnerait. */
.th-menu-wrapper .th-mobile-menu ul .menu-item-has-children > a:after,
.th-menu-wrapper .th-mobile-menu ul .menu-item-has-children > a .th-mean-expand {
    background-color: var(--dv-or);
    color: var(--dv-fond);
    box-shadow: none;
}
.th-menu-wrapper .th-mobile-menu ul li.th-active > a {
    color: var(--dv-or);
}

/* Les sous-menus dépliés, un cran plus sombre pour marquer la hiérarchie. */
.th-menu-wrapper .th-mobile-menu ul .sub-menu {
    background-color: rgba(0, 0, 0, 0.22);
}
.th-menu-wrapper .th-mobile-menu ul .sub-menu li a {
    font-weight: 400;
    font-size: 15px;
}

/* ⚠️ La barre de défilement blanche en travers du panneau.
   Tourm met `overflow-y: scroll` sur la liste — la barre est donc TOUJOURS dessinée, même
   quand il n'y a rien à faire défiler. Sur un panneau sombre, ça donnait un ruban blanc
   vertical au milieu du menu. `auto` ne l'affiche que si elle sert, et on l'habille. */
.th-menu-wrapper .th-mobile-menu {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dv-bordure) transparent;
}
.th-menu-wrapper .th-mobile-menu::-webkit-scrollbar { width: 6px; }
.th-menu-wrapper .th-mobile-menu::-webkit-scrollbar-track { background: transparent; }
.th-menu-wrapper .th-mobile-menu::-webkit-scrollbar-thumb {
    background-color: var(--dv-bordure);
    border-radius: 3px;
}

/* Le bouton de fermeture, en haut à droite du panneau. Le thème le peint en turquoise très
   sombre : sur un panneau sombre, il disparaissait. */
.th-menu-wrapper .th-menu-area > .th-menu-toggle,
.th-menu-wrapper .th-menu-toggle,
.th-menu-wrapper .menu-toggle {
    background-color: var(--dv-or);
    border-color: var(--dv-or);
    color: var(--dv-fond);
}
.th-menu-wrapper .th-menu-area > .th-menu-toggle i,
.th-menu-wrapper .th-menu-toggle i {
    color: var(--dv-fond);
}

/* Le bouton burger lui-même, dans l'en-tête. L'icône est un <i class="far fa-bars"> :
   c'est sa COULEUR qu'il faut fixer, pas un fond. */
.th-menu-toggle {
    background-color: var(--dv-or);
    border-color: var(--dv-or);
}
.th-menu-toggle i {
    color: var(--dv-fond);
}
.th-menu-toggle:hover {
    background-color: var(--dv-or-fonce);
    border-color: var(--dv-or-fonce);
}
.th-menu-toggle:hover i {
    color: var(--dv-fond);
}

/* Sélecteur de langue de la barre supérieure */
.header-top .dropdown-link .dropdown-menu {
    background-color: var(--dv-surface);
    border: 1px solid var(--dv-bordure);
    padding: 6px 0;
}
.header-top .dropdown-link .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    color: var(--dv-texte);
    white-space: nowrap;
}
.header-top .dropdown-link .dropdown-menu a:hover { color: var(--dv-or); }
.header-top .lang-item { list-style: none; }

/* =============================================================================
   4. Boutons — le point d'accessibilité
   ========================================================================== */

.th-btn,
.th-btn.style3,
.wp-block-button__link,
.elementor-button {
    background-color: var(--dv-or);
    color: var(--dv-fond);
    border-color: var(--dv-or);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.th-btn:hover,
.th-btn.style3:hover,
.elementor-button:hover {
    background-color: var(--dv-or-fonce);
    color: var(--dv-fond);
    border-color: var(--dv-or-fonce);
    box-shadow: 0 4px 14px rgba(242, 201, 76, 0.35);
}
/* Tourm pose souvent la couleur du texte sur un <span> interne. */
.th-btn span,
.th-btn i { color: inherit; }

/* Le bouton « urgence » de la page Vuelos.
   Les sélecteurs couvrent les DEUX formes : le bouton Elementor (un <a>) et celui de
   Contact Form 7 (un <input type="submit">, qui ne peut pas avoir d'enfant). */
.dv-btn-urgence .elementor-button,
.dv-btn-urgence.th-btn,
input.dv-btn-urgence,
input[type="submit"].dv-btn-urgence {
    background-color: var(--dv-orange) !important;
    border-color: var(--dv-orange) !important;
    color: #FFFFFF !important; /* orange foncé : le blanc passe (AA sur texte large et gras) */
}
.dv-btn-urgence .elementor-button:hover,
input.dv-btn-urgence:hover { background-color: #D4550A !important; border-color: #D4550A !important; }

/* Le bouton de la section Inversiones — le seul endroit où l'ambre de la charte sert. */
.dv-btn-ambre .elementor-button,
.dv-btn-ambre.th-btn,
input.dv-btn-ambre,
input[type="submit"].dv-btn-ambre {
    background-color: var(--dv-ambre) !important;
    border-color: var(--dv-ambre) !important;
    color: #FFFFFF !important;
}
.dv-btn-ambre .elementor-button:hover,
input.dv-btn-ambre:hover { background-color: #8A6236 !important; border-color: #8A6236 !important; }

/* Le bouton d'envoi des formulaires.
 *
 * ⚠️ Contact Form 7 lui met la classe `th-btn` du thème, mais Tourm le repeint ensuite en
 * `--theme-color` — un turquoise clair (#1CA8CB) — avec du texte BLANC dessus. C'est 2,6:1 :
 * très en dessous du plancher de 4,5:1, et hors charte. On le remet à l'or, texte sombre.
 *
 * (Les variantes orange et ambre, plus haut, gardent la main : elles portent des `!important`.) */
.wpcf7 input[type="submit"],
input.wpcf7-submit,
input.wpcf7-submit.th-btn {
    background-color: var(--dv-or);
    border-color: var(--dv-or);
    color: var(--dv-fond);
    text-transform: none;
}
.wpcf7 input[type="submit"]:hover,
input.wpcf7-submit:hover {
    background-color: var(--dv-or-fonce);
    border-color: var(--dv-or-fonce);
    color: var(--dv-fond);
}

/* Focus clavier visible partout — plancher d'accessibilité. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.elementor-button:focus-visible {
    outline: 3px solid var(--dv-turquoise);
    outline-offset: 2px;
}

/* =============================================================================
   5. Bandeau de titre des pages internes
   ========================================================================== */

/* Un DÉGRADÉ, et plus une photo.
 *
 * Les fiches d'activité posaient ici leur affiche en fond, en `background-size: cover`.
 * Or ces affiches font 618 px de large — et 371 pour Samaná, 376 pour Bayahibe. Étalées sur un
 * bandeau de 1440 px, elles étaient agrandies jusqu'à 3,8× : une bouillie. Aucun réglage ne
 * rattrape ça, il n'y a pas les pixels.
 *
 * Un dégradé est net à toutes les tailles, sur tous les écrans, et ne pèse rien. L'affiche du
 * client n'est pas perdue : elle est dans le corps de la fiche, encadrée, à sa taille réelle. */
.breadcumb-wrapper {
    position: relative;
    background-color: var(--dv-fond);
    background-image:
        radial-gradient(1100px 420px at 22% 0%, rgba(26, 187, 200, 0.13) 0%, rgba(26, 187, 200, 0) 62%),
        radial-gradient(900px 400px at 88% 110%, rgba(242, 201, 76, 0.09) 0%, rgba(242, 201, 76, 0) 60%),
        linear-gradient(120deg, #0D1B2A 0%, #0F2E3D 100%);
    background-size: cover;
    background-position: center center;
    border-bottom: 1px solid var(--dv-bordure);
    padding: 96px 0 88px;
}
.breadcumb-wrapper > * { position: relative; z-index: 1; }

.breadcumb-title {
    color: #FFFFFF;
    /* Le thème met un `text-transform: capitalize`, qui écrivait « Bayahibe: Snorkel Y Saona ».
       Le titre est du contenu : il s'affiche tel qu'il est écrit. */
    text-transform: none;
}
.breadcumb-menu li,
.breadcumb-menu li a { color: var(--dv-attenue); }
.breadcumb-menu li a:hover { color: var(--dv-or); }
.breadcumb-menu li.active { color: var(--dv-or); }

/* =============================================================================
   5 bis. Les images encadrées

   Toute photo du client vit désormais dans un cadre, à une taille où elle est RÉDUITE —
   c'est-à-dire nette. Voir dv_cadre_image() dans scripts/lib-elementor.php.
   ========================================================================== */

.dv-cadre img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    border: 1px solid var(--dv-bordure);
    box-shadow: 0 22px 60px -24px rgba(0, 0, 0, 0.75);
}

/* Le bandeau scindé.
 *
 * Le plafond de 640 px n'est pas arbitraire : c'est la largeur du PLUS PETIT fichier posé ici
 * (inversiones.webp, 640 × 500). Au-delà, le navigateur agrandirait — ce qu'on s'interdit.
 * Voir images.php pour la définition exacte de chaque visuel. */
.dv-hero .dv-cadre img {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .dv-hero .dv-cadre img { max-width: 560px; }
}

/* Le fond du bandeau : un dégradé, plus deux halos de la charte. Sans eux, l'aplat paraît
   plat et bon marché ; avec eux, il a de la profondeur — et il reste net à toutes les tailles. */
.dv-hero {
    position: relative;
    overflow: hidden;
}
.dv-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 78% 18%, rgba(26, 187, 200, 0.16) 0%, rgba(26, 187, 200, 0) 60%),
        radial-gradient(700px 420px at 6% 96%, rgba(242, 201, 76, 0.10) 0%, rgba(242, 201, 76, 0) 62%);
}
.dv-hero > * { position: relative; z-index: 1; }

/* Les pages construites entièrement sous Elementor portent leur propre bandeau :
   celui du thème ferait doublon. */
.dv-sans-bandeau .breadcumb-wrapper { display: none; }

/* =============================================================================
   6. Pied de page
   ========================================================================== */

.footer-wrapper,
footer.footer-wrapper {
    background-color: var(--dv-fond);
}

/* Le logo du pied de page.
 *
 * ⚠️ C'est ICI que se jouait le bug le plus visible du site.
 * Notre logo horizontal fait 1221 × 320. Sans borne, il s'affichait à la largeur de sa colonne
 * — 430 px — et le jambage du « A » d'« Aventura » débordait sur la colonne voisine, recouvrant
 * le premier lien du menu (« Actividades »). Un logo de pied de page ne dépasse jamais 210 px. */
.dv-logo-pied img,
.footer-widget .about-logo img,
.footer-widget .widget_about img {
    max-width: 210px;
    width: 100%;
    height: auto;
}
.dv-logo-pied .elementor-widget-container { margin: 0; }

/* Les quatre titres de colonne sur une même ligne. Le thème leur donne des marges hautes
   différentes selon le widget ; on les remet d'équerre. */
.dv-pied .footer-widget .widget_title,
.dv-pied .widget_title,
.footer-widget .widget_title,
.footer-widget .widget_title.title {
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    margin: 0 0 22px;
    text-transform: none;
}
.dv-pied .footer-widget,
.dv-pied .widget {
    margin: 0;
    padding: 0;
    background: none;
}

.footer-widget ul li a,
.footer-widget .th-widget-contact a,
.footer-widget p {
    color: var(--dv-attenue);
}
.footer-widget ul li a:hover,
.footer-widget .th-widget-contact a:hover {
    color: var(--dv-or);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LE RYTHME DU PIED DE PAGE — une seule grille pour les quatre colonnes.

   ⚠️ C'est ici que le pied de page se jouait, et il se jouait mal.

   Trois rythmes verticaux se superposaient sans jamais s'accorder :
     · les liens de menu — un `li` de 47 px de haut (hauteur de ligne du thème) pour un lien
       de 26 px, plus 10 px de marge : une ligne tous les 57 px, beaucoup trop aéré ;
     · les lignes de contact — une pastille de 40 px, plus 18 px de marge : 58 px, mais décalées
       de 10 px vers le bas, si bien qu'aucune ligne ne tombait en face d'une autre ;
     · et l'e-mail écrit en BLANC GRAS quand tous les autres liens sont en gris.

   D'où l'impression de décalage. On remet donc tout sur une grille unique : une ligne toutes
   les 36 px, un seul gris, une seule graisse, dans les quatre colonnes.
   ───────────────────────────────────────────────────────────────────────────── */

/* La ligne de base commune. Le `li` ne porte plus de hauteur propre : c'est le lien
   qui la fixe, avec son remplissage. */
.dv-pied .footer-widget ul li,
.dv-pied .footer-widget .info-box_text {
    margin: 0;
    padding: 0;
    border: none;
    line-height: 1;
}

/* ⚠️ `margin: 0` sur le LIEN, et pas seulement sur le `li` — c'est ce qui manquait.
 *
 * Tourm donne au lien une marge basse. Le `li` n'ayant ni bordure ni remplissage, cette marge
 * lui ÉCHAPPE (fusion des marges, « margin collapsing ») : elle ne compte pas dans la hauteur
 * du `li` — mesurée à 37 px — mais elle pousse quand même le suivant. D'où deux liens espacés
 * de 58 px alors que tout, en apparence, disait 37.
 *
 * C'est le genre de décalage qu'on cherche longtemps dans le mauvais élément. */
.dv-pied .footer-widget ul li a,
.dv-pied .footer-widget .info-box_text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 7px 0;
    min-height: 36px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--dv-attenue);
}

/* Le chevron des liens de menu : il redevient un élément de la LIGNE, et non un
   pseudo-élément posé en absolu — c'est ce qui garantit qu'il tombe à la même abscisse que
   l'icône de la colonne Contacto, 10 px avant le texte. */
.dv-pied .footer-widget ul li a {
    position: relative;
    padding-left: 20px;
}
.dv-pied .footer-widget ul li a::before {
    position: absolute;
    left: 0;
    top: 9px;
    color: var(--dv-or);
    font-size: 12px;
    line-height: 1.5;
}
.dv-pied .footer-widget ul li a:hover,
.dv-pied .footer-widget ul li.current-menu-item > a {
    color: var(--dv-or);
}

/* Les lignes de contact.
   Le balisage de Tourm est `.info-box_text > .icon > img` + `.details`. Sa pastille était
   peinte en `--smoke-color` (#E9F6F9) : deux ronds blancs sur un pied de page sombre. On la
   remplace par l'icône seule, à 16 px, exactement à la place du chevron des autres colonnes. */
.dv-pied .footer-widget .info-box_text > .icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 4px;
}
.dv-pied .footer-widget .info-box_text > .icon img {
    width: 16px;
    height: 16px;
}
.dv-pied .footer-widget .info-box_text > .icon:empty { display: none; }

.dv-pied .footer-widget .info-box_text .details { min-width: 0; }

/* ⚠️ Même gris, même graisse que les autres colonnes.
   L'e-mail était en blanc gras : il sautait aux yeux au milieu de liens gris, et cassait
   l'unité du pied de page. Il reste un lien, il se comporte comme un lien. */
.dv-pied .footer-widget .info-box_text .details p,
.dv-pied .footer-widget .info-box_text .details a,
.dv-pied .footer-widget .about-contact-details-text {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--dv-attenue);
    overflow-wrap: anywhere;
}
.dv-pied .footer-widget .info-box_text .details a:hover { color: var(--dv-or); }

/* ⚠️ Le `padding-left` du lien n'est PAS décoratif : il fait sa place au chevron.
   Tourm dessine celui-ci dans un `a::before` en `position: absolute; left: 0`, et compte sur un
   `padding-left` du lien pour le décaler. Le mettre à zéro fait retomber le chevron SUR la
   première lettre : on lisait « Åctividades », « Ŧrámites ». (Même mécanisme que la coche de
   WP Travel Engine, plus bas.) Le rythme et les couleurs sont réglés plus haut. */
.dv-pied .footer-widget ul,
.dv-pied .widget_nav_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* =============================================================================
   7. Formulaires (Contact Form 7, habillé par le thème)
   ========================================================================== */

/* ⚠️ `number` fait partie de la liste. Il en manquait, et le champ « Pasajeros » du formulaire
   de vol restait donc BLANC au milieu d'un formulaire sombre — le fond par défaut du thème. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 input[type="url"],
.wpcf7 input[type="search"],
.wpcf7 select,
.wpcf7 textarea,
.form-control,
.form-select {
    background-color: var(--dv-surface);
    border: 1px solid var(--dv-bordure);
    color: var(--dv-clair);
}

/* Le sélecteur de date : sur fond sombre, l'icône du calendrier de Chrome reste noire. */
.wpcf7 input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.9);
    cursor: pointer;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder,
.form-control::placeholder {
    color: var(--dv-attenue);
    opacity: 1;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
.form-control:focus {
    border-color: var(--dv-turquoise);
    box-shadow: 0 0 0 3px rgba(26, 187, 200, 0.18);
    background-color: var(--dv-surface);
    color: var(--dv-clair);
}
.wpcf7 label { color: var(--dv-clair); font-weight: 700; }
.wpcf7-not-valid-tip { color: #FF8A80; }
.wpcf7 .wpcf7-response-output {
    border-color: var(--dv-bordure);
    color: var(--dv-texte);
}

/* =============================================================================
   8. Cartes et sections
   ========================================================================== */

.dv-carte {
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.dv-carte:hover {
    border-color: var(--dv-turquoise) !important;
    box-shadow: 0 6px 24px rgba(26, 187, 200, 0.18);
    transform: translateY(-3px);
}

/* L'image en tête de carte doit occuper toute la largeur.
   Le contrôle « Largeur » du widget Image d'Elementor ne s'applique pas ici : sans cette
   règle, l'image garde sa proportion naturelle et une affiche 618×1024 recadrée à 230 px
   de haut ne fait plus que 139 px de large — une vignette perdue au milieu de la carte. */
.dv-carte .elementor-widget-image,
.dv-carte .elementor-widget-image .elementor-widget-container,
.dv-carte .elementor-widget-image figure,
.dv-carte .elementor-widget-image a {
    width: 100%;
    display: block;
    margin: 0;
    line-height: 0;
}
.dv-carte .elementor-widget-image img {
    width: 100%;
    display: block;
}

/* Les titres de section du thème */
.title-area .sec-title,
.sec-title { color: #FFFFFF; }
.sec-subtitle,
.sub-title { color: var(--dv-or); }

/* Le texte d'Elementor hérite du thème : on force le contraste sur fond sombre. */
.elementor-widget-text-editor,
.elementor-widget-text-editor p { color: var(--dv-texte); }
.elementor-widget-text-editor a { color: var(--dv-turquoise); }
.elementor-widget-text-editor a:hover { color: var(--dv-or); }

/* Les URL longues des pages légales ne doivent pas déborder en mobile. */
.dv-texte-long { overflow-wrap: anywhere; }

/* Listes à puces dorées */
.dv-liste {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dv-liste li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    color: var(--dv-texte);
}
.dv-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--dv-or);
    transform: rotate(45deg);
}
.dv-liste li strong { color: var(--dv-clair); }

/* Cibles des ancres — pour que l'en-tête collant ne recouvre pas le formulaire visé. */
.dv-ancre-buscar,
.dv-ancre-oportunidades,
.dv-ancre-eticket { scroll-margin-top: 120px; }

/* =============================================================================
   Le consentement RGPD — et la case qu'on ne pouvait pas cocher

   Tourm masque toutes les cases à cocher natives (`display: none; visibility: hidden;
   opacity: 0`) pour leur substituer un dessin maison. Ce dessin n'arrive JAMAIS sur le balisage
   de Contact Form 7 : la case de consentement était donc invisible, et impossible à cocher.

   Conséquence, avant ce correctif : le champ `[acceptance]` étant obligatoire, PERSONNE ne
   pouvait envoyer un formulaire. Les trois formulaires du site étaient morts.

   On rend donc la case native, visible et cliquable, aux couleurs de la charte.
   ========================================================================== */

.dv-consent {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
    color: var(--dv-attenue);
    margin-bottom: 22px;
}
.dv-consent a { color: var(--dv-turquoise); text-decoration: underline; }
.dv-consent a:hover { color: var(--dv-or); }

.wpcf7 .wpcf7-acceptance input[type="checkbox"],
.wpcf7 .wpcf7-list-item input[type="checkbox"],
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    flex: 0 0 18px;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    margin: 3px 10px 0 0 !important;
    padding: 0;
    accent-color: var(--dv-or);   /* la coche est or, sur fond sombre */
    cursor: pointer;
    flex-shrink: 0;
}
.wpcf7 input[type="radio"] { -webkit-appearance: radio !important; }

/* ⚠️ La coche turquoise qui atterrissait SUR le lien « política de privacidad ».
 *
 * WP Travel Engine habille TOUTES les cases à cocher du site — sans restreindre ses sélecteurs
 * à ses propres écrans. Il écrit, en portée globale :
 *
 *     input[type=checkbox]                  { appearance: none; position: relative; … }
 *     input[type=checkbox]:checked::before  { content:""; position: absolute;
 *                                             background: var(--primary-color);
 *                                             mask: url(<svg d'une coche>); width:14px }
 *     input[type=checkbox]:hover            { box-shadow: 0 0 0 7px rgba(turquoise, .1) }
 *
 * Sa coche est donc dessinée dans un `::before` ABSOLU, calé sur l'input lui-même (`relative`).
 * Or nous remettons l'input en `position: static` — c'est ce qui le rend visible et cliquable.
 * Privé d'ancrage, le `::before` retombe à sa position statique : juste après la case, c'est-à-
 * dire EN PLEIN MILIEU du texte du consentement. D'où le petit carré turquoise coché posé sur
 * « la política de privacidad ».
 *
 * On ne veut pas de la case de WTE : on veut la case NATIVE du navigateur, accessible, focusable
 * et pilotée par `accent-color`. On efface donc ses deux pseudo-éléments et son halo. */
.wpcf7 input[type="checkbox"]::before,
.wpcf7 input[type="checkbox"]::after,
.wpcf7 input[type="checkbox"]:checked::before,
.wpcf7 input[type="checkbox"]:checked::after,
.wpcf7 input[type="checkbox"]:focus-within::after,
.wpcf7 input[type="radio"]::before,
.wpcf7 input[type="radio"]::after {
    content: none !important;
    display: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    background: none !important;
    animation: none !important;
}
.wpcf7 input[type="checkbox"]:hover,
.wpcf7 input[type="checkbox"]:checked {
    box-shadow: none !important;
    background: none !important;
    border: none !important;
}

.wpcf7 .wpcf7-list-item {
    margin: 0;
    display: flex;
    align-items: flex-start;
}
.wpcf7 .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    color: var(--dv-attenue);
}
.wpcf7 .wpcf7-list-item-label { line-height: 1.5; }

/* Le focus clavier doit rester visible : c'est un champ obligatoire. */
.wpcf7 input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--dv-turquoise);
    outline-offset: 2px;
}

/* Contact Form 7 : la grille du thème (Bootstrap) est déjà là, on ne la refait pas. */
.wpcf7 .row { --bs-gutter-x: 20px; }
.wpcf7 p { margin-bottom: 18px; }
.wpcf7 label { display: block; margin-bottom: 8px; font-size: 14px; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 13px 16px;
    border-radius: 6px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
}
.wpcf7 input[type="submit"] {
    width: auto;
    cursor: pointer;
    border: none;
}

/* =============================================================================
   9. Fiches d'activité (WP Travel Engine)
   ========================================================================== */

.wte-trip-single,
.trip-single-wrapper,
.wp-travel-engine-single-trip {
    background-color: var(--dv-fond);
    color: var(--dv-texte);
}
.wte-trip-single h1,
.wte-trip-single h2,
.wte-trip-single h3,
.wte-trip-single h4 { color: #FFFFFF; }

/* Vitrine, pas boutique : ni prix, ni panier, ni liste d'envies. */
.wte-trip-price,
.trip-price,
.wte-booking-btn,
.wte-add-to-cart,
.wte-wishlist-btn,
.wte__wishlist,
.trip-cart-btn {
    display: none !important;
}

/* =============================================================================
   10. Barre de haut de page
   ========================================================================== */

.scroll-top { color: var(--dv-fond); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LES BANDEAUX PHOTO — le voile, sous 1024 px
   ═══════════════════════════════════════════════════════════════════════════════════════════

   Sur grand écran, le voile de ces bandeaux est un DÉGRADÉ horizontal : dense à gauche, où vit
   le texte (colonne de 60 %) ; léger à droite, où l'on veut voir la photo.

   🔴 Sous 1024 px, cette colonne passe à 100 % : le texte s'étale jusqu'au bord droit — là,
      précisément, où le voile s'est ouvert. Mesuré sur la page « Actividades » à 390 px, dont
      la photo est très claire (un rocher blanc) : le surtitre tombait à 1,99:1, le titre à
      2,69:1. Illisible. Le même contrôle à 1440 px était tout vert.

   ⚠️ Elementor NE REND PAS les couleurs d'un dégradé responsive : poser un
      `background_overlay_color_b_mobile` ne produit rien, et ne le dit pas. Le voile mobile se
      reprend donc ici.

   ⚠️ ET LE VOILE N'EST PAS UN `<div>`. Sur les anciennes SECTIONS d'Elementor, il l'était :
      `.elementor-background-overlay`. Sur les CONTENEURS (`e-con`, ceux que produit ce site),
      c'est un **pseudo-élément `::before`** — et il n'y a aucun div à cibler. Un sélecteur écrit
      pour l'ancien modèle ne s'applique à rien, sans erreur ni avertissement : le CSS est
      valide, il ne touche simplement aucun élément. On vise donc les deux.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .dv-hero-photo::before,
  .dv-hero-photo > .elementor-background-overlay {
    background-image: none !important;
    background-color: rgba(13, 27, 42, 0.90) !important;
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LE MENU DE NAVIGATION — un cran plus lisible, sur ORDINATEUR seulement
   ═══════════════════════════════════════════════════════════════════════════════════════════

   Tourm le sert en 16 px / graisse 400 : discret au point de se perdre sur un large écran, à
   côté d'un logo et d'un bouton d'appel à l'action.

   ⚠️ La règle est enfermée dans `min-width: 1200px`, et c'est délibéré. Le menu de bureau du
      thème porte la classe `d-xl-inline-block` : il n'existe qu'au-delà de 1200 px, et sous ce
      seuil c'est le menu BURGER qui prend le relais — un panneau latéral dont la typographie
      n'a rien à voir. L'agrandir ici casserait le mobile pour rien.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
  .main-menu > ul.tourm-menu > li > a {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.2px;
  }

  /* Un texte plus grand a besoin d'un peu plus d'air : sans cela, les entrées se touchent. */
  .main-menu > ul.tourm-menu > li {
    margin-right: 26px;
  }
  .main-menu > ul.tourm-menu > li:last-child {
    margin-right: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LES GALERIES DES ACTIVITÉS — refonte Punta Cana (16/07/2026)
   ═══════════════════════════════════════════════════════════════════════════════════════════

   Le widget « Basic Gallery » d'Elementor rend le [gallery] de WordPress : des <figure> flottées
   en pourcentage, caption comprise. On le reprend en GRILLE CSS pour des tuiles régulières
   (object-fit: cover), sans caption, avec un survol discret. La lightbox (clic → diaporama de
   toutes les photos) est gérée par Elementor via gallery_link=file + open_lightbox=yes.

   La classe .dv-galeria est posée sur le wrapper du widget (_css_classes).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.dv-galeria .elementor-image-gallery .gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 !important;
}
.dv-galeria .gallery-item {
  display: block;
  width: auto !important;
  max-width: none !important;   /* WP core force .gallery-columns-4 .gallery-item { max-width: 25% } → tuiles de 78 px */
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.dv-galeria .gallery-icon { display: block; width: 100% !important; margin: 0 !important; line-height: 0; }
.dv-galeria .gallery-icon a { display: block; width: 100%; line-height: 0; }
.dv-galeria .gallery-item img {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: none !important;
  border-radius: 12px;
  display: block;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform .45s ease, box-shadow .45s ease, filter .45s ease;
}
.dv-galeria .gallery-item img:hover {
  transform: scale(1.04);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  filter: brightness(1.06);
}
.dv-galeria .gallery-caption { display: none !important; }

@media (max-width: 1024px) {
  .dv-galeria .elementor-image-gallery .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .dv-galeria .elementor-image-gallery .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LE BADGE DE PRIX « $30 / persona » — page Trámites (retours client 16/07/2026, PDF #2)
   ═══════════════════════════════════════════════════════════════════════════════════════════

   Le client veut le prix « más visual, en bleu clair » : une pastille au turquoise de la charte,
   plutôt qu'un simple texte doré. Le fond, la bordure et le rayon (pill) sont posés sur la colonne
   Elementor ; ici on annule juste la marge basse du <p> (sinon il décentre la pastille) et on
   ajoute une légère lueur.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.dv-badge-precio { box-shadow: 0 0 18px rgba(26, 187, 200, 0.25); }
.dv-badge-precio p { margin: 0 !important; }
.dv-badge-precio strong { letter-spacing: 0.5px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LE BOUTON « E-TICKET » DE L'EN-TÊTE — retours client 16/07/2026 (PDF #2)
   ═══════════════════════════════════════════════════════════════════════════════════════════

   Injecté par functions.php dans .header-button, AVANT « Contactar ». Il porte le turquoise de la
   charte (« bleu clair » demandé) avec une encre sombre (le turquoise est une couleur CLAIRE : du
   blanc dessus tomberait à 2:1). Comme « Contactar », il ne s'affiche qu'en desktop (≥ 1200 px) —
   le conteneur .header-button est en d-none d-xl-block.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.header-button .dv-btn-eticket.th-btn {
  background-color: var(--dv-turquoise) !important;
  color: var(--dv-fond) !important;
  margin-right: 14px;
  --theme-color: var(--dv-turquoise);
}
.header-button .dv-btn-eticket.th-btn::before,
.header-button .dv-btn-eticket.th-btn::after { background-color: rgba(13, 27, 42, 0.14) !important; }
.header-button .dv-btn-eticket.th-btn:hover { background-color: #15A9B4 !important; color: var(--dv-fond) !important; }