/**
 * Tourn-avis - Feuille de style de l'application (espace client, comptes,
 * administration). CSS écrit à la main, sans framework.
 *
 * Palette « Atelier » : papier chaud, encre profonde, vert d'atelier pour les
 * actions, ocre pour les accents. Pensée pour un commerçant qui consulte son
 * espace entre deux clients, souvent sur téléphone.
 */

/* ===================================================== Jetons de conception */

/* La palette, les polices et la largeur du site vivent dans commun.css, qui
   est chargée avant celle-ci : les définir ici aussi les laisserait diverger
   au premier changement de couleur. */
:root {
    --rouge: #96202f;
    --rouge-voile: #fbe8e9;
    --succes: #14624a;
    --succes-voile: #dff0e7;

    --rayon: 0.75rem;
    --rayon-petit: 0.4rem;
    --ombre: 0 1px 2px rgb(27 39 51 / 0.06), 0 6px 20px rgb(27 39 51 / 0.06);
}

/* ================================================================== Base */

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

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
    line-height: 1.25;
    margin: 0 0 0.75rem;
    text-wrap: balance;
}

h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h2 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--marque);
    text-underline-offset: 0.2em;
}

a:hover { color: var(--accent-encre); }

img { max-width: 100%; height: auto; }

/* =============================================================== Structure */

/* La coque applicative : flanc de navigation à gauche, barre en haut,
   contenu au centre. Elle ne s'applique qu'une fois le commerçant connecté ;
   les pages de compte et les pages légales gardent le chrome public du site. */

.corps-app { background: var(--papier); }

.app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
}

@media (min-width: 62rem) {
    .app { grid-template-columns: 16rem minmax(0, 1fr); }
}

/* --- Flanc de navigation ------------------------------------------------ */

.flanc {
    background: var(--craie);
    border-right: 1px solid var(--bordure);
    padding: 1.25rem 0.9rem;
}

.flanc .marque { margin-bottom: 1.5rem; }

.flanc__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.flanc__nav li { margin-bottom: 0.2rem; }

.flanc__nav a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.55rem;
    color: var(--encre-douce);
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 500;
    white-space: nowrap;
}

.flanc__nav a svg { width: 1.05rem; height: 1.05rem; flex: none; }

.flanc__nav a:hover {
    background: var(--marque-voile);
    color: var(--encre);
}

/* La rubrique courante porte un aplat plein, et `aria-current` le dit : la
   couleur n'est jamais le seul signal. */
.flanc__nav a[aria-current="page"] {
    background: var(--marque);
    color: #fff;
    font-weight: 600;
}

/* Sous 62 rem, le flanc redevient une barre horizontale qui défile. Un tiroir
   escamotable demanderait du JavaScript pour un gain nul sur neuf entrées. */
@media (max-width: 61.99rem) {
    .flanc {
        border-right: 0;
        border-bottom: 1px solid var(--bordure);
        padding: 0.9rem 1rem 0;
    }

    .flanc .marque { margin-bottom: 0.75rem; }

    /* `position: relative` retient les textes hors écran des lecteurs
       d'écran : sans lui ils se calent sur le bloc conteneur initial et
       étirent le document en largeur. */
    .flanc__nav {
        position: relative;
        overflow-x: auto;
        scrollbar-width: thin;
        margin-inline: -1rem;
        padding-inline: 1rem;
    }

    .flanc__nav ul { display: flex; gap: 0.25rem; min-width: max-content; }
    .flanc__nav li { margin-bottom: 0; }
    .flanc__nav a { border-radius: 0.55rem 0.55rem 0 0; }
}

/* --- Barre du haut ------------------------------------------------------ */

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

.barre-app {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    background: var(--craie);
    border-bottom: 1px solid var(--bordure);
    padding: 0.75rem clamp(1rem, 0.5rem + 2vw, 2rem);
}

.recherche {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 14rem;
    max-width: 26rem;
}

