@font-face{
    font-family:'Avenger';
    src:url('/assets/fonts/avenger.woff2') format('woff2'),
        url('/assets/fonts/avenger.otf') format('opentype');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

/* =========================
   VARIABLES
========================= */
:root{
    --color-bg: #f4f7f6;
    --color-surface: #ffffff;
    --color-text: #1f2937;
    --color-text-soft: #4b5563;
    --color-text-muted: #6b7280;

    --color-brand: #1e6f9f;      /* bleu océan */
    --color-brand-dark: #155a80; /* bleu océan foncé */
    --color-accent: #f59e0b;     /* soleil */
    --color-accent-dark: #d97706;

    --color-soft: #eef6fb;
    --color-soft-alt: #fff7e8;

    --shadow-main: 0 18px 50px rgba(0,0,0,0.10);
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.06);

    --radius-lg: 18px;
    --radius-md: 16px;
    --radius-sm: 12px;

    --container: 1040px;
}

/* =========================
   GLOBAL
========================= */
*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--color-bg);
    color:var(--color-text);
    line-height:1.6;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    color:var(--color-brand);
    text-decoration:none;
    transition:all .15s ease;
}

a:hover{
    color:var(--color-brand-dark);
}

.container{
    max-width:var(--container);
    margin:0 auto;
    padding:24px;
}

.wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

/* =========================
   TYPO
========================= */
h1,h2,h3,h4{
    margin:0 0 14px;
    line-height:1.25;
    color:var(--color-brand);
}

h1{
    font-size:34px;
}

h2{
    font-size:24px;
}

h3{
    font-size:20px;
}

p{
    margin:0 0 16px;
    font-size:17px;
    color:var(--color-text-soft);
}

ul{
    margin:0 0 18px 20px;
    color:var(--color-text-soft);
}

li{
    margin-bottom:8px;
}

/* =========================
   LOGO
========================= */
.logo{
    font-family:'Avenger', Arial, sans-serif;
    font-size:48px;
    letter-spacing:5px;
    color:#3f6f8f;
    margin-bottom:10px;
    text-align:center;
}

/* =========================
   STRUCTURE
========================= */
.box,
.hero,
.content,
.card,
.step,
.section-box{
    background:var(--color-surface);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-main);
}

.box{
    width:100%;
    max-width:920px;
    padding:38px 32px;
    text-align:left;
    margin-top:22px;
}

.hero{
    padding:34px 28px;
    margin-bottom:28px;
}

.content{
    padding:34px 28px;
}

.section-box{
    padding:24px 22px;
    margin-top:28px;
    box-shadow:var(--shadow-soft);
}

.intro{
    max-width:760px;
    margin:0 auto 10px;
    text-align:left;
}

.note{
    margin-top:20px;
    font-size:14px;
    color:var(--color-text-muted);
}

/* =========================
   BREADCRUMB
========================= */
.breadcrumb{
    font-size:14px;
    color:var(--color-text-muted);
    margin-bottom:18px;
}

.breadcrumb a{
    color:var(--color-brand);
}

/* =========================
   AVANTAGES
========================= */
.avantages{
    margin:22px auto 30px;
    font-size:15px;
    color:var(--color-text);
    max-width:460px;
    text-align:left;
}

.avantages p{
    margin:6px 0;
}

/* =========================
   GRIDS
========================= */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
    margin-bottom:26px;
}

.links-secondary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
    margin-top:18px;
}

.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:18px;
    margin-top:24px;
}

/* =========================
   BUTTONS / LINKS
========================= */
.link-region,
.btn-primary-link{
    display:block;
    text-decoration:none;
    background:var(--color-brand);
    color:#ffffff;
    padding:16px 18px;
    border-radius:var(--radius-sm);
    font-weight:700;
    text-align:center;
    transition:transform .15s ease, opacity .15s ease, background .15s ease;
}

.link-region:hover,
.btn-primary-link:hover{
    transform:translateY(-2px);
    opacity:.98;
    background:var(--color-accent);
    color:#ffffff;
}

.links-secondary a,
.btn-secondary-link{
    display:block;
    text-decoration:none;
    background:var(--color-soft);
    color:var(--color-brand);
    padding:14px 16px;
    border-radius:var(--radius-sm);
    font-weight:700;
    text-align:center;
    transition:transform .15s ease, opacity .15s ease, background .15s ease;
}

.links-secondary a:hover,
.btn-secondary-link:hover{
    transform:translateY(-2px);
    background:var(--color-soft-alt);
    color:var(--color-brand-dark);
}

/* =========================
   CARDS
========================= */
.card{
    padding:24px 22px;
    box-shadow:var(--shadow-soft);
}

.card p{
    font-size:16px;
}

.tag{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    background:var(--color-soft);
    color:var(--color-brand);
    font-size:13px;
    font-weight:700;
    margin-bottom:12px;
}

/* =========================
   STEPS
========================= */
.steps{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-top:22px;
}

.step{
    padding:22px 20px;
    box-shadow:var(--shadow-soft);
}

.step-number{
    display:inline-block;
    min-width:34px;
    height:34px;
    line-height:34px;
    text-align:center;
    border-radius:50%;
    background:var(--color-brand);
    color:#ffffff;
    font-weight:700;
    margin-bottom:10px;
}

.step h2{
    margin-top:0;
    font-size:22px;
}

/* =========================
   FOOTER
========================= */
.footer{
    text-align:center;
    padding:28px 0 40px;
    color:var(--color-text-muted);
    font-size:14px;
}

.footer a{
    color:var(--color-brand);
}

.footer-legal{
    text-align:center;
    margin-top:24px;
    font-size:14px;
    color:var(--color-text-muted);
}

.footer-legal p{
    margin-bottom:10px;
    font-size:14px;
    color:var(--color-text-muted);
}

.copyright{
    margin-top:12px;
    font-size:13px;
    color:#9ca3af;
    text-align:center;
}

/* =========================
   HIDDEN SEO BLOCK
========================= */
.seo-hidden{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:640px){
    .container,
    .wrap{
        padding:18px;
    }

    .box,
    .hero,
    .content,
    .card,
    .step,
    .section-box{
        padding:22px 18px;
    }

    .logo{
        font-size:40px;
        letter-spacing:4px;
    }

    h1{
        font-size:28px;
    }

    h2{
        font-size:22px;
    }

    p{
        font-size:16px;
    }

    .avantages{
        font-size:14px;
    }
}

/* Animation douce de flottement */
@keyframes novaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Classe appliquée à la bulle */
.nova-attention {
  animation: novaFloat 3.5s ease-in-out infinite;
}

/* Pulse sur le bouton (optionnel mais très efficace) */
@keyframes novaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,111,159,0.35); }
  50% { box-shadow: 0 0 0 10px rgba(30,111,159,0); }
}

.nova-pulse {
  animation: novaPulse 2.8s infinite;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .nova-attention,
  .nova-pulse {
    animation: none;
  }
}