/* ===== 2CAE – feuille de style commune ===== */
:root{
  --bleu:#4A6572; --bleu-fonce:#344955; --nav:rgba(43,60,68,.95);
  --jaune:#FFCC00; --fond:#f4f4f4; --texte:#333; --gris:#666;
  --header-h:200px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",Arial,sans-serif;background:var(--fond);color:var(--texte);line-height:1.6}
a{color:var(--bleu)}
:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}

/* --- En-tête unique --- */
.site-header{background:var(--bleu);color:#fff;height:var(--header-h);position:relative;
  display:flex;justify-content:center;align-items:center;padding-bottom:48px;
  box-shadow:0 4px 10px rgba(0,0,0,.25);z-index:100}
.marque{display:flex;align-items:center;gap:22px;color:#fff;text-decoration:none}
.marque img{width:96px;height:96px}
.marque-nom{margin:0;font-size:34px;letter-spacing:3px;font-weight:700;line-height:1.1}
.marque-sous{margin:4px 0 0;font-size:15px;opacity:.9}

.site-nav{position:absolute;bottom:0;left:0;width:100%;background:var(--nav);padding:12px 10px}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin:0;padding:0}
.site-nav a{color:#fff;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.5px;padding-bottom:4px}
.site-nav a:hover{color:var(--jaune)}
.site-nav a[aria-current="page"]{color:var(--jaune);border-bottom:2px solid var(--jaune)}

/* --- Pages de contenu --- */
.page{max-width:800px;margin:40px auto;background:#fff;padding:50px 60px;border-radius:4px;
  box-shadow:0 2px 15px rgba(0,0,0,.08)}
.page h1{color:var(--bleu);font-size:24px;text-transform:uppercase;letter-spacing:1px;margin-top:0}
.page h2{color:var(--bleu);font-size:19px;margin:32px 0 8px;border-bottom:1px solid #eee;padding-bottom:4px}

/* --- Pied de page --- */
.site-footer{text-align:center;font-size:13px;color:var(--gris);padding:20px 10px 30px}
.site-footer a{color:var(--gris)}

/* --- Mobile --- */
@media (max-width:640px){
  :root{--header-h:190px}
  .marque{gap:14px}
  .marque img{width:70px;height:70px}
  .marque-nom{font-size:26px}
  .marque-sous{font-size:13px}
  .site-nav ul{gap:6px 16px}
  .site-nav a{font-size:12.5px}
  .page{margin:20px 12px;padding:28px 22px}
}