/* ============================================================
mobile.css — Navigation mobile pour index.php (régate)
À inclure après Bootstrap dans le :
============================================================ */
/* ────────────────────────────────────────────────────────────
BASE MOBILE FIRST
──────────────────────────────────────────────────────────── */
:root {
--navy: #1b3c70;
--navy-light: #2a5298;
--touch-min: 44px; /* taille minimale cible tactile */
}
/* Évite le zoom automatique iOS sur les */
input, select, textarea {
font-size: 16px !important;
}
body {
background: #f5f7fb;
/* Évite le dépassement horizontal caché */
overflow-x: hidden;
}
.container,
.container-fluid {
padding-left: 12px;
padding-right: 12px;
}
/* ────────────────────────────────────────────────────────────
CARDS & EN-TÊTES
──────────────────────────────────────────────────────────── */
.card {
border-radius: 10px;
overflow: hidden; /* empêche les enfants de déborder */
}
.card-header {
font-size: 1rem;
padding: 10px 14px;
}
.dark {
background: var(--navy);
color: white;
}
/* ────────────────────────────────────────────────────────────
TABLEAUX — scroll horizontal sur mobile
──────────────────────────────────────────────────────────── */
.table-responsive {
-webkit-overflow-scrolling: touch;
}
/* Indication visuelle qu'on peut scroller */
@media (max-width: 767.98px) {
.table-responsive::after {
content: "← Faites défiler →";
display: block;
text-align: center;
font-size: 0.72rem;
color: #6c757d;
padding: 4px 0 2px;
letter-spacing: .02em;
}
/* Cellules plus compactes */
.table td,
.table th {
padding: 8px 10px;
font-size: 0.82rem;
white-space: nowrap;
}
/* Boutons dans les tableaux — plus faciles à toucher */
.table .btn-sm {
padding: 5px 8px;
font-size: 0.78rem;
min-height: var(--touch-min);
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* ────────────────────────────────────────────────────────────
LISTE DES CLUBS (étape 1)
──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
/* Masquer les colonnes moins essentielles sur très petit écran */
.clubs-table th:nth-child(3), /* N° ligue */
.clubs-table td:nth-child(3),
.clubs-table th:nth-child(4), /* Nb régates */
.clubs-table td:nth-child(4) {
display: none;
}
/* Bouton "Voir les régates" pleine largeur dans sa cellule */
.clubs-table td:last-child {
width: 1%;
white-space: nowrap;
}
}
/* ────────────────────────────────────────────────────────────
BARRE DE RECHERCHE CLUBS
──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
/* Empile le champ et le bouton verticalement */
.card-body .row.g-2 > [class*="col-md"] {
flex: 0 0 100%;
max-width: 100%;
}
.card-body .row.g-2 .btn {
width: 100%;
min-height: var(--touch-min);
}
}
/* ────────────────────────────────────────────────────────────
ALERTE "VOS INSCRIPTIONS À VENIR"
──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.alert.d-flex {
flex-direction: column;
gap: 10px;
align-items: flex-start !important;
}
.alert.d-flex .btn {
width: 100%;
min-height: var(--touch-min);
text-align: center;
}
}
/* ────────────────────────────────────────────────────────────
LISTE DES RÉGATES (étape 2)
──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
/* Masquer colonnes secondaires */
.regates-table th:nth-child(3), /* Code bateau */
.regates-table td:nth-child(3),
.regates-table th:nth-child(4), /* Bateaux */
.regates-table td:nth-child(4),
.regates-table th:nth-child(5), /* Équipiers */
.regates-table td:nth-child(5) {
display: none;
}
}
/* ────────────────────────────────────────────────────────────
EN-TÊTE PAGE RÉGATE — titre + bouton retour
──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.d-flex.justify-content-between.align-items-center.mb-3 {
flex-direction: column;
align-items: flex-start !important;
gap: 10px;
}
.d-flex.justify-content-between.align-items-center.mb-3 h4 {
font-size: 1.1rem;
margin-bottom: 0;
}
.d-flex.justify-content-between.align-items-center.mb-3 .btn {
width: 100%;
min-height: var(--touch-min);
}
}
/* ────────────────────────────────────────────────────────────
FORMULAIRE BATEAU (étape 3)
──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
/* Tous les champs passent en pleine largeur */
.card .row.g-2 > [class*="col-md-3"],
.card .row.g-2 > [class*="col-md-6"] {
flex: 0 0 100%;
max-width: 100%;
}
/* FRA + N° voile côte à côte (moitié chacun) sur mobile */
.card .row.g-2 > .col-md-3:has(#id_fra),
.card .row.g-2 > .col-md-3:has(#voile) {
flex: 0 0 50%;
max-width: 50%;
}
}
/* ────────────────────────────────────────────────────────────
SECTION ÉQUIPAGE — le plus critique
──────────────────────────────────────────────────────────── */
/* En-tête de colonne : masqué sur mobile (remplacé par les labels inline) */
@media (max-width: 767.98px) {
.crew-row[style*="background:#e8f4ff"] {
display: none;
}
/* Chaque ligne équipier devient une carte empilée */
.crew-row {
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 8px;
margin-bottom: 12px;
padding: 12px;
}
/* Les col-md-2 / col-md-4 passent en pleine largeur */
.crew-row .row.g-2 > [class*="col-md"] {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 6px;
}
/* Licence + Nom côte à côte (50/50) */
.crew-row .input-licence,
.crew-row .input-nom {
width: 100%;
}
.crew-row .row.g-2 > .col-md-2:has(.input-licence),
.crew-row .row.g-2 > .col-md-2:has(.input-nom) {
flex: 0 0 50%;
max-width: 50%;
}
/* Label du rôle (Skipper / Équipier N) */
.crew-row .fw-semibold {
font-size: 0.9rem;
color: var(--navy);
margin-bottom: 4px;
}
/* Champ observation : masqué sur mobile (rarement rempli sur téléphone) */
.crew-row .col-md-4:last-of-type {
display: none;
}
/* Champs licence journalière empilés */
.lj-fields .row.g-2 > [class*="col-md"] {
flex: 0 0 100%;
max-width: 100%;
}
/* Prénom + Date côte à côte */
.lj-fields .col-md-2:has(#lj_prenom1),
.lj-fields .col-md-2:has(#lj_ddn1) {
flex: 0 0 50%;
max-width: 50%;
}
/* Inputs pleine taille facilement touchables */
.crew-row .form-control,
.crew-row .form-select,
.lj-fields .form-control,
.lj-fields .form-select {
min-height: var(--touch-min);
font-size: 16px !important;
}
}
/* ────────────────────────────────────────────────────────────
AUTOCOMPLETE — ne pas déborder à droite
──────────────────────────────────────────────────────────── */
.autocomplete-list {
position: absolute;
z-index: 1050;
background: white;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
max-height: 220px;
overflow-y: auto;
width: 100%;
left: 0;
/* Ne pas dépasser la largeur du viewport */
max-width: calc(100vw - 24px);
}
.autocomplete-item {
padding: 10px 12px;
cursor: pointer;
font-size: 0.85rem;
border-bottom: 1px solid #f0f0f0;
line-height: 1.3;
}
.autocomplete-item:last-child {
border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item:active {
background: #e9ecef;
}
/* ────────────────────────────────────────────────────────────
BOUTONS D'ACTION DU FORMULAIRE
──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
/* Les boutons Enregistrer / Liste / Imprimer passent en colonne */
.d-flex.gap-2.no-print {
flex-direction: column;
}
.d-flex.gap-2.no-print .btn {
width: 100%;
min-height: var(--touch-min);
font-size: 1rem;
/* Annuler le margin-left auto de "ms-auto" */
margin-left: 0 !important;
}
}
/* ────────────────────────────────────────────────────────────
CASE À COCHER RESPONSABILITÉ
──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.form-check {
display: flex;
align-items: flex-start;
gap: 10px;
}
.form-check-input {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px;
}
.form-check-label {
font-size: 0.88rem;
line-height: 1.4;
}
}
/* ────────────────────────────────────────────────────────────
SÉLECTEUR "JE PEUX ACCUEILLIR"
──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.card .col-md-4,
.card .col-md-8 {
flex: 0 0 100%;
max-width: 100%;
}
.card .col-md-4 .form-select {
min-height: var(--touch-min);
}
.small-muted {
margin-top: 8px;
font-size: 0.8rem;
}
}
/* ────────────────────────────────────────────────────────────
NAVIGATION BOUTONS "AUTRES RÉGATES / CHANGER DE CLUB"
──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
.mb-3 > .btn-sm {
display: block;
width: 100%;
min-height: var(--touch-min);
margin-bottom: 8px;
font-size: 0.9rem;
text-align: center;
}
}
/* ────────────────────────────────────────────────────────────
BADGE STATUT (Ouverte / Fermée)
──────────────────────────────────────────────────────────── */
.badge {
font-size: 0.78rem;
padding: 5px 8px;
border-radius: 6px;
}
/* ────────────────────────────────────────────────────────────
IMPRESSION — pas de régression
──────────────────────────────────────────────────────────── */
@media print {
.no-print {
display: none !important;
}
}