:root{
  --navy:#2a3c53;
  --navy-deep:#24344a;
  --ink:#141a23;
  --cream:#f4f1ea;
  --orange:#ec6608;
  --on-navy:#eee9df;
  --on-navy-muted:#aebccd;
  --on-cream-muted:#5c6675;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
/* un display: explicite écrase l'attribut hidden, on rétablit */
[hidden]{display:none !important;}
body{
  margin:0;
  font-family:"Jost",system-ui,sans-serif;
  background:var(--navy);
  color:var(--on-navy);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
::selection{background:var(--orange);color:#fff;}

/* En-tête repris du site */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:22px 32px;
  border-bottom:1px solid rgba(174,188,205,.18);
}
.brand-logo{height:26px;width:auto;display:block;}
.site-nav{display:flex;gap:22px;}
.site-nav a{
  font-family:"Dosis",sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.site-nav a:hover,.site-nav a:focus-visible{border-color:var(--orange);outline:none;}

/* Structure */
.wrap{max-width:900px;margin:0 auto;padding:44px 24px 80px;}
.wrap.large{max-width:1100px;}
h1{
  font-family:"Dosis",sans-serif;font-weight:700;
  font-size:clamp(26px,4vw,38px);letter-spacing:.02em;margin:0 0 6px;
}
.kicker{
  font-family:"Dosis",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--on-navy-muted);
  margin:0 0 8px;
}
.kicker::after{
  content:"";display:block;width:38px;height:2px;
  background:var(--orange);margin-top:9px;
}
.sub{color:var(--on-navy-muted);margin:0 0 30px;}

/* Blocs */
.carte{
  background:var(--navy-deep);
  border:1px solid rgba(174,188,205,.16);
  border-radius:4px;padding:22px;margin-bottom:18px;
}
.carte h2{
  font-family:"Dosis",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-navy-muted);
  margin:0 0 16px;display:flex;align-items:center;
}

/* Formulaire */
.champ{margin-bottom:14px;}
.champ label{
  display:block;font-family:"Dosis",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-muted);
  margin-bottom:5px;
}
input,textarea,select{
  width:100%;padding:10px 12px;
  background:rgba(20,26,35,.5);
  border:1px solid rgba(174,188,205,.22);
  border-radius:3px;color:var(--on-navy);
  font-family:"Jost",sans-serif;font-size:15px;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--orange);}
