.none { display: none !important; }


:root {
--bg-base:       #061818;
--bg-dark:       #030d0d;
--bg-card:       rgba(255,255,255,0.04);
--bg-card-hover: rgba(255,255,255,0.07);
--gold:          #d4a843;
--gold-light:    #e8c060;
--gold-pale:     #cac293;
--gold-brand:    #7f6846;
--text-white:    #ffffff;
--text-muted:    rgba(255,255,255,0.45);
--text-faint:    rgba(255,255,255,0.28);
--border-gold:   rgba(212,168,67,0.18);
--border-subtle: rgba(255,255,255,0.08);
--font-display:  'DM Serif Display', Georgia, serif;
--font-body:     'DM Sans', -apple-system, sans-serif;
--font-brand:    'DM Sans', -apple-system, sans-serif;
--line-color-start: #7f6846;
--line-color-mid:   #cac293;
--t-base:        0.22s;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
font-family: 'DM Sans', -apple-system, sans-serif;
background: var(--bg-base);
color: #fff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }


/* ── Trait vague doré ── */


.gold-underline {
position: relative;
display: inline;
}
.gold-underline::after {
content: '';
position: absolute;
left: -8px;
bottom: -12px;
width: calc(100% + 16px);
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' x2='100%25'%3E%3Cstop offset='0%25' stop-color='%237f6846' stop-opacity='0'/%3E%3Cstop offset='12%25' stop-color='%23a89060' stop-opacity='1'/%3E%3Cstop offset='50%25' stop-color='%23cac293' stop-opacity='1'/%3E%3Cstop offset='88%25' stop-color='%23a89060' stop-opacity='1'/%3E%3Cstop offset='100%25' stop-color='%237f6846' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='3' flood-color='%23d4a843' flood-opacity='0.55'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 16 Q100 2 300 10' fill='none' stroke='url(%23g)' stroke-width='2.5' stroke-linecap='butt' filter='url(%23f)'/%3E%3C/svg%3E") no-repeat center center;
background-size: 100% 100%;
pointer-events: none;
}

/* ── Container centré ── */
.container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 48px;
}

