/* ============================================================
   Memory Transition ecologique - base marine, accents verts.
   Styles scopes sous .eco-mem (plusieurs instances possibles).
   ============================================================ */

.eco-mem{
  --navy:#132444; --navy2:#274B79; --ink:#16294A;
  --green:#33A06B; --green-d:#1E7A4C; --green-l:#8AD3AC;
  --paper:#F5FBF7; --paper2:#E8F5EE; --line:#D4E7DB;
  --ovd-cols:3;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  max-width:750px; margin:24px auto; box-sizing:border-box;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; font-family:var(--font); color:var(--ink);
  box-shadow:0 10px 34px rgba(19,36,68,.10);
}
.eco-mem *{ box-sizing:border-box; }

/* Filet vert superieur */
.eco-mem .eco-top{ height:5px;
  background:linear-gradient(90deg,var(--green),var(--green-d)); }

/* En-tete marine */
.eco-mem .eco-head{
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  color:#fff; padding:20px 24px 18px; }
.eco-mem .eco-eyebrow{
  font-size:11.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--green-l) !important; margin:0 0 6px; }
.eco-mem .eco-title{
  margin:0; font-size:clamp(19px,3.4vw,26px); font-weight:800;
  letter-spacing:.4px; line-height:1.15; color:#fff !important; }
.eco-mem .eco-sub{
  margin:8px 0 0; font-size:13.5px; line-height:1.5;
  color:#d7e6f2 !important; max-width:56ch; }

/* Barre d'outils / score */
.eco-mem .eco-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:14px 24px; background:var(--paper2);
  border-bottom:1px solid var(--line); }
.eco-mem .eco-stat{
  display:flex; align-items:baseline; gap:6px; font-size:12.5px;
  font-weight:700; color:var(--green-d) !important; }
.eco-mem .eco-stat b{ font-size:18px; font-weight:800; color:var(--ink) !important;
  font-variant-numeric:tabular-nums; }
.eco-mem .eco-spacer{ flex:1 1 auto; }
.eco-mem .eco-btn{
  appearance:none; -webkit-appearance:none; cursor:pointer; border:none; border-radius:9px;
  font-family:var(--font); font-weight:800; font-size:13px; letter-spacing:.3px;
  padding:9px 16px; color:#fff !important; text-decoration:none;
  background:linear-gradient(180deg,var(--green),var(--green-d));
  box-shadow:0 3px 0 rgba(30,122,76,.45); transition:transform .08s, box-shadow .08s; }
.eco-mem .eco-btn:hover{ transform:translateY(-1px); color:#fff !important; }
.eco-mem .eco-btn:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(30,122,76,.45); }

/* Grille */
.eco-mem .eco-grid{
  display:grid; grid-template-columns:repeat(var(--ovd-cols,3),1fr); gap:14px;
  padding:22px; }

/* Carte (perspective + flip) */
.eco-mem .card{
  position:relative; aspect-ratio:11/7; perspective:900px;
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-family:var(--font); }
.eco-mem .card:disabled{ cursor:default; }
.eco-mem .card-inner{
  position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,.15,.2,1); }
.eco-mem .card.flip .card-inner{ transform:rotateY(180deg); }

.eco-mem .face{
  position:absolute; inset:0; backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:10px; overflow:hidden; }

/* Dos de carte (marine + feuille verte) */
.eco-mem .back{
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  border:1px solid rgba(138,211,172,.30); }
.eco-mem .back svg{ width:40%; max-width:64px; opacity:.95; }
.eco-mem .back::after{
  content:""; position:absolute; inset:5px; border-radius:9px;
  border:1px solid rgba(138,211,172,.30); }

/* Face revelee */
.eco-mem .front{
  transform:rotateY(180deg);
  background:var(--paper); border:1px solid var(--line);
  flex-direction:column; gap:5px; }
.eco-mem .front .kw{
  font-weight:800; line-height:1.18; color:var(--ink) !important;
  letter-spacing:.2px; }
.eco-mem .front .kw.short{ font-size:clamp(17px,3vw,24px); text-transform:uppercase; letter-spacing:.8px; }
.eco-mem .front .kw.long{ font-size:clamp(11.5px,1.9vw,13.5px); }
.eco-mem .front .tag{
  font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.eco-mem .front.t-sigle{ border-top:3px solid var(--green); }
.eco-mem .front.t-sigle .tag{ color:var(--green-d) !important; }
.eco-mem .front.t-def{ border-top:3px solid var(--navy2); }
.eco-mem .front.t-def .tag{ color:var(--navy2) !important; }

/* Carte trouvee */
.eco-mem .card.done .card-inner{ transform:rotateY(180deg); }
.eco-mem .card.done .front{
  background:var(--paper2); border-color:var(--green);
  box-shadow:0 0 0 2px rgba(51,160,107,.55) inset; }
.eco-mem .card.done{ animation:ecopop .45s ease; }
@keyframes ecopop{ 0%{transform:scale(1)} 40%{transform:scale(1.05)} 100%{transform:scale(1)} }

/* Bandeau de victoire */
.eco-mem .eco-win{
  display:none; margin:0 22px 22px; padding:16px 20px; border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--navy2)); color:#fff;
  border:1px solid rgba(138,211,172,.40); }
.eco-mem .eco-win.show{ display:block; animation:ecofade .5s ease; }
@keyframes ecofade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.eco-mem .eco-win h4{ margin:0 0 4px; font-size:16px; font-weight:800; color:var(--green-l) !important; }
.eco-mem .eco-win p{ margin:0; font-size:13.5px; line-height:1.55; color:#e6f0ea !important; }

/* Pied */
.eco-mem .eco-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 24px; background:var(--navy); color:#cfd9ea; }
.eco-mem .eco-foot .seal{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%,var(--green),var(--green-d));
  color:#fff; }
.eco-mem .eco-foot .seal svg{ width:19px; height:19px; }
.eco-mem .eco-foot .txt{ font-size:11.5px; line-height:1.5; color:#cfd9ea !important; }
.eco-mem .eco-foot .txt b{ color:var(--green-l) !important; }

/* Responsive */
@media (max-width:560px){
  .eco-mem .eco-grid{ grid-template-columns:repeat(2,1fr); gap:10px; padding:16px; }
  .eco-mem .card{ aspect-ratio:1/1; }
  .eco-mem .eco-head{ padding:16px 18px; }
  .eco-mem .eco-bar{ padding:12px 16px; }
}