/* ==========================================================================
KTI Events - Correctifs responsive "Regular Tours"
Cree le 2026-08-09. Auteur : assistant, sur validation de Mehdi.
REVERSIBILITE : supprimer ce seul fichier annule TOUS les correctifs
ci-dessous et laisse intact kti-mobile-fix.css (correctifs du 2026-08-07).
Le dans kti-design-canvas.php est conditionne par file_exists().
Sauvegarde du template : kti-design-canvas.php.bak.tours-20260809_101345
Sauvegarde de l'autre CSS : kti-mobile-fix.css.bak.tours-20260809_101345
PORTEE : <= 900px uniquement, breakpoint aligne sur celui de
regular-tours.js (@media(max-width:900px)). Aucun contenu editorial
modifie. Charge APRES kti-mobile-fix.css : aucun conflit de cascade.
========================================================================== */
@media (max-width: 900px) {
/* --- P0 | Debordement horizontal : document 2096px pour un viewport 390px.
.stage est une grille CSS. En mobile regular-tours.js pose
grid-template-columns:1fr, ce qui n'empeche PAS la piste de s'elargir :
1fr = minmax(auto,1fr), donc la piste ne peut pas descendre sous la
min-content de son contenu. La bande photo .gal (11 vignettes .gcell de
160px + gaps ~= 2052px, pourtant en overflow-x:auto) impose sa min-content
a .chapter -> .chapters -> piste de .stage -> -> document.
minmax(0,1fr) borne la piste a la largeur du conteneur ;
min-width:0 debloque les descendants flex/grid qui heritent d'un
min-width:auto implicite. */
.stage {
grid-template-columns: minmax(0, 1fr) !important;
}
.stage > *,
.chapters,
.chapter,
.chapter-in,
.mapcol,
.mapframe,
.galwrap,
.gal {
min-width: 0 !important;
}
.gal {
max-width: 100% !important;
}
/* Le conteneur Leaflet suivait la largeur de la piste elargie (2096px). */
.mapcol #map,
.mapcol .leaflet-container {
max-width: 100% !important;
}
/* --- P2 | Titre du hero : line-height 0.92 est calibre pour un h1 desktop
sur une seule ligne. Le (display:block, .62em) vient
alors chevaucher les jambages de la ligne au-dessus. */
.hero h1 {
line-height: 1.05 !important;
}
.hero h1 .from {
line-height: 1.15 !important;
margin-top: 4px !important;
}
/* --- P3 | Cibles tactiles sous le minimum recommande (WCAG 2.5.5 / 2.5.8).
Icones sociales du pied de page : 18x18px. On agrandit UNIQUEMENT la zone
cliquable a 44x44 ; l'icone SVG n'est pas redimensionnee.
Verticalement, les marges negatives de -13px compensent exactement
(44 - 2*13 = 18) : la hauteur du pied de page ne bouge pas.
Horizontalement on ne compense PAS, et on annule le gap de 18px : le pas
passe a 44px pile, donc deux cibles voisines ne se chevauchent jamais
(une compensation horizontale donnerait un pas de 36px pour des cibles de
44px, soit 8px de recouvrement -> faux appuis). Rangee : 126px -> 176px,
pour une colonne de 342px. */
footer div[style*="inline-flex"][style*="gap: 18px"] {
gap: 0 !important;
}
footer div[style*="inline-flex"][style*="gap: 18px"] a[aria-label] {
min-width: 44px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: -13px 0 !important;
}
/* Liens de menu du pied de page : 15px de haut, pas de 25px (gap 10px).
Ici on ne peut pas compenser par marges negatives sans faire se chevaucher
deux cibles adjacentes : on passe le pas a 44px et on annule le gap. */
footer li > a {
display: flex !important;
align-items: center !important;
min-height: 44px !important;
}
footer ul[style*="flex-direction: column"] {
gap: 0 !important;
}
}