/* ============================================================
   NIDOO — Direction artistique 2026 : « découpage »
   Base commune (application, accueil, pages légales) : couleurs, typographie, grain, boutons, formes.
   Inspiration : papiers découpés, aplats vifs, titres très gras, bords festonnés, bandeaux qui défilent.
   ============================================================ */
:root {
    --ink: #1E1B3A;
    --ink-soft: #4A4670;
    --cream: #F6F0E1;
    --paper: #FFFBF2;
    --line: rgba(30, 27, 58, 0.16);

    --yellow: #FFD23F;   --yellow-soft: #FFE68C;
    --pink: #F58CC2;     --pink-soft: #FBCFE4;
    --lilac: #CFC8F4;    --lilac-soft: #E9E5FB;
    --blue: #2F62F5;     --blue-soft: #D6E0FF;
    --coral: #FF7A59;    --coral-soft: #FFD5C8;
    --green: #17795A;    --green-soft: #CDEBD9;
    --lime: #CBE56F;
    --teal: #3DBBA3;

    --font-display: 'Bricolage Grotesque', 'Nunito', system-ui, sans-serif;
    --font-body: 'Nunito', system-ui, -apple-system, sans-serif;

    --r-card: 28px;
    --r-md: 18px;
    --r-sm: 12px;
    --pop: 0 5px 0 var(--ink);
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; }

/* Grain : léger bruit sur tout l'écran, pour l'aspect « papier » */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9990; opacity: 0.6; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em; line-height: 1.05; color: var(--ink); }

/* Formes décoratives : <svg class="shape" style="color:var(--pink)"><use href="shapes.svg#blob1"/></svg> */
.shape { display: block; width: 100%; height: 100%; overflow: visible; }
.shape-abs { position: absolute; pointer-events: none; }

/* Bouton principal : pastille sombre avec une flèche jaune */
.btn, .btn-ghost {
    display: inline-flex; align-items: center; gap: 10px; border: 2px solid var(--ink); border-radius: 999px;
    padding: 12px 14px 12px 22px; font: 800 0.95rem var(--font-body); text-decoration: none; cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s; box-shadow: 0 4px 0 var(--ink);
}
.btn { background: var(--ink); color: var(--cream); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn:hover, .btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active, .btn-ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn .arrow, .btn-ghost .arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 1rem; }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow .arrow { background: var(--ink); color: var(--yellow); }

/* Bords festonnés : <div class="scallop" style="--sc:var(--paper)"> */
.scallop { position: relative; isolation: isolate; padding: 34px; margin: 16px; }
.scallop::before {
    content: ""; position: absolute; inset: -14px; z-index: -1;
    --c: var(--sc, var(--paper));
    background:
        radial-gradient(circle at 50% 50%, var(--c) 13px, transparent 14px) top left / 28px 28px repeat-x,
        radial-gradient(circle at 50% 50%, var(--c) 13px, transparent 14px) bottom left / 28px 28px repeat-x,
        radial-gradient(circle at 50% 50%, var(--c) 13px, transparent 14px) top left / 28px 28px repeat-y,
        radial-gradient(circle at 50% 50%, var(--c) 13px, transparent 14px) top right / 28px 28px repeat-y,
        linear-gradient(var(--c), var(--c)) center / calc(100% - 28px) calc(100% - 28px) no-repeat;
    filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
}

/* Bandeau qui défile */
.ticker { overflow: hidden; background: var(--yellow); border-block: 2px solid var(--ink); }
.ticker-track { display: flex; width: max-content; gap: 0; animation: ticker 34s linear infinite; }
.ticker-track span { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; padding: 10px 22px; display: inline-flex; align-items: center; gap: 22px; }
.ticker-track i { display: inline-block; width: 22px; height: 22px; color: var(--pink); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } * { scroll-behavior: auto !important; } }

/* Navigation au clavier : anneau bien visible */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }