/* ==========================================================================
   Gontran — thème partagé
   --------------------------------------------------------------------------
   Source unique des couleurs, de la typographie et des composants communs.
   Chargé par agenda.php, carnet.php, emails.php, menu.php, gontran.php et
   login.php.

   Avant ce fichier, chaque page redéclarait son propre :root et son propre
   style de bouton. Deux palettes avaient divergé. Pour changer l'apparence
   d'un bouton dans tout le site, il n'y a désormais qu'un seul endroit à
   modifier : la section BOUTONS ci-dessous.

   Chaque page garde son CSS spécifique dans sa balise <style>, chargée après
   ce fichier — donc toujours prioritaire en cas de besoin ponctuel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS
   -------------------------------------------------------------------------- */

:root {
    /* Fonds */
    --bg: #1e2021;              /* fond de page */
    --panel: rgba(0, 0, 0, 0.3); /* grandes cartes, translucide */
    --panel-2: #0b0b0b;          /* cartes internes, opaque */
    --panel-modal: #151617;
    --field: #0b0b0b;            /* fond des champs de saisie */

    /* Bordures */
    --border: rgba(254, 254, 254, 0.07);   /* hairline au repos */
    --border-2: rgba(254, 254, 254, 0.3);  /* bordure révélée au survol */
    --border-3: rgba(254, 254, 254, 0.07);  /* bordure modal */

    /* Texte */
    --text: #fefefe;
    --textnoir: #111;
    --muted: #a8a8a8;

    /* Accent — badges de compteur et sélection de texte.
       Volontairement absent des boutons : il signale une information,
       pas une action. */
    --accent: #777;

    /* Boutons — voir section 3 */
    --button: rgba(254, 254, 254, 0.07);
    --button-border: transparent;
    --button-border-hover: var(--border-2);

    /* Actions typées */
    --danger: #3a1111;
    --danger-border: #773131;
    --call: #17311a;
    --call-border: #315a34;
    --mail: #12283a;
    --mail-border: #2f5a7a;

    /* Rayons */
    --radius-pill: 999px;
    --radius-card: 18px;
    --radius-inner: 14px;
    --radius-field: 12px;
    --radius-modal: 22px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 200;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

::selection { background: var(--accent); color: #000; }

h1, h2, h3 { font-weight: 400; }

/* --------------------------------------------------------------------------
   3. BOUTONS
   --------------------------------------------------------------------------
   Principe : fond plein discret, aucune bordure visible au repos. Au survol,
   seule la bordure apparaît — le fond ne change pas.

   La bordure est déclarée transparente plutôt qu'absente : elle occupe donc
   déjà sa place dans le calcul de la boîte, et son apparition au survol ne
   décale pas le contenu d'un pixel.
   -------------------------------------------------------------------------- */

button,
.button {
    border: 1px solid var(--button-border);
    background: var(--button);
    color: var(--text);
    border-radius: var(--radius-pill);
    padding: 9px 14px;
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.18s ease;
}

button:hover,
.button:hover,
button:focus-visible,
.button:focus-visible {
    border-color: var(--button-border-hover);
    background: var(--button);
}

button:focus-visible,
.button:focus-visible { outline: none; }

button:disabled,
.button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

button:disabled:hover,
.button:disabled:hover { border-color: var(--button-border); }

button.small,
.button.small {
    padding: 6px 10px;
    font-size: 0.78rem;
}

/* Actions typées : même règle, le fond porte le sens et ne bouge pas non plus. */
button.danger { background: var(--danger); }
button.danger:hover,
button.danger:focus-visible { border-color: var(--danger-border); background: var(--danger); }

button.call,
button.send { background: var(--call); }
button.call:hover,
button.send:hover,
button.call:focus-visible,
button.send:focus-visible { border-color: var(--call-border); background: var(--call); }

button.mail { background: var(--mail); }
button.mail:hover,
button.mail:focus-visible { border-color: var(--mail-border); background: var(--mail); }

/* Bouton nu : pour les actions tertiaires (Fermer, Annuler) qui n'ont pas
   besoin d'exister visuellement tant qu'on ne les cherche pas. */
button.ghost { background: transparent; }
button.ghost:hover,
button.ghost:focus-visible { border-color: var(--button-border-hover); background: transparent; }

/* --------------------------------------------------------------------------
   4. CHAMPS
   -------------------------------------------------------------------------- */

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--border-3);
    background: var(--field);
    color: var(--text);
    border-radius: var(--radius-field);
    padding: 10px 12px;
    font: inherit;
    transition: border-color 0.18s ease;
}

input:hover,
textarea:hover,
select:hover { border-color: var(--border-3); }

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--border-3);
}

input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 0.5; }

textarea {
    min-height: 96px;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] { width: auto; }

label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 0.88rem;
}

