@import url('https://fonts.googleapis.com/css2?family=Kite+One&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Tokens ─────────────────────────────────────────── */
:root{
  --vert:      #4e661f;   /* vert principal (olive foncé) */
  --vert-2:    #293512;   /* vert très foncé */
  --vert-clair:#98c93b;   /* vert lime, accent vif */
  --olive:     #769f30;   /* vert moyen */
  --menthe:    #eef5da;   /* fond doux (lime très clair) */
  --creme:     #FBFBF7;   /* fond page */
  --encre:     #0b0f05;   /* texte principal (presque noir) */
  --gris:      #5b6b4a;   /* texte secondaire */
  --ligne:     rgba(78,102,31,.16);
  --or:        #E6A93C;   /* accent chaud (étoiles) */
  --blanc:     #FFFFFF;
  --ombre:     0 18px 50px -20px rgba(41,53,18,.30);
  --ombre-sm:  0 6px 22px -12px rgba(11,15,5,.28);
  --display: "Kite One", system-ui, sans-serif;
  --corps:    "Nunito", system-ui, -apple-system, sans-serif;
  --radio: 20px;
  --radio-sm: 13px;
  --max: 1140px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  font-family:var(--corps);
  color:var(--encre);
  background:var(--creme);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--vert); color:#fff; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 22px; }

h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.01em; }

/* ── Accessibilité ──────────────────────────────────── */
.saut{
  position:absolute; left:-9999px; top:0;
  background:var(--vert); color:#fff; padding:10px 16px; border-radius:8px; z-index:200;
}
.saut:focus{ left:12px; top:12px; }

a:focus-visible, button:focus-visible{
  outline:3px solid var(--vert-clair); outline-offset:3px; border-radius:6px;
}

/* ── Boutons ────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:.97rem;
  padding:.85em 1.5em; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primaire{ background:var(--vert); color:#fff; box-shadow:var(--ombre-sm); }
.btn-primaire:hover{ background:var(--vert-2); transform:translateY(-2px); box-shadow:var(--ombre); }
.btn-fantome{ background:transparent; color:var(--vert); border-color:var(--ligne); }
.btn-fantome:hover{ background:var(--menthe); transform:translateY(-2px); }
.btn-clair{ background:#fff; color:var(--vert); }
.btn-clair:hover{ transform:translateY(-2px); box-shadow:var(--ombre-sm); }

/* ── En-tête ────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,251,247,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ligne);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.marque{ display:flex; align-items:center; gap:.65em; font-family:var(--display); font-weight:700; font-size:1.18rem; color:var(--vert-2); perspective:700px; }
.marque small{ display:block; font-family:var(--corps); font-weight:500; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); }
.logo-img{ width:50px; height:50px; flex:none; object-fit:contain; background:transparent; transition:transform .85s cubic-bezier(.34,1.2,.4,1); transform-style:preserve-3d; }
.marque:hover .logo-img{ transform:rotateY(360deg) scale(1.06); }
.logo-img--pied{ background:#fff; padding:5px; border-radius:12px; box-shadow:var(--ombre-sm); }
.nav-liens{ display:flex; align-items:center; gap:30px; }
.nav-liens a{ font-weight:500; font-size:.95rem; color:var(--encre); transition:color .15s; white-space:nowrap; }
.nav-liens a:hover{ color:var(--vert); }
.nav-liens .btn{ padding:.6em 1.25em; }
.nav-liens a.btn-primaire{ color:#fff; }
.burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--encre); }

/* ── Héros ──────────────────────────────────────────── */
.heros{ position:relative; padding:96px 0 86px; overflow:hidden; color:#fff; }
.heros-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.heros-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(115deg, rgba(11,15,5,.88) 0%, rgba(41,53,18,.62) 48%, rgba(78,102,31,.34) 100%),
    radial-gradient(700px 460px at 80% 110%, rgba(152,201,59,.4), transparent 60%);
}
.heros .wrap{ position:relative; z-index:2; }
.heros-grille{ display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.8rem; font-weight:600; letter-spacing:.04em;
  color:var(--vert-2); background:var(--menthe);
  padding:.45em 1em; border-radius:999px; margin-bottom:22px;
}
.eyebrow .pt{ width:7px; height:7px; border-radius:50%; background:var(--vert-clair); }
.heros h1{ font-size:clamp(2.3rem, 5vw, 3.6rem); margin-bottom:20px; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.heros h1 em{ font-style:italic; color:#98c93b; }
.heros p.lead{ font-size:1.12rem; color:rgba(255,255,255,.92); max-width:36ch; margin-bottom:30px; text-shadow:0 1px 14px rgba(0,0,0,.35); }

/* couleurs sur vidéo */
.heros .eyebrow{ background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); }
.heros .eyebrow .pt{ background:#98c93b; box-shadow:0 0 8px #98c93b; }
.heros .btn-primaire{ color:#fff; font-weight:700; letter-spacing:.01em; }
.heros .btn-fantome{ color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); }
.heros .btn-fantome:hover{ background:rgba(255,255,255,.16); }

/* ── Animation « nettoyage » (essuyage) ─────────────── */
.nettoie{ position:relative; display:inline-block; }
.nettoie .txt{ display:inline-block; animation:reveler-propre 1.5s cubic-bezier(.66,0,.2,1) .35s both; }
@keyframes reveler-propre{
  0%{ clip-path:inset(0 100% -12% 0); opacity:0; filter:blur(3px); }
  35%{ opacity:1; }
  100%{ clip-path:inset(0 0 -12% 0); opacity:1; filter:blur(0); }
}
.nettoie::after{
  content:""; position:absolute; top:-8%; bottom:-8%; left:0; width:8px; border-radius:6px;
  background:linear-gradient(180deg, transparent, rgba(152,201,59,.2), #98c93b, #fff, #98c93b, rgba(152,201,59,.2), transparent);
  box-shadow:0 0 22px 6px rgba(152,201,59,.75), 0 0 6px 2px rgba(255,255,255,.9);
  animation:squeegee 1.5s cubic-bezier(.66,0,.2,1) .35s both;
}
@keyframes squeegee{
  0%{ left:-1%; opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ left:101%; opacity:0; }
}
.lead.nettoie-2{ animation:reveler-propre 1.3s cubic-bezier(.66,0,.2,1) 1.15s both; }

.heros h1 em.brille{
  background:linear-gradient(100deg, #98c93b 30%, #ffffff 50%, #98c93b 70%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  background-position:60% 0; padding-right:.18em; margin-right:-.14em;
  animation:briller 4.5s ease-in-out 2.2s infinite;
}
@keyframes briller{
  0%,100%{ background-position:120% 0; }
  50%{ background-position:-20% 0; }
}

.bulle{ position:absolute; z-index:2; bottom:-30px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.9), rgba(152,201,59,.25) 60%, transparent 72%);
  box-shadow:0 0 10px rgba(255,255,255,.4); pointer-events:none; opacity:0;
  animation:monter 9s linear infinite; }
@keyframes monter{
  0%{ transform:translateY(0) scale(.6); opacity:0; }
  12%{ opacity:.85; }
  80%{ opacity:.7; }
  100%{ transform:translateY(-78vh) scale(1.1); opacity:0; }
}
.heros-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.heros-confiance{ display:flex; flex-wrap:wrap; gap:12px; font-size:.92rem; }
.heros-confiance > span{
  display:flex; align-items:center; gap:.5em; font-weight:600; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26);
  padding:.5em 1em; border-radius:999px; backdrop-filter:blur(6px);
  opacity:0; transform:translateY(16px) scale(.96);
  animation:confiance-entree .65s cubic-bezier(.2,.8,.25,1) both;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.heros-confiance > span:hover{ transform:translateY(-4px); background:rgba(255,255,255,.22); border-color:rgba(152,201,59,.6); }
.heros-confiance > span:nth-child(1){ animation-delay:1.9s; }
.heros-confiance > span:nth-child(2){ animation-delay:2.05s; }
.heros-confiance > span:nth-child(3){ animation-delay:2.2s; }
@keyframes confiance-entree{ to{ opacity:1; transform:none; } }
.heros-confiance svg{ color:#98c93b; flex:none; filter:drop-shadow(0 0 6px rgba(152,201,59,.6)); animation:ico-pulse 2.6s ease-in-out infinite; }
@keyframes ico-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.2); } }

