/* =====================================================================
   Prospecto — feuille de style unique
   Ecrite a 375 px d'abord. La seule requete media elargit vers le bureau.
   Aucun degrade, aucune ombre portee lourde, aucune animation decorative.
   ===================================================================== */

:root {
    --fond:            #FAFBFC;
    --surface:         #FFFFFF;
    --surface-appuyee: #F2F5F8;
    --bordure:         #E4E8EC;
    --texte:           #14304F;
    --texte-doux:      #5A6B7C;
    --accent:          #2C6CA8;
    --accent-appuye:   #23568C;
    --marque:          #218FCB;

    --succes:          #2E7D3E;
    --succes-fond:     #EAF5EC;
    --erreur:          #C0392B;
    --erreur-fond:     #FBEDEB;
    --alerte:          #B08D4A;
    --alerte-fond:     #FBF4E7;
    --info-fond:       #EAF1F8;

    --rayon:      8px;
    --rayon-petit: 6px;
    --transition: 150ms ease;

    /* 48 px minimum pour le pouce, 56 px pour l'action principale. */
    --cible:      48px;
    --cible-forte: 56px;

    --barre-hauteur: 60px;

    color-scheme: light;
}

/* ------------------------------------------------------------------ */
/* Remise a zero                                                       */
/* ------------------------------------------------------------------ */

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

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

body {
    margin: 0;
    /* 16 px minimum : en dessous, iOS zoome tout seul sur les champs. */
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
    background: var(--fond);
    color: var(--texte);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--rayon-petit);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ------------------------------------------------------------------ */
/* Ossature                                                            */
/* ------------------------------------------------------------------ */

.appli {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.entete {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 16px;
    padding-top: calc(8px + env(safe-area-inset-top));
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
}

/* Les logos passent par background-image et non par <img>, pour que chaque
   taille d'ecran ne telecharge QUE le fichier qu'elle affiche. Un <img> dans
   un conteneur en display:none est quand meme telecharge par le navigateur.
   Le mobile prend donc 20 ko au lieu des 474 ko du SVG, qui contient en
   realite 44 images matricielles encodees en base64. */
.entete__marque {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    background: url("../img/apple-touch-icon.png") center / contain no-repeat;
}

.entete__titre {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entete__actions { margin-left: auto; display: flex; gap: 4px; }

.contenu {
    flex: 1;
    padding: 16px;
    /* Place pour la barre inferieure, l'encoche, et une marge franche : le
       dernier element d'une liste doit rester entierement visible et
       cliquable, jamais a moitie sous la barre fixe. */
    padding-bottom: calc(var(--barre-hauteur) + env(safe-area-inset-bottom) + 40px);
    max-width: 44rem;
    width: 100%;
    margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* Navigation inferieure — l'ecran principal du closer                 */
/* ------------------------------------------------------------------ */

.barre {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--bordure);
    padding-bottom: env(safe-area-inset-bottom);
}

.barre__lien {
    /* Ancre de la pastille de non-lus, qui se place par rapport a l'onglet. */
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--barre-hauteur);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    color: var(--texte-doux);
    text-decoration: none;
    /* 12 px plancher. En dessous, un libelle devient une tache grise sur un
       ecran de telephone tenu a bout de bras. Les libelles sont raccourcis
       plutot que la police reduite : « Dossiers » lisible vaut mieux que
       « Mes dossiers » illisible. */
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.1;
    transition: color var(--transition);
}

.barre__lien svg { width: 22px; height: 22px; stroke-width: 1.75; }
.barre__lien span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.barre__lien:active { background: var(--surface-appuyee); }
.barre__lien[aria-current="page"] { color: var(--accent); }

/* Hors flux, ancree sur l'icone : elle ne pousse ni le pictogramme ni le
   libelle, sinon un onglet portant un compte serait plus haut que ses
   voisins. */
.barre__pastille {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--erreur);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.laterale { display: none; }

/* ------------------------------------------------------------------ */
/* Cartes — le tableau horizontal n'existe pas sur mobile              */
/* ------------------------------------------------------------------ */

.carte {
    display: block;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 14px;
    margin-bottom: 10px;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition);
}

a.carte:active, button.carte:active { background: var(--surface-appuyee); }
a.carte:hover { border-color: var(--accent); }

.carte__entete {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

.carte__titre {
    font-weight: 600;
    line-height: 1.35;
    /* Un nom de commerce peut faire trois lignes : on ne le coupe pas. */
    overflow-wrap: anywhere;
}

.carte__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 0.8125rem;
    color: var(--texte-doux);
}

.carte__meta > * { display: inline-flex; align-items: center; gap: 4px; }

/* ------------------------------------------------------------------ */
/* Pastille de statut — la couleur vient de la base, jamais d'ici      */
/* ------------------------------------------------------------------ */

.pastille {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: 6px;
}

.etiquette {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    /* --teinte est pose en style inline depuis statuts.couleur_hex */
    color: var(--teinte, var(--texte-doux));
    background: color-mix(in srgb, var(--teinte, var(--texte-doux)) 12%, transparent);
}

.etiquette::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ------------------------------------------------------------------ */
/* Boutons                                                             */
/* ------------------------------------------------------------------ */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--cible);
    padding: 0 18px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--texte);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.bouton:active { background: var(--surface-appuyee); }
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }

