/*
Theme Name: 4WEBWALL Kadence Child
Theme URI: https://4webwall.com/
Description: Thème enfant Kadence pour 4WEBWALL (automatisation, IA, outils numériques).
Author: 4WEBWALL
Author URI: https://4webwall.com/
Template: kadence
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: 4webwall-kadence-child
*/

/* ==========================================================
   4WEBWALL — Kadence, identité française
   Installation : Apparence > Personnaliser > CSS additionnel
   Version : 1.0 | 2026-11-01
   Conçu pour les classes .ww-home et .ww-article.
   Les couleurs de l'en-tête et du pied de page se règlent
   de préférence dans le constructeur Kadence.
   ========================================================== */
:root {
  --ww-navy: #142c46;
  --ww-blue: #176da4;
  --ww-amber: #f39c12;
  --ww-text: #273849;
  --ww-muted: #637689;
  --ww-bg: #f5f8fb;
  --ww-white: #ffffff;
  --ww-line: #dce6ee;
  --ww-radius: 14px;
  --ww-shadow: 0 12px 36px rgba(20,44,70,.07);
}
/* Styles propres au contenu 4WEBWALL, pas aux interfaces WooCommerce. */
.ww-home, .ww-article { color: var(--ww-text); line-height: 1.75; }
.ww-home *, .ww-article * { box-sizing: border-box; }
.ww-home a, .ww-article a { text-underline-offset: 3px; }
.ww-home img, .ww-article img { max-width: 100%; height: auto; }
.ww-home :is(h1,h2,h3), .ww-article :is(h2,h3) {
  color: var(--ww-navy); line-height: 1.3; overflow-wrap: break-word;
}
.ww-home :focus-visible, .ww-article :focus-visible {
  outline: 3px solid var(--ww-amber); outline-offset: 4px;
}

