*{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{--navy:#01102c;--navy2:#071f4d;--gold:#f0b61e;--ink:#10234d;--muted:#5e687b;--paper:#fff;--soft:#f6f7f9}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
.site-header{background:var(--navy);position:relative}
.banner{display:block;width:100%;height:220px;object-fit:cover}
nav{display:flex;justify-content:center;gap:clamp(16px,4vw,52px);padding:16px 20px;border-top:1px solid rgba(231,165,22,.45);background:var(--navy);position:sticky;top:0;z-index:10}
nav a{color:#fff;text-decoration:none;font-size:.94rem;letter-spacing:.04em}
nav a:hover{color:var(--gold)}
.hero,.section{max-width:100%;margin:auto;padding:90px 28px}
.hero{text-align:center;padding-top:100px;padding-bottom:110px}
.eyebrow{color:var(--gold);font-weight:700;letter-spacing:.18em;font-size:.78rem}
h1{font-family:Georgia,serif;font-size:clamp(3rem,8vw,6.4rem);line-height:.95;margin:12px 0 12px;color:var(--navy)}
.subtitle{font-family:Georgia,serif;color:var(--gold);font-size:clamp(1.5rem,3vw,2.3rem);margin:0 0 30px}
.intro,.lead{max-width:760px;margin:0 auto 32px;color:var(--muted);font-size:1.08rem}
.button{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;padding:14px 24px;border:1px solid var(--navy);border-radius:2px}
.button:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.section h2{font-family:Georgia,serif;font-size:clamp(2.2rem,5vw,3.8rem);margin:4px 0 18px;color:var(--navy);text-align:center}
.section>.eyebrow{text-align:center}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:45px}
.card{padding:28px;border:1px solid #e2e5ea;border-top:3px solid var(--gold);background:#fff}
.card h3{margin:0 0 8px;font-family:Georgia,serif;font-size:1.35rem;color:var(--navy)}
.card p{margin:0;color:var(--muted)}
.alt{max-width:none;background:var(--soft);text-align:center}
.alt>*{max-width:1064px;margin-left:auto;margin-right:auto}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.choices div{background:#fff;padding:28px;border-bottom:3px solid var(--gold)}
.choices strong,.choices span{display:block}
.choices strong{color:var(--navy);font-family:Georgia,serif;font-size:1.3rem;margin-bottom:8px}
.choices span,.note{color:var(--muted)}
.note{margin-top:24px;font-size:.9rem}
footer{background:var(--navy);color:#fff;text-align:center;padding:48px 20px}
footer strong{font-size:1.5rem;letter-spacing:.18em}
footer strong span{color:var(--gold)}
footer p{margin:8px 0 0;color:#d9dfec}
@media(max-width:700px){
  .banner{height:150px}
  nav{gap:12px;flex-wrap:wrap}
  nav a{font-size:.82rem}
  .hero,.section{padding:65px 20px}
  .grid,.choices{grid-template-columns:1fr}
}


/* Lever de soleil sur la bannière d'origine */
.banner-stage{
  position:relative;
  width:100%;
  height:220px;
  overflow:hidden;
  background:#03163d;
}

.banner-stage .banner-base{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

/* Soleil : même emplacement que le O, caché derrière le disque blanc au départ */
.sun-animation{
  position:absolute;
  z-index:2;
  left:26.0%;
  top:50%;
  width:6.4vw;
  height:6.4vw;
  max-width:106px;
  max-height:106px;
  min-width:72px;
  min-height:72px;
  border-radius:50%;
  background:var(--gold);
  transform:translate(-50%,-75%);
  animation:none;
}

/* Le O blanc reste devant : le soleil semble réellement passer derrière */
.o-mask{
  position:absolute;
  z-index:3;
  left:26.0%;
  top:50%;
  width:6.4vw;
  height:6.4vw;
  max-width:106px;
  max-height:106px;
  min-width:72px;
  min-height:72px;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
}

@keyframes lever-soleil{
  from{ transform:translate(-50%,-50%); }
  to{ transform:translate(-50%,-75%); }
}

@media(max-width:700px){
  .banner-stage{height:150px}
  .sun-animation,.o-mask{
    left:26.0%;
    width:10vw;
    height:10vw;
    min-width:48px;
    min-height:48px;
  }
}

@media(prefers-reduced-motion:reduce){
  .sun-animation{
    animation:none;
    transform:translate(-50%,-105%);
  }
}