/* ================================
   app.css — Module de Traitement des Mails assisté par IA (global)
   ================================ */

/* Variables globales (en haut du CSS) */
:root {
  /* Espace entre le bandeau et le contenu,
     responsive : ~12px sur mobile → ~24px sur desktop */
  --banner-gap: clamp(12px, 2.5vw, 24px);
}

/* Layout colonne : crée l'espace entre header et contenu */
body.layout-col {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  gap: var(--banner-gap); /* ← l'espacement demandé */
}

/* Petit filet discret sous le bandeau (optionnel) */
.site-header {
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Évite un double espace si ton premier bloc a déjà une marge haute */
.site-main > :first-child {
  margin-top: 0;
}


/* ---------- Base layout & fond ---------- */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #e5ddd5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23d6cbb4' fill-opacity='0.2' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

/* ---------- Conteneur principal (plus large, sans scroll interne) ---------- */
/* Utilisé par <main id="content" class="form-container"> dans base.html */
.form-container {
    width: min(95vw, 1400px);
    max-width: 100%;
    margin: 0 auto 20px;

    padding: 30px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);

    /* suppression du “mini-viewport” interne */
    max-height: none;
    overflow-y: visible;
}

/* ---------- Titres de page ---------- */
.title-container {
    text-align: center;
    margin-bottom: 30px;
}
.main-title {
    font-size: 22px;
    color: #075E54;
    margin-bottom: 15px;
}
.description-text {
    font-size: 13px;
    font-style: italic;
    color: #555;
    margin: 0 auto 25px;
    max-width: 700px;
    line-height: 1.6;
    text-align: center;
    padding: 0 15px;
    opacity: 0.9;
}

/* ---------- Formulaires : plus de bridage global ---------- */
form {
    max-width: none;  /* (anciennement: 600px) */
    width: 100%;
    margin: 0 auto;
}
form .form-group { margin-bottom: 1rem; }
form label { font-weight: 500; }

/* Harmonisation des champs (complète/complémente Bootstrap) */
form input,
form select,
form textarea {
    width: 100%;
    display: block;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.4;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* Cases à cocher + radios */
.form-check-input {
    margin-top: 0.3rem;
    margin-right: 0.4rem;
}

/* Boutons “verts” cohérents avec l’identité */
.btn-success,
.btn-primary {
    background-color: #075E54;
    border-color: #075E54;
}
.btn-success:hover,
.btn-primary:hover {
    background-color: #128C7E;
    border-color: #128C7E;
}

/* ---------- Footer affiné (base.html -> <footer class="site-footer …">) ---------- */
.site-footer {
    padding-top: .35rem;
    padding-bottom: .35rem;
}
@media (min-width: 992px) {
    .site-footer { padding-top: .25rem; padding-bottom: .25rem; }
}

/* ---------- Header compact du site (base.html) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.75);
  backdrop-filter: saturate(140%) blur(6px);
}
.site-header .header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* gauche (vide) | centre (logo) | droite (icônes) */
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}
.site-header .logo-link { display: inline-block; }
.site-header .site-logo { height: 56px; width: auto; display: block; }
.site-header .actions {
  display: inline-flex;
  gap: 10px;
  justify-self: end;
}
.icon-btn, .icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.icon-btn:hover, .icon-link:hover { transform: translateY(-1px); }
.icon-btn i, .icon-link i { font-size: 16px; color: #075E54; }

/* Accessibilité : texte masqué visuellement mais lisible par lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Sur écrans étroits : logo + icônes légèrement réduits */
@media (max-width: 768px) {
  .site-header .site-logo { height: 46px; }
  .icon-btn, .icon-link { width: 34px; height: 34px; border-radius: 8px; }
}

/* ---------- Zone d’actions (boutons) réutilisable ---------- */
.button-container {
    display: flex;
    justify-content: center;   /* centre horizontalement l’ensemble */
    align-items: center;       /* aligne verticalement les enfants */
    gap: 20px;
    margin-bottom: 15px;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;

    /* Desktop: reste sur une seule rangée */
    flex-wrap: nowrap;
}
/* Les enfants ne s'étirent pas */
.button-container > * {
    flex: 0 0 auto;
}
/* IMPORTANT : neutraliser la largeur 100% du form quand il est dans la barre d’actions */
.button-container form {
    display: flex;
    align-items: center;
    margin: 0;
    width: auto;
}
/* Donne la même taille visuelle au bouton submit que .action-button */
.button-container .btn-success {
    height: 50px;
    width: 200px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    font-weight: 500;
    font-size: 15px;
}
/* Bouton type lien */
.action-button {
    background-color: #075E54;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 200px;
    height: 50px;
    text-align: center;
}
.action-button:hover {
    background-color: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.action-button i { margin-right: 8px; }

/* Variante “lien upload” claire */
.upload-button {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 50px;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
}
.upload-button:hover {
    background-color: #e0e0e0;
    color: #333;
}

/* ---------- Messages flash ---------- */
.messages { list-style: none; padding-left: 0; margin-bottom: 0; }
.messages li { margin: .25rem 0; padding: .5rem .75rem; border-radius: .25rem; }
.messages .success { background: #d4edda; }
.messages .warning { background: #fff3cd; }
.messages .error, .messages .danger { background: #f8d7da; }

/* ---------- Responsives ---------- */
@media (max-width: 992px) {
    .form-container { width: 94vw; }
}
@media (max-width: 576px) {
    .logo-container { max-width: 260px; }

    /* En mobile : autoriser le retour à la ligne des actions,
       tout en gardant l’alignement centré */
    .button-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Largeur pleine pour des boutons confortables */
    .action-button,
    .upload-button,
    .button-container .btn-success {
        width: 100%;
        max-width: 320px;
        height: 48px;
    }

    /* Le <form> reste compact */
    .button-container form {
        width: 100%;
        justify-content: center;
    }
}

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
}

.image-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 6px;
}

.image-tools a,
.image-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #2e4d44;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.image-tools a:hover,
.image-tools button:hover {
  background: #fff;
}

.image-tools a:active,
.image-tools button:active {
  transform: scale(0.92);
}

.image-tools a {
  text-decoration: none;
}

.ai-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 10px 14px;
  background: #fafafa;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  max-width: 360px;
  margin-left: auto; /* aligné à droite */
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.file-icon {
  font-size: 28px;
}

.file-info strong {
  font-size: 14px;
  font-weight: 600;
}

.download-link {
  margin-left: auto;
  font-size: 14px;
  text-decoration: none;
  color: #0d6efd;
}

.download-link:hover {
  text-decoration: underline;
}