/* ══════════════════════════════════════════
 ÉCRAN 1
══════════════════════════════════════════ */
#s1 {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
/* overflow visible pour laisser la ligne passer derrière le trust bar */
background:
  radial-gradient(ellipse 65% 70% at 68% 42%, #174040 0%, transparent 55%),
  radial-gradient(ellipse 35% 40% at 90% 15%, #112828 0%, transparent 52%),
  linear-gradient(145deg, #071e1e 0%, var(--bg-base) 45%, var(--bg-dark) 100%);
}

/* ── Header ── */
.hdr {
padding-top: 28px;
flex-shrink: 0;
position: relative;
z-index: 10;
}
.hdr__inner {
display: flex;
align-items: center;
gap: 14px;
}
.hdr__logo { height: 58px; width: auto; }
.hdr__text  { display: flex; flex-direction: column; gap: 5px; }
/* Nom marque — Dancing Script cursive, Anima blanc + Breed or */
.hdr__name--v1 {
font-family: var(--font-brand);
font-size: 30px;
font-weight: 400;
letter-spacing: 0.01em;
line-height: 1;
color: #fff;
}
.hdr__name--v1 .breed {
color: var(--gold);
}
.hdr__tag   { font-size: 16px; color: rgba(255,255,255,0.45); line-height: 1; font-weight: 400; }

/* ── Corps ── */
.s1-body {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
padding-top: 36px;
padding-bottom: 28px;
gap: 48px;
position: relative;
z-index: 10;
}

/* Texte gauche */
.s1-left { flex: 1; min-width: 0; }
.s1-title {
font-family: var(--font-display);
font-size: clamp(38px, 4.2vw, 58px);
line-height: 1.1;
letter-spacing: -0.03em;
color: #fff;
margin-bottom: 24px;
max-width: 11em;
}
.s1-title em { font-style: italic; color: #d4a843; }
.s1-slogan {
font-size: 18px;
font-weight: 300;
color: rgba(255,255,255,0.58);
margin-bottom: 14px;
}
.s1-desc {
font-size: 14.5px;
line-height: 1.78;
color: rgba(255,255,255,0.4);
margin-bottom: 40px;
max-width: 42ch;
}
.s1-btn {
display: inline-block;
background: var(--gold);
color: var(--bg-base);
border: 1.5px solid var(--gold);
padding: 14px 32px;
border-radius: 32px;
font-size: 15px;
font-weight: 700;
transition: background .22s, box-shadow .22s, transform .15s;
box-shadow: 0 4px 20px rgba(212,168,67,0.3);
}
.s1-btn:hover {
background: var(--gold-light);
box-shadow: 0 6px 28px rgba(212,168,67,0.45);
transform: translateY(-1px);
}

.s1-btns {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.s1-btn--ghost {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.55);
font-size: 15px;
font-weight: 500;
transition: color .22s;
cursor: pointer;
border: none;
background: none;
font-family: 'DM Sans', sans-serif;
}
.s1-btn--ghost svg {
transition: transform .22s;
}
.s1-btn--ghost:hover {
color: rgba(255,255,255,0.9);
}
.s1-btn--ghost:hover svg {
transform: translateY(4px);
}

/* Téléphone droite */
.s1-right {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 0;
}
.phone-wrap {
position: relative;
display: inline-block;
}
.phone-img {
width: 280px;
height: auto;
filter: drop-shadow(0 20px 50px rgba(0,0,0,0.6))
        drop-shadow(0 4px 16px rgba(0,0,0,0.35));
}

/* ── Notifications ── */
.notif {
position: absolute;
display: flex;
align-items: center;
gap: 9px;
background: rgba(8, 28, 28, 0.92);
border: 1px solid rgba(212,168,67,0.28);
border-radius: 12px;
padding: 10px 15px;
font-size: 12.5px;
font-weight: 500;
color: rgba(255,255,255,0.88);
white-space: nowrap;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 6px 24px rgba(0,0,0,0.45);
line-height: 1;
}
.notif__icon { flex-shrink: 0; display: flex; align-items: center; }

/* Notif 1 — haut gauche : Déclaration SCC */
.notif--1 {
left: -110px;
top: 60px;
}
/* Notif 2 — droite milieu : Vaccin validé */
.notif--2 {
right: -110px;
top: 45%;
transform: translateY(-50%);
}
/* Notif 3 — gauche bas : Iris en chaleur */
.notif--3 {
left: -110px;
bottom: 80px;
}


/* ── Trust bar ── */
.trust {
position: relative;
z-index: 10;
flex-shrink: 0;
background: var(--bg-dark);
border-top: 1px solid rgba(212,168,67,0.15);
padding: 18px 0;
}
.trust__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.trust__badge {
display: flex;
align-items: center;
gap: 7px;
color: #d4a843;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.trust__sep { color: rgba(255,255,255,0.15); font-size: 20px; }
.trust__items {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255,255,255,0.55);
font-size: 13.5px;
flex-wrap: wrap;
justify-content: center;
}
.trust__dot { color: rgba(255,255,255,0.22); }


#s2 {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
/* overflow visible — laisse le fil passer entre les cards */
background:
  radial-gradient(ellipse 55% 65% at 30% 45%, #1e4f4f 0%, transparent 55%),
  radial-gradient(ellipse 35% 40% at 5% 10%, #173838 0%, transparent 52%),
  linear-gradient(225deg, var(--bg-dark) 0%, var(--bg-base) 55%, var(--bg-dark) 100%);
}

/* ── Titre section ── */
.s2-header {
text-align: center;
margin-bottom: 48px;
position: relative;
z-index: 10;
}
.s2-tag {
display: inline-block;
color: var(--gold);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 12px;
}
.s2-title {
font-family: var(--font-display);
font-size: clamp(28px, 3vw, 42px);
color: var(--text-white);
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 14px;
}
.s2-title em { font-style: italic; color: var(--gold); }
.s2-sub {
font-size: 15px;
color: var(--text-muted);
max-width: 48ch;
margin: 0 auto;
line-height: 1.65;
}

/* ── Grille piliers ── */
.s2-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
position: relative;
z-index: 3;
gap: 18px;
position: relative;
z-index: 10;
}
.pilier-card {
position: relative;
z-index: 3;
background: var(--bg-card);
border: 1px solid var(--border-gold);
border-radius: 16px;
padding: 32px 22px 28px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.pilier-card:hover {
background: var(--bg-card-hover);
border-color: rgba(212,168,67,0.4);
transform: translateY(-3px);
z-index: 3;
box-shadow: 0 8px 32px rgba(0,0,0,0.4),
            0 0 24px rgba(212,168,67,0.1),
            inset 0 1px 0 rgba(212,168,67,0.08);
}
.pilier-card__icon {
width: 80px;
height: 80px;
margin-bottom: 4px;
}
.pilier-card__icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.pilier-card__label {
font-size: 11px;
font-weight: 600;
color: var(--gold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pilier-card__title {
font-family: var(--font-display);
font-size: 20px;
color: var(--text-white);
line-height: 1.2;
letter-spacing: -0.01em;
}
.pilier-card__desc {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.7;
max-width: none;
}

/* ── CTA section ── */
.s2-cta {
text-align: center;
margin-top: 44px;
position: relative;
z-index: 10;
}
.s2-cta__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold-pale);
font-size: 14px;
font-weight: 500;
transition: color var(--t-base);
text-decoration: none;
}
.s2-cta__link:hover { color: var(--gold); }
.s2-cta__link svg { transition: transform var(--t-base); }
.s2-cta__link:hover svg { transform: translateX(4px); }

/* ── Responsive ── */


#s3 {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;

background:
  radial-gradient(ellipse 55% 65% at 70% 45%, #1e4f4f 0%, transparent 55%),
  radial-gradient(ellipse 35% 40% at 95% 10%, #173838 0%, transparent 52%),
  linear-gradient(145deg, var(--bg-dark) 0%, var(--bg-base) 60%, var(--bg-dark) 100%);
}

/* ── Titre ── */
.s3-header {
text-align: center;
margin-bottom: 56px;
position: relative;
z-index: 10;
}


/* ── CTA ── */
.s3-cta {
text-align: center;
margin-top: 52px;
position: relative;
z-index: 3;
}
.s3-cta a {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--gold);
font-size: 15px;
font-weight: 600;
border: 1.5px solid rgba(212,168,67,0.5);
padding: 12px 28px;
border-radius: 32px;
background: var(--bg-base);  /* fond opaque pour masquer le fil derrière */
transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.s3-cta a:hover {
border-color: var(--gold);
background: rgba(212,168,67,0.08);
transform: translateY(-1px);
}
.s3-cta a:hover svg { transform: translateX(4px); }
.s3-cta svg { transition: transform var(--t-base); }

/* ── Responsive ── */


#s4 {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;

background:
  radial-gradient(ellipse 55% 65% at 30% 45%, #1e4f4f 0%, transparent 55%),
  radial-gradient(ellipse 35% 40% at 5% 10%, #173838 0%, transparent 52%),
  linear-gradient(225deg, var(--bg-dark) 0%, var(--bg-base) 55%, var(--bg-dark) 100%);
}

.s4-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40px 0;
}


/* Illustration */
.s4-animals {
width: 100%;
max-width: 900px;
margin-bottom: 24px;
filter: brightness(1.1);
}

/* Sous-titre */
.s4-subtitle {
font-family: var(--font-display);
font-size: clamp(26px, 3.5vw, 44px);
color: var(--text-white);
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 22px;
}
.s4-subtitle .gold { color: var(--gold); font-style: italic; }

/* Description */
.s4-desc {
font-size: 15px;
color: var(--text-muted);
line-height: 1.75;
max-width: 52ch;
margin-bottom: 12px;
}

/* Note italique */
.s4-note {
font-size: 13px;
font-style: italic;
color: var(--text-faint);
max-width: 48ch;
line-height: 1.6;
margin-bottom: 24px;
}

/* CTA */
.s4-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--gold);
color: var(--bg-base);
padding: 14px 32px;
border-radius: 32px;
font-size: 15px;
font-weight: 700;
box-shadow: 0 4px 20px rgba(212,168,67,0.3);
transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
text-decoration: none;
}
.s4-cta:hover {
background: var(--gold-light);
transform: translateY(-2px);
box-shadow: 0 6px 28px rgba(212,168,67,0.45);
}
.s4-cta svg { transition: transform var(--t-base); }
.s4-cta:hover svg { transform: translateX(4px); }


#s5 {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
background:
  radial-gradient(ellipse 65% 65% at 50% 50%, #1e4f4f 0%, transparent 58%),
  linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-base) 50%, var(--bg-dark) 100%);
}

.s5-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 0;
}

