:root {
    --accent: #16264a;
    --accent-clair: #233863;
    --fond: #f4f5f7;
    --carte: #ffffff;
    --texte: #1b1f27;
    --texte-attenue: #5b6474;
    --bordure: #e2e4ea;
    --succes: #1d7a4c;
    --succes-fond: #e6f6ec;
    --alerte: #b3261e;
    --alerte-fond: #fcebea;
    --info-fond: #e8ecf5;
}

* { box-sizing: border-box; }

/* L'attribut HTML `hidden` n'est caché que par la feuille de style par
 * défaut du navigateur (`[hidden] { display: none }`) — n'importe quelle
 * règle d'auteur qui fixe `display` sur le même élément (ex. `.bouton {
 * display: inline-block; }` ci-dessous) l'emporte toujours sur cette règle
 * UA, quelle que soit la spécificité, et l'élément reste visible malgré
 * l'attribut. Règle explicite pour que `hidden` fonctionne partout (boutons
 * "Modifier..." du profil notamment, cf. views/profil/voir.php). */
[hidden] { display: none !important; }

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

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--accent);
    color: #fff;
    padding: 12px 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.topbar .brand { color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; }
/* Marque "Signature" du bandeau applicatif (demande de Romain, 2026-10-08) :
   même logotype (coche + mot en 'Signature Dancing Script', cf. plus bas
   dans ce fichier) que sur l'écran de connexion
   (views/partials/marque_signature.php), mais en variante STATIQUE (sans
   l'animation d'écriture, pensée pour un effet d'arrivée ponctuel, pas pour
   s'afficher à chaque navigation) et compacte pour tenir dans le bandeau.
   Couleurs inversées par rapport à la version login (cercle clair, coche
   foncée) : le bandeau est en --accent (même bleu nuit que le cercle de la
   version login), un cercle de la même couleur y disparaîtrait complètement. */
.brand-signature { display: inline-flex; align-items: center; gap: 0.3em; }
.brand-signature__icone { width: 1.3em; height: 1.3em; flex-shrink: 0; }
.brand-signature__mot {
    font-family: 'Signature Dancing Script', cursive;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
}
.topbar nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar nav a { color: #fff; text-decoration: none; opacity: 0.9; }
.topbar nav a:hover { opacity: 1; text-decoration: underline; }
.topbar .inline { display: inline; }

.conteneur {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 28px;
}
.carte-etroite { max-width: 480px; margin: 40px auto; }

h1 { font-size: 24px; margin-top: 0; }
h2 { font-size: 17px; margin-top: 28px; }

label { display: block; font-weight: 600; margin: 16px 0 6px; font-size: 14px; }
input[type="text"], input[type="email"], input[type="password"], input[type="file"], textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--accent-clair); outline-offset: 1px; }

.bouton {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    border: none;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}
.bouton-principal { background: var(--accent); color: #fff; }
.bouton-principal:hover { background: var(--accent-clair); }
.bouton-tertiaire { background: var(--info-fond); color: var(--accent); }
.bouton-petit { padding: 6px 12px; font-size: 13px; }

.lien-bouton {
    background: none;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    font-family: inherit;
}

.note { color: var(--texte-attenue); font-size: 14px; }

.alerte { background: var(--alerte-fond); color: var(--alerte); padding: 10px 14px; border-radius: 6px; font-size: 14px; }
.alerte-succes { background: var(--succes-fond); color: var(--succes); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.badge-info { background: var(--info-fond); color: var(--accent); }
.badge-succes { background: var(--succes-fond); color: var(--succes); }
.badge-alerte { background: var(--alerte-fond); color: var(--alerte); }

.tableau { width: 100%; border-collapse: collapse; margin-top: 12px; }
.tableau th, .tableau td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bordure); font-size: 14px; }
.tableau th { color: var(--texte-attenue); font-weight: 600; font-size: 13px; }
.tableau a { color: var(--accent); text-decoration: none; font-weight: 600; }
.tableau a:hover { text-decoration: underline; }

.signataire-ligne { display: grid; grid-template-columns: 28px 1fr 1fr 28px; gap: 8px; align-items: center; margin-bottom: 8px; }
.signataire-rang { font-weight: 700; color: var(--texte-attenue); text-align: center; }
.signataire-ligne input { margin: 0; }
.signataire-retirer { font-size: 16px; }

/* Plusieurs fichiers joints à une seule signature (demande de Romain,
   2026-10-07) — même grille que .signataire-ligne mais une seule colonne de
   champ (un <input type="file">, pas une paire nom/e-mail). */
