/* 1. Variables et styles globaux */
:root{--red:#ff1737;--ink:#050b14;--muted:#cbd4e0;--line:#243143}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7f9fc;background:#050b14}
a{color:inherit}.wrap{width:min(1160px,92%);margin:auto}

/* 2. En-tête et navigation */
header{min-height:72px;background:rgba(3,8,16,.97);border-bottom:1px solid #1b2635;display:flex;align-items:center;position:sticky;top:0;z-index:5}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 0}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-weight:900;line-height:1.03;font-size:23px;letter-spacing:-.6px}.shield{width:44px;height:48px;background:var(--red);clip-path:polygon(50% 0,100% 18%,91% 70%,50% 100%,9% 70%,0 18%);display:grid;place-items:center;color:white;font-size:24px}.brand small{display:block;color:var(--red);font-size:13px;letter-spacing:.6px}.links{display:flex;align-items:center;gap:22px;font-size:13px;color:#e5eaf2}.links a{text-decoration:none}.links a:first-child{border-bottom:2px solid var(--red);padding:12px 0}.support,.cta{border:0;background:var(--red);color:white;text-decoration:none;font-weight:800;border-radius:12px;padding:14px 20px;box-shadow:0 0 26px #ff173744;cursor:pointer}

/* 3. Bannière principale et formulaire */
.hero{position:relative;isolation:isolate;min-height:510px;display:flex;align-items:center;overflow:hidden;background:#07101c}.hero:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(3,8,16,.98) 0%,rgba(3,8,16,.91) 37%,rgba(3,8,16,.23) 76%,rgba(3,8,16,.35)),url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2000&q=85') center/cover}.hero-inner{padding:52px 0 46px;max-width:720px}.pill{display:inline-flex;gap:9px;align-items:center;background:#202a36;border:1px solid #354254;padding:8px 12px;border-radius:10px;font-size:12px;font-weight:700}.dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red)}
h1{font-size:clamp(38px,5vw,57px);line-height:1.02;letter-spacing:-1.8px;margin:18px 0 16px;font-weight:900}h1 span{color:var(--red)}.intro{font-size:17px;line-height:1.6;color:#d3dce7;max-width:650px;margin-bottom:27px}
.searchbox{display:flex;align-items:center;background:#1c2735;border:1px solid #697789;border-radius:15px;padding:5px;max-width:600px}.searchbox input{min-width:0;flex:1;background:transparent;border:0;outline:0;color:white;font-size:14px;padding:14px}.searchbox input::placeholder{color:#aeb9c8}.searchbox button{white-space:nowrap;padding:17px 22px;border-radius:12px}.notice{font-size:11px;color:#aebdcd;margin-top:15px;line-height:1.6}.platforms{display:flex;flex-wrap:wrap;gap:15px;font-size:13px;font-weight:700;margin-top:18px}.platform{display:flex;gap:7px;align-items:center}.icon{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;background:#172638}.fb{background:#1877f2}.ig{background:linear-gradient(45deg,#ffb800,#e1306c,#833ab4)}.sc{background:#ffeb00;color:#111}

/* 4. Bandeau des avantages */
.benefits{border-top:1px solid #1c2a3b;border-bottom:1px solid #1c2a3b;background:#070e18}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:20px 0}.benefit{display:flex;align-items:center;gap:15px;padding:4px 20px;border-right:1px solid #1c2a3b}.benefit:first-child{padding-left:0}.benefit:last-child{border:0}.bicon{color:var(--red);font-size:31px;font-weight:900}.benefit strong{display:block;font-size:15px}.benefit span{display:block;color:#c4ceda;font-size:12px;line-height:1.45;margin-top:2px}

/* 5. Contenu, cartes, appels à l’action et FAQ */
.content{background:#f8fafc;color:#0b1220;padding:48px 0}.content h2{font-size:clamp(27px,3vw,36px);line-height:1.12;margin:0 0 14px;letter-spacing:-.7px}.content h2 span{color:#e81736}.content h3{font-size:21px;line-height:1.3;margin:30px 0 10px}.content p,.content li{font-size:16px;line-height:1.78;color:#344256}.content a{color:#c9102c;font-weight:700}.content .lead{font-size:18px}.callout{padding:18px 20px;border-left:4px solid var(--red);background:#fff0f2;border-radius:0 12px 12px 0;margin:22px 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}.card{background:white;border:1px solid #dfe6ef;border-radius:14px;padding:20px;box-shadow:0 8px 22px #0b12200a}.card strong{display:block;font-size:17px;margin-bottom:8px}.card p{font-size:14px;margin:0}.darkband{background:#07111f;color:white;padding:36px 0}.darkband p{color:#cbd5e1;line-height:1.7}.darkband h2{font-size:30px}.buttonlink{display:inline-block;background:var(--red);color:white!important;padding:13px 18px;border-radius:10px;text-decoration:none;margin-top:8px}.faq{border-bottom:1px solid #dce3ec;padding:10px 0}.faq h3{margin:12px 0 5px}.faq p{margin:5px 0 15px}

/* 6. Pied de page */
footer{padding:23px 0;background:#030811;border-top:1px solid #1d2a3a;color:#9eacbd;font-size:12px}.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* 7. Adaptation tablette */
@media(max-width:850px){.links{display:none}.hero:before{background:linear-gradient(90deg,rgba(3,8,16,.96),rgba(3,8,16,.75)),url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1200&q=85') center/cover}.benefit-grid{grid-template-columns:repeat(2,1fr);gap:15px}.benefit{border:0;padding:8px 4px}.cards{grid-template-columns:1fr}}

/* 8. Adaptation mobile */
@media(max-width:520px){header{min-height:66px}.brand{font-size:19px}.shield{width:38px;height:42px}.support{padding:11px 13px;font-size:12px}.hero-inner{padding:40px 0 32px}h1{font-size:39px}.intro{font-size:15px}.searchbox{flex-wrap:wrap}.searchbox input{font-size:12px}.searchbox button{width:100%;padding:14px}.benefit-grid{grid-template-columns:1fr 1fr}.benefit{gap:9px}.bicon{font-size:25px}.benefit strong{font-size:13px}.benefit span{font-size:11px}.content{padding:34px 0}.content p,.content li{font-size:15px}}


/* 9. Galerie d’images et vidéo */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 30px}
.photo-card{margin:0;background:#fff;border:1px solid #dfe6ef;border-radius:14px;overflow:hidden;box-shadow:0 8px 22px #0b12200a}
.photo-card img{display:block;width:100%;height:190px;object-fit:cover}
.photo-card figcaption{padding:15px 16px}
.photo-card figcaption strong{display:block;color:#101827;font-size:16px;margin-bottom:6px}
.photo-card figcaption span{display:block;color:#526174;font-size:14px;line-height:1.55}
.video-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#07111f;margin:22px 0}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:850px){.photo-grid{grid-template-columns:1fr}.photo-card img{height:220px}}


/* 10. Liens externes officiels */
#sources-officielles li{margin:12px 0;line-height:1.7}
#sources-officielles a{color:#ff646f;text-decoration:underline;text-underline-offset:3px}
#sources-officielles a:hover{color:#fff}
#sources-officielles small{color:#aeb3bf}


/* 11. Navigation étendue et menu mobile — palette existante conservée */
.menu-toggle{display:none;background:#172638;border:1px solid #354254;color:#fff;border-radius:10px;padding:10px 12px;font:700 13px inherit;cursor:pointer}
.footer-links{display:flex;flex-wrap:wrap;gap:14px}
.footer-links a{color:#cbd4e0;text-decoration:none}
.footer-links a:hover{color:#ff1737;text-decoration:underline}
@media(max-width:850px){
  .nav{position:relative;flex-wrap:wrap}
  .menu-toggle{display:inline-flex;align-items:center;gap:7px;margin-left:auto}
  .links{display:none;order:5;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0;background:#07101c;border:1px solid #243143;border-radius:12px}
  .links.is-open{display:flex}
  .links a,.links a:first-child{padding:12px 14px;border-bottom:1px solid #1c2a3b}
  .links a:last-child{border-bottom:0}
  .support{order:4}
}
@media(max-width:520px){.support{display:none}.footer-links{width:100%;gap:12px}}

/* Correctif navigation : défilement des ancres et menu mobile */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
main section[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 760px) {
  .links.is-open { display: flex !important; }
  .links a { display: block; padding: 12px 10px; }
}


/* Correctifs de mise en page des pages internes */
.content{display:block;width:100%;max-width:none;min-width:0;overflow:hidden}
.content>.wrap{display:block;width:min(1160px,92%);max-width:1160px;min-width:0;margin-left:auto;margin-right:auto}
.content img{display:block;width:auto;max-width:100%;height:auto;max-height:none;object-fit:contain;margin:22px auto;border-radius:16px}
.content h1{font-size:clamp(30px,5vw,48px);line-height:1.08;overflow-wrap:anywhere}
.content p,.content li{overflow-wrap:anywhere}
.content ul{padding-left:1.4em}
@media(max-width:520px){
  .content>.wrap{width:90%}
  .content img{width:100%;height:auto}
  .content h1{font-size:clamp(29px,8vw,38px);letter-spacing:-.6px}
}


/* Navigation finale : liens indépendants et menu mobile accessible */
@media (max-width: 850px) {
  header { z-index: 1000; }
  header .nav { position: relative; }
  header .menu-toggle { display: inline-flex !important; }
  header nav.links { display: none !important; }
  header nav.links.is-open {
    display: flex !important;
    position: relative;
    z-index: 1001;
    flex-basis: 100%;
    width: 100%;
    background: #07101c;
    padding: 8px 0;
  }
  header nav.links a { display: block !important; width: 100%; padding: 13px 15px !important; }
}


/* FIX DEFINITIF — largeur des pages et images sur mobile */
html, body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
body { position: relative; }
main {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
main > .content,
main section.content,
.content {
  display: block !important;
  float: none !important;
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow: visible;
}
.content > .wrap {
  display: block !important;
  float: none !important;
  width: min(1100px, 92%) !important;
  max-width: 1100px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.content img {
  display: block !important;
  width: 100% !important;
  max-width: 760px !important;
  height: auto !important;
  max-height: none !important;
  margin: 22px auto !important;
  object-fit: contain !important;
  position: static !important;
}
.content h1, .content h2, .content h3,
.content p, .content ul, .content li {
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 850px) {
  header { width: 100%; }
  header .nav { width: 92%; gap: 10px; }
  header .brand { flex-shrink: 0; }
  header .menu-toggle {
    display: inline-flex !important;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1002;
  }
  header nav.links { display: none !important; }
  header nav.links.is-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: static !important;
    order: 10;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-top: 8px;
  }
  header nav.links a {
    display: block !important;
    width: 100% !important;
    padding: 13px 15px !important;
    box-sizing: border-box;
  }
  .content > .wrap { width: 90% !important; }
  .content img { width: 100% !important; max-width: 100% !important; }
}


/* Correctif menu mobile — bouton visible, menu au-dessus du contenu */
@media (max-width: 850px) {
  header { position: sticky; top: 0; z-index: 9999; }
  header .nav { display: flex; flex-wrap: wrap; align-items: center; }
  header .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10001;
    min-height: 44px;
    cursor: pointer;
    pointer-events: auto;
  }
  header nav.links { display: none !important; }
  header nav.links.is-open {
    display: flex !important;
    position: relative;
    z-index: 10000;
    flex: 0 0 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    background: #07101c;
    border: 1px solid #243143;
    border-radius: 12px;
    margin-top: 8px;
  }
  header nav.links.is-open a {
    display: block !important;
    width: 100%;
    padding: 14px 15px !important;
  }
}

/* Correctif ciblé : illustrations plus compactes sur les pages Guide */
.content img {
  display: block !important;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  height: auto !important;
  max-height: 320px !important;
  object-fit: contain !important;
  margin: 18px auto !important;
}
@media (max-width: 850px) {
  .content img {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    max-height: 260px !important;
  }
}
/* Menu mobile visible et cliquable sur toutes les pages, dont Contact et FAQ */
@media (max-width: 850px) {
  header { position: sticky; top: 0; z-index: 9999; }
  header .nav { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
  header .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 42px;
    position: relative;
    z-index: 10001;
    pointer-events: auto;
  }
  header nav.links { display: none !important; }
  header nav.links.is-open {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-top: 8px;
    padding: 8px 0;
    background: #07101c;
    border: 1px solid #243143;
    border-radius: 12px;
    z-index: 10000;
  }
  header nav.links.is-open a {
    display: block !important;
    width: 100% !important;
    padding: 13px 15px !important;
  }
}

/* Priorité maximale pour les illustrations des pages éditoriales */
main section.content img {
  display: block !important;
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
  max-height: 260px !important;
  object-fit: contain !important;
  margin: 18px auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 520px) {
  main section.content img {
    max-width: 100% !important;
    max-height: 240px !important;
  }
}


/* Harmonisation SEO : contenu lisible sur mobile, dans l'identité noir/rouge du site */
.content{background:#0a1321!important;color:#f8fafc!important;border-top:1px solid #243246;border-bottom:1px solid #243246}
.content h2,.content h3{color:#f8fafc}
.content h2 span{color:#ff2346}
.content p,.content li{color:#cbd5e1}
.content a{color:#ff7184}
.content .callout{background:#171f2e;border-left-color:#ff2346;color:#f8fafc}
.content .callout strong{color:#fff}
.content .card{background:#111c2b;border-color:#2b394c;color:#f8fafc}
.content .card p{color:#cbd5e1}
.content .faq{border-color:#2b394c}
.content strong{font-weight:800;color:#fff}
.content .photo-card{background:#111c2b;border-color:#2b394c}
.content .photo-card figcaption span{color:#cbd5e1}

/* Galerie et vidéo de présentation — responsive */
.visual-showcase{padding:56px 0 42px;background:#09111e;border-top:1px solid #202b3b;border-bottom:1px solid #202b3b}
.visual-showcase .eyebrow{color:#ff1744;font-weight:800;letter-spacing:.12em;font-size:.78rem;margin:0 0 10px}
.visual-showcase h2{margin:0 0 12px;color:#f8fafc;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.15}
.visual-showcase h2 strong{color:#ff294f}
.showcase-intro{max-width:760px;color:#c6ceda;line-height:1.7}
.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.showcase-card{margin:0;min-width:0;overflow:hidden;background:#111c2b;border:1px solid #29384b;border-radius:16px}
.showcase-card img{display:block;width:100%;height:190px;object-fit:cover;background:#111c2b}
.showcase-card figcaption{padding:15px 16px 17px;display:grid;gap:5px;color:#c6ceda;line-height:1.45}
.showcase-card figcaption strong{color:#fff;font-size:1.05rem}
.video-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050b14}
.video-caption{font-size:.92rem;color:#aeb8c8}
@media(max-width:760px){.visual-showcase{padding:36px 0 28px}.showcase-grid{grid-template-columns:1fr;gap:14px}.showcase-card img{height:190px}.showcase-card figcaption{padding:12px 14px}}


/* MACE logo — transparent asset, responsive sizing */
.brand{display:flex;align-items:center;flex:0 1 auto;min-width:0;text-decoration:none}
.brand-logo{display:block;width:clamp(190px, 28vw, 330px);height:auto;max-height:76px;object-fit:contain;object-position:left center}
@media(max-width:520px){.brand-logo{width:min(54vw, 235px);max-height:60px}}
@media(max-width:370px){.brand-logo{width:min(49vw, 190px);max-height:52px}}

/* Correctif menu mobile pour toutes les pages, y compris les pages légales */
@media (max-width: 850px) {
  header .nav { position: relative; flex-wrap: wrap; }
  header .menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
  header nav.links { display: none !important; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0; }
  header nav.links.is-open { display: flex !important; }
  header nav.links a { display: block; padding: 12px 14px; border-top: 1px solid #243143; }
}