/* Emplacement: Serveur O2Switch/public/styles.css */
/* PWA Agenda mobile OstéoGestion — calendrier façon iPhone : bande de la
   semaine balayable + grille horaire 07h–21h avec 2 jours côte à côte.
   Palette alignée sur l'application PC. */

:root {
    --primaire: #4285f4;
    --primaire-fonce: #3367d6;
    --succes: #34a853;
    --attention: #f9ab00;
    --danger: #ea4335;
    --texte: #202124;
    --texte-leger: #5f6368;
    --fond: #f5f6f8;
    --bordure: #e0e0e0;
    --coin: 10px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--fond);
    color: var(--texte);
}

.masque { display: none !important; }

/* --- Écran d'appairage --- */
.ecran-appairage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
    text-align: center;
}
.ecran-appairage ol { text-align: left; line-height: 1.9; color: var(--texte-leger); }
.logo-appairage { width: 72px; height: 72px; margin: 0 auto 12px; object-fit: contain; }

/* --- Structure générale : tout tient dans l'écran, seule la grille défile --- */
#application {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* --- En-tête --- */
.entete {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 6px;
    padding-top: calc(10px + env(safe-area-inset-top));
    background: var(--primaire);
    color: white;
    flex-shrink: 0;
}

.btn-icone {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    font-size: 1.3rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.btn-icone:active { background: rgba(255, 255, 255, 0.35); }

/* Mois affiché : toucher ouvre le sélecteur de date (input invisible dessus) */
.btn-mois {
    flex: 1;
    position: relative;
    background: none;
    border: none;
    color: white;
    font-size: 1.15rem;
    font-weight: 700;
    height: 42px;
    text-align: left;
    padding: 0 6px;
    overflow: hidden;
}
.btn-mois input[type="date"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.pastille {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--attention);
}
.pastille.ok { background: var(--succes); }
.pastille.erreur { background: var(--danger); }
.pastille.encours { background: white; animation: pulsation 1s infinite; }
@keyframes pulsation { 50% { opacity: 0.3; } }

/* --- Bande de la semaine (balayage horizontal aimanté semaine par semaine) --- */
.bande-semaines {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: var(--primaire);
    flex-shrink: 0;
}
.bande-semaines::-webkit-scrollbar { display: none; }

.semaine {
    flex: 0 0 100%;
    display: flex;
    scroll-snap-align: start;
    padding: 2px 6px 10px;
}

.jour-semaine {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: white;
    padding: 0;
}
.jour-semaine .lettre { font-size: 0.65rem; opacity: 0.75; }
.jour-semaine .numero {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
}
.jour-semaine.aujourdhui .numero { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.jour-semaine.second .numero { background: rgba(255, 255, 255, 0.25); }
.jour-semaine.choisi .numero { background: white; color: var(--primaire); box-shadow: none; }

/* --- Menu options --- */
.menu-options {
    position: absolute;
    right: 10px;
    top: calc(60px + env(safe-area-inset-top));
    z-index: 20;
    background: white;
    border-radius: var(--coin);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.info-sync { font-size: 0.8rem; color: var(--texte-leger); }
.btn-danger {
    background: var(--danger);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: var(--coin);
    font-size: 0.9rem;
}

/* --- Zone des 2 jours : en-têtes fixes + grille défilante --- */
.zone-jours {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: white;
}
/* Glissement continu entre les jours : 3 pages (précédente, visible,
   suivante) sont rendues côte à côte dans une glissière large de 300 %,
   déplacée en translateX au doigt — les jours voisins sont donc réellement
   visibles pendant le geste. La fenêtre rogne ce qui dépasse. */
.fenetre-glisse { flex: 1; min-width: 0; overflow: hidden; }
.glissiere {
    display: flex;
    width: 300%;
    transform: translateX(-33.3333%);   /* cadre la page du milieu */
    will-change: transform;
}

.entetes-jours {
    display: flex;
    border-bottom: 1px solid var(--bordure);
    flex-shrink: 0;
}
.entetes-jours .gouttiere { width: 48px; flex-shrink: 0; }
.entete-jour {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--texte-leger);
    border-left: 1px solid var(--bordure);
}
.entete-jour.aujourdhui { color: var(--danger); }

.defileur-agenda {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.grille-agenda {
    display: flex;
    position: relative;
    padding: 10px 0 24px;
}

.colonne-heures {
    width: 48px;
    position: relative;
    flex-shrink: 0;
}
.etiquette-heure {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: 0.68rem;
    color: var(--texte-leger);
    font-variant-numeric: tabular-nums;
}

.colonne-jour {
    flex: 1;
    position: relative;
    border-left: 1px solid var(--bordure);
    /* Lignes des heures (pleines) et des demi-heures (claires) */
    background-image:
        repeating-linear-gradient(to bottom,
            var(--bordure) 0, var(--bordure) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(to bottom,
            transparent 0, transparent 30px, #f1f3f4 30px, #f1f3f4 31px, transparent 31px, transparent 60px);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* --- Blocs de rendez-vous posés sur la grille --- */
.bloc-rdv {
    position: absolute;
    z-index: 2;
    border: none;
    border-left: 3px solid var(--primaire);
    border-radius: 6px;
    background: #e8f0fe;
    color: var(--primaire-fonce);
    text-align: left;
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1.25;
    padding: 2px 5px;
    overflow: hidden;
}
.titre-bloc {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.heure-bloc {
    display: block;
    font-size: 0.66rem;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}
.bloc-rdv.statut-attente { background: #fef3d9; border-left-color: var(--attention); color: #8a6116; }
.bloc-rdv.statut-annule {
    background: #f1f3f4;
    border-left-color: var(--texte-leger);
    color: var(--texte-leger);
    opacity: 0.7;
    text-decoration: line-through;
}
.bloc-rdv.statut-lapin { background: #fde8e6; border-left-color: var(--danger); color: #a50e0e; }
.bloc-rdv.evenement { background: #f3e8fd; border-left-color: #9c27b0; color: #6a1b9a; }
.bloc-rdv.en-attente-envoi { outline: 1.5px dashed currentColor; outline-offset: -2px; }

/* Bloc fantôme de création (appui long puis glissement pour affiner l'heure) */
.bloc-fantome {
    position: absolute;
    left: 1px;
    right: 2px;
    z-index: 7;
    border: 1.5px dashed var(--primaire);
    border-radius: 6px;
    background: rgba(66, 133, 244, 0.18);
    color: var(--primaire-fonce);
    font-size: 0.72rem;
    line-height: 1.25;
    padding: 2px 5px;
    overflow: hidden;
    pointer-events: none;
}

/* RDV « soulevé » pendant un glisser-déposer */
.bloc-rdv.en-deplacement {
    z-index: 8;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    opacity: 0.92;
    transform: scale(1.02);
    pointer-events: none;
}

/* --- Ligne rouge « maintenant » (colonne d'aujourd'hui uniquement) --- */
.maintenant {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--danger);
    z-index: 6;
    pointer-events: none;
}
.maintenant::before {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
}
.bulle-maintenant {
    position: absolute;
    top: -9px;
    background: var(--danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 9px;
    font-variant-numeric: tabular-nums;
}

/* --- Boutons flottants --- */
.btn-aujourdhui {
    position: fixed;
    left: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    background: white;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primaire);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    z-index: 15;
}

.bouton-flottant {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: var(--primaire);
    color: white;
    font-size: 2rem;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.5);
    z-index: 15;
}
.bouton-flottant:active { background: var(--primaire-fonce); }

/* --- Panneau de détail d'un RDV (feuille en bas de l'écran) --- */
.voile {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 28;
}
.panneau-detail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 29;
    background: white;
    border-radius: 16px 16px 0 0;
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
    animation: monte 0.2s ease-out;
}
@keyframes monte { from { transform: translateY(30%); opacity: 0.5; } }
.panneau-detail h2 { margin: 0 0 4px; font-size: 1.15rem; overflow-wrap: anywhere; }
.horaires-detail { color: var(--texte-leger); margin: 0 0 10px; }
.telephone-detail { margin: 0 0 4px; }
.telephone-detail a { color: var(--primaire); text-decoration: none; font-size: 1rem; }
.lien-sms-detail {
    display: inline-block;
    margin-left: 14px;
    padding: 2px 10px;
    border: 1.5px solid #c3d7fb;
    border-radius: 9px;
    background: #eef4fe;
    font-size: 0.9rem;
    font-weight: 600;
}
.description-detail { white-space: pre-line; margin: 8px 0 0; }

.badge-statut {
    display: inline-block;
    font-size: 0.72rem;
    padding: 1px 8px;
    border-radius: 9px;
    background: var(--fond);
    color: var(--texte-leger);
    margin: 8px 6px 0 0;
}
.badge-envoi { background: #fef3d9; color: #8a6116; }

.btn-supprimer-detail {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    border: 1.5px solid #f5c6c0;
    border-radius: var(--coin);
    background: #fdf0ee;
    color: var(--danger);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
}
.btn-supprimer-detail:active { background: #fde8e6; }

/* Bouton « Modifier l'événement » du panneau de détail, au-dessus de Supprimer */
.btn-modifier-detail {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    border: 1.5px solid #c3d7fb;
    border-radius: var(--coin);
    background: #eef4fe;
    color: var(--primaire-fonce);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
}
.btn-modifier-detail:active { background: #e2edfd; }
.btn-modifier-detail + .btn-supprimer-detail { margin-top: 10px; }

/* --- Panneau de création --- */
.panneau-creation {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: white;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    padding-top: calc(20px + env(safe-area-inset-top));
    overflow-y: auto;
}
.panneau-creation h2 { margin: 0 0 16px; font-size: 1.2rem; }
.panneau-creation label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texte-leger);
    margin: 14px 0 4px;
}
.panneau-creation input,
.panneau-creation textarea {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Sans ça, Safari iOS donne aux champs date/heure leur taille « native »
       (contenu + padding EN PLUS de width:100 %) et ils débordent de l'écran */
    -webkit-appearance: none;
    appearance: none;
    min-height: 47px;   /* les champs date/heure iOS s'écrasent sans hauteur mini */
    padding: 12px;
    border: 1.5px solid var(--bordure);
    border-radius: var(--coin);
    font-size: 1rem;
    font-family: inherit;
    color: var(--texte);
    background: #fafafa;
}
/* Safari iOS centre la valeur des champs date/heure : on la cale à gauche */
.panneau-creation input::-webkit-date-and-time-value { text-align: left; }
.panneau-creation input:focus,
.panneau-creation textarea:focus { outline: none; border-color: var(--primaire); background: white; }

.ligne-horaires { display: flex; gap: 10px; }
.ligne-horaires > div { flex: 1; min-width: 0; }
.ligne-horaires input { min-width: 0; }

.resultats-patients { margin-top: 4px; }
.resultat-patient {
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--bordure);
    border-radius: var(--coin);
    margin-bottom: 4px;
}
.resultat-patient:active { background: var(--fond); }
.resultat-patient .tel { color: var(--texte-leger); font-size: 0.85rem; }

.patient-choisi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 10px 12px;
    background: #e8f0fe;
    border-radius: var(--coin);
    font-weight: 600;
}
.patient-choisi button { background: none; border: none; font-size: 1rem; color: var(--texte-leger); }

/* Sélecteur Rendez-vous / Événement (boutons segmentés) */
.segments {
    display: flex;
    gap: 3px;
    background: var(--fond);
    border-radius: var(--coin);
    padding: 3px;
    margin-bottom: 4px;
}
.segment {
    flex: 1;
    border: none;
    background: none;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--texte-leger);
}
.segment.actif { background: white; color: var(--primaire); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }

/* Puces de statut (création et détail d'un RDV) */
.etiquette-statut {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texte-leger);
    margin: 14px 0 4px;
}
.chips-statut { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-statut-detail { margin-top: 12px; }
.chip {
    border: 1.5px solid var(--bordure);
    background: white;
    color: var(--texte-leger);
    border-radius: 16px;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
}
.chip.actif.statut-confirme { background: #e8f0fe; border-color: var(--primaire); color: var(--primaire-fonce); }
.chip.actif.statut-attente { background: #fef3d9; border-color: var(--attention); color: #8a6116; }
.chip.actif.statut-annule { background: #f1f3f4; border-color: var(--texte-leger); color: var(--texte); }
.chip.actif.statut-lapin { background: #fde8e6; border-color: var(--danger); color: #a50e0e; }

.actions-creation { display: flex; gap: 10px; margin-top: 22px; }
.btn-principal,
.btn-secondaire {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: var(--coin);
    font-size: 1rem;
    font-weight: 600;
}
.btn-principal { background: var(--primaire); color: white; }
.btn-secondaire { background: var(--fond); color: var(--texte); }

/* --- Toast --- */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(90px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    background: var(--texte);
    color: white;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    z-index: 40;
    max-width: 90vw;
    text-align: center;
}