/* =====================================================================
   Charte des pages "espace" - version materieldeboulangerie.fr (couleurs MDB)
   Modèle : /map/_plan2d.asp (Espace plan)
   Utilisée par : espace client, connexion plan, devis, guide, administrations
   Tout est préfixé #ep pour ne pas toucher au reste du site.
   ===================================================================== */
#ep { --marine:#6b2a00; --bleu:#94400c; --orange:#f08300; --fond:#fbf7f3; --bord:#e3cfbf; --doux:#6d5d52; font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; color:#222; background:var(--fond); padding:0 0 40px; font-size:15px; line-height:1.5; }
#ep * { box-sizing:border-box; }
#ep a { color:var(--bleu); }
#ep p { margin:0 0 10px; }

/* ---------- Bandeau bleu pleine largeur */
#ep .ep-bandeau { background:var(--marine); color:#fff; }
#ep .ep-bandeau .int { max-width:1200px; margin:0 auto; padding:22px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
#ep .ep-bandeau h1, #ep .ep-bandeau .ep-titre, #ep .ep-bandeau .int > strong { display:block; margin:0; font-size:24px; flex:1; min-width:240px; line-height:1.25; color:#fff; font-weight:700; text-transform:none; letter-spacing:0; }
#ep .ep-bandeau h1 small, #ep .ep-bandeau .ep-titre small, #ep .ep-bandeau .int > strong small { display:block; font-size:14px; font-weight:normal; color:#f3dcc8; margin-top:4px; }
#ep .ep-bandeau .ep-pastilles { flex-basis:100%; display:flex; gap:8px; flex-wrap:wrap; margin-top:-4px; }
#ep .ep-bandeau .ep-pastille { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); border-radius:20px; padding:5px 12px; font-size:13px; white-space:nowrap; }
#ep .ep-bandeau .ep-pastille i { color:#ffb489; margin-right:4px; }

/* ---------- Boutons */
#ep .ep-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:8px; padding:11px 18px; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; font-family:inherit; line-height:1.2; white-space:nowrap; background:none; }
#ep .ep-btn.petit { padding:8px 13px; font-size:14px; }
#ep .ep-btn.orange { background:var(--orange); color:#fff; box-shadow:0 3px 10px rgba(240,131,0,.35); }
#ep .ep-btn.orange:hover { background:#d46f00; color:#fff; }
#ep .ep-btn.clair { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.4); }
#ep .ep-btn.clair:hover { background:rgba(255,255,255,.2); color:#fff; }
#ep .ep-btn.marine { background:var(--marine); color:#fff; }
#ep .ep-btn.marine:hover { background:#8a3a08; color:#fff; }
#ep .ep-btn.ligne { background:#fff; color:var(--marine); border-color:var(--bord); }
#ep .ep-btn.ligne:hover { border-color:var(--bleu); background:#fdf7f1; }
#ep .ep-btn.rouge { background:#fff; color:#c92a2a; border-color:#e9b4b4; }
#ep .ep-btn.rouge:hover { background:#fff1f1; }
#ep .ep-btn.large { width:100%; }

/* ---------- Mise en page : contenu + colonne de droite */
#ep .ep-page { max-width:1200px; margin:0 auto; padding:24px 20px 0; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
#ep .ep-page.pleine { grid-template-columns:minmax(0,1fr); }
#ep .ep-grille2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
#ep .ep-grille3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* ---------- Cartes */
#ep .ep-carte { background:#fff; border:1px solid var(--bord); border-radius:10px; padding:20px 22px; margin-bottom:20px; }
#ep .ep-grille2 > .ep-carte, #ep .ep-grille3 > .ep-carte { margin-bottom:0; }
#ep .ep-carte h2 { margin:0 0 4px; font-size:18px; color:var(--marine); display:flex; align-items:center; gap:10px; line-height:1.3; font-weight:700; text-transform:none; }
#ep .ep-carte h2 > i { color:var(--bleu); }
#ep .ep-carte h2 .nb { background:var(--marine); color:#fff; border-radius:10px; font-size:12px; padding:1px 8px; }
#ep .ep-carte h3 { margin:0 0 6px; font-size:16px; color:var(--marine); display:flex; align-items:center; gap:8px; }
#ep .ep-sous { color:var(--doux); font-size:14px; margin:0 0 16px; }
#ep .ep-section { margin:6px 0 20px; }
#ep .ep-section > h2 { margin:0 0 12px; font-size:19px; color:var(--marine); display:flex; align-items:center; gap:10px; }
#ep .ep-section > h2 > i { color:var(--bleu); }
#ep .ep-tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; border-radius:10px; padding:2px 8px; background:#fbf0e6; color:var(--bleu); }
#ep .ep-tag.vert { background:#e6f4ea; color:#2b8a3e; }
#ep .ep-tag.orange { background:var(--orange); color:#fff; }

