/*
Theme Name: Divi Child
Template: Divi
Description: Divi Child Theme
Author: Astuces Divi
Author URI: https://astucesdivi.com
*/


/* =======================================================
   🎨 SITE WEB BTP – STYLE GLOBAL (THÈME ENFANT DIVI)
   Auteur : Pierre Dubois – https://sitewebbtp.fr/
   Objectif : base typographique + palette + utilitaires + modules.
   ======================================================= *

/*
Theme Name: Divi Child
Template: Divi
Description: Divi Child Theme (base minimaliste)
Author: Astuces Divi
Author URI: https://astucesdivi.com
*/

/* =======================================================
   SITE WEB BTP – BASE MINIMALE
   - Palette uniquement (variables)
   - 2 utilitaires optionnels : sw-card, sw-pad
   - Aucun style global, aucun hover, aucune grille
   ======================================================= */

/* 1) Palette colorimétrique (variables à 1 tiret) */
:root {
  -bleu-sitewebbtp: #009EDF;          /* primaire */
  -bleu-fonce-accessible: #007FAE;    /* alternative */
  -orange-accent: #EA711F;            /* orange logo (dominant) */
  -orange-secondaire: #E78029;
  -gris-fond-clair: #F5F7FA;
  -gris-texte: #2A2A2A;
  -gris-titres: #313A49;
  -noir-footer: #1E1E1E;
}


/* Bloc d'accroche secondaire */
.sw-intro {
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #313A49;
  background-color: #F5F7FA;
  padding: 12px 20px;
  border-radius: 6px;
  display: inline-block;
  margin: 24px auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.sw-intro strong {
  color: #EA711F;
}



/* Carte propre, légère */
.sw-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:22px;
}
.sw-card .et_pb_button{
  border-radius:8px;
}


/* Un peu plus d’air sur le H3 central */
#page-container h3{
  line-height:1.25;
  word-break:normal;
}


/* Pastille intro : on garde */
.sw-intro{
  display:inline-block;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:.06em;
  color:#313A49;
  background:#F5F7FA;
  padding:12px 20px;
  border-radius:6px;
  margin:24px 0 12px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

/* Variante si un jour tu veux la pastille sans fond */
.sw-intro.sw-no-bg{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 0 12px !important;
}

/* Titre H3 sans encart (appliqué au MODULE du H3) */
.sw-title,
.sw-title .et_pb_text_inner{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  padding:0 !important;
}

/* Style du H3 (gros, sans compression) */
.sw-title h3{
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 16px;
}

/* Coloration sélective (orange) via <span class="sw-accent"> */
.sw-title .sw-accent{ color: var(--orange-accent); }

/* Tailles responsives */
@media (max-width: 980px){
  .sw-title h3{ font-size:32px; }
}
@media (min-width: 981px){
  .sw-title h3{ font-size:40px; }
}



:root{
  -brand-blue:#0A84C6;
  -brand-orange:#EA711F;
  -brand-green:#1F8E66;
  -tint-blue:#E7F4FD;
  -tint-orange:#FFF3E8;
  -tint-green:#EDF9F4;
  -ink:#313A49;
  -text:#2A2A2A;
  -paper:#FFFFFF;
  -line:#E9EDF2;
}

/* -----------------------
   Cartes “piliers” (GO / SO / SRV)
   Applique la classe sur la COLONNE ou le MODULE carte :
   sw-card sw-card--go | sw-card--so | sw-card--srv
------------------------ */
.sw-card{
  background: var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  padding:24px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sw-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.09);
}

/* teinte légère au survol selon le pilier */
.sw-card--go:hover{ background: var(--tint-orange); }
.sw-card--so:hover{ background: var(--tint-blue); }
.sw-card--srv:hover{ background: var(--tint-green); }

/* Titre “sw-title” commun (H1–H3) – tu peux déjà l’avoir, on homogénéise */
.sw-title{
  color: var(--ink);
  letter-spacing:.2px;
  line-height:1.2;
  text-transform: uppercase; /* titres en capitales comme souhaité */
}
.sw-title .accent{ color: var(--brand-orange); font-weight:700; }

/* -----------------------
   Boutons (même look mobile/desktop)
   Classe: sw-btn  + modificateur (go/so/srv)
------------------------ */
.sw-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none !important;
  color:#fff !important;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.sw-btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }

