/* =====================================================================
Améliorations ergonomie & responsive — KAP Graphique, 20/08/2026
Fichier additionnel : le thème d'origine n'est pas modifié.
Pour tout annuler : retirer l'appel à ce fichier dans functions.php.
===================================================================== */
/* --- Médias adaptatifs -------------------------------------------------
L'iframe des cartes avait une largeur fixe de 300px et débordait de
l'écran en tablette (défilement horizontal parasite). */
iframe,
embed,
object,
video {
max-width: 100%;
}
iframe.iframe-class {
width: 100%;
height: 320px;
border: 0;
}
img {
max-width: 100%;
height: auto;
}
/* --- Tablette ---------------------------------------------------------- */
@media (max-width: 1024px) {
.wrapper,
.row {
max-width: 100%;
}
}
/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 767px) {
/* Lisibilité : 14px était sous la norme de confort mobile */
body,
p,
li,
td,
.desc {
font-size: 16px;
line-height: 1.55;
}
/* Sur une fiche voyage, le prix, les dates et le bouton Réserver
n'apparaissaient qu'aux deux tiers de la page. On les remonte
juste sous le titre. */
.single-trip .row {
display: flex;
flex-direction: column;
}
.single-trip .row > .darkblock {
order: -1;
margin-bottom: 1.4rem;
}
/* Le diaporama affichait jusqu'à 24 puces alignées : illisible et
inutilisable au doigt. Les flèches suffisent. */
.flex-control-nav {
display: none;
}
/* Cibles tactiles : minimum recommandé 44px */
nav a,
.nav a,
header a,
#tabs a {
display: inline-block;
padding: 11px 9px;
}
/* Bandeau cookies : il masquait le contenu sur près d'un cinquième
de l'écran. */
#cookie-law-info-bar {
padding: 8px 10px !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
#cookie-law-info-bar .cli-plugin-main-link,
#cookie-law-info-bar a {
padding: 6px 12px !important;
}
/* Tableaux : défilement interne plutôt que débordement de page */
table {
display: block;
overflow-x: auto;
max-width: 100%;
}
/* --- Menu mobile ---------------------------------------------------
Le menu occupait deux lignes et un quart de l'écran d'accueil.
Il est désormais replié derrière un bouton. */
#kap-menu-bouton {
display: block;
position: absolute;
top: 14px;
left: 12px;
z-index: 1001;
width: 44px;
height: 44px;
padding: 10px 8px;
background: rgba(0, 0, 0, .35);
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 6px;
cursor: pointer;
}
#kap-menu-bouton span {
display: block;
height: 2px;
margin: 4px 0;
background: #fff;
border-radius: 2px;
transition: transform .2s ease, opacity .2s ease;
}
#header {
position: relative;
}
#header .menu-menu-principal-container {
display: none;
}
#header.kap-menu-ouvert .menu-menu-principal-container {
display: block;
}
#header.kap-menu-ouvert #kap-menu-bouton span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
#header.kap-menu-ouvert #kap-menu-bouton span:nth-child(2) {
opacity: 0;
}
#header.kap-menu-ouvert #kap-menu-bouton span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
#menu-menu-principal li {
display: block;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, .08);
}
}
/* Le bouton n'existe que sur mobile */
@media (min-width: 768px) {
#kap-menu-bouton {
display: none;
}
}
/* =====================================================================
Cartes de voyage — présentation homogène
Le placement d'origine du thème (colonnes flottantes) est conservé :
seules l'apparence et l'organisation interne changent. Les couleurs
et la typographie du site restent celles du thème.
===================================================================== */
/* --- Le bloc lui-même --------------------------------------------------
Même habillage que le bloc « Notre Blog » de l'accueil (.darkblock) :
fond légèrement assombri, filet discret et bas déchiré. */
.tripsummary {
position: relative;
box-sizing: border-box;
background: rgba(0, 0, 0, .05);
border: 1px solid rgba(0, 0, 0, .15);
border-bottom: none;
padding: 0 0 12px;
margin-bottom: 24px;
text-shadow: black 0 1px 0;
transition: background .18s ease;
/* Deux colonnes : les informations se lisent par paires
(type de séjour / difficulté, puis durée / prix) au lieu de
s'empiler les unes sous les autres. */
display: grid;
grid-template-columns: 1fr auto;
column-gap: 0;
align-content: start;
}
/* --- Largeur de la rangée ----------------------------------------------
Le thème réservait la largeur des marges intérieures à un remplissage
en pourcentage (`padding: 0.83333%`) ; en passant les cartes en
`border-box`, cette part était perdue et la rangée s'arrêtait 70 px
avant le bord droit du diaporama. On répartit toute la largeur :
4 cartes + 3 espaces = 100 %, sans marge sur les bords. */
.tripsummary {
width: 24.0625%;
margin-left: .625%;
margin-right: .625%;
}
.tripsummary:nth-child(4n+1) {
margin-left: 0;
}
.tripsummary:nth-child(4n) {
margin-right: 0;
}
@media screen and (max-width: 768px) {
/* Trois par rangée à cette taille */
.tripsummary {
width: 32.5%;
padding: 0 0 12px;
}
.tripsummary:nth-child(4n+1),
.tripsummary:nth-child(4n) {
margin-left: .625%;
margin-right: .625%;
}
.tripsummary:nth-child(3n+1) {
margin-left: 0;
}
.tripsummary:nth-child(3n) {
margin-right: 0;
}
}
/* Le bas déchiré du bloc « Notre Blog », même image */
.tripsummary:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: -7px;
width: 100%;
height: 7px;
background: url(../img/css/fond-755390de30.png) repeat-x;
}
.tripsummary:hover,
.tripsummary:focus-within {
background: rgba(0, 0, 0, .22);
}
/* --- Répartition des éléments ------------------------------------------
Le thème positionnait ces blocs par flottement ; en grille, on les
place explicitement. */
.tripsummary > .title,
.tripsummary > .type,
.tripsummary > .desc {
grid-column: 1 / -1;
}
.tripsummary > .pictos {
grid-column: 1;
align-self: center;
}
.tripsummary > .diff {
grid-column: 2;
align-self: center;
justify-self: end;
}
.tripsummary > .duration {
grid-column: 1;
}
.tripsummary > .price {
grid-column: 2;
justify-self: end;
}
/* --- Visuel ------------------------------------------------------------
Toutes les vignettes au même format, quel que soit le cadrage
d'origine. L'ombre portée du thème bavait sur le fond du bloc. */
.tripsummary .title {
display: block;
text-decoration: none;
}
.tripsummary .view {
display: block;
margin: 0;
}
.tripsummary .view img {
display: block;
width: 100%;
height: 130px;
object-fit: cover;
box-shadow: none;
border-bottom: 1px solid rgba(0, 0, 0, .25);
}
/* --- Titre -------------------------------------------------------------
Hauteur fixe sur deux lignes : les cartes d'une même rangée
s'alignent, que le titre tienne sur une ligne ou sur deux. */
.tripsummary h2 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 15px;
font-weight: bold;
line-height: 1.25;
letter-spacing: 0;
margin: 10px 12px 3px;
height: 2.5em;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* --- Destination -------------------------------------------------------
Placée juste sous le titre, elle se lit comme un sous-titre. */
.tripsummary .type {
margin: 0 12px 7px;
text-align: left;
font-size: 12px;
font-weight: bold;
line-height: 1.3;
}
/* --- Descriptif --------------------------------------------------------
Le thème la limitait à une seule ligne coupée net ; deux lignes
informent sans déséquilibrer les cartes. */
.tripsummary .desc {
margin: 0 12px 10px;
font-size: 13px;
line-height: 1.35;
height: 2.7em;
color: #b2a590;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* --- Ligne pictogrammes : type de séjour à gauche, difficulté à droite
Hauteur bloquée sur une ligne : un voyage portant trois pictogrammes
faisait sinon grandir sa carte de 18 px par rapport à ses voisines. */
.tripsummary .pictos,
.tripsummary .diff {
line-height: 0;
height: 18px;
overflow: hidden;
white-space: nowrap;
}
.tripsummary .pictos {
margin: 0 0 0 12px;
display: flex;
align-items: center;
gap: 3px;
}
.tripsummary .diff {
margin: 0 12px 0 0;
}
/* Les pictogrammes se réduisent d'eux-mêmes quand un voyage en porte
plusieurs, sans jamais déformer le dessin ni couper le dernier. */
.tripsummary .pictos img {
height: 18px;
width: 28px;
flex: 0 1 auto;
min-width: 0;
object-fit: contain;
}
.tripsummary .diff img {
height: 18px;
width: 75px;
}
/* Certains voyages n'ont pas de durée renseignée : le pictogramme
horloge restait seul, sans rien à côté. */
.tripsummary .duration:not(:has(a)) .picto {
display: none;
}
/* --- Pied de carte : durée et prix, séparés du reste par un filet ------
Les deux se lisent d'un coup d'œil et s'alignent d'une carte à
l'autre. */
.tripsummary .duration,
.tripsummary .price {
margin-top: 11px;
padding-top: 9px;
border-top: 1px solid rgba(255, 255, 255, .1);
font-size: 12px;
line-height: 1.25;
/* Sur une colonne de 212 px, « à partir de 1995 € » et la durée
tiennent juste : sans cela l'un des deux passait à la ligne et
la carte grandissait de 17 px par rapport à ses voisines. */
white-space: nowrap;
overflow: hidden;
}
.tripsummary .duration {
margin-left: 12px;
padding-right: 6px;
}
.tripsummary .price {
margin-right: 12px;
padding-left: 6px;
text-align: right;
}
/* =====================================================================
Cartes insérées dans le contenu d'une page (raccourci [voyages])
Le corps de texte des pages impose sa propre typographie (titres en
Montauk 38px, paragraphes beiges, liens orange) : on rétablit celle
des cartes pour qu'elles soient identiques à celles de l'accueil.
===================================================================== */
.kap-liste-voyages {
margin: 1.4em 0 0;
}
.postcontent .kap-liste-voyages .tripsummary h2 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 15px;
font-weight: bold;
line-height: 1.25;
letter-spacing: 0;
margin: 10px 12px 3px;
}
.postcontent .kap-liste-voyages .tripsummary p {
margin: 0 12px 7px;
font-size: 12px;
line-height: 1.3;
color: #fdf0dc;
}
.postcontent .kap-liste-voyages .tripsummary .desc {
margin: 0 12px 10px;
font-size: 13px;
line-height: 1.35;
color: #b2a590;
}
.postcontent .kap-liste-voyages .tripsummary a {
color: white;
}
.postcontent .kap-liste-voyages .tripsummary a.title,
.postcontent .kap-liste-voyages .tripsummary a.title:hover {
color: #f79121;
}
.postcontent .kap-liste-voyages .tripsummary .price a {
color: #599efa;
}
/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 767px) {
/* Une seule colonne : à deux, les cartes tombaient à 164 px de large */
.tripsummary {
width: 100% !important;
float: none !important;
margin: 0 0 26px !important;
}
.tripsummary .view img {
height: 180px;
}
.tripsummary h2,
.postcontent .kap-liste-voyages .tripsummary h2 {
font-size: 17px;
height: auto;
-webkit-line-clamp: 3;
}
.tripsummary .type,
.postcontent .kap-liste-voyages .tripsummary p {
font-size: 13px;
}
.tripsummary .desc,
.postcontent .kap-liste-voyages .tripsummary .desc {
font-size: 14px;
height: auto;
-webkit-line-clamp: 3;
}
.tripsummary .duration,
.tripsummary .price {
font-size: 14px;
}
}
/* =====================================================================
Bloc « Notre Blog » — articles qui se chevauchaient
Le thème impose une hauteur fixe de 40 px au titre de chaque brève
(`.wrapblog h3 { height: 40px }`). Dès qu'un titre dépasse deux
lignes — systématique en mobile, fréquent en desktop — le texte
débordait sur l'article suivant, puis sur le lien « Toutes les
actualités ». On laisse la hauteur s'adapter.
===================================================================== */
.wrapblog h3 {
height: auto;
min-height: 40px;
}
.wrapblog article + article {
margin-top: 20px;
}
.wrapblog .read {
margin: 20px 10px 4px;
}
@media (max-width: 767px) {
.wrapblog article {
margin: 14px 12px;
}
.wrapblog h3 {
line-height: 1.35;
}
.wrapblog .read {
margin: 22px 12px 6px;
}
}
/* =====================================================================
Visionneuse d'images (kap-visionneuse.js)
Remplace l'extension jQuery Colorbox, inerte depuis le passage du
serveur en PHP 8. Les icônes réutilisent le sprite du thème
(img/modal-s2c959cc103.png, 26 × 260 px) et la barre reprend la
disposition que main.css définissait pour Colorbox : légende à
gauche, puis précédent, diaporama, compteur, fermer, suivant.
===================================================================== */
.kap-visionneuse {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 2vh 2vw;
background: rgba(0, 0, 0, .95);
font-size: 14px;
opacity: 0;
transition: opacity .4s ease;
}
.kap-visionneuse.kap-vis-visible {
opacity: 1;
}
.kap-visionneuse[hidden] {
display: none;
}
/* Le corps ne défile plus derrière la visionneuse */
body.kap-vis-ouverte {
overflow: hidden;
}
.kap-vis-cadre {
display: flex;
flex-direction: column;
align-items: center;
max-width: 99%;
max-height: 99%;
}
/* --- Barre de commandes, au-dessus de l'image --- */
.kap-vis-barre {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 26px;
margin-bottom: 6px;
color: #fff;
}
.kap-vis-legende {
margin: 0;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 0 1px 2px #000;
}
.kap-vis-boutons {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.kap-vis-compteur {
margin: 0 6px;
white-space: nowrap;
text-shadow: 0 1px 2px #000;
}
.kap-vis-barre button {
width: 26px;
height: 26px;
padding: 0;
border: 0;
cursor: pointer;
text-indent: -9999px;
overflow: hidden;
background: url(../img/modal-s2c959cc103.png) no-repeat;
}
.kap-vis-barre button[hidden] {
display: none;
}
.kap-vis-prec { background-position: 0 -182px; }
.kap-vis-prec:hover,
.kap-vis-prec:focus { background-position: 0 -26px; }
.kap-vis-suiv { background-position: 0 -208px; }
.kap-vis-suiv:hover,
.kap-vis-suiv:focus { background-position: 0 -52px; }
.kap-vis-fermer { background-position: 0 -104px; }
.kap-vis-fermer:hover,
.kap-vis-fermer:focus{ background-position: 0 0; }
.kap-vis-diapo { background-position: 0 -234px; }
.kap-vis-diapo:hover,
.kap-vis-diapo:focus { background-position: 0 -156px; }
.kap-vis-diapo.paused { background-position: 0 -130px; }
.kap-vis-diapo.paused:hover,
.kap-vis-diapo.paused:focus { background-position: 0 -78px; }
.kap-vis-barre button:focus-visible {
outline: 2px solid #f79121;
outline-offset: 2px;
}
/* --- L'image --- */
.kap-vis-image {
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
}
.kap-vis-image img {
display: block;
max-width: 99vw;
max-height: 84vh;
width: auto;
height: auto;
box-shadow: 0 0 26px rgba(0, 0, 0, .8);
transform: scale(.94);
opacity: 0;
transition: transform .4s ease, opacity .4s ease;
}
.kap-vis-visible .kap-vis-image img {
transform: scale(1);
opacity: 1;
}
.kap-vis-chargement .kap-vis-image img {
opacity: .25;
}
@media (max-width: 480px) {
/* Comme le thème le faisait pour Colorbox : pas de légende sur petit
écran, la place manque pour les commandes. */
.kap-vis-legende {
display: none;
}
.kap-vis-barre {
justify-content: flex-end;
}
.kap-vis-image img {
max-height: 78vh;
}
}
/* =====================================================================
Champs de formulaire — types HTML récents
Le thème ne stylait que `input[type=text]` et `textarea`. Les champs
`email`, `tel`, `number`… introduits depuis gardaient l'apparence par
défaut du navigateur : une boîte blanche, plus étroite que les
autres, en plein milieu d'un formulaire sombre.
===================================================================== */
input[type=email],
input[type=tel],
input[type=url],
input[type=number],
input[type=search],
input[type=date],
input[type=password] {
border-radius: 5px;
border: none;
border-top: 1px solid rgba(0, 0, 0, .8);
border-bottom: 1px solid rgba(255, 255, 255, .1);
color: #fdf0dc;
padding: 6px 8px;
background: rgba(0, 0, 0, .2);
width: 100%;
box-sizing: border-box;
outline: none;
font-family: inherit;
font-size: inherit;
}
.reveal-modal input[type=email],
.reveal-modal input[type=tel],
.reveal-modal input[type=number],
.reveal-modal input[type=date] {
margin-top: 3px;
}
/* Repère visuel au clavier, absent du thème */
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=date]:focus,
input[type=password]:focus,
textarea:focus {
box-shadow: inset 0 0 0 1px rgba(247, 145, 33, .55);
}
/* =====================================================================
Fiche voyage — bloc « prix / départs / réserver »
===================================================================== */
/* Intitulé de section, dans le style de « Référence : » du même bloc
(`.ref strong` : gras, crème, taille du texte courant). */
.single-trip #additional_elements .prochain {
margin: 4px 0 8px;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
text-transform: none;
color: #fdf0dc;
}
/* Un départ = une ligne : date à gauche, prix à droite, comme le pied
des cartes de voyage. */
.single-trip #additional_elements .depart {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 10px;
margin: 0;
padding: 7px 0;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.single-trip #additional_elements .depart:last-of-type {
border-bottom: none;
}
.depart-date {
font-weight: bold;
color: #fdf0dc;
}
.depart-prix {
font-weight: bold;
color: #599efa;
white-space: nowrap;
}
.depart-promo {
flex: 1 0 100%;
font-size: 13px;
color: #f79121;
}
/* Aucune date programmée : une note, pas une phrase perdue au milieu */
.aucun-depart {
margin: 0;
padding: 9px 11px;
border-left: 3px solid rgba(247, 145, 33, .55);
background: rgba(0, 0, 0, .18);
font-size: 13px;
line-height: 1.45;
color: #b2a590;
}
/* Action principale : pleine largeur et hauteur confortable (le texte en
22 px tenait dans un bouton de 32 px et débordait presque). */
.single-trip #additional_elements .book {
height: 46px;
line-height: 46px;
margin-top: 18px;
font-size: 20px;
}
/* Même traitement pour l'envoi de la demande, dans la fenêtre de
réservation : c'est la même action, au bout du même parcours. */
.reveal-modal input[type=submit] {
height: 44px;
line-height: 44px;
font-size: 17px;
padding: 0 1.4em;
}
/* =====================================================================
Listes déroulantes
Même oubli que pour les champs email : le thème ne stylait pas les
`select`, qui gardaient l'apparence par défaut du navigateur — des
pastilles gris clair au milieu d'un site sombre. On leur donne
l'habillage des champs de saisie du thème, avec une flèche dessinée.
===================================================================== */
/* Indique au navigateur que la page est sombre : les éléments dessinés
par le système (sélecteur natif conservé en mobile, barres de
défilement) s'affichent en sombre là où c'est pris en charge. */
:root {
color-scheme: dark;
}
select {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
max-width: 100%;
margin: 0;
padding: 7px 30px 7px 10px;
border: none;
border-top: 1px solid rgba(0, 0, 0, .8);
border-bottom: 1px solid rgba(255, 255, 255, .1);
border-radius: 5px;
background-color: rgba(0, 0, 0, .3);
/* Chevron dessiné en SVG : pas de fichier supplémentaire à charger */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23f79121' d='M1 1.6 6 6.5l5-4.9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 11px center;
background-size: 11px 7px;
color: #fdf0dc;
font-family: inherit;
font-size: 14px;
line-height: 1.4;
cursor: pointer;
outline: none;
/* Fait afficher le menu natif en sombre là où le navigateur le permet */
color-scheme: dark;
}
select:hover {
background-color: rgba(0, 0, 0, .45);
}
select:focus {
box-shadow: inset 0 0 0 1px rgba(247, 145, 33, .55);
}
select option {
background: #27292c;
color: #fdf0dc;
}
/* =====================================================================
Barre de filtres de la page « Nos voyages »
Les quatre filtres et le bouton étaient posés en flottants, de
hauteurs et d'alignements différents. Une rangée alignée sur le bas
met les listes et le bouton sur la même ligne.
===================================================================== */
#filterform {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px 20px;
padding: 12px;
}
.filterrow {
float: none;
margin: 0;
flex: 1 1 150px;
min-width: 0;
}
.filterrow label {
display: block;
margin-bottom: 5px;
font-size: 13px;
color: #b2a590;
}
/* Le
du gabarit ferait un espace en trop dans la rangée */
.filterrow br {
display: none;
}
.filterrow select {
width: 100%;
height: 34px;
}
/* Le bouton du thème fait 32 px : on l'aligne sur les listes */
.filtersubmit {
float: none;
flex: 0 0 auto;
margin-left: auto;
height: 34px;
line-height: 34px;
}
@media (max-width: 767px) {
#filterform {
gap: 12px;
}
.filterrow {
flex: 1 1 100%;
}
.filtersubmit {
width: 100%;
margin-left: 0;
}
}
/* =====================================================================
Menu déroulant maison (kap-listes.js)
Le menu qui s'ouvre au clic sur un