.fichier-ligne { display: grid; grid-template-columns: 28px 1fr auto auto 28px; gap: 8px; align-items: center; margin-bottom: 8px; }
.fichier-rang { font-weight: 700; color: var(--texte-attenue); text-align: center; }
.fichier-ligne input[type="file"] { margin: 0; }
.fichier-position { font-size: 13px; padding: 4px 6px; } /* position du tampon, migration 007, demande de Romain 2026-10-07 */
.fichier-zones-bouton { font-size: 13px; white-space: nowrap; } /* zones de signature par signataire, migration 008, demande de Romain 2026-10-07 (patch 14) */
.fichier-retirer { font-size: 16px; }

/* Liste des fichiers joints à un document (voir.php admin et signer/voir.php) */
.document-fichier-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--carte);
}
.document-fichier-nom { font-weight: 600; }
.document-fichier-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
/* Position du tampon (migration 007, demande de Romain, 2026-10-07) — champ_position_tampon() dans helpers.php */
.formulaire-position-tampon { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texte-attenue); }
.formulaire-position-tampon select { font-size: 13px; padding: 4px 6px; }
.badge-fichiers-nombre {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--texte-attenue);
}

/* Bouton « glisser pour signer » — cf. public/assets/js/glisser-signer.js */
.glisser-signer-repli { display: block; width: 100%; margin-top: 14px; }
.glisser-signer-piste {
    display: none;
    position: relative;
    margin-top: 14px;
    height: 54px;
    border-radius: 27px;
    background: var(--info-fond);
    overflow: hidden;
    --glisser-signer-progression: 0;
}
.glisser-signer-actif .glisser-signer-repli { display: none; }
.glisser-signer-actif .glisser-signer-piste { display: block; }
.glisser-signer-texte {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texte-attenue);
    font-weight: 600;
    font-size: 14px;
    pointer-events: none;
}
.glisser-signer-poignee {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    z-index: 1;
}
.glisser-signer-poignee.glisser-signer-en-cours { cursor: grabbing; }
.glisser-signer-piste.glisser-signer-valide { background: var(--succes-fond); }
.glisser-signer-piste.glisser-signer-valide .glisser-signer-poignee { background: var(--succes); }

/* Polices d'écriture manuscrite pour l'aperçu de signature (cf.
   App\Services\SignatureCursive, même registre que le rendu serveur dans le
   PDF). Hébergées en local — jamais via Google Fonts — pour garantir le même
   rendu exact que celui apposé sur le document final. */
