/* ============================================================
   FOSCO SARL — pages complémentaires (références, mentions légales, 404)
   Chargé après styles.css
   ============================================================ */

/* hero plus compact pour pages secondaires */
.phead.compact .inner{padding:clamp(24px,3.2vw,42px)}
.phead.compact h1{font-size:clamp(28px,4vw,52px)}

/* bandeau CTA avant le pied de page */
.ctaband{padding:0 0 clamp(34px,5vw,60px)}
.ctaband .in{background:linear-gradient(120deg,var(--petrol),#12707F);color:#fff;border-radius:var(--r);
  padding:clamp(24px,3.4vw,44px);display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;
  position:relative;overflow:hidden;box-shadow:var(--sh-h)}
.ctaband .in::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,182,91,.26),transparent 70%);right:-120px;top:-160px;pointer-events:none}
.ctaband h2{font-size:clamp(24px,2.7vw,36px);max-width:560px}
.ctaband p{color:rgba(255,255,255,.84);font-size:15px;margin-top:10px;max-width:520px}
.ctaband .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;position:relative}

/* chiffres */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:#fff;border-radius:var(--r-sm);padding:20px;box-shadow:var(--sh)}
.stat b{display:block;font-family:var(--f-disp);font-size:clamp(28px,3vw,40px);font-weight:800;
  letter-spacing:-.04em;line-height:1;color:var(--petrol)}
.stat span{display:block;font-size:12.5px;color:#6D838B;margin-top:6px;line-height:1.4}

/* secteurs */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sector{background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:8px}
.sector .ico{width:38px;height:38px;border-radius:12px;background:var(--mint);display:grid;place-items:center;color:var(--petrol)}
.sector .ico svg{width:18px;height:18px}
.sector h3{font-size:17px;line-height:1.2;margin-top:4px}
.sector p{font-size:13.5px;color:#5A717A;line-height:1.5}

/* exemples de prestations */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.case{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column}
.case .im{aspect-ratio:16/10;overflow:hidden;background:#E9F0EE}
.case .im img{width:100%;height:100%;object-fit:cover}
.case .bd{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.case h3{font-size:17px;line-height:1.22}
.case p{font-size:13.5px;color:#5A717A;line-height:1.5}
.case ul{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:5px}
.case li{font-size:12.5px;color:#3E555E;display:flex;gap:7px;line-height:1.4}
.case li::before{content:"—";color:var(--teal);flex:0 0 auto}
.case .tag{margin-top:auto;padding-top:12px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--petrol);border-top:1px solid var(--line)}

/* emplacements logos clients */
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.slot{aspect-ratio:16/9;border-radius:var(--r-sm);border:1.5px dashed #C9D8D4;background:#FBFDFC;
  display:grid;place-items:center;text-align:center;padding:14px}
.slot span{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#9AAEAB;line-height:1.6}
.slotimg{aspect-ratio:16/9;border-radius:var(--r-sm);background:#fff;box-shadow:var(--sh);display:grid;place-items:center;padding:14px}
.slotimg img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.8;transition:.3s}
.slotimg:hover img{filter:none;opacity:1}

/* encart d'information (placeholder / avertissement interne) */
.notice{display:flex;gap:12px;background:var(--sand-soft);border-radius:var(--r-sm);padding:14px 16px;
  font-size:13px;color:#6B4A13;line-height:1.55}
.notice b{display:block;font-size:13px;color:#5A3D0C;margin-bottom:2px}
.notice svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:#B57C24}

/* ============ mentions légales ============ */
.legal{display:grid;grid-template-columns:.34fr .66fr;gap:clamp(20px,3vw,44px);align-items:start}
.toc{position:sticky;top:100px;background:#fff;border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.toc .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#6D838B;margin-bottom:10px;display:block}
.toc ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;counter-reset:toc}
.toc a{display:block;padding:8px 0;font-size:13.5px;color:#3E555E;border-bottom:1px solid #F1F6F5;line-height:1.4}
.toc a:hover{color:var(--petrol)}
.legal-body{background:#fff;border-radius:var(--r);padding:clamp(22px,3.2vw,44px);box-shadow:var(--sh)}
.legal-body section{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid #F1F6F5}
.legal-body section:last-child{border:0;margin:0;padding:0}
.legal-body h2{font-size:clamp(20px,2vw,25px);margin-bottom:12px;letter-spacing:-.02em}
.legal-body h3{font-family:var(--f-body);font-size:15px;font-weight:700;letter-spacing:0;margin:18px 0 6px}
.legal-body p{font-size:14.5px;color:#3E555E;line-height:1.7;margin-bottom:10px}
.legal-body ul{margin:8px 0 12px;padding-left:18px}
.legal-body li{font-size:14.5px;color:#3E555E;line-height:1.7;margin-bottom:5px}
.legal-body a{color:var(--petrol);text-decoration:underline;text-underline-offset:2px}
.legal-body .fill{background:#FFF4E2;border-bottom:1px dashed #D8A65A;padding:0 3px;font-weight:500;color:#7A5210;white-space:nowrap}
table.id{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:14px}
table.id th,table.id td{text-align:left;padding:9px 10px;border-bottom:1px solid #F1F6F5;vertical-align:top;color:#3E555E;line-height:1.5}
table.id th{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:#6D838B;font-weight:400;width:38%;background:#FBFDFC}
.legal-date{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8AA0A6;margin-top:18px}

/* ============ 404 ============ */
.err{min-height:78vh;display:grid;place-items:center;padding:120px 0 60px;text-align:center}
.err .big{font-family:var(--f-disp);font-size:clamp(96px,18vw,220px);font-weight:800;letter-spacing:-.06em;
  line-height:.85;background:linear-gradient(140deg,var(--petrol),var(--teal));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.err p{color:var(--ink-soft);margin:18px auto 26px;max-width:440px}
.err .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ============ responsive additions ============ */
@media(max-width:1150px){
  .logos{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .legal{grid-template-columns:1fr}
  .toc{position:static}
  .ctaband .in{grid-template-columns:1fr}
  .ctaband .acts{justify-content:flex-start}
  .sectors,.cases{grid-template-columns:1fr 1fr}
  .statrow{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .sectors,.cases,.logos{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr 1fr}
  .legal-body{padding:20px}
}

/* impression : documents lisibles sur papier */
@media print{
  .topbar,.wa,.ctaband,.strip,.phead .inner{display:none}
  body{background:#fff}
  .legal-body,.toc{box-shadow:none;border:1px solid #ddd}
}

/* images de cartes : toujours contenues dans leur cadre (les attributs width/height ne doivent pas imposer de hauteur) */
.fcell .im img{width:100%;height:100%;max-height:none;object-fit:contain}
.fcell .im{background:#F7FAF9}
.hb .photo img{width:100%;height:100%;object-fit:cover}
.tcard .im img{width:100%;height:100%;object-fit:cover}

/* comparateur avant/après : format 3/2 pour ne pas rogner les photos source */
.ba{aspect-ratio:3/2}
@media(max-width:620px){.ba{aspect-ratio:4/3}}