.bouton--principal {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.bouton--principal:active { background: var(--accent-appuye); }

.bouton--danger { color: var(--erreur); border-color: color-mix(in srgb, var(--erreur) 35%, var(--bordure)); }

.bouton--large { width: 100%; }

/* Appel : l'action la plus importante de l'application. */
.bouton--appel {
    min-height: var(--cible-forte);
    font-size: 1.0625rem;
    font-weight: 600;
}

.bouton--flottant {
    position: fixed;
    right: 16px;
    bottom: calc(var(--barre-hauteur) + env(safe-area-inset-bottom) + 16px);
    z-index: 25;
    min-height: var(--cible-forte);
    padding: 0 20px;
    border: none;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgb(20 48 79 / 18%);
}

.actions { display: flex; flex-direction: column; gap: 8px; }

/* ------------------------------------------------------------------ */
/* Formulaires                                                         */
/* ------------------------------------------------------------------ */

.champ { margin-bottom: 16px; }

.champ__etiquette {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.champ__aide {
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--texte-doux);
}

.champ__saisie,
.champ select,
.champ textarea {
    width: 100%;
    min-height: var(--cible);
    padding: 12px;
    /* 16 px imperatif : iOS zoome sur tout champ plus petit. */
    font-size: 16px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    transition: border-color var(--transition);
}

.champ__saisie:focus, .champ select:focus, .champ textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.champ textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.champ--erreur .champ__saisie { border-color: var(--erreur); }
.champ__erreur { margin-top: 6px; font-size: 0.8125rem; color: var(--erreur); }

/* ------------------------------------------------------------------ */
/* Messages flash                                                      */
/* ------------------------------------------------------------------ */

.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: var(--rayon);
    border: 1px solid transparent;
    font-size: 0.9375rem;
}

.flash--succes        { background: var(--succes-fond); border-color: color-mix(in srgb, var(--succes) 25%, transparent); color: var(--succes); }
.flash--erreur        { background: var(--erreur-fond); border-color: color-mix(in srgb, var(--erreur) 25%, transparent); color: var(--erreur); }
.flash--avertissement { background: var(--alerte-fond); border-color: color-mix(in srgb, var(--alerte) 30%, transparent); color: var(--alerte); }
.flash--info          { background: var(--info-fond);   border-color: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }

.flash__fermer {
    margin-left: auto;
    min-width: 32px; min-height: 32px;
    display: grid; place-items: center;
    border: none; background: none; color: inherit;
    cursor: pointer; opacity: 0.7;
}

/* Bandeau bloquant, pour l'exclusion DNC ou les heures d'appel. */
.bandeau {
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: var(--rayon);
    border-left: 3px solid var(--alerte);
    background: var(--alerte-fond);
    font-size: 0.9375rem;
}

.bandeau--bloquant { border-left-color: var(--erreur); background: var(--erreur-fond); color: var(--erreur); }

/* ------------------------------------------------------------------ */
/* Etat vide — jamais un ecran blanc                                   */
/* ------------------------------------------------------------------ */

.vide {
    text-align: center;
    padding: 40px 20px;
    background: var(--surface);
    border: 1px dashed var(--bordure);
    border-radius: var(--rayon);
}

.vide svg { width: 32px; height: 32px; margin: 0 auto 12px; color: var(--texte-doux); }
.vide__titre { font-weight: 600; margin-bottom: 6px; }
.vide__texte { color: var(--texte-doux); font-size: 0.9375rem; margin-bottom: 18px; }

/* ------------------------------------------------------------------ */
/* Divers                                                              */
/* ------------------------------------------------------------------ */

.titre-section {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--texte-doux);
    margin: 22px 0 8px;
}
.titre-section:first-child { margin-top: 0; }

.compteurs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.compteur {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 12px 10px;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.compteur__valeur { font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.compteur__libelle { font-size: 0.75rem; color: var(--texte-doux); margin-top: 2px; }

.doux { color: var(--texte-doux); }
.petit { font-size: 0.8125rem; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.8125rem; }
.pile { display: flex; flex-direction: column; gap: 10px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Un tableau existe sur bureau ; sur mobile il devient une pile. */
.tableau { width: 100%; border-collapse: collapse; }

/* Indicateur de connexion, pose par app.js */
.hors-ligne {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(8px + env(safe-area-inset-top));
    z-index: 60;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--texte);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgb(20 48 79 / 25%);
}

.enregistrement {
    font-size: 0.75rem;
    color: var(--texte-doux);
    transition: opacity var(--transition);
}

.saut-navigation {
    position: absolute;
    left: -9999px;
}
.saut-navigation:focus {
    left: 16px; top: 16px;
    z-index: 100;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--rayon);
}

/* ------------------------------------------------------------------ */
/* Liste des prospects                                                 */
/* ------------------------------------------------------------------ */

.recherche { display: flex; gap: 8px; margin-bottom: 10px; }
.recherche .champ__saisie { flex: 1; min-width: 0; }
.recherche .bouton { flex: 0 0 auto; padding: 0 14px; }

.filtres { margin-bottom: 14px; }

.filtres__declencheur {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--cible);
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.filtres__declencheur::-webkit-details-marker { display: none; }
.filtres__declencheur::after { content: "▾"; margin-left: auto; color: var(--texte-doux); }
.filtres[open] .filtres__declencheur::after { content: "▴"; }

.filtres__compte {
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--accent); color: #fff;
    font-size: 0.6875rem; font-weight: 700; line-height: 20px; text-align: center;
}

.filtres__corps {
    padding: 14px;
    margin-top: 8px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}
.filtres__corps .champ:last-of-type { margin-bottom: 12px; }

.bascule {
    display: flex; align-items: center; gap: 10px;
    min-height: var(--cible); margin-bottom: 12px;
    font-size: 0.9375rem; cursor: pointer;
}
.bascule input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent); }