/* Carte formulaire */
.form-card {
background: var(--bg-card);
border: 1px solid var(--border-gold);
border-radius: 20px;
padding: 40px 36px 32px;
width: 100%;
max-width: 500px;
backdrop-filter: blur(8px);
}
.form-card__title {
font-family: var(--font-display);
font-size: 22px;
color: var(--text-white);
text-align: center;
margin-bottom: 8px;
line-height: 1.3;
}
.form-card__title .gold { color: var(--gold); }
.form-card__sub {
font-size: 13px;
color: var(--text-muted);
text-align: center;
margin-bottom: 28px;
line-height: 1.65;
max-width: none;
}

/* Champs */
.fg { margin-bottom: 12px; }
.fi {
width: 100%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 12px 16px;
color: var(--text-white);
font-size: 14px;
font-family: var(--font-body);
transition: border-color var(--t-base);
}
.fi::placeholder { color: var(--text-faint); }
.fi:focus { border-color: rgba(212,168,67,0.5); outline: none; }
.fi.err { border-color: rgba(220,50,50,0.5); }
.fe { color: #e57373; font-size: 12px; margin-top: 3px; display: block; }

/* Radio */
.fg-label { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; }
.ro {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.75);
font-size: 14px;
margin-bottom: 7px;
cursor: pointer;
}
.ro input { display: none; }
.rc {
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.2);
flex-shrink: 0;
position: relative;
transition: border-color var(--t-base);
}
.rc::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%) scale(0);
width: 8px; height: 8px;
border-radius: 50%;
background: var(--gold);
transition: transform var(--t-base);
}
.ro input:checked ~ .rc { border-color: var(--gold); }
.ro input:checked ~ .rc::after { transform: translate(-50%,-50%) scale(1); }

