/* =====================================================================
   meet.displus.pro — Feuille de style
   Identité : encre profonde (sérieux, confiance) + or discret (valeur).
   Titres en Spectral (éditorial), texte en Inter (lisible).
   ===================================================================== */

:root {
    --encre:        #0F1A2B;   /* fond foncé, bandeaux */
    --encre-douce:  #1C2A3F;
    --or:           #C8A24B;   /* accent unique : focus, bouton */
    --or-fonce:     #A9873A;
    --texte:        #1A2230;
    --muted:        #5B6675;
    --ligne:        #E2E6EC;
    --surface:      #FFFFFF;
    --fond:         #EEF1F5;
    --erreur:       #B23A48;
    --succes:       #2E7D58;
    --rayon:        12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

/* ---- Bandeau de tête ---- */
.site-tete {
    background: var(--encre);
    color: #fff;
    padding: 18px 0;
    border-bottom: 3px solid var(--or);
}
.site-tete .contenu {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}
.marque {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
}
.marque-note {
    color: #9FB0C4;
    font-size: 0.82rem;
}

/* ---- Corps ---- */
.site-corps {
    max-width: 920px;
    margin: 0 auto;
    padding: 40px 20px 56px;
}

/* ---- Carte ---- */
.carte {
    background: var(--surface);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    padding: 36px;
    box-shadow: 0 1px 2px rgba(15, 26, 43, 0.04),
                0 12px 32px rgba(15, 26, 43, 0.06);
}

.eyebrow {
    display: inline-block;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--or-fonce);
    font-weight: 600;
    margin-bottom: 10px;
}
h1 {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--encre);
}
.sous-titre {
    color: var(--muted);
    margin: 0 0 28px;
    max-width: 56ch;
}

/* ---- Conférence mise en avant ---- */
.conf-info {
    background: #F7F9FB;
    border: 1px solid var(--ligne);
    border-left: 3px solid var(--or);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 28px;
    font-size: 0.92rem;
}
.conf-info strong { color: var(--encre); }
.conf-info .quand { color: var(--muted); }

/* ---- Formulaire ---- */
.grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.champ { display: flex; flex-direction: column; }
.champ.plein { grid-column: 1 / -1; }

label {
    font-size: 0.86rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--texte);
}
label .req { color: var(--or-fonce); }
label .opt { color: var(--muted); font-weight: 400; }

input[type="text"],
input[type="email"],
input[type="tel"],
select {
    font: inherit;
    color: var(--texte);
    padding: 11px 13px;
    border: 1px solid var(--ligne);
    border-radius: 9px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
    outline: none;
    border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(200, 162, 75, 0.18);
}

/* ---- Consentement ---- */
.consent {
    grid-column: 1 / -1;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: #F7F9FB;
    border: 1px solid var(--ligne);
    border-radius: 9px;
    padding: 13px 15px;
    margin-top: 4px;
}
.consent input { margin-top: 3px; }
.consent label { font-size: 0.84rem; color: var(--muted); margin: 0; }