.resultat-compte { margin-bottom: 10px; font-size: 0.875rem; color: var(--texte-doux); }

.carte--prospect .carte__titre { flex: 1; }

.priorite {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border-radius: var(--rayon-petit);
    font-size: 0.6875rem; font-weight: 700;
    line-height: 20px; text-align: center;
}
.priorite--A { background: #FBEDEB; color: #C0392B; }
.priorite--B { background: #FBF4E7; color: #B08D4A; }
.priorite--C { background: var(--surface-appuyee); color: var(--texte-doux); }

.note-google strong { font-size: 1rem; }

.carte__marqueurs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.marqueur {
    padding: 2px 8px;
    border-radius: var(--rayon-petit);
    background: var(--surface-appuyee);
    color: var(--texte-doux);
    font-size: 0.75rem;
    font-weight: 500;
}
.marqueur--attention { background: var(--alerte-fond); color: var(--alerte); }
.marqueur--interdit  { background: var(--erreur-fond); color: var(--erreur); }
.marqueur--assigne   { background: var(--info-fond); color: var(--accent); }

.pagination {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 16px;
}

/* ------------------------------------------------------------------ */
/* Fiche prospect                                                      */
/* ------------------------------------------------------------------ */

.fiche__entete { margin-bottom: 14px; }

.fiche__nom {
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    margin-bottom: 8px;
}

.fiche__statut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.fiche__repli { margin: 8px 0 0; font-size: 0.8125rem; color: var(--texte-doux); }

/* Mention accolée au lien tel: quand Twilio est actif. Elle doit se lire
   avant que le pouce arrive sur le bouton, pas après l'appel. */
.fiche__repli--attention {
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid color-mix(in srgb, var(--erreur) 45%, var(--bordure));
    color: var(--texte);
}

/* Le site du prospect s'ouvre dans un onglet neuf : le closer ne doit
   jamais perdre sa fiche en plein appel. */
.bouton--site {
    margin-bottom: 12px;
    border-color: var(--accent);
    color: var(--accent);
}

.bouton--interdit {
    background: var(--erreur-fond);
    border-color: color-mix(in srgb, var(--erreur) 30%, transparent);
    color: var(--erreur);
    cursor: not-allowed;
}
.bouton[aria-disabled="true"] { opacity: 0.75; cursor: not-allowed; }

/* L'accroche : la note Google est ce que le closer dit en premier. */
.accroche {
    display: flex; align-items: center; gap: 14px;
    margin: 14px 0;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon);
}
.accroche--vide { border-left-color: var(--texte-doux); }
.accroche__note { font-size: 2rem; font-weight: 700; line-height: 1; }
.accroche__etoiles { color: #B08D4A; letter-spacing: 1px; }

.ligne-info {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 7px 0;
    border-bottom: 1px solid var(--bordure);
}
.ligne-info:last-child { border-bottom: none; padding-bottom: 0; }
.ligne-info:first-child { padding-top: 0; }
.ligne-info > :last-child { text-align: right; overflow-wrap: anywhere; }

.indices { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

/* ------------------------------------------------------------------ */
/* Edition des reglages                                                */
/* ------------------------------------------------------------------ */

.reglage { margin-bottom: 10px; }
.reglage--erreur { border-color: var(--erreur); }

.reglage__entete {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 6px;
    margin-bottom: 8px;
}
.reglage__entete .champ__etiquette { margin: 0; }

/* Le champ, son unite et le bouton tiennent sur une ligne quand la place
   le permet. A 375 px avec une unite longue (« heures ouvrables »), la
   ligne passe a deux plutot que d'ecraser le champ de saisie. */
.reglage__saisie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reglage__saisie .champ__saisie,
.reglage__saisie select { flex: 1 1 7rem; min-width: 0; }
.reglage__saisie .bouton { flex: 0 0 auto; padding: 0 16px; }

.reglage__unite {
    flex: 0 1 auto;
    font-size: 0.8125rem;
    color: var(--texte-doux);
}

.reglage .champ__aide { margin-top: 8px; }

/* Une ligne d'historique tient en trois blocs empiles : la cle, le
   changement, puis quand et par qui. Sur 375 px, une seule ligne
   « date · cle · avant → apres » deviendrait illisible. */
.histo {
    padding: 9px 0;
    border-bottom: 1px solid var(--bordure);
}
.histo:first-child { padding-top: 0; }
.histo:last-child  { border-bottom: none; padding-bottom: 0; }

.histo__cle { display: block; font-size: 0.8125rem; overflow-wrap: anywhere; }
.histo__valeurs { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 2px; }
.histo__quand { display: block; margin-top: 2px; }

@media (min-width: 640px) {
    .histo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        column-gap: 14px;
    }
    .histo__quand { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; text-align: right; }
}

/* Onglets en CSS pur : aucun JavaScript, donc rien a charger et rien qui
   casse si le reseau tombe au milieu d'un appel. */
.onglets > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.onglets__barre {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
    background: var(--surface-appuyee);
    border-radius: var(--rayon);
    padding: 3px;
}

.onglets__barre label {
    flex: 1;
    min-height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--rayon-petit);
    font-size: 0.875rem; font-weight: 500;
    color: var(--texte-doux);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.onglets__panneau { display: none; }

#onglet-fiche:checked      ~ .onglets__barre label[for="onglet-fiche"],
#onglet-notes:checked      ~ .onglets__barre label[for="onglet-notes"],
#onglet-historique:checked ~ .onglets__barre label[for="onglet-historique"] {
    background: var(--surface);
    color: var(--texte);
    box-shadow: 0 1px 2px rgb(20 48 79 / 8%);
}

#onglet-fiche:checked      ~ [data-onglet="fiche"],
#onglet-script:checked     ~ [data-onglet="script"],
#onglet-notes:checked      ~ [data-onglet="notes"],
#onglet-historique:checked ~ [data-onglet="historique"] { display: block; }

#onglet-script:checked ~ .onglets__barre label[for="onglet-script"] {
    background: var(--surface);
    color: var(--texte);
    box-shadow: 0 1px 2px rgb(20 48 79 / 8%);
}