/* Checkbox */
.cl {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
color: var(--text-muted);
font-size: 13px;
line-height: 1.5;
margin: 14px 0;
}
.cl input { display: none; }
.cc {
width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.2);
border-radius: 3px;
flex-shrink: 0;
margin-top: 1px;
position: relative;
transition: background var(--t-base), border-color var(--t-base);
}
.cl input:checked ~ .cc { background: var(--gold); border-color: var(--gold); }
.cl input:checked ~ .cc::after {
content: '✓';
position: absolute;
top: -2px; left: 1px;
font-size: 11px;
color: var(--bg-base);
font-weight: 700;
}
.gold-link { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.gold-text { color: var(--gold); }

/* Bouton submit */
.btn-submit {
width: 100%;
padding: 14px;
background: var(--gold);
color: var(--bg-base);
border-radius: 32px;
font-size: 15px;
font-weight: 700;
font-family: var(--font-body);
cursor: pointer;
position: relative;
overflow: hidden;
transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
margin-bottom: 10px;
box-shadow: 0 4px 20px rgba(212,168,67,0.3);
}
.btn-submit:hover {
background: var(--gold-light);
transform: translateY(-1px);
box-shadow: 0 6px 28px rgba(212,168,67,0.45);
}
.btn-submit.loading .btn-text { opacity: 0; }
.btn-submit.loading .sp { opacity: 1; }
.sp {
position: absolute; top:50%; left:50%;
transform: translate(-50%,-50%);
width: 18px; height: 18px;
border: 2px solid rgba(0,0,0,0.2);
border-top-color: var(--bg-base);
border-radius: 50%;
animation: spin .7s linear infinite;
opacity: 0;
}
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.form-note {
text-align: center;
color: var(--text-faint);
font-size: 12px;
max-width: none;
}

/* Succès */
.form-ok { display: none; text-align: center; padding: 24px 0; }
.form-ok.show { display: block; }
.form-ok__icon { font-size: 32px; color: #27ae60; display: block; margin-bottom: 12px; }
.form-ok h3 { color: var(--text-white); font-size: 18px; margin-bottom: 6px; }
.form-ok p  { color: var(--text-muted); font-size: 14px; max-width: none; }


.site-footer {
position: relative;
background: linear-gradient(180deg, #020808 0%, #010404 100%);
border-top: 1px solid rgba(212,168,67,0.1);
}

/* Ligne principale */
.footer-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 40px 0;
flex-wrap: wrap;
}

/* Brand */
.footer-brand {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.footer-brand__logo {
height: 46px;
width: auto;
}
.footer-brand__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-brand__name {
font-family: var(--font-brand);
font-size: 24px;
color: var(--text-white);
line-height: 1;
}
.footer-brand__name .breed { color: var(--gold); }
.footer-brand__tag {
font-size: 14px;
color: var(--text-muted);
font-weight: 300;
}

/* Badge conformité */
.footer-badge {
position: relative;
flex-shrink: 0;
}

.footer-badge__text {
position: relative;
padding: 14px 24px;
text-align: center;
border: 1.5px solid rgba(212,168,67,0.35);
border-radius: 10px;
}
.footer-badge__text p {
color: var(--text-muted);
font-size: 13px;
line-height: 1.55;
max-width: none;
}

/* Liens */
.footer-links {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
}
.footer-links a {
color: var(--text-muted);
font-size: 13px;
transition: color var(--t-base);
text-decoration: none;
}
.footer-links a:hover { color: var(--gold); }

/* Baseline */
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.05);
padding: 18px 0;
text-align: center;
}
.footer-bottom p {
color: var(--text-faint);
font-size: 13px;
max-width: none;
margin: 0 auto;
}


/* Piliers — délais par position */
#s2 .pilier-card:nth-child(1) { transition-delay: 0.08s; }
#s2 .pilier-card:nth-child(2) { transition-delay: 0.18s; }
#s2 .pilier-card:nth-child(3) { transition-delay: 0.28s; }
#s2 .pilier-card:nth-child(4) { transition-delay: 0.38s; }

/* ═══════════════════════════════════════════════════════
 ANIMATIONS AU SCROLL — AnimaBreed landing
 Principe : les éléments à animer ont opacity:0 dès le HTML.
 La classe .is-ready sur <body> active les transitions.
 La classe .is-visible déclenche l'animation.
═══════════════════════════════════════════════════════ */

/* États initiaux — transitions désactivées TANT QUE body n'a pas .is-ready */
.reveal {
opacity: 0;
}
.reveal--up    { transform: translateY(28px); }
.reveal--left  { transform: translateX(-28px); }
.reveal--scale { transform: scale(0.95) translateY(16px); }

/* Activer les transitions seulement après que JS a garanti le paint initial */
body.is-ready .reveal {
transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
            transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Déclencher l'animation */
body.is-ready .reveal.is-visible {
opacity: 1;
transform: none;
}

/* Délais de séquençage */
body.is-ready .reveal.d1 { transition-delay: 0.10s; }
body.is-ready .reveal.d2 { transition-delay: 0.20s; }
body.is-ready .reveal.d3 { transition-delay: 0.30s; }
body.is-ready .reveal.d4 { transition-delay: 0.40s; }
body.is-ready .reveal.d5 { transition-delay: 0.50s; }

/* Notifications S1 : latence initiale + séquençage */
body.is-ready .notif--1 { transition-delay: 0.85s; }
body.is-ready .notif--2 { transition-delay: 1.20s; }
body.is-ready .notif--3 { transition-delay: 1.55s; }

/* Piliers — séquence automatique */
body.is-ready #s2 .pilier-card:nth-child(2) { transition-delay: 0.10s; }
body.is-ready #s2 .pilier-card:nth-child(3) { transition-delay: 0.20s; }
body.is-ready #s2 .pilier-card:nth-child(4) { transition-delay: 0.30s; }

/* Timeline items — séquence automatique */
body.is-ready #s3 .tl-item:nth-child(2) { transition-delay: 0.10s; }
body.is-ready #s3 .tl-item:nth-child(3) { transition-delay: 0.20s; }
body.is-ready #s3 .tl-item:nth-child(4) { transition-delay: 0.30s; }


/* ── Wrapper global ── */
.tl-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 10;
}

/* ── Rangée ── */
.tl-row {
  position: relative;
  padding-bottom: 0;
}

/* Ligne horizontale dorée */
.tl-line-wrap {
  position: relative;
  height: 2px;
  margin: 0 0 0 0;
  margin-bottom: 28px;
}
.tl-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(212,168,67,0) 0%,
    rgba(212,168,67,0.7) 8%,
    rgba(212,168,67,0.7) 92%,
    rgba(212,168,67,0) 100%);
}
.tl-row--reverse .tl-line {
  background: linear-gradient(90deg,
    rgba(212,168,67,0) 0%,
    rgba(212,168,67,0.7) 8%,
    rgba(212,168,67,1) 92%,
    rgba(212,168,67,0.3) 100%);
}

