:root {
     --vert-pale: #e9f5f1;
     --vert-moyen: #aad0c3;
     --vert-fonce: #1b4e3d;
     --vert-mid: #2e7a60;
     --blanc: #ffffff;
     --texte: #192b24;
     --texte-doux: #4a6960;
     --or: #c9a96e;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Jost', sans-serif;
     color: var(--texte);
     background: var(--blanc);
     font-weight: 300;
     line-height: 1.75;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 400;
     line-height: 1.15;
 }

 /* ═══ NAVBAR ═══ */
 #navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 999;
     padding: 1.4rem 0;
     transition: background .4s, padding .4s, box-shadow .4s;
 }

 #navbar.scrolled {
     background: var(--vert-fonce) !important;
     opacity: .85;
     padding: .9rem 0;
     box-shadow: 0 2px 24px rgba(27, 78, 61, .09);
 }

 .nav-brand {
     font-family: 'Cormorant Garamond', serif;
     font-size: 3.5rem;
     font-weight: 600;
     color: var(--vert-pale);
     text-decoration: none;
     letter-spacing: .03em;
     transition: font-size .4s ease;
 }

 #navbar.scrolled .nav-brand {
     font-size: 2rem;
 }

 .nav-brand span {
     color: var(--or);
 }

 .navbar-collapse {
     z-index: 1;
     /* background-color: #ffffff; */
 }

 .nav-link {
     color: var(--vert-pale) !important;
     font-size: .82rem;
     font-weight: 400;
     letter-spacing: .09em;
     text-transform: uppercase;
     padding: .4rem 1rem !important;
     transition: color .2s;
 }

 .nav-link:hover {
     color: var(--vert-mid) !important;
 }

 .btn-rdv {
     background: var(--vert-fonce);
     color: var(--blanc) !important;
     border-radius: 50px;
     padding: .5rem 1.5rem !important;
     font-size: .8rem;
     letter-spacing: .07em;
     transition: background .25s;
 }

 .btn-rdv:hover {
     background: var(--vert-mid);
 }

 /* ═══ HERO ═══ */
 .hero {
     min-height: 90vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     background: var(--vert-fonce);
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     background-image: url('https://images.unsplash.com/photo-1518241353330-0f7941c2d9b5?w=1600&q=80&auto=format&fit=crop');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     opacity: .22;
 }

 .hero-gradient {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(27, 78, 61, .95) 0%, rgba(27, 78, 61, .6) 60%, transparent 100%);
 }

 .hero-content {
     position: relative;
     z-index: 2;
     padding: 10rem 0 7rem;
 }

 .hero-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: .6rem;
     background: rgba(170, 208, 195, .18);
     border: 1px solid rgba(170, 208, 195, .4);
     color: var(--vert-moyen);
     font-size: .78rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     font-weight: 500;
     padding: .45rem 1.2rem;
     border-radius: 50px;
     margin-bottom: 2rem;
 }

 .hero-eyebrow::before {
     content: '';
     width: 6px;
     height: 6px;
     background: var(--or);
     border-radius: 50%;
     display: inline-block;
 }

 .hero h1 {
     font-size: clamp(2.8rem, 5.5vw, 4.8rem);
     color: var(--blanc);
     font-weight: 300;
     margin-bottom: 1.6rem;
 }

 .hero h1 em {
     font-style: italic;
     color: var(--vert-moyen);
 }

 .hero-intro {
     font-size: 1.05rem;
     color: rgba(233, 245, 241, .75);
     max-width: 500px;
     margin-bottom: 2.8rem;
     font-weight: 300;
 }

 .btn-hero-primary {
     display: inline-block;
     background: var(--or);
     color: var(--vert-fonce);
     border-radius: 50px;
     padding: .95rem 2.4rem;
     font-size: .9rem;
     font-weight: 500;
     letter-spacing: .05em;
     text-decoration: none;
     transition: background .25s, transform .2s;
 }

 .btn-hero-primary:hover {
     background: #d9b97e;
     transform: translateY(-2px);
     color: var(--vert-fonce);
 }

 .btn-hero-outline {
     display: inline-block;
     background: transparent;
     color: var(--blanc);
     border: 1.5px solid rgba(255, 255, 255, .4);
     border-radius: 50px;
     padding: .9rem 2.2rem;
     font-size: .9rem;
     font-weight: 300;
     letter-spacing: .05em;
     text-decoration: none;
     transition: all .25s;
 }

 .btn-hero-outline:hover {
     border-color: var(--blanc);
     background: rgba(255, 255, 255, .1);
     color: var(--blanc);
 }

 /* pilliers flottants */
 .hero-pillars {
     display: flex;
     gap: 1px;
     margin-top: 4.5rem;
     border-top: 1px solid rgba(170, 208, 195, .25);
     padding-top: 2rem;
 }

 .hero-pillar {
     flex: 1;
     padding-right: 1.5rem;
 }

 .hero-pillar-num {
     font-family: 'Cormorant Garamond', serif;
     font-size: 2rem;
     font-weight: 600;
     color: var(--or);
     line-height: 1;
 }

 .hero-pillar-label {
     font-size: .78rem;
     color: rgba(233, 245, 241, .55);
     letter-spacing: .06em;
     text-transform: uppercase;
     margin-top: .3rem;
 }

 /* ═══ SECTION COMMUNES ═══ */
 .section-label {
     display: block;
     font-size: .76rem;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--or);
     font-weight: 500;
     margin-bottom: .8rem;
 }

 .section-title {
     font-size: clamp(2rem, 3.5vw, 3rem);
     color: var(--vert-fonce);
     margin-bottom: 1.5rem;
 }

 /* ═══ INTRO ÉNERGIE ═══ */
 .intro-section {
     padding: 7rem 0;
     background: var(--blanc);
 }

 .intro-lead {
     font-size: 1.25rem;
     color: var(--vert-fonce);
     font-family: 'Cormorant Garamond', serif;
     font-weight: 400;
     font-style: italic;
     line-height: 1.6;
     border-left: 3px solid var(--or);
     padding-left: 1.5rem;
     margin-bottom: 2rem;
 }

 .intro-text {
     color: var(--texte-doux);
     font-size: .97rem;
     margin-bottom: 1.2rem;
 }

 .intro-img {
     width: 100%;
     height: 480px;
     object-fit: cover;
     border-radius: 8px;
 }

 .concept-chip {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: var(--vert-pale);
     color: var(--vert-fonce);
     font-size: .8rem;
     font-weight: 500;
     border-radius: 50px;
     padding: .45rem 1rem;
     margin: .25rem;
     letter-spacing: .03em;
 }

 .concept-chip i {
     color: var(--or);
     font-size: .75rem;
 }

 /* ═══ SERVICES ═══ */
 .services-section {
     padding: 7rem 0;
     background: var(--vert-pale);
 }

 .services-header {
     text-align: center;
     margin-bottom: 4.5rem;
 }

 .service-card {
     background: var(--blanc);
     border-radius: 14px;
     overflow: hidden;
     height: 100%;
     border: 1px solid rgba(170, 208, 195, .3);
     transition: transform .35s, box-shadow .35s;
     display: flex;
     flex-direction: column;
 }

 .service-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 60px rgba(27, 78, 61, .13);
 }

 .service-img-wrap {
     position: relative;
     height: 210px;
     overflow: hidden;
 }

 .service-img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s;
 }

 .service-card:hover .service-img-wrap img {
     transform: scale(1.07);
 }

 .service-num {
     position: absolute;
     top: 1rem;
     left: 1rem;
     font-family: 'Cormorant Garamond', serif;
     font-size: 3rem;
     font-weight: 600;
     color: rgba(255, 255, 255, .25);
     line-height: 1;
     user-select: none;
 }

 .service-tag-badge {
     position: absolute;
     top: 1rem;
     right: 1rem;
     background: rgba(27, 78, 61, .85);
     color: var(--vert-moyen);
     font-size: .7rem;
     font-weight: 500;
     letter-spacing: .08em;
     text-transform: uppercase;
     padding: .3rem .8rem;
     border-radius: 50px;
     backdrop-filter: blur(4px);
 }

 .service-body {
     padding: 1.8rem 1.8rem 2rem;
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .service-body h3 {
     font-size: 1.5rem;
     color: var(--vert-fonce);
     margin-bottom: .8rem;
 }

 .service-body p {
     font-size: .9rem;
     color: var(--texte-doux);
     line-height: 1.8;
     flex: 1;
 }

 .service-benefits {
     margin-top: 1.3rem;
     display: flex;
     flex-wrap: wrap;
     gap: .4rem;
 }

 .benefit-pill {
     font-size: .73rem;
     background: var(--vert-pale);
     color: var(--vert-fonce);
     border-radius: 50px;
     padding: .25rem .75rem;
     font-weight: 500;
     letter-spacing: .03em;
 }

 /* ═══ APPROCHE HOLISTIQUE ═══ */
 .approche-section {
     padding: 7rem 0;
     background: var(--blanc);
 }

 .factor-item {
     display: flex;
     gap: 1.2rem;
     align-items: flex-start;
     padding: 1.5rem;
     border-radius: 10px;
     transition: background .25s;
     margin-bottom: .5rem;
 }

 .factor-item:hover {
     background: var(--vert-pale);
 }

 .factor-icon {
     width: 48px;
     height: 48px;
     background: var(--vert-pale);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     font-size: 1.2rem;
     color: var(--vert-fonce);
     transition: background .25s;
 }

 .factor-item:hover .factor-icon {
     background: var(--vert-moyen);
 }

 .factor-title {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.2rem;
     color: var(--vert-fonce);
     margin-bottom: .3rem;
 }

 .factor-desc {
     font-size: .88rem;
     color: var(--texte-doux);
     line-height: 1.7;
 }

 .approche-img {
     width: 100%;
     height: 620px;
     object-fit: cover;
     border-radius: 10px;
 }

 .approche-quote {
     background: var(--vert-fonce);
     color: var(--vert-pale);
     border-radius: 10px;
     padding: 2rem;
     margin-top: 2rem;
 }

 .approche-quote p {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.25rem;
     font-style: italic;
     font-weight: 300;
     line-height: 1.6;
     margin: 0;
 }

 .approche-quote span {
     color: var(--or);
 }

 /* ═══ QUI JE SUIS ═══ */
 .about-section {
     padding: 7rem 0;
     background: var(--vert-fonce);
     position: relative;
     overflow: hidden;
 }

 .about-section::before {
     content: '';
     position: absolute;
     top: -30%;
     right: -15%;
     width: 55%;
     height: 140%;
     background: rgba(170, 208, 195, .05);
     border-radius: 50%;
     pointer-events: none;
 }

 .about-img-wrap {
     position: relative;
 }

 .about-img-main {
     width: 100%;
     height: 540px;
     object-fit: cover;
     border-radius: 10px;
     border: 3px solid rgba(170, 208, 195, .25);
 }

 .about-year-badge {
     position: absolute;
     bottom: -1.5rem;
     right: -1.5rem;
     background: var(--or);
     color: var(--vert-fonce);
     border-radius: 10px;
     padding: 1.4rem 1.8rem;
     text-align: center;
     box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
 }

 .about-year-badge .yr {
     font-family: 'Cormorant Garamond', serif;
     font-size: 2.4rem;
     font-weight: 700;
     display: block;
     line-height: 1;
 }

 .about-year-badge .lbl {
     font-size: .72rem;
     font-weight: 500;
     letter-spacing: .06em;
     text-transform: uppercase;
     display: block;
     margin-top: .3rem;
 }

 .about-section .section-label {
     color: var(--or);
 }

 .about-section .section-title {
     color: var(--blanc);
 }

 .about-text {
     color: rgba(233, 245, 241, .7);
     font-size: .97rem;
     line-height: 1.85;
     margin-bottom: 1.3rem;
 }

 .about-highlight {
     color: var(--vert-moyen);
     font-family: 'Cormorant Garamond', serif;
     font-style: italic;
     font-size: 1.15rem;
 }

 .formation-list {
     list-style: none;
     margin: 1.5rem 0;
 }

 .formation-list li {
     display: flex;
     align-items: flex-start;
     gap: .8rem;
     color: rgba(233, 245, 241, .65);
     font-size: .88rem;
     margin-bottom: .7rem;
 }

 .formation-list li::before {
     content: '';
     width: 7px;
     height: 7px;
     background: var(--or);
     border-radius: 50%;
     flex-shrink: 0;
     margin-top: .55rem;
 }

 .btn-about {
     display: inline-block;
     background: var(--or);
     color: var(--vert-fonce);
     border-radius: 50px;
     padding: .9rem 2.2rem;
     font-size: .9rem;
     font-weight: 500;
     text-decoration: none;
     transition: background .25s, transform .2s;
     margin-top: .5rem;
 }

 .btn-about:hover {
     background: #d9b97e;
     transform: translateY(-2px);
     color: var(--vert-fonce);
 }

 /* ═══ RUBAN CITATION ═══ */
 .ruban {
     background: var(--vert-moyen);
     padding: 2.5rem 0;
     text-align: center;
 }

 .ruban p {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.55rem;
     font-style: italic;
     font-weight: 300;
     color: var(--vert-fonce);
     margin: 0;
     letter-spacing: .01em;
 }

 /* ═══ CTA ═══ */
 .cta-section {
     padding: 8rem 0;
     background: var(--vert-pale);
     text-align: center;
 }

 .cta-section .section-title {
     margin-bottom: 1rem;
 }

 .cta-sub {
     font-size: 1rem;
     color: var(--texte-doux);
     max-width: 500px;
     margin: 0 auto 2.5rem;
 }

 .btn-cta-main {
     display: inline-block;
     background: var(--vert-fonce);
     color: var(--blanc);
     border-radius: 50px;
     padding: 1.1rem 3rem;
     font-size: .95rem;
     font-weight: 500;
     letter-spacing: .05em;
     text-decoration: none;
     transition: background .25s, transform .2s;
 }

 .btn-cta-main:hover {
     background: var(--vert-mid);
     transform: translateY(-2px);
     color: var(--blanc);
 }

 /* ═══ FOOTER ═══ */
 footer {
     background: var(--texte);
     color: rgba(233, 245, 241, .5);
     padding: 3.5rem 0 2rem;
 }

 .footer-brand {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.5rem;
     color: var(--blanc);
     font-weight: 600;
     display: block;
     margin-bottom: .4rem;
 }

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

 footer p,
 footer a {
     font-size: .85rem;
     color: rgba(233, 245, 241, .5);
     text-decoration: none;
     transition: color .2s;
 }

 footer a:hover {
     color: var(--vert-moyen);
 }

 .footer-links {
     list-style: none;
 }

 .footer-links li {
     margin-bottom: .5rem;
 }

 .footer-divider {
     border-top: 1px solid rgba(233, 245, 241, .1);
     margin: 2rem 0 1.2rem;
 }

 .footer-copy {
     font-size: .78rem;
     color: rgba(233, 245, 241, .3);
 }

 /* ═══ ANIMATIONS ═══ */
 .fade-up {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity .7s ease, transform .7s ease;
 }

 .fade-up.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .fade-up:nth-child(2) {
     transition-delay: .12s;
 }

 .fade-up:nth-child(3) {
     transition-delay: .24s;
 }

 .fade-up:nth-child(4) {
     transition-delay: .36s;
 }

 /* ═══ RESPONSIVE ═══ */
 @media (max-width: 991px) {
     .hero-pillars {
         flex-wrap: wrap;
     }

     .about-year-badge {
         bottom: 1rem;
         right: 1rem;
     }

     .approche-img {
         height: 380px;
         margin-bottom: 2rem;
     }
 }

 @media (max-width: 767px) {
     .hero-content {
         padding: 8rem 0 5rem;
     }

     .intro-img {
         height: 280px;
         margin-bottom: 2rem;
     }

     .about-img-main {
         height: 360px;
     }
 }