.onglets > input:focus-visible ~ .onglets__barre label { outline: 2px solid var(--accent); outline-offset: 2px; }

.note {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 12px 14px;
    margin-bottom: 8px;
}
.note__entete { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 0.875rem; }
.note__contenu { line-height: 1.5; overflow-wrap: anywhere; }

.journal { position: relative; }
.journal__ligne {
    display: flex; gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bordure);
    font-size: 0.875rem;
}
.journal__ligne:last-child { border-bottom: none; }
.journal__quand { flex: 0 0 5.5rem; color: var(--texte-doux); }
.journal__quoi { flex: 1; }

/* ------------------------------------------------------------------ */
/* Script d'appel                                                      */
/*                                                                     */
/* DEUX REGISTRES, DEUX APPARENCES.                                    */
/* .dit      = ce que le closer PRONONCE. Grand, aere, guillemets.     */
/* .pourquoi = pourquoi ca marche. Retrait, italique, discret.         */
/* .alerte   = interdiction ou consigne. Encadre, jamais lu a voix     */
/*             haute.                                                  */
/* Un closer qui lit son ecran ne doit jamais reciter par erreur       */
/* « ne lui invente pas de probleme, tu serais contredit ».            */
/* ------------------------------------------------------------------ */

.script { display: flex; flex-direction: column; }

.script > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.script__barre {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 12px;
    background: var(--surface-appuyee);
    border-radius: var(--rayon);
}
.script__barre label {
    flex: 1;
    min-height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--rayon-petit);
    font-size: 0.8125rem; font-weight: 500;
    color: var(--texte-doux);
    cursor: pointer;
}

.script__panneau { display: none; }

#sst-script:checked     ~ .script__barre label[for="sst-script"],
#sst-objections:checked ~ .script__barre label[for="sst-objections"],
#sst-dev:checked        ~ .script__barre label[for="sst-dev"] {
    background: var(--surface); color: var(--texte);
}
#sst-script:checked     ~ [data-sous="script"],
#sst-objections:checked ~ [data-sous="objections"],
#sst-dev:checked        ~ [data-sous="dev"] { display: block; }

.section {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    margin-bottom: 8px;
}
.section__titre {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    min-height: var(--cible);
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.section__titre::-webkit-details-marker { display: none; }
.section__titre::after { content: "▾"; margin-left: auto; color: var(--texte-doux); }
.section[open] .section__titre::after { content: "▴"; }
.section__corps { padding: 0 14px 14px; }

/* ---- Ce qui se PRONONCE ---- */
.section__corps .dit,
.objection__corps .dit,
.signal .dit,
.prix__corps .dit {
    position: relative;
    margin: 0 0 12px;
    padding: 12px 14px 12px 16px;
    background: var(--info-fond);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    /* Lisible a bout de bras, en parlant. */
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--texte);
}

/* ---- Pourquoi ca marche : pour l'agent, jamais lu ---- */
.section__corps .pourquoi,
.objection__corps .pourquoi,
.prix__corps .pourquoi {
    margin: 0 0 12px;
    padding-left: 14px;
    border-left: 2px dotted var(--bordure);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--texte-doux);
}

/* ---- Consigne ou interdiction : pour l'agent, jamais lu ---- */
.section__corps .alerte,
.objection__corps .alerte,
.prix__corps .alerte,
.prix__feuille .alerte {
    margin: 0 0 12px;
    padding: 10px 12px;
    background: var(--alerte-fond);
    border: 1px solid color-mix(in srgb, var(--alerte) 30%, transparent);
    border-radius: var(--rayon-petit);
    font-size: 0.875rem;
    color: var(--alerte);
}

/* Une pastille en tete de chaque bloc non prononce : le registre se voit
   avant meme d'etre lu. */
.section__corps .pourquoi::before,
.objection__corps .pourquoi::before,
.prix__corps .pourquoi::before { content: "Pourquoi — "; font-style: normal; font-weight: 600; }

.section__corps .alerte::before,
.objection__corps .alerte::before,
.prix__corps .alerte::before,
.prix__feuille .alerte::before { content: "À retenir — "; font-weight: 700; }

.section__corps table, .prix__corps table {
    width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 0.875rem;
}
.section__corps th, .section__corps td,
.prix__corps th, .prix__corps td {
    padding: 7px 8px; border-bottom: 1px solid var(--bordure); text-align: left; vertical-align: top;
}
.section__corps h4, .prix__corps h4 { margin: 14px 0 8px; font-size: 0.9375rem; }
.section__corps ul, .section__corps ol { margin-bottom: 12px; padding-left: 18px; }
.section__corps li { list-style: disc; margin-bottom: 4px; font-size: 0.9375rem; }
.section__corps ol li { list-style: decimal; }

/* ---- Objections ---- */
.objections__recherche { margin-bottom: 8px; }
.objections__aide { margin-bottom: 10px; }