/* ── Steps container ── */
.tl-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 16px;
}
.tl-row--reverse .tl-steps {
  grid-template-columns: repeat(3, 1fr);
  max-width: 75%;
}

/* ── Step individuel ── */
.tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding-top: 8px;
}

/* Point sur la ligne */
.tl-step__dot {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,168,67,0.2), 0 0 10px rgba(212,168,67,0.4);
  z-index: 2;
}
.tl-step__dot--final {
  width: 14px;
  height: 14px;
  top: -37px;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212,168,67,0.25), 0 0 16px rgba(212,168,67,0.6);
}

/* Icône */
.tl-step__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-step__icon img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(1.1) sepia(0.2) saturate(1.3);
}

/* Textes */
.tl-step__day {
  display: block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
  line-height: 1.3;
}
.tl-step__title {
  color: var(--text-white);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.3;
  max-width: none;
}
.tl-step__desc {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
  max-width: none;
}

/* ── Connecteur courbe entre rangées ── */
.tl-connector {
  width: 60px;
  height: 40px;
  align-self: flex-end;
  margin-right: calc(12.5% - 30px);
  margin-bottom: 0;
  opacity: 0.6;
}
.tl-connector svg {
  width: 100%;
  height: 100%;
}

/* ── CTA ── */
.s3-cta {
  text-align: center;
  margin-top: 52px;
  position: relative;
  z-index: 3;
}
.s3-cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid rgba(212,168,67,0.5);
  padding: 12px 28px;
  border-radius: 32px;
  background: var(--bg-base);
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.s3-cta a:hover {
  border-color: var(--gold);
  background: rgba(212,168,67,0.08);
  transform: translateY(-1px);
}
.s3-cta a:hover svg { transform: translateX(4px); }
.s3-cta svg { transition: transform var(--t-base); }


