:root{
    --bg:#fffdf6;
    --primary:#2f7de1;
    --secondary:#ffd166;
    --accent:#06d6a0;
    --pink:#ef476f;
    --ink:#264653;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;background:var(--bg);color:var(--ink);font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    line-height:1.4;
}
.hero{
    position:relative;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,32px);
    overflow:hidden;
}
.hero{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.hero::before{
    content:"";position:absolute;inset:-10%;background:
        radial-gradient(circle at 10% 10%, var(--secondary) 0 6%, #0000 6.2%),
        radial-gradient(circle at 30% 80%, var(--accent) 0 6%, #0000 6.2%),
        radial-gradient(circle at 85% 20%, var(--pink) 0 7%, #0000 7.2%),
        radial-gradient(circle at 70% 65%, var(--primary) 0 8%, #0000 8.2%),
        linear-gradient(135deg,#f7f5ff 0%, #fdf9ee 100%);
    opacity:.18;filter:saturate(1.2);
}
.card{
    position:relative;z-index:1;background:#fff;border-radius:28px;padding:clamp(20px,4vw,40px);
    width:min(980px,100%);box-shadow:0 10px 30px rgba(0,0,0,.08);
    border:3px solid #ffffffaa;outline:5px solid #0000;
}
.header{
    display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-bottom:14px;
}
.logo{
    width:88px;height:88px;border-radius:20px;overflow:hidden;background:#fff;border:2px dot-dash #e6e6e6;display:grid;place-items:center;
}
.logo img{max-width:100%;max-height:100%;display:block}
h1{
    margin:0;font-size:clamp(28px,5vw,46px);line-height:1.05;font-weight:900;color:var(--primary);
}
.sub{
    margin:.2rem 0 0;font-weight:700;color:#7a7a7a
}
.content{
    display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start;
}
@media (max-width:840px){
    .content{grid-template-columns:1fr;}
}
.blurb{
    font-size:clamp(18px,2.4vw,20px);
}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:.6rem 0 1rem}
.badge{
    background:var(--secondary);color:#000;border-radius:999px;padding:.35rem .7rem;font-weight:800;font-size:.9rem;
}
.cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.cta > .button {
    align-self: center;
}

.cta-secondary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.cta-secondary .button.facebook { border-color:#dfe9ff; }
.cta-secondary .button.facebook:hover { box-shadow:0 8px 22px rgba(47,125,225,.18); }
.cta-secondary .button {
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 10px;
}
.cta a.button{
    text-decoration:none;background:var(--primary);color:#fff;padding:14px 18px;border-radius:14px;font-weight:900;
    display:inline-flex;gap:10px;align-items:center;box-shadow:0 4px 16px rgba(47,125,225,.25);transition:transform .05s ease, box-shadow .2s ease;
}
.cta a.button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(47,125,225,.25)}
.cta a.ghost{background:#fff;border:2px solid #e8eefb;color:var(--primary)}
.info{display:grid;gap:10px}
.info .row{display:flex;gap:10px;align-items:flex-start}
.icon{
    width:22px;height:22px;flex:0 0 22px;display:inline-grid;place-items:center;margin-top:2px
}
.icon svg{width:22px;height:22px}
.info a{color:var(--ink);text-decoration:none;border-bottom:2px solid #0000}
.info a:hover{border-bottom-color:#cfe0ff}
.note{margin-top:14px;font-size:.95rem;color:#4a4a4a}
.footer-note{margin-top:22px;font-size:.85rem;color:#6a6a6a}
.doodles{
    position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.18
}
.doodles svg{position:absolute}
.doodles .sun{top:4%;right:6%}
.doodles .pencil{bottom:6%;left:6%}
.doodles .abc{top:18%;left:8%}
.cta > .button {
    position: relative;
}
.cta > .button::after {
    content: "Le dossier sera bientôt disponible";
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.25s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    z-index: 5;
}

.cta > .button.show-tooltip::after,
.cta > .button.show-tooltip::before {
    opacity: 1;
}
.site-footer{
    text-align:center;
    font-size:.9rem;
    color:#777;
    padding:20px 0 0;
}
.site-footer a{
    color:var(--primary);
    text-decoration:none;
    font-weight:700;
}
.site-footer a:hover{ text-decoration:underline; }
.hero::before{
    pointer-events: none;
    z-index: 0;
}
.card{ position: relative; z-index: 1; }
.site-footer{ position: relative; z-index: 1; }