/*
 * ATTIMO SaaS - Charte Graphique
 * Version: 1.0
 * Palette: Couleurs Pastel
 * Police: Nunito
 */

/* ================================
   IMPORTATION POLICE NUNITO
   Servie par Attimo (public/fonts/nunito), plus par Google Fonts.
   ================================ */
@import url('../fonts/nunito/nunito.css');

/* ================================
   VARIABLES CSS (COULEURS PASTEL)
   ================================ */
:root {
    /* Couleurs principales */
    --color-primary: #6B9ECE;
    --color-secondary: #9B8EC5;
    --color-accent: #E8998D;
    
    /* Couleurs de statut */
    --color-success: #7EC8A3;
    --color-warning: #F0DBA5;
    --color-danger: #E57373;
    
    /* Couleurs de fond */
    --color-bg-light: #F8F9FA;
    --color-bg-sidebar: #EEF1F5;
    --color-white: #FFFFFF;
    
    /* Couleurs de texte */
    --color-text: #4A5568;
    --color-text-light: #718096;
    --color-text-placeholder: #A0AEC0;
    
    /* Couleurs de bordure */
    --color-border: #E2E8F0;
    --color-border-light: #F0F4F8;
    
    /* Coins arrondis */
    /* §7.4 — les mêmes valeurs que le gabarit tenant (registre n° 160). Elles
       différaient (6/8/12) : même nom, deux tailles, selon la page. */
    --radius-sm: 8px;   /* boutons, champs */
    --radius-md: 12px;  /* cartes */
    --radius-lg: 16px;  /* modales */
    --radius-full: 50%;
    --radius-pill: 20px;
    
    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* Sidebar */
    --sidebar-width: 260px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
}

/* ================================
   RESET & BASE
   ================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-bg-light);
    line-height: 1.5;
}

/* ================================
   TYPOGRAPHIE
   ================================ */
h1 {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 16px;
}

h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 14px;
}

h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
}

p {
    color: var(--color-text-light);
    margin-bottom: 12px;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: #5A8BBB;
}

/* ================================
   LAYOUT PRINCIPAL
   ================================ */
.app-container {
    display: flex;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    /* Sans lui, un élément flexible refuse d'être plus étroit que son
       contenu : un tableau long pousse la page hors de l'écran (n° 162). */
    min-width: 0;
    margin-left: var(--sidebar-width);
    padding: 24px;
    background-color: var(--color-bg-light);
}

/* ================================
   EN-TÊTE DE PAGE — CLAUDE.md §7.5
   ================================
   Le groupe d'actions d'un en-tête de page : les boutons à droite du titre,
   le Retour en premier.

   Cette classe N'EXISTAIT NULLE PART — ni ici, ni dans le gabarit tenant.
   Le §7.5 l'impose depuis toujours, et DIX écrans avaient fini par se
   l'écrire chacun dans leur coin. Deux d'entre eux (Conservation légale)
   portaient même un commentaire résigné : « une ceinture, pas un
   diagnostic ». Registre n° 79, 20/09/2026.

   ⚠️ `margin-left: auto` est ici la DÉFINITION de la classe, pas une rustine :
   ce groupe se colle à droite. Il tient avec deux enfants dans l'en-tête
   comme avec trois, là où le `justify-content: space-between` du
   `.page-header` ne tient que pour exactement deux. C'est précisément ce qui
   manquait aux écrans qui avaient dû se le réécrire.
   ================================ */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
    /* Quatre ecrans (GiftCard x3, Transfer) l'avaient ajoute chacun de leur
       cote : sans lui, un titre de page long ECRASE les boutons, qui se
       compriment au lieu de garder leur taille. C'est une vraie regle, apprise
       en lisant leurs copies — elle appartient donc au socle, pas a eux. */
    flex-shrink: 0;
    /* ...mais jamais plus large que la page (n° 162). Passé sous le titre
       faute de place, le groupe gardait la largeur d'une seule ligne de
       boutons et poussait la page hors d'un petit écran ; borné, ce sont
       ses boutons qui passent à la ligne. */
    max-width: 100%;
}

/* ================================
   SIDEBAR (MENU LATÉRAL)
   ================================ */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--color-bg-sidebar);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.sidebar-logo {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-logo img {
    max-width: 140px;
    height: auto;
}

.sidebar-logo h1 {
    font-size: 24px;
    color: var(--color-primary);
    margin: 0;
}

.sidebar-menu {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
}

.sidebar-section {
    margin-bottom: 8px;
}

.sidebar-section-title {
    padding: 8px 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-light);
    letter-spacing: 0.5px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--color-text);
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
    cursor: pointer;
}

.sidebar-item:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.sidebar-item.active {
    background-color: var(--color-white);
    border-left-color: var(--color-primary);
}

.sidebar-item.active .sidebar-icon {
    color: var(--color-primary);
}

.sidebar-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    color: var(--color-text-light);
}

.sidebar-label {
    font-size: 14px;
    font-weight: 500;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
}

/* ================================
   CARDS (CARTES)
   ================================ */
.card {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 20px;
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Registre n° 174 : le titre et les boutons d'un en-tete de carte
       passent a la ligne quand la place manque (telephone), au lieu de
       pousser la carte hors de l'ecran. `row-gap` n'agit qu'entre deux
       lignes : sur ordinateur, une seule ligne, rien ne bouge. */
    flex-wrap: wrap;
    row-gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.card-body {
    /* Contenu de la carte */
}

.card-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Card avec icône (style PhotoClass Pro) */
.card-stat {
    text-align: center;
    padding: 24px;
}

.card-stat-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    padding: 12px;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-full);
    color: var(--color-primary);
}

.card-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.card-stat-label {
    font-size: 14px;
    color: var(--color-text-light);
}

/* ================================
   BOUTONS
   ================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    gap: 8px;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* Bouton primaire */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

/* Bouton secondaire */
.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

/* Bouton succès */
.btn-success {
    background-color: var(--color-success);
    color: white;
}

/* Bouton danger */
.btn-danger {
    background-color: var(--color-danger);
    color: white;
}

/* Bouton ghost (discret) */
.btn-ghost {
    background-color: transparent;
    color: var(--color-text);
}

.btn-ghost:hover {
    background-color: var(--color-bg-light);
}

/* Tailles de boutons */
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

/* Bouton bloqué — registre n° 421, arbitrage de Frédéric du 28/09/2026.
   Sans cette règle, un bouton désactivé restait de sa couleur pleine : il
   semblait prêt, et le clic ne faisait rien (« Importer le fichier » des
   photos de fratrie, « Ajouter » des photos de classe, la génération des
   aperçus en cours). Grisé, curseur « interdit », sans effet au survol —
   sur tous les écrans qui chargent le socle. */
.btn:disabled,
.btn[disabled],
.btn:disabled:hover,
.btn[disabled]:hover {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    filter: grayscale(0.4);
}

/* ================================
   INPUTS (CHAMPS DE FORMULAIRE)
   ================================ */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(107, 158, 206, 0.15);
}

.form-input::placeholder {
    color: var(--color-text-placeholder);
}

/* Textarea */
.form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Champ de date à l'habillage Attimo (lot de nuit du 23/10) : le libellé
   (« Du », « Au »…) dans le champ, l'icône calendrier aux couleurs d'Attimo,
   la même hauteur et le même contour que les autres champs.
   <label class="attimo-date"><span class="attimo-date-label">…</span><input type="date" …></label> */
.attimo-date {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    padding: 0 12px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: text;
    transition: var(--transition-fast);
}
.attimo-date:hover { border-color: var(--color-primary); }
.attimo-date:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(107, 158, 206, 0.15);
}
.attimo-date-label {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-light);
    white-space: nowrap;
}
.attimo-date input[type="date"] {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text);
    box-shadow: none;
    outline: none;
}
.attimo-date input[type="date"]::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B9ECE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

/* Select */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23718096' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Message d'erreur */
.form-error {
    font-size: 12px;
    color: var(--color-danger);
    margin-top: 4px;
}

