/* =========================================================
   iD Green — Feuille de style commune pour les pages CMS
   A charger UNE FOIS globalement (ou sur les pages CMS concernées)
   Toutes les classes sont préfixées "idg-" pour éviter les conflits
   avec le thème PrestaShop.
   ========================================================= */

/* ---------- Variables & base ---------- */
.idg-page{
  --idg-green:#2f7d3c;
  --idg-green-light:#7cc142;
  --idg-ink:#12210f;
  --idg-paper:#fbfaf6;
  --idg-line:#e7e3d8;
  font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:#26301f;
  max-width:1040px;
  margin:0 auto;
  line-height:1.6;
}
.idg-page *{ box-sizing:border-box; }
.idg-page img{ max-width:100%; display:block; }

/* ---------- Eyebrow / footer (shared across all page types) ---------- */
.idg-eyebrow{
  text-transform:uppercase; letter-spacing:.1em; font-size:.75rem;
  font-weight:700; color:var(--idg-green); margin:0 0 6px;
}
.idg-footer{
  text-align:center; margin-top:36px; padding-top:18px;
  border-top:1px solid var(--idg-line); font-size:.85rem; color:#666;
}
.idg-footer a{ color:var(--idg-green); text-decoration:none; font-weight:700; }
.idg-footer img{ height:22px; margin:0 auto 8px; }

/* =========================================================
   1) PAGES "CONSEILS DE POSE" (sol dur / sol meuble)
   Racine : .idg-page.idg-pose
   ========================================================= */
.idg-pose{ background:var(--idg-paper); }

