/*
Theme Name: Twenty Twenty Child
Theme URI: https://wordpress.org/themes/twentytwenty/
Template: twentytwenty
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog,one-column,custom-background,custom-colors,custom-logo,custom-menu,editor-style,featured-images,footer-widgets,full-width-template,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready,block-patterns,block-styles,wide-blocks,accessibility-ready
Version: 3.3.1793730999
Updated: 2026-11-03 19:36:39

*/

@import url("../twentytwenty/style.css");

/* ============================================================
   VIATECH — REFONTE 2026 — DÉBUT
   À coller TOUT EN BAS du style.css du CHILD THEME
   (ne rien supprimer du contenu existant au-dessus)
   ============================================================ */

/* ---------- Palette ---------- */
:root{
  --vt-vert:#2e7d32;
  --vt-vert-2:#1b5e20;
  --vt-vert-fonce:#0f3d17;
  --vt-jaune:#f8f32b; /* RAL 1018 */
  --vt-gris:#4a5158;
  --vt-fond:#f5f7f4;
  --vt-encre:#1e271e;
  --vt-ombre:0 10px 30px rgba(15,61,23,.10);
  --vt-radius:14px;
}

/* ---------- Base ---------- */
.vt-container{max-width:1160px;margin:0 auto;padding:0 24px}
.vt-section{padding:78px 0}
.vt-section h2{font-size:clamp(1.5rem,3vw,2.2rem);color:var(--vt-vert-2);margin:8px 0 14px;font-weight:800;letter-spacing:-.3px;line-height:1.25}
.vt-kicker{color:var(--vt-vert);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:.78rem}
.vt-section-head{max-width:640px;margin-bottom:44px}
.vt-section-head p{color:var(--vt-gris)}