/* ═══════════════════════════════════════════════════════
 RESPONSIVE
 1024px — tablette paysage
 768px  — tablette portrait / mobile large
 480px  — mobile
═══════════════════════════════════════════════════════ */

/* ── 1300px — notif vaccin trop débordante à droite ── */
@media (max-width: 1300px) {
.notif--2 { right: -45px !important; }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
/* S1 — colonne unique */
.s1-body {
  flex-direction: column;
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
  gap: 32px;
}
.s1-title { max-width: none; }
.s1-desc  { max-width: 52ch; margin: 0 auto 28px; }
.s1-btns  { justify-content: center; }
.s1-right { width: 100%; justify-content: center; }
.phone-img { width: 240px; }
.notif--1 { left: -90px; top: 40px; }
.notif--3 { left: -90px; bottom: 60px; }

/* S2 — 2 colonnes */
.s2-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 768px ── */
@media (max-width: 768px) {

/* ── S1 ── */
.s1-body {
  flex-direction: column;
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
  gap: 28px;
}
.s1-left { order: 1; }
.s1-right { order: 2; width: 100%; justify-content: center; }
.s1-title { max-width: none; font-size: clamp(30px, 6vw, 42px); }
.s1-slogan { font-size: 16px; }
.s1-desc { max-width: none; margin: 0 auto 28px; }
.s1-btns { justify-content: center; }
.phone-img { width: 200px; }
.notif { font-size: 11.5px; padding: 8px 11px; gap: 7px; }
.notif--1 { left: -70px; top: 35px; }
.notif--2 { right: -70px; top: 45%; }
.notif--3 { left: -70px; bottom: 50px; }

/* Trust bar */
.trust__inner { flex-direction: column; gap: 8px; text-align: center; }
.trust__sep { display: none; }
.trust__items { justify-content: center; }

/* ── S2 ── */
.s2-grid { grid-template-columns: 1fr; gap: 14px; }
.s2-header { margin-bottom: 32px; }
.pilier-card { flex-direction: row; text-align: left; padding: 20px; gap: 0; align-items: center; }
.pilier-card__icon { width: 52px; height: 52px; flex-shrink: 0; margin-bottom: 0; margin-right: 14px; }
.pilier-card__label { width: 110px; flex-shrink: 0; margin: 0; padding-right: 14px; border-right: 1px solid rgba(212,168,67,0.15); }
.pilier-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-left: 14px; }
.pilier-card__title { font-size: 16px; }
.pilier-card__desc { font-size: 13px; }
.s2-cta { margin-top: 28px; }

/* ── S3 — timeline verticale ── */
.tl-line-wrap { display: none; }
.tl-connector { display: none; }
.tl-steps { display: flex; flex-direction: column; gap: 16px; }
.tl-row--reverse .tl-steps { max-width: 100%; }
.tl-wrapper { position: relative; padding-left: 24px; gap: 16px; }
/* Ligne verticale gauche */
.tl-wrapper::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, rgba(212,168,67,0.2) 0%, rgba(212,168,67,0.7) 20%, rgba(212,168,67,0.7) 80%, rgba(212,168,67,0.2) 100%);
}
.tl-step {
  flex-direction: row;
  text-align: left;
  align-items: center;
  gap: 0;
  position: relative;
  padding: 10px 0;
}
.tl-step__dot {
  position: absolute;
  left: -29px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
}
.tl-step__dot--final {
  left: -31px;
  width: 14px;
  height: 14px;
}
.tl-step__icon { width: 44px; height: 44px; flex-shrink: 0; margin-bottom: 0; margin-right: 14px; }
.tl-step__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.tl-step__day { font-size: 11px; display: block; }
.tl-step__title { font-size: 14px; font-weight: 600; }
.tl-step__desc { font-size: 12px; }
.s3-header { margin-bottom: 28px; }