@font-face {
    font-family: 'Signature Dancing Script';
    src: url('/assets/fonts/DancingScript-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Signature Caveat';
    src: url('/assets/fonts/Caveat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Signature La Belle Aurore';
    src: url('/assets/fonts/LaBelleAurore-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Signature Mrs Saint Delafield';
    src: url('/assets/fonts/MrsSaintDelafield-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

.choix-police { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.choix-police-carte {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1.5px solid var(--bordure);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.choix-police-carte:hover { border-color: var(--accent-clair); }
.choix-police-carte input[type="radio"] { margin: 0; flex-shrink: 0; width: 18px; height: 18px; }
.choix-police-carte-selectionnee { border-color: var(--accent); background: var(--info-fond); }
.choix-police-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.choix-police-apercu {
    font-size: 26px;
    line-height: 1.2;
    color: var(--texte);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.choix-police-nom { display: block; font-family: 'Inter', Arial, sans-serif; font-size: 11px; font-weight: 600; color: var(--texte-attenue); margin-top: 2px; }

/* Pilule de profil (topbar) et page /profil — lot 1, demande de Romain,
   2026-10-07. */
.pilule-profil {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 5px 14px 5px 5px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.pilule-profil:hover { background: rgba(255, 255, 255, 0.2); text-decoration: none; }

.profil-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.profil-avatar-initiale {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-clair);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
}
.profil-avatar-grand { width: 72px; height: 72px; font-size: 28px; }

/* Marque "Signature" animée à l'arrivée sur l'écran de connexion — demande
   de Romain, 2026-10-07, porté à l'identique de l'effet déjà en place sur
   Présent (cf. marque_presente.php côté present-platform, lot 1 v31) :
   révélation du mot par petits paliers (clip-path + steps), façon "en train
   de l'écrire", avec un curseur clignotant qui disparaît une fois le mot
   achevé. Réutilise la police 'Signature Dancing Script' déjà chargée en
   @font-face local plus haut dans ce fichier (signature manuscrite du PDF) —
   aucune police supplémentaire à charger. */
.marque-signature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 28px 0 8px;
    text-align: center;
}
.signature-logo { display: inline-flex; align-items: center; gap: 0.35em; }
.signature-logo__icone { width: 2.2em; height: 2.2em; flex-shrink: 0; }
.signature-logo__mot-conteneur { display: inline-flex; align-items: baseline; }
.signature-logo__mot {
    font-family: 'Signature Dancing Script', cursive;
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--accent);
}
.signature-logo__mot--anime {
    display: inline-block;
    /* Marges verticales négatives (correctif, retour de Romain avec capture
       d'écran : le "S" de "Signature" apparaissait tronqué en haut) : la
       police cursive déborde de sa boîte de ligne (line-height: 1) — ses
       métriques internes ne couvrent pas tout l'encre visible du glyphe
       (boucle du "S", jambage du "g"). Sans clip-path, ce débordement
       s'affiche simplement par-dessus sans être rogné ; mais dès qu'un
       clip-path est appliqué à l'élément — même un inset(0 0 0 0), "pas de
       découpe" en apparence — son rectangle de référence colle exactement
       aux bords de la boîte de ligne, qui devient alors une limite de
       découpe réelle pour la première fois. D'où la boucle du "S" rognée en
       haut (et le jambage du "g" qui l'aurait été en bas). Un inset()
       négatif agrandit le rectangle de découpe au-delà de la boîte, sans
       changer la mise en page (la hauteur de ligne réservée ne bouge pas) :
       seule la marge de découpe s'élargit. */
    clip-path: inset(-0.5em 100% -0.5em 0);
    animation: signature-ecriture 1.1s steps(9, end) 0.2s forwards;
}
.signature-logo__curseur {
    display: inline-block;
    width: 2px;
    height: 0.85em;
    margin-left: 2px;
    background: var(--accent);
    animation: signature-clignoter 0.7s step-end 5, signature-disparaitre 0.4s ease-out 3.5s forwards;
}
@keyframes signature-ecriture { to { clip-path: inset(-0.5em 0 -0.5em 0); } }
@keyframes signature-clignoter { 50% { opacity: 0; } }
@keyframes signature-disparaitre { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .signature-logo__mot--anime { animation: none; clip-path: none; }
    .signature-logo__curseur { display: none; }
}
.marque-signature-signature { margin: 0; font-size: 0.78rem; color: var(--texte-attenue); }

/* Animation de confirmation après signature (style "YouSign") — demande de
   Romain, 2026-10-07 : une coche qui se trace dans un cercle, suivi d'un
   petit "pop", pour marquer visuellement que c'est fait. N'est rendue
   qu'une fois, juste après la signature (cf. $succesAnime dans
   views/signer/voir.php) — jamais en revisitant un lien déjà signé.
   pathLength="1" sur le cercle et la coche (cf. le SVG) permet d'animer le
   tracé en pourcentage (stroke-dasharray/dashoffset de 0 à 1) sans calculer
   la longueur réelle du tracé. */
.signature-succes-anim { display: flex; justify-content: center; margin: 4px 0 16px; }
.signature-succes-anim__cercle,
.signature-succes-anim__coche {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.signature-succes-anim__cercle { animation: signature-succes-tracer 0.5s ease-out forwards; }
.signature-succes-anim__coche { animation: signature-succes-tracer 0.35s ease-out 0.45s forwards; }
@keyframes signature-succes-tracer { to { stroke-dashoffset: 0; } }
.signature-succes-anim svg { animation: signature-succes-pop 0.3s ease-out 0.8s both; transform-origin: center; }
@keyframes signature-succes-pop {
    30% { transform: scale(1.12); }
    60% { transform: scale(0.97); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .signature-succes-anim__cercle,
    .signature-succes-anim__coche { animation: none; stroke-dashoffset: 0; }
    .signature-succes-anim svg { animation: none; }
}

/* Variante "danger" du bouton (action destructrice — supprimer un document)
   : volontairement distincte du bouton tertiaire neutre, plutôt que de s'y
   fondre (même principe déjà appliqué sur Présent). */
.bouton-danger { background: var(--alerte-fond); color: var(--alerte); }
.bouton-danger:hover { background: var(--alerte); color: #fff; }

/* Tableau de bord des documents en cartes (demande de Romain, 2026-10-07,
   « un peu à l'image de ce qu'on a pu mettre en place sur présent ») — une
   grille responsive plutôt qu'un tableau de lignes : chaque carte porte une
   vignette stylisée (pas un aperçu réel du PDF, cf. views/documents/liste.php),
   le titre, le statut, la progression des signataires et les deux actions
   (Voir / Supprimer) sous forme de vrais boutons. auto-fill + minmax passe
   naturellement à une seule colonne sur mobile, sans media query dédiée. */
.documents-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 14px;
}
.document-carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* La couleur portée par currentColor (vignette) vient de cette variable,
       changée selon le statut ci-dessous — une seule déclaration par
       variante plutôt que de dupliquer tout le SVG. */
    --document-carte-couleur: var(--accent);
}
.document-carte--en_cours { --document-carte-couleur: var(--accent); }
.document-carte--signe { --document-carte-couleur: var(--succes); }
.document-carte--expire { --document-carte-couleur: var(--alerte); }

.document-carte-entete { display: flex; align-items: flex-start; gap: 12px; }
.document-carte-vignette {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    color: var(--document-carte-couleur);
}
.document-carte-vignette-badge {
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--carte);
    border: 1.5px solid var(--document-carte-couleur);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
}
.document-carte-titre-zone { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.document-carte-titre {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--texte);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.document-carte-corps { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.document-carte-corps .note { margin: 0; }
.document-carte-progression { display: flex; align-items: center; gap: 10px; }
.document-carte-progression-piste {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--bordure);
    overflow: hidden;
}
.document-carte-progression-remplissage {
    height: 100%;
    border-radius: 999px;
    background: var(--document-carte-couleur);
}
.document-carte-pied { display: flex; gap: 8px; }
.document-carte-pied .bouton { flex: 1; text-align: center; }
.document-carte-pied form { flex: 1; }
.document-carte-pied form .bouton { width: 100%; }

.profil-photo-ligne { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Éditeur visuel de zone de signature (migration 008, demande de Romain,
   2026-10-07, patch 14) — cf. public/assets/js/zone-signature.js. */
.zone-signature-fond {
    position: fixed;
    inset: 0;
    background: rgba(27, 31, 39, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}
/* `display: flex` ci-dessus neutralise sinon totalement l'attribut
   `hidden` (règle UA `[hidden] { display: none }`, de même spécificité
   qu'une classe — c'est l'auteur qui gagne) : sans cette ligne, fermer la
   modale (fond.hidden = true, cf. zone-signature.js) la laissait visible
   ET cliquable par-dessus le reste de la page, bloquant silencieusement
   tout clic en dessous (bug constaté et corrigé le 2026-10-07 — déjà
   rencontré sur Présent, cf. notes techniques « [hidden] overridden by a
   class that sets its own display »). */
.zone-signature-fond[hidden] { display: none; }
.zone-signature-modale {
    background: var(--carte);
    border-radius: 14px;
    max-width: 1060px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.zone-signature-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--bordure);
}
.zone-signature-titre { font-size: 15px; }
.zone-signature-fermer { font-size: 18px; }
.zone-signature-message { margin: 16px 18px; }
.zone-signature-corps {
    display: flex;
    gap: 16px;
    padding: 16px 18px;
    overflow: auto;
    flex: 1;
}
.zone-signature-canevas-conteneur { flex: 1 1 auto; min-width: 0; }
.zone-signature-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}
.zone-signature-page { font-size: 13px; color: var(--texte-attenue); min-width: 110px; text-align: center; }
.zone-signature-canevas-zone {
    /* JAMAIS de max-width/scale CSS ici : la taille du <canvas> (attributs
       width/height, en pixels "mémoire") doit toujours correspondre
       EXACTEMENT à sa taille affichée (CSS), sinon les coordonnées
       pointeur lues en JS (clientX/clientY, cf. zone-signature.js) ne
       correspondraient plus aux pixels réellement dessinés — mieux vaut un
       défilement horizontal sur un écran étroit qu'un tracé mal placé. */
    position: relative;
    display: inline-block;
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    touch-action: none;
}
.zone-signature-canevas { display: block; cursor: crosshair; }
.zone-signature-overlay { position: absolute; inset: 0; pointer-events: none; }
.zone-signature-boite {
    position: absolute;
    border: 2px solid;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}
.zone-signature-boite span {
    position: absolute;
    top: -20px;
    left: -2px;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.zone-signature-boite-en-cours { border-color: var(--accent); border-style: dashed; }
.zone-signature-panneau { flex: 0 0 260px; }
.zone-signature-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.zone-signature-ligne-signataire {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}
.zone-signature-ligne-active { border-color: var(--accent); background: var(--info-fond); }
.zone-signature-puce { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.zone-signature-nom { flex: 1; }
.zone-signature-etat { color: var(--texte-attenue); font-size: 12px; white-space: nowrap; }
.zone-signature-retirer { font-size: 14px; }
.zone-signature-pied {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--bordure);
}
@media (max-width: 720px) {
    .zone-signature-corps { flex-direction: column; }
    .zone-signature-panneau { flex: none; }
}

/* ======================================================================
   Optimisation responsive (demande de Romain, 2026-10-08) — un seul
   bloc en fin de fichier plutôt que des règles éparpillées, pour garder
   une vue d'ensemble de tout ce qui change sous le seuil "mobile" (700px,
   aligné sur le seuil déjà existant de l'éditeur de zones ci-dessus).
   ====================================================================== */

/* Menu "hamburger" du bandeau — caché par défaut (desktop : nav toujours
   visible, cf. règles .topbar/.topbar nav plus haut dans ce fichier).
   Bascule gérée par public/assets/js/menu-mobile.js. */
.topbar-menu-bouton {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    flex-shrink: 0;
}
.topbar-menu-bouton span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }

/* Tableaux (signataires, comptes, clés d'accès) : plutôt que de laisser le
   texte des cellules s'écraser ou passer à la ligne n'importe comment sur
   un écran étroit, on les fait défiler horizontalement — cf. le wrapper
   <div class="tableau-scroll"> ajouté autour de chaque <table class="tableau">
   dans les vues. min-width sur .tableau force le défilement plutôt qu'un
   tassement illisible des colonnes. */
.tableau-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau-scroll .tableau { min-width: 560px; }

@media (max-width: 700px) {
    /* Nav repliée derrière le bouton hamburger. flex-basis:100% la fait
       passer sur sa propre ligne, sous le bandeau brand+bouton, une fois
       affichée (cf. .topbar { flex-wrap: wrap } déjà en place). */
    .topbar-menu-bouton { display: flex; }
    .topbar nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
    .topbar nav.topbar-nav-ouvert { display: flex; }
    .topbar nav > * { width: 100%; text-align: left; }
    .topbar nav .bouton { text-align: center; }

    /* iOS Safari agrandit automatiquement la page quand on touche un champ
       dont le texte affiché fait moins de 16px — gênant (effet de zoom
       intempestif à chaque champ) sans rien apporter ici. Seuil mobile
       uniquement : les champs compacts du bureau (ex. les <select> de
       position du tampon) gardent leur taille réduite sur grand écran. */
    input[type="text"], input[type="email"], input[type="password"], input[type="file"],
    textarea, select { font-size: 16px; }

    /* Air réduit sur très petit écran plutôt que de retirer la même marge
       qu'en bureau : .conteneur + .carte cumulaient jusqu'à 96px de marge
       horizontale, trop sur un iPhone SE (320px de large). */
    .conteneur { padding: 16px 14px 48px; }
    .carte { padding: 18px; }

    /* Lignes "signataire" et "fichier" du formulaire de création (grilles
       pensées pour le bureau, colonnes côte à côte) : le numéro de rang
       reste dans sa propre colonne (il occupe toutes les lignes générées),
       chaque autre champ passe sur sa propre ligne en pleine largeur —
       plus lisible et plus facile à toucher qu'une grille tassée. Repose
       sur l'ORDRE des éléments dans le DOM (cf. views/documents/nouveau.php),
       pas sur leur nombre exact : robuste à l'ajout futur d'un champ. */
    .signataire-ligne, .fichier-ligne {
        grid-template-columns: 28px 1fr;
        row-gap: 8px;
    }
    .signataire-ligne > :first-child, .fichier-ligne > :first-child {
        grid-row: 1 / -1;
        align-self: start;
    }
    .signataire-ligne > :not(:first-child), .fichier-ligne > :not(:first-child) {
        grid-column: 2;
    }

    /* Cibles tactiles des boutons "retirer" (✕) — une simple lettre sans
       marge est difficile à toucher précisément au doigt ; on agrandit la
       zone cliquable sans changer l'apparence visuelle du texte. */
    .signataire-retirer, .fichier-retirer, .zone-signature-retirer { padding: 10px; margin: -10px; }
}