/* ============================================================
   CMC AFRIQUE — Administration
   Charte stricte :
   marine #004E84 · orange #F07E30 · fond #FFFAF5 · crème #FFF1E6
   encre #1B2733 · blanc #FFFFFF (barre du haut uniquement)
   Angles ≤ 2px · filets 1px · aucune ombre · aucun dégradé
   ============================================================ */

:root{
  --marine:#004E84;
  --orange:#F07E30;
  --fond:#FFFAF5;
  --creme:#FFF1E6;
  --encre:#1B2733;
  --blanc:#FFFFFF;
  --filet:rgba(0,78,132,.25);
  --filet-marine:rgba(207,224,234,.30);
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.15;
  margin:0;
}
a{color:var(--marine)}
[hidden]{display:none !important}

.saut{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--marine);color:var(--blanc);
  padding:10px 16px;text-decoration:none;font-size:14px;
}
.saut:focus{left:8px;top:8px}

.enveloppe{
  width:100%;
  max-width:1140px;
  margin-inline:auto;
  padding-inline:20px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--marine);
  outline-offset:2px;
}

/* ===================== En-tête ===================== */
.entete{
  background:var(--blanc);
  border-bottom:1px solid var(--marine);
  position:sticky;top:0;z-index:50;
}
.entete-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:64px;
  padding-block:10px;
}
.logo{
  font-family:var(--serif);
  font-weight:700;
  font-size:16px;
  color:var(--marine);
}
.nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:20px;
  align-items:center;
}
.nav a{
  color:var(--marine);
  text-decoration:none;
  font-size:15px;
  font-weight:500;
}
.nav a:hover{text-decoration:underline;text-underline-offset:3px}
.form-nav{margin:0}
.btn-lien{
  background:none;border:0;padding:0;
  color:var(--marine);font:inherit;font-weight:600;font-size:14px;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.btn-lien:hover{text-decoration-thickness:2px}

/* ===================== Page ===================== */
.page{padding-block:36px 64px}
.page h1{
  color:var(--marine);
  font-size:clamp(1.6rem,4.4vw,2.2rem);
  margin:0 0 24px;
}
.page h2{
  color:var(--marine);
  font-size:1.2rem;
  margin:0 0 14px;
  padding-top:16px;
  border-top:1px solid var(--filet);
}
.bloc{margin:0 0 28px}
.bloc-sous-titre{
  font-family:var(--serif);
  color:var(--marine);
  font-size:1.02rem;
  margin:20px 0 10px;
}

/* ===================== Messages ===================== */
.message{
  padding:12px 16px;
  margin:0 0 18px;
  font-size:15px;
  color:var(--encre);
  border-radius:2px;
}
.message-erreur{
  background:var(--creme);
  border-left:4px solid var(--orange);
}
.message-succes{
  background:var(--creme);
  border-left:4px solid var(--marine);
}
.alerte{
  background:var(--creme);
  border-left:4px solid var(--orange);
  padding:12px 16px;
  margin:0 0 20px;
  font-size:15px;
}
.alerte a{color:var(--encre);text-decoration:underline}

.synthese{
  margin:0 0 20px;
  font-size:15px;
  padding-block:12px;
  border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet);
}
.synthese a{
  color:var(--marine);
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:500;
}
.synthese span{color:var(--encre);opacity:.7}
.vide{
  padding:20px;
  background:var(--creme);
  border-radius:2px;
  font-size:15px;
}

/* ===================== Boutons ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  border-radius:2px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.btn-principal{
  background:var(--orange);
  color:var(--encre);
  border-color:var(--orange);
}
.btn-principal:hover,
.btn-principal:focus-visible{
  background:var(--marine);
  color:var(--blanc);
  border-color:var(--marine);
}
.btn-secondaire{
  background:transparent;
  color:var(--marine);
  border-color:var(--marine);
}
.btn-secondaire:hover,
.btn-secondaire:focus-visible{
  background:var(--marine);
  color:var(--blanc);
}

/* ===================== Formulaires ===================== */
.formulaire{margin:0 0 20px}
.champ{margin:0 0 16px}
.champ label{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--encre);
  margin-bottom:6px;
}
.champ input,
.champ select,
.champ textarea{
  width:100%;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.4;
  color:var(--encre);
  background:var(--blanc);
  border:1px solid var(--marine);
  border-radius:2px;
  padding:10px 12px;
  min-height:44px;
}
.champ textarea{min-height:110px;resize:vertical}

