/* Theme Name: Les Peintures du Haut Pays Theme URI: https://lespeinturesduhautpays.fr/ Author: Christophe Clabault Author URI: https://lespeinturesduhautpays.fr/ Description: Theme sur mesure pour Les Peintures du Haut Pays, artisan peintre a Becourt (Pas-de-Calais). Aucune ressource externe, aucun constructeur de page, polices hebergees en local. Version: 1.8.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: lphp Tags: artisan, local-business, accessibility-ready, translation-ready, custom-logo, custom-menu */ /* ========================================================================== Le style du site commence ici. Il est identique a la version statique. Les adaptations propres a WordPress sont regroupees a la toute fin, dans la section 10. ========================================================================== */ /* ========================================================================== LES PEINTURES DU HAUT PAYS — feuille de style unique Ce fichier deviendra le style.css du theme WordPress. SOMMAIRE 1. Polices (hebergees en local) 2. Variables <- tout se regle ici 3. Base et reset 4. Utilitaires 5. Composants (boutons, en-tete, pied de page, cartes) 6. Sections (hero, prestations, avant/apres, carte...) 7. Pages legales 8. Animations et accessibilite 9. Responsive ========================================================================== */ /* ========================================================================== 1. POLICE — hebergee en local dans fonts/ Une SEULE famille pour tout le site : Hanken Grotesk, en version variable (un fichier couvre les graisses 300 a 800). Titres et texte partagent la meme police : rendu uni, net, et site plus leger. Aucun appel a Google : charger une police depuis un serveur tiers transmet l'adresse IP du visiteur sans son consentement (RGPD). font-display:swap = le texte s'affiche tout de suite avec une police de secours, puis bascule. Jamais de page blanche. ========================================================================== */ @font-face{ font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap; src:url('fonts/hanken-grotesk-normal-300-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap; src:url('fonts/hanken-grotesk-normal-300-800-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== 2. VARIABLES — tout se regle ici ========================================================================== */ :root{ /* --- Palette (octobre 2026) --- Ce sont les SEULES couleurs du site. Tout le reste en derive. */ --olive:#4A5A23; /* fonds forts : une section sur deux */ --jaune:#F6B042; /* accents sur olive et noir + bouton principal, logo au survol */ --bordeaux:#BE4143; /* accents sur ivoire + bouton secondaire */ --ivoire:#FBF7F0; /* fond principal */ --encre:#24221E; /* texte sur ivoire + fond de la barre du haut et du pied de page */ --blanc:#FFFFFF; /* texte sur olive et noir */ /* --- Roles : c'est ce qu'on utilise dans tout le fichier --- Valeurs pour un fond IVOIRE. Elles sont REDEFINIES pour les fonds olive et noir (bloc "FONDS SOMBRES", section 4) : un element qui utilise var(--text) ou var(--accent-titre) prend donc automatiquement la bonne couleur selon la section ou il se trouve. Regle : sur ivoire, texte encre et accents bordeaux ; sur olive ou noir, texte blanc et accents jaunes. Jamais l'inverse. */ --bg:var(--ivoire); --bg-dark:var(--olive); --bg-bandeau:var(--encre); /* barre du haut et pied de page */ --text:var(--encre); --text-soft:color-mix(in srgb,var(--encre) 76%,transparent); --text-on-dark:var(--blanc); --text-soft-on-dark:color-mix(in srgb,var(--blanc) 85%,transparent); --accent:var(--bordeaux); /* traits d'accent, survols */ --accent-titre:var(--bordeaux); /* mots mis en valeur, chiffres, grands titres */ --accent-texte:var(--bordeaux); /* sur-titres, liens */ --accent-on-dark:var(--jaune); --focus:var(--bordeaux); /* contour clavier */ --line:color-mix(in srgb,var(--encre) 14%,transparent); /* separateurs */ --line-strong:color-mix(in srgb,var(--encre) 28%,transparent); --line-on-dark:color-mix(in srgb,var(--blanc) 28%,transparent); --line-strong-on-dark:color-mix(in srgb,var(--blanc) 50%,transparent); --fond-image:color-mix(in srgb,var(--encre) 8%,transparent); /* attente des photos */ /* Boutons */ --btn-principal-bg:var(--jaune); /* "Devis gratuit", "Envoyer ma demande" */ --btn-principal-txt:var(--encre); --btn-second-bg:var(--bordeaux); /* secondaire sur fond clair */ --btn-second-txt:var(--blanc); --btn-hover-bg:var(--bordeaux); /* survol des boutons pleins */ --btn-hover-txt:var(--blanc); --plein-bg:var(--bordeaux); /* puce selectionnee, survol des etiquettes */ --plein-txt:var(--blanc); /* --- Typographie --- */ /* Une seule famille pour tout le site. Les titres se distinguent par la graisse (800) et le resserrement, pas par une autre police. */ --font-titre:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-texte:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --poids-titre:800; /* Echelle fluide : la taille s'adapte a la largeur de l'ecran, sans palier brutal. Le 2e terme de clamp() fait le lien. */ --fs-micro:clamp(.69rem, .66rem + .12vw, .76rem); /* sur-titres */ --fs-petit:clamp(.86rem, .83rem + .18vw, .95rem); --fs-base:clamp(1rem, .96rem + .22vw, 1.12rem); /* texte courant */ --fs-lead:clamp(1.1rem, 1.02rem + .42vw, 1.35rem); /* chapo */ --fs-h3:clamp(1.25rem, 1.1rem + .72vw, 1.65rem); --fs-h2:clamp(1.9rem, 1.35rem + 2.5vw, 3.4rem); --fs-h1:clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem); --fs-hero:clamp(2.6rem, 1.5rem + 5.2vw, 6rem); --fs-chiffre:clamp(2.4rem, 1.7rem + 2.6vw, 3.6rem); --lh-titre:1.04; --lh-texte:1.68; /* genereux : plus aere, plus lisible */ --ls-titre:-0.028em; --ls-label:0.24em; /* --- Rythme vertical et espaces (effet premium) --- */ --sp-2xs:.5rem; --sp-xs:.8rem; --sp-s:1.3rem; --sp-m:2rem; --sp-l:clamp(2.2rem, 4vw, 3.4rem); --sp-xl:clamp(3rem, 5.5vw, 4.5rem); /* Respiration des sections. Valeur volontairement contenue : au-dela, on passe plus de temps a faire defiler qu'a lire. */ --sp-section:clamp(3.4rem, 6.5vw, 5.75rem); --sp-gouttiere:clamp(1.5rem, 4vw, 2.75rem); --largeur-max:1280px; --largeur-texte:68ch; /* longueur de ligne confortable */ /* --- Ombres, chaudes plutot que grises --- */ --ombre-s:0 2px 10px -4px color-mix(in srgb,var(--encre) 18%,transparent); --ombre-m:0 14px 34px -18px color-mix(in srgb,var(--encre) 30%,transparent); --ombre-l:0 36px 70px -30px color-mix(in srgb,var(--encre) 42%,transparent); /* Carte du formulaire de contact, posee sur la section olive */ --ombre-carte:0 24px 48px -12px color-mix(in srgb,var(--encre) 45%,transparent),0 4px 12px color-mix(in srgb,var(--encre) 20%,transparent); --ombre-carte-mobile:0 14px 30px -10px color-mix(in srgb,var(--encre) 40%,transparent),0 3px 8px color-mix(in srgb,var(--encre) 18%,transparent); /* --- Mouvement --- */ --transition:.32s cubic-bezier(.22,.8,.2,1); --transition-lente:.6s cubic-bezier(.22,.8,.2,1); /* --- Cible tactile minimale (doigt) --- */ --cible:48px; } /* ========================================================================== 3. BASE ET RESET ========================================================================== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ font-family:var(--font-texte); font-size:var(--fs-base); line-height:var(--lh-texte); background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,picture,svg{display:block;max-width:100%;} img{height:auto;} a{color:inherit;text-decoration:none;} button,input,textarea,select{font:inherit;color:inherit;} h1,h2,h3,h4{ font-family:var(--font-titre); font-weight:var(--poids-titre); line-height:var(--lh-titre); letter-spacing:var(--ls-titre); } p{text-wrap:pretty;} h1,h2,h3{text-wrap:balance;} /* Reperage clavier : visible et coherent partout */ :focus-visible{ outline:3px solid var(--focus); outline-offset:3px; } /* ========================================================================== 4. UTILITAIRES ========================================================================== */ .wrap{width:100%;max-width:var(--largeur-max);margin-inline:auto;padding-inline:var(--sp-gouttiere);} /* .titre : applique la mise en forme des titres a n'importe quel element */ .titre{font-family:var(--font-titre);font-weight:var(--poids-titre);letter-spacing:var(--ls-titre);} /* .accent : met en valeur un mot dans un titre. Anciennement en italique ; en sans-serif, un gras colore est plus net et plus percutant qu'un simple penchage des lettres. */ .accent{color:var(--accent-titre);font-weight:800;} .center{text-align:center;} .txt-soft{color:var(--text-soft);} /* --- FONDS SOMBRES (olive et noir) --- Texte blanc, accents jaunes, liens blancs soulignes, separateurs blancs semi-transparents. Jamais de bordeaux sur l'olive. Sur le noir (barre du haut, pied de page) : texte blanc, accents et survols jaunes. */ .dark,.topbar,footer,.marquee-band,.presta-row:nth-child(odd){ color:var(--text-on-dark); --text:var(--text-on-dark);--text-soft:var(--text-soft-on-dark); --line:var(--line-on-dark);--line-strong:var(--line-strong-on-dark); --accent:var(--accent-on-dark);--accent-titre:var(--accent-on-dark); --accent-texte:var(--text-on-dark);--focus:var(--jaune); --btn-hover-bg:var(--blanc);--btn-hover-txt:var(--encre); --plein-bg:var(--jaune);--plein-txt:var(--encre); --fond-image:color-mix(in srgb,var(--blanc) 10%,transparent); } .dark,.marquee-band,.presta-row:nth-child(odd){background:var(--bg-dark);} /* Sur le noir, les petits textes restent en blanc pur. */ .topbar,footer{ background:var(--bg-bandeau); --text-soft:var(--text-on-dark); } .dark p a:not(.btn),.dark li a:not(.btn),.dark dd a{text-decoration:underline;text-underline-offset:3px;} /* --- Cartes claires posees dans une section sombre --- Elles gardent un fond ivoire : on y retablit les couleurs du clair. */ .encadre,.trust,.avis,.merci-suite a,.recherche input[type="search"]{ color:var(--encre); --text:var(--encre);--text-soft:color-mix(in srgb,var(--encre) 76%,transparent); --line:color-mix(in srgb,var(--encre) 14%,transparent); --line-strong:color-mix(in srgb,var(--encre) 28%,transparent); --accent:var(--bordeaux);--accent-titre:var(--bordeaux); --accent-texte:var(--bordeaux);--focus:var(--bordeaux); } /* Sur-titre : "— Prestations" */ .uppercase,.eyebrow-line{ text-transform:uppercase; letter-spacing:var(--ls-label); font-size:var(--fs-micro); font-weight:600; } .eyebrow-line{color:var(--accent-texte);margin-bottom:var(--sp-s);} /* Titres de section */ h1.big,h2.big{font-size:var(--fs-h1);font-weight:var(--poids-titre);} .hero h1{font-size:var(--fs-hero);font-weight:var(--poids-titre);} .lead-txt{color:var(--text-soft);max-width:56ch;margin-top:var(--sp-s);font-size:var(--fs-lead);} .narrow{max-width:52ch;margin:var(--sp-s) auto var(--sp-m);color:var(--text-soft);} .sub-title{font-size:var(--fs-h2);margin-bottom:var(--sp-m);} .sub-title::after{ content:"";display:block;width:58px;height:5px; background:var(--accent);margin-top:var(--sp-xs); } .sub-title.olive::after{background:var(--olive);} .sub-title.bordeaux::after{background:var(--bordeaux);} .rule{display:block;width:52px;height:1px;background:var(--accent);flex:none;} .grid{display:grid;gap:var(--sp-l);} /* Placement dans la grille de 12 : uniquement a partir de 900px. En dessous, aucune classe ne s'applique : une seule colonne. */ @media(min-width:900px){ .cols-12{grid-template-columns:repeat(12,1fr);} .col-1-4{grid-column:1 / span 4;} .col-1-5{grid-column:1 / span 5;} .col-1-6{grid-column:1 / span 6;} .col-5-12{grid-column:5 / span 8;} .col-7-12{grid-column:7 / span 6;} } /* Accueil, section « Savoir-faire » : la photo remplit toujours son cadre. Tablette en portrait (640-899px) : deux colonnes, titre + photo a gauche, texte et chiffres a droite (avant : photo seule a gauche et grand vide). */ .savoir-photo{aspect-ratio:4/5;overflow:hidden;margin-top:var(--sp-m);} .savoir-photo img{width:100%;height:100%;object-fit:cover;} @media(min-width:640px) and (max-width:899px){ .savoir{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-m);} .savoir h2.big{font-size:clamp(2rem,1rem + 3.2vw,2.7rem);} .savoir .col-7-12{align-self:center;} } /* Masque a l'ecran, lu par les lecteurs d'ecran */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ========================================================================== 5. COMPOSANTS ========================================================================== */ /* --- 5.1 Boutons ----------------------------------------------------------- Taille confortable au doigt (>= 48px) et contrastes verifies. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; min-height:var(--cible); padding:.95em 1.7em; font-family:var(--font-texte); font-size:var(--fs-petit); font-weight:600; letter-spacing:.02em; border:1.5px solid transparent; background:var(--btn-principal-bg); color:var(--btn-principal-txt); cursor:pointer; text-align:center; transition:background var(--transition),color var(--transition), transform var(--transition),box-shadow var(--transition); } .btn:hover{background:var(--btn-hover-bg);color:var(--btn-hover-txt);transform:translateY(-2px);box-shadow:var(--ombre-m);} .btn:active{transform:translateY(0);box-shadow:var(--ombre-s);} /* Bouton d'action principal ("Devis gratuit") : jaune, texte encre */ .btn.bord{background:var(--btn-principal-bg);color:var(--btn-principal-txt);} .btn.bord:hover{background:var(--btn-hover-bg);color:var(--btn-hover-txt);} .btn:focus-visible{outline-color:var(--focus);} /* Bouton secondaire : bordeaux plein sur fond clair... */ .btn.ghost{background:var(--btn-second-bg);color:var(--btn-second-txt);} .btn.ghost:hover{background:var(--olive);color:var(--blanc);} /* ... contour blanc sur fond olive ou sur photo */ .dark .btn.ghost,.btn.on-dark{background:transparent;color:var(--blanc);border-color:var(--blanc);} .dark .btn.ghost:hover,.btn.on-dark:hover{background:var(--blanc);color:var(--olive);border-color:var(--blanc);} /* Envoi du formulaire ("Envoyer ma demande") : jaune, texte encre */ .form .btn{background:var(--btn-principal-bg);color:var(--btn-principal-txt);} .form .btn:hover{background:var(--btn-hover-bg);color:var(--btn-hover-txt);} /* --- 5.2 En-tete ---------------------------------------------------------- */ /* Le bandeau est TOUJOURS opaque : au-dessus d'une photo de chantier, du texte fonce sans fond etait illisible. Un vrai bandeau garantit la lisibilite de la navigation sur toutes les pages. */ header{ position:fixed;top:0;left:0;right:0;z-index:100; background:var(--ivoire); box-shadow:0 1px 0 var(--line); transition:box-shadow var(--transition-lente); } header.scrolled{ background:color-mix(in srgb,var(--ivoire) 96%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line),var(--ombre-m); } .hdr-main{padding:var(--sp-s) 0;transition:padding var(--transition);} header.scrolled .hdr-main{padding:.7rem 0;} /* Barre de contact : fond noir (voir FONDS SOMBRES), texte blanc, survol des numeros en jaune. */ .topbar{ overflow:hidden;max-height:52px; transition:max-height var(--transition-lente),opacity var(--transition); } header.scrolled .topbar{max-height:0;opacity:0;} .topbar-in{ display:flex;align-items:center;justify-content:space-between; gap:var(--sp-s);min-height:52px; } .tb-note{ font-size:var(--fs-micro);letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--text-on-dark);font-weight:600; } .tb-phones{display:flex;gap:var(--sp-m);align-items:center;} .tb-phones a{ display:inline-flex;align-items:baseline;gap:.55em; font-size:clamp(.95rem,.9rem + .3vw,1.1rem); font-weight:700;letter-spacing:.02em; font-variant-numeric:tabular-nums; /* chiffres alignes, plus lisibles */ padding-block:.35rem; text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px; transition:color var(--transition),text-decoration-thickness var(--transition); } .tb-phones a:hover{color:var(--jaune);text-decoration-thickness:2px;} .tb-phones .lbl{ font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase; font-weight:500;color:var(--text-soft); } .nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s);} .logo{display:flex;align-items:center;gap:.8rem;} .logo .mark{ width:44px;height:44px;flex:none;position:relative;overflow:hidden; background:var(--olive);color:var(--blanc); display:flex;align-items:center;justify-content:center; transition:background var(--transition),color var(--transition); } /* Au survol : carre jaune, pinceau noir */ .logo:hover .mark{background:var(--jaune);color:var(--encre);} .mark-ico{ position:relative;z-index:1; width:23px;height:23px;fill:currentColor; transition:transform var(--transition); } .logo:hover .mark-ico{transform:rotate(-8deg) scale(1.06);} .logo .name{font-family:var(--font-titre);font-size:clamp(1rem,.9rem + .4vw,1.22rem);letter-spacing:-.01em;} nav.links{display:flex;gap:clamp(1.4rem,2.6vw,2.4rem);align-items:center;} nav.links a{ position:relative;padding:.45rem 0;font-size:var(--fs-petit);font-weight:500; transition:color var(--transition); } nav.links a::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:0; background:var(--accent);transition:width var(--transition); } nav.links a:hover{color:var(--bordeaux);} nav.links a:hover::after,nav.links a.active::after{width:100%;} nav.links a.active{color:var(--bordeaux);} .burger{display:none;background:none;border:none;cursor:pointer;padding:.6rem;} .burger span{display:block;width:26px;height:2px;background:var(--text);margin:6px 0;transition:var(--transition);} .mobile-menu{display:none;} /* --- 5.3 Barre fixe mobile (appeler / devis) ------------------------------- */ .mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:200;box-shadow:0 -8px 26px -10px color-mix(in srgb,var(--encre) 45%,transparent);} .mobile-bar a{ display:flex;align-items:center;justify-content:center;gap:.55em; min-height:60px;padding:.9rem .6rem; font-size:clamp(.98rem,.92rem + .3vw,1.08rem);font-weight:700;letter-spacing:.02em; transition:filter var(--transition); } .mobile-bar a:active{filter:brightness(.9);} .mb-call{background:var(--olive);color:var(--blanc);} .mb-quote{background:var(--btn-principal-bg);color:var(--btn-principal-txt);} .mobile-bar a:focus-visible{outline-offset:-5px;} .mb-call:focus-visible{outline-color:var(--jaune);} .mb-quote:focus-visible{outline-color:var(--encre);} /* --- 5.4 Pied de page ------------------------------------------------------ */ /* Fond noir : voir FONDS SOMBRES (section 4). */ footer{padding:3rem 0 var(--sp-m);} .foot{display:grid;gap:var(--sp-l);grid-template-columns:1fr;align-items:start;} @media(min-width:860px){.foot{grid-template-columns:1.2fr 1fr;}} /* Bloc NAP (Nom / Adresse / Téléphone) */ .nap{font-style:normal;display:flex;flex-direction:column;gap:.35rem;} .nap .fn{font-family:var(--font-titre);font-size:var(--fs-h3);} .nap .foot-sub{ font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase; color:var(--text-soft);margin-bottom:.5rem; } .nap-adr{font-size:var(--fs-petit);} .nap-tel{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.35rem;} .nap-tel a{ text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px; font-weight:700;font-variant-numeric:tabular-nums; font-size:clamp(1rem,.95rem + .25vw,1.12rem); transition:color var(--transition),text-decoration-thickness var(--transition); } .nap-tel a:hover{color:var(--jaune);text-decoration-thickness:2px;} .nap-tel .lbl{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);font-weight:500;margin-right:.4em;} .nap-mail{font-size:var(--fs-petit);color:var(--accent-texte);text-decoration:underline;text-underline-offset:3px;margin-top:.35rem;} .nap-mail:hover{color:var(--jaune);text-decoration-thickness:2px;} .foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:.55rem var(--sp-s);font-size:var(--fs-petit);} .foot-nav a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--transition),text-decoration-thickness var(--transition);} .foot-nav a:hover{color:var(--jaune);text-decoration-thickness:2px;} .foot-nav .rubrique{ grid-column:1 / -1;font-size:var(--fs-micro);letter-spacing:var(--ls-label); text-transform:uppercase;color:var(--text);font-weight:700;margin-bottom:.2rem; } .foot-bas{ margin-top:var(--sp-m);padding-top:var(--sp-s);border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between; font-size:var(--fs-micro);color:var(--text-soft); } /* ========================================================================== 6. SECTIONS ========================================================================== */ section.block{padding:var(--sp-section) 0;} /* Le haut des pages interieures doit degager l'en-tete fixe, qui mesure environ 141 px (barre telephones 52 + logo 44 + marges 45). D'ou le minimum de 9.5rem = 152 px. Ne pas descendre en dessous. */ section.block.page-top{padding-top:clamp(9.5rem,12vw,11rem);padding-bottom:var(--sp-m);} section.block.tight-top{padding-top:0;} /* --- 6.1 Hero -------------------------------------------------------------- */ .hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:flex-end;overflow:hidden;} .slides{position:absolute;inset:0;} .slide{ position:absolute;inset:0;opacity:0;background-size:cover;background-position:center; transition:opacity 1.5s ease; animation:kenburns 11s ease-in-out infinite alternate; } .slide.on{opacity:1;} .hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, color-mix(in srgb,var(--encre) 30%,transparent) 0%, color-mix(in srgb,var(--encre) 10%,transparent) 38%, color-mix(in srgb,var(--encre) 88%,transparent) 100%); } .hero-inner{position:relative;z-index:2;color:var(--blanc);--focus:var(--jaune);padding-bottom:clamp(3.5rem,7vw,5.5rem);width:100%;} .hero .eyebrow{display:flex;align-items:center;gap:.9rem;margin-bottom:var(--sp-s);color:var(--blanc);} .hero .eyebrow .bar{width:46px;height:2px;background:var(--jaune);flex:none;} .hero h1 .accent{color:var(--jaune);} .hero p.lead{ max-width:54ch;margin-top:var(--sp-s); font-size:var(--fs-lead);color:color-mix(in srgb,var(--blanc) 92%,transparent); } .hero .cta-row{margin-top:var(--sp-m);display:flex;gap:var(--sp-xs);flex-wrap:wrap;} .hero .dots{position:absolute;bottom:var(--sp-m);right:var(--sp-gouttiere);z-index:3;display:flex;gap:.6rem;} .hero .dots b{ width:34px;height:3px;background:color-mix(in srgb,var(--blanc) 38%,transparent);cursor:pointer; transition:background var(--transition),transform var(--transition); } .hero .dots b:hover{transform:scaleY(2);} .hero .dots b.on{background:var(--jaune);} /* --- 6.2 Bandeau defilant -------------------------------------------------- */ .marquee-band{padding:.95rem 0;overflow:hidden;} .marquee{display:flex;white-space:nowrap;animation:scrollX 52s linear infinite;} .marquee span{ font-size:var(--fs-micro);letter-spacing:var(--ls-label);text-transform:uppercase; padding:0 1.5rem;color:var(--text); } .marquee .sep{color:var(--line-strong);padding:0 .1rem;} /* --- 6.3 Chiffres cles ----------------------------------------------------- */ .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-s) var(--sp-m);margin-top:var(--sp-l);} .stat{border-top:1px solid var(--line);padding-top:var(--sp-xs);} .stat .num{ font-family:var(--font-titre);font-size:var(--fs-chiffre);line-height:1; color:var(--accent-titre);font-variant-numeric:tabular-nums; } .stat .lbl{ font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase; color:var(--text);margin-top:.55rem; } /* --- 6.4 Cartes prestations ------------------------------------------------ */ .svc-grid{display:grid;gap:var(--sp-s);grid-template-columns:1fr;} @media(min-width:680px){.svc-grid{grid-template-columns:1fr 1fr;}} @media(min-width:1040px){.svc-grid{grid-template-columns:repeat(3,1fr);}} .svc{ position:relative;aspect-ratio:4/5;overflow:hidden; background-size:cover;background-position:center; transition:transform var(--transition-lente); } .svc::after{ content:"";position:absolute;inset:0;transition:background var(--transition-lente); background:linear-gradient(180deg,color-mix(in srgb,var(--encre) 0%,transparent) 28%,color-mix(in srgb,var(--encre) 92%,transparent) 100%); } .svc:hover{transform:translateY(-5px);} .svc:hover::after{background:linear-gradient(180deg,color-mix(in srgb,var(--encre) 18%,transparent) 0%,color-mix(in srgb,var(--olive) 92%,transparent) 100%);} .svc .inner{ position:absolute;inset:0;padding:var(--sp-s);z-index:2; display:flex;flex-direction:column;justify-content:space-between;color:var(--blanc); } .svc .idx{font-family:var(--font-titre);font-weight:700;align-self:flex-end;opacity:.7;letter-spacing:.06em;} .svc h3{font-size:var(--fs-h3);} .svc p{font-size:var(--fs-petit);opacity:0;max-height:0;overflow:hidden;transition:var(--transition-lente);color:color-mix(in srgb,var(--blanc) 94%,transparent);} .svc:hover p,.svc:focus-within p{opacity:1;max-height:10rem;margin-top:.5rem;} .svc.cta-card{background:var(--btn-principal-bg);display:flex;align-items:flex-end;} .svc.cta-card .inner{color:var(--btn-principal-txt);} .svc.cta-card::after{display:none;} .svc.cta-card:hover{background:var(--bordeaux);} .svc.cta-card:hover .inner{color:var(--blanc);} /* Le titre "Parlons-en." porte la classe .accent, jaune dans une section olive : sur la carte jaune, tout le texte passe en encre. */ .svc.cta-card .accent{color:var(--encre);} .svc.cta-card:hover .accent{color:var(--blanc);} /* --- 6.5 Comparateur avant / apres ---------------------------------------- Plus grand, plus fluide, et pilotable au doigt comme au clavier. touch-action:none = le doigt fait glisser le curseur au lieu de faire defiler la page. */ .ba{ position:relative;width:100%;aspect-ratio:3/2;overflow:hidden; background:var(--fond-image); box-shadow:var(--ombre-l); cursor:ew-resize;touch-action:none; user-select:none;-webkit-user-select:none; } .ba img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; pointer-events:none;-webkit-user-drag:none; } .ba-after{z-index:1;} .ba-before{z-index:2;will-change:clip-path;transition:clip-path var(--transition);} .ba .handle{ position:absolute;top:0;bottom:0;width:3px;left:50%;z-index:3; background:var(--blanc);box-shadow:0 0 0 1px color-mix(in srgb,var(--encre) 28%,transparent); transition:left var(--transition); } .ba .knob{ position:absolute;top:50%;left:50%;z-index:5; width:66px;height:66px;border-radius:50%; transform:translate(-50%,-50%); background:var(--ivoire);color:var(--bordeaux); display:flex;align-items:center;justify-content:center;gap:.15em; font-size:.95rem;letter-spacing:.06em; box-shadow:var(--ombre-m),0 0 0 1px color-mix(in srgb,var(--encre) 10%,transparent); transition:left var(--transition),transform var(--transition),box-shadow var(--transition); } .ba:hover .knob{transform:translate(-50%,-50%) scale(1.06);} /* Pendant le glissement : reponse immediate, sans lissage */ .ba.dragging .ba-before,.ba.dragging .handle,.ba.dragging .knob{transition:none;} .ba.dragging{cursor:grabbing;} .ba.dragging .knob{transform:translate(-50%,-50%) scale(.96);box-shadow:var(--ombre-l);} .ba:focus-visible{outline:3px solid var(--focus);outline-offset:4px;} .ba .tag{ position:absolute;top:var(--sp-xs);z-index:4; padding:.45em 1em;font-size:var(--fs-micro); letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:600; } .ba .tag.b{left:var(--sp-xs);background:color-mix(in srgb,var(--encre) 80%,transparent);color:var(--blanc);} .ba .tag.a{right:var(--sp-xs);background:var(--bordeaux);color:var(--blanc);} .ba-aide{margin-top:var(--sp-xs);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);} /* Liste des chantiers a comparer */ .proj-list{display:flex;flex-direction:column;} .proj-list button{ background:none;border:none;text-align:left;cursor:pointer; padding:var(--sp-xs) 0;border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-xs); min-height:var(--cible);color:var(--text); transition:color var(--transition),padding-left var(--transition); } .proj-list button:hover,.proj-list button.active{color:var(--accent-titre);} .proj-list button:hover{padding-left:.4rem;} .proj-list button .fleche{transition:transform var(--transition);} .proj-list button:hover .fleche,.proj-list button.active .fleche{transform:translateX(5px);} .proj-list .t{font-family:var(--font-titre);font-size:var(--fs-h3);} .proj-list .ty{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft);margin-top:.2rem;} /* --- 6.6 Galeries ---------------------------------------------------------- */ .gal-track{display:flex;gap:var(--sp-xs);overflow-x:auto;padding-bottom:var(--sp-xs);scroll-snap-type:x mandatory;scrollbar-width:thin;} .gal-track::-webkit-scrollbar{height:6px;} .gal-track::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;} .gal-track .card{flex:0 0 auto;width:min(76vw,380px);aspect-ratio:3/4;scroll-snap-align:start;overflow:hidden;} .gal-track .card img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-lente);} .gal-track .card:hover img{transform:scale(1.06);} .photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-xs);} @media(min-width:760px){.photo-grid{grid-template-columns:repeat(3,1fr);}} @media(min-width:1100px){.photo-grid{grid-template-columns:repeat(4,1fr);}} .photo-grid .ph{aspect-ratio:1;overflow:hidden;} .photo-grid .ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-lente),filter var(--transition);} .photo-grid .ph:hover img{transform:scale(1.08);filter:saturate(1.08);} /* --- 6.7 Zone d'intervention et carte -------------------------------------- */ .zone-band{background:var(--bg);} .chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:var(--sp-m);} .chips span{ padding:.6em 1.1em;border:1px solid var(--line-strong);font-size:var(--fs-petit); transition:background var(--transition),color var(--transition),border-color var(--transition); } .chips span:hover{background:var(--olive);color:var(--blanc);border-color:var(--olive);} .map-box{position:relative;max-width:580px;margin-inline:auto;} .hdf-map{width:100%;height:auto;overflow:visible;} .hdf-map .sea{fill:color-mix(in srgb,var(--encre) 7%,var(--ivoire));} .hdf-map .region{fill:var(--ivoire);stroke:var(--accent);stroke-width:1.7;stroke-linejoin:round;} .hdf-map .pt{fill:var(--encre);} .hdf-map .ptctx{fill:var(--text-soft);} .hdf-map .lbl{font-family:var(--font-texte);font-size:11.5px;font-weight:600;fill:var(--text);} .hdf-map .lblctx{font-family:var(--font-texte);font-size:10.5px;fill:var(--text-soft);} .hdf-map .geo{font-family:var(--font-texte);font-size:10px;letter-spacing:.22em;fill:var(--text-soft);opacity:.7;} .hdf-map .hq-dot{fill:var(--bordeaux);stroke:var(--ivoire);stroke-width:2;} .hdf-map .hq-lbl{font-family:var(--font-titre);font-size:16px;fill:var(--accent-texte);font-weight:600;} .hdf-map .hq-sub{font-family:var(--font-texte);font-size:9px;letter-spacing:.16em;text-transform:uppercase;fill:var(--text-soft);} .hdf-map .pulse-ring{fill:var(--bordeaux);transform-box:fill-box;transform-origin:center;animation:mapPulse 2.4s ease-out infinite;} .hdf-map .glow-a{stop-color:var(--bordeaux);stop-opacity:.20;} .hdf-map .glow-b{stop-color:var(--bordeaux);stop-opacity:0;} /* --- 6.8 Citation / devise -------------------------------------------------- */ .quote{ font-family:var(--font-titre);font-weight:600; font-size:clamp(1.5rem,1rem + 2.4vw,2.9rem); line-height:1.25;letter-spacing:-.02em;max-width:22ch; } .quote{max-width:26ch;} .quote .accent{color:var(--accent-titre);} /* --- 6.9 Prestations en lignes alternees ------------------------------------ */ /* Chaque prestation a son fond ET sa couleur d'accent, pour qu'on distingue nettement "Murs interieurs" de "Plafonds", etc. */ .presta-row{ display:grid;gap:0; --presta-accent:var(--bordeaux); background:var(--ivoire); } /* Lignes impaires sur olive (voir FONDS SOMBRES), paires sur ivoire */ .presta-row:nth-child(odd){--presta-accent:var(--jaune);} .presta-row:nth-child(even){--presta-accent:var(--bordeaux);} @media(min-width:900px){.presta-row{grid-template-columns:1fr 1fr;}} .presta-row .txt{ padding:var(--sp-m) clamp(1.4rem,3.5vw,3rem); display:flex;flex-direction:column;justify-content:center; border-top:5px solid var(--presta-accent); } /* Vraie balise (et non un fond CSS) : le texte alternatif devient indexable par Google et lisible par les lecteurs d'ecran. */ .presta-row .img{ position:relative;min-height:clamp(260px,34vw,420px); overflow:hidden;cursor:zoom-in;background:var(--fond-image); } .presta-row .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .presta-intro{color:var(--text-soft);max-width:54ch;} .presta-row:nth-child(even) .img{order:-1;} .presta-row h2{font-size:var(--fs-h2);margin-bottom:var(--sp-2xs);} .presta-row h2::after{ content:"";display:block;width:58px;height:5px; background:var(--presta-accent);margin-top:var(--sp-xs); } .presta-row ul{list-style:none;margin-top:var(--sp-s);padding:0;} .presta-row li{ position:relative;padding:.65rem 0 .65rem 1.5rem; border-bottom:1px solid var(--line);font-size:var(--fs-petit); } .presta-row li::before{ content:"—";position:absolute;left:0;top:.65rem; color:var(--presta-accent);font-weight:700; } /* Liens de maillage interne sous chaque prestation */ .presta-liens{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:var(--sp-s);} .presta-liens a{ font-size:var(--fs-petit);font-weight:600;color:var(--accent-texte); border-bottom:1px solid currentColor;padding-bottom:2px; transition:border-color var(--transition),color var(--transition); } .presta-liens a:hover{border-bottom-color:var(--presta-accent);color:var(--text);} /* --- 6.10 Etapes du devis --------------------------------------------------- */ .steps{display:grid;gap:0 var(--sp-m);grid-template-columns:1fr;margin-top:var(--sp-l);} @media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr);}} .step{border-top:2px solid var(--line);padding:var(--sp-s) 0;} .step .no{font-family:var(--font-titre);font-weight:800;font-size:2.1rem;line-height:1;color:var(--accent-on-dark);margin-bottom:var(--sp-xs);letter-spacing:-.02em;} .step h3{font-size:var(--fs-h3);margin-bottom:.5rem;} .step p{font-size:var(--fs-petit);color:var(--text-soft);} .devis-note{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--sp-m);} .devis-note span{border:1px solid var(--line);padding:.65em 1.1em;font-size:var(--fs-petit);} /* --- 6.11 Finitions --------------------------------------------------------- */ .fin-grid{display:grid;gap:var(--sp-s);grid-template-columns:1fr;margin-top:var(--sp-m);} @media(min-width:620px){.fin-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1040px){.fin-grid{grid-template-columns:repeat(4,1fr);}} .fin{ border:1px solid var(--line);padding:var(--sp-m) var(--sp-s);background:var(--ivoire); transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition); } .fin:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:var(--ombre-m);} .fin .swatch{height:8px;width:52px;margin-bottom:var(--sp-s);background:var(--olive);} .fin:nth-child(1) .swatch{background:var(--olive);} .fin:nth-child(2) .swatch{background:var(--bordeaux);} .fin:nth-child(3) .swatch{background:var(--bordeaux);} .fin:nth-child(4) .swatch{background:var(--jaune);box-shadow:0 3px 10px -2px color-mix(in srgb,var(--jaune) 70%,transparent);} .fin h3{font-size:var(--fs-h3);margin-bottom:.5rem;} .fin p{font-size:var(--fs-petit);color:var(--text-soft);} /* Sur fond olive : pas de carte pleine, seulement un filet — meme parti pris que les etapes du devis et les chantiers d'exception. Quatre blocs ivoire sur de l'olive seraient trop durs a l'oeil. */ .dark .fin{background:transparent;border-color:var(--line-on-dark);} .dark .fin:hover{border-color:var(--jaune);background:color-mix(in srgb,var(--blanc) 5%,transparent);} .dark .fin p{color:var(--text-soft-on-dark);} /* L'olive se confondrait avec le fond : pastille blanche. */ .dark .fin:nth-child(1) .swatch{background:var(--blanc);} /* Jamais de bordeaux sur olive : les 2e et 3e pastilles passent en blanc voile. */ .dark .fin:nth-child(2) .swatch{background:color-mix(in srgb,var(--blanc) 75%,transparent);} .dark .fin:nth-child(3) .swatch{background:color-mix(in srgb,var(--blanc) 50%,transparent);} /* --- 6.12 Reassurance ------------------------------------------------------- */ .trust-grid{display:grid;gap:var(--sp-s);grid-template-columns:1fr;margin-top:var(--sp-m);} @media(min-width:560px){.trust-grid{grid-template-columns:1fr 1fr;}} /* Nombre impair de cartes sur 2 colonnes : la derniere prend toute la largeur. */ @media(min-width:560px) and (max-width:1039px){.trust-grid > .trust:last-child:nth-child(odd){grid-column:1 / -1;}} @media(min-width:1040px){.trust-grid{grid-template-columns:repeat(3,1fr);}} .trust{ display:flex;gap:var(--sp-s);align-items:flex-start; padding:var(--sp-m) var(--sp-s);background:var(--ivoire);border:1px solid var(--line); transition:border-color var(--transition),transform var(--transition); } .trust:hover{border-color:var(--accent);transform:translateY(-3px);} /* Carre plein bordeaux, icone blanche, lisere blanc en retrait de 4px */ .trust .ic{ width:46px;height:46px;flex:none;background:var(--bordeaux); outline:1px solid var(--blanc);outline-offset:-4px; color:var(--blanc);display:flex;align-items:center;justify-content:center;font-size:1.2rem; } .trust h3{font-size:var(--fs-h3);margin-bottom:.3rem;} .trust p{font-size:var(--fs-petit);color:var(--text-soft);} /* --- 6.13 Chantiers d'exception --------------------------------------------- */ .exc{display:grid;gap:var(--sp-l);grid-template-columns:1fr;align-items:center;} @media(min-width:960px){.exc{grid-template-columns:1fr 1fr;}} .exc-list{margin-top:var(--sp-m);} .exc-item{border-top:1px solid var(--line);padding:var(--sp-s) 0;} .exc-item .loc{font-family:var(--font-titre);font-size:var(--fs-h3);} .exc-item .reg{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-texte);margin-top:.3rem;} .exc-item p{font-size:var(--fs-petit);color:var(--text-soft);margin-top:.55rem;} .exc-photo{overflow:hidden;box-shadow:var(--ombre-l);} .exc-photo img{width:100%;height:100%;object-fit:cover;} /* --- 6.14 Avis clients ------------------------------------------------------ */ .avis-grid{display:grid;gap:var(--sp-s);grid-template-columns:1fr;margin-top:var(--sp-m);} @media(min-width:760px){.avis-grid{grid-template-columns:repeat(3,1fr);}} .avis{border:1px solid var(--line);padding:var(--sp-m) var(--sp-s);display:flex;flex-direction:column;gap:var(--sp-xs);background:var(--ivoire);} .avis .note{color:var(--accent-texte);letter-spacing:3px;} .avis blockquote{font-size:var(--fs-petit);line-height:1.65;} .avis .who{margin-top:auto;padding-top:var(--sp-xs);border-top:1px solid var(--line);} .avis .who .n{font-weight:600;font-size:var(--fs-petit);} .avis .who .d{font-size:var(--fs-micro);color:var(--text-soft);margin-top:.2rem;} /* --- 6.15 Contact ----------------------------------------------------------- */ .contact-info a,.contact-info div.row{ display:flex;align-items:center;gap:var(--sp-s);margin-bottom:var(--sp-xs); min-height:var(--cible);transition:color var(--transition); } .contact-info a:hover{color:var(--accent-texte);} /* Carres pleins jaunes, icones noires : ils ressortent sur l'olive */ .contact-info .ic{ width:52px;height:52px;flex:none;background:var(--jaune);color:var(--encre); display:flex;align-items:center;justify-content:center;font-size:1.2rem; transition:box-shadow var(--transition); } .contact-info a:hover .ic{box-shadow:0 0 0 2px var(--blanc);} .contact-info a .v{text-decoration:underline;text-underline-offset:3px;} .contact-info .k{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft);} .contact-info .v{font-family:var(--font-titre);font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);font-variant-numeric:tabular-nums;} /* Le bloc formulaire est une carte posee sur la section olive : voile blanc legerement plus clair, ombre portee marquee. */ .form{ border:1px solid color-mix(in srgb,var(--blanc) 30%,transparent);background:color-mix(in srgb,var(--blanc) 6%,transparent); padding:var(--sp-m);box-shadow:var(--ombre-carte); } .field{margin-bottom:var(--sp-s);} .field label{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--text);display:block;margin-bottom:.5rem;} .field input,.field textarea{ width:100%;background:transparent;border:none;border-bottom:1px solid var(--line); color:var(--text);padding:.6rem 0;font-size:var(--fs-base);min-height:var(--cible); transition:border-color var(--transition); } .field textarea{min-height:7rem;resize:vertical;} .field input:focus,.field textarea:focus{outline:2px solid var(--jaune);outline-offset:2px;border-color:var(--jaune);} .tags{display:flex;flex-wrap:wrap;gap:.55rem;} .tags button{ padding:.6em 1.1em;font-size:var(--fs-petit);border:1px solid var(--text); background:none;color:var(--text);cursor:pointer;min-height:var(--cible); transition:background var(--transition),border-color var(--transition); } .tags button:hover{background:color-mix(in srgb,var(--blanc) 12%,transparent);} .tags button.sel{background:var(--plein-bg);border-color:var(--plein-bg);color:var(--plein-txt);} /* --- 6.16 Bloc editorial deux colonnes ------------------------------------- Titre a gauche, texte a droite. Exploite toute la largeur de la page tout en gardant des lignes lisibles : une ligne qui court sur 1200 px fatigue l'oeil, qui perd le debut de la ligne suivante. On plafonne donc le texte a 80 caracteres, pas la section entiere. */ .duo{display:grid;gap:var(--sp-s) var(--sp-l);grid-template-columns:1fr;align-items:start;} @media(min-width:960px){.duo{grid-template-columns:minmax(0,26rem) minmax(0,1fr);}} .duo-txt > p{color:var(--text-soft);max-width:80ch;margin-bottom:.9rem;} .duo-txt > p:last-child{margin-bottom:0;} /* --- 6.17 Page "prix" : facteurs et questions frequentes ------------------- */ .facteurs{margin-top:var(--sp-m);} .facteur{ display:grid;gap:var(--sp-xs) var(--sp-l);grid-template-columns:1fr; padding:var(--sp-m) 0;border-top:1px solid var(--line);align-items:start; } @media(min-width:960px){.facteur{grid-template-columns:minmax(0,24rem) minmax(0,1fr);}} .facteur-tete{display:flex;gap:var(--sp-s);align-items:baseline;} .facteur .no{ font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:-.04em; color:var(--accent-titre);flex:none; } .facteurs .facteur:nth-child(3n+2) .no{color:var(--accent-titre);} .facteurs .facteur:nth-child(3n) .no{color:var(--accent-titre);} .facteur h2{font-size:var(--fs-h3);} .facteur p{color:var(--text-soft);margin-bottom:.85rem;max-width:80ch;} .facteur p:last-child{margin-bottom:0;} .encadre{ border-left:4px solid var(--accent);background:var(--ivoire); padding:var(--sp-m) var(--sp-s);margin:var(--sp-m) 0; } .encadre .t{font-weight:700;margin-bottom:.5rem;} .encadre p{margin-bottom:.6rem;color:var(--text-soft);} .encadre p:last-child{margin-bottom:0;} .faq{margin-top:var(--sp-l);} .faq .reponse{max-width:80ch;} .faq details{border-bottom:1px solid var(--line);} .faq summary{ cursor:pointer;list-style:none;position:relative; padding:var(--sp-s) 3rem var(--sp-s) 0;min-height:var(--cible); font-family:var(--font-titre);font-weight:700;font-size:var(--fs-h3); letter-spacing:var(--ls-titre);transition:color var(--transition); } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{ content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%); font-size:1.7rem;font-weight:400;color:var(--accent-texte); } .faq details[open] summary::after{content:"–";} .faq summary:hover{color:var(--accent-titre);} .faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;} .faq .reponse{padding-bottom:var(--sp-m);color:var(--text-soft);} .faq .reponse p{margin-bottom:.7rem;} .faq .reponse p:last-child{margin-bottom:0;} /* --- 6.17 Pages locales : sequence de chantier et reperes ------------------ */ .sequence{display:grid;gap:var(--sp-s);grid-template-columns:1fr;margin-top:var(--sp-m);} /* 190px : trois photos tiennent sur une ligne des 720px (avant : 2 + 1 seule). */ @media(min-width:720px){.sequence{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}} .sequence figure{margin:0;} .sequence .cadre{ position:relative;aspect-ratio:4/3;overflow:hidden; background:var(--fond-image);cursor:zoom-in; } .sequence .cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .sequence figcaption{ margin-top:.7rem;font-size:var(--fs-micro);letter-spacing:.18em; text-transform:uppercase;color:var(--accent-texte);font-weight:700; } .sequence .desc{font-size:var(--fs-petit);color:var(--text-soft);margin-top:.35rem;} /* Reperes chiffres : distance, trajet, type de bati */ .repere{ display:grid;gap:var(--sp-s) var(--sp-m); grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin-top:var(--sp-m);border-top:1px solid var(--line);padding-top:var(--sp-m); } .dark .repere{border-top-color:var(--line-on-dark);} .repere .k{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);} .dark .repere .k{color:var(--text-soft-on-dark);} .repere .v{font-family:var(--font-titre);font-weight:800;font-size:var(--fs-h3);margin-top:.25rem;letter-spacing:var(--ls-titre);} /* Liens vers les autres communes */ .communes{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--sp-s);} .communes a{ padding:.6em 1.1em;border:1px solid var(--line-strong);font-size:var(--fs-petit);font-weight:600; transition:background var(--transition),color var(--transition),border-color var(--transition); } .communes a:hover{background:var(--plein-bg);color:var(--plein-txt);border-color:var(--plein-bg);} /* --- 6.18 Visionneuse plein ecran ------------------------------------------ Les photos du site sont recadrees pour la mise en page. Un clic les affiche entieres (object-fit:contain), sans aucun rognage. Le comparateur avant/apres en est volontairement exclu : le clic y sert deja a deplacer le curseur. */ .zoomable{cursor:zoom-in;} .zoomable:focus-visible{outline:3px solid var(--focus);outline-offset:3px;} .lightbox{ position:fixed;inset:0;z-index:1000; background:color-mix(in srgb,var(--encre) 95%,transparent);--focus:var(--jaune); display:flex;align-items:center;justify-content:center; padding:clamp(1rem,4vw,3rem); } .lightbox[hidden]{display:none;} .lb-figure{ display:flex;flex-direction:column;align-items:center;gap:var(--sp-s); max-width:100%;max-height:100%; } .lb-img{ max-width:100%; max-height:calc(100svh - 11rem); width:auto;height:auto; object-fit:contain; /* photo entiere, jamais coupee */ box-shadow:var(--ombre-l); background:var(--encre); } .lb-legende{ color:color-mix(in srgb,var(--blanc) 85%,transparent);font-size:var(--fs-petit); text-align:center;max-width:62ch; } .lb-compteur{ display:block;margin-top:.35rem; font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase; color:color-mix(in srgb,var(--blanc) 85%,transparent);font-variant-numeric:tabular-nums; } .lb-fermer,.lb-nav{ position:absolute; width:54px;height:54px; display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--blanc) 10%,transparent); border:1px solid color-mix(in srgb,var(--blanc) 30%,transparent); color:var(--blanc);font-size:1.6rem;line-height:1;cursor:pointer; transition:background var(--transition),border-color var(--transition),transform var(--transition); } .lb-fermer:hover,.lb-nav:hover{background:var(--bordeaux);border-color:var(--bordeaux);} .lb-nav:hover{transform:translateY(-50%) scale(1.08);} .lb-fermer{top:clamp(.75rem,3vw,2rem);right:clamp(.75rem,3vw,2rem);font-size:1.3rem;} .lb-fermer:hover{transform:scale(1.08);} .lb-nav{top:50%;transform:translateY(-50%);} .lb-prec{left:clamp(.5rem,2.5vw,2rem);} .lb-suiv{right:clamp(.5rem,2.5vw,2rem);} @media(max-width:760px){ .lb-nav{top:auto;bottom:1rem;transform:none;width:58px;height:58px;} .lb-nav:hover{transform:none;} .lb-img{max-height:calc(100svh - 14rem);} } /* ========================================================================== 7. PAGES LEGALES ========================================================================== */ .page-head{padding:clamp(9.5rem,12vw,11rem) 0 var(--sp-l);border-bottom:1px solid var(--line);} .page-head p.lead{color:var(--text-soft);max-width:var(--largeur-texte);margin-top:var(--sp-s);font-size:var(--fs-lead);} .legal{padding:var(--sp-l) 0 var(--sp-xl);max-width:var(--largeur-texte);} .legal section{margin-bottom:var(--sp-m);} .legal h2{font-size:var(--fs-h3);margin-bottom:.5rem;display:flex;gap:.8rem;align-items:baseline;} .legal h2 .n{font-family:var(--font-texte);font-size:var(--fs-micro);color:var(--accent-texte);letter-spacing:.2em;font-weight:700;flex:none;} .legal h3{font-size:var(--fs-base);margin:var(--sp-s) 0 .35rem;} .legal p{margin-bottom:.85rem;} .legal p.small{font-size:var(--fs-petit);color:var(--text-soft);} /* ATTENTION — ne jamais remettre display:flex sur un
  • qui contient du texte courant. En flex, chaque fragment de texte devient un element distinct et le "gap" s'insere AUTOUR de chaque , ce qui cree un espace parasite avant et apres chaque mot en gras. On positionne donc le tiret en absolu, sans toucher au flux du texte. */ .legal ul,.liste{list-style:none;margin:.75rem 0 var(--sp-s);padding:0;} .legal li,.liste li{ position:relative; padding:.6rem 0 .6rem 1.5rem; border-bottom:1px solid var(--line); } .legal li::before,.liste li::before{ content:"—";position:absolute;left:0;top:.6rem;color:var(--accent); } .legal a{color:var(--accent-texte);text-decoration:underline;text-underline-offset:3px;transition:color var(--transition);} .legal a:hover{color:var(--text);text-decoration-thickness:2px;} .legal strong{font-weight:600;} .fiche{border-top:1px solid var(--line);margin-top:var(--sp-s);} .fiche div{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.85rem 0;border-bottom:1px solid var(--line);} @media(min-width:640px){.fiche div{grid-template-columns:240px 1fr;gap:var(--sp-s);align-items:baseline;}} .fiche dt{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--text-soft);} .fiche dd{font-size:var(--fs-base);} .todo{border:1px solid var(--line);border-left:3px solid var(--accent);padding:var(--sp-s) var(--sp-m);margin:var(--sp-s) 0;} .todo .t{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-texte);font-weight:700;margin-bottom:.6rem;} .todo ul{margin:0;} .todo li{border-bottom:1px dashed var(--line);} .todo li:last-child{border-bottom:none;} /* ========================================================================== 8. ANIMATIONS ET ACCESSIBILITE ========================================================================== */ @keyframes kenburns{from{transform:scale(1.04);}to{transform:scale(1.14);}} @keyframes scrollX{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes mapPulse{0%{transform:scale(.5);opacity:.5;}70%,100%{transform:scale(2.7);opacity:0;}} @keyframes revealIn{to{opacity:1;transform:none;}} /* Apparition au defilement, EN CSS PUR (animation-timeline). Repli : si le navigateur ne connait pas animation-timeline (Firefox aujourd'hui), la regle ci-dessous ne s'applique pas et le contenu reste simplement visible. Rien n'est jamais masque par defaut. */ .reveal{opacity:1;} @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .reveal{ opacity:0;transform:translateY(32px); animation:revealIn linear both; animation-timeline:view(); animation-range:entry 4% cover 30%; } } } /* Respect du reglage systeme "reduire les animations" : plus aucun mouvement, tout reste lisible et utilisable. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } html{scroll-behavior:auto;} .reveal{opacity:1 !important;transform:none !important;} .slide{animation:none;} .marquee{animation:none;} .hdf-map .pulse-ring{animation:none;opacity:.28;} .btn:hover,.svc:hover,.fin:hover,.trust:hover{transform:none;} } /* ========================================================================== 9. RESPONSIVE ========================================================================== */ /* 1000px et non 880 : avec 5 entrees de menu, la barre devenait trop serree entre le logo et le bouton devis. */ @media(max-width:999px){ nav.links,header .btn.desktop{display:none;} .burger{display:block;} .mobile-menu{ display:none;flex-direction:column;gap:var(--sp-s); padding:var(--sp-m) var(--sp-gouttiere); background:var(--ivoire);border-top:1px solid var(--line); font-size:var(--fs-lead); } .mobile-menu.open{display:flex;} .mobile-menu a{min-height:var(--cible);display:flex;align-items:center;} .mobile-bar{display:grid;grid-template-columns:1fr 1fr;} body{padding-bottom:60px;} .topbar,.topbar-in{max-height:48px;min-height:48px;} .tb-note{display:none;} .topbar-in{justify-content:center;gap:var(--sp-m);} .tb-phones{gap:var(--sp-m);} .tb-phones .lbl{display:none;} /* CORRECTIF : l'en-tete mobile mesure environ 137 px et l'ancienne valeur retombait a 128 px sur les petits ecrans — le titre passait sous la barre de navigation. 9.75rem = 156 px, avec marge. */ .page-head,section.block.page-top{padding-top:9.75rem;} .presta-row:nth-child(even) .img{order:0;} .hero .dots{bottom:var(--sp-s);} } @media(max-width:700px){ .ba{aspect-ratio:4/3;} .ba .knob{width:58px;height:58px;font-size:.85rem;} .stat-grid{gap:var(--sp-s);} .form{box-shadow:var(--ombre-carte-mobile);} footer{padding-top:2rem;} } /* Impression : on retire le superflu */ @media print{ header,.mobile-bar,.marquee-band,.hero .dots{display:none;} body{background:var(--blanc);color:var(--encre);padding-bottom:0;} .dark,footer,.topbar,.marquee-band,.presta-row{background:var(--blanc);color:var(--encre);--text:var(--encre);--accent-on-dark:var(--encre);} } /* ========================================================================== 10. ADAPTATIONS WORDPRESS WordPress genere les menus sous forme de listes