/* ============================================================
   COCKPIT TRYDE STUDIO — styles partagés (réf. charte-da.md)
   ============================================================ */
:root{
  --ivoire:#F7F3EC; --surface:#FDFBF7; --sable:#EFE8DC; --filet:#E5DDCE;
  --noir:#171210; --surface-sombre:#221C18; --filet-sombre:#372E27;
  --encre:#1D1814; --texte:#4D453B; --discret:#857A6B; --ivoire-texte:#F2EDE3;
  --or:#A98850; --or-lumineux:#C8A56C; --or-profond:#8A6D3C; --voile-or:#F0E7D5;
  --succes:#3D7A55; --attention:#A8702E; --erreur:#A4453A;
  --titres:"Schibsted Grotesk",sans-serif; --texte-ui:"Inter",sans-serif;
  --r-card:8px; --r-bouton:6px; --ombre:0 1px 2px rgba(29,24,20,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--texte-ui);background:var(--ivoire);color:var(--texte);font-size:15px;line-height:1.6}
h1,h2,h3{font-family:var(--titres);color:var(--encre);line-height:1.15}
a{color:var(--or-profond)}
.chiffres{font-feature-settings:"tnum" 1}
.conteneur{max-width:1080px;margin:0 auto;padding:0 20px}

/* logo */
.logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--titres);font-weight:500;color:var(--ivoire-texte);font-size:19px;text-decoration:none}
.logo .studio{color:var(--or-lumineux);font-weight:400}
.logo.fonce{color:var(--encre)}
.logo.fonce .studio{color:var(--or)}
.marque-mark{flex:none;display:block}
.marque-mark .trait{stroke:var(--ivoire-texte);stroke-width:2;fill:none;stroke-linecap:square}
.marque-mark .barre-t{stroke-width:2.6}
.marque-mark .accent{fill:var(--or-lumineux)}
.logo.fonce .marque-mark .trait{stroke:var(--encre)}
.logo.fonce .marque-mark .accent{fill:var(--or)}

/* étiquettes & repère */
.etiquette{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--discret)}
.etiquette.or{color:var(--or-profond)}
.repere{height:4px;position:relative;width:56px}
.repere::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--or)}
.repere::after{content:"";position:absolute;right:0;top:0;width:4px;height:4px;background:var(--or)}
.repere.sombre::before,.repere.sombre::after{background:var(--or-lumineux)}

/* bandeau sombre signature */
.bandeau{background:var(--noir);color:var(--ivoire-texte);position:relative;overflow:hidden}
.bandeau::before{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(rgba(200,165,108,.07),transparent);pointer-events:none}
.bandeau > *{position:relative}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--texte-ui);font-weight:600;font-size:14px;border-radius:var(--r-bouton);padding:10px 18px;cursor:pointer;border:1px solid transparent;transition:opacity .15s,background .15s;text-decoration:none;line-height:1.2}
.btn-or{background:var(--or);color:#231A0E}
.btn-or:hover{background:var(--or-profond);color:#fff}
.btn-ligne{background:transparent;border-color:var(--encre);color:var(--encre)}
.btn-ligne:hover{background:var(--encre);color:var(--ivoire)}
.btn-ligne.sur-sombre{border-color:var(--filet-sombre);color:var(--ivoire-texte)}
.btn-ligne.sur-sombre:hover{background:var(--surface-sombre)}
.btn-discret{background:none;border:none;color:var(--discret);font-size:13px;cursor:pointer;text-decoration:underline;padding:6px}
.btn-danger{background:transparent;border-color:var(--erreur);color:var(--erreur)}
.btn-danger:hover{background:var(--erreur);color:#fff}
.btn:disabled{opacity:.5;cursor:default}

/* champs */
.champ{margin-bottom:16px}
.champ label{display:block;font-size:13px;font-weight:600;color:var(--encre);margin-bottom:6px}
.champ .aide{font-size:12.5px;color:var(--discret);margin:-2px 0 6px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=url],textarea,select{
  width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--filet);
  border-radius:var(--r-bouton);font-family:inherit;font-size:14.5px;color:var(--encre);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px var(--voile-or)}
textarea{min-height:96px;resize:vertical}
.erreur-champ{border-color:var(--erreur) !important}

/* cards */
.carte{background:var(--surface);border:1px solid var(--filet);border-radius:var(--r-card);padding:20px;transition:box-shadow .15s}
.carte:hover{box-shadow:var(--ombre)}

/* badges statut */
.badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:99px;white-space:nowrap}
.b-brief{background:var(--sable);color:var(--texte)}
.b-maquette{background:var(--voile-or);color:var(--or-profond)}
.b-retours{background:#F5EAD8;color:var(--attention)}
.b-valide{background:#E8F0EA;color:var(--succes)}
.b-implementation{background:var(--voile-or);color:var(--or-profond)}
.b-livre{background:#E8F0EA;color:var(--succes)}

/* barre de progression */
.progression{height:4px;background:var(--sable);border-radius:2px;overflow:hidden}
.progression i{display:block;height:100%;background:var(--or);transition:width .3s}

/* messages */
.message{border-radius:var(--r-card);padding:13px 16px;font-size:14px;margin-bottom:16px}
.message.ok{background:#E8F0EA;color:var(--succes);border:1px solid #C6DCCB}
.message.ko{background:#F5E4E1;color:var(--erreur);border:1px solid #E3C2BC}

/* modale */
.voile{position:fixed;inset:0;background:rgba(23,18,16,.45);display:none;align-items:flex-start;justify-content:center;padding:24px;z-index:80;overflow:auto}
.voile.ouverte{display:flex}
.modale{background:var(--surface);border-radius:var(--r-card);border:1px solid var(--filet);max-width:540px;width:100%;padding:26px;margin-top:4vh;box-shadow:0 16px 48px rgba(29,24,20,.18)}
.modale h3{margin-bottom:16px;font-size:19px}
.modale .pied{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

@media(max-width:700px){
  body{font-size:14.5px}
  .modale{padding:20px;margin-top:0}
}