.objection {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    margin-bottom: 6px;
}
.objection[hidden] { display: none; }
.objection__question {
    min-height: var(--cible);
    display: flex; align-items: center;
    padding: 10px 14px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.objection__question::-webkit-details-marker { display: none; }
.objection__question::before { content: "« "; color: var(--texte-doux); }
.objection__question::after  { content: " »"; color: var(--texte-doux); }
.objection__corps { padding: 0 14px 12px; }

.vide--filtre { padding: 24px; font-size: 0.9375rem; }

.signal {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 12px 14px;
    margin-bottom: 8px;
}
.signal__besoin { font-weight: 600; color: var(--accent); font-size: 0.9375rem; }

/* ---- Prix : un geste depuis n'importe ou ---- */
.prix { position: static; }

.prix__bouton {
    position: fixed;
    left: 16px;
    bottom: calc(var(--barre-hauteur) + env(safe-area-inset-bottom) + 16px);
    z-index: 26;
    display: flex; align-items: center; gap: 7px;
    min-height: var(--cible-forte);
    padding: 0 18px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    box-shadow: 0 2px 8px rgb(20 48 79 / 14%);
}
.prix__bouton::-webkit-details-marker { display: none; }
.prix[open] .prix__bouton { background: var(--accent); color: #fff; }

.prix__feuille {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--barre-hauteur) + env(safe-area-inset-bottom));
    z-index: 40;
    max-height: 70dvh;
    overflow-y: auto;
    background: var(--surface);
    border-top: 1px solid var(--bordure);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 16px rgb(20 48 79 / 14%);
}
.prix__entete {
    position: sticky; top: 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 14px 16px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
}
.prix__corps { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }

.prix__forfaits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.forfait { padding: 12px; background: var(--surface-appuyee); border-radius: var(--rayon); text-align: center; }
.forfait__nom { font-size: 0.8125rem; color: var(--texte-doux); }
.forfait__prix { font-size: 1.25rem; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* Changement de statut, notes, rappels                                */
/* ------------------------------------------------------------------ */

.choix {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.choix input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }
.choix:has(input:checked) { border-color: var(--accent); background: var(--info-fond); }
.choix--grave:has(input:checked) { border-color: var(--erreur); background: var(--erreur-fond); }

.choix__corps { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.choix__titre { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.choix__titre .pastille { margin-top: 0; }
.choix__aide { font-size: 0.8125rem; color: var(--texte-doux); }
.choix__exigences { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.choix__exigences:empty { display: none; }

.exigences {
    margin-top: 18px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--rayon);
}
.exigences .champ:last-of-type { margin-bottom: 0; }

.consequences { margin-bottom: 18px; }
.consequences li {
    position: relative;
    padding: 9px 0 9px 22px;
    border-bottom: 1px solid var(--bordure);
    font-size: 0.9375rem;
}
.consequences li:last-child { border-bottom: none; }
.consequences li::before {
    content: "";
    position: absolute;
    left: 4px; top: 17px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--erreur);
}

.bouton--danger-plein {
    background: var(--erreur);
    border-color: var(--erreur);
    color: #fff;
}

.note-saisie { margin-bottom: 18px; }
.note-saisie textarea { margin-bottom: 8px; }

.note__pied {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--bordure);
    font-size: 0.8125rem;
}
.note--liberation { border-left: 3px solid var(--alerte); }
.note--raison_refus { border-left: 3px solid var(--erreur); }

.titre-section--alerte { color: var(--erreur); }
.carte--retard { border-left: 3px solid var(--erreur); }

.bandeau--succes {
    border-left-color: var(--succes);
    background: var(--succes-fond);
    color: var(--succes);
}
.bandeau--succes a { color: inherit; font-weight: 600; }

.carte--maquette .carte__titre { flex: 1; }
.doux--erreur { color: var(--erreur); }

/* ------------------------------------------------------------------ */
/* Commissions                                                         */
/*                                                                     */
/* L'ACQUIS ET LE POTENTIEL NE SE RESSEMBLENT PAS. Le premier est plein */
/* et vert, le second est gris et pointille. Un agent doit voir la      */
/* difference sans lire les libelles.                                   */
/* ------------------------------------------------------------------ */

.compteur--acquis .compteur__valeur { color: var(--succes); }

.compteur--potentiel {
    background: transparent;
    border-style: dashed;
}
.compteur--potentiel .compteur__valeur { color: var(--texte-doux); font-weight: 600; }

.carte--commission .carte__titre { flex: 1; }

.montant {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--succes);
}
.montant--paye { color: var(--texte-doux); }
.montant--potentiel { color: var(--texte-doux); font-weight: 600; }

.carte--attente {
    background: transparent;
    border-style: dashed;
}

.carte--bloquee { border-left: 3px solid var(--alerte); }

/* ------------------------------------------------------------------ */
/* Tableaux de bord                                                    */
/*                                                                     */
/* Pas de bibliotheque de graphiques : des barres en CSS. Elles se      */
/* lisent aussi bien, ne pesent rien, et fonctionnent sur un reseau    */
/* de sous-sol.                                                        */
/* ------------------------------------------------------------------ */

.salutation { font-size: 1.125rem; font-weight: 600; margin-bottom: 16px; }
.salutation .doux { font-weight: 400; font-size: 0.9375rem; }

.etage { margin-bottom: 14px; }
.etage:last-child { margin-bottom: 0; }

.etage__entete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.etage__nom { font-weight: 500; }
.etage__valeur { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.etage__taux {
    min-width: 3.6rem;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--succes);
}
.etage__taux--faible { color: var(--erreur); }