/* ---------- Encadré d'information */
#ep .ep-info { display:flex; gap:10px; align-items:flex-start; background:#fff3e6; border-left:4px solid var(--orange); border-radius:8px; padding:10px 14px; font-size:14px; margin-bottom:20px; }
#ep .ep-info > i { color:var(--orange); margin-top:3px; }
#ep .ep-info.bleu { background:#fbf0e6; border-left-color:var(--bleu); }
#ep .ep-info.bleu > i { color:var(--bleu); }

/* ---------- Listes à puces icônes */
#ep ul.ep-liste { list-style:none; margin:10px 0 0; padding:0; font-size:14px; }
#ep ul.ep-liste li { display:flex; gap:10px; padding:6px 0; border-top:1px solid #f3e9e1; }
#ep ul.ep-liste li:first-child { border-top:0; }
#ep ul.ep-liste i { color:var(--orange); width:18px; text-align:center; margin-top:3px; flex:none; }

/* ---------- Liens de navigation (colonne de droite) */
#ep .ep-liens { display:flex; flex-direction:column; margin-top:8px; }
#ep .ep-liens a { display:flex; align-items:center; gap:12px; padding:10px 4px; border-top:1px solid #f3e9e1; text-decoration:none; color:var(--marine); font-weight:600; font-size:14.5px; }
#ep .ep-liens a:first-child { border-top:0; }
#ep .ep-liens a:hover { color:var(--bleu); }
#ep .ep-liens a > i:first-child { width:34px; height:34px; border-radius:8px; background:#fbf0e6; color:var(--bleu); display:flex; align-items:center; justify-content:center; flex:none; }
#ep .ep-liens a span { flex:1; min-width:0; overflow-wrap:anywhere; }
#ep .ep-liens a small { display:block; font-weight:normal; color:var(--doux); font-size:13px; }
#ep .ep-liens a em { font-style:normal; color:var(--orange); }
#ep .ep-liens a > i:last-child { color:#d9c3b1; font-size:12px; }

/* ---------- Étapes numérotées */
#ep .ep-etape { display:flex; gap:14px; align-items:flex-start; }
#ep .ep-num { width:34px; height:34px; border-radius:50%; background:var(--orange); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px; flex:none; }
#ep .ep-etape h3 { margin:4px 0 4px; }
#ep .ep-etape p { margin:0; font-size:14px; color:#444; }
#ep .ep-etapes { display:grid; gap:16px; }

/* ---------- Image d'illustration (guide, plan) */
#ep .ep-guide img, #ep img.ep-image { width:100%; border:1px solid var(--bord); border-radius:8px; display:block; margin:12px 0; }
#ep .ep-guide a.lien { display:flex; align-items:center; justify-content:center; gap:8px; background:#fbf0e6; color:var(--marine); border-radius:8px; padding:11px; font-weight:600; text-decoration:none; }
#ep .ep-guide a.lien:hover { background:#f3e4d6; }

/* ---------- Coordonnées */
#ep .ep-gros { display:inline-flex; align-items:center; gap:8px; font-size:16px; word-break:break-all; font-weight:700; color:var(--marine); text-decoration:none; }
#ep .ep-gros i { color:var(--orange); font-size:16px; }

