:root {
  --paper:      #F7F8FA;
  --paper-2:    #EAEDEF;
  --card:       #FFFFFF;
  --marine:     #132A64;
  --marine-2:   #0C1E4A;
  --bleu:       #2F5AB0;
  --bleu-2:     #3D7EE8;
  --or:         #E8A83D;
  --or-texte:   #A06B15;
  --encre:      #2C3E50;
  --encre-2:    #64707D;
  --ligne:      #DDE1E6;
  --ligne-2:    #C8CACC;
  --brume:      #E9EFF7;
  --bleu-glace: #86ADF1;

  --ok-bg:      #E3F0E7;  --ok-ink:    #1E6B43;
  --warn-bg:    #FAEEDA;  --warn-ink:  #8A5A12;
  --late-bg:    #F9E4E1;  --late-ink:  #A03227;
  --draft-bg:   #EAEDEF;  --draft-ink: #5E6165;

  --serif: "DM Serif Display", "Georgia", serif;
  --sans:  "DM Sans", "Segoe UI", sans-serif;
  --mono:  "DM Mono", "Consolas", monospace;

  --r: 14px;
  --shadow: 0 1px 2px rgba(12,30,74,.05), 0 12px 32px -18px rgba(12,30,74,.25);
}

* { margin:0; padding:0; box-sizing:border-box; }

[hidden] { display:none !important; }

html { scroll-behavior:smooth; scroll-padding-top: 105px; }

:focus-visible {
  outline: 2.5px solid var(--or);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(12,30,74,.45);
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--encre);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--marine); color: var(--paper); }


.skip-lien {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--marine); color: #fff;
  font-weight: 600; font-size: .9rem; text-decoration: none;
  padding: 12px 22px; border-radius: 999px;
  box-shadow: 0 12px 28px -10px rgba(12,30,74,.55);
  transition: top .2s ease;
}
.skip-lien:focus { top: 12px; }

.visuel-cache {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

img { max-width:100%; display:block; }
a { color: inherit; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }


h1,h2,h3 { font-family: var(--serif); font-weight: 400; color: var(--marine); line-height:1.04; letter-spacing:-.014em; text-wrap: balance; }
.accent-em {
  font-style: normal;
  font-weight: 400;
  color: var(--bleu);
}

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-2);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before {
  content:""; width:9px; height:9px; border-radius:50%; flex:none;
  background: var(--or);
}
.eyebrow::after {
  content:""; flex:1; min-width:24px; height:1px; align-self:center;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 26%, transparent), transparent);
}

.num-section {
  font-family: var(--mono);
  color: var(--marine);
  font-weight: 500;
  letter-spacing: .06em;
}

.lead { font-size: 1.2rem; line-height:1.72; color: var(--encre); }
.muted { color: var(--encre-2); }
.small { font-size:.85rem; }


.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--sans); font-weight:600; font-size:.95rem;
  padding: 15px 28px; border-radius: 999px;
  border: 1.5px solid transparent;
  cursor:pointer; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn:active { transform: translateY(1px); }

