/* V4 — Noir & Or × Marbre (mélange V1 + V2) */
@import url('style.css');
.section-title{font-size:clamp(36px,4.8vw,58px);text-transform:none;font-style:italic;letter-spacing:.04em;font-weight:400}
.split h2{text-transform:none;font-style:italic;font-weight:400;font-size:clamp(30px,3.6vw,44px)}
.hero h1{font-style:italic;text-transform:none;letter-spacing:.1em;font-size:clamp(36px,5.4vw,64px)}
.strip{background:linear-gradient(rgba(8,7,5,.5),rgba(8,7,5,.5)),url('assets/marbre.jpg') center/cover;border-color:rgba(201,162,75,.45)}
footer{background:linear-gradient(rgba(8,7,5,.9),rgba(8,7,5,.9)),url('assets/marbre.jpg') center/cover}
#methode{background:linear-gradient(rgba(10,10,12,.93),rgba(10,10,12,.95)),url('assets/marbre.jpg') center/cover fixed}
.pcard{border:1px solid rgba(201,162,75,.45)}
.gold-rule{width:120px}
.quote blockquote{font-size:clamp(26px,3.6vw,46px)}

/* Retours Gelez — carrés d'accueil : texte centré, impactant, alignements alternés */
.cards3 .pcard{align-items:center;padding:40px 32px}
.cards3 .pcard::after{background:rgba(5,5,7,.48)}
.cards3 .pcard p{font-family:var(--sans);font-weight:600;font-size:18px;line-height:1.9;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.95)}
.cards3 .pcard:nth-child(1) p{text-align:left}
.cards3 .pcard:nth-child(2) p{text-align:center}
.cards3 .pcard:nth-child(3) p{text-align:right}

/* Parcours : grande image pleine hauteur à droite, accents dorés */
.split img.tall{width:100%;height:100%;min-height:480px;object-fit:cover;object-position:65% center}
.gw{color:var(--gold)}
.split .btn{margin-top:18px}

/* Citation : nouveau fond bâtisseur, déjà sombre */
.quote::after{background:rgba(5,5,7,.35)}

