/* Illustrations de la console de gestion (données fictives)
   Les écrans sont dessinés à largeur fixe puis mis à l'échelle par illustrations.js. */
:root{
  --c-encre:#211C15; --c-or:#C7A567; --c-creme:#FBF6EC; --c-fond:#FAF6EF; --c-sable:#F2EAD9;
  --c-gris:#5C544A; --c-brique:#B23A2E; --c-rose:#FBEAE7;
}
.ill{position:relative;overflow:hidden;border:1px solid var(--filet);background:var(--c-fond);box-shadow:0 18px 40px -24px rgba(11,34,54,.45)}
.ill-canvas{position:absolute;top:0;left:0;transform-origin:top left}
.top .ill{border-color:rgba(169,201,226,.25);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.shot .ill{border:0;box-shadow:none}
/* Sur téléphone : l'écran est agrandi et recadré, un fondu à droite signale la suite */
.ill.rogne::after{content:"";position:absolute;top:0;right:0;bottom:0;width:48px;background:linear-gradient(to right,rgba(250,246,239,0),rgba(250,246,239,.95));pointer-events:none}

/* Interface de la console : les paragraphes gardent la couleur de leur bloc */
.cs p{color:inherit}
.cs{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--c-encre);font-weight:400;line-height:1.35;font-size:13px;background:var(--c-fond)}
.cs .app{display:flex;min-height:100%}
.cs .menu{width:150px;background:var(--c-encre);color:var(--c-creme);flex-shrink:0;padding:20px 0}
.cs .menu .marque{padding:0 16px 18px}
.cs .menu .marque p{font-family:'Cormorant Garamond',serif;font-size:18px;letter-spacing:.06em;line-height:1}
.cs .menu .marque span{display:block;margin-top:5px;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-or)}
.cs .menu a{display:flex;justify-content:space-between;align-items:center;padding:7px 16px;font-size:12.5px;color:rgba(251,246,236,.62);text-decoration:none}
.cs .menu a.on{color:var(--c-creme);background:rgba(255,255,255,.07);border-left:2px solid var(--c-or);padding-left:14px}
.cs .menu .pastille{background:var(--c-or);color:var(--c-encre);font-size:10px;font-weight:700;padding:1px 6px}
.cs .menu hr{border:none;border-top:1px solid rgba(251,246,236,.1);margin:10px 16px}
.cs .corps{flex:1;padding:22px 26px}
.cs .petit{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gris)}
.cs .h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:28px;line-height:1.1;margin-top:3px}
.cs .h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:21px;margin-top:20px}
.cs .tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.cs .tuile{background:#fff;border:1px solid rgba(33,28,21,.12)}
.cs .tuile .barre{height:3px}
.cs .tuile .in{padding:10px 12px}
.cs .tuile .t{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gris)}
.cs .tuile .t i{display:inline-block;width:8px;height:8px;border-radius:50%}
.cs .tuile .v{font-size:26px;font-weight:700;margin-top:6px;line-height:1}
.cs .tuile .d{font-size:10px;color:var(--c-gris);margin-top:4px}
.cs .tuile.sombre{background:var(--c-encre);border-color:var(--c-encre);color:var(--c-creme)}
.cs .tuile.sombre .t{color:var(--c-or)} .cs .tuile.sombre .d{color:rgba(251,246,236,.7)}
.cs .jour{background:#fff;border:1px solid rgba(33,28,21,.12);margin-top:10px}
.cs .jour .tete{display:flex;justify-content:space-between;align-items:baseline;background:#EBDFC4;padding:6px 12px;border-bottom:1px solid rgba(33,28,21,.12)}
.cs .jour .tete b{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.cs .jour .tete span{font-size:10px;color:var(--c-gris)}
.cs .ligne{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid rgba(33,28,21,.07)}
.cs .ligne:last-child{border-bottom:none}
.cs .badge{font-size:9.5px;font-weight:700;letter-spacing:.1em;color:#fff;padding:4px 8px;flex-shrink:0;width:58px;text-align:center}
.cs .lieu{font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(33,28,21,.25);color:var(--c-gris);padding:3px 5px;flex-shrink:0;width:62px;text-align:center}
.cs .lieu.liv{border-color:var(--c-or);color:#7A5E22}
.cs .h{font-weight:700;font-size:13px;width:38px;flex-shrink:0}
.cs .cli{flex:1;min-width:0}
.cs .cli b{display:block;font-size:12.5px}
.cs .cli span{font-size:11px;color:var(--c-gris)}
.cs .velos{flex:1.3;font-size:11px;color:var(--c-gris)}
.cs .tel{width:96px;font-size:11px;color:var(--c-gris);flex-shrink:0}
.cs .act{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--c-or);padding:4px 9px;flex-shrink:0}
.cs .act.fait{background:rgba(33,28,21,.1);color:var(--c-gris);letter-spacing:0;text-transform:none;font-weight:600}
.cs .alertes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.cs .alerte{border-left:3px solid var(--c-brique);background:var(--c-rose);padding:10px 12px;color:#7A2A20}
.cs .alerte .t{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.cs .alerte p{display:flex;justify-content:space-between;font-weight:700;font-size:12px;margin-top:7px}

/* Calendrier */
.cs .legende{display:flex;gap:14px;margin-top:10px;font-size:10.5px;color:var(--c-gris)}
.cs .legende span{display:flex;align-items:center;gap:5px}
.cs .legende i{display:inline-block;width:16px;height:9px}
.cs .gantt{margin-top:12px;background:#fff;border:1px solid rgba(33,28,21,.15)}
.cs .g-tete,.cs .g-ligne{display:grid;grid-template-columns:96px repeat(14,1fr)}
.cs .g-tete{background:#F7F1E4;border-bottom:1px solid rgba(33,28,21,.15)}
.cs .g-tete div{font-size:9.5px;text-align:center;padding:5px 0;color:rgba(33,28,21,.6);border-left:1px solid rgba(33,28,21,.06)}
.cs .g-tete div:first-child{text-align:left;padding-left:10px;letter-spacing:.12em;text-transform:uppercase;border-left:none}
.cs .g-tete .auj{background:#EBDFC4;color:var(--c-encre);font-weight:700}
.cs .g-ligne{position:relative;height:32px;border-bottom:1px solid rgba(33,28,21,.07)}
.cs .g-ligne:last-child{border-bottom:none}
.cs .g-ligne .v{font-size:11px;font-weight:600;padding:9px 0 0 10px;border-right:1px solid rgba(33,28,21,.1)}
.cs .g-ligne .col{border-left:1px solid rgba(33,28,21,.05)}
.cs .g-ligne .col.auj{background:rgba(199,165,103,.12)}
.cs .bar{position:absolute;top:6px;height:20px;font-size:10px;font-weight:600;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs .b-conf{background:#1D9E75;color:#fff} .cs .b-cours{background:#1D6A9E;color:#fff}
.cs .b-att{background:#BFA170;color:var(--c-encre)} .cs .b-term{background:#C9C2B4;color:var(--c-encre)}
.cs .b-maint{background:repeating-linear-gradient(135deg,#FBEAE7 0 6px,#F2D2CC 6px 12px);color:#7A2A20;border:1px solid rgba(178,58,46,.35)}

/* Contrat */
.cs .contrat-zone{display:flex;gap:22px;padding:22px 26px;height:100%}
.cs .a4{width:360px;background:#fff;box-shadow:0 8px 22px -10px rgba(33,28,21,.35);padding:22px 24px;flex-shrink:0;color:#111}
.cs .a4 .entete{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #111;padding-bottom:8px}
.cs .a4 .entete b{font-family:'Cormorant Garamond',serif;font-size:17px;letter-spacing:.05em}
.cs .a4 .entete span{display:block;font-size:8px;color:#444;margin-top:2px}
.cs .a4 .entete small{font-size:8px;text-align:right;color:#444}
.cs .a4 .tit{font-family:'Cormorant Garamond',serif;font-weight:700;text-align:center;font-size:16px;letter-spacing:.08em;margin-top:10px}
.cs .a4 table{width:100%;border-collapse:collapse;margin-top:10px;font-size:8.5px}
.cs .a4 td{border:1px solid #bbb;padding:3px 5px}
.cs .a4 td:first-child{background:#f3f3f3;width:38%;font-weight:600}
.cs .a4 .art{margin-top:8px}
.cs .a4 .art b{font-size:8.5px}
.cs .a4 .l{height:4px;background:#e4e4e4;margin-top:4px}
.cs .a4 .sign{display:flex;justify-content:space-between;margin-top:12px;font-size:8px}
.cs .a4 .sign div{width:46%;border-top:1px solid #111;padding-top:4px;position:relative;height:46px}
.cs .a4 .cachet{position:absolute;right:6px;top:4px;width:40px;height:40px;border:1.5px solid #2A4F8F;border-radius:50%;color:#2A4F8F;font-size:6px;display:flex;align-items:center;justify-content:center;text-align:center;opacity:.8}
.cs .a4 .paraphe{position:absolute;left:4px;top:14px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:#1b2f6b}
.cs .panneau{flex:1}
.cs .langues{display:flex;gap:6px;margin-top:14px}
.cs .langues span{font-size:11px;font-weight:700;letter-spacing:.08em;border:1px solid rgba(33,28,21,.25);padding:5px 10px}
.cs .langues span.on{background:var(--c-encre);color:var(--c-creme);border-color:var(--c-encre)}
.cs .resume{background:#fff;border:1px solid rgba(33,28,21,.12);margin-top:14px;padding:12px 14px;font-size:12px}
.cs .resume p{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(33,28,21,.06)}
.cs .resume p:last-child{border-bottom:none}
.cs .resume p span{color:var(--c-gris)}
.cs .boutons{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.cs .boutons div{font-size:11.5px;font-weight:600;padding:9px 12px;text-align:center}
.cs .bo{background:var(--c-or)}
.cs .bw{background:#1D9E75;color:#fff}
.cs .bl{border:1px solid rgba(33,28,21,.25)}
.cs .envoye{margin-top:10px;font-size:11px;color:#1D6B4F;background:#E7F4EE;padding:7px 10px;border-left:3px solid #1D9E75}

/* Finances */
.cs .onglets{display:flex;gap:18px;margin-top:12px;border-bottom:1px solid rgba(33,28,21,.12);font-size:12px}
.cs .onglets span{padding-bottom:7px;color:var(--c-gris)}
.cs .onglets span.on{color:var(--c-encre);font-weight:700;border-bottom:2px solid var(--c-or)}
.cs .resultat{background:var(--c-encre);margin-top:14px;padding:16px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.cs .op{display:flex;align-items:flex-end;gap:7px}
.cs .op em{font-style:normal;color:var(--c-or);font-size:20px;font-weight:300;line-height:1;padding-bottom:2px}
.cs .op p{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,246,236,.55)}
.cs .op b{display:block;font-size:17px;color:var(--c-creme);margin-top:4px;line-height:1}
.cs .op.res b{color:var(--c-or);font-size:20px}
.cs .treso{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.cs .treso div{background:#fff;border:1px solid rgba(33,28,21,.12);border-top:3px solid var(--c-or);padding:9px 12px}
.cs .treso p{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-gris)}
.cs .treso b{display:block;font-size:19px;margin-top:4px}
.cs .treso span{font-size:10px;color:var(--c-gris)}
.cs .carte{background:#fff;border:1px solid rgba(33,28,21,.12);margin-top:12px;padding:12px 14px}
.cs .carte .ct{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:16px}
.cs .barres{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.cs .barres div{display:grid;grid-template-columns:70px 1fr 64px;align-items:center;gap:8px;font-size:11px}
.cs .barres i{display:block;height:9px;background:var(--c-or)}
.cs .barres b{text-align:right;font-weight:600}