/* ========================================================================== L'ATELIER DU CARRELAGE — Surcouche personnalisée Chargée APRÈS style.css et responsive.css. Ne jamais modifier style.css. ========================================================================== ┌───────────────────────────────────────────────────────────────────────┐ │ INFOS CLIENT │ │ │ │ Nom .............. L'Atelier du Carrelage │ │ Activité ......... Vente de carrelage (PAS de pose) │ │ Adresse .......... 21 avenue de la République, 62420 Billy-Montigny │ │ E-mail ........... latelierducarrelage@yahoo.com │ │ SIREN ............ 107 296 345 (vérifié, clé Luhn correcte) │ │ TVA .............. FR76 107 296 345 (clé cohérente avec le SIREN)│ │ │ │ Téléphone ........ 07 82 59 57 83 │ │ Domaine .......... latelierducarrelage.com (en ligne, HTTPS) │ │ │ │ ⚠ ENCORE À CONFIRMER : │ │ Horaires ......... Lun-Ven 8h-18h, Sam 9h-12h — supposés │ │ SIRET ............ SIREN + 5 chiffres de l'établissement, non fourni │ │ Forme juridique .. et capital social, pour les mentions légales │ │ │ │ Ces valeurs vivent dans le générateur │ │ (scratchpad/gen_common.py) puis sont propagées à toutes les pages. │ │ Sur le serveur, modifier /root/Carrelage/site puis lancer │ │ /root/Carrelage/deployer.sh │ └───────────────────────────────────────────────────────────────────────┘ */ :root { --accent: #B4704F; /* terre cuite — accent principal */ --accent-dark: #96593C; /* hover */ --accent-soft: #C98360; /* dégradés, survols légers */ --ink: #14100E; /* fond principal */ --surface: #1C1714; /* cartes, blocs surélevés */ --surface-2: #241D19; /* blocs alternés */ --line: rgba(180,112,79,.22); --muted: #A39B95; /* texte secondaire */ --paper: #F5F1ED; /* fonds clairs */ } /* --- Corrections de fond ------------------------------------------------ */ body { background: var(--ink); } .footer-section { background: var(--surface); } /* --- Titres de section : ton plus sobre --------------------------------- */ .section-title .main-title h1 { color: rgba(180,112,79,.14); letter-spacing: 2px; } .section-title .sub-title h2 span { color: var(--accent); } /* --- Bandeau défilant : moins criard ------------------------------------ */ .tag-area .content-box .title span { -webkit-text-stroke: 1px var(--accent); } /* ========================================================================== FORMULAIRE DE DEVIS ========================================================================== */ .devis-form .form_box { margin-bottom: 18px; } .devis-form label { display: block; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 7px; } .devis-form label .req { color: var(--accent); } .devis-form input[type="text"], .devis-form input[type="email"], .devis-form input[type="tel"], .devis-form input[type="number"], .devis-form select, .devis-form textarea { width: 100%; background: var(--surface); border: 1px solid rgba(255,255,255,.09); border-radius: 2px; color: #fff; font-size: 14px; padding: 14px 16px; transition: border-color .25s, background .25s; } .devis-form textarea { min-height: 150px; resize: vertical; } .devis-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B4704F' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; cursor: pointer; } .devis-form select option { background: var(--surface); color: #fff; } .devis-form input:focus, .devis-form select:focus, .devis-form textarea:focus { border-color: var(--accent); background: var(--surface-2); outline: none; } .devis-form ::placeholder { color: #6E6660; opacity: 1; } /* Consentement RGPD */ .devis-consent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 22px; } .devis-consent input { margin-top: 4px; accent-color: var(--accent); flex: 0 0 auto; } .devis-consent label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--muted); } .devis-consent a { color: var(--accent); text-decoration: underline; } /* Bouton d'envoi */ .devis-form button[type="submit"] { background: var(--accent); border: 0; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 17px 44px; border-radius: 2px; cursor: pointer; transition: background .25s; } .devis-form button[type="submit"]:hover { background: var(--accent-dark); } .devis-form button[type="submit"][disabled] { opacity: .55; cursor: not-allowed; } /* Messages de validation */ .devis-form .field-error { display: block; color: #E0866A; font-size: 12px; letter-spacing: 0; text-transform: none; margin-top: 6px; } .devis-form .is-invalid { border-color: #E0866A !important; } #form-status { margin-top: 20px; font-size: 14px; } #form-status .ok, #form-status .ko { display: block; padding: 16px 20px; border-radius: 2px; border-left: 3px solid; } #form-status .ok { background: rgba(180,112,79,.12); border-color: var(--accent); color: #EADFD6; } #form-status .ko { background: rgba(224,134,106,.10); border-color: #E0866A; color: #F0CFC4; } /* Champ anti-spam (honeypot) — invisible pour l'humain */ .devis-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== BLOCS SPÉCIFIQUES ========================================================================== */ /* Coordonnées en colonne (page contact) */ .coord-list { list-style: none; padding: 0; margin: 0 0 34px; } .coord-list li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #CFC7C1; line-height: 1.65; } .coord-list li:last-child { border-bottom: 0; } .coord-list i { color: var(--accent); font-size: 19px; line-height: 1.5; flex: 0 0 auto; } .coord-list strong { display: block; color: #fff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; font-weight: 600; } .coord-list a { color: #CFC7C1; } .coord-list a:hover { color: var(--accent); } /* Grille produits */ .produit-card { position: relative; overflow: hidden; border-radius: 2px; margin-bottom: 30px; background: var(--surface); } .produit-card .produit-thumb { overflow: hidden; aspect-ratio: 1/1; } .produit-card .produit-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .produit-card:hover .produit-thumb img { transform: scale(1.07); } .produit-card .produit-body { padding: 26px 26px 30px; } .produit-card h3 { font-size: 21px; margin: 0 0 10px; } .produit-card .produit-eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; display: block; margin-bottom: 12px; } .produit-card p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 0 16px; } .produit-specs { list-style: none; padding: 0; margin: 0; } .produit-specs li { color: #B8B0AA; font-size: 13px; padding: 5px 0 5px 22px; position: relative; } .produit-specs li::before { content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 1px; background: var(--accent); } /* Bandeau d'accroche pleine largeur */ .bandeau-cta { background: linear-gradient(rgba(20,16,14,.86), rgba(20,16,14,.86)), url("../images/carrelage/texture-dark.jpg") center/cover no-repeat; padding: 96px 0; text-align: center; } .bandeau-cta h2 { font-size: 40px; margin-bottom: 16px; } .bandeau-cta p { color: var(--muted); max-width: 620px; margin: 0 auto 34px; } .bandeau-cta .cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .bandeau-cta .cta-btns a { display: inline-block; padding: 16px 38px; font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; border-radius: 2px; transition: all .3s; } .bandeau-cta .cta-primary { background: var(--accent); color: #fff; } .bandeau-cta .cta-primary:hover { background: var(--accent-dark); color: #fff; } .bandeau-cta .cta-ghost { border: 1px solid rgba(255,255,255,.24); color: #fff; } .bandeau-cta .cta-ghost:hover { border-color: var(--accent); color: var(--accent); } /* Étapes de la méthode de travail */ .etape-item { padding: 34px 30px; background: var(--surface); height: 100%; border-radius: 2px; } .etape-item .etape-num { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .18em; display: block; margin-bottom: 16px; } .etape-item h3 { font-size: 19px; margin: 0 0 12px; } .etape-item p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0; } /* Fils d'Ariane : image de fond carrelage */ .breadcumb-area { background: linear-gradient(rgba(20,16,14,.78), rgba(20,16,14,.88)), url("../images/carrelage/hero-3.jpg") center/cover no-repeat !important; } /* Encart de réassurance */ .reassurance { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .reassurance span { border: 1px solid var(--line); color: #C9C1BB; font-size: 12px; letter-spacing: .06em; padding: 9px 18px; border-radius: 2px; } .reassurance i { color: var(--accent); margin-right: 7px; } /* Carte / iframe */ .map-embed { line-height: 0; filter: grayscale(1) contrast(.92) brightness(.82); } .map-embed iframe { width: 100%; height: 420px; border: 0; } /* Accessibilité : focus visible partout */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Lien d'évitement pour lecteurs d'écran */ .skip-link { position: absolute; left: -9999px; background: var(--accent); color: #fff; padding: 12px 22px; z-index: 9999; } .skip-link:focus { left: 12px; top: 12px; } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 991px) { .bandeau-cta { padding: 68px 0; } .bandeau-cta h2 { font-size: 30px; } } @media (max-width: 575px) { .bandeau-cta .cta-btns a { width: 100%; } } /* ========================================================================== CORRECTIFS DU TEMPLATE Le template Arcke a été conçu pour d'autres libellés et une autre palette. Ces règles rattrapent ce qui ne convenait plus. Chaque bloc dit pourquoi. ========================================================================== */ /* --- 1. Bouton « Demander un devis » de l'en-tête ------------------------- La classe .hendre-button n'existe nulle part dans style.css : le lien retombait sur la couleur de lien par défaut de theme-default.css (#43baff), soit un bleu vif au milieu d'une charte terre cuite. */ .hendre-button { text-align: right; padding-right: 26px; } .hendre-button a { display: inline-block; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; /* sinon le libellé passe sur deux lignes */ padding: 13px 24px; border-radius: 2px; transition: background .3s; } .hendre-button a:hover { background: var(--accent-dark); color: #fff; } /* L'en-tête est en container-fluid : sans marge, le bouton touche le bord de la fenêtre et le haut de l'écran. */ #sticky-header .container-fluid { padding-left: 34px; padding-right: 34px; } #sticky-header .row { padding: 6px 0; } @media (max-width: 991px) { .hendre-button { display: none; } /* le menu mobile porte déjà le lien */ } /* --- 2. Boutons des blocs « points forts » ------------------------------- Le template masquait volontairement le libellé (margin-left: -103px dans un conteneur overflow:hidden) pour ne laisser qu'un cercle et un trait. Avec un libellé français plus long, la fin du mot réapparaissait : on lisait « its ». On rétablit un bouton lisible et on retire la décoration devenue inutile. */ .feature-area.one .feature-button { overflow: visible; } .feature-area.one .feature-button::before { display: none; } .feature-area.one .feature-button a { margin-left: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .feature-area.one .feature-button a::before, .feature-area.one .feature-button a::after { display: none; } .feature-area.one .feature-button a span.fleche { display: inline-block; margin-left: 9px; transition: transform .3s; } .feature-area.one .feature-button a:hover { color: #fff; } .feature-area.one .feature-button a:hover span.fleche { transform: translateX(5px); } /* --- 3. Bandeau défilant des matériaux ----------------------------------- Le fond d'origine (resource/tag-bg.jpg) est une image claire contenant de grandes lettres décoratives en anglais, qui se superposaient au texte et cassaient le registre sombre du site. On repasse sur un fond plein. */ .tag-area.one { background: var(--surface) !important; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); padding: 46px 0 !important; } .tag-area.one .marquee { --gap: 0px; } .tag-area.one .marquee-block .content-box h6.title { font-size: 30px; padding: 0 34px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.30); letter-spacing: .04em; } .tag-area.one .marquee-block .content-box h6.title:hover { color: var(--accent); -webkit-text-stroke: 1px var(--accent); } /* --- 4. Visuel du diaporama d'accueil ------------------------------------ Les images du template étaient des PNG au ratio fixe 756 × 802. Nos photos sont en 16/9 : sans contrainte, elles débordaient de leur colonne et on ne voyait qu'un détail agrandi. */ .slider-area.one .slider-thumb img { width: 100%; height: 640px; object-fit: cover; object-position: center; display: block; } @media (max-width: 991px) { .slider-area.one .slider-thumb img { height: 340px; } } /* --- 5. Liens résiduels en bleu ------------------------------------------ theme-default.css impose a { color:#43baff } à tout lien non stylé. On neutralise ce bleu là où il ressort encore. */ .widgets-company-icon-list ul li a, .coord-list a, .breadcumb-content ul li a, .copy-rights a { color: inherit; } .widgets-company-icon-list ul li a:hover, .breadcumb-content ul li a:hover { color: var(--accent); } /* --- 6. Bloc contact ------------------------------------------------------ Le buyer file d'Arcke ne livre pas de photos : ses fonds sont des images témoins grises portant leurs dimensions en gros caractères (« 1920x840 »). .contact-area-inner déclarait un fond sombre puis l'écrasait aussitôt par resource/world.jpg, ce qui affichait le témoin en pleine largeur et rendait le texte clair illisible. */ .contact-area-inner { background: var(--ink) !important; padding: 100px 0 110px !important; } /* Le template décalait la colonne de -50px pour un gabarit 6/6. Notre grille est en 5/7 : le décalage faisait chevaucher la photo et le formulaire. */ .contact-area-inner .single-contact-box.upper { left: 0; } /* Le template imposait width:80% + margin-left:100px sur cette photo, calibrés pour une colonne 6/12. Dans notre grille 5/7, elle débordait sur le formulaire voisin. */ .contact-area-inner .single-contact-thumb img { width: 100% !important; margin-left: 0 !important; height: 300px; object-fit: cover; border-radius: 2px; display: block; } /* --- 7. Autres fonds témoins ---------------------------------------------- Mêmes images grises, sur des sections que nos pages utilisent aussi. */ .service-area-inner-page .single-inner-service-box::before { display: none; } .horizontal-slider-area .horizontal-slider-box { background: var(--surface); } /* ========================================================================== MOBILE ========================================================================== */ /* --- 8. Barre de menu mobile --------------------------------------------- meanmenu.min.css écrit en dur le nom du template dans un ::before : .mean-container .mean-bar::before { content: "Arcke"; } On remplace par le logo du client. */ .mean-container .mean-bar::before { content: "" !important; background: url("../images/logo-atelier.svg") left center / contain no-repeat; width: 228px; height: 42px; top: 10px !important; left: 14px !important; } .mean-container .mean-bar { background: var(--surface); border-bottom: 1px solid rgba(255,255,255,.07); min-height: 64px; } .mean-container a.meanmenu-reveal { top: 16px; color: #fff; } .mean-container a.meanmenu-reveal span { background: #fff; } .mean-container .mean-nav { background: var(--surface); } .mean-container .mean-nav ul li a { border-top-color: rgba(255,255,255,.07); } .mean-container .mean-nav ul li a:hover { color: var(--accent); } /* --- 9. Diaporama d'accueil sur mobile ------------------------------------ responsive.css masque la photo du hero sur les petits écrans : @media (min-width:320px) and (max-width:599px) { .slider-area.one .slider-thumb { display:none } } @media (min-width:600px) and (max-width:767px) { .slider-thumb img { display:none !important } } Pour un site d'architecture illustré par des rendus, c'était défendable. Pour un carreleur, la photo du carrelage EST l'argument de vente : on la rétablit, au-dessus du texte. */ @media (max-width: 767px) { .slider-area.one .slider-thumb { display: block !important; } .slider-area.one .slider-thumb img { display: block !important; height: 240px; width: 100%; object-fit: cover; } /* Le texte est déclaré avant l'image dans le HTML ; on inverse pour ouvrir sur le visuel. */ .slider-area.one .row.bor-der { flex-direction: column-reverse; } .slider-area.one .singles-sliders { margin-bottom: 0; } /* `left: -10%` sur le bloc texte décalait le contenu hors cadre, et les marges négatives de la grille Bootstrap le débordaient à droite. */ .slider-area.one .single-slider-left { left: 0 !important; } .slider-area.one .container-fluid { padding-left: 12px; padding-right: 12px; } .slider-area.one .row.bor-der { margin-left: 0 !important; margin-right: 0 !important; } .slider-area.one .row.bor-der > [class*="col-"] { padding-left: 0; padding-right: 0; } .hero-slides .owl-stage-outer { overflow: hidden; } /* Resserre l'espace entre la photo et le bloc de titre. */ .slider-area.one .singles-sliders { margin: 0 0 14px !important; } .slider-area.one .slider-content { margin-top: 0; } .slider-area.one .single-slider-left { margin-top: 0 !important; margin-bottom: 0 !important; } } @media (max-width: 599px) { .slider-area.one .single-slider { padding: 30px 20px 40px; } .slider-area.one .slider-title h4 { font-size: 11px; letter-spacing: .12em; } .slider-area.one .slider-title h1 { font-size: 29px; line-height: 38px; margin: 14px 0 26px; } .slider-area.one .slider-number { display: none; } .slider-area.one .slider-button::before { display: none; } /* Titres de section : la version fantôme derrière déborde en étroit */ .section-title .main-title h1 { font-size: 46px; } .section-title .sub-title h2 { font-size: 26px; line-height: 34px; } .bandeau-cta h2 { font-size: 25px; } .produit-card .produit-body { padding: 22px 20px 26px; } .tag-area.one .marquee-block .content-box h6.title { font-size: 21px; padding: 0 20px; } .footer-section .widgets-company-info, .footer-section .widgets-companys-infos { margin-bottom: 34px; } } /* Sur toute la zone tablette et mobile, les grands décalages négatifs du template créent des débordements horizontaux. */ @media (max-width: 991px) { body { overflow-x: hidden; } .contact-area-inner .single-contact-box.upper { left: 0; margin-top: 46px; } .about-area.one { padding: 90px 0 70px; } .service-area.one { padding: 80px 0; } .counter-area.one { padding: 70px 0; } } /* ========================================================================== HIÉRARCHIE DES TITRES — reprise des styles décoratifs Le template Arcke posait des

sur des éléments purement visuels : le mot fantôme derrière chaque titre de section, les nombres des compteurs et le numéro de slide. La page d'accueil comptait ainsi 15

. Pour un moteur, autant de

revient à n'en avoir aucun. Ces éléments sont devenus des