/* Germinal, page de liens (mobile first). Papier #fff, encre #0a0a0a, bleu #2f54ff. */
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/poppins-400-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/poppins-500-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/poppins-600-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/courier-prime-700-normal.woff2) format("woff2")}

:root{--papier:#ffffff;--encre:#0a0a0a;--bleu:#2f54ff;--gris:#5a5a5a;--bord:rgba(47,84,255,.2)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--encre);font-family:"Poppins",system-ui,sans-serif;font-size:15px;line-height:1.5}
a{color:inherit;text-decoration:none}

/* Vague principale : fixée au bas de l'écran, derrière le contenu */
.vague{position:fixed;left:0;bottom:0;width:100%;height:300px;z-index:0;pointer-events:none;display:block}

/* Le contenu défile par-dessus. Le padding du bas laisse remonter les cartes pour voir la vague en entier. */
.page{position:relative;z-index:1;max-width:430px;margin:0 auto;padding:28px 20px 300px;display:flex;flex-direction:column;align-items:center}

.globe{position:relative;width:210px;height:210px}
.globe canvas,.globe img{position:absolute;left:0;top:0;width:210px;height:210px;display:block}

h1{margin:14px 0 0;text-align:center;font-family:"Courier Prime","Courier New",monospace;font-weight:700;font-size:26px;line-height:1.12;letter-spacing:-.025em}
h1 span{color:var(--bleu)}

.liens{align-self:stretch;margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.carte{display:block;border-radius:8px;transition:filter .2s ease,background-color .2s ease}
.carte:focus-visible{outline:2px solid var(--encre);outline-offset:3px}

/* flèche en trait (jamais remplie) */
.fl{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;color:var(--bleu)}

/* Carte MSF : bleu plein, sa propre vague claire en bas */
.msf{grid-column:1/-1;position:relative;overflow:hidden;height:140px;padding:16px;background:var(--bleu);color:#fff}
.msf canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.msf .fl{color:#fff}
.msf-haut{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.msf-titre{display:block;font-weight:600;font-size:24px;line-height:1.1;letter-spacing:-.02em}
.msf-sous{display:block;margin-top:6px;font-size:13px;line-height:1.35}
.msf:hover{filter:grayscale(1)}

/* Cartes en verre : un peu blanches, un peu bleutées, reflet très discret en haut et dans les coins */
.verre{position:relative;isolation:isolate;overflow:hidden;
  background-color:rgba(255,255,255,.6);
  background-image:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(222,232,255,.32) 100%);
  -webkit-backdrop-filter:blur(4px) saturate(1.15);backdrop-filter:blur(4px) saturate(1.15);
  border:1px solid var(--bord);box-shadow:0 8px 22px rgba(47,84,255,.07)}
.verre::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.95) 12%,rgba(255,255,255,.95) 88%,rgba(255,255,255,0) 100%)}
.verre::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(46px 20px at 0 0,rgba(255,255,255,.8),rgba(255,255,255,0) 72%),
    radial-gradient(46px 20px at 100% 0,rgba(255,255,255,.8),rgba(255,255,255,0) 72%),
    radial-gradient(30px 14px at 0 100%,rgba(255,255,255,.35),rgba(255,255,255,0) 72%),
    radial-gradient(30px 14px at 100% 100%,rgba(255,255,255,.35),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 7px)}
/* survol : toute la carte se grise, pas de changement de contour, pas de déplacement */
.verre:hover{background-image:none;background-color:rgba(228,228,228,.88)}
.verre:hover .mk{background:#8a8a8a}
.verre:hover .fl{color:#8a8a8a}

.site{grid-column:1/-1;display:flex;align-items:center;gap:14px;height:72px;padding:0 16px}
.site-texte{flex:1;font-weight:600;font-size:16px;line-height:1.25;letter-spacing:-.01em}

.tuile{display:flex;flex-direction:column;justify-content:space-between;height:128px;padding:14px}
.haut{display:flex;align-items:flex-start;justify-content:space-between}
.mk{display:block;flex:none;width:18px;height:18px;background:var(--bleu)}
.nom{display:block;font-family:"Courier Prime","Courier New",monospace;font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.03em}
.at{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--gris)}

@media (prefers-reduced-motion:reduce){.carte{transition:none}}