.recherche__icone {
    position: absolute;
    left: 0.85rem;
    display: flex;
    color: var(--encre-douce);
    pointer-events: none;
}

.recherche__icone svg { width: 1rem; height: 1rem; }

/* `input[type="search"]` du bloc formulaires, plus bas, a la même
   spécificité et l'emportait par l'ordre : le champ retombait sur le
   remplissage générique et son texte passait sous la loupe. */
.recherche input[type="search"] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 1rem 0.5rem 2.8rem;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    background: var(--papier);
    font: inherit;
    font-size: 0.9rem;
    color: var(--encre);
}

.recherche input[type="search"]::placeholder { color: var(--encre-douce); }

.barre-app__compte {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.barre-app__nom {
    font-weight: 600;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barre-app__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background: var(--marque-voile);
    color: var(--marque);
    flex: none;
}

.barre-app__avatar svg { width: 1.1rem; height: 1.1rem; }

.barre-app__sortie {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--encre-douce);
    font-size: 0.875rem;
}

/* --- Contenu et pied ---------------------------------------------------- */

.app__contenu {
    flex: 1;
    padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem) clamp(1rem, 0.5rem + 2vw, 2rem);
    min-width: 0;
}

.pied-app {
    border-top: 1px solid var(--bordure);
    padding: 1.25rem clamp(1rem, 0.5rem + 2vw, 2rem);
    font-size: 0.825rem;
    color: var(--encre-douce);
}

.pied-app ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
}

.pied-app li a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.pied-app p { margin: 0; }

/* Les pages qui gardent le chrome public (compte, mentions légales). */
body:not(.corps-app) main { padding-block: 2rem 4rem; }

/* =================================================================== Cartes */

.carte {
    background: var(--craie);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.5rem;
    box-shadow: var(--ombre);
}

.carte + .carte { margin-top: 1.5rem; }

.carte__titre {
    margin-top: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bordure);
}

.grille {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.deux-colonnes {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
    .deux-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; }
    .deux-colonnes--large { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}

/* ================================================================ Formulaires */

.champ { margin-bottom: 1.25rem; }

.champ > label,
.champ__intitule {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
}

/* Aide contextuelle : le commerçant ne doit jamais avoir à écrire un email
   pour comprendre un champ. */
.aide {
    display: block;
    font-size: 0.85rem;
    color: var(--encre-douce);
    margin-bottom: 0.4rem;
    font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
    width: 100%;
    font: inherit;
    color: var(--encre);
    background: var(--craie);
    padding: 0.65rem 0.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
}

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

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--rouge);
    background: var(--rouge-voile);
}

input[type="color"] {
    width: 100%;
    height: 2.75rem;
    padding: 0.2rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    background: var(--craie);
    cursor: pointer;
}

input[type="file"] {
    width: 100%;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.55rem;
    border: 1px dashed var(--bordure-forte);
    border-radius: var(--rayon-petit);
    background: var(--craie);
}

textarea { min-height: 6rem; resize: vertical; }

.champ-case {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.95rem;
}

.champ-case input[type="checkbox"],
.champ-case input[type="radio"] {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.1rem 0 0;
    accent-color: var(--marque);
    flex: none;
}

.erreur-champ {
    display: block;
    color: var(--rouge);
    font-size: 0.85rem;
    margin-top: 0.3rem;
    font-weight: 500;
}

fieldset {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    padding: 1rem;
    margin: 0 0 1.25rem;
}

legend { font-weight: 600; padding-inline: 0.4rem; }

/* =================================================================== Boutons */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    padding: 0.75rem 1.4rem;
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
    cursor: pointer;
    background: var(--marque);
    color: #fff;
    transition: background-color 0.15s ease;
}