.etage__barre {
    height: 8px;
    background: var(--surface-appuyee);
    border-radius: 4px;
    overflow: hidden;
}
.etage__barre span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
}

.etage__note { margin-top: 4px; }

.raison { margin-bottom: 12px; }
.raison:last-child { margin-bottom: 0; }
.raison__entete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.raison__nom { flex: 1; font-size: 0.9375rem; }
.raison__part { font-weight: 700; font-variant-numeric: tabular-nums; }
.raison .etage__barre span { background: var(--erreur); }

.comparaison { display: grid; gap: 10px; }

.agent__taux {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 10px 0 8px;
    padding: 10px 0;
    border-top: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
}
.agent__mesure { text-align: center; }
.agent__valeur { font-weight: 700; font-variant-numeric: tabular-nums; }
.agent__libelle { font-size: 0.6875rem; color: var(--texte-doux); }

a.bandeau { color: inherit; }
a.bandeau:hover { border-left-width: 5px; }

/* ------------------------------------------------------------------ */
/* Équipe, exclusion, aide                                             */
/* ------------------------------------------------------------------ */

/* Le mot de passe temporaire : affiche une seule fois, donc lisible du
   premier coup et dictable au telephone sans hesiter sur un caractere. */
.mdp {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
}

.mdp__valeur {
    flex: 1;
    min-width: 0;
    padding: 16px;
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: var(--rayon);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    overflow-wrap: anywhere;
    user-select: all;
}

.mdp__copier { flex: 0 0 auto; }

.retrait { margin-top: 12px; }
.retrait__declencheur {
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--erreur);
    cursor: pointer;
    list-style: none;
}
.retrait__declencheur::-webkit-details-marker { display: none; }
.retrait__declencheur::before { content: "▸ "; margin-right: 6px; }
.retrait[open] .retrait__declencheur::before { content: "▾ "; }

.sommaire {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}
.sommaire a {
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    font-size: 0.8125rem;
    text-decoration: none;
    color: var(--texte-doux);
}
.sommaire a:hover { border-color: var(--accent); color: var(--accent); }

.aide__titre {
    font-size: 1.0625rem;
    margin: 26px 0 10px;
    padding-top: 8px;
    /* Pour que l'ancre ne colle pas sous l'en-tete collant. */
    scroll-margin-top: 72px;
}

