/* ============================================================
   WKH Ingénierie TCE — Feuille de styles CUSTOM (versionnée, git)
   Chargée par le mu-plugin tce-custom-css.php (toujours active).
   => Écris ton CSS ICI, pas dans le Customizer ni dans Oxygen.
   Design system de la famille WKH — palette « bleu acier » (identité WKH validée), accent ambre.
   ============================================================ */

/* ---- Variables de marque (Bleu acier WKH) ---- */
:root{
  --steel:#3C6E99; --steel-d:#2E567A; --steel-l:#6E97B8;
  --deep:#243B52;                 /* vert forêt : titres */
  --bronze:#7C5933;               /* accent bronze du logo TCE */
  --ink:#22303C; --soft:#5C6873; --grey:#57636E;
  --line:#E0E7ED; --bg:#EEF3F7; --white:#fff;
  /* Dégradé « étiquette DPE » A→G pour touches décoratives */
  --dpe:linear-gradient(90deg,#2E8B57,#7DBB3A,#C9D22B,#F2C10E,#F2A93B,#E8722B,#D93A2B);
}

/* ============================================================
   OVERRIDES du header natif Oxygen (Breakdance / Oxygen 6)
   ============================================================ */
/* Conteneur natif du header builder : contenu cadré et centré.
   (l'ancien max-width:100% hérité de WKH écrasait tout cadrage en !important) */
.bde-header-builder__container{max-width:1280px !important;width:100%;margin:0 auto;
  display:flex;align-items:center;gap:24px;padding:10px 32px}
@media(max-width:900px){ .bde-header-builder__container{padding:10px 20px} }

/* Bouton "Demander un devis" en vert énergie */
.btn-devis .button-atom{ background:var(--steel) !important; color:#fff !important; }
.btn-devis .button-atom:hover{ background:var(--steel-d) !important; }

/* Téléphone dans le header */
a.phone.breakdance-link{ color:var(--deep) !important; text-decoration:none; }
.phone{ font-family:'Archivo',sans-serif; font-weight:600; font-size:.95rem; white-space:nowrap; }

/* Logo : hauteur cohérente (classe tce-logo-img sur l'image) */
.tce-logo-img, .tce-logo-img img{ height:60px !important; width:auto !important; display:block; }

/* ============================================================
   Classes utilitaires réutilisables
   ============================================================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.btn-steel{display:inline-block;font-family:'Archivo',sans-serif;font-weight:600;font-size:.95rem;
  background:var(--steel);color:#fff;padding:13px 24px;border-radius:0;text-decoration:none;
  box-shadow:0 8px 18px rgba(60,110,153,.30);transition:.2s}
.btn-steel:hover{background:var(--steel-d);transform:translateY(-2px);color:#fff}
.btn-ghost{display:inline-block;font-family:'Archivo',sans-serif;font-weight:600;padding:13px 24px;
  border-radius:0;border:1.5px solid var(--line);color:var(--deep);text-decoration:none}
.btn-ghost:hover{border-color:var(--steel);color:var(--steel)}

/* ============================================================
   PAGE D'ACCUEIL (.tce-home)
   ============================================================ */
.tce-home{font-family:'Inter',system-ui,sans-serif;color:var(--ink);line-height:1.7}
.tce-home h2{font-family:'Archivo',sans-serif;color:var(--deep);font-size:2rem;line-height:1.2;
  margin:0 0 14px;font-weight:700;letter-spacing:-.01em}
.tce-home h2::after{content:"";display:block;width:56px;height:4px;border-radius:2px;
  margin:16px auto 0;background:var(--bronze)}
.tce-home h3{font-family:'Archivo',sans-serif;color:var(--deep);font-size:1.18rem;margin:0 0 8px}
.tce-home p{margin:0 0 14px}
.tce-home .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--steel);
  background:rgba(60,110,153,.10);padding:6px 14px;border-radius:3px;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.tce-home .eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--steel)}
.tce-home .lead{color:var(--soft);font-size:1.08rem;max-width:760px}
.tce-home section{padding:76px 0}
.tce-home .alt{background:var(--bg)}
.tce-home .center{text-align:center}
.tce-home .center .lead{margin-left:auto;margin-right:auto}

/* ---- HERO ---- */
.tce-hero{--nav:#243B52;color:#fff;overflow:hidden;font-family:'Inter',system-ui,sans-serif;
  --deco:url(/wp-content/themes/tce-child/assets/img/hero-deco-tce.svg);
  background:
    var(--deco) right -30px center/auto 100% no-repeat,
    radial-gradient(1200px 520px at 74% -12%,rgba(110,151,184,.18),transparent 60%),
    var(--nav)}
/* Mobile : le décor filaire passerait derrière le texte -> retiré */
@media(max-width:900px){
  .tce-hero{background:
    radial-gradient(1200px 520px at 74% -12%,rgba(110,151,184,.18),transparent 60%),
    var(--nav)}
}
.tce-hero *{box-sizing:border-box}
.tce-hero .in{max-width:1180px;margin:0 auto;padding:44px 24px 52px;display:grid;
  grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.tce-hero .eyebrow{display:inline-block;font-family:'Archivo',sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel-l);margin-bottom:16px}