/* ===================== Filtres ===================== */
.filtres{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin:0 0 24px;
  padding:16px 0;
  border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet);
}
.champ-filtre{margin:0}
.champ-filtre label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--encre);
  margin-bottom:4px;
}
.champ-filtre input,
.champ-filtre select{
  width:100%;
  font-family:var(--sans);
  font-size:15px;
  color:var(--encre);
  background:var(--blanc);
  border:1px solid var(--marine);
  border-radius:2px;
  padding:9px 11px;
  min-height:40px;
}
.filtres-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* ===================== Tableaux ===================== */
.liste{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  margin:0 0 16px;
}
.liste caption{
  text-align:left;
  font-size:13px;
  color:var(--encre);
  padding-block:8px;
}
.liste th,
.liste td{
  text-align:left;
  padding:12px 10px;
  border-bottom:1px solid var(--filet);
  vertical-align:top;
}
.liste thead th{
  border-top:1px solid var(--marine);
  border-bottom:1px solid var(--marine);
  color:var(--marine);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.liste a{
  color:var(--marine);
  text-decoration:underline;
  text-underline-offset:3px;
}
.note-notif{
  display:inline-block;
  margin-left:6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--marine);
  border:1px solid var(--marine);
  padding:1px 6px;
  border-radius:2px;
  white-space:nowrap;
}

@media (max-width:700px){
  .liste thead{display:none}
  .liste,
  .liste tbody,
  .liste tr,
  .liste td{display:block;width:100%}
  .liste tr{
    margin:0 0 12px;
    padding:10px 0;
    border-top:1px solid var(--marine);
    border-bottom:1px solid var(--filet);
  }
  .liste td{
    border:0;
    padding:4px 0;
    display:flex;
    gap:10px;
  }
  .liste td::before{
    content:attr(data-label);
    flex:0 0 110px;
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--marine);
    font-weight:700;
    padding-top:2px;
  }
}

/* ===================== Pagination ===================== */
.pagination{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0 0;
}
.page-info{font-size:14px;color:var(--encre)}

/* ===================== Fiche ===================== */
.fiche-tete{margin:0 0 24px}
.fiche-tete h1{margin-bottom:8px}
.fiche-meta{font-size:15px;margin:0 0 12px;color:var(--encre)}
.fiche-meta strong{color:var(--marine)}

.fiche-dl{
  margin:0 0 16px;
  display:grid;
  grid-template-columns:minmax(140px, 220px) 1fr;
  gap:8px 20px;
  font-size:15px;
}
.fiche-dl dt{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--marine);
  font-weight:700;
  padding-top:3px;
}
.fiche-dl dd{margin:0;white-space:pre-wrap;word-break:break-word}

.besoin{
  font-size:15px;
  padding:14px 16px;
  background:var(--creme);
  border-radius:2px;
}

.total{
  margin:14px 0 6px;
  font-size:15px;
}
.total strong{color:var(--marine)}

.note{
  font-size:13px;
  color:var(--encre);
  opacity:.85;
}

.notes,
.historique{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  border-top:1px solid var(--filet);
}
.notes li,
.historique li{
  padding:12px 0;
  border-bottom:1px solid var(--filet);
  font-size:15px;
}
.note-meta{
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--marine);
  margin:0 0 6px;
}
.note-texte{
  white-space:pre-wrap;
  word-break:break-word;
}
.historique-date{
  color:var(--marine);
  font-weight:600;
}

/* Respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}

/* Petits écrans */
@media (max-width:700px){
  .fiche-dl{
    grid-template-columns:1fr;
    gap:2px 0;
  }
  .fiche-dl dt{padding-top:10px}
}

/* ============================================================
   MODALE ENVOI D'EMAIL
   ============================================================ */