.aide__liste { margin: 0; }
.aide__liste li {
    list-style: none;
    padding: 9px 0;
    border-bottom: 1px solid var(--bordure);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.aide__liste li:last-child { border-bottom: none; }

.aide__erreurs { counter-reset: erreur; }
.aide__erreurs li {
    position: relative;
    list-style: none;
    padding: 10px 0 10px 34px;
    border-bottom: 1px solid var(--bordure);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.aide__erreurs li:last-child { border-bottom: none; }
.aide__erreurs li::before {
    counter-increment: erreur;
    content: counter(erreur);
    position: absolute;
    left: 0; top: 10px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--erreur-fond);
    color: var(--erreur);
    font-size: 0.75rem; font-weight: 700;
    line-height: 22px; text-align: center;
}

.aide__titre + .champ__aide { margin-bottom: 10px; }

/* ------------------------------------------------------------------ */
/* Pool et mes dossiers                                                */
/* ------------------------------------------------------------------ */

.carte--pool, .carte--dossier {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
}
.carte--dossier { grid-template-columns: 1fr auto; }

.pool__choix {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Cible pleine hauteur : cocher une case sur un telephone ne doit pas
       demander de viser. */
    min-width: 44px;
    min-height: 44px;
    margin: -12px 0 -12px -12px;
    cursor: pointer;
}
.pool__choix input { width: 22px; height: 22px; accent-color: var(--accent); }

.pool__corps { min-width: 0; color: inherit; text-decoration: none; }
.pool__corps .carte__entete { margin-bottom: 4px; }

.pool__prendre {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Le bouton flottant de selection est masque tant que rien n'est coche ;
   sans JavaScript il reste visible, et il fonctionne quand meme. */
.bouton--flottant[hidden] { display: none; }

.visuellement-cache {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Import et reglages                                                  */
/* ------------------------------------------------------------------ */

.etapes {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 0.75rem;
    color: var(--texte-doux);
}
.etapes > span {
    flex: 1;
    padding: 7px 8px;
    text-align: center;
    background: var(--surface-appuyee);
    border-radius: var(--rayon-petit);
}
.etapes__actif { background: var(--info-fond) !important; color: var(--accent); font-weight: 600; }

.rejets { margin-top: 10px; font-size: 0.875rem; }
.rejets li {
    padding: 6px 0;
    border-bottom: 1px solid var(--bordure);
    display: flex;
    gap: 10px;
    overflow-wrap: anywhere;
}
.rejets li:last-child { border-bottom: none; }
.rejets .mono { flex: 0 0 5rem; color: var(--texte-doux); }

.carte--reglage .carte__entete { align-items: center; }
.carte__icone { color: var(--accent); display: flex; flex: 0 0 auto; }
/* Carte d'avertissement : un passage outre volontaire doit se distinguer
   d'une carte ordinaire, sans virer au rouge d'erreur — rien n'est cassé,
   c'est une décision que l'agent prend. */
.carte--avertissement {
    border-color: color-mix(in srgb, var(--erreur) 40%, var(--bordure));
    background: var(--erreur-fond);
}

/* ------------------------------------------------------------------ */
/* Logo et couleurs extraites                                          */
/* ------------------------------------------------------------------ */

/* Damier discret : un logo sur fond transparent doit se voir COMME tel,
   sinon on ne comprend pas pourquoi les couleurs extraites sont grises. */
.logo-apercu {
    display: flex; align-items: center; justify-content: center;
    min-height: 96px; padding: 12px; margin-bottom: 12px;
    border: 1px solid var(--bordure); border-radius: var(--rayon);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #EEF1F4 25%, transparent 25%, transparent 75%, #EEF1F4 75%),
        linear-gradient(45deg, #EEF1F4 25%, transparent 25%, transparent 75%, #EEF1F4 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
.logo-apercu img { max-width: 100%; max-height: 140px; }

.pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }

.pastille {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px 5px 5px;
    border: 1px solid var(--bordure); border-radius: 999px;
    font-size: 0.8125rem;
}
.pastille__puce {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.logo-form { margin-top: 12px; }

.carte--inactive { opacity: 0.6; }
.carte--inactive .carte__icone { color: var(--texte-doux); }

.tri { display: flex; align-items: center; gap: 6px; }
.tri select { min-height: 36px; padding: 4px 8px; font-size: 0.875rem; }

/* Le fichier natif est laid mais universel : aucun script, et il ouvre
   directement l'application Fichiers sur un telephone. */
input[type="file"] { padding: 10px; background: var(--surface-appuyee); }

/* ------------------------------------------------------------------ */
/* Ecrans d'authentification                                           */
/* ------------------------------------------------------------------ */

.page-auth {
    /* Le bleu de la marque, reserve aux aplats : trop clair pour du texte. */
    background: var(--marque);
    min-height: 100dvh;
}

.auth {
    max-width: 26rem;
    margin: 0 auto;
    padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
    padding-top: calc(32px + env(safe-area-inset-top));
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    justify-content: center;
}

/* Ici seulement, le lockup complet : il a la place d'etre lisible. */
.auth__logo {
    width: 190px;
    height: 52px;
    margin: 0 auto 24px;
    background: url("../img/synaxess-logo-300.png") center / contain no-repeat;
}

.auth__carte {
    background: var(--surface);
    border-radius: 12px;
    padding: 24px 20px;
}

.auth__titre { font-size: 1.125rem; margin-bottom: 4px; }
.auth__sous { color: var(--texte-doux); font-size: 0.9375rem; margin-bottom: 20px; }
.auth__titre + form, .auth__sous + form, .auth__titre + .flash { margin-top: 20px; }

.auth__liens {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--bordure);
    text-align: center;
    font-size: 0.9375rem;
}

.auth__pied {
    margin-top: 24px;
    text-align: center;
    font-size: 0.8125rem;
    color: rgb(255 255 255 / 82%);
}

/* Regles de mot de passe, affichees avant la faute plutot qu'apres. */
.regles { margin: -6px 0 16px; padding-left: 18px; font-size: 0.8125rem; color: var(--texte-doux); }
.regles li { list-style: disc; margin-bottom: 2px; }

/* ------------------------------------------------------------------ */
/* Bureau — a partir d'ici seulement, et c'est une elaboration         */
/* ------------------------------------------------------------------ */

@media (min-width: 900px) {
    .appli { flex-direction: row; }

    .barre { display: none; }

    .laterale {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 232px;
        flex: 0 0 232px;
        padding: 16px 12px;
        background: var(--surface);
        border-right: 1px solid var(--bordure);
        position: sticky;
        top: 0;
        height: 100dvh;
    }

    .laterale__marque {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 10px 18px;
    }

    /* La MARQUE SEULE, pas le lockup complet.
       Sous 60 px de haut, le mot SYNAXESS du lockup s'ecrase en une tache
       et les hexagones se confondent. La marque seule reste lisible a
       petite taille ; le nom de l'application est ecrit a cote, en texte,
       dans la police de l'interface. Plus lisible et plus leger qu'une
       image qui essaie de tout dire.
       Le lockup complet ne sert que la ou il a de la place : l'ecran de
       connexion. */
    .laterale__logo {
        display: block;
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
        background: url("../img/synaxess-marque-512.png") center / contain no-repeat;
    }

    .laterale__nom {
        font-size: 1.0625rem;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .laterale__lien {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        padding: 0 10px;
        border-radius: var(--rayon-petit);
        color: var(--texte-doux);
        text-decoration: none;
        font-size: 0.9375rem;
        font-weight: 500;
        transition: background var(--transition), color var(--transition);
    }

    .laterale__lien svg { width: 18px; height: 18px; flex: 0 0 auto; }

    .laterale__compte {
        margin-left: auto;
        min-width: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: var(--erreur);
        color: #fff;
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }

    .laterale__lien:hover { background: var(--surface-appuyee); color: var(--texte); }
    .laterale__lien[aria-current="page"] { background: var(--info-fond); color: var(--accent); }

    .laterale__pied { margin-top: auto; padding: 10px; font-size: 0.8125rem; color: var(--texte-doux); }

    .colonne { flex: 1; min-width: 0; display: flex; flex-direction: column; }

    .entete { padding-left: 24px; padding-right: 24px; }
    .entete__marque { display: none; }

    .contenu {
        padding: 24px;
        padding-bottom: 48px;
        max-width: 60rem;
        margin: 0;
    }

    .bouton--flottant { bottom: 24px; right: 24px; }

    /* ------------------------------------------------------------------ */
    /* Le script devient une colonne collante a droite de la fiche.        */
    /* Le closer voit son texte ET les donnees du prospect en meme temps ; */
    /* sur mobile il bascule d'un onglet a l'autre, ce qui est le mieux    */
    /* qu'on puisse faire sur 375 px.                                      */
    /* ------------------------------------------------------------------ */
    .onglets {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 22rem;
        grid-template-areas: "barre script" "panneau script";
        column-gap: 24px;
        align-items: start;
    }

    .onglets__barre { grid-area: barre; }
    .onglets__barre label[for="onglet-script"] { display: none; }

    .onglets__panneau:not([data-onglet="script"]) { grid-area: panneau; }

    [data-onglet="script"] {
        grid-area: script;
        display: block !important;
        position: sticky;
        top: 76px;
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        padding: 14px;
        background: var(--fond);
        border: 1px solid var(--bordure);
        border-radius: var(--rayon);
    }

    /* L'onglet Script reste selectionnable sur mobile ; si on elargit la
       fenetre alors qu'il est actif, la fiche reprend sa place a gauche
       plutot que de laisser une colonne vide. */
    #onglet-script:checked ~ [data-onglet="fiche"] { display: block; }

    .prix__bouton { left: auto; right: 24px; bottom: 96px; }
    .prix__feuille {
        left: auto; right: 24px; bottom: 96px;
        width: 26rem; max-width: calc(100vw - 48px);
        border-radius: 12px;
        border: 1px solid var(--bordure);
    }

    .compteurs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

    /* Les deux segments cote a cote : la comparaison est le sujet. */
    .comparaison { grid-template-columns: 1fr 1fr; }

    .actions { flex-direction: row; }
    .bouton--large { width: auto; }
}

/* ------------------------------------------------------------------ */
/* Messagerie : boîte vocale et textos                                 */
/* ------------------------------------------------------------------ */

.vocal { margin-bottom: 12px; }
.vocal--a-traiter { border-left: 3px solid var(--accent); }

.vocal__lecteur { width: 100%; margin: 10px 0; height: 40px; }

.vocal__transcription {
    margin: 10px 0;
    padding: 10px 12px;
    background: var(--surface-appuyee);
    border-radius: var(--rayon);
    font-size: 0.9375rem;
}

/* Liste des conversations                                             */

.conversation { display: block; margin-bottom: 10px; text-decoration: none; }
.conversation--non-lue { border-left: 3px solid var(--accent); }
.conversation--non-lue .carte__titre { font-weight: 600; }

.conversation__apercu {
    margin: 4px 0 6px;
    font-size: 0.875rem;
    color: var(--texte-doux);
    overflow-wrap: anywhere;
}

.pastille-compte {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px;
    background: var(--accent); color: #fff;
    border-radius: 999px;
    font-size: 0.75rem; font-weight: 600;
}

/* Le fil                                                              */

.fil {
    display: flex; flex-direction: column; gap: 8px;
    margin: 14px 0 18px;
}

.fil__jour {
    align-self: center;
    margin: 10px 0 4px;
    padding: 3px 12px;
    background: var(--surface-appuyee);
    border-radius: 999px;
    font-size: 0.75rem; color: var(--texte-doux);
}

/* Les bulles reprennent la convention universelle : ce qu'on envoie à
   droite, ce qu'on reçoit à gauche. Un Closer n'a rien à apprendre. */
.bulle {
    max-width: 82%;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.bulle--eux {
    align-self: flex-start;
    background: var(--surface-appuyee);
    border-bottom-left-radius: 4px;
}

.bulle--nous {
    align-self: flex-end;
    background: color-mix(in srgb, var(--accent) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-bottom-right-radius: 4px;
}

.bulle__corps { margin: 0; white-space: pre-wrap; }

.bulle__image {
    display: block; max-width: 100%; height: auto;
    margin-top: 6px; border-radius: 8px;
}

.bulle__pied {
    margin-top: 4px;
    font-size: 0.6875rem;
    color: var(--texte-doux);
}

.bulle__echec { color: var(--erreur); font-weight: 600; }

.bulle__erreur {
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--erreur);
}

/* Le champ d'écriture reste atteignable au pouce, sans occuper l'écran. */
.ecrire { margin-bottom: 18px; }
.ecrire .champ__saisie { resize: vertical; }

/* ------------------------------------------------------------------ */
/* Photos fournies par le closer                                       */
/* ------------------------------------------------------------------ */

/* Grille fluide : trois par ligne sur un telephone, davantage au large,
   sans requete media a maintenir. */
.photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.photos__item {
    margin: 0;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    overflow: hidden;
    background: var(--surface);
}

/* Une photo non publiable se voit AVANT qu'on la choisisse pour le site :
   la bordure rouge est le seul indice qui survit a un coup d'oeil rapide. */
.photos__item--bloquee { border-color: var(--erreur); }

.photos__vignette {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.photos__item figcaption {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
}

.photos__forme { display: flex; gap: 4px; }
.photos__forme .champ__saisie { flex: 1 1 auto; min-width: 0; }

/* Cibles reduites, et assumees : ces boutons vivent sous une vignette de
   96 px et ne sont pas des actions d'appel. Les 48 px du pouce restent la
   regle partout ou l'erreur coute quelque chose. */
.bouton--mince {
    min-height: 32px;
    padding: 0 8px;
    font-size: 0.8125rem;
}

.champ__saisie--mince {
    min-height: 32px;
    padding: 2px 6px;
    /* 16 px reste le plancher : en dessous, iOS zoome sur le champ et
       sort l'agent de sa page. */
    font-size: 16px;
}