.heros-carte{
  position:relative; background:#fff; border-radius:var(--radio);
  border:1px solid var(--ligne); box-shadow:var(--ombre); padding:30px;
}
.heros-carte h3{ font-size:1.15rem; margin-bottom:6px; color:var(--vert-2); }
.heros-carte .sous{ font-size:.86rem; color:var(--gris); margin-bottom:20px; }

/* ── Bande de confiance ─────────────────────────────── */
.bande{ background:var(--vert-2); color:#fff; padding:26px 0; }
.bande-grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.bande b{ display:block; font-family:var(--display); font-size:1.9rem; line-height:1; font-variant-numeric:tabular-nums; }
.bande span{ font-size:.82rem; opacity:.82; }

/* ── Sections génériques ────────────────────────────── */
section{ padding:78px 0; }
.titre-bloc{ max-width:620px; margin:0 auto 50px; text-align:center; }
.titre-bloc .kicker{ font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--olive); }
.titre-bloc h2{ font-size:clamp(1.9rem,4vw,2.7rem); margin:10px 0 14px; }
.titre-bloc p{ color:var(--gris); }

/* ── Services ───────────────────────────────────────── */
.services-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.carte-svc{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--ligne); border-radius:var(--radio);
  padding:30px 26px; transition:transform .25s ease, box-shadow .25s ease;
}
.carte-svc::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--vert-clair), var(--vert));
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.carte-svc:hover{ transform:translateY(-8px); box-shadow:var(--ombre); }
.carte-svc:hover::before{ transform:scaleX(1); }
.carte-svc .ico{
  width:54px; height:54px; border-radius:15px; margin-bottom:18px;
  background:var(--menthe); color:var(--vert); display:grid; place-items:center;
  transition:transform .35s ease, background .25s ease;
}
.carte-svc:hover .ico{ transform:scale(1.12) rotate(-5deg); background:var(--vert); color:#fff; }
.carte-svc h3{ font-size:1.22rem; margin-bottom:10px; }
.carte-svc p{ font-size:.95rem; color:var(--gris); margin-bottom:14px; }
.carte-svc ul{ list-style:none; display:grid; gap:7px; }
.carte-svc li{ font-size:.88rem; color:var(--encre); padding-left:20px; position:relative; }
.carte-svc li::before{ content:"✓"; position:absolute; left:0; color:var(--olive); font-weight:700; }

/* ── Pourquoi ───────────────────────────────────────── */
.pourquoi{ background:var(--menthe); position:relative; }
.pourquoi-grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.feat{
  position:relative; text-align:center; overflow:hidden;
  background:#fff; border:1px solid var(--ligne); border-radius:var(--radio);
  padding:34px 22px 28px; transition:transform .28s ease, box-shadow .28s ease;
}
.feat::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--vert-clair), var(--vert));
  transform:scaleX(0); transition:transform .35s ease;
}
.feat:hover{ transform:translateY(-8px); box-shadow:var(--ombre); }
.feat:hover::before{ transform:scaleX(1); }
.feat .ico{
  position:relative; width:70px; height:70px; margin:0 auto 18px; border-radius:50%;
  background:linear-gradient(145deg, var(--vert-clair), var(--vert-2)); color:#fff;
  display:grid; place-items:center; box-shadow:0 14px 28px -10px rgba(78,102,31,.55);
  transition:transform .35s ease;
}
.feat:hover .ico{ transform:scale(1.12) rotate(-6deg); }
.feat .ico::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid rgba(152,201,59,.4); animation:ring-soft 3.2s ease-in-out infinite;
}
.feat:nth-child(2) .ico::after{ animation-delay:.5s; }
.feat:nth-child(3) .ico::after{ animation-delay:1s; }
.feat:nth-child(4) .ico::after{ animation-delay:1.5s; }
@keyframes ring-soft{ 0%,100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.13); opacity:.12; } }
.feat h3{ font-size:1.12rem; margin-bottom:9px; color:var(--vert-2); }
.feat p{ font-size:.92rem; color:var(--gris); }

