:root{--nuit:#04161D;--marine:#0A3D4D;--canard:#0D7A8A;--vert:#2EAA7E;--or:#F5B83D;--or-clair:#FFE3A3;--texte:#E6F4F6;--gris:#6AACB5;--ligne:rgba(106,172,181,.28);--max:760px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1100px 600px at 50% -8%,#0A3D4D 0%,var(--nuit) 62%);color:var(--texte);font:17px/1.7 "Segoe UI Variable","Segoe UI",Helvetica,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:#3CDCD7}a:hover{color:var(--or)}
header.site{padding:22px 20px 0;text-align:center}
.logo{display:inline-block;width:84px;height:84px;border-radius:50%;box-shadow:0 0 26px rgba(60,220,215,.28)}
.logo img{display:block;width:100%;height:100%;border-radius:50%}
nav.site{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;padding:14px 16px 0;font-size:15px}
nav.site a{color:var(--gris);text-decoration:none;padding:4px 2px;border-bottom:2px solid transparent}
nav.site a:hover,nav.site a[aria-current]{color:var(--texte);border-color:var(--or)}
main{width:100%;max-width:var(--max);margin:0 auto;padding:28px 20px 48px;flex:1}
h1{font:600 34px/1.25 "Segoe UI Variable","Segoe UI",Helvetica,Arial,sans-serif;color:var(--or-clair);margin:.4em 0 .3em;text-align:center;letter-spacing:.02em}
h2{font:600 22px/1.3 "Segoe UI Variable","Segoe UI",Helvetica,Arial,sans-serif;color:var(--vert);margin:1.8em 0 .4em}
h3{font-size:18px;margin:1.3em 0 .2em;color:var(--texte)}
p,li{color:var(--texte)}
.chapeau{text-align:center;color:var(--gris);font-size:19px;margin-bottom:1.6em}
.carte{background:linear-gradient(160deg,rgba(13,122,138,.16),rgba(10,61,77,.32));border:1px solid rgba(245,184,61,.35);border-radius:14px;padding:18px 22px;margin:18px 0}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.grille .carte{margin:0}
.grille h3{margin-top:0;color:var(--or)}
.maj{color:var(--gris);font-size:14px;text-align:center;margin-top:-.4em}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
th,td{border:1px solid var(--ligne);padding:8px 10px;text-align:left;vertical-align:top}
th{background:rgba(13,122,138,.28);color:var(--texte)}
footer.site{border-top:1px solid var(--ligne);padding:20px;text-align:center;color:var(--gris);font-size:14px}
footer.site a{color:var(--gris)}
.bouton{display:inline-block;background:rgba(245,184,61,.14);color:var(--or-clair);padding:10px 22px;border-radius:999px;text-decoration:none;border:1px solid rgba(245,184,61,.6)}
.bouton:hover{background:rgba(245,184,61,.26);color:#fff}
@media (max-width:520px){body{font-size:16px}h1{font-size:27px}}
.marque{width:44px;height:44px;border-radius:50%;margin-bottom:8px}
.logo img{background:#0b1d12}
.logos{display:flex;gap:18px;justify-content:center;align-items:center}
.lettre{color:var(--or);font-size:1.35em;font-weight:700}
.pastilles{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.pastilles span{border:1px solid rgba(245,184,61,.45);background:rgba(13,122,138,.18);color:var(--texte);border-radius:999px;padding:4px 14px;font-size:15px}