/* Message d'aide */
.form-help {
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 4px;
}

/* ================================
   TOGGLE (INTERRUPTEUR), CARTES DE CHOIX, CASE DESSINÉE
   Dans public/css/attimo-choices.css (lot Laboratoire scolaire du 21/10,
   point 3) : une seule feuille pour le back-office ET les pages des clients,
   chargée juste après celle-ci par chaque gabarit.
   ================================ */

/* ================================
   TABLES
   ================================ */
.table-container {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    background-color: var(--color-bg-light);
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-light);
    letter-spacing: 0.5px;
}

.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.table tr:last-child td {
    border-bottom: none;
}

.table tr:hover td {
    background-color: var(--color-border-light);
}

/* ================================
   BADGES
   ================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-pill);
}

/* Un badge masqué (attribut hidden) ne s'affiche pas : `display: inline-flex`
   l'emportait sur l'attribut et laissait une pastille vide (17/10/2026). */
.badge[hidden] {
    display: none;
}

.badge-primary {
    background-color: rgba(107, 158, 206, 0.15);
    color: var(--color-primary);
}

.badge-success {
    background-color: rgba(126, 200, 163, 0.15);
    color: #5BA07D;
}

.badge-warning {
    background-color: rgba(240, 219, 165, 0.3);
    color: #B8960C;
}

.badge-danger {
    background-color: rgba(229, 115, 115, 0.15);
    color: #C62828;
}

.badge-secondary {
    background-color: var(--color-bg-light);
    color: var(--color-text-light);
}

/* ================================
   ALERTES
   ================================ */
.alert {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.alert-success {
    background-color: rgba(126, 200, 163, 0.15);
    border: 1px solid var(--color-success);
    color: #2D6A4F;
}

.alert-warning {
    background-color: rgba(240, 219, 165, 0.2);
    border: 1px solid var(--color-warning);
    color: #8B6914;
}

.alert-danger {
    background-color: rgba(229, 115, 115, 0.15);
    border: 1px solid var(--color-danger);
    color: #C62828;
}

.alert-info {
    background-color: rgba(107, 158, 206, 0.15);
    border: 1px solid var(--color-primary);
    color: #1A5276;
}

/* ================================
   MODAL (FENÊTRE MODALE)
   ================================ */
/*
 * Registre n° 223 — une fenêtre fermée se cache par `display`, JAMAIS par
 * `visibility` ou `opacity`.
 *
 * Depuis le 20/09 (n° 79 étape 1), cette feuille est chargée par tout le
 * back-office. Elle cachait la fenêtre par `opacity: 0; visibility: hidden`
 * tant qu'elle n'avait pas la classe `active` : les écrans qui ouvrent leur
 * fenêtre par `style.display = 'flex'` l'ouvraient INVISIBLE (seize fenêtres,
 * dont le crayon des grilles tarifaires), sans la moindre erreur. Un
 * `style.display` posé par un écran l'emporte sur `display: none` : les deux
 * façons d'ouvrir marchent. Gardé par `BackOfficeModalsTest`.
 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.active {
    display: flex;
}

/*
 * Une fenêtre haute défile au lieu d'être coupée : `overflow: hidden` rendait
 * le bas d'un long formulaire (le bouton Enregistrer) inatteignable.
 */
.modal {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-fast);
}

.modal-close:hover {
    background-color: var(--color-bg-light);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ================================
   UTILITAIRES
   ================================ */

/* Marges */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }

/* Flexbox */
.flex { display: flex; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }

/* Texte */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-muted { color: var(--color-text-light); }

/* Grille de cards */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 20px;
}

/* Registre n° 178 : une case à cocher, un bouton radio, un choix de couleur
   ont une taille fixe — dans une rangée trop étroite, ils s'écrasaient
   (cases 18 px réduites à 13, pastille de couleur réduite à une bande). */
input[type="checkbox"],
input[type="radio"],
input[type="color"] {
    flex-shrink: 0;
}