/* ── Étapes (stepper) ───────────────────────────────── */
.etapes-grille{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.etapes-grille::before{
  content:""; position:absolute; top:33px; left:17%; right:17%; height:3px; z-index:0;
  background:linear-gradient(90deg, var(--vert-clair), var(--vert));
  border-radius:3px; transform:scaleX(0); transform-origin:left;
  transition:transform 1.3s cubic-bezier(.65,0,.35,1);
}
.etapes-grille.trace::before{ transform:scaleX(1); }
.etape{ position:relative; z-index:1; text-align:center; }
.etape-num{
  position:relative; z-index:1; width:66px; height:66px; margin:0 auto 18px; border-radius:50%;
  background:linear-gradient(145deg, var(--vert-clair), var(--vert-2)); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-size:1.5rem; font-weight:700;
  box-shadow:0 14px 30px -10px rgba(78,102,31,.6);
}
.etape-num::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--vert-clair); opacity:0;
}
.etapes-grille.trace .etape-num{ animation:num-pop .7s cubic-bezier(.2,.85,.3,1.1) both; }
.etapes-grille.trace .etape-num::after{ animation:ring-pulse 2.6s ease-out infinite; }
.etapes-grille.trace .etape:nth-child(1) .etape-num{ animation-delay:.15s; }
.etapes-grille.trace .etape:nth-child(2) .etape-num{ animation-delay:.5s; }
.etapes-grille.trace .etape:nth-child(3) .etape-num{ animation-delay:.85s; }
.etapes-grille.trace .etape:nth-child(2) .etape-num::after{ animation-delay:.45s; }
.etapes-grille.trace .etape:nth-child(3) .etape-num::after{ animation-delay:.9s; }
@keyframes num-pop{ 0%{ opacity:0; transform:scale(.3); } 60%{ opacity:1; transform:scale(1.16); } 100%{ opacity:1; transform:scale(1); } }
@keyframes ring-pulse{ 0%{ transform:scale(1); opacity:.55; } 70%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }
@media (max-width:620px){ .etapes-grille::before{ display:none; } }
.etape h3{ font-size:1.18rem; margin:8px 0 8px; color:var(--vert-2); }
.etape p{ font-size:.93rem; color:var(--gris); }

/* ── Témoignages ────────────────────────────────────── */
.temoins-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.temoin{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--radio);
  padding:28px; display:flex; flex-direction:column; gap:16px;
}
.etoiles{ position:relative; display:inline-block; letter-spacing:2px; font-size:1.05rem; line-height:1; }
.etoiles .et-bg{ color:rgba(11,15,5,.16); }
.etoiles .et-fg{
  position:absolute; left:0; top:0; color:var(--or); overflow:hidden; white-space:nowrap;
  width:0; transition:width 1.2s cubic-bezier(.5,.1,.2,1) .25s;
}
.temoin.vu .etoiles .et-fg{ width:100%; }
.temoin p{ font-size:.97rem; color:var(--encre); font-style:italic; }
.temoin .qui{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.temoin .avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:linear-gradient(145deg,var(--vert-clair),var(--vert-2)); color:#fff;
  display:grid; place-items:center; font-weight:600; font-family:var(--display);
}
.temoin .qui b{ display:block; font-size:.92rem; }
.temoin .qui span{ font-size:.8rem; color:var(--gris); }

/* ── Zone de service ────────────────────────────────── */
.zone{ background:var(--vert-2); color:#fff; }
.zone-grille{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; }
.zone h2{ font-size:clamp(1.8rem,3.5vw,2.4rem); margin-bottom:16px; }
.zone p{ opacity:.9; margin-bottom:22px; }
.villes{ display:flex; flex-wrap:wrap; gap:10px; }
.villes > span{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:.45em 1em; border-radius:999px; font-size:.88rem; }

/* ── Contact / Soumission ───────────────────────────── */
.contact-grille{ display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; align-items:start; }
.contact-info h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:16px; }
.contact-info .kicker{ color:var(--olive); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; }
.contact-info p{ color:var(--gris); margin-bottom:26px; }
.coord{ display:grid; gap:18px; }
.coord a, .coord div{ display:flex; align-items:center; gap:14px; font-size:1rem; }
.coord .ico{ width:46px; height:46px; flex:none; border-radius:13px; background:var(--menthe); color:var(--vert); display:grid; place-items:center; }
.coord b{ display:block; font-size:.78rem; color:var(--gris); font-weight:500; text-transform:uppercase; letter-spacing:.06em; }

