/* =========================================================
   SecondFlor US - Pages INSPIRATIONS (pages CMS)
   A coller UNE SEULE FOIS dans le thème :
   themes/zensation/css/custom.css (ou le module "CSS personnalisé")
   Polices : celles du site (Marcellus pour les titres, Open Sans pour le texte).
   Couleurs : celles des pages Inspiration de secondflor.com.
   Toutes les classes commencent par "insp-" : rien d'autre n'est modifié.
   ========================================================= */

.insp { color:#3c3c3b; font-family:"Open Sans", sans-serif; font-size:14px; line-height:1.6; }
.insp img { max-width:100%; height:auto; display:block; }
.insp .CMStext { margin:0 0 10px; }
.insp .boxes_container_section { margin-bottom:45px; }

/* En-tête, comme les pages Inspiration de secondflor.com */
.insp .insp-head { text-align:center; margin:30px 0 25px; }
.insp .insp-kicker { font-family:Marcellus, serif; font-size:20px; letter-spacing:.25em; text-transform:uppercase; color:#3c3c3b; margin:0 0 18px; }
.insp h1.insp-h1 { font-family:Marcellus, serif !important; font-size:48px !important; line-height:1.15 !important; font-weight:400 !important;
                   text-transform:uppercase !important; color:#3c3c3b !important; background:none !important; padding:0 !important;
                   border-radius:0 !important; margin:0 0 14px !important; text-align:center; }
.insp .insp-sub { font-family:Marcellus, serif; font-size:32px; line-height:1.25; color:#5b7f5a; margin:0; }

/* Bloc d'accroche sous la grande image */
.insp .insp-hook { background:#fcece1; border-radius:18px; text-align:center; padding:32px 30px 28px; }
.insp-questions { font-family:Marcellus, serif; font-size:24px; line-height:1.4; color:#df8143; margin:0 0 16px; }
.insp-lead { font-size:16px; max-width:780px; margin:0 auto 6px; }
.insp-trust { font-size:13px; color:#7e8c8d; margin:14px 0 0; }

/* Boutons : on réutilise .button_homepage du thème */
.insp-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:18px 0 0; }
.insp-btns-left { justify-content:flex-start; }
.insp a.button_homepage { display:inline-block; text-decoration:none; }
.insp a.insp-btn-full { background:#5b7f5a; border-color:#5b7f5a; color:#fcece1; }
.insp a.insp-btn-full:hover { background:#3e5b4e; color:#fff; }
.insp a.insp-btn-light { border-color:#fcece1; color:#fcece1; background:transparent; }
.insp a.insp-btn-light:hover { background:rgba(255,255,255,.15); color:#fff; }

/* Bandeau titre de section (vert + Marcellus, comme les pages FR) */
.insp h2.insp-band, .insp .insp-band { background:#5b7f5a; color:#fcece1 !important; font-family:Marcellus, serif !important;
             font-size:30px !important; line-height:1.3 !important; text-transform:none !important; letter-spacing:0 !important;
             text-align:center; padding:14px 15px !important; margin:0 0 25px !important; font-weight:400; }

/* Grande image */
.insp-hero img { width:100%; border-radius:18px; }

/* Image qui prend toute la hauteur du texte voisin */
.insp .insp-cover { display:flex; }
.insp .insp-cover > a, .insp .insp-cover > img { display:block; width:100%; height:100%; }
.insp .insp-cover img { width:100%; height:100%; min-height:340px; object-fit:cover; }

/* Encart tableaux végétaux : grille 2 x 2 */
.insp .insp-frame-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:center; }
.insp .insp-frame-grid img { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }

/* Grilles */
.insp-row { display:flex; flex-wrap:wrap; gap:12px; }
.insp-col-2 { flex:1 1 calc(50% - 12px); min-width:280px; }
.insp-col-3 { flex:1 1 calc(33.333% - 12px); min-width:0; }
.insp-col-4 { flex:1 1 calc(25% - 12px); min-width:0; }
.insp-middle { align-items:center; }

/* Cartes dégradé de verts */
.insp-card { padding:25px 20px 20px; text-align:center; }
.insp-card h3 { font-family:Marcellus, serif; font-size:20px; font-weight:700; margin:0 0 10px; color:inherit; }
.insp-card p { margin:0; }
.insp-g1 { background:#d0e6d5; }
.insp-g2 { background:#a3c6a2; }
.insp-g3 { background:#5b7f5a; color:#d0e6d5; }
.insp-g4 { background:#3e5b4e; color:#d0e6d5; }

/* Sous-titres orange Marcellus */
.insp-subtitle { font-family:Marcellus, serif; font-size:25px; line-height:1.25; color:#df8143; font-weight:700; margin:0 0 10px; }
.insp-subtitle-green { color:#5b7f5a; font-weight:400; }
.insp-center { text-align:center; }

/* Encadrés "Le conseil du pro" */
.insp-box { border-radius:8px; padding:20px; }
.insp-box-orange { background:#df8143; color:#fcece1; }
.insp-box-orange strong { color:#fff; }
.insp-box-peach { background:#fcece1; }
.insp-box h3 { font-family:Marcellus, serif; font-size:20px; font-weight:700; text-align:center; margin:0 0 10px; }
.insp-box-orange h3 { color:#fcece1; }
.insp-box-peach h3 { color:#df8143; }

/* Coches */
.insp-checks { list-style:none; padding:0; margin:8px 0 0; }
.insp-checks li { padding-left:26px; position:relative; margin:0 0 6px; }
.insp-checks li:before { content:"\2714"; position:absolute; left:0; color:#5b7f5a; }
.insp-box-orange .insp-checks li:before { color:#fcece1; }

/* Tableaux */
.insp-table { width:100%; border-collapse:collapse; margin:0 0 10px; background:#fff; }
.insp-table th, .insp-table td { padding:10px 14px; border-bottom:1px solid #e3ded3; text-align:left; }
.insp-table th { background:#3e5b4e; color:#fcece1; font-family:Marcellus, serif; font-size:16px; font-weight:400; }
.insp-table td + td { font-weight:600; color:#1a1a1a; }
.insp-box-orange .insp-table { background:transparent; }
.insp-box-orange .insp-table td { border-bottom-color:rgba(252,236,225,.35); color:#fcece1; }
.insp-table tr.insp-total td { font-family:Marcellus, serif; font-size:18px; color:#fff; border-bottom:0; }
.insp-note { font-size:13px; color:#7e8c8d; }

/* Etapes */
.insp-steps { list-style:none; counter-reset:insp; padding:0; margin:0; }
.insp-steps li { counter-increment:insp; position:relative; padding:0 0 12px 46px; }
.insp-steps li:before { content:counter(insp); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
                        background:#df8143; color:#fff; font-family:Marcellus, serif; font-size:17px; text-align:center; line-height:32px; }

/* Citation */
.insp-quote { font-family:Marcellus, serif; font-size:19px; line-height:1.45; text-align:center; color:#3e5b4e; max-width:820px; margin:25px auto 0; }
.insp-quote span { display:block; font-family:"Open Sans", sans-serif; font-size:13px; color:#7e8c8d; margin-top:8px; }

/* Vidéo */
.insp-video video { width:100%; border-radius:18px; background:#000; }

/* Shop the look : points produits sur l'image (100 % CSS, sans module) */
.insp-look { position:relative; border-radius:8px; overflow:visible; }
.insp-look > img { width:100%; border-radius:8px; }
.insp-look a.insp-dot { position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
                        background:rgba(255,255,255,.9); box-shadow:0 0 0 6px rgba(255,255,255,.35); text-decoration:none; z-index:2; }
.insp-look a.insp-dot:after { content:""; position:absolute; left:10px; top:10px; width:10px; height:10px; border-radius:50%; background:#df8143; }
.insp-look a.insp-dot span { display:none; position:absolute; left:-90px; top:38px; width:210px; background:#fff; border-radius:8px;
                             box-shadow:0 6px 20px rgba(0,0,0,.18); padding:10px; color:#3c3c3b; font-size:13px; font-weight:600; text-align:center; }
.insp-look a.insp-dot span img { width:100%; border-radius:6px; margin-bottom:6px; }
.insp-look a.insp-dot:hover, .insp-look a.insp-dot:focus { z-index:20; }
.insp-look a.insp-dot:hover span, .insp-look a.insp-dot:focus span { display:block; }
.insp-look-list { display:none; }
.insp-look-hint { text-align:center; font-size:13px; color:#7e8c8d; margin:8px 0 0; }

/* Zone sable (sélection produits) */
.insp-sand { background:#e6d6a8; padding:20px; }
.insp-sand .insp-subtitle { color:#3c3c3b; font-weight:400; font-size:30px; }

/* Cartes produits (style proche des cartes produits du thème) */
.insp-product { background:#fff; border-radius:8px; overflow:hidden; text-align:center; text-decoration:none; display:block; color:#3c3c3b; }
.insp-product img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.insp-product strong { display:block; padding:12px 10px 4px; font-size:14px; font-weight:600; color:#1a1a1a; }
.insp-product em { display:block; padding:0 10px 14px; font-style:normal; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#536d2e; }
.insp a.insp-product { transition:transform .2s ease, box-shadow .2s ease; }
.insp a.insp-product img { transition:transform .35s ease; }
.insp a.insp-product:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(62,91,78,.25); }
.insp a.insp-product:hover img { transform:scale(1.06); }
.insp a.insp-product:hover strong { color:#5b7f5a; }
.insp a.insp-product:hover em { color:#df8143; }

/* Galerie réalisations */
.insp-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.insp-gallery figure { margin:0; }
.insp-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }
.insp-gallery figcaption { font-size:11px; font-style:italic; color:#7e8c8d; margin-top:4px; }

/* FAQ */
.insp-faq h3 { font-family:Marcellus, serif; font-size:19px; font-weight:400; color:#3e5b4e; margin:20px 0 6px; padding-top:16px; border-top:1px solid #e3ded3; }
.insp-faq h2 + h3 { border-top:0; padding-top:0; margin-top:0; }

/* Appel à l'action final */
.insp .insp-final { background:#3e5b4e; color:#d0e6d5; text-align:center; padding:35px 25px; border-radius:18px; }
.insp .insp-final h2 { font-family:Marcellus, serif; font-size:30px; font-weight:400; color:#fcece1; margin:0 0 10px; }
.insp .insp-final p { color:#d0e6d5; font-size:15px; }

/* Le thème aligne à gauche les blocs .boxes-container > div : on rétablit le centrage voulu */
.insp .insp-final, .insp .insp-final .CMStext { text-align:center; }

/* Mobile */
@media (max-width:767px) {
  .insp h2.insp-band, .insp .insp-band { font-size:23px !important; }
  .insp h1.insp-h1 { font-size:32px !important; }
  .insp .insp-sub { font-size:23px; }
  .insp-questions { font-size:19px; }
  .insp .insp-cover img { min-height:220px; }
  .insp-subtitle, .insp-sand .insp-subtitle, .insp .insp-final h2 { font-size:22px; }
  .insp-gallery { grid-template-columns:1fr 1fr; }
  .insp-look a.insp-dot span { left:-60px; width:160px; }
}

/* Positions des points du Shop the look (page Moss Wall Art) + marges utilitaires */
.insp-look a.insp-dot-1 { left:calc(53.15% + 15px); top:calc(15.99% + 15px); }
.insp-look a.insp-dot-2 { left:calc(42.94% + 15px); top:calc(33.99% + 15px); }
.insp-look a.insp-dot-3 { left:calc(51.38% + 15px); top:calc(61.51% + 15px); }
.insp-look a.insp-dot-4 { left:calc(43.65% + 15px); top:calc(65.67% + 15px); }
.insp-look a.insp-dot-5 { left:calc(40.9% + 15px); top:calc(50.13% + 15px); }
.insp-look a.insp-dot-6 { left:calc(59.46% + 15px); top:calc(48.44% + 15px); }
.insp .insp-mt12 { margin-top:12px; }
.insp .insp-mt20 { margin-top:20px; }

/* ---------- Tablette (iPad portrait et paysage) ---------- */
@media (max-width:991px) {
  .insp-col-4 { flex-basis:calc(50% - 12px); }
  .insp a.insp-product.insp-col-4 { flex-basis:calc(25% - 12px); }
  .insp h1.insp-h1 { font-size:42px !important; }
}

/* ---------- Mobile ---------- */
@media (max-width:767px) {
  .insp-col-3, .insp-col-4 { flex-basis:100%; }
  .insp a.insp-product.insp-col-4 { flex-basis:calc(50% - 6px); }
  .insp-row { gap:10px; }
  .insp .insp-hook { padding:24px 18px; }
  .insp .insp-head { margin:15px 0 20px; }
  .insp .insp-kicker { font-size:16px; margin-bottom:10px; }
  .insp .insp-cover img { min-height:220px; }
  .insp-table th, .insp-table td { padding:8px 10px; }
  .insp .insp-final { padding:28px 16px; }
  .insp-quote { font-size:17px; }
  .insp-look a.insp-dot { width:22px; height:22px; margin:-11px 0 0 -11px; box-shadow:0 0 0 4px rgba(255,255,255,.35); }
  .insp-look a.insp-dot:after { left:6px; top:6px; }
}

/* ---------- Ecrans tactiles : pas de survol ---------- */
/* Les points du Shop the look restent cliquables (ils ouvrent la fiche produit)
   et la liste des produits s'affiche sous l'image. */
@media (hover:none) {
  .insp-look a.insp-dot span { display:none !important; }
  .insp-look-hint { display:none; }
  .insp-look-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 0; }
  .insp-look-list a { display:flex; align-items:center; gap:8px; background:#fcece1; border-radius:8px; padding:6px;
                      text-decoration:none; color:#3c3c3b; font-size:12px; font-weight:600; line-height:1.3; }
  .insp-look-list img { width:48px; height:48px; flex:0 0 48px; object-fit:cover; border-radius:6px; }
}
@media (hover:none) and (max-width:767px) {
  .insp-look-list { grid-template-columns:1fr 1fr; }
}