/* ============================================================
   ESCOM — Inner pages : À propos, Contact, Legal
   ============================================================ */

/* ---------- À PROPOS ---------- */
.about-intro { display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:center; }
.about-intro h2 { font-size: clamp(28px,3.2vw,40px); margin-bottom: 20px; }
.about-intro p { font-size: 17px; color: var(--ink-soft); margin: 0 0 16px; }
.about-visual {
  aspect-ratio: 4/3; border-radius: var(--r-lg); background: var(--grad);
  position: relative; overflow: hidden; box-shadow: var(--shadow-md);
  display:grid; place-items:center;
}
.about-visual::before {
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 16px, transparent 16px 34px);
}
.about-visual img { width: 52%; position: relative; opacity: .96; }
.about-visual .ph { position:absolute; bottom:14px; left:14px; font-family:var(--font-display);
  font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.6);
  border:1px dashed rgba(255,255,255,.4); padding:5px 9px; border-radius:6px; text-transform:uppercase; }

.values { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.value { background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:30px; box-shadow:var(--shadow-sm); }
.value .vic { width:48px; height:48px; border-radius:13px; background:var(--grad); display:grid; place-items:center; margin-bottom:16px; }
.value .vic svg { width:23px; height:23px; color:#fff; }
.value h3 { font-size:19px; margin-bottom:9px; }
.value p { font-size:15px; color:var(--muted); margin:0; }

.about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.about-stats .st b { font-family:var(--font-display); font-size:clamp(34px,4vw,52px);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; }
.about-stats .st span { font-size:14px; color:var(--muted); font-weight:600; }

/* ---------- CONTACT ---------- */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
.contact-info h2 { font-size:28px; margin-bottom:18px; }
.contact-info > p { font-size:17px; color:var(--ink-soft); margin:0 0 30px; }
.contact-list { list-style:none; padding:0; margin:0 0 30px; display:grid; gap:16px; }
.contact-list li { display:flex; gap:15px; align-items:flex-start; }
.contact-list .ci { width:46px; height:46px; border-radius:13px; background:var(--paper-2); border:1px solid var(--line);
  display:grid; place-items:center; flex:none; }
.contact-list .ci svg { width:21px; height:21px; color:var(--violet); }
.contact-list b { display:block; font-family:var(--font-display); font-size:15px; }
.contact-list span { font-size:15px; color:var(--muted); }

.contact-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:36px; box-shadow:var(--shadow-md);
}
.contact-card h3 { font-size:22px; margin-bottom:6px; }
.contact-card .lead { font-size:15px; color:var(--muted); margin:0 0 24px; }
.field { margin-bottom:18px; }
.field label { display:block; font-weight:600; font-size:14px; margin-bottom:7px; }
.field input, .field textarea, .field select {
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper-2); transition:border .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--bleu); box-shadow:0 0 0 3px rgba(87,165,219,.18); background:#fff;
}
.field textarea { min-height:130px; resize:vertical; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-card .btn { width:100%; justify-content:center; margin-top:6px; }
.form-note { font-size:13px; color:var(--muted); margin-top:14px; text-align:center; }
.form-success {
  display:none; background:rgba(87,165,219,.10); border:1.5px solid var(--bleu);
  color:var(--violet-deep); border-radius:var(--r-md); padding:18px 20px; font-weight:600; font-size:15px;
  align-items:center; gap:12px;
}
.form-success.show { display:flex; }
.form-success svg { width:24px; height:24px; color:var(--bleu); flex:none; }

@media (max-width: 860px) {
  .about-intro { grid-template-columns:1fr; gap:36px; }
  .values { grid-template-columns:1fr; }
  .about-stats { grid-template-columns:1fr 1fr; gap:30px 16px; }
  .contact-grid { grid-template-columns:1fr; gap:36px; }
}

/* ---------- LEGAL ---------- */
.legal { padding: 72px 0 96px; }
.legal-layout { display:grid; grid-template-columns: 240px 1fr; gap: 56px; align-items:start; }
.legal-nav { position:sticky; top:100px; }
.legal-nav h4 { font-family:var(--font-display); font-size:14px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); margin-bottom:14px; }
.legal-nav ul { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.legal-nav a { display:block; font-size:14.5px; color:var(--ink-soft); padding:8px 12px; border-radius:8px;
  border-left:2px solid transparent; }
.legal-nav a:hover { background:var(--paper-2); color:var(--violet); border-left-color:var(--bleu); }
.legal-body { max-width: 720px; }
.legal-body h2 { font-size:24px; margin:44px 0 14px; padding-top:10px; }
.legal-body h2:first-child { margin-top:0; }
.legal-body h3 { font-size:18px; margin:24px 0 8px; }
.legal-body p, .legal-body li { font-size:15.5px; color:var(--ink-soft); line-height:1.75; }
.legal-body ul { padding-left:20px; margin:10px 0; }
.legal-body li { margin-bottom:8px; }
.legal-body .meta { font-size:14px; color:var(--muted); margin-bottom:32px; }
.legal-body a { color:var(--bleu); font-weight:600; }
.legal-body a:hover { text-decoration:underline; }
.legal-card { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 24px; margin:16px 0; }
.legal-card p { margin:4px 0; }

@media (max-width: 820px) {
  .legal-layout { grid-template-columns:1fr; gap:30px; }
  .legal-nav { position:static; }
  .legal-nav ul { grid-auto-flow:column; grid-auto-columns:max-content; overflow:auto; }
}