/* ====== Thème clair Ecopafiesta : fond blanc, texte noir, verts du logo ====== */
:root{
  --noir:#ffffff;          /* fond */
  --noir2:#f3f6ec;         /* fonds secondaires (dos des cartes) */
  --creme:#111111;         /* texte */
  --gris:#6b6e66;
  --ligne:rgba(17,17,17,.12);
  --or:#a2c03f;            /* vert lime du logo, poussé */
  --vert:#0a8a3c;          /* vert franc de l'icône du logo */
  --or-doux:#0a8a3c;
}
body{background:#fff;color:#111}
body:after{opacity:.025}

/* Textes courants : gris foncé lisible sur blanc */
.hero p,.tete p,.intro p,.u-txt p,.duo p,.sec-head p,.cats-head p,.c-txt .ligne,.points p,.etape p,.dos p,.card .dos p{color:#3d3f3a!important}
.kicker,.ariane span,.num,.face b,.dos b,.card .dos b,.card .nm b,.points .serif,.etape .serif{color:var(--vert)!important}
.ariane{color:#6b6e66}
em,.serif em{color:var(--or)}
.tete h1 em,.hero h1 em,.sec-head h2 em,.cats-head h2 span,.intro h2 em,.duo h2 em,.c-txt h2 em,.sf h2 em{color:var(--or)!important}

/* Boutons : texte noir, soulignement vert */
.btn{color:#111!important;border-bottom:2px solid var(--or)!important}
.btn span{color:var(--vert)}

/* Menu clair */
nav{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,0))!important}
nav.scrolled{background:rgba(255,255,255,.96)!important;border-bottom:1px solid rgba(17,17,17,.08)!important}
nav ul a{color:#111!important;opacity:.85}
nav ul a:hover,nav ul a.actif{color:var(--vert)!important;opacity:1}
.burger{color:#111!important}
@media (max-width:860px){nav.open ul{background:#fff!important}}

/* En-têtes : dégradé blanc vers la photo */
.tete-img:after{background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.4) 16%,transparent 38%)!important}
.hero-img:after{background:linear-gradient(90deg,#fff 0,transparent 30%)!important}
.vertical{color:#fff!important;opacity:.85}
@media (max-width:860px){.tete-img:after,.hero-img:after{background:linear-gradient(180deg,#fff 0,transparent 26%)!important}}

/* Tout ce qui est écrit SUR une photo reste blanc */
.cap strong,.face strong,.card .face strong,.card .tag,.face .tourne,.card .face i{color:#fff!important}
.cap b{color:var(--or)!important}
.dots:before{background:rgba(255,255,255,.5)!important}
.dots i{border-color:#fff!important}
.dots i:after{color:#fff!important}
.dots i.on{background:var(--or)!important;border-color:var(--or)!important}
.dots i.on:after{color:var(--or)!important}

/* Dos des cartes : clair, liseré vert */
.dos,.card .dos{background:radial-gradient(120% 90% at 100% 0%,rgba(162,192,63,.22),transparent 55%),#f3f6ec!important;border:1px solid rgba(10,138,60,.25)!important;color:#111}
.dos strong,.card .dos strong{color:#111!important}
.dos li,.card .dos li{color:#55584f!important}
.dos li:before,.card .dos li:before{color:var(--vert)!important}
.card .dos .tag2{color:#6b6e66!important}
.card .dos .go{color:#111!important;border-bottom:2px solid var(--or)!important}

/* Bandeaux défilants */
.marquee{border-color:rgba(17,17,17,.1)!important}
.marquee span{color:#6b6e66!important}
.marquee b{color:var(--or)!important}
.marquee.clubs{background:var(--or)!important}
.marquee.clubs span,.marquee.clubs b{color:#111!important}

/* Sections secondaires : gris très clair au lieu de foncé */
.sf,.gamme{background:#f3f6ec!important;color:#111!important}
.etape{border-color:rgba(17,17,17,.12)!important}
.etape:first-child{border-top-color:rgba(17,17,17,.12)!important}
.tags span,.autres a{border-color:rgba(17,17,17,.15)!important;color:#3d3f3a!important}
.autres a:hover{border-color:var(--vert)!important;color:var(--vert)!important}
.points{border-top-color:rgba(17,17,17,.12)!important}

/* Appel final : vert lime plein, texte noir */
.cta{background:var(--or)!important;color:#111!important}
.cta h2 em{color:#0b4f22!important;opacity:1}
.cta .btn{color:#111!important;border-color:#111!important}

/* Contact accueil */
.c-txt .tel{color:#111!important}

/* Intro et transitions */
#pt{background:#fff!important}
#pt:after{background:var(--or)!important}
#prog{background:var(--or)!important}
footer{border-top-color:rgba(17,17,17,.1)!important;color:#6b6e66!important}

/* Curseur */
.cur{background:var(--vert)!important}
.cur.lien{background:rgba(162,192,63,.25)!important;border-color:var(--vert)!important}
.cur.voir{background:var(--or)!important}
.cur span{color:#111!important}

/* Cartes produits (fond noir) : texte blanc */
.prod strong{color:#fff!important}
.prod span{color:#a2c03f!important}

/* v8 (16/10) : retournement SANS 3D. Sur iPhone, Safari affichait le dos des cartes en miroir (« écrit à l'envers »).
   La carte se replie (scaleX 1→0) puis le dos se déplie (0→1) : aucune rotation, donc jamais de texte inversé. */
.card .in,.card:hover .in,.card.flip .in,.pc .in,.pc:hover .in,.pc.flip .in,.pc:focus-visible .in{transform:none!important;transform-style:flat!important}
.card .face,.card .dos,.pc-face,.pc-dos{backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
.card .face,.pc-face{transform:scaleX(1)!important;opacity:1!important;transition:transform .22s ease-in .22s,opacity 0s linear .22s!important}
.card .dos,.pc-dos{transform:scaleX(0)!important;opacity:0!important;transition:transform .22s ease-in,opacity 0s linear .22s!important}
.card:hover .face,.card.flip .face,.pc:hover .pc-face,.pc.flip .pc-face,.pc:focus-visible .pc-face{transform:scaleX(0)!important;opacity:0!important;transition:transform .22s ease-in,opacity 0s linear .22s!important}
.card:hover .dos,.card.flip .dos,.pc:hover .pc-dos,.pc.flip .pc-dos,.pc:focus-visible .pc-dos{transform:scaleX(1)!important;opacity:1!important;transition:transform .22s ease-out .22s,opacity 0s linear .22s!important}

/* v8 : catalogue gobelets présenté comme le catalogue 2025 (photo sur fond noir + caractéristiques) */
.fiches{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:34px 26px}
.fiche{border-top:1px solid rgba(15,15,15,.14);padding-top:18px}
.fiche-img{aspect-ratio:4/3;background:#000;overflow:hidden;margin-bottom:16px}
.fiche-img img{width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.fiche strong{display:block;font:500 22px/1 Inter,sans-serif;letter-spacing:.02em;color:#111;margin-bottom:10px}
.fiche dl{display:grid;gap:5px;font-size:14px;color:#3d3f3a}
.fiche dl div{display:flex;gap:6px}
.fiche dt{white-space:nowrap}.fiche dt:after{content:" :"}
.fiche dd{color:#111}
@media (max-width:860px){.fiches{grid-template-columns:1fr 1fr;gap:26px 14px}.fiche strong{font-size:18px}.fiche dl{font-size:12px}.fiche dl div{display:block}}