/* ACCUEIL — hero clair, sans fausse métrique ni produits démo */
.ww-home { max-width: 1160px; margin-inline: auto; padding: 8px 16px 60px; }
.ww-home .ww-hero {
  position: relative; overflow: hidden;
  border-radius: 24px;
  padding: clamp(28px,5vw,64px);
  background: linear-gradient(125deg, #102c4a, #1b5c89);
  color: #fff; box-shadow: 0 16px 34px rgba(16,44,74,.13);
}
.ww-home .ww-hero::after {
  content: ''; position:absolute; width:320px; height:320px; border-radius:50%;
  right:-110px; top:-150px; background:rgba(255,255,255,.05); pointer-events:none;
}
.ww-home .ww-eyebrow { font-weight:800; font-size:.78rem; letter-spacing:.11em;
  text-transform:uppercase; color:#ffd18c; margin:0 0 16px; }
.ww-home .ww-hero h1 {
  color:#fff; font-size:clamp(2rem,4.3vw,3.6rem);
  line-height:1.16; letter-spacing:-.03em; max-width:820px; margin:0 0 18px;
}
.ww-home .ww-hero p:not(.ww-eyebrow) {
  color:#eaf1f7; font-size:clamp(1rem,1.6vw,1.2rem);
  max-width:750px; margin:0 0 24px; line-height:1.68;
}
.ww-home .ww-hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.ww-home .ww-btn {
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:49px; padding:12px 22px; border-radius:9px;
  font-weight:800; font-size:.94rem; text-decoration:none !important;
  border:1.5px solid transparent; transition:background .18s ease, transform .18s ease;
}
.ww-home .ww-btn:hover { transform:translateY(-2px); }
.ww-home .ww-btn-primary { background:var(--ww-amber); color:#172c41 !important; }
.ww-home .ww-btn-primary:hover { background:#ffc261; }
.ww-home .ww-btn-outline { color:#fff !important; border-color:rgba(255,255,255,.65); background:transparent; }
.ww-home .ww-btn-outline:hover { background:rgba(255,255,255,.1); }

.ww-home .ww-section { padding-top:clamp(34px,5vw,62px); }
.ww-home .ww-section-head { max-width:800px; margin-bottom:22px; }
.ww-home .ww-kicker { font-size:.79rem; color:#986000; font-weight:800;
  text-transform:uppercase; letter-spacing:.09em; margin:0 0 8px; }
.ww-home .ww-section h2 { font-size:clamp(1.45rem,2.5vw,2.15rem);
  margin:0 0 10px; border:0; padding:0; background:none; }
.ww-home .ww-section-head p { color:var(--ww-muted); margin:0; }
.ww-home .ww-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ww-home .ww-card {
  display:flex; flex-direction:column; gap:9px; height:100%;
  padding:24px; border:1px solid var(--ww-line); border-radius:var(--ww-radius);
  text-decoration:none !important; color:var(--ww-text) !important;
  background:var(--ww-white); box-shadow:var(--ww-shadow);
  transition:transform .2s ease, border-color .2s ease;
}
.ww-home .ww-card:hover { transform:translateY(-3px); border-color:#a7cadf; }
.ww-home .ww-card .ww-card-icon { width:45px; height:45px; display:grid;
  place-items:center; background:#edf6fb; color:var(--ww-blue); border-radius:12px;
  font-size:1.25rem; font-weight:800; }
.ww-home .ww-card h3 { font-size:1.1rem; margin:0; }
.ww-home .ww-card p { color:var(--ww-muted); margin:0; font-size:.93rem; line-height:1.65; }
.ww-home .ww-card .ww-more { color:var(--ww-blue); font-size:.9rem; font-weight:800; margin-top:auto; }

.ww-home .ww-feature {
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center;
  padding:clamp(22px,4vw,38px); background:var(--ww-bg);
  border:1px solid var(--ww-line); border-radius:18px;
}
.ww-home .ww-feature h2 { margin-top:0; }
.ww-home .ww-feature p { margin:0 0 15px; }
.ww-home .ww-feature ul { margin:0; padding-left:20px; }
.ww-home .ww-feature li { margin-bottom:8px; }
.ww-home .ww-feature-side {
  background:#fff; border:1px solid var(--ww-line); border-radius:14px;
  padding:24px; box-shadow:var(--ww-shadow);
}
.ww-home .ww-feature-side strong { color:var(--ww-navy); display:block; font-size:1.12rem; margin-bottom:12px; }
.ww-home .ww-feature-side ol { padding-left:20px; margin:0; }
.ww-home .ww-feature-side li { margin-bottom:9px; }

.ww-home .ww-final-cta { text-align:center; margin-top:55px; padding:34px 22px;
  background:#fffaf1; border:1px solid #f4d5a1; border-radius:16px; }
.ww-home .ww-final-cta h2 { margin:0 0 8px; }
.ww-home .ww-final-cta p { max-width:680px; margin:0 auto 20px; }

/* ARTICLES — classe facultative sur le conteneur HTML de chaque guide. */
.ww-article { max-width:980px; margin:auto; padding:12px 16px 36px; }
.ww-article h2 { border-left:4px solid var(--ww-amber); padding-left:15px;
  margin:40px 0 18px; font-size:clamp(1.4rem,2.5vw,1.85rem); }
.ww-article h3 { margin:26px 0 12px; font-size:clamp(1.1rem,2vw,1.35rem); }
.ww-article p, .ww-article li { line-height:1.8; }
.ww-article .ww-note { background:#fffaf1; padding:17px 20px;
  border-left:4px solid var(--ww-amber); border-radius:8px; margin:22px 0; }
.ww-article .ww-table-wrap { overflow-x:auto; max-width:100%; margin:24px 0; }
.ww-article table { border-collapse:collapse; width:100%; min-width:580px; font-size:.93rem; }
.ww-article th, .ww-article td { border:1px solid var(--ww-line); padding:11px 13px; text-align:left; vertical-align:top; }
.ww-article th { background:var(--ww-navy); color:#fff; }
.ww-article tr:nth-child(even) td { background:#f7fafc; }
.ww-article figure { margin:28px auto; }
.ww-article figcaption { font-size:.86rem; text-align:center; color:var(--ww-muted); margin-top:8px; }
.ww-article .ww-offer { border:1px solid #f2d49a; border-radius:14px;
  background:#fffaf2; padding:28px 20px; margin:35px 0; text-align:center; }
.ww-article .ww-offer h3 { margin:0 0 11px; }
.ww-article .ww-offer a { display:inline-flex; min-height:48px; align-items:center;
  justify-content:center; padding:12px 22px; border-radius:8px;
  background:var(--ww-navy); color:#fff !important; text-decoration:none !important; font-weight:800; }

@media (max-width: 900px) {
  .ww-home .ww-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ww-home .ww-feature { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .ww-home { padding:4px 8px 40px; }
  .ww-home .ww-hero { border-radius:16px; padding:28px 22px; }
  .ww-home .ww-grid { grid-template-columns:1fr; gap:12px; }
  .ww-home .ww-card { padding:20px; }
  .ww-home .ww-hero-actions { flex-direction:column; }
  .ww-home .ww-hero-actions .ww-btn { width:100%; }
  .ww-article { padding:10px 8px 25px; }
  .ww-article h2 { padding-left:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .ww-home .ww-card,.ww-home .ww-btn { transition:none; }
  .ww-home .ww-card:hover,.ww-home .ww-btn:hover { transform:none; }
}