/* ── S4 ── */
.s4-animals { max-width: 100%; }
.s4-subtitle { font-size: clamp(22px, 5vw, 32px); }
.s4-desc, .s4-note { max-width: none; }

/* ── S5 ── */
.s5-content { padding: 48px 16px; }
.form-card { padding: 36px 24px 28px; box-sizing: border-box; }

/* ── Footer ── */
.footer-main {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 20px 32px;
  align-items: start;
  padding: 32px 0;
}
.footer-brand {
  grid-column: 1;
  grid-row: 1;
}
.footer-links {
  grid-column: 1;
  grid-row: 2;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.footer-badge {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.footer-badge__text { padding: 12px 18px; }
.footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
}

/* ── 480px — mobile ── */
@media (max-width: 480px) {
.container { padding: 0 18px; }

/* Header */
.hdr { padding-top: 20px; }
.hdr__logo { height: 44px; }
.hdr__name--v1 { font-size: 24px; }
.hdr__tag { font-size: 13px; }

/* S1 */
.s1-title { font-size: clamp(22px, 6vw, 30px); }
.s1-body { padding-top: 16px; }
.s1-slogan { font-size: 15px; }
.phone-img { width: 170px; }
/* Notifs masquées sur très petit écran — trop débordantes */
.notif { font-size: 10.5px; padding: 6px 9px; gap: 6px; white-space: nowrap; }
.notif--1 { left: -10px; top: 20px; }
.notif--2 { right: -10px; top: 42%; }
.notif--3 { left: -10px; bottom: 30px; }

/* S2 */
.pilier-card { flex-direction: column; text-align: center; padding: 24px 18px; }
.pilier-card__icon { width: 60px; height: 60px; }
.s2-title { font-size: clamp(24px, 6vw, 32px); }

/* S3 */
/* S3 — géré par 768px */
.s3-header { margin-bottom: 28px; }

/* S4 */
.s4-content { padding-top: 48px; padding-bottom: 48px; }

/* S5 */
.s5-content { padding: 40px 12px; }
.form-card { padding: 32px 18px 24px; width: 100%; box-sizing: border-box; }

/* Footer mobile */
.footer-main { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 0; }
.footer-links { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.footer-badge { width: 100%; }
.footer-badge__text { text-align: center; padding: 10px 16px; }

/* Trust */
.trust { padding: 14px 0; }
.trust__items { gap: 6px; font-size: 12px; }
.trust__dot { display: none; }
.trust__items span { display: block; text-align: center; }
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}/* ══════════════════════════════════════════
   ÉCRAN 3 — TIMELINE GESTATION
══════════════════════════════════════════ */
#s3 {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(ellipse 55% 65% at 70% 45%, #1e4f4f 0%, transparent 55%),
    radial-gradient(ellipse 35% 40% at 95% 10%, #173838 0%, transparent 52%),
    linear-gradient(145deg, var(--bg-dark) 0%, var(--bg-base) 60%, var(--bg-dark) 100%);
}

.s3-header {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 10;
}

/* ── Honeypot anti-spam — invisible pour les humains, ignoré par les bots visuels ── */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── S5 header (centrage titre + sous-titre) ── */
.s5-header {
  text-align: center;
  margin-bottom: 36px;
}

/* ── S4 overrides (marges spécifiques à la section communauté) ── */
.s4-tag  { margin-bottom: 10px; }
.s4-title { margin-bottom: 32px; }

/* ── Timeline — delays d'animation par position ── */
.tl-step.d2 { transition-delay: .08s; }
.tl-step.d3 { transition-delay: .16s; }
.tl-step.d4 { transition-delay: .24s; }

/* ── Styles manquants migrés depuis inline ── */

/* body */
body { position: relative; }

/* Containers de S2 et S3 — padding vertical  */
#s2 > .container,
#s3 > .container {
  position: relative;
  z-index: 10;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Ferr — caché par défaut (était style="display:none;margin-bottom:10px") */
#ferr {
  margin-bottom: 10px;
}

/* .re — masqué via classe .none (convention projet) */

/* ── S5 titre — margin-top spécifique ── */
.s5-header .s2-title { margin-top: 10px; }

/* ══════════════════════════════════════════
   CORRECTIONS VISUELLES — refacto logo image
   ══════════════════════════════════════════ */

/* Header — logo image (remplace hdr__logo + hdr__text) */
.hdr__brand { display: inline-flex; align-items: center; text-decoration: none; }
.hdr__brand-img { height: 54px; width: auto; display: block; }

/* Footer — logo image */
.footer-brand__link { display: inline-flex; align-items: center; text-decoration: none; }
.footer-brand__img  { height: 43px; width: auto; display: block; }

/* Footer badge — centrage vertical garanti */
.footer-badge { display: flex; align-items: center; }

/* Spinner — caché par défaut, visible uniquement en état loading */
.sp { display: none; }
.btn-submit.loading .sp { display: inline-block; }

/* Bouton submit — alignement texte centré même avec l'icône ↓ du ghost btn */
.btn-submit { position: relative; }

/* Mobile header logo */
@media (max-width: 480px) {
  .hdr__brand-img { height: 40px; }
}