.tce-hero h1{font-family:'Archivo',sans-serif;font-weight:800;font-size:2.7rem;line-height:1.22;
  margin:0 0 20px;color:#fff !important}
.tce-hero h1 .u{color:#fff;padding-bottom:6px;
  background:linear-gradient(90deg,var(--steel-l),var(--steel)) no-repeat 0 100%;background-size:100% 6px}
.tce-hero p.sub{font-size:1.08rem;color:#C9D8E6;max-width:520px;line-height:1.7;margin:0}
.tce-hero .cta{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.tce-hero .b1{font-family:'Archivo',sans-serif;font-weight:600;background:#fff;color:var(--nav);
  padding:14px 26px;border-radius:0;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.tce-hero .b1:hover{transform:translateY(-2px)}
.tce-hero .b2{font-family:'Archivo',sans-serif;font-weight:600;color:#fff;
  border:1.5px solid rgba(255,255,255,.4);padding:14px 24px;border-radius:0;text-decoration:none}
.tce-hero .b2:hover{border-color:#fff}
.tce-hero .trust{margin-top:26px;display:flex;gap:20px;flex-wrap:wrap;color:#93AEC6;font-size:.9rem}
.tce-hero .trust span{display:flex;align-items:center;gap:7px}
.tce-hero .trust b{color:var(--steel-l)}
/* Visuel hero : carte "étiquette énergie" décorative */
.tce-hero .visual{position:relative}
.dpe-badge{background:#fff;border-radius:0;padding:22px;box-shadow:0 24px 50px rgba(0,0,0,.28)}
.dpe-badge h4{font-family:'Archivo',sans-serif;color:var(--deep);font-size:.95rem;margin:0 0 14px;text-align:center}
.dpe-scale{display:flex;flex-direction:column;gap:6px}
.dpe-row{display:flex;align-items:center;color:#fff;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:.82rem;border-radius:0;padding:7px 12px}
.dpe-row .g{width:22px}
.dpe-a{background:#2E8B57;width:52%}.dpe-b{background:#7DBB3A;width:60%}.dpe-c{background:#C9D22B;width:68%}
.dpe-d{background:#F2C10E;width:76%}.dpe-e{background:#F2A93B;width:84%}
.dpe-f{background:#E8722B;width:92%}.dpe-g{background:#D93A2B;width:100%}
.dpe-arrow{margin-left:auto;font-size:.72rem;opacity:.9}
@media(max-width:900px){
  .tce-hero .in{grid-template-columns:1fr;padding:36px 24px 44px;gap:30px}
  .tce-hero h1{font-size:2.05rem}
}

/* ---- Bandeau chiffres ---- */
.hp-stats{background:var(--deep);color:#fff}
.hp-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.hp-stats b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:2rem}
.hp-stats span{color:#93AEC6;font-size:.92rem}

/* ---- Cartes services ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.card{background:#fff;border:1px solid var(--line);border-radius:0;padding:28px 24px;transition:.2s;text-align:left}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(36,59,82,.10)}
.card h3{font-size:1.12rem}
.card p{color:var(--soft);font-size:.94rem;margin-bottom:10px}
.card a{font-family:'Archivo',sans-serif;font-weight:600;color:var(--steel);text-decoration:none;font-size:.9rem}
.card a:hover{color:var(--steel-d)}
.card-ico{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;
  border-radius:0;background:rgba(60,110,153,.10);color:var(--steel);margin-bottom:16px}
.card-ico svg{width:27px;height:27px}

/* ---- Deux colonnes (texte + checklist) ---- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;text-align:left}
.split h2{text-align:left}
.split h2::after{margin-left:0;margin-right:auto}
.split-card{background:#fff;border:1px solid var(--line);border-radius:0;padding:26px 30px;
  box-shadow:0 14px 34px rgba(36,59,82,.06)}
.check{list-style:none;margin:0;padding:0}
.check li{position:relative;padding:12px 0 12px 30px;color:var(--ink);border-bottom:1px solid var(--line);line-height:1.5}
.check li:last-child{border-bottom:0}
.check li::before{content:"✓";position:absolute;left:0;top:12px;color:var(--steel);font-weight:800}
@media(max-width:860px){ .split{grid-template-columns:1fr;gap:26px} }

/* ---- Pourquoi nous ---- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.why-item{background:#fff;border:1px solid var(--line);border-radius:0;padding:32px 26px;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease}
.why-item:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(36,59,82,.10)}
.why-item h3{font-family:'Archivo',sans-serif;color:var(--deep);font-size:1.08rem;margin:0 0 8px}
.why-item p{color:var(--soft);font-size:.95rem;line-height:1.6;margin:0}
@media(max-width:900px){ .why-grid{grid-template-columns:1fr} }

/* ---- Étapes ---- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:40px}
.step{background:#fff;border:1px solid var(--line);border-radius:0;padding:26px 20px;text-align:left}
.step .n{width:40px;height:40px;border-radius:0;background:var(--steel);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:1.0rem}
.step p{color:var(--soft);font-size:.9rem}

/* ---- Zones d'intervention ---- */
.zones{background:var(--bg)}
.zones .wrap{max-width:900px;text-align:center}
.zones-deps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 22px}
.zones-deps span,.zones-deps a{font-family:'Archivo',sans-serif;font-weight:600;font-size:.9rem;color:var(--deep);
  background:#fff;border:1.5px solid var(--line);padding:9px 16px;border-radius:3px}
.zones-deps a{text-decoration:none;transition:.2s}
.zones-deps a:hover{border-color:var(--steel);color:var(--steel)}
.zones-towns{color:var(--soft);font-size:.95rem;margin:0}
.zones-towns b{color:var(--deep);font-weight:600}

/* ---- Avis ---- */
.avis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.avis{background:#fff;border:1px solid var(--line);border-radius:0;padding:24px;text-align:left}
.avis .stars{color:#F2B705;letter-spacing:2px;margin-bottom:10px}
.avis p{font-style:italic;color:var(--ink);margin-bottom:6px}
.avis .who{font-family:'Archivo',sans-serif;font-weight:600;color:var(--deep);font-size:.9rem}

/* ---- FAQ ---- */
.faq{max-width:820px;margin:40px auto 0}
.faq details{background:#fff;border:1px solid var(--line);border-radius:0;padding:0 20px;margin-bottom:12px}
.faq summary{position:relative;font-family:'Archivo',sans-serif;font-weight:600;color:var(--deep);cursor:pointer;
  padding:18px 34px 18px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:16px;width:24px;height:24px;display:flex;
  align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:600;font-size:1.4rem;
  line-height:1;color:var(--steel);transition:transform .2s}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:14px 0;color:var(--soft);font-size:.96rem}

/* ---- CTA final ---- */
.hp-cta{background:linear-gradient(150deg,var(--deep),var(--steel));color:#fff;text-align:center}
.hp-cta h2{color:#fff}
.hp-cta h2::after{background:rgba(255,255,255,.6)}
.hp-cta p{color:#C9D8E6;max-width:600px;margin:0 auto 22px}
.btn-white{display:inline-block;font-family:'Archivo',sans-serif;font-weight:600;background:#fff;
  color:var(--deep);padding:14px 28px;border-radius:0;text-decoration:none}

/* ---- Responsive ---- */
@media(max-width:900px){
  .cards,.feat,.avis-grid,.hp-stats .wrap{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .tce-hero h1{font-size:2.1rem}
}
@media(max-width:560px){.cards,.feat,.avis-grid,.hp-stats .wrap,.steps{grid-template-columns:1fr}}

/* ============================================================
   FORMULAIRE (Form Builder Oxygen/Breakdance) — pages Contact & Devis
   Le form est un frère des sections shortcode : on style le wrapper
   .bde-form-builder comme une section + carte centrée.
   ============================================================ */
.bde-form-builder{background:var(--bg);padding:64px 24px;font-family:'Inter',system-ui,sans-serif}
.bde-form-builder .breakdance-form{
  max-width:780px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:0;padding:38px 34px;box-shadow:0 14px 34px rgba(36,59,82,.08);
  display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}

/* Répartition : nom, projet et bouton en pleine largeur */
.bde-form-builder .breakdance-form-field--text,
.bde-form-builder .breakdance-form-field--textarea,
.bde-form-builder .breakdance-form-footer{grid-column:1 / -1}

/* Labels */
.bde-form-builder .breakdance-form-field__label{
  display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:.9rem;
  color:var(--deep);margin-bottom:7px}
.bde-form-builder .breakdance-form-field__required{color:var(--steel);margin-left:2px}

/* Champs */
.bde-form-builder .breakdance-form-field__input{
  width:100%;box-sizing:border-box;font-family:'Inter',system-ui,sans-serif;font-size:.97rem;
  color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:0;
  padding:12px 14px;line-height:1.5;transition:border-color .2s,box-shadow .2s;appearance:none}
.bde-form-builder .breakdance-form-field__input::placeholder{color:var(--soft);opacity:.7}
.bde-form-builder .breakdance-form-field__input:focus{
  outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(60,110,153,.15)}

/* Selects : chevron custom */
.bde-form-builder select.breakdance-form-field__input{
  cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%23243B52' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}

/* Textarea */
.bde-form-builder textarea.breakdance-form-field__input{min-height:150px;resize:vertical}

/* Bouton envoyer : même style que .btn-steel */
.bde-form-builder .breakdance-form-button__submit{
  display:inline-block;font-family:'Archivo',sans-serif;font-weight:600;font-size:.97rem;
  background:var(--steel);color:#fff;padding:14px 28px;border:none;border-radius:0;
  cursor:pointer;box-shadow:0 8px 18px rgba(60,110,153,.30);transition:.2s}
.bde-form-builder .breakdance-form-button__submit:hover{
  background:var(--steel-d);transform:translateY(-2px)}

/* Messages succès / erreur */
.bde-form-builder .breakdance-form-message,
.bde-form-builder .breakdance-form__message{
  grid-column:1 / -1;border-radius:0;padding:14px 18px;font-size:.95rem}
.bde-form-builder .breakdance-form-message--success,
.bde-form-builder .breakdance-form__message--success{
  background:rgba(60,110,153,.10);color:var(--steel-d);border:1px solid var(--steel-l)}
.bde-form-builder .breakdance-form-message--error,
.bde-form-builder .breakdance-form__message--error{
  background:rgba(217,58,43,.08);color:#B3271A;border:1px solid rgba(217,58,43,.35)}

@media(max-width:640px){
  .bde-form-builder{padding:44px 16px}
  .bde-form-builder .breakdance-form{grid-template-columns:1fr;padding:26px 20px;gap:16px}
}

/* ============================================================
   CARTE SOCIÉTÉ [tce_carte_societe] DANS UNE PAGE
   (le footer a son propre style dans le template Oxygen — non touché)
   ============================================================ */
.tce-home .tce-map-soc{max-width:1180px;margin:0 auto;padding:0 24px;text-align:center}
.tce-home .tce-map-soc__frame{
  height:var(--h,220px);min-height:360px;border-radius:0;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 14px 34px rgba(36,59,82,.08)}
.tce-home .tce-map-soc__frame iframe{width:100%;height:100%;border:0;display:block}
.tce-home .tce-map-soc__t{font-family:'Archivo',sans-serif;color:var(--deep);
  font-size:1.18rem;margin:0 0 14px}
.tce-home .tce-map-soc__dir{display:inline-block;margin-top:14px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.9rem;
  color:var(--steel);text-decoration:none}
.tce-home .tce-map-soc__dir:hover{color:var(--steel-d)}
@media(max-width:640px){
  .tce-home .tce-map-soc__frame{min-height:260px;border-radius:0}
}

/* ============================================================
   CONTENU DE PAGE INTERNE (.tce-article) — pour les autres pages
   ============================================================ */
.tce-article{max-width:880px;margin:0 auto;padding:0 24px;color:var(--ink);text-align:left}
.tce-article > h2{font-family:'Archivo',sans-serif;font-weight:800;color:var(--deep);
  font-size:1.9rem;line-height:1.25;text-align:center;margin:0 0 10px}
.tce-article h3{font-family:'Archivo',sans-serif;font-weight:700;color:var(--deep);
  font-size:1.22rem;line-height:1.3;margin:34px 0 10px}
.tce-article p{line-height:1.75;color:var(--soft);margin:0 0 16px;font-size:1.02rem}
.tce-article ul,.tce-article ol{line-height:1.7;color:var(--soft);margin:0 0 18px;padding-left:22px}
.tce-article li{margin:6px 0}
.tce-article a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}
.tce-article strong{color:var(--deep)}

/* --- Articles de blog (template Oxygen Singular > Articles) --- */
/* Bandeau : classe .article-hero sur le conteneur RACINE (pleine largeur) qui
   contient : .eyebrow (texte statique "Conseils"), h1 dynamique, .date
   (texte dynamique = date de publication). Même langage que .tce-hero. */
.article-hero{--nav:#243B52;color:#fff;overflow:hidden;
  background:
    url(/wp-content/themes/tce-child/assets/img/hero-deco-tce.svg) right -30px center/auto 100% no-repeat,
    radial-gradient(1200px 520px at 74% -12%,rgba(110,151,184,.18),transparent 60%),
    var(--nav);
  padding:52px 24px 44px;text-align:center}
/* Mobile : le décor filaire passerait derrière le texte -> retiré (comme .tce-hero) */
@media(max-width:900px){
  .article-hero{background:
    radial-gradient(1200px 520px at 74% -12%,rgba(110,151,184,.18),transparent 60%),
    var(--nav)}
}
/* Centrage par text-align (les éléments du builder restent pleine largeur) */
.article-hero .eyebrow,.article-hero h1,.article-hero .date{
  max-width:760px;margin-left:auto;margin-right:auto}
.article-hero .eyebrow{display:block;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-l);
  margin-bottom:14px}
.article-hero h1{font-family:'Archivo',sans-serif;font-weight:800;color:#fff !important;
  font-size:1.8rem;line-height:1.32;letter-spacing:-.01em;
  margin-top:0;margin-bottom:14px}
.article-hero .date{display:flex;align-items:center;justify-content:center;gap:10px;
  color:#93AEC6;font-size:.9rem}
.article-hero .date::before{content:"";width:34px;height:3px;background:var(--bronze);flex:0 0 auto}
/* Image mise en avant en tête de contenu */
.tce-article .wp-post-image{display:block;width:100%;height:auto;
  border-radius:0;margin:20px 0 6px}
/* h2 d'article : à gauche, trait à gauche (les h2 des sections FAQ/CTA restent centrés) */
.tce-article h2{text-align:left;font-size:1.6rem;margin:36px 0 12px}
.tce-article h2::after{margin-left:0;margin-right:auto}
.tce-article section h2{text-align:center;font-size:2rem}
.tce-article section h2::after{margin-left:auto;margin-right:auto}
/* Sections shortcodes (FAQ, CTA…) en pleine largeur, malgré le conteneur 880px */
.tce-article section{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
body{overflow-x:clip}
/* Le texte du CTA repasse en clair (sinon écrasé par .tce-article p) */
.tce-article .hp-cta p{color:#C9D8E6;max-width:600px;margin:0 auto 22px}
@media(max-width:700px){.article-hero h1{font-size:1.4rem}}

/* --- Confort de lecture des articles (scopé single-post : ne touche pas les pages) --- */
.single-post .tce-article{max-width:760px;padding:36px 24px 0}
.single-post .tce-article p{line-height:1.8}
.single-post .tce-article h2{font-size:1.5rem;margin:34px 0 12px}

/* Chapô (classe posée sur le 1er paragraphe dans deploy/content/blog/) */
.tce-article p.chapo{font-size:1.14rem;line-height:1.75;color:var(--ink);
  border-left:3px solid var(--bronze);padding-left:18px;margin:0 0 28px}

/* Encadré "à retenir / bon à savoir / le piège" */
.tce-article .art-note{background:var(--bg);border-left:3px solid var(--bronze);
  padding:18px 22px;margin:24px 0}
.tce-article .art-note .t{display:block;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);
  margin:0 0 8px}
.tce-article .art-note p{margin:0;color:var(--ink)}

/* Bloc CTA de fin d'article : bande PLEINE LARGEUR, collée au footer
   (dernier élément du contenu ; .single-post .tce-article a padding-bottom:0) */
.tce-article .art-cta{color:#fff;text-align:center;padding:52px 24px 56px;
  margin:44px calc(50% - 50vw) 0;
  background:linear-gradient(150deg,var(--deep),var(--steel))}
.tce-article .art-cta p{color:#C9D8E6;max-width:520px;margin:0 auto 6px}
.tce-article .art-cta p.t{font-family:'Archivo',sans-serif;font-weight:800;color:#fff;
  font-size:1.35rem;line-height:1.3;margin:0 auto 10px;max-width:640px}
.tce-article .art-cta p a{color:#fff}
.tce-article .art-cta a.btn{display:inline-block;margin-top:18px;font-family:'Archivo',sans-serif;
  font-weight:600;background:#fff;color:var(--deep);padding:13px 26px;text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.22);transition:transform .2s ease}
.tce-article .art-cta a.btn:hover{transform:translateY(-2px)}
@media(max-width:700px){.tce-article .art-cta{padding:40px 20px 44px}}

/* Garde-fou : tout <p> vide résiduel au niveau des sections est masqué */
.tce-home > p:empty,.tce-article > p:empty{display:none;margin:0}

/* ============================================================
   BANDEAU COOKIES (tce-cookies.php)
   Barre basse discrète : n'apparaît qu'au premier passage, ne recouvre pas
   le contenu (le body reçoit une réserve de hauteur tant qu'elle est là).
   Refuser et Accepter ont volontairement le MÊME poids visuel (exigence CNIL).
   ============================================================ */
.tce-cookies{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--deep);color:#C9D8E6;border-top:3px solid var(--bronze);
  box-shadow:0 -8px 28px rgba(0,0,0,.22);
  font-family:'Inter',system-ui,sans-serif;
  animation:tce-cookies-in .32s ease-out both}
.tce-cookies[hidden]{display:none}
@keyframes tce-cookies-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.tce-cookies{animation:none}}
.tce-cookies__in{max-width:1180px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.tce-cookies__txt{flex:1 1 380px;margin:0;font-size:.9rem;line-height:1.6}
.tce-cookies__txt a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.tce-cookies__btns{display:flex;gap:10px;flex:0 0 auto}
.tce-cookies__btn{font-family:'Archivo',sans-serif;font-weight:600;font-size:.9rem;
  padding:11px 22px;border-radius:0;cursor:pointer;
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);
  transition:border-color .2s ease,background .2s ease,transform .2s ease}
.tce-cookies__btn:hover{border-color:#fff;transform:translateY(-1px)}
.tce-cookies__btn--ok{background:#fff;color:var(--deep);border-color:#fff}
.tce-cookies__btn--ok:hover{background:#EEF3F7}
.tce-cookies__btn:focus-visible{outline:2px solid var(--steel-l);outline-offset:2px}
@media(max-width:640px){
  .tce-cookies__in{padding:14px 18px;gap:14px}
  .tce-cookies__txt{flex:1 1 100%;font-size:.85rem}
  .tce-cookies__btns{flex:1 1 100%}
  .tce-cookies__btn{flex:1 1 0;padding:12px 10px}
}

/* --- Pages légales (HTML pur, wrappées .tce-article.tce-legal par [tce_contenu]) --- */
.tce-legal{padding:46px 24px 44px}
.tce-legal h2{margin:32px 0 10px}
.tce-legal h2:first-child{margin-top:0}

/* --- Hero : image mise en avant de la page (choisie par le client dans WP) --- */
.hero-fimg{margin:0 0 0 auto;max-width:520px;border-radius:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 44px rgba(0,0,0,.25)}
.hero-fimg img{display:block;width:100%;height:auto;margin:0}
@media(max-width:900px){.hero-fimg{margin:26px auto 0}}

/* --- Hero blog : carte "dernier article" (visuel="dernier-article") --- */
.hero-bcard{display:block;max-width:460px;margin-left:auto;border-radius:0;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);text-decoration:none;
  transition:transform .25s ease,border-color .25s ease}
.hero-bcard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.4)}
.hero-bcard img{display:block;width:100%;height:230px;object-fit:cover;margin:0;border-radius:0}
.hero-bcard .hb-tag{display:inline-block;margin:16px 20px 0;color:var(--steel-l);font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.hero-bcard .hb-title{display:block;padding:6px 20px 18px;color:#fff;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:1.12rem;line-height:1.4}
@media(max-width:900px){.hero-bcard{margin:26px auto 0}}

/* --- Formulaire ([tce_formulaire]) --- */
.tce-form{max-width:780px;margin:0 auto;padding:44px 24px 10px}
.tce-form-repli p{background:#fff;border:1px solid rgba(36,59,82,.12);border-radius:0;
  padding:22px 26px;color:var(--soft);line-height:1.7}
.tce-form-repli a{color:var(--steel);font-weight:600}

/* ============================================================
   PAGE CONTACT (construite dans le builder — Form Builder natif)
   Classes et structure : voir CONTACT-oxygen.md
   ============================================================ */
/* Sous-titre optionnel du bandeau (le bandeau réutilise .article-hero) */
.article-hero .sub{display:block;max-width:760px;margin:0 auto;
  color:#C9D8E6;font-size:1.05rem;line-height:1.7}

/* Grille : formulaire à gauche, coordonnées à droite */
.tce-contact{max-width:1180px;margin:0 auto;padding:48px 24px 26px}
.tce-contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
/* Les Columns du builder sont des conteneurs flex : on neutralise le rétrécissement */
.tce-contact-grid > *{min-width:0;width:100%}
@media(max-width:900px){.tce-contact-grid{grid-template-columns:1fr;gap:26px}}

/* Cartes d'info (coordonnées, carte Maps) */
.tce-info-card{background:#fff;border:1px solid rgba(36,59,82,.12);border-radius:0;
  padding:26px 28px;box-shadow:0 6px 22px rgba(36,59,82,.06);width:100%}
.tce-info-card + .tce-info-card{margin-top:24px}
.tce-info-card h2,.tce-info-card h3{font-family:'Archivo',sans-serif;font-weight:700;
  color:var(--deep);font-size:1.08rem;text-align:left;margin:0 0 16px}
/* Les headings du builder ont margin:0 (.breakdance .bde-heading) : on repasse devant */
.breakdance .tce-info-card h2,.breakdance .tce-info-card h3{margin:0 0 18px}
.tce-info-card .tce-contact-line{margin:0 0 12px}
/* Carte société DANS la carte info (les styles d'origine sont scopés .tce-home) */
.tce-info-card .tce-map-soc{max-width:none;margin:0;padding:0;text-align:left}
.tce-info-card .tce-map-soc__frame{height:var(--h,240px);min-height:0;overflow:hidden;
  border:1px solid var(--line);border-radius:0}
.tce-info-card .tce-map-soc__frame iframe{width:100%;height:100%;border:0;display:block}
.tce-info-card .tce-map-soc__dir{display:inline-block;margin-top:12px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.9rem;
  color:var(--steel);text-decoration:none}
.tce-info-card .tce-map-soc__dir:hover{color:var(--steel-d)}

/* Dans la grille contact, le formulaire est déjà dans une colonne : on retire
   la mise en page "section autonome" du wrapper (fond gris + gros padding),
   la carte blanche intérieure .breakdance-form suffit */
.tce-contact-grid .bde-form-builder{background:transparent;padding:0}
.tce-contact-grid .bde-form-builder .breakdance-form{max-width:none}

/* Form Builder natif : poser la classe tce-form-bd sur l'élément Formulaire */
.tce-form-bd label{font-family:'Archivo',sans-serif;font-weight:600;color:var(--deep);
  font-size:.92rem}
.tce-form-bd input[type="text"],.tce-form-bd input[type="email"],
.tce-form-bd input[type="tel"],.tce-form-bd input[type="number"],
.tce-form-bd select,.tce-form-bd textarea{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:0;
  padding:12px 14px;font:inherit;color:var(--ink)}
.tce-form-bd input:focus,.tce-form-bd select:focus,.tce-form-bd textarea:focus{
  border-color:var(--steel);outline:2px solid rgba(60,110,153,.18);outline-offset:0}
.tce-form-bd textarea{min-height:150px;resize:vertical}
.tce-form-bd ::placeholder{color:#9AA7B2}
.tce-form-bd button[type="submit"],.tce-form-bd input[type="submit"]{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:1rem;
  background:var(--steel);color:#fff;border:0;border-radius:0;padding:14px 30px;
  cursor:pointer;box-shadow:0 10px 24px rgba(60,110,153,.25);
  transition:background .2s ease,transform .2s ease}
.tce-form-bd button[type="submit"]:hover,.tce-form-bd input[type="submit"]:hover{
  background:var(--steel-d);transform:translateY(-2px)}
/* Mention RGPD sous le bouton */
.tce-form-bd .mention,.tce-contact .mention{font-size:.85rem;color:var(--soft);line-height:1.6}
.tce-contact .mention a{color:var(--steel)}

/* --- Liste blog ([tce_blog_liste]) --- */
.blog-liste{padding:54px 0 20px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:10px 0 30px}
.bcard{background:#fff;border:1px solid rgba(36,59,82,.08);border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 6px 22px rgba(36,59,82,.06);
  transition:transform .25s ease,box-shadow .25s ease}
.bcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(36,59,82,.12)}
.bcard .bthumb{display:block;aspect-ratio:16/9;overflow:hidden}
.bcard .bthumb img{width:100%;height:100%;object-fit:cover;border-radius:0;margin:0}
.bcard .bbody{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px}
.bcard .bmeta{color:var(--soft);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.bcard h2{font-family:'Archivo',sans-serif;font-size:1.12rem;line-height:1.35;margin:0;text-align:left}
.bcard h2::after{display:none}
.bcard h2 a{color:var(--deep);text-decoration:none}
.bcard h2 a:hover{color:var(--steel)}
.bcard p{color:var(--soft);font-size:.95rem;line-height:1.6;margin:0}
.blog-pagination ul{list-style:none;display:flex;justify-content:center;gap:8px;padding:0;margin:6px 0 40px}
.blog-pagination .page-numbers{display:inline-block;padding:8px 14px;border-radius:0;
  border:1px solid rgba(36,59,82,.14);color:var(--deep);text-decoration:none;font-weight:600}
.blog-pagination .page-numbers.current,.blog-pagination a.page-numbers:hover{
  background:var(--steel);border-color:var(--steel);color:#fff}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}}

/* ============================================================
   APPARITION AU SCROLL (reveal) — piloté par function.js
   ============================================================ */
.reveal,.reveal-up,.reveal-left,.reveal-right{
  opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.reveal-up{transform:translateY(34px)}
.reveal-left{transform:translateX(-46px)}
.reveal-right{transform:translateX(46px)}
.reveal.is-visible,.reveal-up.is-visible,.reveal-left.is-visible,.reveal-right.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-up,.reveal-left,.reveal-right{opacity:1;transform:none;transition:none}
}

/* ============================================================
   HEADER (.tce-hd) — sticky, logo + menu + bouton devis + burger
   Utilisable en bloc code Oxygen OU comme repère pour le header builder natif.
   ============================================================ */
.tce-hd{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);
  font-family:'Archivo',sans-serif}
/* .in : simple flex — SANS max-width/margin auto (dans le header builder, la
   classe est posée sur le container du logo ; le cadrage global est porté par
   .bde-header-builder__container ci-dessus) */
.tce-hd .in{display:flex;align-items:center;gap:22px;margin:0;padding:0;max-width:none}
.tce-hd .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;
  color:var(--deep);font-size:1.2rem;line-height:1}
.tce-hd .brand .mark{width:34px;height:34px;border-radius:0;background:var(--steel);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem}
.tce-hd .brand em{font-style:normal;color:var(--steel);font-weight:700}
.tce-hd .brand small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-top:2px}
.tce-logo-img, .tce-logo-img img{height:56px !important;width:auto !important;display:block}

/* Navigation */
.tce-nav{display:flex;align-items:center;gap:22px;margin-left:6px}
.tce-nav > a, .tce-nav > .has-sub > a{color:var(--ink);text-decoration:none;font-weight:600;
  font-size:.94rem;padding:8px 0;display:inline-block;transition:color .15s}
.tce-nav > a:hover, .tce-nav > .has-sub > a:hover{color:var(--steel)}
.tce-nav .has-sub{position:relative}
.tce-nav .has-sub > a::after{content:"⌄";margin-left:5px;color:var(--soft);font-size:.9rem}
.tce-nav .sub{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;
  border:1px solid var(--line);border-radius:0;box-shadow:0 18px 40px rgba(36,59,82,.12);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:120}
.tce-nav .has-sub:hover .sub, .tce-nav .has-sub.open .sub{opacity:1;visibility:visible;transform:none}
.tce-nav .sub a{display:block;padding:10px 12px;border-radius:0;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:.9rem}
.tce-nav .sub a small{display:block;font-weight:500;color:var(--soft);font-size:.78rem;margin-top:2px}
.tce-nav .sub a:hover{background:var(--bg);color:var(--steel)}

/* Actions à droite */
/* Bloc tél + bouton : les Div Breakdance sont en COLONNE par défaut → on force
   la ligne, centrée verticalement. Sélecteurs doublés pour marcher que la racine
   porte .tce-hd ou non (header construit dans le builder). */
.tce-hd .actions,
.breakdance .actions{margin-left:auto;display:flex;flex-direction:row !important;
  align-items:center !important;justify-content:flex-end;gap:18px}
.breakdance a.phone{display:inline-flex;align-items:center;margin:0}
.tce-hd .tel{color:var(--deep);text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap}
.tce-hd .tel:hover{color:var(--steel)}
.tce-hd .devis{background:var(--steel);color:#fff;padding:11px 20px;border-radius:0;text-decoration:none;
  font-weight:600;font-size:.9rem;box-shadow:0 8px 18px rgba(60,110,153,.25);transition:.2s}
.tce-hd .devis:hover{background:var(--steel-d);transform:translateY(-1px)}
.tce-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--deep)}
.tce-burger svg{width:28px;height:28px}

/* Mobile */
@media(max-width:960px){
  .tce-nav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:80px 20px 24px;box-shadow:-16px 0 40px rgba(0,0,0,.12);
    transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;z-index:130}
  .tce-hd.nav-open .tce-nav{transform:none}
  .tce-nav > a, .tce-nav > .has-sub > a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:1rem}
  .tce-nav .has-sub{width:100%}
  .tce-nav .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    padding:0 0 8px 12px;max-height:0;overflow:hidden;transition:max-height .25s ease}
  .tce-nav .has-sub.open .sub{max-height:400px}
  .tce-hd .tel{display:none}
  .tce-burger{display:inline-flex;order:3}
  .tce-hd.nav-open .tce-scrim{position:fixed;inset:0;background:rgba(36,59,82,.4);z-index:125}
}

/* ============================================================
   FOOTER (.tce-ft)
   ============================================================ */
.tce-ft{background:var(--deep);color:#C9D8E6;font-family:'Inter',sans-serif;font-size:.95rem;line-height:1.7}
.tce-ft .in{max-width:1180px;margin:0 auto;padding:56px 24px 28px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.tce-ft h4{font-family:'Archivo',sans-serif;color:#fff;font-size:1rem;margin:0 0 14px;font-weight:700}
.tce-ft a{color:#C9D8E6;text-decoration:none}
.tce-ft a:hover{color:#fff}
.tce-ft ul{list-style:none;margin:0;padding:0}
.tce-ft li{margin:0 0 9px}
.tce-ft .brand{display:flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-weight:800;
  color:#fff;font-size:1.2rem;margin-bottom:12px}
.tce-ft .brand .mark{width:34px;height:34px;border-radius:0;background:var(--steel);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800}
.tce-ft .about{color:#93AEC6;max-width:280px}
.tce-ft .contact-line{display:flex;gap:8px;margin:0 0 9px}
.tce-ft .contact-line b{color:#fff;font-weight:600;font-family:'Archivo',sans-serif}
.tce-ft .social{display:flex;gap:12px;margin-top:14px}
.tce-ft .social a{width:38px;height:38px;border-radius:0;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:#fff}
.tce-ft .social a:hover{background:var(--steel)}
.tce-ft .social svg{width:18px;height:18px}
.tce-ft .bar{border-top:1px solid rgba(255,255,255,.12);margin-top:8px}
.tce-ft .bar .in2{max-width:1180px;margin:0 auto;padding:18px 24px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;color:#93AEC6;font-size:.85rem}
.tce-ft .bar a{color:#93AEC6}
.tce-ft .bar .links{display:flex;gap:18px;flex-wrap:wrap}
@media(max-width:900px){ .tce-ft .in{grid-template-columns:1fr 1fr;gap:28px} }
@media(max-width:560px){ .tce-ft .in{grid-template-columns:1fr} }

/* Carte société (shortcode [tce_carte_societe]) */
.tce-map-soc{max-width:340px}
.tce-map-soc__t{font-family:'Archivo',sans-serif;font-weight:700;color:#fff;margin:0 0 12px;font-size:1rem}
.tce-map-soc__frame{position:relative;height:var(--h,220px);border-radius:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 28px rgba(0,0,0,.28);background:#16283A}
.tce-map-soc__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  filter:grayscale(.2) contrast(1.02)}
.tce-map-soc__dir{display:inline-block;margin-top:10px;font-size:.85rem;color:#C9D8E6;text-decoration:none;line-height:1.4}
.tce-map-soc__dir:hover{color:#fff}

/* Petits utilitaires d'espacement (remplacent les styles inline) */
.tce-home .note{margin-top:22px}
.tce-ft h4.mt{margin-top:22px}
.tce-ft-logo{margin-bottom:16px}

/* ============================================================
   FORMULAIRE CONTACT (form builder natif Oxygen / Breakdance)
   Cible le markup .breakdance-form-field*. Overrides Oxygen :
   !important sur le bouton (même logique que .btn-devis).
   ============================================================ */
.breakdance-form-field{margin-bottom:18px}
.breakdance-form-field__label{display:block;font-weight:600;font-size:15px;color:var(--deep);margin-bottom:6px}
.breakdance-form-field__required{color:var(--steel);margin-left:3px}

.breakdance-form-field__input,
.breakdance-form-field select,
.breakdance-form-field textarea{
  width:100%;padding:12px 14px;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:0;box-shadow:none;
  transition:border-color .15s ease,box-shadow .15s ease}
.breakdance-form-field__input::placeholder,
.breakdance-form-field textarea::placeholder{color:var(--soft);opacity:.7}

.breakdance-form-field__input:focus,
.breakdance-form-field select:focus,
.breakdance-form-field textarea:focus{
  outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(60,110,153,.18)}

.breakdance-form-field textarea{min-height:140px;resize:vertical}

.breakdance-form-field select{
  appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F9D6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}

/* Bouton d'envoi — vert WKH TCE (remplace le bleu par défaut) */
.breakdance-form-button,
.breakdance-form button[type="submit"],
.breakdance-form-field button,
.breakdance-form-field input[type="submit"]{
  background:var(--steel) !important;color:#fff !important;font-size:16px;font-weight:600;
  padding:13px 28px;border:none;border-radius:0;cursor:pointer;
  box-shadow:0 8px 18px rgba(60,110,153,.25);transition:background .15s ease,transform .05s ease}
.breakdance-form-button:hover,
.breakdance-form button[type="submit"]:hover,
.breakdance-form-field button:hover,
.breakdance-form-field input[type="submit"]:hover{background:var(--steel-d) !important}
.breakdance-form-button:active,
.breakdance-form button[type="submit"]:active{transform:translateY(1px)}

@media(max-width:640px){
  .breakdance-form-button,
  .breakdance-form button[type="submit"],
  .breakdance-form-field input[type="submit"]{width:100%}
}

/* ============================================================
 * Images dans le contenu — shortcode [tce_img] + slots de sections.
 * Positions : pleine (défaut) | droite | gauche | centre.
 * ============================================================ */
.tce-img{margin:22px 0}
.tce-img img{display:block;width:100%;height:auto;border-radius:0;border:1px solid var(--line)}
.tce-img figcaption{margin-top:8px;font-size:.85rem;color:var(--soft);text-align:center}
.tce-img.img-centre{margin-left:auto;margin-right:auto;max-width:760px}
.tce-img.img-droite{float:right;max-width:44%;margin:6px 0 18px 26px}
.tce-img.img-gauche{float:left;max-width:44%;margin:6px 26px 18px 0}
/* le texte qui suit une image flottante ne doit pas chevaucher la section suivante */
.tce-home section::after{content:"";display:block;clear:both}
@media(max-width:680px){
  .tce-img.img-droite,.tce-img.img-gauche{float:none;max-width:100%;margin:18px 0}
}

/* Slot image en haut d'une carte prestation */
.card > .tce-img.card-img{margin:-6px 0 16px}
.card > .tce-img.card-img img{border-radius:0;aspect-ratio:16/10;object-fit:cover}

/* Slot image dans un bloc « split » (colonne de droite) */
.split .split-visual{margin:0}
.split .split-visual img{border-radius:0;box-shadow:0 14px 34px rgba(36,59,82,.10)}
.split .split-visual + .split-card{margin-top:22px}

/* ============================================================
   WP MENU (élément "WP Menu" d'Oxygen posé avec la classe .tce-nav)
   Cible les classes STANDARD de wp_nav_menu (.menu-item, .sub-menu…),
   quel que soit le wrapper généré par le builder. Le layout général
   (flex, gaps) peut aussi se régler dans le builder — ces règles
   assurent couleurs, survol, chevrons et sous-menus au design TCE.
   ============================================================ */
.tce-nav ul{list-style:none;margin:0;padding:0}
.tce-nav li.menu-item > a{color:var(--ink);text-decoration:none;font-weight:600;
  font-size:.95rem;font-family:'Archivo',sans-serif}
/* Entrées AVEC sous-menu (Expertises, Missions) : Breakdance les sort du
   li.menu-item et les enveloppe dans .breakdance-dropdown-toggle, elles
   échappaient donc à la règle ci-dessus et retombaient en graisse 500.
   On les aligne sur les autres entrées. */
.tce-hd .tce-nav .breakdance-menu-link{font-weight:600;font-family:'Archivo',sans-serif}
/* Chevron : Breakdance le dessine en `background-color` (#111827 par défaut,
   donc noir) et non avec la couleur du texte — d'où une flèche noire sur le
   header transparent. On le raccroche à currentColor : il suit désormais la
   couleur du lien dans TOUS les états (blanc sur le hero, foncé ailleurs). */
.tce-nav .breakdance-menu-link-arrow::after{background-color:currentColor}
.tce-nav li.menu-item > a:hover,
.tce-nav li.current-menu-item > a,
.tce-nav li.current-menu-ancestor > a{color:var(--steel)}
.tce-nav li.menu-item-has-children{position:relative}
.tce-nav li.menu-item-has-children > a::after{content:"⌄";margin-left:5px;color:var(--soft);font-size:.9rem}
.tce-nav ul.sub-menu{position:absolute;top:100%;left:0;min-width:250px;background:#fff;
  border:1px solid var(--line);border-top:2px solid var(--bronze);box-shadow:0 14px 30px rgba(34,48,60,.12);
  padding:8px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:60}
.tce-nav li.menu-item-has-children:hover > ul.sub-menu,
.tce-nav li.menu-item-has-children:focus-within > ul.sub-menu{opacity:1;visibility:visible;transform:none}
.tce-nav ul.sub-menu li a{display:block;padding:9px 16px;color:var(--ink);text-decoration:none;font-size:.92rem}
.tce-nav ul.sub-menu li a:hover{background:var(--bg);color:var(--steel)}
@media(max-width:1080px){
  .tce-nav ul.sub-menu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--line);padding:0 0 0 12px}
}

/* ============================================================
   FOOTER construit dans le BUILDER — bloc contact (colonne HTML Code)
   Classes autonomes : marchent sur fond clair (défaut) ; si le container
   racine du footer porte la classe .tce-ft (fond bleu profond), les
   variantes sombres prennent le relais. Icônes = accent bronze.
   ============================================================ */
.breakdance .tce-ft-title{font-family:'Archivo',sans-serif;color:var(--deep);
  font-size:1rem;margin:0 0 14px;font-weight:700}
.breakdance .tce-contact-line{display:flex;align-items:flex-start;gap:9px;
  margin:0 0 9px;color:var(--ink);font-size:.92rem;line-height:1.5}
.breakdance .tce-contact-line svg{flex:none;margin-top:3px;color:var(--bronze)}
.breakdance .tce-contact-line a{color:var(--ink);text-decoration:none}
.breakdance .tce-contact-line a:hover{color:var(--steel)}
/* variante fond sombre (si .tce-ft posée sur le container racine du footer) */
.tce-ft .tce-ft-title{color:#fff}
.tce-ft .tce-contact-line,
.tce-ft .tce-contact-line a{color:#C9D8E6}
.tce-ft .tce-contact-line a:hover{color:#fff}

/* ============================================================
   FOOTER builder — colonnes de liens (élément Basic List)
   UNE seule classe à poser sur l'élément Basic List : tce-ft-list
   (pas de classe par ligne — on cible les <li>/<a> générés).
   + tce-ft-about : le paragraphe de description (colonne marque).
   Variante sombre automatique si .tce-ft est posée sur le container racine.
   ============================================================ */
.breakdance .tce-ft-list{list-style:none;margin:0;padding:0}
.breakdance .tce-ft-list li{margin:0 0 9px;padding:0}
.breakdance .tce-ft-list li a{color:var(--ink);text-decoration:none;font-size:.92rem;line-height:1.5}
.breakdance .tce-ft-list li a:hover{color:var(--steel)}
.breakdance .tce-ft-about{color:var(--soft);font-size:.92rem;line-height:1.65;max-width:280px}
/* variante fond sombre */
.tce-ft .tce-ft-list li a{color:#C9D8E6}
.tce-ft .tce-ft-list li a:hover{color:#fff}
.tce-ft .tce-ft-about{color:#93AEC6}

/* ============================================================
   FOOTER builder — ESPACEMENTS (classe .tce-ft posée sur le container racine)
   Padding global + largeur maxi centrée + gouttières entre colonnes +
   respirations dans la colonne marque. Retour client 2026-08-03.
   ============================================================ */
.breakdance .tce-ft{background:var(--deep);padding:60px 28px 0}
.breakdance .tce-ft > *{max-width:1180px;margin-left:auto;margin-right:auto}
.breakdance .tce-ft .bde-columns{gap:40px;row-gap:36px}
.breakdance .tce-ft .bde-column > *{margin-bottom:14px}
.breakdance .tce-ft img{display:block;margin-bottom:16px}
.breakdance .tce-ft .tce-ft-about{margin-top:4px}
.breakdance .tce-ft .tce-ft-title{margin-top:0}
/* barre légale (bloc HTML .bar en bas) */
.breakdance .tce-ft .bar{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;
  padding:18px 0 22px;max-width:none}
.breakdance .tce-ft .bar .in2{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;
  gap:14px;justify-content:space-between;align-items:center;color:#93AEC6;font-size:.85rem}
.breakdance .tce-ft .bar a{color:#93AEC6;margin-right:14px}
.breakdance .tce-ft .bar a:hover{color:#fff}
@media(max-width:900px){ .breakdance .tce-ft{padding:44px 20px 0} }

/* ============================================================
   FOOTER — carte pleine largeur de colonne + barre légale
   La carte : le wrapper de l'élément Shortcode du builder réduit le bloc
   à la largeur du contenu (même piège que le .oxy-shortcode sur LINEA)
   → on débride toute la chaîne. Retour client 2026-08-03.
   ============================================================ */
.breakdance .tce-ft [class*="shortcode"]{width:100%}
.breakdance .tce-ft .tce-map-soc{max-width:none;width:100%}
.breakdance .tce-ft .tce-map-soc__frame{width:100%;min-height:var(--h,200px)}

/* ============================================================
   HEADER — contenu cadré. Le container du header builder est pleine
   largeur → le bloc actions (tél + bouton) filait au bord de l'écran.
   On plafonne le contenu et on le centre, aligné sur le reste du site.
   ============================================================ */
/* (cadrage déplacé sur .bde-header-builder__container, voir bloc header) */

/* ============================================================
   HERO PHOTO (attribut fond="" de [tce_hero]) — continuité avec le
   one-page actuel : photo plein écran + voile bleu profond pour le
   contraste (le texte reste lisible quel que soit le cliché).
   ============================================================ */
/* La photo vit sur ::before (elle peut ainsi être animée en transform, ce qui
   est accéléré par le GPU) et le voile de contraste sur ::after, au-dessus.
   Le contenu (.in) repasse devant les deux. */
.tce-hero.has-photo{position:relative;background:var(--deep)}
.tce-hero.has-photo::before,
.tce-hero.has-photo::after{content:"";position:absolute;inset:0;pointer-events:none}
/* ------------------------------------------------------------------
   Zoom Ken Burns — MÉCANISME REPRIS À L'IDENTIQUE DE L'ANCIEN SITE.
   Le thème d'origine (.pxl-ken-burns) n'utilise pas @keyframes mais une
   simple TRANSITION déclenchée une fois :
       transition-property : transform
       transition-duration : 20s
       transition-timing-function : linear
       puis la classe --out applique transform: scale(1.3)
   `function.js` pose ici la classe .kb-out après le premier rendu.
   Amplitude et durée = celles de l'ancien site ; pour les ajuster, tout
   se règle sur les deux lignes ci-dessous.
   ------------------------------------------------------------------ */
.tce-hero.has-photo::before{
  background:var(--hero-img) center/cover no-repeat;
  transform-origin:center center;
  transform:scale(1);
  transition:transform 20s linear;
  backface-visibility:hidden;
  will-change:transform}
.tce-hero.has-photo.kb-out::before{transform:scale(1.3)}
.tce-hero.has-photo::after{
  background:linear-gradient(100deg,rgba(18,30,43,.82) 0%,rgba(36,59,82,.55) 45%,rgba(36,59,82,.18) 100%)}
.tce-hero.has-photo .in{position:relative;z-index:2;min-height:520px;align-items:center}
@media(max-width:900px){ .tce-hero.has-photo .in{min-height:0} }

/* Accessibilité : pas de mouvement pour qui a demandé à en être dispensé
   (function.js ne pose pas la classe, et la transition est neutralisée) */
@media(prefers-reduced-motion:reduce){
  .tce-hero.has-photo::before,
  .tce-hero.has-photo.kb-out::before{transition:none;transform:scale(1)}
}

/* Décor du hero lié au contexte de la page : [tce_hero deco="elec|cvc|fluides|audit|moe"] */
.tce-hero.deco-elec{--deco:url(/wp-content/themes/tce-child/assets/img/hero-deco-elec.svg)}
.tce-hero.deco-cvc{--deco:url(/wp-content/themes/tce-child/assets/img/hero-deco-cvc.svg)}
.tce-hero.deco-fluides{--deco:url(/wp-content/themes/tce-child/assets/img/hero-deco-fluides.svg)}
.tce-hero.deco-audit{--deco:url(/wp-content/themes/tce-child/assets/img/hero-deco-audit.svg)}
.tce-hero.deco-moe{--deco:url(/wp-content/themes/tce-child/assets/img/hero-deco-moe.svg)}

/* ============================================================
   HOME — header TRANSPARENT sur le hero photo (comme LINEA archi)
   + image en parallaxe. Classes posées par function.js :
   .over-hero au chargement (body.home), .scrolled après 30px.
   ============================================================ */
body.home .tce-hd.over-hero{position:fixed;top:0;left:0;right:0;z-index:120;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s,box-shadow .25s}
body.home .tce-hd.over-hero:not(.scrolled) .tce-nav li.menu-item > a,
body.home .tce-hd.over-hero:not(.scrolled) .tce-nav .breakdance-dropdown-toggle > a,
body.home .tce-hd.over-hero:not(.scrolled) .tce-nav .breakdance-menu-link-arrow{color:#fff}
body.home .tce-hd.over-hero:not(.scrolled) .tce-nav li.menu-item > a:hover{color:var(--steel-l)}
/* …mais PAS les liens du SOUS-menu (boîte blanche) : on les repasse en foncé */
body.home .tce-hd.over-hero:not(.scrolled) .tce-nav ul.sub-menu li.menu-item > a{color:var(--ink)}
body.home .tce-hd.over-hero:not(.scrolled) .tce-nav ul.sub-menu li.menu-item > a:hover{color:var(--steel)}
body.home .tce-hd.over-hero:not(.scrolled) a.phone.breakdance-link{color:#fff !important}
body.home .tce-hd.over-hero.scrolled{background:#fff;border-bottom-color:var(--line);
  box-shadow:0 6px 18px rgba(34,48,60,.08)}
/* le hero commence sous le header fixe */
body.home .tce-hero.has-photo .in{padding-top:150px}
/* ⚠️ La parallaxe (background-attachment:fixed) a été REMPLACÉE par le zoom
   Ken Burns ci-dessus : les deux effets ne sont pas combinables (l'un exige
   que la photo soit le fond de la section, l'autre qu'elle soit sur une
   couche transformable). Le zoom fonctionne aussi sur mobile, contrairement
   à la parallaxe qu'iOS ignorait. */

/* pas de double chevron : Breakdance affiche déjà sa flèche */
.bde-wp-menu li.menu-item-has-children > a::after{content:none}

/* Logo sur header transparent : on ÉCHANGE l'image pour la variante blanche
   (badge TCE bronze conservé) au lieu du filtre qui blanchissait tout,
   badge compris — d'où le TCE invisible. */
body.home .tce-hd.over-hero:not(.scrolled) .tce-logo-img{
  filter:none;
  content:url(/wp-content/themes/tce-child/assets/img/logo-tce-blanc.webp);
}

/* ============================================================
   DROPDOWN BREAKDANCE (markup réel relevé au devtools 04/08) :
   PAS de ul.sub-menu — le panneau est .breakdance-dropdown-floater
   > .breakdance-dropdown-links > li.breakdance-dropdown-item.
   Les items héritaient de var(--link-color) du builder (blanc)
   sur panneau blanc => invisibles. On force les couleurs ici.
   ============================================================ */
.breakdance-dropdown-floater{background:#fff;border:1px solid var(--line);
  border-top:2px solid var(--bronze);box-shadow:0 14px 30px rgba(34,48,60,.14)}
.breakdance-dropdown-links{padding:6px 0;margin:0;gap:0 !important}
.breakdance-dropdown-floater li.breakdance-dropdown-item > a{display:block;
  padding:9px 16px;color:var(--ink) !important;font-size:.92rem;font-weight:500;
  text-decoration:none;white-space:nowrap}
.breakdance-dropdown-floater li.breakdance-dropdown-item > a:hover{
  background:var(--bg);color:var(--steel) !important}