/*=======================================================================
   PALETTE (charte ecomaison)
======================================================================= */
:root{
   --c-main:#00665c;
   --c-main-dark:#004c44;
   --c-white:#ffffff;
   --c-bg-light:#f0f2f5;
   --c-border:rgba(0,102,92,.18);
}

/*=======================================================================
  BASE
======================================================================= */
html,body{margin:0;padding:0;}
body{
   font-family:"Segoe UI",Arial,sans-serif;
   background:var(--c-bg-light);
   color:var(--c-main);
   text-align:center;
   padding:20px;
}
.container{
   width:90%;
   max-width:1000px;
   margin:60px auto;            /* air vertical autour du contenu */
}
.section{margin-bottom:32px;}    /* espacement homogène vertical   */

/*=======================================================================
  EN-TÊTE (logo + titre)
======================================================================= */
.app-header{
   display:flex;
   align-items:center;
   justify-content:center;
   gap:24px;
   flex-wrap:wrap;
   margin-bottom:40px;
}
.logo{
   max-height:64px;width:auto;
   /* Recolore le PNG (monochrome, fond transparent) dans le vert du titre
      (#00665c). Si le fichier logo est remplacé par une version déjà à la
      bonne couleur, supprimer la ligne filter ci-dessous. */
   filter:brightness(0) saturate(100%) invert(23%) sepia(83%) saturate(1214%) hue-rotate(152deg) brightness(94%) contrast(101%);
}
.logo-fallback{
   font-size:2rem;
   font-weight:800;
   color:var(--c-main);
   letter-spacing:-.5px;
}
.app-header-titles{text-align:left;}
.subtitle{margin:6px 0 0;font-size:1.05rem;color:var(--c-main-dark);}

/*=======================================================================
  TITRES
======================================================================= */
.title-xl{font-size:2.4rem;font-weight:700;margin:0;}
.title-s {font-size:1.1rem;font-weight:600;margin:0;}

/*=======================================================================
  CARTES (une par action)
======================================================================= */
.card{
   background:var(--c-white);
   border:1px solid var(--c-border);
   border-radius:8px;
   box-shadow:0 2px 6px rgba(0,0,0,.06);
   padding:32px 28px;
   margin-bottom:32px;
}
.card-title{
   font-size:1.4rem;
   font-weight:700;
   margin:0 0 20px;
   padding-bottom:12px;
   border-bottom:2px solid var(--c-main);
   display:inline-block;
}

/* Sous-cadre : envoi des tonnages pour une collectivité */
.sub-frame{
   margin-top:8px;
   padding:24px;
   border:1px dashed var(--c-border);
   border-radius:6px;
   background:rgba(0,102,92,.03);
}
.sub-frame-title{
   font-size:1.1rem;
   font-weight:600;
   margin:0 0 16px;
   color:var(--c-main-dark);
}
.collectivity-form{
   display:grid;
   grid-template-columns:auto auto;
   align-items:center;
   justify-content:center;
   gap:12px 16px;
}
.collectivity-form label{
   justify-self:end;
   text-align:right;
}
.collectivity-form .btn{
   grid-column:1 / -1;
   justify-self:center;
}
.collectivity-form input[type="text"]{
   padding:10px 14px;
   font-size:1rem;
   border:1px solid var(--c-border);
   border-radius:4px;
   min-width:260px;
   color:#333;
}
.collectivity-form input[type="text"]:focus{
   outline:2px solid var(--c-main);
   outline-offset:1px;
}
.hint{
   margin:16px 0 0;
   font-size:.9rem;
   color:#666;
}

/* Période concernée par la suppression */
.delete-period-info{
   display:inline-block;
   margin:0 0 24px;
   padding:10px 16px;
   font-size:1rem;
   color:#333;
   background:#f6f6f6;
   border:1px solid var(--c-border);
   border-left:4px solid #dc3545;
   border-radius:4px;
}
.delete-period-warning{
   color:#8a5300;
   background:#fff6e5;
   border-left-color:#e6a100;
}

/*=======================================================================
  BOUTONS
======================================================================= */
.btn{
   --btn-clr:var(--c-main);
   display:inline-flex;align-items:center;gap:.5rem;
   padding:12px 32px;font-size:1rem;font-weight:600;
   border:none;border-radius:4px;cursor:pointer;
   background:var(--btn-clr);color:var(--c-white);
   transition:background .2s;position:relative;
}
.btn:hover{background:var(--c-main-dark);}
.btn[disabled]{opacity:.6;cursor:default;}
.btn.loading::after{
   content:"";display:inline-block;margin-left:.5rem;
   width:1rem;height:1rem;
   border:2px solid var(--c-white);
   border-top-color:transparent;
   border-radius:50%;
   animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/*=======================================================================
  CONTENEURS
======================================================================= */
.period-select{display:inline-flex;align-items:center;gap:8px;}
.confirm-wrap{margin-top:24px;}

.button-container{
   margin-top:8px;
   display:flex;justify-content:center;flex-wrap:wrap;
   gap:32px;
}
.button-container>form{margin:0 16px;}  /* fallback gap */

/*=======================================================================
  RÉSULTATS DE L'ENVOI
======================================================================= */
.results-box{
   min-height:60px;
   padding:20px;
   background:#e9ecef;
   border-radius:4px;
   color:#333;
   text-align:left;
   line-height:1.7;
   word-break:break-word;
}
.results-box:empty::before{
   content:"Aucun envoi effectué pour le moment.";
   color:#888;
   font-style:italic;
}
.results-card.has-content .results-box{
   background:#eef5f4;
   border:1px solid var(--c-border);
}

/*=======================================================================
  BADGES (ENV & MAJ)
======================================================================= */
.env-badge,
.update-badge{
   position:fixed;
   padding:6px 14px;
   background:var(--c-main-dark);
   color:var(--c-white);
   border-radius:4px;
   font-weight:600;
   box-shadow:0 2px 4px rgba(0,0,0,.15);
   z-index:1000;
}
.env-badge   {top:12px;left:12px;}
.update-badge{top:12px;right:12px;}

/*===================================================================
  BOUTON DANGER (supprimer données)
=================================================================== */
.btn-danger      { --btn-clr:#dc3545; }
.btn-danger:hover{ background:#bb2d3b; }

/*===================================================================
  MODAL (overlay + boîte centrée)
=================================================================== */
.modal-backdrop{
   position:fixed;top:0;left:0;width:100%;height:100%;
   background:rgba(0,0,0,.45);
   display:none;align-items:center;justify-content:center;
   z-index:2000;
}
.modal{
   width:clamp(300px,90%,500px);
   background:var(--c-white);
   border-radius:6px;
   padding:32px 24px;
   text-align:left;
   box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.modal h2{margin-top:0;font-size:1.25rem;color:var(--c-main-dark);}
.modal p{white-space:pre-line;margin-bottom:24px;color:#333;}
.modal-footer{display:flex;justify-content:flex-end;gap:16px;}