/* ---------- Boutons ---------- */
.vt-btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:700;text-decoration:none;transition:.2s;cursor:pointer;border:0;font-size:1rem}
.vt-btn-primary{background:var(--vt-jaune);color:var(--vt-vert-fonce)}
.vt-btn-primary:hover{background:#eae412;transform:translateY(-1px)}
.vt-btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
.vt-btn-ghost:hover{background:rgba(255,255,255,.12)}
.vt-btn-outline{background:transparent;color:var(--vt-vert-2);border:2px solid var(--vt-vert)}
.vt-btn-outline:hover{background:#eef6ee}

/* ---------- Hero ---------- */
.vt-hero{position:relative;color:#fff;overflow:hidden}
.vt-hero-bg{position:absolute;inset:0;background:
  radial-gradient(900px 400px at 85% 10%,rgba(248,243,43,.18),transparent 60%),
  linear-gradient(120deg,var(--vt-vert-fonce) 0%,var(--vt-vert-2) 55%,var(--vt-vert) 130%)}
.vt-hero-bg::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.2px);
  background-size:26px 26px}
.vt-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:90px 0 100px}
.vt-eyebrow{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:6px 16px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:20px}
.vt-hero h1{font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.18;font-weight:800;letter-spacing:-.5px}
.vt-hero h1 em{font-style:normal;color:var(--vt-jaune)}
.vt-lead{margin:20px 0 32px;font-size:1.12rem;max-width:34em;color:#e6efe4}
.vt-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.vt-hero-badges{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap;font-size:.85rem;color:#d5e5d2}
.vt-hero-badges b{display:block;font-size:1.35rem;color:var(--vt-jaune)}
.vt-hero-points{margin-top:30px;list-style:none;font-size:.92rem;color:#d9ead6}
.vt-hero-points li{padding-left:26px;position:relative;margin:7px 0}
.vt-hero-points li::before{content:"✓";position:absolute;left:0;color:var(--vt-jaune);font-weight:800}

/* ---------- Visuel avant / après ---------- */
.vt-visual-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);border-radius:var(--vt-radius);padding:22px;box-shadow:var(--vt-ombre)}
.vt-before-after{position:relative;border-radius:10px;overflow:hidden;height:250px}
.vt-before,.vt-after{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:1rem;letter-spacing:2px;text-transform:uppercase}
.vt-before{background:linear-gradient(135deg,#6b6f74,#3c4046);color:#c9ccd0}
.vt-after{background:linear-gradient(135deg,#dff0da,#f4faee);color:var(--vt-vert-2);clip-path:inset(0 0 0 50%)}
.vt-ba-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--vt-jaune);color:var(--vt-vert-fonce);font-size:.75rem;font-weight:800;padding:6px 14px;border-radius:999px;letter-spacing:1px;z-index:2}
.vt-visual-caption{margin-top:14px;font-size:.88rem;color:#dfeade}

/* ---------- Fiche machine (page location) ---------- */
.vt-machine-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);border-radius:var(--vt-radius);padding:24px;box-shadow:var(--vt-ombre)}
.vt-machine-visual{height:230px;border-radius:10px;display:grid;place-items:center;font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:.85rem;color:var(--vt-vert-fonce);background:linear-gradient(135deg,var(--vt-jaune),#fdf9a0);text-align:center;padding:12px}
.vt-machine-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;font-size:.85rem;color:#e6efe4}
.vt-machine-specs div{background:rgba(255,255,255,.08);border-radius:8px;padding:10px 12px}
.vt-machine-specs b{display:block;color:var(--vt-jaune);font-size:1.05rem}

/* ---------- Services ---------- */
.vt-services{background:var(--vt-fond)}
.vt-grid-services{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vt-card{background:#fff;border-radius:var(--vt-radius);padding:30px;box-shadow:var(--vt-ombre);border:1px solid #e6ece4;transition:.25s;display:flex;flex-direction:column}
.vt-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(15,61,23,.16)}
.vt-card-icon{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:18px;background:#eef6ee}
.vt-card h3{color:var(--vt-vert-2);font-size:1.15rem;margin-bottom:10px}
.vt-card p{color:var(--vt-gris);font-size:.95rem;flex:1}
.vt-card ul{margin:10px 0 18px;padding-left:0;list-style:none;color:var(--vt-gris);font-size:.88rem}
.vt-card ul li{padding-left:20px;position:relative;margin:4px 0}
.vt-card ul li::before{content:"✓";position:absolute;left:0;color:var(--vt-vert);font-weight:800}
.vt-card > a{color:var(--vt-vert-2);font-weight:700;text-decoration:none;font-size:.92rem}
.vt-card > a::after{content:" →"}
.vt-new{border:2px solid var(--vt-jaune)}
.vt-badge-new{display:inline-block;background:var(--vt-jaune);color:var(--vt-vert-fonce);font-size:.68rem;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.vt-card-cta{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;background:var(--vt-vert-2);border:0}
.vt-card-cta h3{color:#fff;font-size:1.3rem;margin-bottom:6px}
.vt-card-cta p{color:#d9ead6}
.vt-tel{color:var(--vt-jaune);font-weight:800}

/* ---------- Engagements / à propos / réalisations ---------- */
.vt-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vt-engagement{background:#fff;border:1px solid #e6ece4;border-left:5px solid var(--vt-vert);border-radius:var(--vt-radius);padding:26px;box-shadow:var(--vt-ombre)}
.vt-engagement h3{color:var(--vt-vert-2);font-size:1.05rem;margin-bottom:8px}
.vt-engagement p{color:var(--vt-gris);font-size:.93rem}
.vt-apropos-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.vt-apropos-grid p{color:var(--vt-gris)}
.vt-strong{color:var(--vt-vert-2);font-weight:700}
.vt-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vt-stat{background:var(--vt-fond);border-radius:var(--vt-radius);padding:26px;text-align:center}
.vt-stat b{display:block;font-size:2rem;color:var(--vt-vert-2)}
.vt-stat span{color:var(--vt-gris);font-size:.85rem}
.vt-realisations{background:var(--vt-fond)}
.vt-grid-3-project{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vt-project{background:#fff;border-radius:var(--vt-radius);overflow:hidden;box-shadow:var(--vt-ombre);border:1px solid #e6ece4}
.vt-project-visual{height:150px;display:grid;place-items:center;font-weight:800;letter-spacing:1.5px;color:#fff;font-size:.85rem;text-align:center;padding:10px;text-transform:uppercase}
.vt-project-body{padding:22px}
.vt-tag{display:inline-block;background:#eef6ee;color:var(--vt-vert-2);font-size:.72rem;font-weight:800;padding:4px 12px;border-radius:999px;letter-spacing:1px;text-transform:uppercase}
.vt-project-body h3{font-size:1.02rem;color:var(--vt-vert-2);margin:10px 0 6px}
.vt-project-body p{color:var(--vt-gris);font-size:.9rem}

/* ---------- Bandeau CTA devis ---------- */
.vt-cta-band{background:linear-gradient(120deg,var(--vt-vert-fonce),var(--vt-vert-2));color:#fff;text-align:center;padding:70px 0}
.vt-cta-band h2{color:#fff}
.vt-cta-band p{color:#d9ead6;max-width:44em;margin:10px auto 30px}
.vt-cta-band .vt-kicker{color:var(--vt-jaune)}
.vt-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Page location : usages / modalités / durées ---------- */
.vt-usages{background:var(--vt-fond)}
.vt-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.vt-usage{background:#fff;border:1px solid #e6ece4;border-radius:var(--vt-radius);padding:24px;box-shadow:var(--vt-ombre)}
.vt-ico{font-size:1.6rem;margin-bottom:12px}
.vt-usage h3{color:var(--vt-vert-2);font-size:1rem;margin-bottom:6px}
.vt-usage p{color:var(--vt-gris);font-size:.88rem}
.vt-mod{background:#fff;border:1px solid #e6ece4;border-left:5px solid var(--vt-jaune);border-radius:var(--vt-radius);padding:26px;box-shadow:var(--vt-ombre)}
.vt-mod h3{color:var(--vt-vert-2);font-size:1.05rem;margin-bottom:8px}
.vt-mod p{color:var(--vt-gris);font-size:.93rem}
.vt-durees{background:var(--vt-fond)}
.vt-durees-table{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vt-duree{background:#fff;border:1px solid #e6ece4;border-radius:var(--vt-radius);padding:26px;text-align:center;box-shadow:var(--vt-ombre)}
.vt-duree h3{color:var(--vt-vert-2);font-size:1.1rem}
.vt-duree p{color:var(--vt-gris);font-size:.88rem;margin-top:8px}
.vt-pop{border:2px solid var(--vt-jaune);position:relative}
.vt-pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--vt-jaune);color:var(--vt-vert-fonce);font-size:.7rem;font-weight:800;padding:4px 14px;border-radius:999px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.vt-note{color:var(--vt-gris);font-size:.85rem;margin-top:22px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .vt-hero-inner,.vt-apropos-grid{grid-template-columns:1fr;padding:60px 0}
  .vt-grid-services,.vt-grid-3,.vt-grid-3-project{grid-template-columns:1fr 1fr}
  .vt-grid-4,.vt-durees-table{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .vt-grid-services,.vt-grid-3,.vt-grid-3-project,.vt-grid-4,.vt-durees-table{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.vt-btn,.vt-card{transition:none!important}}


/* ============================================================
   VIATECH — HABILLAGE HEADER & FOOTER — v2 (sélecteurs réels)
   ============================================================ */

/* ---------- Header ---------- */
#site-header{background:var(--vt-vert-fonce)}
#site-header .header-inner{max-width:1160px;padding:16px 24px}
#site-header .site-title a{color:#fff}
#site-header .site-description{color:var(--vt-jaune)}
#site-header .primary-menu > li > a{color:#fff}
#site-header .primary-menu > li > a:hover,
#site-header .primary-menu > li > a:focus{color:var(--vt-jaune)}
#site-header .toggle-text{color:#fff}
#site-header .toggle:hover .toggle-text,
#site-header .toggle:focus .toggle-text{color:var(--vt-jaune)}

/* ---------- Menu overlay (mobile) ---------- */
.menu-modal{background:var(--vt-vert-fonce)}
.menu-modal a,
.menu-modal .menu-item > a{color:#fff}
.menu-modal .menu-item > a:hover,
.menu-modal .menu-item > a:focus{color:var(--vt-jaune)}

/* ---------- Modale recherche ---------- */
.search-modal-inner{background:var(--vt-vert-fonce)}
.search-modal .search-field{color:#fff;border-color:rgba(255,255,255,.4)}
.search-modal .search-field::placeholder{color:rgba(255,255,255,.6)}
.search-modal button.search-untoggle{color:#fff}
.search-modal .search-submit{background:var(--vt-jaune)!important;color:var(--vt-vert-fonce)!important}

/* ---------- Footer : zone widgets + réseaux sociaux ---------- */
.footer-nav-widgets-wrapper{background:#0c2a12;border:0}
.footer-nav-widgets-wrapper .footer-inner{max-width:1160px;padding:48px 24px}
.footer-nav-widgets-wrapper p,
.footer-nav-widgets-wrapper .widget{color:#b8cdb9}
.footer-nav-widgets-wrapper .widget-title,
.footer-nav-widgets-wrapper h2{color:#fff}
.footer-nav-widgets-wrapper a{color:#fff;text-decoration:none}
.footer-nav-widgets-wrapper a:hover,
.footer-nav-widgets-wrapper a:focus{color:var(--vt-jaune)}
.footer-social-wrapper .social-menu a{color:#b8cdb9}
.footer-social-wrapper .social-menu a:hover{color:var(--vt-jaune)}

/* ---------- Footer : bandeau crédits ---------- */
#site-footer{background:#0c2a12}
#site-footer .footer-inner{max-width:1160px;padding:20px 24px}
#site-footer .footer-credits{color:#8aa88c}
#site-footer a{color:#fff}
#site-footer a:hover{color:var(--vt-jaune)}
#site-footer .powered-by-wordpress{display:none}
.to-the-top{color:var(--vt-jaune)}

/* ============================================================
   VIATECH — CORRECTIFS v3 (largeur + logo)
   À coller À LA SUITE du bloc "HABILLAGE v2"
   ============================================================ */

/* ---------- 1) Largeur : neutralise la colonne étroite de
   Twenty Twenty, uniquement sur les pages avec le hero Viatech
   (les autres pages du site gardent leur mise en page) ---------- */
.post-inner.thin:has(.vt-hero){max-width:none}

/* Contenu un peu plus large sur grand écran (1160 → 1280 px) */
.vt-container,
#site-header .header-inner,
.footer-nav-widgets-wrapper .footer-inner,
#site-footer .footer-inner{max-width:1280px}

/* ---------- 2) Logo du header ---------- */
/* Logo plus grand (le fichier source fait 1722px de large) */
#site-header .site-logo .custom-logo{max-height:250px!important;width:auto!important}

/* Distingue le header du hero (tous deux vert foncé) */
#site-header{border-bottom:4px solid var(--vt-jaune)}

/* ============================================================
   VIATECH — CORRECTIF v4 : fonds imposés par le Personnalisateur
   Le réglage "Couleur d'arrière-plan" (blanc) du Personnalisateur
   imprime ses couleurs APRÈS notre CSS : le !important reprend la main.
   ============================================================ */
#site-header{background:var(--vt-vert-fonce)!important;border-bottom:4px solid var(--vt-jaune)}
.menu-modal,
.menu-modal-inner{background:var(--vt-vert-fonce)!important}
.search-modal-inner{background:var(--vt-vert-fonce)!important}
.footer-nav-widgets-wrapper{background:#0c2a12!important}
#site-footer{background:#0c2a12!important}

/* ============================================================
   VIATECH — CORRECTIF v5 : retirer la recherche du header
   Masque le champ, le bouton "Rechercher" et les deux
   boutons d'ouverture (mobile + desktop)
   ============================================================ */
#site-header .search-form,
#site-header .search-toggle,
#site-header .toggle-wrapper.search-toggle-wrapper{display:none!important}

/* ============================================================
   VIATECH — CORRECTIFS v6 (largeur réelle de la page)
   Vraie cause : Twenty Twenty bride CHAQUE section enfant de
   l'article à 58rem (~580px), même conteneur élargi.
   ============================================================ */

/* Neutralise la bride de 580px sur les pages Viatech
   (accueil ET future page location : elles contiennent
   toutes les deux un .vt-hero) */
.entry-content:has(.vt-hero) > *{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Filet de sécurité pour la page d'accueil actuelle (ID 869),
   au cas où le navigateur ne comprendrait pas :has() */
.page-id-869 .entry-content > *{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* ============================================================
   VIATECH — CORRECTIFS v7 (police + typographie lisible)
   Cause : le thème calcule 1rem = 10px, tous les textes de la
   refonte étaient ~40% trop petits. Nouvelle police : Barlow.
   ============================================================ */

/* 1) Police : Barlow partout, titres condensés en majuscules */
html, body, button, input, select, textarea,
.vt-hero, .vt-section, #site-footer{
  font-family:"Barlow","Segoe UI",Arial,sans-serif;
}
.vt-hero h1, .vt-section h2{
  font-family:"Barlow Condensed","Barlow",Arial,sans-serif;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.5px;
}
.vt-card h3, .vt-card-cta h3, .vt-engagement h3,
.vt-usage h3, .vt-mod h3, .vt-duree h3, .vt-project-body h3{
  font-family:"Barlow Condensed","Barlow",Arial,sans-serif;
  letter-spacing:.3px;
}

/* 2) Tailles de texte corrigées (base réelle : 1rem = 10px) */
.vt-kicker{font-size:1.3rem}
.vt-section h2{font-size:clamp(2.6rem,4vw,3.6rem)}
.vt-btn{font-size:1.6rem;padding:14px 34px}
.vt-eyebrow{font-size:1.2rem}
.vt-hero h1{font-size:clamp(3.2rem,6vw,5.4rem)}
.vt-lead{font-size:1.85rem}
.vt-hero-badges{font-size:1.35rem}
.vt-hero-badges b{font-size:2rem}
.vt-hero-points{font-size:1.55rem}
.vt-visual-caption{font-size:1.35rem}
.vt-machine-visual{font-size:1.35rem}
.vt-machine-specs{font-size:1.45rem}
.vt-machine-specs b{font-size:1.8rem}
.vt-card{padding:34px}
.vt-card-icon{width:64px;height:64px;font-size:2rem}
.vt-card h3{font-size:2rem}
.vt-card p{font-size:1.65rem;line-height:1.55}
.vt-card ul{font-size:1.5rem}
.vt-card > a{font-size:1.5rem}
.vt-badge-new{font-size:1.1rem}
.vt-card-cta h3{font-size:2.4rem}
.vt-engagement h3{font-size:1.8rem}
.vt-engagement p{font-size:1.6rem}
.vt-stat b{font-size:3.2rem}
.vt-stat span{font-size:1.4rem}
.vt-project-visual{font-size:1.3rem}
.vt-tag{font-size:1.15rem}
.vt-project-body h3{font-size:1.7rem}
.vt-project-body p{font-size:1.5rem}
.vt-usage h3{font-size:1.6rem}
.vt-usage p{font-size:1.5rem}
.vt-mod h3{font-size:1.8rem}
.vt-mod p{font-size:1.55rem}
.vt-duree h3{font-size:2rem}
.vt-duree p{font-size:1.5rem}
.vt-pop-tag{font-size:1.15rem}
.vt-note{font-size:1.4rem}

/* ============================================================
   VIATECH — CORRECTIFS v8 (police Montserrat, remplace Barlow)
   Se colle sous le bloc v7 ; les tailles de v7 restent valables.
   ============================================================ */

html, body, button, input, select, textarea,
.vt-hero, .vt-section, #site-footer{
  font-family:"Montserrat","Segoe UI",Arial,sans-serif;
}
.vt-hero h1, .vt-section h2{
  font-family:"Montserrat",Arial,sans-serif;
  font-weight:800;
  letter-spacing:0;
}
.vt-card h3, .vt-card-cta h3, .vt-engagement h3,
.vt-usage h3, .vt-mod h3, .vt-duree h3, .vt-project-body h3{
  font-family:"Montserrat",Arial,sans-serif;
  font-weight:700;
  letter-spacing:0;
}