/* Theme Name: Soft Machine Theme URI: https://softmachine.fr Author: Soft Machine Description: Thème code-pur de softmachine.fr, atelier de marquage textile (DTF, sérigraphie, broderie, flocage). Redesign 24/09/2026 — direction artistique propre, procédés relevés sur Real Thread / Stanley Stella / Rendered, valeurs réécrites. Aucun composant partagé avec un autre site du réseau. Version: 2.0.0 Text Domain: softmachine-atelier */ /* ========================================================================== Polices auto-hébergées — Alike (titraille serif) + Libre Franklin (texte). Absentes tant que les fichiers n'ont pas été déposés dans assets/fonts/ (voir IMAGES-A-FOURNIR.md) : la pile de repli (Georgia / system sans) prend le relais, la page reste lisible et proportionnée. ========================================================================== */ @font-face{ font-family:'Alike'; src:url('assets/fonts/alike-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:'Libre Franklin'; src:url('assets/fonts/librefranklin-var.woff2') format('woff2'); font-weight:200 600;font-style:normal;font-display:swap; } /* ========================================================================== Jetons — 1 fond neutre chaud + 1 accent (jaune flex, jamais en fond de bouton ni en texte). Mode CLAIR uniquement, aucune variable sombre. ========================================================================== */ :root{ --encre:#161A1E; /* titres, texte fort, boutons, footer */ --nuit:#0E1114; /* bas de footer */ --texte:#53524F; /* paragraphes — gris chaud, jamais un gris pur */ --discret:#7A7873; /* méta, dates, marques — ≥16px ou sur blanc */ --lin:#F4F3EE; /* fond de bande impaire */ --carte:#F2F3F2; /* fond des cartes photo détourées */ --blanc:#FFFFFF; --filet:#E6E3DE; /* bordures, rangs FAQ, séparateurs */ --jaune:#EEDD1A; /* accent unique : pinceau, surligneur, anneau */ --ok:#1F7A4D; --rouge-texte:var(--encre); /* pas de rouge — erreur = encre + icône */ --rayon:8px; --pilule:999px; --conteneur:1408px; --gouttiere:32px; --f-titre:'Alike',Georgia,'Times New Roman',serif; --f-corps:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; color-scheme:light; } /* ========================================================================== Base ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--blanc);color:var(--encre); font-family:var(--f-corps);font-size:18px;line-height:1.55;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;height:auto;display:block} svg{display:block} a{color:inherit} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{ outline:3px solid var(--encre);outline-offset:2px; } h1,h2,h3{font-family:var(--f-titre);font-weight:400;margin:0 0 .5em;letter-spacing:-.01em;color:var(--encre)} p{margin:0 0 1em;max-width:70ch} ul,ol{padding-left:1.2em} button{font-family:inherit} strong,b{font-weight:600} em,i{font-style:italic} .sb-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .sb-vh:has(input[name="sbs_piege"]){ position:absolute!important;left:-9999px!important;top:-9999px!important; width:1px!important;height:1px!important;overflow:hidden!important;clip-path:none!important; } .sb-enveloppe{max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--gouttiere)} @media (max-width:781px){.sb-enveloppe{padding-inline:16px}} img,svg{max-width:100%} .sb-grille,.sb-techniques,.sb-pied-grille,.sb-devis-radios,.sb-hero,.sb-fiche,.sb-rubrique-bandeau,.sb-auteur-tete,.sb-duo,.sb-secteurs,.sb-onglets-grille{min-width:0} .sb-carte,.sb-technique,.sb-secteur{min-width:0} /* Surligneur pinceau — jaune, jamais en texte ni en fond de bouton. */ .sb-surligne{ background-image:linear-gradient(120deg, var(--jaune) 0%, var(--jaune) 100%); background-repeat:no-repeat;background-size:100% 38%;background-position:0 82%; padding-inline:.05em; } /* ========================================================================== Bandes (fonds alternés) + lisière de tissu entre deux bandes ========================================================================== */ .sb-b-blanc{background:var(--blanc);color:var(--encre)} .sb-b-lin{background:var(--lin);color:var(--encre)} .sb-b-encre{background:var(--encre);color:var(--blanc)} section[class*="sb-b-"]{padding-block:80px} @media (max-width:781px){section[class*="sb-b-"]{padding-block:56px}} .sb-lisiere{height:14px;border:0;margin:0;position:relative;overflow:hidden} .sb-lisiere::before{ content:"";position:absolute;inset:-2px 0 auto 0;height:16px; background-image:repeating-linear-gradient(100deg, var(--filet) 0 6px, transparent 6px 13px); opacity:.9; } /* ========================================================================== En-tête — barre blanche sticky, 80px puis 64px au défilement ========================================================================== */ .sb-entete{background:var(--blanc);color:var(--encre);position:sticky;top:0;z-index:30;border-bottom:1px solid var(--filet);transition:padding .18s ease} .sb-entete-in{display:flex;align-items:center;gap:28px;padding-block:18px;max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--gouttiere);transition:padding .18s ease} .sb-entete.sb-entete--reduit .sb-entete-in{padding-block:12px} .sb-logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;flex:0 0 auto} .sb-logo svg{width:32px;height:32px} .sb-logo-mot{font-family:var(--f-titre);font-size:21px;letter-spacing:-.01em;white-space:nowrap} .sb-nav{display:flex;align-items:center;justify-content:center;gap:4px;flex:1 1 auto;flex-wrap:wrap} .sb-nav a{ font-family:var(--f-corps);font-weight:500;font-size:17px;color:inherit;text-decoration:none; padding:8px 14px;border-radius:var(--rayon);white-space:nowrap; } .sb-nav a:hover,.sb-nav a:focus-visible{background:var(--lin)} .sb-entete-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto} .sb-recherche-bouton{ display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; background:transparent;border:0;border-radius:50%;color:inherit;cursor:pointer; } .sb-recherche-bouton:hover{background:var(--lin)} .sb-recherche-bouton svg{width:19px;height:19px} .sb-menu-toggle-lbl{display:none} .sb-cta-court{display:none} /* Boutons pilule */ .sb-cta{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--f-corps);font-weight:500;font-size:16px;line-height:1; padding:12px 22px;border-radius:var(--pilule);text-decoration:none;border:1.5px solid transparent;white-space:nowrap; } .sb-cta--pleine{background:var(--encre);color:var(--blanc)} .sb-cta--pleine:hover,.sb-cta--pleine:focus-visible{background:#000} .sb-cta--filaire{border-color:var(--encre);background:transparent;color:var(--encre);font-weight:500} .sb-cta--filaire::after{content:"→";margin-left:2px} .sb-cta--filaire:hover,.sb-cta--filaire:focus-visible{background:var(--lin)} .sb-cta--sur-photo{background:var(--blanc);color:var(--encre)} .sb-cta--sur-photo:hover{background:var(--lin)} .sb-cta--petite{padding:9px 16px;font-size:14px} /* Menu mobile : plein écran, sans JS. */ #sb-menu-case{position:absolute;left:-9999px} .sb-menu-mobile{display:none} @media (max-width:1023px){ .sb-menu-toggle-lbl{ display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:50%;cursor:pointer;order:5; } .sb-menu-toggle-lbl:hover{background:var(--lin)} .sb-menu-toggle-lbl svg{width:22px;height:22px} .sb-nav{display:none} .sb-entete-in{flex-wrap:nowrap;gap:10px} .sb-entete-actions{gap:8px} .sb-menu-mobile{ display:none;position:fixed;inset:0;z-index:50;background:var(--blanc);overflow-y:auto; padding:24px 20px 100px; } #sb-menu-case:checked ~ .sb-menu-mobile{display:block} .sb-menu-mobile-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px} .sb-menu-mobile-fermer{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center} .sb-menu-mobile-liste{list-style:none;margin:0;padding:0} .sb-menu-mobile-liste li{border-top:1px solid var(--filet)} .sb-menu-mobile-liste li:first-child{border-top:0} .sb-menu-mobile-liste a{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:18px 4px;font-family:var(--f-titre);font-size:26px;color:var(--encre);text-decoration:none; } .sb-menu-mobile-icone{ width:48px;height:48px;border-radius:50%;background:var(--lin);flex:0 0 auto; display:flex;align-items:center;justify-content:center;color:var(--encre); } .sb-menu-mobile-icone svg{width:22px;height:22px} .sb-menu-mobile-bas{margin-top:28px;display:grid;gap:12px} .sb-menu-mobile-bas .sb-cta{width:100%} .sb-menu-mobile-bas a.sb-menu-mobile-mail{text-align:center;color:var(--texte);text-decoration:none;font-size:15px} } /* ========================================================================== la recherche vit déjà dans la barre du bas (sb-nav-bas), le bouton devis passe en texte court, le logo peut rétrécir sans jamais passer sous 44px de zone cliquable (burger/devis restent des cibles tactiles correctes). ========================================================================== */ @media (max-width:781px){ .sb-entete-in{gap:8px} .sb-recherche-bouton{display:none} .sb-logo-mot{font-size:17px} .sb-cta-long{display:none} .sb-cta-court{display:inline} .sb-entete .sb-cta--petite{padding:9px 14px} } /* ========================================================================== Barre de navigation mobile fixe en bas ========================================================================== */ .sb-nav-bas{display:none} @media (max-width:781px){ body{padding-bottom:66px} .sb-nav-bas{ display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45; background:var(--blanc);border-top:1px solid var(--filet); padding-bottom:env(safe-area-inset-bottom,0); } .sb-nav-bas__lien{ display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 10px; color:var(--texte);text-decoration:none;font-family:var(--f-corps);font-size:11px;font-weight:500; cursor:pointer;border:0;background:transparent; } .sb-nav-bas__lien svg{width:21px;height:21px} .sb-nav-bas__lien.sb-actif{color:var(--encre)} .sb-nav-bas__lien--devis svg{color:var(--jaune)} } /* ========================================================================== Bandeau cookies — sobre, un seul accent (A4) ========================================================================== */ .sb-cookies{ position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:520px;margin-inline:auto; background:var(--encre);color:var(--blanc);border-radius:var(--rayon);padding:18px 20px; box-shadow:0 10px 30px rgba(14,17,20,.25); display:flex;flex-wrap:wrap;align-items:center;gap:14px; } .sb-cookies[hidden]{display:none} .sb-cookies p{margin:0;font-size:14px;line-height:1.5;color:var(--blanc);flex:1 1 240px} .sb-cookies p a{color:var(--jaune);text-decoration:underline} .sb-cookies-actions{display:flex;gap:10px;flex:0 0 auto} .sb-cookies .sb-cta--filaire{border-color:var(--blanc);color:var(--blanc)} .sb-cookies .sb-cta--filaire:hover{background:rgba(255,255,255,.1)} .sb-cookies .sb-cta--pleine{background:var(--jaune);color:var(--encre)} .sb-cookies .sb-cta--pleine:hover{background:#ffe958} @media (max-width:781px){.sb-cookies{bottom:78px}} /* ========================================================================== Logo — aiguille dont le fil trace un S. Encre + point jaune en bout de fil. ========================================================================== */ .sb-symbole{color:var(--encre)} .sb-symbole .sb-aiguille{stroke:currentColor;fill:none} .sb-symbole .sb-fil{stroke:currentColor;fill:none} .sb-symbole .sb-point{fill:var(--jaune)} .sb-logo--blanc .sb-symbole,.sb-b-encre .sb-symbole,.sb-b-encre .sb-logo-mot{color:var(--blanc)} /* ========================================================================== Héros — procédé 1 : mur gris chaud ========================================================================== */ .sb-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:center;padding-block:64px} .sb-hero-surtitre{font-family:var(--f-corps);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--discret);margin:0 0 16px} .sb-hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;margin-bottom:18px} .sb-hero-chapo{font-size:20px;line-height:1.5;font-weight:400;color:var(--texte);max-width:46ch;margin-bottom:28px} .sb-hero-actions{display:flex;gap:14px;flex-wrap:wrap} .sb-hero-visuel{position:relative;min-width:0} .sb-hero-visuel .sb-photo,.sb-hero-visuel .sb-photo img,.sb-hero-visuel .sb-photo .sb-photo-repli{aspect-ratio:4/3;border-radius:var(--rayon)} .sb-hero-visuel .sb-photo{background:var(--lin)} * la photo pleine largeur), jamais la photo à côté du texte sur un écran étroit. * Placée APRÈS la règle de base .sb-hero (l'ordre en cascade compte à * spécificité égale) — un 1er essai plus haut dans le fichier ne s'appliquait * jamais pour cette raison, repéré en vérifiant le computed style, pas juste * la capture. La bande .sb-hero avait SA PROPRE padding-block EN PLUS de celle * de la section qui l'enveloppe (56px + 64px = ~120px de vide avant le * surtitre) : on la retire, la section porte déjà l'espacement. */ @media (max-width:781px){ .sb-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:0} .sb-hero-visuel{order:2} .sb-hero-visuel .sb-photo,.sb-hero-visuel .sb-photo img{aspect-ratio:16/10} } /* 3 repères de confiance sous le hero */ .sb-reperes{display:flex;gap:40px;flex-wrap:wrap;padding-block:28px;border-top:1px solid var(--filet)} .sb-repere{font-size:16px;color:var(--texte)} .sb-repere strong{font-family:var(--f-titre);font-weight:400;color:var(--encre);font-size:20px;margin-right:6px} @media (max-width:600px){ .sb-reperes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-block:20px} .sb-repere{display:flex;flex-direction:column;gap:2px;font-size:12.5px;text-align:center} .sb-repere strong{margin-right:0;font-size:22px} } /* Encadré « Le chiffre » (grand nombre Alike) — remplace l'ancien numéro floqué. */ .sb-floque-bloc{display:inline-flex;flex-direction:column;gap:2px} .sb-floque{font-family:var(--f-titre);font-weight:400;font-size:clamp(36px,4vw,56px);line-height:1;color:var(--encre);font-variant-numeric:tabular-nums} .sb-floque-unite{font-family:var(--f-corps);font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--discret)} /* ========================================================================== Photo carte — procédé 2, sous-couche + pelage discret au survol ========================================================================== */ .sb-photo{position:relative;display:block;line-height:0;isolation:isolate;border-radius:var(--rayon);overflow:hidden;background:var(--carte)} .sb-photo img,.sb-photo .sb-photo-repli{ position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;display:block; transition:transform .3s ease; } .sb-photo:hover img{transform:scale(1.03)} @media (prefers-reduced-motion:reduce){.sb-photo:hover img{transform:none}} .sb-photo-repli{background:var(--carte);display:grid;place-items:center;padding:0} .sb-photo-repli svg{width:38%;height:38%;color:var(--discret);opacity:.6} /* Procédé 7bis — pastille tag, en surimpression sur la photo (pilule noire). */ .sb-pastille{position:absolute;left:12px;top:12px;z-index:3;display:flex;align-items:center} .sb-pastille-puce{display:none} .sb-pastille-texte{ background:var(--encre);color:var(--blanc);font-family:var(--f-corps);font-weight:600;font-size:11.5px; letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:var(--pilule);white-space:nowrap; } /* ========================================================================== Étiquette de rubrique (tag pilule) ========================================================================== */ .sb-etiquette{ display:inline-block;font-family:var(--f-corps);font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase; color:var(--blanc);background:var(--encre); padding:5px 12px;border-radius:var(--pilule);margin-bottom:10px; } .sb-b-encre .sb-etiquette{background:var(--blanc);color:var(--encre)} /* ========================================================================== Cartes / grilles ========================================================================== */ .sb-section-tete{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:40px;text-align:center;flex-direction:column} .sb-section-tete h2{font-size:clamp(28px,3.2vw,40px)} .sb-section-chapo{color:var(--texte);margin:0 auto;max-width:56ch} .sb-b-encre .sb-section-chapo{color:#C9C7C3} .sb-voir-tout{font-weight:500;font-size:15px;color:var(--encre);text-decoration:none;white-space:nowrap} .sb-voir-tout::after{content:"→";margin-left:6px} .sb-b-encre .sb-voir-tout{color:var(--blanc)} .sb-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .sb-grille--4{grid-template-columns:repeat(4,1fr)} .sb-grille--3{grid-template-columns:repeat(3,1fr)} .sb-carte{color:inherit;text-decoration:none;display:block} .sb-carte h3{font-family:var(--f-titre);font-weight:400;font-size:19px;line-height:1.32;margin:14px 0 6px;letter-spacing:-.01em} .sb-carte h3 a{color:inherit;text-decoration:none} .sb-carte h3 a:hover{color:var(--texte)} .sb-carte-chapo{color:var(--texte);font-size:15px;line-height:1.4;margin:0 0 6px} .sb-carte-date{font-size:13px;color:var(--discret);font-variant-numeric:tabular-nums} .sb-b-encre .sb-carte-chapo,.sb-b-encre .sb-carte-date{color:#C9C7C3} /* Grille 2 colonnes décalées (rubrique) — la 2e colonne descend. */ .sb-grille--decale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px} .sb-grille--decale .sb-carte:nth-child(2n){margin-top:32px} @media (max-width:1023px){.sb-grille,.sb-grille--4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){.sb-grille,.sb-grille--4,.sb-grille--decale{grid-template-columns:minmax(0,1fr)}.sb-grille--decale .sb-carte:nth-child(2n){margin-top:0}} /* ========================================================================== Carte à la une en surimpression — procédé 5 (rubrique, blog) ========================================================================== */ .sb-une{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0;margin-bottom:56px} .sb-une-photo{border-radius:var(--rayon);overflow:hidden;aspect-ratio:16/10} .sb-une-photo img,.sb-une-photo .sb-photo-repli{width:100%;height:100%;object-fit:cover} .sb-une-carte{ background:var(--blanc);border-radius:var(--rayon);padding:32px;align-self:center;margin-left:-56px; box-shadow:0 8px 24px rgba(22,26,30,.08);position:relative;z-index:2; } .sb-une-carte h2{font-size:clamp(24px,2.6vw,32px);line-height:1.2;margin:10px 0 12px} .sb-une-carte p{color:var(--texte);margin-bottom:18px} @media (max-width:900px){ .sb-une{grid-template-columns:minmax(0,1fr)} .sb-une-carte{margin-left:0;margin-top:-40px;width:calc(100% - 32px);margin-inline:16px} } /* ========================================================================== Rail des techniques — procédé 2 (tuiles photo en gros plan) ========================================================================== */ .sb-techniques{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px} .sb-technique{display:flex;flex-direction:column;position:relative} .sb-technique .sb-photo{aspect-ratio:3/4;height:100%} .sb-technique .sb-photo img,.sb-technique .sb-photo .sb-photo-repli{aspect-ratio:3/4;width:100%;height:100%;object-fit:cover} * que son propre contenu (titre + bouton, ~79px réels) — elle débordait sous la * photo et le dégradé y laissait une bande grise vide. Ancrée en absolu au bas * de la tuile : elle ne peut plus jamais dépasser l'image, quelle que soit sa * hauteur réelle. */ .sb-technique-legende{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 14px 14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start; } .sb-technique-legende::before{ content:"";position:absolute;inset:-52px 0 0;z-index:-1;pointer-events:none; background:linear-gradient(to top, rgba(22,26,30,.72), transparent); } .sb-technique-legende h3{color:var(--blanc);font-size:18px;margin:0} .sb-technique-legende .sb-cta{padding:7px 14px;font-size:13px} .sb-jauges-mini{display:none} @media (max-width:1023px){.sb-techniques{grid-template-columns:repeat(3,minmax(0,1fr))}} * orpheline seule sur la 3ᵉ ligne (Sublimation). Rail horizontal à défilement * avec accroche (scroll-snap) : jamais d'orpheline, quel que soit le nombre de * techniques. */ @media (max-width:600px){ .sb-techniques{ display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:6px;margin-inline:-16px;padding-inline:16px;-webkit-overflow-scrolling:touch; } .sb-technique{flex:0 0 68%;scroll-snap-align:start} } /* ========================================================================== Split photo / texte — bloc « on garantit » avec 4 repères à coche ========================================================================== */ .sb-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center} .sb-split-photo .sb-photo,.sb-split-photo .sb-photo img,.sb-split-photo .sb-photo-repli{aspect-ratio:4/3} .sb-split h2{font-size:clamp(26px,3vw,40px);line-height:1.15} .sb-split p.sb-lede{color:var(--texte);font-size:17px;max-width:48ch} .sb-coches{list-style:none;margin:24px 0;padding:0;display:grid;gap:14px} .sb-coches li{display:flex;gap:12px;align-items:flex-start;font-size:16px} .sb-coches svg{width:20px;height:20px;color:var(--encre);flex:0 0 auto;margin-top:2px} @media (max-width:900px){.sb-split{grid-template-columns:minmax(0,1fr)}} /* ========================================================================== Aiguillage à deux publics — procédé 4 ========================================================================== */ .sb-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} .sb-duo-carte{background:var(--blanc);border-radius:var(--rayon);overflow:hidden;border:1px solid var(--filet)} .sb-duo-carte .sb-photo,.sb-duo-carte .sb-photo img,.sb-duo-carte .sb-photo-repli{aspect-ratio:16/9;border-radius:0} .sb-duo-tete{padding:28px 28px 8px;text-align:center} .sb-duo-tete h3{font-size:24px;margin:0} .sb-duo-liste{list-style:none;margin:0;padding:16px} .sb-duo-liste li{border-top:1px solid var(--filet)} .sb-duo-liste li:first-child{border-top:0} .sb-duo-liste a{ display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 12px; background:var(--lin);border-radius:var(--rayon);margin:6px 0;text-decoration:none;color:var(--encre);font-weight:500;font-size:15px; } .sb-duo-liste a:hover{background:var(--carte)} .sb-duo-liste a::after{content:"→"} @media (max-width:781px){.sb-duo{grid-template-columns:minmax(0,1fr)}} /* ========================================================================== Onglets « Derniers guides » (CSS pur, radio) ========================================================================== */ .sb-onglets input[type="radio"]{position:absolute;left:-9999px} .sb-onglets-nav{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;border-bottom:1px solid var(--filet);margin-bottom:36px} .sb-onglets-nav label{ padding:12px 4px;font-weight:500;font-size:16px;color:var(--discret);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px; } .sb-onglet-1:checked ~ .sb-onglets-nav label[for="sb-t1"], .sb-onglet-2:checked ~ .sb-onglets-nav label[for="sb-t2"], .sb-onglet-3:checked ~ .sb-onglets-nav label[for="sb-t3"]{color:var(--encre);border-bottom-color:var(--encre)} .sb-onglets-grille{display:none} .sb-onglet-1:checked ~ .sb-onglets-grille[data-onglet="1"], .sb-onglet-2:checked ~ .sb-onglets-grille[data-onglet="2"], .sb-onglet-3:checked ~ .sb-onglets-grille[data-onglet="3"]{display:grid} /* ========================================================================== Bande photo plein cadre (Rendered) — respiration entre deux bandes claires ========================================================================== */ .sb-plein-cadre{aspect-ratio:21/9;overflow:hidden} .sb-plein-cadre img{width:100%;height:100%;object-fit:cover} @media (max-width:781px){.sb-plein-cadre{aspect-ratio:4/3}} /* ========================================================================== Citation géante ========================================================================== */ .sb-citation-geante{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:center} .sb-citation-geante blockquote{margin:0;font-family:var(--f-titre);font-weight:400;font-size:clamp(24px,3vw,40px);line-height:1.28;color:var(--encre)} .sb-citation-geante footer{margin-top:20px;font-family:var(--f-corps);font-weight:500;font-size:15px;color:var(--texte)} .sb-citation-geante .sb-photo,.sb-citation-geante .sb-photo img{aspect-ratio:4/5} @media (max-width:900px){.sb-citation-geante{grid-template-columns:minmax(0,1fr)}} /* ========================================================================== Par secteur — procédé 7 ========================================================================== */ .sb-secteurs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 48px} .sb-secteur{display:flex;gap:18px;align-items:center;padding:18px 0;border-top:1px solid var(--filet);text-decoration:none;color:inherit} .sb-secteurs .sb-secteur:nth-child(-n+2){border-top:0} .sb-secteur-vignette{width:72px;height:72px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--carte)} .sb-secteur-vignette img{width:100%;height:100%;object-fit:cover} .sb-secteur-texte h3{font-family:var(--f-titre);font-size:19px;margin:0 0 4px} .sb-secteur-texte p{color:var(--texte);font-size:14.5px;margin:0} @media (max-width:781px){.sb-secteurs{grid-template-columns:minmax(0,1fr)}.sb-secteurs .sb-secteur:nth-child(2){border-top:1px solid var(--filet)}} /* ========================================================================== Deux grandes tuiles « Fonds d'atelier » ========================================================================== */ .sb-fonds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .sb-fond-tuile{position:relative;border-radius:var(--rayon);overflow:hidden;aspect-ratio:4/3;display:block;color:var(--blanc);text-decoration:none} .sb-fond-tuile img{width:100%;height:100%;object-fit:cover;filter:brightness(.6)} .sb-fond-tuile-texte{position:absolute;left:28px;bottom:28px;right:28px} .sb-fond-tuile-texte h3{color:var(--blanc);font-size:26px;margin:0 0 14px} @media (max-width:781px){.sb-fonds{grid-template-columns:minmax(0,1fr)}} /* ========================================================================== Aimant à leads ========================================================================== */ .sb-aimant{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px;align-items:center} .sb-aimant-visuel{background:var(--lin);border-radius:var(--rayon);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden} .sb-aimant-visuel img{width:100%;height:100%;object-fit:cover} .sb-aimant h2{font-size:clamp(24px,2.8vw,34px)} @media (max-width:900px){.sb-aimant{grid-template-columns:minmax(0,1fr)}} /* ========================================================================== Fiche de fabrication / formulaire devis ========================================================================== */ .sb-fiche{background:var(--lin);color:var(--encre);border-radius:var(--rayon);padding:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:44px} @media (max-width:781px){.sb-fiche{grid-template-columns:minmax(0,1fr);padding:24px 20px}} .sb-fiche h2{font-size:clamp(26px,3vw,36px);margin-bottom:10px} .sb-fiche-intro p{max-width:44ch;color:var(--texte)} .sb-fiche-delai{font-weight:500;font-size:14px;color:var(--texte)} .sb-devis{background:var(--blanc);border-radius:var(--rayon);padding:28px;min-width:0;border:1px solid var(--filet)} .sb-devis-etapes{display:flex;gap:6px;margin-bottom:20px;list-style:none;padding:0} .sb-devis-etapes li{flex:1;height:4px;background:var(--filet);border-radius:2px} .sb-devis-etapes li.sb-actif{background:var(--encre)} .sb-devis fieldset{border:0;margin:0;padding:0} .sb-devis-etape{display:grid;gap:16px} .sb-devis-champ{display:grid;gap:6px} .sb-devis-champ label{font-weight:500;font-size:13.5px;color:var(--encre)} .sb-devis-champ input,.sb-devis-champ select,.sb-devis-champ textarea{ font-family:var(--f-corps);font-size:16px;padding:14px 16px;border:1.5px solid var(--filet);border-radius:var(--rayon);background:var(--blanc);color:var(--encre); width:100%;max-width:100%;box-sizing:border-box; } .sb-devis-champ input:focus-visible,.sb-devis-champ select:focus-visible,.sb-devis-champ textarea:focus-visible{border-color:var(--encre)} .sb-devis-radios{display:flex;flex-wrap:wrap;gap:8px} .sb-devis-radios label{ display:inline-flex;align-items:center;gap:6px;padding:10px 15px;border:1.5px solid var(--filet);border-radius:var(--pilule);font-size:14px;cursor:pointer; } .sb-devis-radios label:has(input:checked){border-color:var(--encre);background:var(--lin)} .sb-devis-nav{display:flex;justify-content:space-between;margin-top:20px;gap:10px} .sb-devis-nav button{border:0;cursor:pointer;border-radius:var(--pilule);padding:12px 20px;font-weight:500;font-family:var(--f-corps)} .sb-devis-suivant{background:var(--encre);color:var(--blanc)} .sb-devis-precedent{background:transparent;border:1.5px solid var(--filet)!important;color:var(--encre)} .sb-devis-envoyer{background:var(--encre);color:var(--blanc)} .sb-devis-envoyer:hover,.sb-devis-envoyer:focus-visible{background:#000} .sb-devis-etape{display:none} .sb-devis-etape.sb-devis-etape--active{display:grid} .sb-devis-rgpd{font-size:12.5px;color:var(--texte);display:flex;gap:8px;align-items:flex-start} .sb-devis-confirmation{background:var(--lin);border-radius:var(--rayon);padding:16px;font-weight:500;color:var(--ok)} /* Silhouette d'emplacement */ .sb-silhouette-groupe{display:flex;gap:18px;flex-wrap:wrap} .sb-silhouette{position:relative;width:120px} .sb-silhouette svg{color:var(--encre);width:100%;height:auto} .sb-silhouette-zone{position:absolute} .sb-silhouette-zone input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer} .sb-silhouette-zone span{ position:absolute;inset:0;border:1.5px dashed var(--discret);border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:9px;color:var(--texte);pointer-events:none;background:rgba(255,255,255,.6); } .sb-silhouette-zone input:checked + span{border-color:var(--encre);border-style:solid;background:var(--lin);color:var(--encre);font-weight:600} .sb-silhouette-legende{font-size:12px;color:var(--discret);margin-top:8px} /* ========================================================================== FAQ accordéon ========================================================================== */ .sb-faq{display:grid;gap:0;max-width:760px;border-top:1px solid var(--filet)} .sb-faq details{border-bottom:1px solid var(--filet)} .sb-faq summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:20px 4px;font-family:var(--f-titre);font-weight:400;font-size:20px; } .sb-faq summary::-webkit-details-marker{display:none} .sb-faq summary .sb-faq-icone{width:22px;height:22px;flex:0 0 auto;color:var(--encre)} .sb-faq summary::after{content:"+";margin-left:auto;font-family:var(--f-corps);font-weight:400;font-size:22px;color:var(--encre)} .sb-faq details[open] summary::after{content:"–"} .sb-faq-reponse{padding:0 4px 22px 38px;color:var(--texte);font-size:16px} /* ========================================================================== Bloc auteur — procédé, anneau jaune 3px ========================================================================== */ .sb-etiquette-tissee{ position:relative;display:flex;gap:18px;align-items:center;background:var(--lin); padding:24px 28px;margin:44px 0 0;border-radius:var(--rayon); } .sb-etiquette-tissee-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:3px solid var(--jaune)} .sb-etiquette-tissee-nom{font-family:var(--f-titre);font-weight:400;font-size:19px;margin:0} .sb-etiquette-tissee-role{font-size:13.5px;color:var(--texte);margin:2px 0 6px} .sb-etiquette-tissee-lien{font-weight:500;font-size:13.5px;color:var(--encre);text-decoration:underline} .sb-etiquette-tissee--auteur{padding:32px 36px;margin:0} .sb-etiquette-tissee--auteur .sb-etiquette-tissee-photo{width:96px;height:96px} h1.sb-etiquette-tissee-nom{font-size:clamp(28px,3.2vw,44px);margin:0 0 6px} .sb-etiquette-tissee--auteur .sb-etiquette-tissee-role{font-size:15px} /* ========================================================================== Article ========================================================================== */ .sb-fil-ariane{font-size:14px;color:var(--discret);padding-block:20px;text-align:center} .sb-fil-ariane a{color:var(--discret);text-decoration:none} .sb-fil-ariane a:hover{color:var(--encre)} .sb-fil-ariane .sb-fil-sep{font-weight:200;margin:0 4px} .sb-fil-ariane .sb-fil-actif{color:var(--encre)} .sb-article-tete{padding-block:0 24px;text-align:center} .sb-article-tete h1{font-size:clamp(30px,4vw,48px);line-height:1.1;max-width:880px;margin-inline:auto} .sb-chapo{font-size:20px;line-height:1.5;color:var(--texte);font-weight:400;max-width:66ch;margin-inline:auto} .sb-meta-ligne{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:center;font-size:13.5px;color:var(--discret);margin-top:16px;font-variant-numeric:tabular-nums} .sb-meta-ligne .sb-etiquette{margin:0} .sb-article-photo{max-width:880px;margin:0 auto;padding-inline:24px} .sb-article-photo .sb-photo,.sb-article-photo img,.sb-article-photo .sb-photo-repli{aspect-ratio:16/9;max-height:440px;width:100%;object-fit:cover} @media (max-width:900px){ .sb-article-photo .sb-photo,.sb-article-photo img,.sb-article-photo .sb-photo-repli{aspect-ratio:auto;max-height:30vh;height:30vh} .sb-article-tete h1{font-size:clamp(26px,7vw,34px)} .sb-chapo{font-size:17px} } .sb-article-corps{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:56px;align-items:start;max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--gouttiere);padding-top:36px;padding-bottom:80px} .sb-lecture{font-size:18px;line-height:1.65;max-width:640px;color:var(--texte)} .sb-lecture h2{font-size:32px;font-weight:400;font-family:var(--f-titre);color:var(--encre);padding-top:8px;margin-top:32px} .sb-lecture h3{font-size:22px;font-weight:600;font-family:var(--f-corps);color:var(--encre);margin-top:24px} .sb-lecture p{max-width:640px} .sb-lecture ol{max-width:640px} .sb-lecture ul{list-style:none;margin:0 0 1em;padding:0;max-width:640px} .sb-lecture ul li{margin:0 0 1em;padding-left:26px;position:relative} .sb-lecture ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--jaune)} .sb-lecture figure{margin:28px 0} .sb-lecture figure img{border-radius:var(--rayon);aspect-ratio:3/2;object-fit:cover} .sb-lecture figure figcaption{font-size:13px;color:var(--discret);margin-top:6px} .sb-lecture p a,.sb-lecture li a,.sb-lecture .sb-astuce a{ color:var(--encre);text-decoration:underline;text-decoration-color:var(--jaune);text-decoration-thickness:2px;text-underline-offset:3px; } .sb-lecture p a:hover,.sb-lecture li a:hover{text-decoration-color:var(--encre)} .sb-lecture blockquote, .sb-lecture .wp-block-quote, .sb-lecture .wp-block-pullquote, .sb-lecture .sb-astuce{ background:var(--lin)!important;border:0!important;border-left:4px solid var(--jaune)!important; padding:20px 24px!important;margin:28px 0!important;color:var(--encre)!important;border-radius:var(--rayon)!important; } .sb-lecture blockquote *,.sb-lecture .wp-block-quote *,.sb-lecture .wp-block-pullquote *,.sb-lecture .sb-astuce *{color:var(--encre)!important;background:transparent!important} .sb-lecture blockquote p:first-child,.sb-lecture .wp-block-quote p:first-child,.sb-lecture .sb-astuce p:first-child{font-family:var(--f-titre);font-weight:400;font-size:19px} /* Repère d'atelier */ .sb-encadre{background:var(--lin);border-left:4px solid var(--jaune);border-radius:var(--rayon);padding:20px 24px;margin:0 0 28px} .sb-encadre-titre{font-family:var(--f-corps);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre);margin:0 0 8px} .sb-encadre p:last-child{margin:0;color:var(--encre)} /* Points clés — remplace une liste à puces dans le corps d'un article (DA §10 : * jamais de