label.checkbox-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.field-hint {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
    opacity: 0.75;
    margin-top: -2px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-grid .full { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   5. STRUCTURE DE PAGE
   -------------------------------------------------------------------------- */

.page {
    max-width: 1380px;
    margin: 0 auto;
    padding: 28px 18px 44px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
}

.topbar h1 {
    margin: 50px auto 0;
    font-size: 2rem;
    font-family: 'IBM Plex Serif', serif;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 40px;
}

.section-head h2 {
    margin: 0;
    font-family: 'IBM Plex Serif', serif;
    font-size: 1.5rem;
    color: var(--text);
}

.actions {
    margin-top: 50px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   5b. NAVIGATION — avatar + panneau déroulant
   --------------------------------------------------------------------------
   Markup dans public/partials/nav.php.

   Deux façons d'ouvrir, volontairement :
   - au survol, mais uniquement sur les pointeurs fins (souris, trackpad) ;
   - au clic ou au tap, partout.

   Le survol n'existe pas sur écran tactile. Sans la requête média
   `(hover: hover) and (pointer: fine)`, certains navigateurs mobiles émulent
   un survol au premier tap : le panneau s'ouvrirait puis se refermerait au
   second tap sans jamais suivre le lien.
   -------------------------------------------------------------------------- */

.gnav {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1003;
}

/* Gontran en pied, image brute : ni fond, ni bordure, ni effet au survol.
   Le padding est là uniquement pour la zone cliquable — la silhouette ne fait
   qu'une vingtaine de pixels de large, très en dessous des 44 px nécessaires
   au doigt. Il est transparent : on ne le voit pas, on l'atteint. */
.gnav-avatar {
    display: block;
    padding: 6px 14px;
    margin: -6px -14px;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.gnav-avatar img {
    display: block;
    height: 30px;
    width: auto;
        filter: saturate(0);
      opacity: 0.9;
}

.gnav-avatar:focus-visible { outline: none; }
.gnav-avatar:focus-visible img { opacity: 0.7; }

.gnav-panel {
    position: absolute;
    top: 35px;
    right: 0px;
    min-width: 172px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: 16px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.gnav.open > .gnav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gnav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;

    opacity: 0;
    transform: translateX(6px);
    transition: background 0.16s ease, opacity 0.3s ease, transform 0.3s ease;
}

.gnav.open .gnav-item {
    opacity: 1;
    transform: translateX(0);
}

/* Léger décalage à l'apparition : les entrées se posent l'une après l'autre. */
.gnav.open .gnav-item:nth-of-type(1) { transition-delay: 0.03s; }
.gnav.open .gnav-item:nth-of-type(2) { transition-delay: 0.06s; }
.gnav.open .gnav-item:nth-of-type(3) { transition-delay: 0.09s; }
.gnav.open .gnav-item:nth-of-type(4) { transition-delay: 0.12s; }
.gnav.open .gnav-item:nth-of-type(5) { transition-delay: 0.15s; }

.gnav-item:hover,
.gnav-item:focus-visible {
    background: var(--button);
    outline: none;
}

.gnav-item.current { color: var(--accent); }
.gnav-item.quiet { color: var(--muted); font-size: 0.82rem; }

.gnav-ico {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.75;
}

.gnav-sep {
    height: 1px;
    background: var(--border);
    margin: 6px 10px;
}

/* Souris et trackpad seulement : le panneau se déroule sans clic. */
@media (hover: hover) and (pointer: fine) {
    .gnav:hover > .gnav-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .gnav:hover .gnav-item {
        opacity: 1;
        transform: translateX(0);
    }

    .gnav:hover .gnav-item:nth-of-type(1) { transition-delay: 0.03s; }
    .gnav:hover .gnav-item:nth-of-type(2) { transition-delay: 0.06s; }
    .gnav:hover .gnav-item:nth-of-type(3) { transition-delay: 0.09s; }
    .gnav:hover .gnav-item:nth-of-type(4) { transition-delay: 0.12s; }
    .gnav:hover .gnav-item:nth-of-type(5) { transition-delay: 0.15s; }
}

@media (prefers-reduced-motion: reduce) {
    .gnav-panel,
    .gnav-item { transition-duration: 0.01ms; }
}

@media (max-width: 640px) {
    .gnav { top: 10px; right: 12px; }
}

/* Ancienne pastille de navigation. Conservée pour menu.php et les pages qui
   n'ont pas encore basculé sur .gnav. */
.menu-toggle {
    position: fixed;
    top: 10px;
    right: 30px;
    z-index: 1003;
    color: var(--text);
    font-weight: 300;
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    background: rgba(57, 57, 57, 0.3);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   6. CARTES ET LISTES
   -------------------------------------------------------------------------- */

.panel,
.tasks-panel,
.contacts-panel,
.list {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px;
    min-width: 0;
}

.tasks-list,
.contacts-list { display: grid; gap: 10px; }

.badge {
    display: inline-block;
    min-width: 20px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #000;
    font-size: 0.78rem;
    font-weight: 500;
    text-align: center;
}

.badge.zero { display: none; }

.empty {
    color: var(--text);
    border: 1px dashed var(--border);
    border-radius: var(--radius-inner);
    padding: 16px;
    text-align: center;
    font-size: 0.92rem;
    background: var(--panel-2);
}

/* Bandeau de notification transitoire.
   Volontairement scopé à .page : le chat (gontran.php) utilise la même classe
   .message pour ses bulles de conversation, et un `display: none` global les
   rendrait toutes invisibles. */
.page > .message {
    display: none;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-field);
    padding: 10px 12px;
    color: var(--muted);
}

.page > .message.visible { display: block; }

/* --------------------------------------------------------------------------
   7. MODALES
   -------------------------------------------------------------------------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.72);
    z-index: 50;
}

.modal-backdrop.open { display: flex; }

.modal {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: var(--panel-modal);
    border: 1px solid var(--border);
    border-radius: var(--radius-modal);
    padding: 20px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.modal-header h2 { margin: 0; font-size: 1.05rem; }

.modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
}

.modal-footer-right { display: flex; gap: 10px; }

/* --------------------------------------------------------------------------
   8. BARRES DE DÉFILEMENT
   -------------------------------------------------------------------------- */

*::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }

/* --------------------------------------------------------------------------
   9. ADAPTATIF
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .page { padding-left: 10px; padding-right: 10px; }
    .form-grid { grid-template-columns: 1fr; }
    .modal-footer { flex-direction: column-reverse; }
    .modal-footer-right { justify-content: flex-end; }
    .section-head h2 { font-size: 1.3rem; }
}