/* ========================================================================== K-ProBat — feuille de styles globale. La page d'accueil est une TRANSPOSITION FIDÈLE de la maquette Claude Design : sa mise en forme vit dans les styles en ligne du HTML (repris au caractère près depuis la maquette). On ne la duplique donc PAS ici. Ce fichier ne contient que ce qui ne peut pas être en ligne : 1. les styles globaux de la maquette (reset, sélection, ascenseur, marquee) 2. les variables de thème que le HTML référence en var(--…) 3. les bascules responsive (860 px) et tactiles 4. les styles des deux pages légales, qui ne viennent pas de la maquette Les règles :hover / :focus de la maquette sont dans hover.css, généré par tools/transpose-maquette.mjs. Voir SPECS-TECHNIQUES.md. ========================================================================== */ /* ---- 1. globaux, repris tels quels de la maquette ------------------------ */ html,body{margin:0;padding:0;background:#EAE3D4} *{box-sizing:border-box} ::selection{background:#D93916;color:#EAE3D4} a{color:#221E19}a:hover{color:#D93916} input::placeholder,textarea::placeholder{color:rgba(34,30,25,.4)} ::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#EAE3D4}::-webkit-scrollbar-thumb{background:#c9c0ad}::-webkit-scrollbar-thumb:hover{background:#D93916} @keyframes kmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---- 2. variables de thème ---------------------------------------------- La maquette les posait en JS sur ; ici elles sont statiques. --gs (niveau de gris) et --dim (luminosité) pilotent la mosaïque d'accueil. */ :root{ --acc:#D93916; /* accent rouge */ --ink:#221E19; /* encre */ --cream:#EAE3D4; /* fond crème */ --veil:1; /* opacité du voile sur la mosaïque */ --dim:.5; /* luminosité des photos d'accueil */ --gs:.5; /* désaturation des photos d'accueil */ --pop:1; } /* ---- boutons : équilibrés, jamais aléatoires ----------------------------- Règle commune : deux boutons côte à côte ont la MÊME largeur, et les groupes de boutons empilés occupent la même mesure (modèle du site MC Crépi). */ [data-hero-cta] > a{min-width:210px;text-align:center} [data-form-actions] > button{min-width:230px;text-align:center} [data-contact-actions] > a:hover{filter:brightness(.92)} [data-contact-actions] > a:nth-child(3):hover{background:#221E19;color:#EAE3D4} /* Repli : sans -webkit-text-stroke, color:transparent rendrait les lettres B, A, T du titre invisibles (SPECS-TECHNIQUES.md §1 et §5.1). */ @supports not (-webkit-text-stroke: 1px #fff){ [data-ltr][style*="text-stroke"]{color:#EAE3D4 !important} } /* ---- 3. responsive : bascule à 860 px (SPECS-TECHNIQUES.md §4) ----------- Le JS bascule sur innerWidth < 860 ; l'équivalent CSS est donc 859 px. Le regroupement des colonnes savoir-faire (4 → 2) est fait par le JS. */ @media (max-width:859px){ /* la nav centrale disparaît : le burger devient le seul accès */ [data-nav-hero]{display:none !important} /* réalisations : chaque figure en pleine largeur, sans décalage */ [data-rea]{grid-column:1 / -1 !important;margin-top:0 !important} /* pas de survol sur tactile : photos en couleur dès le chargement */ :root{--gs:0;--dim:.96} /* boutons empilés : tous à la même largeur, jamais décalés */ [data-hero-cta],[data-form-actions]{align-items:stretch} [data-hero-cta] > a,[data-form-actions] > button{flex:1 1 100%;text-align:center} [data-contact-actions]{max-width:none} /* le fil à plomb décoratif touchait la bulle WhatsApp : masqué sur mobile */ [data-plumb]{display:none} } /* Appareils sans survol : mêmes réglages photo, quelle que soit la largeur. */ @media (hover:none){ :root{--gs:0;--dim:.96} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} } /* ---- 4. pages légales (hors maquette) ------------------------------------ */ .legal-body{font-family:'League Spartan',sans-serif;color:var(--ink);background:var(--cream);min-height:100vh} .legal-header{padding:22px clamp(18px,4vw,48px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(34,30,25,.1)} .legal-brand{font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none} .legal-back{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--ink);text-decoration:none} .legal-back:hover{color:var(--acc)} .legal-hero{padding:clamp(50px,8vw,90px) clamp(18px,4vw,48px) 10px} .legal-crumb{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:rgba(34,30,25,.55);margin-bottom:18px} .legal-crumb a{color:rgba(34,30,25,.55);text-decoration:none} .legal-h1{margin:0;font-weight:900;font-size:clamp(34px,5.5vw,64px);line-height:.95;text-transform:uppercase;letter-spacing:-.02em} .legal-content{padding:20px clamp(18px,4vw,48px) clamp(70px,9vw,120px);max-width:820px} .legal-updated{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:rgba(34,30,25,.5);margin-bottom:30px} .legal-content h2{font-weight:800;font-size:19px;margin:34px 0 12px;text-transform:uppercase;letter-spacing:-.005em} .legal-content p,.legal-content li{font-size:14.5px;line-height:1.75;color:rgba(34,30,25,.78)} .legal-content ul{padding-left:20px;margin:0 0 12px} .legal-content a{color:var(--acc);font-weight:700;text-decoration:none} .legal-content a:hover{text-decoration:underline} /* Pied de page des pages légales : identique à celui de l'accueil. */ .footer{background:var(--ink);color:rgba(234,227,212,.6);padding:26px clamp(18px,4vw,48px) 6px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em} /* La signature IPPYX occupe sa propre ligne, en bas du pied de page. */ footer .ippyx-sig-wrap{flex-basis:100%;border-top:1px solid rgba(234,227,212,.12);margin-top:16px;padding-top:2px} /* ---- correctifs de mise en page ------------------------------------------ 1) Liste déroulante « type de travaux » : la maquette lui donnait le même padding (11px) qu'aux champs texte, mais un