.form{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--radio);
  box-shadow:var(--ombre); padding:32px;
}
.champ{ margin-bottom:18px; }
.champ label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:7px; }
.champ input, .champ select, .champ textarea{
  width:100%; font-family:inherit; font-size:.97rem; color:var(--encre);
  padding:.8em 1em; border:1.5px solid var(--ligne); border-radius:var(--radio-sm);
  background:var(--creme); transition:border .15s, box-shadow .15s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline:none; border-color:var(--vert-clair); box-shadow:0 0 0 4px rgba(152,201,59,.12);
}
.champ textarea{ resize:vertical; min-height:110px; }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form .btn-primaire{ width:100%; justify-content:center; margin-top:6px; }
.form-note{ font-size:.78rem; color:var(--gris); text-align:center; margin-top:12px; }

/* ── Pied ───────────────────────────────────────────── */
footer{ background:var(--encre); color:#d4e0b6; padding:54px 0 30px; }
.pied-grille{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; margin-bottom:36px; }
footer .marque{ color:#fff; margin-bottom:14px; }
footer .marque small{ color:#97a87a; }
footer p{ font-size:.9rem; opacity:.8; max-width:36ch; }
footer h4{ font-family:var(--corps); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#97a87a; margin-bottom:14px; }
footer ul{ list-style:none; display:grid; gap:9px; }
footer a{ font-size:.93rem; opacity:.85; transition:opacity .15s; }
footer a:hover{ opacity:1; color:#fff; }
.pied-bas{ border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.82rem; opacity:.7; }

/* ── Bouton WhatsApp flottant ───────────────────────── */
.wa-flottant{
  position:fixed; right:22px; bottom:22px; z-index:150;
  display:inline-flex; align-items:center; gap:.6em;
  background:#25D366; color:#fff; font-weight:700; font-size:1rem;
  padding:.85em 1.35em .85em 1.1em; border-radius:999px;
  box-shadow:0 14px 34px -8px rgba(37,211,102,.6);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:wa-pulse 2.4s ease-out infinite;
}
.wa-flottant:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 18px 40px -8px rgba(37,211,102,.7); }
.wa-flottant svg{ width:28px; height:28px; flex:none; }
.wa-flottant .wa-txt{ white-space:nowrap; }
@keyframes wa-pulse{
  0%{ box-shadow:0 14px 34px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 14px 34px -8px rgba(37,211,102,.6), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 14px 34px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:620px){
  .wa-flottant{ right:16px; bottom:16px; padding:.9em; }
  .wa-flottant .wa-txt{ display:none; }
}

/* ── Bouton WhatsApp (en ligne, vert WA) ────────────── */
.btn-wa{ background:#25D366; color:#fff; }
.btn-wa:hover{ background:#1DAE54; transform:translateY(-2px); box-shadow:var(--ombre-sm); }

/* ── Indicateur de défilement ───────────────────────── */
.scroll-indic{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:rgba(255,255,255,.85); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; opacity:0;
  animation:apparaitre-indic .8s ease 2.6s both;
}
.scroll-indic:hover{ color:#98c93b; }
.scroll-indic .souris{ width:24px; height:38px; border:2px solid currentColor; border-radius:13px; position:relative; }
.scroll-indic .souris::before{
  content:""; position:absolute; left:50%; top:7px; width:4px; height:7px; border-radius:3px;
  background:currentColor; transform:translateX(-50%); animation:molette 1.8s ease-in-out infinite;
}
@keyframes molette{ 0%{ opacity:1; top:7px; } 70%{ opacity:0; top:18px; } 100%{ opacity:0; top:18px; } }
@keyframes apparaitre-indic{ to{ opacity:1; } }
@media (max-width:620px){ .scroll-indic{ display:none; } }

/* ── Visuel du héros (globe flottant) ───────────────── */
.heros-visuel{ position:relative; display:grid; place-items:center; min-height:440px; }
.globe-halo{
  position:absolute; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(152,201,59,.5), transparent 68%);
  filter:blur(38px); animation:pulser 5.5s ease-in-out infinite; z-index:0;
}
.globe-img{
  position:relative; z-index:1; width:100%; max-width:480px;
  filter:drop-shadow(0 26px 34px rgba(11,15,5,.5));
  animation:flotter 6s ease-in-out infinite;
}
@keyframes flotter{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } }
@keyframes pulser{ 0%,100%{ transform:scale(1); opacity:.65; } 50%{ transform:scale(1.14); opacity:1; } }
.pilule{
  position:absolute; z-index:2; background:#fff; border-radius:14px;
  box-shadow:var(--ombre); padding:.65em .95em; display:flex; align-items:center; gap:.6em;
  font-size:.86rem; font-weight:600; color:var(--encre); animation:flotter 5s ease-in-out infinite;
}
.pilule .pico{ width:30px; height:30px; flex:none; border-radius:9px; background:var(--menthe); color:var(--vert); display:grid; place-items:center; }
.pilule b{ display:block; font-family:var(--display); font-size:1rem; color:var(--vert-2); line-height:1; }
.pilule--1{ top:2%; left:-5%; animation-delay:.3s; }
.pilule--2{ bottom:8%; right:-7%; animation-delay:1.3s; }
.pilule--3{ bottom:40%; left:-9%; animation-delay:.8s; }

/* ── Bande défilante (marquee) ──────────────────────── */
.marquee{ background:var(--vert); color:#fff; overflow:hidden; padding:13px 0; }
.marquee-piste{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:defiler 30s linear infinite; }
.marquee:hover .marquee-piste{ animation-play-state:paused; }
.marquee-piste span{ font-family:var(--display); font-weight:600; font-size:1.02rem; padding:0 26px; opacity:.95; }
.marquee-piste .sep{ opacity:.5; padding:0 4px; }
@keyframes defiler{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ── Effet de balayage sur bouton primaire ──────────── */
.btn-primaire{ position:relative; overflow:hidden; }
.btn-primaire::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-primaire:hover::after{ left:140%; }

/* ── Animations d'apparition ────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.vu{ opacity:1; transform:none; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width:900px){
  .heros-grille, .zone-grille, .contact-grille{ grid-template-columns:1fr; gap:38px; }
  .services-grille, .etapes-grille, .temoins-grille{ grid-template-columns:1fr 1fr; }
  .pourquoi-grille{ grid-template-columns:1fr 1fr; }
  .bande-grille{ grid-template-columns:1fr 1fr; gap:26px; }
  .pied-grille{ grid-template-columns:1fr 1fr; }
}
/* ── Notre histoire ─────────────────────────────────── */
.histoire-grille{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; }
.histoire-photo{ position:relative; }
.histoire-photo img{
  width:100%; border-radius:var(--radio); box-shadow:var(--ombre);
  border:1px solid var(--ligne); object-fit:cover; aspect-ratio:4/3; background:var(--menthe);
  object-position:center 38%;
}
.histoire-photo::before{
  content:""; position:absolute; left:-14px; top:-14px; width:80px; height:80px; z-index:-1;
  border-radius:18px; background:linear-gradient(145deg, var(--vert-clair), var(--olive));
}
.histoire-cap{
  display:block; margin-top:12px; font-size:.84rem; color:var(--gris);
  font-style:italic; text-align:center;
}
.histoire-texte .kicker{ font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--olive); }
.histoire-texte h2{ font-size:clamp(1.6rem,3.2vw,2.2rem); margin:10px 0 18px; }
.histoire-texte p{ color:var(--gris); margin-bottom:14px; }
.histoire-signature{ font-family:var(--display); color:var(--vert); font-size:1.05rem; margin-top:4px !important; }
.histoire-valeurs{ display:grid; gap:16px; margin-top:26px; }
.valeur{ display:flex; align-items:flex-start; gap:14px; }
.valeur-ico{
  flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--menthe); color:var(--vert);
}
.valeur b{ display:block; font-family:var(--display); font-size:1.02rem; color:var(--encre); margin-bottom:2px; }
.valeur > div > span{ font-size:.9rem; color:var(--gris); }
@media (max-width:900px){ .histoire-grille{ grid-template-columns:1fr; gap:34px; } }

/* ── Mode édition en ligne (admin connecté) ─────────── */
.ges-edit-mode [data-edit]{
  outline:2px dashed rgba(152,201,59,.55); outline-offset:3px; border-radius:4px; cursor:text;
  transition:outline-color .15s, background .15s;
}
.ges-edit-mode [data-edit]:hover{ outline-color:var(--vert); background:rgba(152,201,59,.07); }
.ges-edit-mode [data-edit]:focus{ outline:2px solid var(--vert); background:rgba(152,201,59,.16); }
/* stats : nombre (cible) éditable en ligne, suffixe affiché à côté */
.ges-edit-mode .stat-edit [data-edit]{ display:inline-block; min-width:.6em; }
.stat-edit .stat-suf{ pointer-events:none; }
/* en édition : désactiver les animations qui cachent le texte */
.ges-edit-mode .reveal{ opacity:1 !important; transform:none !important; }
.ges-edit-mode .nettoie .txt{ animation:none !important; clip-path:none !important; opacity:1 !important; filter:none !important; }
.ges-edit-mode .nettoie::after{ display:none !important; }
.ges-edit-mode .lead.nettoie-2{ animation:none !important; opacity:1 !important; }
.ges-edit-mode .heros h1 em.brille{ -webkit-text-fill-color:#98c93b; color:#98c93b; animation:none !important; }
body.ges-edit-mode{ padding-bottom:64px; }

/* Barre d'édition flottante */
#ges-toolbar{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:#293512; color:#fff; padding:10px 18px;
  box-shadow:0 -8px 24px -12px rgba(0,0,0,.5); font-family:var(--corps); font-size:.9rem;
}
#ges-toolbar .ges-tb-logo{ font-weight:700; }
#ges-toolbar .ges-tb-switch{ display:flex; align-items:center; gap:6px; cursor:pointer; }
#ges-toolbar .ges-tb-status{ margin-left:auto; font-weight:600; min-height:1em; }
#ges-toolbar .ges-tb-btn{
  display:inline-flex; align-items:center; gap:.4em; cursor:pointer;
  background:rgba(255,255,255,.15); color:#fff; border:none; border-radius:999px;
  padding:.5em 1.1em; font-size:.88rem; font-weight:600; text-decoration:none; transition:background .15s;
}
#ges-toolbar .ges-tb-btn:hover{ background:rgba(255,255,255,.28); }
#ges-toolbar .ges-tb-primary{ background:#98c93b; }
#ges-toolbar .ges-tb-primary:hover{ background:#aadb4f; }
@media (max-width:620px){ #ges-toolbar .ges-tb-status{ margin-left:0; width:100%; order:5; } }

@media (max-width:620px){
  .nav-liens{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0;
    background:var(--creme); border-bottom:1px solid var(--ligne);
    padding:10px 22px 22px; transform:translateY(-120%); transition:transform .28s ease; align-items:stretch;
  }
  .nav-liens.ouvert{ transform:none; box-shadow:var(--ombre); }
  .nav-liens a{ padding:13px 0; border-bottom:1px solid var(--ligne); }
  .nav-liens .btn{ margin-top:14px; justify-content:center; }
  .burger{ display:block; }
  .services-grille, .etapes-grille, .temoins-grille, .pourquoi-grille, .duo{ grid-template-columns:1fr; }
  section{ padding:58px 0; }
  .heros-visuel{ min-height:auto; margin-top:8px; }
  .globe-img{ max-width:320px; }
  .globe-halo{ width:260px; height:260px; }
  .pilule--3{ display:none; }
  .pilule--1{ left:-2%; top:0; }
  .pilule--2{ right:-2%; bottom:4%; }
}

/* ── Édition structurelle des cartes de service ─────── */
.ges-edit-mode .svc-ed{ outline:2px dashed rgba(78,102,31,.55); outline-offset:3px; border-radius:4px; cursor:text; }
.ges-edit-mode .svc-ed:hover{ outline-color:var(--vert); background:rgba(78,102,31,.07); }
.ges-edit-mode .svc-ed:focus{ outline:2px solid var(--vert); background:rgba(152,201,59,.16); }

.carte-del{
  position:absolute; top:10px; right:10px; z-index:4; width:28px; height:28px; border-radius:50%;
  border:none; background:#c0392b; color:#fff; font-size:.85rem; line-height:1; cursor:pointer;
  display:none; place-items:center; box-shadow:0 4px 12px -4px rgba(0,0,0,.4);
}
body.ges-edit-mode .carte-del{ display:grid; }
.carte-del:hover{ background:#a5281a; transform:scale(1.08); }

.ico-edit{
  display:none; margin:-6px 0 14px; font-size:.74rem; font-weight:600; font-family:var(--corps);
  background:var(--menthe); color:var(--vert); border:1px solid var(--ligne);
  border-radius:999px; padding:.3em .8em; cursor:pointer;
}
body.ges-edit-mode .ico-edit{ display:inline-block; }
.ico-edit:hover{ background:var(--vert); color:#fff; }

/* ── Sous-pages SEO (services / zones) ──────────────── */
.page-svc-hero{ padding:120px 0 36px; background:linear-gradient(180deg, var(--menthe), var(--creme)); }
.fil{ font-size:.84rem; color:var(--gris); margin-bottom:18px; }
.fil a{ color:var(--olive); text-decoration:none; }
.fil a:hover{ text-decoration:underline; }
.fil span{ color:var(--encre); }
.page-svc-head{ display:flex; align-items:center; gap:16px; }
.page-svc-ico{
  flex:none; width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  background:var(--vert); color:#fff; box-shadow:var(--ombre);
}
.page-svc-hero h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin:6px 0 0; }
.page-svc-hero .lead{ max-width:760px; color:var(--gris); margin:18px 0 22px; font-size:1.08rem; }
.page-svc-cta{ display:flex; gap:12px; flex-wrap:wrap; }

.page-svc-corps{ padding:54px 0; }
.page-svc-grille{ display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:start; }
.page-svc-texte p{ color:var(--gris); margin-bottom:16px; font-size:1.04rem; line-height:1.75; }
.page-svc-carte{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--radio);
  box-shadow:var(--ombre); padding:26px; position:sticky; top:90px;
}
.page-svc-carte h2{ font-size:1.2rem; margin:0 0 16px; }
.page-svc-points{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:11px; }
.page-svc-points li{ display:flex; align-items:flex-start; gap:9px; color:var(--encre); font-size:.96rem; }
.page-svc-points li svg{ color:var(--vert); flex:none; margin-top:2px; }
.page-svc-points a{ color:var(--encre); text-decoration:none; }
.page-svc-points a:hover{ color:var(--vert); text-decoration:underline; }
.page-svc-note{ margin-top:12px; font-size:.82rem; color:var(--gris); text-align:center; }

.faq-liste{ max-width:820px; margin:8px auto 0; display:grid; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--ligne); border-radius:14px; padding:4px 20px; }
.faq-item summary{
  cursor:pointer; font-family:var(--display); font-size:1.06rem; color:var(--encre);
  padding:16px 0; list-style:none; position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); color:var(--vert); font-size:1.4rem; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ color:var(--gris); margin:0 0 16px; line-height:1.7; }

.page-svc-autres{ padding:54px 0; }
.autres-grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.autre-svc{
  display:flex; align-items:center; gap:13px; padding:16px 18px; text-decoration:none;
  background:#fff; border:1px solid var(--ligne); border-radius:14px; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.autre-svc:hover{ transform:translateY(-2px); box-shadow:var(--ombre); border-color:var(--vert-clair); }
.autre-ico{ flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--menthe); color:var(--vert); }
.autre-svc b{ display:block; color:var(--encre); font-family:var(--display); font-size:1rem; }
.autre-svc small{ display:block; color:var(--gris); font-size:.84rem; margin-top:2px; }

.page-svc-band{ padding:60px 0; }
.page-svc-band h2{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:10px; }
.page-svc-band p{ color:var(--gris); margin-bottom:22px; }

@media (max-width:860px){
  .page-svc-grille{ grid-template-columns:1fr; }
  .page-svc-carte{ position:static; }
  .page-svc-hero{ padding:100px 0 30px; }
}

/* Lien « En savoir plus » sur les cartes de service de l'accueil */
.svc-plus{
  display:inline-flex; align-items:center; gap:.4em; margin-top:14px;
  color:var(--vert); font-weight:700; font-size:.92rem; text-decoration:none;
}
.svc-plus span{ transition:transform .15s; }
.svc-plus:hover{ color:var(--olive); }
.svc-plus:hover span{ transform:translateX(3px); }
/* Menu : logo à gauche, liens + icône admin à droite */
.nav{ gap:16px; }
.nav > .marque{ margin-right:auto; }                 /* pousse tout le reste à droite */
.nav-liens .btn{ flex:none; }                        /* le bouton ne rétrécit jamais */
/* Icône admin tout à droite (visible seulement connecté) */
.nav-admin{ flex:none; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--vert); color:#fff !important; box-shadow:var(--ombre-sm); order:10;
  transition:transform .2s, background .15s; }
.nav-admin:hover{ background:var(--vert-2); transform:rotate(45deg); }
/* Menu hamburger plus tôt (≤900px) pour éviter l'encombrement */
@media (max-width:900px){
  .nav-liens{ position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0;
    background:var(--creme); border-bottom:1px solid var(--ligne);
    padding:10px 22px 22px; transform:translateY(-120%); transition:transform .28s ease; align-items:stretch; z-index:90; }
  .nav-liens.ouvert{ transform:none; box-shadow:var(--ombre); }
  .nav-liens a{ padding:13px 0; border-bottom:1px solid var(--ligne); }
  .nav-liens .btn{ margin-top:14px; justify-content:center; }
  .burger{ display:block; order:11; }
}
@media (max-width:620px){ .nav-admin{ display:none; } }

/* Pastille de ville cliquable (zone desservie) */
.ville-lien{ text-decoration:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.ville-lien:hover{ background:var(--vert); color:#fff; border-color:var(--vert); }

/* Page légale (politique de confidentialité) */
.legal{ max-width:780px; }
.legal h2{ font-size:1.2rem; margin:30px 0 10px; }
.legal > p{ color:var(--gris); line-height:1.75; margin-bottom:14px; }
.legal a{ color:var(--vert); }
.legal-liste{ margin:0 0 16px 1.1em; color:var(--gris); line-height:1.7; }
.legal-liste li{ margin-bottom:6px; }
.form-note--privacy{ margin-top:6px; }
.form-note--privacy a{ color:var(--vert); }
.pied-bas a{ color:inherit; text-decoration:underline; }
.pied-bas a:hover{ color:var(--vert-clair); }

/* ── Page Réalisations (galerie de blocs) ───────────── */
.real-corps{ padding:46px 0 60px; }
.real-stack{ display:flex; flex-direction:column; gap:42px; max-width:860px; margin:0 auto; }
.real-image img{ width:100%; border-radius:var(--radio); box-shadow:var(--ombre); }
.real-legend{ text-align:center; color:var(--gris); font-size:.9rem; font-style:italic; margin-top:12px; }
.real-texte{ text-align:center; }
.real-texte h2, .real-icotexte h2{ font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:10px; }
.real-texte p{ color:var(--gris); max-width:62ch; margin:0 auto; }
.real-icotexte{ text-align:center; background:var(--menthe); border-radius:var(--radio); padding:34px 26px; }
.real-icotexte .real-ico{ display:inline-grid; place-items:center; width:64px; height:64px; border-radius:16px; background:var(--vert); color:#fff; margin-bottom:14px; }
.real-icotexte p{ color:var(--gris); max-width:60ch; margin:0 auto; }
.real-ph{ display:grid; place-items:center; aspect-ratio:4/3; background:var(--menthe); border:2px dashed var(--ligne); border-radius:var(--radio); color:var(--gris); font-size:.9rem; }
.real-vide{ text-align:center; color:var(--gris); padding:40px 0; }

/* Avant/après — deslizador */
.ba-slider{ position:relative; width:100%; max-width:760px; margin:0 auto; aspect-ratio:4/3; border-radius:var(--radio); overflow:hidden; box-shadow:var(--ombre); background:var(--menthe); touch-action:none; }
.ba-slider > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-before{ position:absolute; inset:0; clip-path:inset(0 50% 0 0); }
.ba-before img, .ba-before .real-ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; }
.ba-line{ position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; transform:translateX(-50%); box-shadow:0 0 10px rgba(0,0,0,.45); pointer-events:none; z-index:3; }
.ba-handle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:#fff; box-shadow:var(--ombre-sm); display:grid; place-items:center; }
.ba-handle::before{ content:"⟷"; color:var(--vert); font-weight:700; }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; }
.ba-tag{ position:absolute; bottom:12px; padding:.3em .8em; border-radius:999px; font-size:.76rem; font-weight:700; color:#fff; background:rgba(11,15,5,.62); backdrop-filter:blur(4px); pointer-events:none; z-index:3; }
.ba-tag-a{ left:12px; } .ba-tag-b{ right:12px; }

/* Avant/après — lado a lado */
.ba-cote{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ba-cote figure{ position:relative; border-radius:var(--radio); overflow:hidden; box-shadow:var(--ombre-sm); }
.ba-cote img, .ba-cote .real-ph{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:0; }
.ba-cote figcaption{ position:absolute; bottom:10px; left:10px; padding:.3em .8em; border-radius:999px; font-size:.76rem; font-weight:700; color:#fff; background:rgba(11,15,5,.62); }
@media (max-width:620px){ .ba-cote{ grid-template-columns:1fr; } }

/* Réalisations — mode édition (admin) */
.rb-add{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:24px; padding:14px; background:var(--menthe); border-radius:var(--radio); }
.rb-add-l{ font-weight:700; color:var(--vert-2); }
.rb-add button{ cursor:pointer; border:1px solid var(--vert-clair); background:#fff; color:var(--vert-2); border-radius:999px; padding:.5em 1em; font-weight:600; font-family:var(--corps); font-size:.9rem; }
.rb-add button:hover{ background:var(--vert); color:#fff; border-color:var(--vert); }
.rb{ position:relative; border:1px dashed var(--ligne); border-radius:var(--radio); padding:20px; background:#fff; }
.rb-tools{ position:absolute; top:10px; right:10px; display:flex; gap:6px; z-index:5; }
.rb-tools button{ width:30px; height:30px; border-radius:8px; border:1px solid var(--ligne); background:#fff; cursor:pointer; font-size:.9rem; line-height:1; display:grid; place-items:center; color:var(--vert-2); }
.rb-tools button:hover{ background:var(--menthe); }
.rb-tools .rb-h{ cursor:grab; }
.rb-tools .rb-del{ color:#c0392b; border-color:#f0c4be; }
.rb-tools .rb-del:hover{ background:#fdecea; }
.rb.rb-dragging{ opacity:.5; outline:2px solid var(--vert-clair); }
.rb-ba{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.rb-slot{ position:relative; text-align:center; }
.rb-slot .rb-img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:var(--menthe); display:block; }
.rb-slot .rb-ph{ display:grid; place-items:center; border:2px dashed var(--ligne); color:var(--gris); font-size:.85rem; }
.rb-slot-label{ display:block; margin-top:6px; font-size:.72rem; font-weight:700; letter-spacing:.05em; color:var(--gris); }
.rb-imgbtn{ margin-top:6px; cursor:pointer; border:1px solid var(--vert-clair); background:#fff; color:var(--vert-2); border-radius:999px; padding:.35em .9em; font-weight:600; font-size:.82rem; font-family:var(--corps); }
.rb-imgbtn:hover{ background:var(--vert); color:#fff; }
.rb-mode{ margin-top:12px; cursor:pointer; border:1px solid var(--ligne); background:var(--menthe); color:var(--vert-2); border-radius:999px; padding:.4em 1em; font-weight:600; font-size:.85rem; font-family:var(--corps); }
.rb-edit{ outline:2px dashed rgba(152,201,59,.5); outline-offset:3px; border-radius:4px; min-height:1em; }
.rb-edit:focus{ outline:2px solid var(--vert); background:rgba(152,201,59,.12); }
.rb-tip{ text-align:center; color:var(--gris); font-size:.85rem; margin-top:18px; }
@media (max-width:620px){ .rb-ba{ grid-template-columns:1fr; } }

.carte-add{ display:none; }
body.ges-edit-mode .carte-add{
  display:inline-flex; align-items:center; gap:.45em; margin-top:20px;
  background:#fff; border:2px dashed var(--vert-clair); color:var(--vert);
  border-radius:var(--radio); padding:.8em 1.5em; cursor:pointer; font-weight:700; font-family:var(--corps); font-size:.95rem;
}
body.ges-edit-mode .carte-add:hover{ background:var(--menthe); }

/* ── Modale de sélection d'icône ────────────────────── */
.ges-modal{ position:fixed; inset:0; z-index:400; background:rgba(11,15,5,.55); display:grid; place-items:center; padding:20px; }
.ges-modal[hidden]{ display:none; }
.ges-modal-box{ background:#fff; border-radius:16px; padding:22px; width:min(440px,94vw); max-height:86vh; overflow:auto; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); font-family:var(--corps); }
.ges-modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.ges-modal-head strong{ font-family:var(--display); color:var(--vert-2); font-size:1.1rem; }
.ges-modal-head button{ border:none; background:none; font-size:1.1rem; cursor:pointer; color:var(--gris); }
.ges-icon-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.ges-icon-opt{ aspect-ratio:1; border:1px solid var(--ligne); border-radius:10px; background:#fff; color:var(--vert); cursor:pointer; display:grid; place-items:center; transition:.15s; }
.ges-icon-opt:hover{ background:var(--menthe); border-color:var(--vert-clair); transform:translateY(-2px); }
.ges-modal-up{ margin-top:18px; border-top:1px solid var(--ligne); padding-top:14px; font-size:.85rem; color:var(--gris); }
.ges-modal-up label{ display:block; margin-bottom:8px; font-weight:600; color:var(--encre); }

/* ── Champs de liste éditables (mode édition) ───────── */
.ges-edit-mode .ges-fld{ outline:2px dashed rgba(78,102,31,.55); outline-offset:3px; border-radius:4px; cursor:text; }
.ges-edit-mode .ges-fld:hover{ outline-color:var(--vert); background:rgba(78,102,31,.07); }
.ges-edit-mode .ges-fld:focus{ outline:2px solid var(--vert); background:rgba(152,201,59,.16); }

.temoin, .valeur{ position:relative; }

/* Bouton supprimer (carte) */
.item-del{
  position:absolute; top:10px; right:10px; z-index:5; width:28px; height:28px; border-radius:50%;
  border:none; background:#c0392b; color:#fff; font-size:.85rem; line-height:1; cursor:pointer;
  display:none; place-items:center; box-shadow:0 4px 12px -4px rgba(0,0,0,.4);
}
body.ges-edit-mode .item-del{ display:grid; }
.item-del:hover{ background:#a5281a; transform:scale(1.08); }

/* Petit bouton supprimer (ville / badge) */
.chip-del{
  display:none; margin-left:6px; width:18px; height:18px; border-radius:50%; border:none;
  background:#c0392b; color:#fff; font-size:.62rem; line-height:1; cursor:pointer; vertical-align:middle;
}
body.ges-edit-mode .chip-del{ display:inline-grid; place-items:center; }
.chip-del:hover{ background:#a5281a; }

/* Icône cliquable en édition */
body.ges-edit-mode .ico-clic{ cursor:pointer; outline:2px dashed rgba(78,102,31,.45); outline-offset:3px; border-radius:8px; }
body.ges-edit-mode .ico-clic:hover{ outline-color:var(--vert); }