.envoi-email-dialogue {
  width: 100%;
  max-width: 680px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  color: #1B2733;
  margin: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  overflow: hidden;
}
.envoi-email-dialogue::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
@media (max-width: 600px) {
  .envoi-email-dialogue {
    max-width: 100%;
    height: 100dvh;
    border-radius: 0;
    margin: 0;
  }
}

.envoi-email-contenu {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 90vh;
}
@media (max-width: 600px) {
  .envoi-email-contenu { max-height: 100dvh; }
}

/* En-tête */
.envoi-email-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
  flex-shrink: 0;
}
.envoi-email-entete-texte h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  color: #0f4c81;
}
.envoi-email-sous-titre {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}
.envoi-email-fermer {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: -8px -8px 0 0;
  transition: background-color 150ms ease;
}
.envoi-email-fermer:hover { background-color: #f3f4f6; color: #1B2733; }
.envoi-email-fermer svg { width: 24px; height: 24px; }

/* Progression */
.envoi-email-progression {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: #f8f9fa;
  border-bottom: 2px solid #f58220;
  flex-shrink: 0;
}
.envoi-email-etape-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
}
.envoi-email-etape-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}
.envoi-email-etape-item.est-actif { color: #0f4c81; }
.envoi-email-etape-item.est-actif .envoi-email-etape-num {
  background: #0f4c81;
  color: #ffffff;
}
.envoi-email-etape-ligne {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
  margin: 0 16px;
  max-width: 60px;
}

/* Alertes globales */
.envoi-email-alerte-globale {
  display: flex;
  gap: 12px;
  margin: 16px 24px 0;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #f87171;
  border-radius: 4px;
  color: #991b1b;
  font-size: 14px;
}
.envoi-email-icone-erreur { width: 20px; height: 20px; flex-shrink: 0; }

/* ----- RÈGLE CRUCIALE AJOUTÉE ICI ----- */
.envoi-email-etape {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden; /* Empêche de pousser le pied de page */
}

.envoi-email-corps {
  padding: 24px;
  overflow-y: auto; /* Fait défiler uniquement cette zone */
  flex: 1;
}
.envoi-email-champ {
  margin-bottom: 20px;
}
.envoi-email-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.envoi-email-label {
  font-weight: 600;
  font-size: 14px;
  color: #1B2733;
}
.envoi-email-compteur {
  font-size: 12px;
  color: #6b7280;
  transition: color 150ms ease;
}
.envoi-email-compteur.est-proche { color: #f58220; font-weight: 600; }
.envoi-email-compteur.est-depasse { color: #dc2626; font-weight: 600; }

.envoi-email-champ-wrapper {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 48px;
  align-items: flex-start;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.envoi-email-champ-wrapper:focus-within {
  border-color: #0f4c81;
  box-shadow: 0 0 0 2px rgba(15, 76, 129, 0.2);
}
.envoi-email-champs-erreur .envoi-email-champ-wrapper,
.envoi-email-champs-erreur .envoi-email-input,
.envoi-email-champs-erreur .envoi-email-textarea {
  border-color: #dc2626;
}

.envoi-email-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.envoi-email-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  padding: 2px 4px 2px 8px;
  font-size: 13px;
  border-radius: 16px;
  color: #374151;
}
.envoi-email-chip--invalide {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.envoi-email-chip button {
  background: none;
  border: none;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
}
.envoi-email-chip button:hover { background: rgba(0,0,0,0.1); }

.envoi-email-input-dest {
  flex: 1;
  min-width: 150px;
  border: none;
  outline: none;
  background: transparent;
  padding: 4px;
  min-height: 30px;
  font-size: 14px;
  color: #1B2733;
}
.envoi-email-input-dest::placeholder { color: #9ca3af; }

.envoi-email-input, .envoi-email-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  color: #1B2733;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.envoi-email-input:focus, .envoi-email-textarea:focus {
  outline: none;
  border-color: #0f4c81;
  box-shadow: 0 0 0 2px rgba(15, 76, 129, 0.2);
}
.envoi-email-textarea { resize: vertical; min-height: 120px; }

.envoi-email-aide {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
}
.envoi-email-erreur-champ {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #dc2626;
  font-weight: 500;
}

/* Options bannière */
.envoi-email-option-banniere {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}
.envoi-email-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.envoi-email-checkbox { width: 18px; height: 18px; accent-color: #0f4c81; cursor: pointer; }
.envoi-email-miniature { width: 120px; height: auto; border-radius: 2px; border: 1px solid #d1d5db; }

/* Options avancées */
.envoi-email-details {
  margin-top: 20px;
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}
.envoi-email-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: #0f4c81;
  margin-bottom: 12px;
}
.envoi-email-details-contenu { padding-top: 8px; }

/* Pied fixe */
.envoi-email-pied {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  flex-shrink: 0;
}

/* Confirmation */
.envoi-email-confirm-texte { font-size: 1.1rem; margin-bottom: 20px; }
.envoi-email-fiche {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 16px;
  background: #ffffff;
  margin-bottom: 20px;
}
.envoi-email-fiche-ligne {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}
.envoi-email-fiche-label {
  width: 100px;
  font-weight: 600;
  color: #6b7280;
  flex-shrink: 0;
}
.envoi-email-fiche-valeur { color: #1B2733; word-break: break-word; }
.envoi-email-details-liste { margin-top: 8px; font-size: 13px; }
.envoi-email-details-liste summary { cursor: pointer; color: #0f4c81; }
.envoi-email-liste-adresses { margin: 8px 0 0; padding-left: 20px; max-height: 120px; overflow-y: auto; }

.envoi-email-avertissement {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdf4eb;
  border-left: 3px solid #f58220;
  padding: 12px;
  color: #92400e;
  font-size: 14px;
  border-radius: 2px;
}
.envoi-email-icone-avert { width: 20px; height: 20px; flex-shrink: 0; color: #d97706; }

/* Chargement */
.envoi-email-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }
.envoi-email-spinner {
  width: 48px; height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #0f4c81;
  border-radius: 50%;
  animation: envoi-email-spin 1s linear infinite;
  margin-bottom: 20px;
}
@keyframes envoi-email-spin { to { transform: rotate(360deg); } }
.envoi-email-loading-titre { font-size: 1.1rem; font-weight: 600; color: #0f4c81; margin: 0 0 8px; }
.envoi-email-loading-texte { font-size: 14px; color: #6b7280; margin: 0; }

/* Résultats */
.envoi-email-succes {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.envoi-email-icone-succes {
  width: 40px; height: 40px;
  background: #22c55e;
  color: #ffffff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.envoi-email-icone-succes svg { width: 24px; height: 24px; }
.envoi-email-succes-texte { font-size: 1.1rem; font-weight: 600; color: #166534; margin: 0; }

.envoi-email-bloc-echecs {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}
.envoi-email-echecs-entete {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #991b1b;
  font-weight: 600;
  margin-bottom: 12px;
}
.envoi-email-liste-echecs {
  list-style: none; padding: 0; margin: 0;
  max-height: 160px; overflow-y: auto;
  background: #ffffff;
  border: 1px solid #fecaca;
  border-radius: 4px;
}
.envoi-email-liste-echecs li {
  padding: 10px 12px;
  border-bottom: 1px solid #fecaca;
  font-size: 13px;
  color: #7f1d1d;
}
.envoi-email-liste-echecs li:last-child { border-bottom: none; }
.envoi-email-echecs-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* Accessibilité & Mobile */
@media (prefers-reduced-motion: reduce) {
  .envoi-email-dialogue, .envoi-email-fermer, .envoi-email-compteur,
  .envoi-email-champ-wrapper, .envoi-email-input, .envoi-email-textarea {
    transition: none !important;
  }
  .envoi-email-spinner { animation: none; border-color: #0f4c81; }
}

@media (max-width: 600px) {
  .envoi-email-entete, .envoi-email-pied { padding: 16px; }
  .envoi-email-corps { padding: 16px; }
  .envoi-email-pied {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .envoi-email-pied .btn { width: 100%; min-height: 48px; }
  .envoi-email-input, .envoi-email-textarea, .envoi-email-input-dest { font-size: 16px; }
  .envoi-email-option-banniere { flex-direction: column; align-items: flex-start; gap: 12px; }
  .envoi-email-echecs-actions { flex-direction: column; }
  .envoi-email-echecs-actions .btn { width: 100%; }
}