/* ========================================================= LINEA — Feuille de style globale (tokens + composants) Source de vérité versionnée. Chargée par linea-design-tokens.php sur le front ET dans l'éditeur Oxygen. ========================================================= */ /* ===== 1. Design tokens ===== */ :root{ /* Couleurs */ --charbon:#201D1D; /* titres, texte fort */ --gris:#5D5D5D; /* texte courant */ --noir:#000000; --accent:#906E49; /* signature bronze */ --blanc:#FFFFFF; /* Polices */ --font-titre:"Roboto",sans-serif; --font-sous-titre:"Roboto Slab",serif; --font-corps:"Roboto",sans-serif; } /* ===== 2. Header ===== */ .linea-header{ display:flex; align-items:center; justify-content:space-between; padding:22px 5%; /* Pas de fond forcé ici : le fond est géré DANS Oxygen par header (header normal = blanc ; header home = transparent). */ position:sticky; top:0; z-index:999; } /* Reset : aucun lien du header n'est souligné ni bleu. Prefixe .linea-header -> passe devant les styles Breakdance (a.breakdance-link). */ .linea-header a{ text-decoration:none; color:var(--charbon); } /* Logo */ .linea-header__logo img{ height:52px; width:auto; display:block; } /* Navigation (WP Menu) */ .linea-nav, .linea-nav ul{ display:flex; align-items:center; gap:38px; list-style:none; margin:0; padding:0; } .linea-header .linea-nav a{ font-family:var(--font-corps); font-weight:600; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; color:var(--charbon); transition:color .2s ease; } .linea-header .linea-nav a:hover, .linea-header .linea-nav .current-menu-item > a, .linea-header .linea-nav .current-menu-ancestor > a{ color:var(--accent); } .linea-header .linea-nav .current-menu-item > a{ border-bottom:2px solid var(--accent); padding-bottom:4px; } /* Zone droite : téléphone + bouton sur une seule ligne. Breakdance force flex-direction:column + align-items:flex-start sur TOUS les .bde-div (spec 0,2,0). On prefixe par .breakdance (sur le ) -> 0,3,0, et on remet explicitement row. Aucun !important. */ .breakdance .linea-header .linea-header__right{ display:flex; flex-direction:row; align-items:center; gap:22px; } /* Téléphone */ .linea-header a.linea-header__tel{ font-family:var(--font-corps); font-weight:600; color:var(--charbon); white-space:nowrap; } .linea-header a.linea-header__tel:hover{ color:var(--accent); } /* Bouton CTA — la classe linea-header__cta est sur le DIV .bde-button ; la couleur vient du lien Breakdance a l'interieur -> on cible ce lien pour battre .breakdance .button-atom--primary (le bleu). */ .linea-header .linea-header__cta a{ background:var(--accent); border-color:var(--accent); border-radius:0; /* lignes nettes = ADN archi */ color:var(--blanc); transition:background .2s ease, border-color .2s ease; } .linea-header .linea-header__cta a:hover{ background:var(--charbon); border-color:var(--charbon); } .linea-header .linea-header__cta .button-atom__text{ color:var(--blanc); font-family:var(--font-corps); font-weight:600; font-size:14px; letter-spacing:.5px; text-transform:uppercase; } /* Filet signature bronze, pleine largeur sous le header */ .linea-header::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); opacity:.35; } /* ===== 3. Footer ===== */ .linea-footer{ position:relative; background:linear-gradient(rgba(32,29,29,.86),rgba(32,29,29,.93)), url("/wp-content/uploads/2022/07/footer-4-bg.jpg") center/cover no-repeat; color:#c9c9c9; padding:70px 5% 0; font-family:var(--font-corps); } .linea-footer a, .linea-footer a:visited{ color:#c9c9c9; text-decoration:none; transition:color .2s ease; } .linea-footer a:hover, .linea-footer a:focus{ color:var(--accent); } /* Rangée principale : colonnes côte à côte (Breakdance force column -> on remet row) */ .breakdance .linea-footer__top{ display:flex; flex-direction:row; flex-wrap:wrap; gap:40px; max-width:1200px; margin:0 auto; justify-content:space-between; } .linea-footer__col{ flex:1 1 200px; min-width:180px; } /* Titres de colonne */ .linea-footer__col-title{ color:var(--blanc); font-family:var(--font-titre); font-weight:600; font-size:16px; letter-spacing:.5px; margin:0 0 18px; } /* Listes de liens (services / zones) */ .linea-footer__list{ list-style:none; margin:0; padding:0; } .linea-footer__list li{ margin-bottom:13px; } .linea-footer__list a{ line-height:1.4; } /* Marque : logo + réseaux + accroche */ .linea-footer__logo img, img.linea-footer__logo{ width:170px; height:auto; margin-bottom:22px; } .breakdance .linea-footer__social{ display:flex; flex-direction:row; gap:12px; margin:4px 0 16px; } .linea-footer__social svg{ width:18px; height:18px; } .linea-footer__tagline{ line-height:1.6; max-width:260px; margin:0; } .linea-footer__social a{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); color:var(--blanc); } .linea-footer__social a:hover{ background:var(--accent); color:var(--blanc); } /* Contact : lignes avec icône bronze */ .breakdance .linea-footer__contact-line{ display:flex; flex-direction:row; align-items:center; gap:10px; margin-bottom:12px; } .linea-footer__contact-line svg, .linea-footer__contact-line i{ color:var(--accent); flex:0 0 auto; } /* Barre légale */ .breakdance .linea-footer__bottom{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; max-width:1200px; margin:60px auto 0; padding:24px 0 34px; border-top:1px solid rgba(144,110,73,.4); /* filet bronze */ font-size:13px; } .linea-footer__legal a{ margin-left:18px; } /* ===== Responsive ===== */ @media (max-width:991px){ .linea-nav, .linea-nav ul{ gap:22px; } .linea-header{ padding:16px 5%; } .linea-header__right{ gap:14px; } .breakdance .linea-footer__top{ flex-direction:column; gap:34px; } .breakdance .linea-footer__bottom{ flex-direction:column; text-align:center; } .linea-footer__legal a{ margin:0 9px; } }