/* ---- Bouton ---- */
.bouton {
    grid-column: 1 / -1;
    margin-top: 6px;
    font: inherit;
    font-weight: 600;
    color: var(--encre);
    background: var(--or);
    border: none;
    border-radius: 9px;
    padding: 13px 22px;
    cursor: pointer;
    transition: background .15s, transform .05s;
}
.bouton:hover { background: var(--or-fonce); color: #fff; }
.bouton:active { transform: translateY(1px); }

/* ---- Messages ---- */
.alerte {
    border-radius: 9px;
    padding: 13px 16px;
    margin-bottom: 22px;
    font-size: 0.92rem;
}
.alerte.erreur { background: #FBEDEE; border: 1px solid #E6C4C9; color: var(--erreur); }
.alerte.erreur ul { margin: 8px 0 0; padding-left: 18px; }

/* ---- Page de remerciement ---- */
.merci-coche {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: rgba(46, 125, 88, 0.12);
    color: var(--succes);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 700;
    margin-bottom: 18px;
}

/* ---- Pied ---- */
.site-pied {
    border-top: 1px solid var(--ligne);
    background: #fff;
}
.site-pied .contenu {
    max-width: 920px; margin: 0 auto; padding: 18px 20px;
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    font-size: 0.8rem; color: var(--muted);
}

/* ---- Champ "pot de miel" anti-spam : invisible pour l'humain ---- */
.pot-miel {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .grille { grid-template-columns: 1fr; }
    .carte { padding: 24px; }
    h1 { font-size: 1.55rem; }
    .site-corps { padding: 28px 16px 40px; }
}

/* ---- Accessibilité : mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* =====================================================================
   ESPACE ADMIN
   ===================================================================== */

.admin-nav {
    background: var(--encre);
    border-bottom: 3px solid var(--or);
}
.admin-nav .contenu {
    max-width: 1140px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.admin-nav .marque {
    font-family: 'Spectral', Georgia, serif; font-size: 1.2rem; color: #fff;
}
.admin-nav a {
    color: #C7D2E0; text-decoration: none; font-size: 0.9rem; font-weight: 500;
}
.admin-nav a:hover { color: var(--or); }
.admin-nav .pousser { margin-left: auto; }

.admin-corps { max-width: 1140px; margin: 0 auto; padding: 32px 20px 56px; }

.admin-titre {
    font-family: 'Spectral', Georgia, serif; font-weight: 600;
    font-size: 1.5rem; color: var(--encre); margin: 0 0 4px;
}
.admin-soustitre { color: var(--muted); margin: 0 0 24px; font-size: 0.92rem; }

/* Barre de filtres */
.filtres {
    background: #fff; border: 1px solid var(--ligne); border-radius: 10px;
    padding: 16px; margin-bottom: 18px;
    display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
}
.filtres .champ { min-width: 200px; }
.filtres label { font-size: 0.8rem; }
.filtres select {
    font: inherit; padding: 9px 11px; border: 1px solid var(--ligne);
    border-radius: 8px; background: #fff;
}
.filtres .bouton-filtre {
    font: inherit; font-weight: 600; color: var(--encre); background: var(--or);
    border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer;
}
.filtres .bouton-filtre:hover { background: var(--or-fonce); color: #fff; }
.filtres .lien-reset { font-size: 0.85rem; color: var(--muted); padding-bottom: 10px; }

/* Bandeau compteur + export */
.barre-resultats {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; flex-wrap: wrap; gap: 10px;
}
.compteur { font-size: 0.92rem; color: var(--texte); }
.compteur strong { color: var(--encre); font-size: 1.05rem; }
.bouton-export {
    text-decoration: none; font-weight: 600; font-size: 0.88rem;
    color: #fff; background: var(--encre); border-radius: 8px; padding: 9px 16px;
}
.bouton-export:hover { background: var(--encre-douce); }

/* Tableau de données */
.table-enveloppe { overflow-x: auto; border: 1px solid var(--ligne); border-radius: 10px; background: #fff; }
table.donnees { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.donnees th {
    text-align: left; background: #F2F5F8; color: var(--encre);
    font-weight: 600; padding: 11px 13px; border-bottom: 1px solid var(--ligne);
    white-space: nowrap;
}
table.donnees td {
    padding: 10px 13px; border-bottom: 1px solid #EEF1F5; color: var(--texte);
    vertical-align: top;
}
table.donnees tr:last-child td { border-bottom: none; }
table.donnees tr:hover td { background: #FAFBFC; }
.badge {
    display: inline-block; font-size: 0.72rem; font-weight: 600;
    padding: 2px 8px; border-radius: 20px;
}
.badge.oui { background: rgba(46,125,88,.12); color: var(--succes); }
.vide-message { padding: 28px; text-align: center; color: var(--muted); }

/* Carte de connexion centrée */
.login-centre { max-width: 420px; margin: 0 auto; }

/* Champ mot de passe (réutilise les styles input) */
input[type="password"] {
    font: inherit; color: var(--texte); padding: 11px 13px;
    border: 1px solid var(--ligne); border-radius: 9px; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input[type="password"]:focus {
    outline: none; border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(200,162,75,.18);
}
.alerte.succes { background: #EAF5EF; border: 1px solid #BFE0CE; color: var(--succes); }

@media (max-width: 600px) {
    .filtres { flex-direction: column; align-items: stretch; }
    .filtres .champ { min-width: 0; width: 100%; }
    /* Empêche le menu déroulant de s'élargir à la longueur de l'option la plus longue. */
    .filtres select { width: 100%; min-width: 0; max-width: 100%; }
    .filtres .bouton-filtre { width: 100%; }
}

/* =====================================================================
   LISTE DES INSCRIPTIONS — lignes pleine largeur, flexibles
   Chaque inscription est une ligne qui occupe toute la largeur et dont
   les champs se replient automatiquement sur les petits écrans.
   Aucune barre de défilement horizontale.
   ===================================================================== */
.insc-liste { display: flex; flex-direction: column; gap: 12px; }

.insc-ligne {
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: 12px;
    padding: 16px 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 30px;
    align-items: center;
    transition: box-shadow .15s, border-color .15s;
}
.insc-ligne:hover {
    border-color: #D6DCE4;
    box-shadow: 0 6px 20px rgba(15,26,43,.07);
}

/* Bloc identité (nom + date + badge), prioritaire à gauche */
.insc-principal {
    flex: 1 1 200px;
    min-width: 175px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.insc-principal .nom {
    font-family: 'Spectral', Georgia, serif;
    font-weight: 600;
    font-size: 1.06rem;
    color: var(--encre);
    line-height: 1.25;
}
.insc-principal .date { font-size: 0.78rem; color: var(--muted); }
.insc-principal .badge { align-self: flex-start; margin-top: 3px; }

/* Champs d'information : étiquette au-dessus, valeur en dessous */
.champ-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 0 1 auto;
}
.champ-info .etiquette {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    font-weight: 600;
}
.champ-info .valeur {
    font-size: 0.92rem;
    color: var(--texte);
    word-break: break-word;
}
.champ-info .valeur a { color: var(--encre); text-decoration: none; }
.champ-info .valeur a:hover { color: var(--or-fonce); text-decoration: underline; }

/* Colonnes qui peuvent prendre plus de place et s'étirer */
.champ-info.col-email { flex: 2 1 220px; }
.champ-info.col-conf  { flex: 2 1 240px; }

.puce-agent {
    display: inline-block;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    background: #F2F5F8;
    border: 1px solid var(--ligne);
    border-radius: 6px;
    padding: 1px 8px;
    color: var(--encre);
}

/* Sur mobile : chaque ligne devient une pile lisible */
@media (max-width: 640px) {
    .insc-ligne { flex-direction: column; align-items: stretch; gap: 13px; }
    /* En colonne, on neutralise la base flex sinon le bloc s'étire en hauteur (gros vide). */
    .insc-principal { flex: 0 0 auto; min-width: 0; border-bottom: 1px solid var(--ligne); padding-bottom: 13px; }
    .champ-info, .champ-info.col-email, .champ-info.col-conf { flex: 0 0 auto; }
    .insc-actions { flex: 0 0 auto; }
}

/* =====================================================================
   BOUTONS DE CONTACT (WhatsApp / Email) sur chaque fiche
   ===================================================================== */
.insc-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    margin-left: auto; /* pousse les boutons à droite sur grand écran */
}
.btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--ligne);
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-wa { background: #25D366; color: #fff; border-color: #25D366; }
.btn-wa:hover { background: #1da851; border-color: #1da851; }
.btn-mail { background: #fff; color: var(--encre); }
.btn-mail:hover { background: #F2F5F8; border-color: #D6DCE4; }

/* Sur mobile, les boutons occupent toute la largeur, l'un sous l'autre */
@media (max-width: 640px) {
    .insc-actions { margin-left: 0; }
    .btn-contact { flex: 1 1 auto; justify-content: center; }
}

/* Sécurité : un menu déroulant ne déborde jamais de son conteneur */
.filtres select { max-width: 100%; }

/* Note "email ou téléphone" dans le formulaire public */
.note-contact {
    margin: 0; font-size: 0.86rem; color: var(--muted);
    background: #F7F9FB; border: 1px solid var(--ligne);
    border-left: 3px solid var(--or); border-radius: 8px; padding: 10px 13px;
}

/* =====================================================================
   PAGE ENVOI GROUPÉ
   ===================================================================== */
.audience-resume {
    display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
    margin: 0 0 22px; font-size: 0.92rem; color: var(--texte);
}
.audience-resume strong { color: var(--encre); }
.puce-compte {
    background: #F2F5F8; border: 1px solid var(--ligne);
    border-radius: 20px; padding: 3px 12px; font-size: 0.84rem;
}

.zone-texte {
    font: inherit; color: var(--texte); padding: 12px 14px;
    border: 1px solid var(--ligne); border-radius: 9px; background: #fff;
    resize: vertical; line-height: 1.5; min-height: 160px;
    transition: border-color .15s, box-shadow .15s;
}
.zone-texte:focus {
    outline: none; border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(200,162,75,.18);
}
.aide-variables { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); }
.aide-variables code {
    background: #F2F5F8; border: 1px solid var(--ligne); border-radius: 5px;
    padding: 1px 6px; font-size: 0.82rem; color: var(--encre);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.actions-message {
    grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.bouton-secondaire {
    font: inherit; font-weight: 600; color: var(--encre);
    background: #fff; border: 1px solid var(--ligne); border-radius: 9px;
    padding: 12px 20px; cursor: pointer; transition: background .15s, border-color .15s;
}
.bouton-secondaire:hover { background: #F2F5F8; border-color: #D6DCE4; }
.actions-message .bouton { grid-column: auto; margin-top: 0; width: auto; }
.actions-message .bouton[disabled] { opacity: .5; cursor: not-allowed; }

.bloc-titre {
    font-family: 'Spectral', Georgia, serif; font-weight: 600;
    font-size: 1.2rem; color: var(--encre); margin: 0 0 4px;
}

.wa-liste { display: flex; flex-direction: column; gap: 10px; }
.wa-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 10px; background: #fff;
}
.wa-perso { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-nom { font-weight: 600; color: var(--encre); }
.wa-num { font-size: 0.84rem; color: var(--muted); }

@media (max-width: 600px) {
    .actions-message { flex-direction: column; }
    .actions-message .bouton, .bouton-secondaire { width: 100%; }
    .wa-item .btn-contact { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   RÉUNIONS + BOUTONS DIVERS
   ===================================================================== */
/* Lien "Se connecter" en haut du formulaire public */
.tete-login {
    margin-left: auto;
    color: #C7D2E0; text-decoration: none; font-size: 0.86rem; font-weight: 600;
    border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 6px 14px;
    transition: background .15s, color .15s, border-color .15s;
}
.tete-login:hover { background: var(--or); color: var(--encre); border-color: var(--or); }

/* En-tête de page avec bouton à droite (dashboard) */
.entete-page {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}

/* Badges de statut des réunions */
.badge.statut-ouverte   { background: rgba(46,125,88,.12);  color: var(--succes); }
.badge.statut-brouillon { background: #EEF1F5;              color: var(--muted); }
.badge.statut-terminee  { background: #FBEDEE;              color: var(--erreur); }

/* Bouton supprimer (rouge sobre) */
.btn-suppr {
    font: inherit; cursor: pointer;
    background: #fff; color: var(--erreur); border: 1px solid #E6C4C9;
}
.btn-suppr:hover { background: #FBEDEE; border-color: var(--erreur); }

/* Champ datetime-local : même style que les autres champs */
input[type="datetime-local"] {
    font: inherit; color: var(--texte); padding: 10px 13px;
    border: 1px solid var(--ligne); border-radius: 9px; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input[type="datetime-local"]:focus {
    outline: none; border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(200,162,75,.18);
}

/* =====================================================================
   LIEN DU FORMULAIRE PAR RÉUNION (copier)
   ===================================================================== */
.lien-form-ligne { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lien-form {
    font: inherit; font-size: 0.82rem; color: var(--texte);
    border: 1px solid var(--ligne); border-radius: 7px; padding: 6px 10px;
    background: #F7F9FB; min-width: 220px; max-width: 360px; flex: 1 1 220px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.btn-copier {
    font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
    color: var(--encre); background: #fff; border: 1px solid var(--ligne);
    border-radius: 7px; padding: 6px 12px; white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.btn-copier:hover { background: #F2F5F8; border-color: #D6DCE4; }