/* =====================================================================
   Tamala Groupe — feuille de style publique
   Palette dérivée du logo : teal-vert + orange, sur off-white froid.
   ===================================================================== */

:root{
  --teal:      #0E7A68;
  --teal-deep: #0A5546;
  --teal-dark: #08382F;
  --orange:    #EFA637;
  --orange-dk: #D98A1E;
  --bg:        #F4F7F5;
  --surface:   #FFFFFF;
  --ink:       #16241F;
  --muted:     #5B6E67;
  --line:      #E2E9E4;
  --shadow:    0 18px 44px -22px rgba(8,56,47,.34);
  --shadow-sm: 0 8px 22px -14px rgba(8,56,47,.28);
  --radius:    16px;
  --radius-sm: 11px;
  --maxw:      1160px;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:  'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{color:var(--teal-deep)}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.12; font-weight:700; letter-spacing:-.02em; margin:0}
p{margin:0 0 1rem}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px}
.muted{color:var(--muted)}
.skip-link{position:absolute; left:-999px; top:0; background:var(--teal); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:200}
.skip-link:focus{left:0}

/* ---------- Boutons ---------- */
.btn{
  --btn-bg:var(--teal); --btn-fg:#fff;
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  padding:.72em 1.35em; border-radius:999px; border:0; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{color:#fff; background:var(--teal-deep); transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--orange); outline-offset:3px}
.btn--lg{padding:.9em 1.7em; font-size:1.05rem}
.btn--sm{padding:.5em 1em; font-size:.86rem; box-shadow:none}
.btn--block{width:100%; justify-content:center}
.btn--ghost{background:transparent; color:var(--teal-deep); box-shadow:none; border:1.5px solid var(--teal); }
.btn--ghost:hover{background:var(--teal); color:#fff}
.btn--on-dark{background:var(--orange); color:#241703}
.btn--on-dark:hover{background:#fff; color:var(--teal-deep)}

.eyebrow{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:600; color:var(--orange-dk); margin:0 0 .7rem}
.eyebrow--light{color:var(--orange)}
.lead{font-size:1.12rem; color:#33443d}

/* ---------- En-tête ---------- */
.site-header{position:sticky; top:0; z-index:100; background:rgba(244,247,245,.82); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid transparent; transition:box-shadow .25s ease, border-color .25s ease, background .25s ease}
.site-header.is-scrolled{box-shadow:0 10px 30px -20px rgba(8,56,47,.5); border-color:var(--line); background:rgba(255,255,255,.9)}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h,126px)}
.brand{display:inline-flex; align-items:center; gap:.7rem; color:var(--ink); perspective:1000px; animation:brandIn .7s ease both}
.brand:hover{color:var(--ink)}
.brand__name{font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:-.01em}
.brand__logo-img{height:var(--logo-h,96px); max-height:140px; width:auto; max-width:340px; object-fit:contain; display:block; border-radius:10px;
  transition:transform .5s cubic-bezier(.2,.75,.2,1), filter .5s ease; transform-style:preserve-3d; will-change:transform;
  animation:logo3dIn .9s cubic-bezier(.2,.75,.2,1)}
.brand .emblem{width:var(--logo-h,88px); height:var(--logo-h,88px);
  transition:transform .5s cubic-bezier(.2,.75,.2,1), filter .5s ease; transform-style:preserve-3d; will-change:transform;
  animation:logo3dIn .9s cubic-bezier(.2,.75,.2,1)}
.brand:hover .brand__logo-img, .brand:hover .emblem{transform:rotateY(14deg) rotateX(7deg) translateZ(20px) scale(1.05); filter:drop-shadow(0 16px 26px rgba(8,56,47,.30))}
.emblem{flex:0 0 auto}
@keyframes brandIn{0%{opacity:0; transform:translateY(-8px)} 100%{opacity:1; transform:none}}
@keyframes logo3dIn{0%{opacity:0; transform:rotateY(-40deg) translateZ(-40px) scale(.9)} 60%{opacity:1} 100%{opacity:1; transform:none}}

.primary-nav{display:flex; align-items:center; gap:1.7rem}
.primary-nav a{font-family:var(--font-display); font-weight:500; font-size:.98rem; color:var(--ink); position:relative}
.primary-nav a:not(.btn)::after{content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--orange); transition:width .22s ease}
.primary-nav a:not(.btn):hover::after,.primary-nav a.is-active:not(.btn)::after{width:100%}
.primary-nav a.is-active{color:var(--teal-deep)}
.nav-cta{color:#fff !important}
.nav-toggle{display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:0; cursor:pointer}
.nav-toggle span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =====================================================================
   HERO / CARROUSEL
   ===================================================================== */
.hero{position:relative}
.carousel{position:relative; height:clamp(460px, 78vh, 720px); overflow:hidden; background:var(--teal-dark)}
.carousel__track{height:100%}
.slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s ease; display:flex; align-items:center;
  background-image:var(--slide-img); background-size:cover; background-position:center;
}
.slide.is-active{opacity:1; visibility:visible}
.slide__scrim{position:absolute; inset:0; background:
  linear-gradient(110deg, rgba(8,56,47,.90) 0%, rgba(9,70,58,.60) 46%, rgba(8,56,47,.14) 100%);}
.slide__inner{position:relative; color:#fff; max-width:720px}
.slide__overline{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--orange); font-weight:600; margin-bottom:1rem;
  opacity:0; transform:translateY(16px); animation:slideIn .7s .15s forwards}
.slide__title{font-size:clamp(2.1rem, 5vw, 3.6rem); color:#fff; margin-bottom:1.1rem; text-wrap:balance;
  opacity:0; transform:translateY(20px); animation:slideIn .7s .28s forwards}
.slide__subtitle{font-size:1.15rem; color:rgba(255,255,255,.9); max-width:56ch; margin-bottom:1.7rem;
  opacity:0; transform:translateY(20px); animation:slideIn .7s .4s forwards}
.slide .btn{opacity:0; transform:translateY(20px); animation:slideIn .7s .52s forwards}
@keyframes slideIn{to{opacity:1; transform:none}}

.carousel__arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
  background:rgba(8,56,47,.28); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:.2s; backdrop-filter:blur(3px)}
.carousel__arrow:hover{background:var(--orange); border-color:var(--orange); color:#241703}
.carousel__arrow--prev{left:20px}
.carousel__arrow--next{right:20px}
.carousel__dots{position:absolute; left:0; right:0; bottom:24px; z-index:5; display:flex; gap:10px; justify-content:center}
.carousel__dot{width:38px; height:5px; border-radius:99px; border:0; background:rgba(255,255,255,.4); cursor:pointer; transition:.25s; padding:0}
.carousel__dot.is-active{background:var(--orange); width:56px}

/* =====================================================================
   SECTIONS
   ===================================================================== */
.section{padding:clamp(56px, 9vw, 104px) 0}
.section--tint{background:linear-gradient(180deg, #EEF4F1, var(--bg))}
.section__head{max-width:640px; margin-bottom:2.6rem}
.section__title{font-size:clamp(1.9rem, 3.6vw, 2.7rem)}
.section__sub{color:var(--muted); font-size:1.08rem; margin-top:.8rem}

/* Intro */
.intro__grid{display:grid; grid-template-columns:1.5fr .9fr; gap:3rem; align-items:center}
.intro__mark{display:grid; place-items:center}
.intro__mark .emblem{width:min(260px, 60vw); height:auto; filter:drop-shadow(0 24px 40px rgba(8,56,47,.22))}
.intro__mark .emblem{transform:rotate(-4deg)}

/* Activités */
.activity-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1.15rem}
.activity-card{
  position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.7rem 1.5rem 1.5rem; color:var(--ink);
  display:flex; flex-direction:column; gap:.55rem; min-height:230px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.activity-card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; color:var(--ink)}
.activity-card__icon{width:52px; height:52px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(140deg, #E8F2EE, #DCEBE4); color:var(--teal-deep); margin-bottom:.4rem; transition:.25s}
.activity-card:hover .activity-card__icon{background:var(--teal); color:#fff}
.activity-card__title{font-size:1.16rem}
.activity-card__desc{color:var(--muted); font-size:.94rem; line-height:1.55; margin:0}
.activity-card__link{margin-top:auto; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--teal); display:inline-flex; gap:.4em; transition:gap .2s}
.activity-card:hover .activity-card__link{gap:.75em; color:var(--orange-dk)}
/* balayage orange en angle (rappel du swoosh du logo) */
.activity-card__sweep{position:absolute; top:-40px; right:-40px; width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle, rgba(239,166,55,.35), transparent 70%); opacity:0; transition:opacity .3s, transform .3s; transform:scale(.6)}
.activity-card:hover .activity-card__sweep{opacity:1; transform:scale(1)}

/* Chiffres */
.stats-band__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; background:var(--teal-deep); border-radius:22px; padding:2.6rem 1.5rem; box-shadow:var(--shadow)}
.stat{text-align:center; color:#fff; border-right:1px solid rgba(255,255,255,.16)}
.stat:last-child{border-right:0}
.stat__value{font-family:var(--font-display); font-size:clamp(2rem,4vw,2.9rem); font-weight:700; color:var(--orange)}
.stat__label{font-size:.92rem; color:rgba(255,255,255,.82); margin-top:.3rem}

/* Pourquoi nous */
.why__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem}
.why-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem 1.5rem; position:relative}
.why-card::before{content:''; position:absolute; left:1.5rem; top:1.5rem; width:34px; height:3px; border-radius:3px; background:var(--orange)}
.why-card__title{font-size:1.14rem; margin:1.1rem 0 .5rem}
.why-card__text{color:var(--muted); font-size:.96rem; margin:0}

/* CTA */
.cta-band{background:
  radial-gradient(1200px 400px at 80% -20%, rgba(239,166,55,.22), transparent),
  linear-gradient(120deg, var(--teal-deep), var(--teal-dark)); color:#fff; padding:clamp(48px,7vw,76px) 0}
.cta-band__inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.cta-band h2{color:#fff; font-size:clamp(1.6rem,3vw,2.2rem)}
.cta-band p{color:rgba(255,255,255,.85); margin:.5rem 0 0}

/* =====================================================================
   PAGES INTÉRIEURES
   ===================================================================== */
.page-hero{background:
  radial-gradient(900px 380px at 90% -30%, rgba(239,166,55,.18), transparent),
  linear-gradient(120deg, var(--teal-deep), var(--teal-dark)); color:#fff; padding:clamp(70px,10vw,120px) 0 clamp(48px,7vw,72px)}
.page-hero__title{font-size:clamp(2.1rem,4.5vw,3.2rem); color:#fff}
.page-hero__sub{color:rgba(255,255,255,.85); font-size:1.12rem; max-width:60ch; margin-top:.8rem}
.page-hero--activity__inner{display:flex; gap:1.4rem; align-items:flex-start}
.page-hero__icon{flex:0 0 auto; width:70px; height:70px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.12); color:var(--orange)}
.page-hero__icon svg{width:36px; height:36px}

.article{max-width:760px; margin-inline:auto}
.article__img{width:100%; border-radius:var(--radius); margin-bottom:1.8rem; box-shadow:var(--shadow)}
.article__body{font-size:1.08rem; color:#2b3b34; margin-bottom:1.6rem}
.article__body p{margin-bottom:1.15rem}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:2.6rem; align-items:start}
.contact-list{list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:1rem}
.contact-list li{display:grid; grid-template-columns:120px 1fr; gap:.6rem; padding-bottom:1rem; border-bottom:1px solid var(--line)}
.contact-list__k{font-family:var(--font-display); font-weight:600; color:var(--teal-deep); font-size:.9rem; text-transform:uppercase; letter-spacing:.05em}
.contact-map{margin-top:1.6rem; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm)}
.contact-map iframe{width:100%; height:260px; border:0; display:block}
.contact-form-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow-sm)}

/* Formulaires publics */
.form label{display:block; font-family:var(--font-display); font-weight:500; font-size:.9rem; color:var(--ink); margin-bottom:1rem}
.form input, .form textarea, .form select{
  width:100%; margin-top:.4rem; padding:.72em .9em; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--font-body); font-size:1rem; background:#fff; color:var(--ink); transition:border-color .18s, box-shadow .18s}
.form input:focus, .form textarea:focus{outline:0; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,122,104,.15)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.alert{border-radius:11px; padding:.9em 1.1em; margin-bottom:1.2rem; font-size:.96rem}
.alert ul{margin:0; padding-left:1.1rem}
.alert--ok{background:#e6f4ec; color:#166a41; border:1px solid #bfe2cd}
.alert--err{background:#fdecec; color:#a12626; border:1px solid #f3c9c9}

/* =====================================================================
   PIED DE PAGE
   ===================================================================== */
.site-footer{background:var(--teal-dark); color:rgba(255,255,255,.82); padding-top:clamp(48px,7vw,72px)}
.site-footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem; padding-bottom:2.4rem}
.brand--footer{color:#fff; margin-bottom:1rem}
.brand--footer .brand__name{color:#fff}
/* Le logo (souvent en couleur, parfois sur fond blanc) est posé sur une pastille
   claire pour rester lisible sur le fond vert foncé du pied de page. */
.brand--footer{perspective:1000px}
.brand--footer .brand__logo-img{height:var(--logo-h,102px); max-height:150px; max-width:320px; background:#fff; padding:13px 17px; border-radius:16px; box-shadow:0 14px 30px -16px rgba(0,0,0,.6);
  transition:transform .5s cubic-bezier(.2,.75,.2,1), box-shadow .5s ease; transform-style:preserve-3d; will-change:transform}
.brand--footer:hover .brand__logo-img{transform:rotateY(-13deg) rotateX(6deg) translateZ(16px) scale(1.04); box-shadow:0 22px 40px -18px rgba(0,0,0,.7)}
.site-footer__pitch{font-size:.95rem; max-width:38ch}
.site-footer__col h4{font-family:var(--font-display); color:#fff; font-size:1rem; margin:0 0 1rem}
.site-footer__col a, .site-footer__col p{display:block; color:rgba(255,255,255,.78); font-size:.94rem; margin:0 0 .55rem}
.site-footer__col a:hover{color:var(--orange)}
.socials{display:flex; gap:1rem; margin-top:1rem}
.socials a{color:rgba(255,255,255,.8); font-size:.9rem}
.socials a:hover{color:var(--orange)}
.site-footer__bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem; padding:1.4rem 22px; border-top:1px solid rgba(255,255,255,.12); font-size:.85rem}
.site-footer__bottom p{margin:0}
.site-footer__bottom a{color:rgba(255,255,255,.7)}
.site-footer__bottom a:hover{color:var(--orange)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1; transform:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
  .activity-grid{grid-template-columns:repeat(2,1fr)}
  .stats-band__grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2n){border-right:0}
  .why__grid{grid-template-columns:1fr 1fr}
  .intro__grid{grid-template-columns:1fr; gap:2rem}
  .intro__mark{order:-1}
  .contact-grid{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  body{font-size:16px}
  .nav-toggle{display:flex}
  .primary-nav{position:fixed; inset:var(--header-h,126px) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line); padding:12px 22px 20px;
    transform:translateY(-130%); transition:transform .3s ease; box-shadow:var(--shadow)}
  .primary-nav.is-open{transform:none}
  .primary-nav a{padding:.85rem 0; border-bottom:1px solid var(--line)}
  .primary-nav a:not(.btn)::after{display:none}
  .nav-cta{margin-top:.8rem; justify-content:center; border-bottom:0 !important}
  .activity-grid{grid-template-columns:1fr}
  .why__grid{grid-template-columns:1fr}
  .stats-band__grid{grid-template-columns:1fr 1fr; gap:1.4rem 1rem}
  .form__row{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
  .carousel__arrow{width:44px; height:44px; font-size:1.4rem}
  .carousel__arrow--prev{left:10px}.carousel__arrow--next{right:10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}