/* variantes de couleur */
.sw-btn--go{ background: var(--brand-orange); }
.sw-btn--go:hover{ background: #cc6016; } /* ~ -10% */

.sw-btn--so{ background: var(--brand-blue); }
.sw-btn--so:hover{ background: #086fa5; }

.sw-btn--srv{ background: var(--brand-green); }
.sw-btn--srv:hover{ background: #177455; }

/* Liens contextuels dans les cartes (lire +, petits liens) */
.sw-card a{ color: var(--brand-blue); text-decoration: underline; }
.sw-card a:hover{ color:#065a86; }

/* Petits badges si tu veux des étiquettes */
.sw-badge{
  display:inline-block;
  background: var(--line);
  color: var(--ink);
  border-radius:999px;
  padding:6px 10px;
  font-size:.85rem;
}

/* Couleurs d’icônes si tu en mets dans les boutons/avant-texte */
.sw-ico--go{ color: var(--brand-orange); }
.sw-ico--so{ color: var(--brand-blue); }
.sw-ico--srv{ color: var(--brand-green); }



/* Ajustement de teintes harmonisées */
.sw-card--go .et_pb_button { background: #EA711F; }      /* orange chaud équilibré */
.sw-card--go:hover { background-color: #FFF3E8; }

.sw-card--so .et_pb_button { background: #0A84C6; }      /* bleu clair équilibré */
.sw-card--so:hover { background-color: #E7F4FD; }

.sw-card--srv .et_pb_button { background: #1F8E66; }     /* vert adouci */
.sw-card--srv:hover { background-color: #EDF9F4; }

/* Hover boutons (fonce légèrement) */
.sw-card--go .et_pb_button:hover { background: #C95F16; }
.sw-card--so .et_pb_button:hover { background: #086FA5; }
.sw-card--srv .et_pb_button:hover { background: #16704E; }

/* Supprime les bordures trop marquées et uniformise les ombres */
.sw-card {
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  border-radius: 16px;
  transition: all 0.3s ease;
}



@media (max-width: 768px){
  .sw-card .et_pb_button {
    font-size: 14px;
    line-height: 1.3;
    padding: 12px 18px;
    white-space: normal; /* permet le retour à la ligne automatique */
  }
}


/* ===========================
   SITE-WEB-BTP — Cartes Accueil
   =========================== */

/* ========= Palette (éditable) ========= */
:root{
  -sw-text:#222;
  -sw-muted:#666;
  -sw-card-bg:#ffffff;
  -sw-border:#e9ecef;
  -sw-shadow:0 10px 24px rgba(0,0,0,.06);
  -sw-radius:14px;

  /* Accent générique (mots en couleur dans les titres) */
  -sw-accent:#E78029;

  /* Couleurs piliers */
  -sw-go:#7A4E2B;      /* Gros œuvre (brun) */
  -sw-go-hover:#5E3F28;

  -sw-so:#155FA8;      /* Second œuvre (bleu) */
  -sw-so-hover:#0F4A85;

  -sw-sb:#5A3EA6;      /* Services bâtiment (violet) */
  -sw-sb-hover:#463283;
}

/* ========= Carte (colonne) ========= */
.sw-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  background:var(--sw-card-bg);
  border:1px solid var(--sw-border);
  border-radius:var(--sw-radius);
  box-shadow:var(--sw-shadow);
  padding:24px 22px 28px;
}

/* Images à l’intérieur de la carte */
.sw-card img{
  border-radius:12px;
}

/* Forcer l’alignement du bouton en bas quelle que soit la longueur du texte */
.sw-card .et_pb_button_module_wrapper,
.sw-card .et_pb_module.et_pb_button{
  margin-top:auto;
}

/* ========= Titres & textes ========= */
/* Module titre (H3) */
.sw-title h3,
.sw-card h3{
  font-size:21px;       /* Desktop */
  line-height:1.25;
  font-weight:800;
  margin:0 0 10px 0;
}

/* Mots accentués dans le titre (tu peux mettre <strong>…</strong>) */
.sw-title h3 strong,
.sw-card h3 strong{
  color:var(--sw-accent);
  font-weight:800;
}

/* H4 (sous-titre sous la grande ligne) */
.sw-card h4{
  font-size:15px;
  line-height:1.35;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:2px 0 10px 0;
}

/* Paragraphes */
.sw-card p{
  font-size:14px;
  line-height:1.55;
  color:var(--sw-text);
  margin:10px 0;
}

/* Texte sous bouton (liens/FAQ) plus discret */
.sw-card .sw-meta,
.sw-card .et_pb_text a{
  color:var(--sw-muted);
  font-size:13.5px;
}

/* ========= Pastille d’intro au-dessus du titre (optionnel) ========= */
.sw-intro{
  display:inline-block;
  background:transparent;      /* retire le fond gris */
  color:var(--sw-muted);
  border:1px solid var(--sw-border);
  padding:6px 10px;
  border-radius:10px;
  font-size:12.5px;
  letter-spacing:.02em;
}

/* ========= Boutons (hérite du bouton Divi si présent) ========= */
.sw-card .et_pb_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
  border:none;
  color:#fff;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

/* Gros œuvre */
.sw-card--go .et_pb_button{ background:var(--sw-go); }
.sw-card--go .et_pb_button:hover{
  background:var(--sw-go-hover);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(122,78,43,.25);
}

/* Second œuvre */
.sw-card--so .et_pb_button{ background:var(--sw-so); }
.sw-card--so .et_pb_button:hover{
  background:var(--sw-so-hover);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(21,95,168,.25);
}

/* Services du bâtiment */
.sw-card--sb .et_pb_button{ background:var(--sw-sb); }
.sw-card--sb .et_pb_button:hover{
  background:var(--sw-sb-hover);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(90,62,166,.25);
}

/* Retire les styles Divi par défaut qui pourraient interférer (sous-lignage/chevrons) */
.sw-card .et_pb_button:after{ display:none; }

/* ========= Micro-alignements visuels ========= */
/* Limite la largeur de lecture des longs paragraphes */
.sw-card .et_pb_text{ max-width: 92%; }

/* Équilibre vertical entre l’image et le bloc texte */
.sw-card .et_pb_image{ margin-bottom:14px; }

/* ========= Responsive ========= */
@media (max-width: 980px){
  .sw-title h3, .sw-card h3{ font-size:18px; }
  .sw-card h4{ font-size:13px; }
  .sw-card{ padding:20px 18px 22px; }
  .sw-card .et_pb_button{ width:100%; }
}


/* ===========================
   SITE-WEB-BTP — Boutons Outline (Hover)
   =========================== */

/* GROUPE GROS ŒUVRE */
.sw-card--go .et_pb_button:hover {
  background:#fff !important;
  color:var(--sw-go) !important;
  border:2px solid var(--sw-go);
  box-shadow:0 6px 14px rgba(122,78,43,.2);
  transform:translateY(-1px);
}

/* GROUPE SECOND ŒUVRE */
.sw-card--so .et_pb_button:hover {
  background:#fff !important;
  color:var(--sw-so) !important;
  border:2px solid var(--sw-so);
  box-shadow:0 6px 14px rgba(21,95,168,.2);
  transform:translateY(-1px);
}

/* GROUPE SERVICES DU BÂTIMENT */
.sw-card--sb .et_pb_button:hover {
  background:#fff !important;
  color:var(--sw-sb) !important;
  border:2px solid var(--sw-sb);
  box-shadow:0 6px 14px rgba(90,62,166,.2);
  transform:translateY(-1px);
}

/* ================================
   Toggle / Bascule – SiteWebBTP
   Classes à poser sur le module :  sw-toggle  (+ thème couleur optionnel)
   Thèmes dispo :  sw-theme--orange | sw-theme--blue | sw-theme--violet
   ================================ */

:root{
  -sw-bg:#ffffff;
  -sw-ink:#1f2a37;         /* texte principal (anthracite) */
  -sw-ink-soft:#374151;    /* sous-texte */
  -sw-border:#e5e7eb;      /* gris clair */
  -sw-shadow:0 8px 24px rgba(16,24,40,.06);

  /* Accents (déjà utilisés sur le site) */
  -sw-orange:#E78029;
  -sw-blue:#0F5DAA;        /* bleu bouton maçon */
  -sw-violet:#5B3FA8;      /* violet bouton charpentier */
}

/* Conteneur */
.sw-toggle.et_pb_toggle{
  background:var(--sw-bg);
  border:1px solid var(--sw-border);
  border-radius:16px;
  box-shadow:var(--sw-shadow);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}

/* En-tête */
.sw-toggle .et_pb_toggle_title{
  font-size:1.125rem;              /* ~18 px desktop */
  line-height:1.3;
  font-weight:800;
  color:var(--sw-ink);
  padding:18px 56px 18px 20px;     /* place pour l’icône à droite */
  text-transform:none;             /* laisse le contrôle à ton contenu */
}

/* Corps */
.sw-toggle .et_pb_toggle_content{
  color:var(--sw-ink-soft);
  padding:0 20px 18px 20px;
  font-size:1rem;
}

/* Icône (plus/moins) – on garde celle de Divi, on la met dans un badge rond */
.sw-toggle .et_pb_toggle_title:before{
  right:14px; left:auto;           /* à droite */
  width:28px; height:28px;
  line-height:28px; text-align:center;
  border-radius:999px;
  background:rgba(0,0,0,.05);
  color:var(--sw-ink);
  transition:transform .25s ease, background-color .25s ease, color .25s ease;
}

/* États open/close */
.sw-toggle.et_pb_toggle_open{
  border-color:currentColor;
  box-shadow:0 10px 28px rgba(16,24,40,.10);
}
.sw-toggle.et_pb_toggle_open .et_pb_toggle_title:before{
  transform:rotate(180deg);
}

/* Thèmes de couleur (bordure + accents) */
.sw-theme--orange{ color:var(--sw-orange); }
.sw-theme--blue  { color:var(--sw-blue); }
.sw-theme--violet{ color:var(--sw-violet); }

/* Lien(s) dans le contenu du toggle */
.sw-toggle .et_pb_toggle_content a{
  color:inherit; text-decoration:underline;
}
.sw-toggle .et_pb_toggle_content a:hover{
  text-decoration:none;
}

/* Focus clavier (a11y) */
.sw-toggle .et_pb_toggle_title:focus{
  outline:2px solid currentColor; outline-offset:2px;
  border-radius:8px;
}

/* Mobile – compacter un peu */
@media (max-width: 767px){
  .sw-toggle .et_pb_toggle_title{ font-size:1.0625rem; padding:14px 52px 14px 16px; }
  .sw-toggle .et_pb_toggle_content{ font-size:.95rem; padding:0 16px 14px 16px; }
  .sw-toggle .et_pb_toggle_title:before{ right:12px; width:26px; height:26px; line-height:26px; }
}

/* Moins d’animations si l’utilisateur les réduit */
@media (prefers-reduced-motion: reduce){
  .sw-toggle, .sw-toggle *{ transition:none !important; }
}

/* ===== HERO (mise en page 2 colonnes) ===== */
.hero .et_pb_row{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;   /* texte / visuel */
  align-items:start;
  gap: clamp(14px, 2vw, 28px);
}

/* Colonne texte */
.hero-copy{
  max-width: 720px;
  padding-bottom: clamp(16px, 2.2vw, 32px);
}

/* Visuel à droite, dimension fluide */
.hero-visual{
  justify-self:end;
}
.hero-visual img{
  width: clamp(420px, 36vw, 620px);
  height:auto;
  display:block;
}

/* Petit CTA sous le texte */
.hero-cta{ margin-top: clamp(10px, 1.6vw, 20px); }
.hero-cta a{
  font-style: italic;
  text-decoration: underline;
  color:#0A84C6;
  transition: color .25s ease;
}
.hero-cta a:hover{ color:#E78029; }

/* Mobile : on empile proprement */
@media (max-width: 980px){
  .hero .et_pb_row{ display:block; }
  .hero-visual{ margin-top: 18px; }
}
.faq-mini-bloc a {
  color: #fff !important;
  text-decoration: none;
}
.faq-mini-bloc a:hover {
  text-decoration: underline;
}
.faq-mini-bloc a:active {
  transform: scale(0.96);
  color: #ffd74a;
  transition: all 0.1s ease-out;
}

.cta-bloc {
  text-align: center;
  padding: 2.5em 1em;
  background: #fafafa;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.cta-bloc h3 {
  font-size: 1.6em;
  margin-bottom: 1em;
  color: #1b1b1b;
  font-weight: 700;
}

.cta-bloc p {
  margin: 0.4em auto;
  max-width: 680px;
  color: #333;
  line-height: 1.5em;
}

.cta-buttons {
  margin-top: 1.5em;
}

.cta-buttons a {
  display: inline-block;
  margin: 0.4em;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  color: #fff;
}

.cta-gros-oeuvre { background-color: #8c5b1f; }
.cta-second-oeuvre { background-color: #004a91; }
.cta-services-batiment { background-color: #603291; }

.cta-buttons a:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}
<h3>Besoin d’un site qui vous amène des appels ?</h3>
<p>Je conçois un site vitrine clair, pensé pour vos chantiers et votre zone. 
Audit gratuit, sans engagement.</p>

<ul>
  <li>Plan d’action en 5 minutes</li>
  <li>Mise en ligne rapide</li>
  <li>Suivi des résultats, sans blabla</li>
</ul>

<p>
  <a href="/contact/" class="swbtn swbtn-primary">Demander mon audit gratuit</a>
</p>
<p>
  <a href="tel:0761037223" class="swbtn swbtn-call">Appeler Pierre : 07 61 03 72 23</a>
</p>

<div class="swbtn-grid">
  <a href="/gros-oeuvre/" class="swbtn swbtn-ghost">Je suis Gros Œuvre</a>
  <a href="/second-oeuvre/" class="swbtn swbtn-ghost">Je suis Second Œuvre</a>
  <a href="/services-du-batiment/" class="swbtn swbtn-ghost">Je fais des Services</a>
</div>
/* Bloc mobile - point chaud */
.swbtn { 
  display:block; text-align:center; text-decoration:none; 
  padding:12px 16px; border-radius:12px; font-weight:700; 
  margin:8px 0; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.swbtn-primary { background:#0a84ff; color:#fff; }
.swbtn-call    { background:#15a34a; color:#fff; }
.swbtn-ghost   { background:#fff; color:#0f172a; border:2px solid #e5e7eb; }

.swbtn-grid { display:grid; gap:8px; }


/* ====== Toggle mobile – style scoped ====== */
.sw-toggle {
  /* variables (thèmes) */
  -bg: rgba(0,158,223,.08);   /* fond onglet fermé */
  -text: #00324d;             /* titre */
  -accent: #E78029;           /* liseré à gauche / thème orange */
  -ring: rgba(0,0,0,.12);     /* ombres douces */
  -radius: 12px;
}

/* container du toggle Divi */
.sw-toggle .et_pb_toggle {
  border: 0;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 1px 2px var(--ring);
  overflow: hidden;
  margin: 10px 0;
}

/* titre (barre clickable) */
.sw-toggle .et_pb_toggle_title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-weight: 700;
  color: var(--text);
}

/* chevron custom (remplace l’icône par défaut de Divi) */
.sw-toggle .et_pb_toggle_title:after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s ease;
}

/* contenu */
.sw-toggle .et_pb_toggle_content {
  background: #fff;
  color: #222;
  padding: 16px;
  line-height: 1.6;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.05);
}

/* état ouvert : fond blanc + ombre + chevron inversé */
.sw-toggle .et_pb_toggle.et_pb_toggle_open {
  background: #fff;
  box-shadow: 0 10px 24px -12px var(--ring);
}
.sw-toggle .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:after {
  transform: rotate(-135deg);
}

/* animation douce d’apparition du contenu */
.sw-toggle .et_pb_toggle.et_pb_toggle_open .et_pb_toggle_content {
  animation: swFadeIn .4s ease-in-out;
}
@keyframes swFadeIn { from {opacity:0} to {opacity:1} }

/* — Option : n’afficher ce block que sur mobile (si tu veux) — */
/* @media (min-width:981px){ .sw-toggle{display:none;} } */

/* ====== Thèmes (si tu veux décliner) ====== */
.sw-toggle.sw-theme--orange { --accent:#E78029; --text:#2a2a2a; }
.sw-toggle.sw-theme--blue   { --accent:#009EDF; --text:#00324d; }