/* Programmes : grille premium uniforme */
.programs{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.programs .prog{min-height:560px;padding:34px 28px;justify-content:flex-end}
.programs .prog::after{background:linear-gradient(to top,rgba(5,5,7,.96) 30%,rgba(5,5,7,.35) 75%,rgba(5,5,7,.15))}
.programs .prog h3{font-size:26px;letter-spacing:.24em;margin-bottom:8px}
.programs .prog h4{min-height:2.9em;display:flex;align-items:flex-start}
.programs .prog p{min-height:11.5em;font-size:13.5px;line-height:1.75;color:#d6d0c4}
.programs .prog .btn{display:block;text-align:center;padding:14px 10px}

/* Carrés : cadre doré net + vidéos recadrées + hiérarchie typo */
.cards3 .pcard{border:1px solid rgba(201,162,75,.6);outline:1px solid rgba(201,162,75,.25);outline-offset:5px;background-color:#050507}
.cards3 .pcard video{transform:scale(1.08)}
.pcard .k-lead{display:block;font-size:16px;font-weight:400;color:#e6e1d6}
.pcard .k-big{display:block;font-size:22px;font-weight:700;color:#fff;line-height:1.5;margin:14px 0}
.pcard .k-gold{display:block;font-size:17px;font-weight:700;letter-spacing:.12em;color:var(--gold-light);margin-top:14px}

/* Carrés v2 : un seul rythme, tout centré, éditorial premium */
.cards3 .pcard{align-items:center;justify-content:center;text-align:center}
.cards3 .pcard:nth-child(1) p,.cards3 .pcard:nth-child(2) p,.cards3 .pcard:nth-child(3) p{text-align:center}
.pcard .k-lead{font-size:15px;font-weight:400;color:#cfc9bd;letter-spacing:.02em;line-height:1.6}
.pcard .k-big{font-family:var(--serif);font-size:27px;font-weight:600;color:#fff;line-height:1.35;margin:16px auto 20px;max-width:16ch}
.pcard .k-gold{font-size:12.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);line-height:2}
.pcard .k-gold::before{content:"";display:block;width:44px;height:1px;background:var(--gold);margin:0 auto 14px}

/* Carrés v3 : plus grands, fond assombri, tailles identiques, carré central dominant */
.cards3{max-width:1300px;gap:32px}
.cards3 .pcard{min-height:480px}
.cards3 .pcard::after{background:rgba(4,4,6,.58)}
.pcard .k-lead{font-size:15px}
.pcard .k-big{font-size:24px;max-width:18ch}
.pcard .k-gold{font-size:12px}
/* carré central : légère dominance */
.cards3 .pcard:nth-child(2){border-color:rgba(201,162,75,.85);z-index:2}
.cards3 .pcard:nth-child(2).reveal{transform:translateY(34px) scale(1.05)}
.cards3 .pcard:nth-child(2).reveal.visible{transform:scale(1.05)}
.cards3 .pcard:nth-child(2) .k-big{font-size:27px}
.cards3 .pcard:nth-child(2) .k-gold{font-size:13px}
@media(max-width:900px){.cards3 .pcard:nth-child(2).reveal.visible{transform:none}}

/* Carrés v4 : rangées calées au pixel — accroches, phrases fortes et filets alignés */
.cards3 .pcard:nth-child(2).reveal{transform:translateY(34px)}
.cards3 .pcard:nth-child(2).reveal.visible{transform:none}
.pcard p{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.pcard .k-lead{min-height:48px;display:flex;align-items:flex-end;justify-content:center}
.pcard .k-big{min-height:148px;display:flex;align-items:center;justify-content:center;margin:12px auto 0}
.pcard .k-gold{margin-top:16px;min-height:64px}

/* Parcours : coupures maîtrisées */
#parcours .split p{text-wrap:pretty;max-width:54ch}

/* Carré central : texte agrandi, rangées inchangées (alignement préservé) */
.cards3 .pcard:nth-child(2) .k-lead{font-size:16.5px}
.cards3 .pcard:nth-child(2) .k-big{font-size:30px}
.cards3 .pcard:nth-child(2) .k-gold{font-size:14px;letter-spacing:.32em}

/* La méthode : manifeste centré */
#methode .prose{max-width:640px;text-align:center}
#methode .prose p{font-size:17.5px}
#methode .prose .manifeste{font-family:var(--serif);font-size:24px;line-height:1.5;color:#f0ecdf;margin:30px auto}
#methode .prose .manifeste strong{color:var(--gold-light);font-weight:600}

/* Audit DA — corrections premium */
/* 1. Indicateur de scroll : trait fin animé */
.scroll-line{position:absolute;bottom:0;left:50%;width:1px;height:64px;background:linear-gradient(to bottom,transparent,var(--gold));overflow:hidden;z-index:2}
.scroll-line::after{content:"";position:absolute;top:-64px;left:0;width:1px;height:64px;background:#fff;opacity:.9;animation:scrolldrop 2.4s ease-in-out infinite}
@keyframes scrolldrop{0%{top:-64px}70%{top:64px}100%{top:64px}}
/* 2. Bandes dorées affinées : l'or reste, le clinquant part */
.gold-band{height:9px;animation-duration:16s}
/* 3. Citation : le texte occupe l'espace vide, à droite du bâtisseur */
.quote{display:flex;justify-content:flex-end;align-items:center}
.quote blockquote{margin:0 5vw 0 auto;max-width:600px}
@media(max-width:900px){.quote{justify-content:center}.quote blockquote{margin:0 auto}}
/* 4. Contact : réassurance et respiration */
.assurance{text-align:center;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin:-30px auto 55px}
#contact form button{width:100%}
/* 5. Hover cartes programmes : cadre qui s'allume */
.programs .prog{transition:transform .45s,box-shadow .45s,border-color .45s}
.programs .prog:hover{border-color:rgba(201,162,75,.75)}
.btn{transition:background .3s,color .3s,letter-spacing .3s}
.btn:hover{letter-spacing:.3em}

/* Programmes : tout centré, sous-titres remontés */
.programs .prog{text-align:center;align-items:center}
.programs .prog h3{width:100%;margin-bottom:4px}
.programs .prog h4{justify-content:center;text-align:center;align-items:flex-start;min-height:2.6em;margin-bottom:10px;width:100%}
.programs .prog p{text-align:center}

/* Ajustement : largeurs pleines conservées, centrage par le texte uniquement */
.programs .prog{align-items:stretch}
.programs .prog .btn{width:100%}
.programs .prog h4{min-height:2.4em}

/* Programmes : structure Wix — titres en haut, bouton plaqué en bas */
.programs .prog{justify-content:flex-start;padding-top:44px}
.programs .prog p{min-height:0}
.programs .prog .btn{margin-top:auto}
.programs .prog::after{background:linear-gradient(to bottom,rgba(5,5,7,.85) 0%,rgba(5,5,7,.5) 55%,rgba(5,5,7,.8) 100%)}

/* Programmes : respiration entre les zones de texte */
.programs .prog h4{margin-bottom:20px}
.programs .prog p{margin-bottom:30px;line-height:1.85}
.programs .prog h3{margin-bottom:8px}

/* Citation — présentation raffinée : filet doré, respiration, ombrage propre */
.quote{padding:170px 5vw}
.quote::after{background:none}
.quote blockquote::before{content:"";display:block;width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 0 30px auto}
@media(max-width:900px){.quote blockquote::before{margin:0 auto 30px}}

/* Citation — intégration : la statue émerge de la page, pas de bande plaquée */
.quote{background-color:#0b0a09}
.quote::before{content:"";position:absolute;top:0;left:0;right:0;height:150px;background:linear-gradient(to bottom,var(--bg2),rgba(16,16,20,0));pointer-events:none}
.quote::after{content:"";position:absolute;top:auto;bottom:0;left:0;right:0;height:150px;background:linear-gradient(to top,var(--bg),rgba(10,10,12,0));pointer-events:none}

/* Citation — texte centré au-dessus de la statue, bandeau affiné */
.quote{justify-content:center;padding:80px 5vw 300px}
.quote blockquote{margin:0 auto;max-width:820px;text-align:center;font-size:clamp(22px,2.7vw,38px)}
.quote blockquote::before{margin:0 auto 26px}

/* Parcours — image égalisée sur la hauteur du texte */
.split img.tall{height:580px;min-height:0;object-position:center 42%}
@media(max-width:860px){.split img.tall{height:420px}}

/* Passe mobile — accueil V4 : les alignements en rangées fixes redeviennent naturels en colonne */
@media(max-width:900px){
.cards3 .pcard{min-height:420px}
.k-lead,.k-big,.k-gold{min-height:0 !important}
.programs .prog p{min-height:0}
.programs .prog h4{min-height:0}
.split img.tall{height:420px}
.hero h1{font-size:clamp(26px,8vw,40px);letter-spacing:.18em}
.section-title{font-size:clamp(34px,10vw,46px);letter-spacing:.12em}
}

/* Mobile — les nuages restent, le vide sous les cartes disparaît */
@media(max-width:900px){
.video-section{padding:36px 6vw 36px}
}

/* Accueil — transitions fondues entre toutes les sections (fini les démarcations nettes) */
#parcours,#methode,#programmes,#contact,.video-section{box-shadow:inset 0 100px 80px -50px var(--bg),inset 0 -100px 80px -50px var(--bg)}

/* Mobile — Discipline. Corps. Esprit en totem vertical */
@media(max-width:900px){
.hero h1 span{display:block;line-height:1.6;font-size:clamp(28px,8.5vw,38px);letter-spacing:.24em}
.hero h1{line-height:1}
}

/* Mobile — héros en deux étages : logo vidéo en haut, devise ancrée en bas */
@media(max-width:900px){
.hero{justify-content:flex-end;padding-bottom:12svh}
.hero h1 span{font-size:clamp(24px,7vw,32px);letter-spacing:.2em;line-height:1.5}
.hero .sub{margin-top:14px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to top,rgba(5,5,7,.88),transparent);pointer-events:none;z-index:0}
.hero h1,.hero .sub,.hero .scroll-hint{position:relative;z-index:2}
}

/* Devise — traits dorés entre les mots */
.hero h1 .sep{display:inline-block;width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 20px;vertical-align:middle}
@media(max-width:900px){
.hero h1 .sep{display:block;width:44px;margin:11px auto}
.hero h1 span{font-size:clamp(20px,6vw,26px);letter-spacing:.18em;line-height:1.25}
.hero{padding-bottom:6svh}
.hero h1{margin-top:34px}
.hero .sub{margin-top:20px;font-size:13px}
}

/* Héros — nouveau master : scène nue + logo or en HTML */
.hero-logo{position:relative;z-index:2;height:110px;width:auto;margin-bottom:30px;filter:drop-shadow(0 6px 30px rgba(0,0,0,.7))}
@media(max-width:900px){
.hero-logo{height:78px;margin-bottom:18px}
}

/* Héros mobile — logo vidéo remonté, devise dessous, sous-titre sur bande marbre */
.strip-sub{display:none}
.strip-sub span{display:block;line-height:1.5}
.strip-sub span b{color:var(--gold-light);font-weight:700}
.strip-sub span em{display:block;font-style:normal;font-size:10px;letter-spacing:.5em;color:#b9a678;margin-top:5px;text-indent:.5em}
.strip-sub span .maison{display:block;font-style:normal;font-size:14px;letter-spacing:.34em;color:var(--gold-light);margin-bottom:7px;text-indent:.34em}
.strip-sub span{font-size:11px;letter-spacing:.28em;color:#d8d2c6}
@media(max-width:900px){
.hero video{object-position:center 68%}
.hero .sub{display:none}
.strip-sub{display:block}
.strip-vew{display:none}
.hero{padding-bottom:5svh}
}

/* Mobile — Pourquoi j'ai créé VEW : la silhouette passe en fond, noircie, le texte par-dessus */
@media(max-width:900px){
#parcours{background:linear-gradient(rgba(8,8,10,.72),rgba(8,8,10,.84)),url('assets/parcours-silhouette.jpg') center 28%/cover no-repeat !important}
#parcours .split img.tall{display:none}
#parcours .split p{color:#e4dfd4}
}

/* ============ FLUIDITÉ DES FONDUS — anti-banding (retour Gelez 16/07) ============ */

/* 2. Transitions entre sections : fondu long à paliers multiples (courbe douce)
   au lieu des ombres internes à deux tons qui créaient les bandes. */
#parcours,#methode,#programmes,#contact{box-shadow:none;position:relative}
.video-section{box-shadow:none}
#parcours::before,#methode::before,#programmes::before,#contact::before{content:"";position:absolute;top:0;left:0;right:0;height:170px;pointer-events:none;z-index:1;background:linear-gradient(to bottom,var(--bg) 0%,rgba(10,10,12,.87) 22%,rgba(10,10,12,.66) 45%,rgba(10,10,12,.38) 68%,rgba(10,10,12,.14) 86%,rgba(10,10,12,0) 100%)}
#parcours::after,#methode::after,#programmes::after,#contact::after{content:"";position:absolute;bottom:0;left:0;right:0;height:170px;pointer-events:none;z-index:1;background:linear-gradient(to top,var(--bg) 0%,rgba(10,10,12,.87) 22%,rgba(10,10,12,.66) 45%,rgba(10,10,12,.38) 68%,rgba(10,10,12,.14) 86%,rgba(10,10,12,0) 100%)}
#parcours>*,#methode>*,#programmes>*,#contact>*{position:relative;z-index:2}

/* 3. Citation : mêmes fondus adoucis, courbe progressive */
.quote::before{height:220px;background:linear-gradient(to bottom,var(--bg2) 0%,rgba(16,16,20,.85) 24%,rgba(16,16,20,.6) 48%,rgba(16,16,20,.32) 72%,rgba(16,16,20,.1) 89%,rgba(16,16,20,0) 100%)}
.quote::after{height:220px;background:linear-gradient(to top,var(--bg) 0%,rgba(10,10,12,.85) 24%,rgba(10,10,12,.6) 48%,rgba(10,10,12,.32) 72%,rgba(10,10,12,.1) 89%,rgba(10,10,12,0) 100%)}