.bouton:hover { background: var(--marque-fonce); color: #fff; }

.bouton:disabled,
.bouton[aria-disabled="true"] {
    background: var(--bordure-forte);
    color: #4a4a4a;
    cursor: not-allowed;
}

.bouton--secondaire {
    background: var(--craie);
    color: var(--marque);
    border-color: var(--bordure-forte);
}

.bouton--secondaire:hover { background: var(--marque-voile); color: var(--marque-fonce); }

.bouton--danger { background: var(--rouge); }
.bouton--danger:hover { background: #7a1a26; }

.bouton--discret {
    background: none;
    color: var(--encre-douce);
    border-color: transparent;
    padding-inline: 0.5rem;
    font-weight: 500;
}

.bouton--discret:hover { background: var(--marque-voile); color: var(--marque); }

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

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.5rem;
}

/* ==================================================== Messages et étiquettes */

.flash {
    padding: 0.9rem 1.1rem;
    border-radius: var(--rayon-petit);
    border-left: 4px solid;
    margin-bottom: 1.25rem;
    font-weight: 500;
}

.flash--succes { background: var(--succes-voile); border-color: var(--succes); color: #0d3f2f; }
.flash--erreur { background: var(--rouge-voile); border-color: var(--rouge); color: #6d1622; }
.flash--info   { background: var(--marque-voile); border-color: var(--marque); color: #13293c; }

.encart {
    background: var(--accent-voile);
    border-left: 4px solid var(--accent-encre);
    border-radius: var(--rayon-petit);
    padding: 1rem 1.1rem;
    font-size: 0.925rem;
    margin-bottom: 1.5rem;
}

.etiquette {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.etiquette--actif   { background: var(--succes-voile); color: #0d3f2f; }
.etiquette--attente { background: var(--accent-voile); color: #6d3c07; }
.etiquette--inactif { background: var(--rouge-voile); color: #6d1622; }
.etiquette--neutre  { background: var(--marque-voile); color: #13293c; }

/* ==================================================================== Tables */

/*
 * Les conteneurs qui défilent horizontalement doivent être positionnés.
 *
 * Un descendant en `position: absolute` - typiquement le texte réservé aux
 * lecteurs d'écran - se cale sinon sur le bloc conteneur initial, échappe au
 * découpage du conteneur, et **élargit toute la page** : on obtenait un
 * défilement horizontal de 782 px sur un écran de 400 px. `position: relative`
 * rend le conteneur lui-même bloc conteneur, et le découpage s'applique.
 */
.table-defilante {
    overflow-x: auto;
    position: relative;
}

.onglets { position: relative; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

caption {
    text-align: left;
    color: var(--encre-douce);
    font-size: 0.9rem;
    padding-bottom: 0.6rem;
}

th, td {
    text-align: left;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}

th {
    font-weight: 600;
    color: var(--encre-douce);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

tbody tr:hover { background: var(--papier); }

.numerique { text-align: right; font-variant-numeric: tabular-nums; }

/* ================================================================= Chiffres */

.chiffre {
    background: var(--craie);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.25rem;
}

.chiffre__valeur {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--marque);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.chiffre__libelle {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--encre-douce);
}

/* Barre de proportion, utilisée par les statistiques et les poids. */
.jauge {
    display: block;
    height: 0.5rem;
    background: var(--marque-voile);
    border-radius: 999px;
    overflow: hidden;
}

.jauge__part {
    display: block;
    height: 100%;
    background: var(--marque);
    border-radius: inherit;
}

/* ============================================================ Pages d'accueil
   des comptes : formulaires centrés hors espace client. */

.page-etroite {
    width: min(100% - 2rem, 28rem);
    margin: 3rem auto;
}

.page-etroite .carte { padding: 2rem; }

.page-etroite__pied {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.925rem;
    color: var(--encre-douce);
}

/* ============================================================== Impression */

/* commun.css masque déjà l'en-tête, les onglets, le pied et le lien
   d'évitement, et coupe les animations : il ne reste ici que ce qui est
   propre à l'application. */
@media print {
    .actions { display: none !important; }
}