textarea{resize:vertical;min-height:112px;line-height:1.5;overflow:hidden;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* Bouton */
.btn{
  display:inline-block;cursor:pointer;
  font-family:"Dosis",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:12px 26px;border-radius:3px;
  background:transparent;color:var(--on-navy);
  border:1px solid var(--orange);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.btn:hover:not(:disabled),.btn:focus-visible{background:var(--orange);color:#fff;outline:none;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn.plein{background:var(--orange);color:#fff;}
.btn.plein:hover{filter:brightness(1.1);}
.btn.mini{padding:7px 14px;font-size:12px;letter-spacing:.12em;}

/* Zone de dépôt */
.depot{
  border:1.5px dashed rgba(174,188,205,.4);
  border-radius:4px;padding:34px 20px;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s;
}
.depot:hover,.depot.actif{border-color:var(--orange);background:rgba(236,102,8,.06);}
.depot .gros{font-family:"Dosis",sans-serif;font-size:17px;font-weight:600;}
.depot .petit{color:var(--on-navy-muted);font-size:13px;margin-top:4px;}

/* Liste de fichiers */
.liste{list-style:none;margin:14px 0 0;padding:0;}
.liste li{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(174,188,205,.12);
  font-size:14px;
}
.liste li:last-child{border-bottom:0;}
.liste .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.liste .taille{color:var(--on-navy-muted);font-size:13px;white-space:nowrap;}
.barre{height:3px;background:rgba(174,188,205,.2);border-radius:2px;width:110px;overflow:hidden;}
.barre span{display:block;height:100%;width:0;background:var(--orange);transition:width .2s;}

/* Résultat */
.lien-boite{display:flex;gap:10px;align-items:center;margin-top:8px;}
.lien-boite input{font-size:14px;}
.ok{color:#9fd39f;}
.alerte{color:#ffb08a;}

/* Tableau des envois */
.envoi{
  display:grid;grid-template-columns:1fr auto;gap:10px 16px;
  padding:14px 0;border-bottom:1px solid rgba(174,188,205,.12);
}
.envoi:last-child{border-bottom:0;}
.envoi .titre{font-weight:500;}
.envoi .meta{color:var(--on-navy-muted);font-size:13px;}
.envoi .actions{display:flex;gap:8px;align-items:center;}
.pastille{
  font-family:"Dosis",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;border:1px solid rgba(174,188,205,.3);
  color:var(--on-navy-muted);
}
.pastille.chaud{border-color:var(--orange);color:var(--orange);}

/* Page de téléchargement */
.fichier{
  display:flex;align-items:center;gap:16px;
  padding:16px 0;border-bottom:1px solid rgba(174,188,205,.14);
}
.fichier:last-of-type{border-bottom:0;}
.fichier .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.expire{
  font-family:"Dosis",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-muted);
  margin-top:26px;
}
.vitrine{
  margin-top:34px;padding-top:26px;
  border-top:1px solid rgba(174,188,205,.18);
}
.vitrine p{color:var(--on-navy-muted);margin:0 0 14px;}
.pied{
  text-align:center;color:var(--on-navy-muted);font-size:12px;
  padding:30px 20px 40px;
}
@media(max-width:620px){
  .duo{grid-template-columns:1fr;}
  .site-header{flex-direction:column;gap:14px;padding:18px;}
}

/* Détail des téléchargements, visible par Jo seulement */
.pastille.cliquable{cursor:pointer;user-select:none;}
.pastille.cliquable:hover{border-color:var(--orange);color:var(--orange);}
.detail{
  grid-column:1 / -1;
  margin:6px 0 2px;padding:10px 14px;
  background:rgba(20,26,35,.45);
  border-left:2px solid var(--orange);border-radius:2px;
}
.ligne-dl{
  display:flex;justify-content:space-between;gap:16px;
  font-size:13px;padding:3px 0;color:var(--on-navy-muted);
}
.ligne-dl .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ligne-dl .quand{white-space:nowrap;color:var(--on-navy);}

/* Choix du mode d'envoi */
.modes{display:flex;gap:0;margin:0 0 18px;}
.mode{
  flex:1;cursor:pointer;text-align:left;
  font-family:"Dosis",sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:13px 18px;background:transparent;color:var(--on-navy-muted);
  border:1px solid rgba(174,188,205,.28);
}
.mode em{
  display:block;margin-top:4px;
  font-family:"Jost",sans-serif;font-style:normal;font-weight:400;
  font-size:11.5px;letter-spacing:0;text-transform:none;opacity:.75;
}
.mode:first-child{border-radius:3px 0 0 3px;}
.mode:last-child{border-radius:0 3px 3px 0;border-left:0;}
.mode:hover{color:var(--on-navy);}
.mode.actif{background:rgba(236,102,8,.14);border-color:var(--orange);color:var(--orange);}
.aide{font-size:12.5px;color:var(--on-navy-muted);margin:6px 0 0;line-height:1.5;}
.aide strong{color:var(--on-navy);font-weight:500;}

/* Liens produits */
.lien-boite{margin-top:10px;}
.lien-boite .pour{
  font-family:"Dosis",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);
  white-space:nowrap;min-width:150px;
}
.ligne-dl em{font-style:normal;color:var(--orange);}

/* Modèles de message */
.ligne-modeles{display:flex;gap:8px;align-items:center;margin-bottom:7px;flex-wrap:wrap;}
.ligne-modeles select{width:auto;min-width:170px;padding:7px 10px;font-size:13px;}

/* Case à cocher sous un champ */
.case{
  display:flex;align-items:flex-start;gap:8px;margin-top:9px;
  font-family:"Jost",sans-serif;font-size:12.5px;letter-spacing:0;
  text-transform:none;color:var(--on-navy-muted);cursor:pointer;font-weight:400;
}
.case input{width:auto;margin:2px 0 0;accent-color:var(--orange);}

/* Carnet d'adresses */
.carnet{margin:2px 0 10px;}
.carnet-titre{
  font-family:"Dosis",sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-muted);
  margin-bottom:6px;
}
.contact{
  display:inline-flex;align-items:center;gap:7px;
  margin:0 6px 6px 0;padding:5px 9px;
  background:rgba(20,26,35,.5);border:1px solid rgba(174,188,205,.22);
  border-radius:3px;font-size:12.5px;cursor:pointer;
  transition:border-color .15s;
}
.contact:hover{border-color:var(--orange);}
.contact b{font-weight:500;}
.contact i{font-style:normal;color:var(--on-navy-muted);font-size:11.5px;}
.contact .x{
  background:none;border:0;color:var(--on-navy-muted);cursor:pointer;
  font-size:15px;line-height:1;padding:0 0 0 2px;width:auto;
}
.contact .x:hover{color:var(--orange);}

/* Dossier d'origine sur la page de téléchargement */
.fichier .dossier{
  display:block; font-style:normal; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange); margin-bottom:1px;
}