.btn-marine { background: var(--marine); color:#fff; }
.btn-marine:hover { background: var(--marine-2); box-shadow: 0 12px 28px -12px rgba(12,30,74,.6); transform: translateY(-2px); }
.btn-marine::after {
  content:""; position:absolute; top:0; left:-85%;
  width:55%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
  pointer-events:none;
}
.btn-marine:hover::after { left:130%; }

.btn-ghost { background: transparent; color: var(--marine); border-color: var(--marine); }
.btn-ghost:hover { background: var(--marine); color:#fff; transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(12,30,74,.5); }

.btn-paper { background: var(--paper); color: var(--marine); }
.btn-paper:hover { background:#fff; }

.btn .fleche { transition: transform .15s ease; }
.btn:hover .fleche { transform: translateX(4px); }


.preheader {
  background: var(--marine);
  color: rgba(255,255,255,.85);
  font-size:.78rem; letter-spacing:.06em;
  text-align:center; padding: 7px 16px;
}
.preheader strong { color: var(--or); font-weight:600; }

header.site {
  position: sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ligne);
  transition: box-shadow .3s ease;
}
header.site.scrolled { box-shadow: 0 10px 30px -18px rgba(12,30,74,.4); }
.site-nav {
  display:flex; align-items:center; gap:34px;
  padding: 12px 0;
}
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.logo img { height:66px; width:auto; display:block; }
.site-nav .liens { display:flex; gap:28px; }
.site-nav .liens a {
  text-decoration:none; font-size:.92rem; font-weight:500; color: var(--encre);
  padding: 4px 0;
  background: linear-gradient(var(--or-texte), var(--or-texte)) left bottom / 0% 2px no-repeat;
  transition: background-size .3s ease, color .15s;
}
.site-nav .liens a:hover { color: var(--marine); background-size: 100% 2px; }
.site-nav .btn { padding: 11px 22px; font-size:.88rem; }

@media (max-width: 900px) {
  .site-nav .liens { display:none; }
}


.entete-min {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 16px 34px;
  border-bottom:1px solid var(--ligne);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  position:sticky; top:0; z-index:40; backdrop-filter: blur(8px);
}
.entete-min .logo img { height:52px; }
.entete-min .contexte {
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--encre-2); display:flex; align-items:center; gap:10px;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 640px) {
  .entete-min { padding: 12px 18px; }
  .entete-min .logo img { height: 44px; }
}
.entete-min a.sortie {
  font-size:.85rem; font-weight:600; color:var(--encre-2); text-decoration:none;
  transition: color .15s;
  display:inline-flex; align-items:center; min-height:44px;
}
.entete-min a.sortie:hover { color:var(--marine); }


.stamp { display:block; }
.stamp text {
  font-family: var(--sans); font-weight:600; font-size:8.2px;
  letter-spacing:.32em; text-transform:uppercase;
  fill: var(--marine);
}
.stamp .coeur {
  font-family: var(--serif); font-weight:400; font-size:26px;
  letter-spacing:0; fill: var(--marine); text-transform:none;
}
.stamp circle { fill:none; stroke: var(--marine); }
.stamp.tourne { animation: tourner 36s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stamp.tourne { animation:none; } }


.carte {
  background: var(--card);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}


footer.site {
  background: var(--marine-2);
  color: rgba(255,255,255,.78);
}
footer.site a { color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
footer.site a:hover { border-bottom-color: var(--or); }
.footer-grille {
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:48px;
  padding: 64px 0 40px;
}
.footer-grille h4 {
  font-family: var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color: rgba(255,255,255,.62);
  margin-bottom: 18px;
}
.footer-grille ul { list-style:none; display:grid; gap:10px; font-size:.92rem; }
.footer-logo { height:52px; width:auto; filter: brightness(0) invert(1); opacity:.92; }
.footer-bas {
  border-top:1px solid rgba(255,255,255,.14);
  padding: 20px 0 84px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.8rem; color: rgba(255,255,255,.65);
}
.footer-bas .credit-ccs { color: rgba(255,255,255,.82); font-weight:600; }
.badge-egalite {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.25); border-radius:999px;
  padding:5px 14px; font-size:.78rem; color:#fff;
}
.badge-egalite::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--or); }
@media (max-width: 800px) {
  .footer-grille { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 44px 0 28px; }
  .footer-grille > div:first-child { grid-column: 1 / -1; }
  .footer-grille h4 { margin-bottom: 12px; }
  .footer-grille ul { gap: 8px; font-size: .88rem; }
}


@keyframes fadeUp {
  from { opacity:0; transform: translateY(26px); }
  to   { opacity:1; transform: none; }
}
@keyframes flotter {
  from { transform: rotate(.8deg) translateY(0); }
  to   { transform: rotate(.8deg) translateY(-9px); }
}

.reveal {
  opacity:0; transform: translateY(26px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--rd, 0s);
}
.reveal.visible { opacity:1; transform:none; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }

.photo-fade { opacity: 0; transition: opacity .8s ease; }
.photo-fade.chargee { opacity: 1; }

.grain { position: relative; }
.grain::before {
  content:""; position:absolute; inset:0; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; pointer-events:none;
  border-radius: inherit;
}
.grain > * { position:relative; z-index:1; }

.retour-haut {
  position: fixed; left: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--marine); color: #fff;
  border: none; cursor: pointer; font-size: 1.05rem;
  box-shadow: 0 12px 28px -10px rgba(12,30,74,.55), 0 0 0 2px var(--or);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(16px) scale(.9);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), background .15s;
  pointer-events: none;
}
.retour-haut.visible { opacity: 1; transform: none; pointer-events: auto; }
.retour-haut:hover { background: var(--bleu); }

.progres {
  position: fixed; top:0; left:0; height:3px; width:0;
  background: linear-gradient(90deg, var(--or), var(--bleu-2));
  z-index:100; pointer-events:none;
  border-radius: 0 3px 3px 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .btn-marine::after { display:none; }
  * { animation-duration: .001s !important; }
}