/* Charte de la page « Conversion de plans pour Lona » : noir et blanc, Montserrat et Play hébergées localement.
   Tout l'habillage est ici : un changement de charte ne touche que ce fichier. */
@font-face { font-family: Montserrat; src: url("/static/Montserrat-wght.ttf") format("truetype");
             font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Play; src: url("/static/Play-Regular.ttf") format("truetype");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Play; src: url("/static/Play-Bold.ttf") format("truetype");
             font-weight: 700; font-style: normal; font-display: swap; }

:root { --noir:#000; --blanc:#fff; --gris:#6b6b6b; --filet:#d9d9d9; --pale:#f4f4f4; --alerte:#a00;
        --vert:#2e8b3a; --orange:#e08a00; --rouge:#c62828; }
* { box-sizing:border-box; }
body { margin:0; background:var(--blanc); color:var(--noir); font:16px/1.55 Montserrat, Arial, sans-serif;
       min-height:100vh; display:flex; flex-direction:column; }
a { color:inherit; }

/* Bandeau */
.bandeau { background:var(--noir); color:var(--blanc); border-bottom:2px solid #fff; }
.bandeau .int { max-width:1150px; margin:0 auto; height:110px; display:flex; align-items:center; gap:28px; padding:0 24px; }
.bandeau img { height:79px; width:auto; display:block; }
.bandeau .outil { font:400 22px Play, sans-serif; letter-spacing:1.5px; }
.bandeau .sortie { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:14px; }
.bandeau .lien { color:var(--blanc); }
@media (max-width: 760px) {
  .bandeau .int { height:auto; min-height:90px; flex-wrap:wrap; gap:10px 18px; padding:10px 16px; }
  .bandeau img { height:60px; }
  .bandeau .outil { font-size:17px; }
}

/* Titres */
h1 { font:400 35px/1.2 Play, sans-serif; letter-spacing:1.5px; margin:0 0 26px; }
.etape { font:700 20px Play, sans-serif; letter-spacing:3.2px; margin:0 0 6px; }
h3 { font:600 16px Montserrat, sans-serif; margin:18px 0 6px; }
@media (max-width: 760px) { h1 { font-size:26px; margin-bottom:18px; } .etape { font-size:17px; } }

main { flex:1; width:100%; max-width:1240px; margin:0 auto; padding:44px 24px 60px; }
@media (max-width: 760px) { main { padding:26px 16px 40px; } }

/* Formulaires */
.formulaire { display:grid; gap:18px; max-width:640px; }
.formulaire.etroit { max-width:380px; }
label { display:grid; gap:6px; font-weight:500; }
input[type=text], input[type=password], input[type=number], select {
  font:inherit; font-size:15px; padding:10px; border:1px solid #9a9a9a; border-radius:0; width:100%; background:#fff; }
input[type=file] { font:inherit; font-size:14px; padding:14px; border:1px dashed #8a8a8a; background:var(--pale); }
details { background:var(--pale); padding:12px 16px; font-size:14px; display:grid; gap:12px; }
details[open] { display:grid; }
details summary { cursor:pointer; font-weight:600; }
details label { margin-top:10px; }
.bouton { justify-self:start; display:inline-block; padding:14px 26px; background:var(--noir); color:#fff;
          border:1px solid var(--noir); font:500 15px Montserrat, sans-serif; letter-spacing:1px; text-transform:uppercase;
          cursor:pointer; text-decoration:none; }
.bouton:hover { background:#fff; color:var(--noir); }
.lien { background:none; border:0; padding:0; font:inherit; color:var(--noir); text-decoration:underline; cursor:pointer; }
.aide, .sous, .fichier { font-size:13.5px; color:var(--gris); margin:8px 0 0; }
.alerte { color:var(--alerte); font-weight:500; }
.message { font-size:17px; }

/* Résultat */
.feu { display:flex; align-items:center; flex-wrap:wrap; gap:12px; border:1px solid var(--filet); padding:16px 18px;
       margin:18px 0 30px; }
.pastille-feu { width:22px; height:22px; border-radius:50%; flex:none; }
.feu-vert .pastille-feu { background:var(--vert); }
.feu-orange .pastille-feu { background:var(--orange); }
.feu-rouge .pastille-feu { background:var(--rouge); }
.feu b { font:700 20px Play, sans-serif; letter-spacing:2px; }
.feu .raison { flex:1 1 300px; }
.bloc { margin-bottom:30px; }
.zoom-commandes { display:flex; gap:18px; margin:10px 0; font-size:14px; }
.cadre-svg { border:1px solid var(--filet); background:#fff; overflow:auto; max-height:70vh; }
.cadre-svg svg { display:block; width:100%; height:auto; }
table.rapport { border-collapse:collapse; width:100%; max-width:760px; font-size:14.5px; }
table.rapport th, table.rapport td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--filet); vertical-align:top; }
table.rapport th { font-weight:600; width:40%; }
table.rapport tr:nth-child(even) { background:var(--pale); }
div.rapport { max-width:760px; font-size:14.5px; }
div.rapport p { margin:2px 0; white-space:pre-wrap; }
.telechargements { list-style:none; padding:0; margin:0; display:grid; gap:8px; }

/* Attente et anti-double envoi (CA-30) */
.bouton:disabled, .bouton[disabled], .lien:disabled { cursor:wait; opacity:.6; }
.bouton:disabled:hover { background:var(--noir); color:var(--blanc); }
.attente { display:grid; gap:8px; max-width:640px; }
.attente[hidden] { display:none; }
.attente-texte { font-size:14px; color:var(--noir); }
.attente-barre { position:relative; height:6px; background:var(--filet); overflow:hidden; }
.attente-barre::before { content:""; position:absolute; top:0; bottom:0; left:0; width:35%; background:var(--noir);
                         animation:attente-defile 1.4s ease-in-out infinite; }
@keyframes attente-defile { from { transform:translateX(-100%); } to { transform:translateX(290%); } }
@media (prefers-reduced-motion: reduce) {
  .attente-barre, .attente-barre::before { animation:none; }
  .attente-barre::before { width:100%; transform:none; background:var(--gris); }
}

/* Pied : signature FDi2 */
footer { background:var(--noir); color:#fff; }
footer .int { max-width:1150px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:18px 24px; font-size:14px; }
.pastille-fdi2 { display:inline-flex; align-items:center; background:var(--blanc); border-radius:14px; padding:4px 10px; }
.pastille-fdi2 img { height:20px; width:auto; display:block; }

/* Historique (L2b) */
table.historique th { width:auto; }
table.historique .h-liens a { display:inline-block; margin:0 10px 4px 0; }
table.historique .feu-mot { display:inline-flex; align-items:center; gap:8px; font:700 14px Play, sans-serif; letter-spacing:1px; }
table.historique .feu-mot .pastille-feu { width:14px; height:14px; }
.feu-mot.feu-vert .pastille-feu { background:var(--vert); }
.feu-mot.feu-orange .pastille-feu { background:var(--orange); }
.feu-mot.feu-rouge .pastille-feu { background:var(--rouge); }