/* ---------- Formulaires */
#ep .ep-champ { margin-bottom:14px; position:relative; }
#ep .ep-champ label { display:block; font-size:13px; font-weight:600; color:var(--marine); margin:0 0 5px; }
#ep .ep-champ label span { color:#c92a2a; }
#ep .ep-champ input, #ep .ep-champ textarea { width:100%; padding:11px 12px; border:1px solid var(--bord); border-radius:8px; font-size:15px; background:#fff; font-family:inherit; }
#ep .ep-champ input:focus, #ep .ep-champ textarea:focus { outline:none; border-color:var(--bleu); box-shadow:0 0 0 3px rgba(148,64,12,.15); }
#ep .ep-oeil { position:absolute; right:10px; bottom:9px; cursor:pointer; opacity:.7; }
#ep .ep-oeil:hover { opacity:1; }
#ep .ep-erreur { background:#fff1f1; border:1px solid #e9b4b4; color:#c92a2a; border-radius:8px; padding:9px 12px; font-size:14px; margin-bottom:14px; }
#ep .ep-champ textarea { min-height:140px; resize:vertical; line-height:1.5; }
#ep .ep-champs2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
#ep .ep-ok { text-align:center; padding:26px 10px; }
#ep .ep-ok > i { font-size:44px; color:#2b8a3e; display:block; margin-bottom:12px; }
#ep .ep-ok b { display:block; font-size:18px; color:var(--marine); margin-bottom:6px; }
#ep .ep-petit { font-size:13.5px; color:var(--doux); text-align:center; margin-top:12px; }

/* ---------- Tableaux en lignes (devis, commandes, avoirs) */
#ep .ep-entete, #ep .ep-ligne { display:flex; flex-wrap:wrap; align-items:center; column-gap:14px; row-gap:8px; }
#ep .ep-entete > div:nth-child(1), #ep .ep-ligne .num { width:105px; }
#ep .ep-entete > div:nth-child(2), #ep .ep-ligne .date { width:88px; }
#ep .ep-entete > div:nth-child(3), #ep .ep-ligne .mt { width:120px; }
#ep .ep-entete > div:nth-child(4), #ep .ep-ligne .st { flex:1 1 150px; min-width:0; }
#ep .ep-entete { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--doux); font-weight:600; padding:0 12px 8px; border-bottom:1px solid #efe3d9; }
#ep .ep-ligne { padding:12px; border-bottom:1px solid #f3e9e1; font-size:14.5px; }
#ep .ep-ligne:last-child { border-bottom:0; }
#ep .ep-ligne:hover { background:#fdfaf7; }
#ep .ep-ligne .num { font-weight:700; color:var(--marine); }
#ep .ep-ligne .date { color:var(--doux); }
#ep .ep-ligne .mt { font-weight:600; white-space:nowrap; }
#ep .ep-ligne .mt small { font-weight:normal; color:var(--doux); }
#ep .ep-ligne .act { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }
#ep .ep-badge { display:inline-flex; align-items:center; gap:6px; border-radius:20px; padding:4px 11px; font-size:13px; font-weight:600; line-height:1.3; background:#fbf0e6; color:var(--bleu); white-space:nowrap; }
#ep .ep-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
#ep .ep-badge.attente { background:#fff4e5; color:#b35c00; }
#ep .ep-badge.cours { background:#f8efe6; color:#94400c; }
#ep .ep-badge.ok { background:#e9f7ef; color:#1e7a46; }
#ep .ep-badge.fini { background:#f0f2f4; color:var(--doux); }

/* ---------- Vide / divers */
#ep .ep-vide { text-align:center; padding:26px 10px; color:var(--doux); }
#ep .ep-vide > i { font-size:40px; color:#d9c3b1; margin-bottom:12px; display:block; }
#ep .ep-vide .ep-btn { margin-top:14px; }

/* ---------- Responsive */
@media (max-width: 980px) {
	#ep .ep-entete { display:none; }
	#ep .ep-ligne { padding:14px 2px; }
	#ep .ep-ligne .num { width:auto; flex:1 1 auto; } #ep .ep-ligne .mt { width:auto; text-align:right; }
	#ep .ep-ligne .date { width:auto; flex:1 1 auto; font-size:13.5px; order:3; } #ep .ep-ligne .st { flex:0 0 auto; order:4; }
	#ep .ep-ligne .act { order:5; flex-basis:100%; justify-content:flex-start; margin-left:0; }
}
@media (max-width: 900px) {
	#ep .ep-page { grid-template-columns:minmax(0,1fr); }
	#ep .ep-grille2, #ep .ep-grille3, #ep .ep-champs2 { grid-template-columns:1fr; }
	#ep .ep-bandeau h1, #ep .ep-bandeau .ep-titre, #ep .ep-bandeau .int > strong { font-size:20px; }
}
@media (max-width: 560px) {
	#ep .ep-bandeau .int { padding:18px 16px; }
	#ep .ep-bandeau .ep-btn { flex:1 1 100%; }
	#ep .ep-page { padding:16px 12px 0; }
	#ep .ep-carte { padding:16px 14px; }
	#ep .ep-ligne .act .ep-btn { flex:1 1 130px; }
}