:root {
  --color-bg:#F9F9F9; /* gris très clair */
  --color-accent:#E8C1B1; /* beige rosé doux */
  --color-text:#1E1E1E; /* noir adouci */
  --color-dark:#000000; /* noir pur */
  --color-light:#FFFFFF; /* blanc pur */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins','Segoe UI',Arial,Helvetica,sans-serif;
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.55;
}

/* Header */
.header{
  background:var(--color-light);
  border-bottom:2px solid var(--color-accent);
  text-align:center;
  padding:16px 0 8px;
}
.identity h1{margin:0;font-weight:700;font-size:24px;color:var(--color-dark);letter-spacing:.5px}
.identity p{margin:0;color:#5c5c5c;font-size:15px}
.logo{height:60px;margin-top:8px}
.nav{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding:10px 0}
.nav a{text-decoration:none;color:var(--color-dark);font-weight:500;transition:color .2s}
.nav a:hover,.nav a.current{color:var(--color-accent)}

/* Hero accueil */
.hero{position:relative;min-height:65vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:url('https://p.monumentum.fr/galerie/maxi/00588/588383-.jpg') center/cover no-repeat}
.hero .overlay{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.2)),
  linear-gradient(0deg,rgba(232,193,177,.25),rgba(232,193,177,.25))}
.hero .wrap{position:relative;z-index:1;color:#fff;padding:64px 18px}
.hero h2{font-size:clamp(28px,5vw,52px);margin:0 0 10px;font-weight:700;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.hero p{font-size:clamp(16px,2vw,22px);color:#f1f1f1}

/* Sub-hero for competence pages */
.subhero{position:relative;min-height:40vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Palais_de_justice_de_Paris%2C_salle_d%27audience_de_la_premi%C3%A8re_chambre_de_la_cour_d%27appel.jpg/1600px-Palais_de_justice_de_Paris%2C_salle_d%27audience_de_la_premi%C3%A8re_chambre_de_la_cour_d%27appel.jpg') center/cover no-repeat}
.subhero .overlay{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.25)),
  linear-gradient(0deg,rgba(232,193,177,.18),rgba(232,193,177,.18))}
.subhero .wrap{position:relative;z-index:1;color:#fff;padding:48px 18px}
.subhero h2{margin:0;font-size:clamp(26px,4.6vw,44px);font-weight:700;letter-spacing:.5px;text-shadow:0 2px 4px rgba(0,0,0,.3)}

/* Sections, cards */
.section{max-width:1150px;margin:48px auto;padding:0 18px}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:#fff;border-radius:18px;box-shadow:0 4px 10px rgba(0,0,0,.06);padding:22px}
.small{font-size:13px;color:#666}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;border:2px solid var(--color-accent);color:var(--color-accent);transition:.2s}
.btn-primary{background:var(--color-accent);color:#fff;border:none}
.btn:hover{opacity:.88}
.footer{background:var(--color-dark);color:var(--color-light);text-align:center;padding:20px;margin-top:40px}
.footer a{color:var(--color-light);text-decoration:underline}

/* Breadcrumb */
.breadcrumb{margin:6px 0 18px;opacity:.9}
.breadcrumb.center{text-align:center}
.breadcrumb a{color:#7b4f43;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* Intro paragraph */
.intro{margin:18px auto 0;max-width:900px;text-align:center;color:#444}