.idg-pose .idg-hero{
  position:relative; border-radius:18px; overflow:hidden; margin-bottom:28px;
  min-height:260px; display:flex; align-items:flex-end;
}
.idg-pose .idg-hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.idg-pose .idg-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(10,25,10,.85) 0%,rgba(10,25,10,.35) 55%,rgba(10,25,10,.05) 100%);
}
.idg-pose .idg-hero-content{ position:relative; z-index:2; padding:28px 32px; color:#fff; }
.idg-pose .idg-hero-content .idg-eyebrow{ color:var(--idg-green-light); }
.idg-pose .idg-hero h1{ margin:0 0 6px; font-size:1.9rem; font-weight:800; letter-spacing:-.01em; color:#fff; }
.idg-pose .idg-hero p{ margin:0; font-size:1rem; opacity:.92; max-width:520px; color:#fff; }

.idg-note{
  background:#fff; border:1px solid var(--idg-line); border-left:4px solid var(--idg-green);
  border-radius:8px; padding:14px 18px; margin:0 0 30px; font-size:.95rem;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.idg-note strong{ color:var(--idg-green); }

.idg-checklist{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 22px;
  list-style:none; margin:0 0 30px; padding:0;
}
.idg-checklist li{
  background:#fff; border:1px solid var(--idg-line); border-radius:10px;
  padding:12px 14px 12px 40px; position:relative; font-size:.92rem;
}
.idg-checklist li::before{
  content:"✓"; position:absolute; left:12px; top:12px; color:#fff; background:var(--idg-green);
  width:20px; height:20px; border-radius:50%; font-size:.68rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.idg-checklist li strong{ color:var(--idg-green); }

.idg-section-title{ display:flex; align-items:center; gap:12px; margin:38px 0 18px; }
.idg-section-title .idg-num{
  width:30px; height:30px; border-radius:50%; background:var(--idg-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; flex-shrink:0;
}
.idg-section-title h2{
  margin:0; font-size:1.05rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; color:var(--idg-ink);
}

.idg-tools{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
.idg-tools li{ padding:10px 0 10px 28px; position:relative; font-size:.94rem; border-bottom:1px dashed var(--idg-line); }
.idg-tools li::before{
  content:"✓"; position:absolute; left:0; top:9px; color:#fff; background:var(--idg-green);
  width:18px; height:18px; border-radius:50%; font-size:.65rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}

.idg-steps{ display:flex; flex-direction:column; gap:18px; }
.idg-step{
  display:grid; grid-template-columns:220px 1fr; gap:20px; background:#fff;
  border:1px solid var(--idg-line); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.idg-step-photo{ position:relative; min-height:150px; }
.idg-step-photo img{ width:100%; height:100%; object-fit:cover; min-height:150px; }
.idg-step-photo .idg-badge{
  position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:50%;
  background:var(--idg-green); color:#fff; font-weight:800; display:flex; align-items:center;
  justify-content:center; font-size:.9rem; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.idg-step-body{ padding:16px 20px 16px 4px; display:flex; flex-direction:column; justify-content:center; }
.idg-step-body strong{ display:block; font-size:1rem; margin-bottom:4px; color:var(--idg-ink); }
.idg-step-body p{ margin:0; font-size:.93rem; color:#4a5240; }

.idg-tip{
  background:#fff8e9; border:1px solid #eddd9f; border-radius:10px;
  padding:14px 18px; margin:20px 0; font-size:.92rem;
}
.idg-tip strong{ color:#96760a; }

.idg-finish{
  background:linear-gradient(120deg,var(--idg-green) 0%,var(--idg-green-light) 100%);
  border-radius:14px; padding:22px 26px; color:#fff; margin-top:8px;
}
.idg-finish h2{ margin:0 0 6px; font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.idg-finish p{ margin:0; font-size:.95rem; opacity:.95; }

@media(max-width:640px){
  .idg-pose .idg-checklist{ grid-template-columns:1fr; }
  .idg-pose .idg-tools{ grid-template-columns:1fr; }
  .idg-pose .idg-step{ grid-template-columns:1fr; }
  .idg-pose .idg-step-photo{ min-height:180px; }
  .idg-pose .idg-step-body{ padding:4px 16px 16px; }
  .idg-pose .idg-hero h1{ font-size:1.5rem; }
}

/* =========================================================
   2) FICHES PRODUIT (géotextile / bande / clous)
   Racine : .idg-page.idg-fiche
   ========================================================= */
.idg-fiche .idg-title{
  margin:0 0 4px; font-size:1.7rem; font-weight:800; color:var(--idg-ink); letter-spacing:-.01em;
}
.idg-fiche .idg-sub{ margin:0 0 24px; color:#667; font-size:.95rem; }

.idg-fiche .idg-hero-grid{
  display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:start; margin-bottom:8px;
}
.idg-fiche .idg-photo-frame{
  background:#fff; border:1px solid var(--idg-line); border-radius:16px; padding:18px;
  box-shadow:0 4px 18px rgba(20,50,15,.06);
}
.idg-fiche .idg-photo-frame img{ border-radius:8px; }

.idg-fiche .idg-fonction{
  background:#eef6ea; border-left:4px solid var(--idg-green); border-radius:8px;
  padding:14px 16px; font-size:.94rem; margin-bottom:18px;
}
.idg-fiche .idg-fonction strong{
  color:var(--idg-green); display:block; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:4px;
}

.idg-fiche .idg-spectable{
  width:100%; border-collapse:collapse; font-size:.92rem; background:#fff;
  border:1px solid var(--idg-line); border-radius:10px; overflow:hidden;
}
.idg-fiche .idg-spectable td{ padding:9px 14px; border-bottom:1px solid var(--idg-line); }
.idg-fiche .idg-spectable tr:last-child td{ border-bottom:none; }
.idg-fiche .idg-spectable tr:nth-child(even){ background:#fafaf7; }
.idg-fiche .idg-spectable td:first-child{ font-weight:700; color:var(--idg-green); width:46%; }

.idg-fiche .idg-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.idg-fiche .idg-tags span{
  background:var(--idg-green); color:#fff; font-size:.8rem; font-weight:700;
  padding:6px 13px; border-radius:20px;
}

.idg-fiche .idg-bar2{
  font-size:.95rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--idg-ink); margin:32px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--idg-ink);
}
.idg-fiche .idg-steps2{ counter-reset:idgstep2; list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.idg-fiche .idg-steps2 li{
  counter-increment:idgstep2; position:relative; padding:10px 14px 10px 46px;
  background:#fff; border:1px solid var(--idg-line); border-radius:10px; font-size:.92rem;
}
.idg-fiche .idg-steps2 li::before{
  content:counter(idgstep2); position:absolute; left:10px; top:8px; width:26px; height:26px;
  border-radius:50%; background:var(--idg-green); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:.82rem;
}

@media(max-width:640px){
  .idg-fiche .idg-hero-grid{ grid-template-columns:1fr; }
  .idg-fiche .idg-title{ font-size:1.35rem; }
}

/* =========================================================
   3) CATALOGUE ACCESSOIRES (page multi-produits)
   Racine : .idg-page.idg-catalog
   ========================================================= */
.idg-catalog .idg-hero{
  background:linear-gradient(120deg,var(--idg-green) 0%,var(--idg-green-light) 100%);
  border-radius:18px; padding:30px 34px; color:#fff; margin-bottom:30px;
}
.idg-catalog .idg-hero .idg-eyebrow{ color:#fff; opacity:.9; }
.idg-catalog .idg-hero h1{ margin:0 0 6px; font-size:1.85rem; font-weight:800; letter-spacing:-.01em; }
.idg-catalog .idg-hero p{ margin:0; font-size:1rem; opacity:.95; max-width:560px; }

.idg-catalog .idg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:40px; }
.idg-catalog .idg-card{
  background:#fff; border:1px solid var(--idg-line); border-radius:14px; overflow:hidden;
  box-shadow:0 2px 8px rgba(20,50,15,.05);
}
.idg-catalog .idg-card-photo{
  background:#fafaf7; padding:16px; display:flex; align-items:center; justify-content:center; min-height:120px;
}
.idg-catalog .idg-card-photo img{ max-height:110px; width:auto; margin:0 auto; }
.idg-catalog .idg-card-head{ background:var(--idg-ink); color:#fff; font-weight:800; font-size:.85rem; padding:10px 14px; }
.idg-catalog .idg-card-body{ padding:12px 14px 16px; }
.idg-catalog .idg-card-body p{ margin:0 0 10px; font-size:.85rem; color:#556; }
.idg-catalog .idg-card-body table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.idg-catalog .idg-card-body td{ padding:5px 0; border-bottom:1px solid #eee; }
.idg-catalog .idg-card-body td:first-child{ color:var(--idg-green); font-weight:700; width:50%; }

.idg-catalog .idg-zoom{
  display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:start; background:#fff;
  border:1px solid var(--idg-line); border-radius:16px; padding:26px;
  box-shadow:0 4px 18px rgba(20,50,15,.06); margin-top:6px;
}
.idg-catalog .idg-zoom-photo{ background:#fafaf7; border-radius:12px; padding:14px; }
.idg-catalog .idg-zoom h2{ margin:0 0 4px; font-size:1.3rem; font-weight:800; color:var(--idg-ink); }
.idg-catalog .idg-zoom .idg-sub{ margin:0 0 14px; color:#667; font-size:.92rem; }
.idg-catalog .idg-fonction{
  background:#eef6ea; border-left:4px solid var(--idg-green); border-radius:8px;
  padding:12px 14px; font-size:.9rem; margin-bottom:16px;
}
.idg-catalog .idg-fonction strong{
  color:var(--idg-green); display:block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:3px;
}
.idg-catalog .idg-spectable{ width:100%; border-collapse:collapse; font-size:.88rem; }
.idg-catalog .idg-spectable td{ padding:7px 0; border-bottom:1px solid var(--idg-line); }
.idg-catalog .idg-spectable td:first-child{ font-weight:700; color:var(--idg-green); width:52%; }
.idg-catalog .idg-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.idg-catalog .idg-tags span{
  background:var(--idg-green); color:#fff; font-size:.76rem; font-weight:700;
  padding:5px 12px; border-radius:20px;
}

@media(max-width:800px){
  .idg-catalog .idg-grid{ grid-template-columns:1fr 1fr; }
  .idg-catalog .idg-zoom{ grid-template-columns:1fr; }
}
@media(max-width:480px){
  .idg-catalog .idg-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   4) BLOCS COMMUNS SUPPLEMENTAIRES (pages entretien / engrais)
   Utilisables dans .idg-page.idg-pose
   ========================================================= */

/* Avertissement (ex: "pas de sol argileux") */
.idg-warning{
  background:#fdecec; border:1px solid #f3b8b8; border-left:4px solid #c0392b;
  border-radius:8px; padding:14px 18px; margin:0 0 22px; font-size:.95rem;
}
.idg-warning strong{ color:#c0392b; }

/* Paragraphe de texte standard sous un titre de section */
.idg-text{ font-size:.95rem; color:#4a5240; margin:0 0 6px; }
.idg-text + .idg-text{ margin-top:8px; }
.idg-text strong{ color:var(--idg-ink); }

/* Liste à puces simple (bullets ronds verts) */
.idg-bullets{ list-style:none; margin:0 0 6px; padding:0; }
.idg-bullets li{ position:relative; padding:5px 0 5px 22px; font-size:.94rem; color:#4a5240; }
.idg-bullets li::before{
  content:""; position:absolute; left:2px; top:13px; width:7px; height:7px; border-radius:50%;
  background:var(--idg-green);
}

/* Tableau calendrier / planning d'arrosage */
.idg-schedule{
  width:100%; border-collapse:collapse; margin:10px 0 22px; font-size:.9rem;
  background:#fff; border:1px solid var(--idg-line); border-radius:10px; overflow:hidden;
}
.idg-schedule th{
  background:var(--idg-ink); color:#fff; text-align:left; padding:9px 14px;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;
}
.idg-schedule td{ padding:9px 14px; border-bottom:1px solid var(--idg-line); vertical-align:top; }
.idg-schedule tr:last-child td{ border-bottom:none; }
.idg-schedule tr:nth-child(even) td{ background:#fafaf7; }
.idg-schedule td:first-child{ font-weight:700; color:var(--idg-green); width:32%; white-space:nowrap; }

/* Bandeau saisonnier (été / hiver) */
.idg-season{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 22px;
}
.idg-season > div{
  background:#fff; border:1px solid var(--idg-line); border-radius:12px; padding:16px 18px;
}
.idg-season h3{
  margin:0 0 8px; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--idg-green);
  display:flex; align-items:center; gap:8px;
}
.idg-season p{ margin:0; font-size:.92rem; color:#4a5240; }

/* Bloc produit (ex: engrais MacerBio) avec photo + fiche courte */
.idg-product-callout{
  display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:start;
  background:#fff; border:1px solid var(--idg-line); border-radius:16px; padding:24px;
  box-shadow:0 4px 18px rgba(20,50,15,.06); margin:34px 0 8px;
}
.idg-product-callout .idg-photo-frame{
  background:#fafaf7; border-radius:10px; padding:12px;
}
.idg-product-callout .idg-photo-frame img{ border-radius:6px; }
.idg-product-callout h3{ margin:0 0 4px; font-size:1.15rem; font-weight:800; color:var(--idg-ink); }
.idg-product-callout .idg-sub{ margin:0 0 12px; color:#667; font-size:.9rem; }
.idg-product-callout .idg-mini-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.idg-product-callout .idg-mini-table td{ padding:6px 0; border-bottom:1px solid var(--idg-line); }
.idg-product-callout .idg-mini-table td:first-child{ font-weight:700; color:var(--idg-green); width:38%; }
.idg-product-callout .idg-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.idg-product-callout .idg-tags span{
  background:var(--idg-green); color:#fff; font-size:.76rem; font-weight:700; padding:5px 12px; border-radius:20px;
}

@media(max-width:640px){
  .idg-season{ grid-template-columns:1fr; }
  .idg-product-callout{ grid-template-columns:1fr; }
}