/* ============================================================================= * Shaym Nettoyage — Feuille de style du thème * * Chaque règle est la transposition littérale d'un style inline de la maquette * Claude Design. Les valeurs ne sont jamais « arrondies » : si la maquette dit * `padding:9px 0 9px 12px`, la règle dit `padding:9px 0 9px 12px`. * * Source : `Mentions Legales.dc.html` (+ header/footer communs à toutes les pages). * Chargé APRÈS tokens.css : les sélecteurs de classe (0,1,0) l'emportent donc * sur les sélecteurs d'élément de base.css (0,0,1). * ========================================================================== */ html{scroll-behavior:smooth} *,*::before,*::after{box-sizing:border-box} img{max-width:100%} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* ----------------------------------------------------------------------------- * Utilitaires * -------------------------------------------------------------------------- */ /* Lecteurs d'écran uniquement (ajout hors maquette : invisible à l'écran). */ .sn-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .sn-skip-link{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-header) + 10)} .sn-skip-link:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 16px;background:var(--navy-900);color:#fff;border-radius:var(--radius-md);font-family:var(--font-display);font-weight:600;text-decoration:none} /* Bascule desktop / mobile — `matchMedia('(max-width: 920px)')` dans la maquette. */ @media (max-width:920px){.sn-desktop-only{display:none!important}} @media (min-width:921px){.sn-mobile-only{display:none!important}} /* ----------------------------------------------------------------------------- * Button — components/buttons/Button.jsx * -------------------------------------------------------------------------- */ .sn-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box; font-family:var(--font-display);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-button); border-radius:var(--radius-md);cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none;outline:none; transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out); } .sn-btn:hover{text-decoration:none} .sn-btn--full{display:flex;width:100%} /* Tailles — S.sm / S.md / S.lg */ .sn-btn--sm{height:var(--control-h-sm);padding:0 16px;font-size:.875rem} .sn-btn--md{height:var(--control-h-md);padding:0 24px;font-size:var(--text-button)} .sn-btn--lg{height:var(--control-h-lg);padding:0 32px;font-size:1rem} /* Variantes — V.primary / V.secondary / V.ghost / V.onDark */ .sn-btn--primary{background:var(--accent);color:var(--text-on-accent);border:1px solid transparent} .sn-btn--primary:hover{background:var(--accent-hover);color:var(--text-on-accent)} .sn-btn--primary:active{background:var(--accent-pressed)} .sn-btn--primary:focus-visible{box-shadow:var(--focus-ring-accent)} .sn-btn--secondary{background:var(--gray-0);color:var(--primary);border:1.5px solid var(--primary)} .sn-btn--secondary:hover{background:var(--navy-50);color:var(--primary)} .sn-btn--secondary:active{background:var(--navy-100)} .sn-btn--secondary:focus-visible{box-shadow:var(--focus-ring)} .sn-btn--ghost{background:transparent;color:var(--primary);border:1px solid transparent} .sn-btn--ghost:hover{background:var(--navy-50);color:var(--primary)} .sn-btn--ghost:active{background:var(--navy-100)} .sn-btn--ghost:focus-visible{box-shadow:var(--focus-ring)} .sn-btn--on-dark{background:transparent;color:var(--text-on-dark);border:1.5px solid rgba(255,255,255,.4)} .sn-btn--on-dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.7);color:var(--text-on-dark)} .sn-btn--on-dark:active{background:rgba(255,255,255,.14)} .sn-btn--on-dark:focus-visible{box-shadow:var(--focus-ring-accent)} .sn-btn[disabled],.sn-btn--disabled{opacity:.45;cursor:not-allowed} /* Sur petit écran, un libellé long (« Demander un audit gratuit de vos locaux * (44) ») dépasse la largeur disponible : le `white-space:nowrap` du design * system le faisait rogner par l'`overflow:hidden` du bandeau, rendant le CTA * principal illisible. On autorise le retour à la ligne et on remplace la * hauteur fixe par une hauteur minimale — les libellés courts ne bougent pas. */ @media (max-width:520px){ .sn-btn{white-space:normal;text-align:center;height:auto;padding-top:12px;padding-bottom:12px} .sn-btn--sm{min-height:var(--control-h-sm)} .sn-btn--md{min-height:var(--control-h-md)} .sn-btn--lg{min-height:var(--control-h-lg)} } /* ----------------------------------------------------------------------------- * Header — commun à toutes les pages * -------------------------------------------------------------------------- */ .sn-header{position:sticky;top:0;z-index:var(--z-header);background:var(--gray-0);border-bottom:1px solid var(--border-subtle)} .sn-header__inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,24px);height:76px;display:flex;align-items:center;gap:var(--space-lg)} .sn-header__logo{display:flex;align-items:center;flex:none} .sn-header__logo img{height:44px;width:auto;display:block} .sn-header__logo .custom-logo{height:44px;width:auto;display:block} .sn-header__right{display:flex;align-items:center;gap:var(--space-xl);margin-left:auto} .sn-header__actions{display:flex;align-items:center;gap:var(--space-sm)} /* Navigation desktop */ .sn-nav{display:flex;align-items:center;gap:var(--space-lg)} .sn-nav__item{position:relative} .sn-nav__link{font-family:var(--font-display);font-size:.9375rem;font-weight:600;text-decoration:none;padding:6px 2px;color:var(--gray-700)} .sn-nav__link:hover{color:var(--navy-800);text-decoration:none} .sn-nav__link:focus-visible{color:var(--navy-800);outline:2px solid var(--navy-600);outline-offset:2px;border-radius:2px} .sn-nav__link[aria-current="page"]{color:var(--navy-800)} .sn-nav__toggle{display:flex;align-items:center;gap:5px;font-family:var(--font-display);font-size:.9375rem;font-weight:600;text-decoration:none;padding:6px 2px;color:var(--gray-700)} .sn-nav__toggle:hover{color:var(--navy-800);text-decoration:none} .sn-nav__toggle:focus-visible{color:var(--navy-800);outline:2px solid var(--navy-600);outline-offset:2px;border-radius:2px} /* Panneau déroulant « Nos services » */ .sn-dropdown{position:absolute;top:calc(100% + 8px);left:-12px;width:340px;background:var(--gray-0);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:8px;z-index:200} .sn-dropdown::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .sn-dropdown[hidden]{display:none} .sn-dropdown__link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-md);text-decoration:none} .sn-dropdown__link:hover{background:var(--gray-50);text-decoration:none} .sn-dropdown__link:focus-visible{background:var(--gray-50);outline:2px solid var(--navy-600);outline-offset:-2px} .sn-dropdown__icon{flex:none;width:36px;height:36px;border-radius:var(--radius-md);background:var(--navy-50);color:var(--navy-700);display:flex;align-items:center;justify-content:center} .sn-dropdown__text{display:flex;flex-direction:column;gap:1px} .sn-dropdown__title{font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--text-heading)} .sn-dropdown__desc{font-size:var(--text-caption);color:var(--text-muted)} /* Bouton burger */ .sn-burger{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--gray-0);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--navy-950);cursor:pointer;padding:0} .sn-burger:focus-visible{box-shadow:var(--focus-ring)} .sn-burger__close{display:none} .sn-burger[aria-expanded="true"] .sn-burger__open{display:none} .sn-burger[aria-expanded="true"] .sn-burger__close{display:block} /* Très petits écrans : la maquette additionne logo (155 px, non compressible), * bouton « Demander un devis » et burger, soit 388 px + marges — au-delà des * 375 px d'un téléphone courant, d'où un défilement horizontal. On rend ici le * logo compressible et on resserre les espacements. Au-dessus de 420 px, le * rendu de la maquette est strictement conservé. */ @media (max-width:420px){ .sn-header__inner{gap:var(--space-sm)} .sn-header__logo{flex:0 1 auto;min-width:0} .sn-header__logo img,.sn-header__logo .custom-logo{height:auto;width:100%;max-width:130px} .sn-header__actions .sn-btn{padding:0 12px} } /* Panneau mobile */ .sn-mobile{position:absolute;top:100%;left:0;right:0;background:var(--gray-0);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);padding:8px clamp(16px,4vw,24px) 20px;display:flex;flex-direction:column} .sn-mobile[hidden]{display:none} .sn-mobile__link{padding:13px 0;border-bottom:1px solid var(--border-subtle);font-family:var(--font-display);font-weight:600;color:var(--navy-950);text-decoration:none} .sn-mobile__link:hover{color:var(--navy-950);text-decoration:none} .sn-mobile__link--flush{border-bottom:0} .sn-mobile__label{font-family:var(--font-display);font-size:var(--text-overline);font-weight:600;letter-spacing:var(--tracking-overline);color:var(--text-faint);padding:14px 0 4px} .sn-mobile__sub{padding:9px 0 9px 12px;font-size:.9375rem;color:var(--gray-700);text-decoration:none} .sn-mobile__sub:hover{color:var(--gray-700);text-decoration:none} .sn-mobile__sub--last{border-bottom:1px solid var(--border-subtle);margin-bottom:4px} .sn-mobile__actions{display:flex;flex-direction:column;gap:10px;margin-top:8px} /* ----------------------------------------------------------------------------- * Page « Mentions légales » — hero * -------------------------------------------------------------------------- */ .sn-legal-hero{background:var(--gray-0);border-bottom:1px solid var(--border-subtle)} .sn-legal-hero__inner{max-width:1120px;margin:0 auto;padding:clamp(44px,6vw,72px) clamp(16px,4vw,24px)} .sn-overline{font-family:var(--font-display);font-size:var(--text-overline);font-weight:600;letter-spacing:var(--tracking-overline);color:var(--navy-600)} /* Motif signature : trait orange 40×4 sous l'overline. */ .sn-rule{width:40px;height:4px;background:var(--accent);margin:12px 0 18px} .sn-legal-hero__title{font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:var(--weight-extrabold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:balance;margin:0;max-width:24ch} .sn-legal-hero__meta{font-size:var(--text-body);color:var(--text-muted);line-height:1.6;margin:14px 0 0} /* ----------------------------------------------------------------------------- * Page « Mentions légales » — sommaire latéral + corps * -------------------------------------------------------------------------- */ .sn-legal{background:var(--gray-0);padding:clamp(40px,6vw,72px) 0} .sn-legal__inner{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,24px);display:flex;gap:clamp(32px,5vw,64px);align-items:flex-start} .sn-toc{position:sticky;top:100px;flex:none;width:250px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:20px} .sn-toc__title{display:block;font-family:var(--font-display);font-size:var(--text-overline);font-weight:600;letter-spacing:var(--tracking-overline);color:var(--text-faint);margin-bottom:12px} .sn-toc__list{display:flex;flex-direction:column} .sn-toc__link{padding:8px 0 8px 12px;font-size:var(--text-small);color:var(--gray-700);text-decoration:none;border-left:2px solid var(--border-subtle)} .sn-toc__link:hover{color:var(--navy-800);border-left-color:var(--accent);text-decoration:none} .sn-toc__link:focus-visible{color:var(--navy-800);border-left-color:var(--accent);outline:2px solid var(--navy-600);outline-offset:2px} .sn-toc__foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-subtle)} .sn-toc__foot-text{display:block;font-size:var(--text-caption);color:var(--text-faint);line-height:1.5;margin-bottom:10px} .sn-legal__body{flex:1;min-width:0;max-width:680px} .sn-legal__section{scroll-margin-top:100px;margin-bottom:clamp(32px,5vw,48px)} .sn-legal__section:last-of-type{margin-bottom:0} /* ----------------------------------------------------------------------------- * Typographie de contenu long (`.sn-prose`) * * Vaut pour le contenu de repli (sections codées) ET pour `the_content()`, * afin qu'un texte saisi dans l'éditeur retrouve exactement le rythme de la * maquette : h2 → 16px avant le 1er paragraphe, 12px entre paragraphes, * h3 → 22px au-dessus / 10px en dessous. * -------------------------------------------------------------------------- */ .sn-prose h2{font-family:var(--font-display);font-size:var(--text-h3);font-weight:700;color:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--border-subtle);scroll-margin-top:100px} .sn-prose h3{font-family:var(--font-display);font-size:var(--text-h4);font-weight:700;color:var(--text-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);margin:22px 0 0;scroll-margin-top:100px} .sn-prose p{font-size:var(--text-body);color:var(--gray-700);line-height:1.75;margin:12px 0 0} .sn-prose h2 + p{margin-top:16px} .sn-prose h3 + p{margin-top:10px} .sn-prose strong{font-weight:700;color:var(--gray-800)} /* `:not(.sn-btn)` : sans cette exclusion, la règle de lien (0,1,1) l'emporterait * sur les variantes de bouton (0,1,0) et soulignerait les CTA du contenu. */ .sn-prose a:not(.sn-btn){color:var(--link);text-decoration:underline} .sn-prose a:not(.sn-btn):hover{color:var(--link-hover)} .sn-prose ul,.sn-prose ol{font-size:var(--text-body);color:var(--gray-700);line-height:1.75;margin:12px 0 0;padding-left:22px} .sn-prose li + li{margin-top:6px} .sn-prose > *:first-child{margin-top:0} /* Contenu libre (éditeur) : les h2 rejouent l'espacement inter-sections. */ .sn-legal__content > h2{margin-top:clamp(32px,5vw,48px)} .sn-legal__content > h2:first-child{margin-top:0} /* Rappel contact discret, en bas de colonne */ .sn-callout{margin-top:clamp(40px,6vw,56px);background:var(--surface-alt);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px} /* Sélecteur doublé (0,2,0) : le bloc vit à l'intérieur de `.sn-prose`, dont la * règle `p` (0,1,1) imposerait sinon corps 16 px, gris 700 et marge haute. */ .sn-callout .sn-callout__text{margin:0;font-size:var(--text-small);color:var(--text-muted);line-height:1.6;max-width:52ch} /* ----------------------------------------------------------------------------- * Footer — commun à toutes les pages * -------------------------------------------------------------------------- */ .sn-footer{background:var(--surface-dark-2);color:var(--text-on-dark-muted);border-top:1px solid var(--border-on-dark)} .sn-footer__grid{max-width:1200px;margin:0 auto;padding:56px clamp(16px,4vw,24px) 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--space-xl)} .sn-footer__brand{display:flex;flex-direction:column;gap:14px} .sn-footer__brand-row{display:flex;align-items:center;gap:12px} .sn-footer__brand-row img{height:40px;width:auto} .sn-footer__wordmark{font-family:var(--font-display);font-weight:800;color:#fff;font-size:1.125rem;letter-spacing:.02em} .sn-footer__wordmark span{color:var(--accent)} .sn-footer__tagline{margin:0;font-size:var(--text-small);max-width:38ch;line-height:1.6} .sn-footer__col{display:flex;flex-direction:column;gap:10px;font-size:var(--text-small)} .sn-footer__heading{font-family:var(--font-display);font-weight:700;color:var(--text-on-dark);font-size:var(--text-small);letter-spacing:var(--tracking-overline);text-transform:uppercase;margin-bottom:4px} .sn-footer__link{color:var(--text-on-dark-muted);text-decoration:none} .sn-footer__link:hover{color:#fff;text-decoration:underline} .sn-footer__link[aria-current="page"]{color:#fff;font-weight:600;text-decoration:none} .sn-footer__link[aria-current="page"]:hover{color:#fff;text-decoration:underline} .sn-footer__contact{display:flex;gap:8px;align-items:center;color:var(--text-on-dark-muted);text-decoration:none} .sn-footer__contact:hover{color:#fff;text-decoration:none} .sn-footer__zone{font-size:var(--text-caption);color:var(--text-on-dark-muted);opacity:.75;line-height:1.6} .sn-footer__bottom{border-top:1px solid var(--border-on-dark)} .sn-footer__bottom-inner{max-width:1200px;margin:0 auto;padding:16px clamp(16px,4vw,24px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:var(--text-caption)} /* ============================================================================= * PAGE D'ACCUEIL — transposition de `Site Shaym Nettoyage.dc.html` * ========================================================================== */ /* ----------------------------------------------------------------------------- * Sections et titres de section * -------------------------------------------------------------------------- */ .sn-section{padding:clamp(56px,8vw,96px) 0;scroll-margin-top:76px} .sn-section--alt{background:var(--surface-alt)} .sn-section--plain{background:var(--gray-0)} .sn-section--bordered{border-top:1px solid var(--border-subtle)} .sn-section__inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,24px)} .sn-heading{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:var(--space-2xl)} .sn-heading__title{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:var(--weight-bold);color:var(--text-heading);margin:0} .sn-heading__lead{margin:12px 0 0;max-width:62ch;font-size:var(--text-lead);color:var(--text-muted);line-height:1.6} /* Le trait signature est plus resserré en tête de section qu'en tête de page. */ .sn-rule--tight{margin:10px 0 14px} .sn-overline--on-dark{color:var(--cyan-300)} /* ----------------------------------------------------------------------------- * Visuels — aucune image en dur : `the_post_thumbnail()` ou bloc neutre * -------------------------------------------------------------------------- */ .sn-media{position:relative;overflow:hidden;background:repeating-linear-gradient(45deg,var(--gray-200) 0 12px,var(--gray-100) 12px 24px)} .sn-media--hero{height:clamp(260px,30vw,380px);border-radius:var(--radius-lg)} .sn-media--card{aspect-ratio:16/9} .sn-media__img{display:block;width:100%;height:100%;object-fit:cover} .sn-media__label{position:absolute;left:16px;bottom:12px;color:var(--text-muted);font-size:.75rem;font-weight:500} /* Photo en place : les cadres pointillés et hachures du bloc de remplacement * disparaissent, seule l'image reste. */ .sn-media--filled{background:var(--gray-100);border:0} /* Variantes centrées : la légende occupe le centre du bloc plutôt que le coin. * `--card`, `--hero` et `--une` gardent leur légende en bas à gauche. */ .sn-media--usine,.sn-media--domaine,.sn-media--materiel,.sn-media--avant,.sn-media--apres,.sn-media--etape, .sn-media--defi,.sn-media--solution,.sn-media--openspace,.sn-media--frequence,.sn-media--vitrine,.sn-media--retail,.sn-media--carte{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px} .sn-media--usine .sn-media__label,.sn-media--domaine .sn-media__label,.sn-media--materiel .sn-media__label,.sn-media--avant .sn-media__label,.sn-media--apres .sn-media__label,.sn-media--etape .sn-media__label, .sn-media--defi .sn-media__label,.sn-media--solution .sn-media__label,.sn-media--openspace .sn-media__label,.sn-media--frequence .sn-media__label,.sn-media--vitrine .sn-media__label,.sn-media--retail .sn-media__label,.sn-media--carte .sn-media__label{position:static;left:auto;bottom:auto} .sn-media--filled.sn-media--usine,.sn-media--filled.sn-media--domaine,.sn-media--filled.sn-media--materiel,.sn-media--filled.sn-media--avant,.sn-media--filled.sn-media--apres,.sn-media--filled.sn-media--etape, .sn-media--filled.sn-media--defi,.sn-media--filled.sn-media--solution,.sn-media--filled.sn-media--openspace,.sn-media--filled.sn-media--frequence,.sn-media--filled.sn-media--vitrine,.sn-media--filled.sn-media--retail,.sn-media--filled.sn-media--carte{padding:0} /* Page industriel — blocs sur fond sombre (hachures claires sur navy). */ .sn-media--usine,.sn-media--materiel{background:repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 12px,rgba(255,255,255,.04) 12px 24px);border:1px solid var(--border-on-dark)} .sn-media--usine{height:clamp(240px,26vw,340px);border-radius:var(--radius-lg)} .sn-media--materiel{margin-top:var(--space-md);height:150px;border-radius:var(--radius-md)} .sn-media--usine .sn-media__label,.sn-media--materiel .sn-media__label{color:var(--text-on-dark-muted);font-size:.8125rem;font-weight:400;font-family:var(--font-mono)} .sn-media--domaine{min-height:180px;border-bottom:1px solid var(--border-subtle)} .sn-media--domaine .sn-media__label{font-size:.75rem;font-weight:400;font-family:var(--font-mono)} /* Page fin de chantier — cadres pointillés avant/après et vignettes d'étape. */ .sn-media--avant,.sn-media--apres{aspect-ratio:4/5;border-radius:var(--radius-md)} .sn-media--avant{background:var(--gray-100);border:2px dashed var(--gray-300)} .sn-media--apres{background:var(--navy-50);border:2px dashed var(--navy-300);margin-top:var(--space-lg)} .sn-media--avant .sn-media__label,.sn-media--apres .sn-media__label{font-size:.75rem;font-weight:400} .sn-media__eyebrow{font-family:var(--font-display);font-weight:700;font-size:var(--text-caption);letter-spacing:.06em;color:var(--text-faint)} .sn-media--apres .sn-media__eyebrow{color:var(--navy-700)} .sn-media--etape{flex:none;width:150px;height:96px;background:var(--gray-100);border:2px dashed var(--gray-300);border-radius:var(--radius-sm);padding:8px} .sn-media--etape .sn-media__label{font-size:.6875rem;color:var(--text-faint);font-weight:400} /* Page rénovation — diptyque défi / solution. */ .sn-media--defi,.sn-media--solution{height:150px;border-radius:var(--radius-md);margin-bottom:20px} .sn-media--defi{background:var(--gray-200);border:1px solid var(--gray-300)} .sn-media--solution{background:var(--gray-0);border:1px solid var(--navy-200)} .sn-media--defi .sn-media__label,.sn-media--solution .sn-media__label{font-size:.75rem;font-weight:400} /* Page tertiaire — visuel de hero et panneaux d'onglets. */ .sn-media--openspace{position:relative;height:clamp(280px,32vw,400px);background:var(--gray-100);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:20px} .sn-media--openspace .sn-media__label{font-size:.8125rem;font-weight:400} .sn-media--frequence{flex:1 1 280px;min-height:200px;background:var(--navy-50);border:1px solid var(--navy-100);border-radius:var(--radius-lg);padding:20px} .sn-media--frequence .sn-media__label{color:var(--navy-700);font-size:.8125rem;font-weight:400} /* Page commerces — bandeau de vitrine et blocs zig-zag. */ .sn-media--vitrine{margin-top:clamp(36px,5vw,56px);height:clamp(200px,26vw,320px);background:var(--navy-50);border:1px solid var(--navy-200);border-bottom:none;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:20px} .sn-media--vitrine .sn-media__label{color:var(--navy-700);font-weight:500;font-size:.875rem} .sn-media--retail{aspect-ratio:4/3;background:var(--navy-50);border:1px solid var(--navy-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:20px} .sn-media--retail .sn-media__label{color:var(--navy-700);font-weight:500;font-size:.8125rem} /* Page contact — emplacement de la carte. */ .sn-media--carte{margin-top:auto;height:170px;border:1px solid var(--border-on-dark);border-radius:var(--radius-md);background:repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 12px,rgba(255,255,255,.04) 12px 24px);padding:16px} .sn-media--carte .sn-media__label{color:var(--text-on-dark-muted);font-size:.8125rem;font-weight:400} /* Blog — visuel de l'article à la une (légende en bas à gauche). */ .sn-media--une{min-height:280px} .sn-media--une .sn-media__label{left:20px;bottom:16px} /* ----------------------------------------------------------------------------- * Hero * -------------------------------------------------------------------------- */ .sn-hero{background:var(--surface-dark-2);position:relative;overflow:hidden;scroll-margin-top:88px} .sn-hero__pattern{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px)} .sn-hero__inner{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,84px) clamp(16px,4vw,24px);position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,4vw,48px);align-items:center} .sn-hero__title{color:#fff;font-size:clamp(2.25rem,4.5vw,3.5rem);font-weight:var(--weight-extrabold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);text-wrap:balance;margin:0} .sn-hero__lead{color:var(--text-on-dark-muted);font-size:var(--text-lead);line-height:1.6;margin:18px 0 28px;max-width:52ch} .sn-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:28px} .sn-hero__badges{display:flex;flex-wrap:wrap;gap:8px} /* ----------------------------------------------------------------------------- * Bandeau de réassurance * -------------------------------------------------------------------------- */ .sn-reassurance{background:var(--gray-0);border-bottom:1px solid var(--border-subtle)} .sn-reassurance__inner{max-width:1200px;margin:0 auto;padding:18px clamp(16px,4vw,24px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px} .sn-reassurance__item{display:flex;align-items:center;gap:12px} .sn-reassurance__icon{flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--navy-50);color:var(--navy-700);display:flex;align-items:center;justify-content:center} .sn-reassurance__label{font-family:var(--font-display);font-size:.9375rem;font-weight:600;color:var(--navy-950)} /* ----------------------------------------------------------------------------- * Card — components/display/Card.jsx * -------------------------------------------------------------------------- */ .sn-card{display:block;box-sizing:border-box;padding:24px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)} .sn-card--p28{padding:28px} .sn-card--p32{padding:32px} .sn-card--hoverable{cursor:pointer} .sn-card--hoverable:hover{border-color:var(--navy-300);box-shadow:var(--shadow-md);transform:translateY(-2px);color:inherit} .sn-card--dark{background:var(--surface-dark-card);border-color:var(--border-on-dark);color:var(--text-on-dark)} /* ----------------------------------------------------------------------------- * ServiceCard — components/display/ServiceCard.jsx * -------------------------------------------------------------------------- */ .sn-service{height:100%;display:flex;flex-direction:column;gap:12px} .sn-service__icon{flex:none;width:48px;height:48px;border-radius:var(--radius-md);background:var(--navy-50);color:var(--navy-700);display:flex;align-items:center;justify-content:center} .sn-service__title{font-family:var(--font-display);font-size:var(--text-h4);font-weight:var(--weight-bold);color:var(--text-heading);letter-spacing:var(--tracking-heading)} .sn-service__desc{font-size:var(--text-small);color:var(--text-muted);line-height:var(--leading-body);flex:1} .sn-service__link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:var(--text-small);font-weight:var(--weight-semibold);color:var(--link)} .sn-service__link svg{transition:transform var(--duration-base) var(--ease-out)} .sn-card--hoverable:hover .sn-service__link svg{transform:translateX(3px)} /* ----------------------------------------------------------------------------- * Badge — components/display/Badge.jsx * -------------------------------------------------------------------------- */ .sn-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-full);font-family:var(--font-body);font-size:.75rem;font-weight:var(--weight-semibold);white-space:nowrap} .sn-badge--neutral{background:var(--gray-100);color:var(--gray-700)} .sn-badge--navy{background:var(--navy-50);color:var(--navy-700)} .sn-badge--accent{background:var(--orange-50);color:var(--orange-600)} .sn-badge--success{background:var(--success-bg);color:var(--success)} .sn-badge--error{background:var(--error-bg);color:var(--error)} .sn-badge--warning{background:var(--warning-bg);color:var(--warning)} .sn-badge--info{background:var(--info-bg);color:var(--cyan-700)} .sn-badge--on-dark{background:rgba(255,255,255,.1);color:var(--text-on-dark)} /* ----------------------------------------------------------------------------- * Grilles et cartes d'article * -------------------------------------------------------------------------- */ .sn-grid-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,216px),1fr));gap:var(--space-lg)} .sn-grid-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--space-lg)} .sn-post{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)} .sn-post:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--navy-300)} .sn-post__body{display:flex;flex-direction:column;gap:10px;padding:24px;flex:1} .sn-post__meta{display:flex;align-items:center;gap:10px} .sn-post__date{font-size:var(--text-caption);color:var(--text-faint)} .sn-post__title{font-size:var(--text-h4);font-weight:700;line-height:1.3;margin:0} .sn-post__excerpt{margin:0;font-size:var(--text-small);color:var(--text-muted);line-height:1.6} .sn-post__link{margin-top:auto;display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:var(--text-small);font-weight:600;color:var(--navy-600);text-decoration:none} .sn-post__link:hover{color:var(--navy-800);text-decoration:underline} /* Toute la carte est cliquable : le lien « Lire l'article » ne fait que 34 px * de haut, largement sous les 44 px confortables au doigt. Cette surcouche * étend sa zone sensible à la carte entière sans ajouter de second lien dans * l'arbre d'accessibilité — le titre reste un titre, pas un lien redondant. */ .sn-post{position:relative} .sn-post__link::after{content:"";position:absolute;inset:0} .sn-post:focus-within{border-color:var(--navy-300);box-shadow:var(--shadow-md)} /* ----------------------------------------------------------------------------- * Zone de conversion — devis * -------------------------------------------------------------------------- */ .sn-devis__cols{display:flex;flex-wrap:wrap;gap:var(--space-xl);align-items:flex-start} .sn-devis__aside{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:var(--space-md)} .sn-devis__aside-title{font-size:var(--text-h4);font-weight:700;margin:0} .sn-devis__aside-text{margin:0;font-size:var(--text-small);color:var(--text-muted);line-height:1.65} .sn-devis__form-col{flex:1.6 1 440px;min-width:0} .sn-infolist__row{display:flex;gap:12px;align-items:center;padding:9px 0} .sn-infolist__row + .sn-infolist__row{border-top:1px solid var(--border-subtle)} .sn-infolist__row svg{color:var(--navy-600)} .sn-infolist__row span{font-size:var(--text-small)} .sn-infolist__row a{font-size:var(--text-small);font-weight:600} .sn-callcard__title{color:#fff;font-size:var(--text-h4);font-weight:700;margin:0 0 12px} .sn-callcard__text{margin:0 0 18px;color:var(--text-on-dark-muted);font-size:var(--text-small);line-height:1.6} /* ----------------------------------------------------------------------------- * Formulaire — components/forms/*.jsx * -------------------------------------------------------------------------- */ .sn-form__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px 20px} .sn-form__full{grid-column:1 / -1} .sn-form__note{grid-column:1 / -1;font-size:var(--text-caption);color:var(--text-faint);text-align:center} /* Piège à robots : invisible pour l'humain, rempli par les scripts. */ .sn-form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .sn-field{display:flex;flex-direction:column;gap:6px} .sn-field__label{font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-semibold);color:var(--text-heading)} .sn-field__required{color:var(--error)} .sn-field__error{display:flex;align-items:center;gap:6px;color:var(--error);font-size:.8125rem} .sn-field__hint{color:var(--text-muted);font-size:.8125rem} .sn-control{box-sizing:border-box;width:100%;height:var(--control-h-md);padding:0 14px;font-family:var(--font-body);font-size:var(--text-body);color:var(--color-text-body);background:var(--gray-0);border:1px solid var(--border-default);border-radius:var(--radius-md);outline:none;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)} .sn-control:focus{border-color:var(--primary);box-shadow:var(--focus-ring)} .sn-control--error{border-color:var(--error)} .sn-control--error:focus{border-color:var(--error);box-shadow:var(--focus-ring-error)} .sn-control--textarea{height:auto;padding:12px 14px;resize:vertical;line-height:1.5} .sn-control[disabled]{background:var(--surface-inset);cursor:not-allowed;opacity:.6} .sn-select{position:relative} .sn-select select{appearance:none;-webkit-appearance:none;padding-right:40px} .sn-select__chevron{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted);display:flex} .sn-checkbox{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;font-family:var(--font-body);font-size:var(--text-small);color:var(--color-text-body);line-height:1.45} .sn-checkbox__box{position:relative;flex:none;width:20px;height:20px} .sn-checkbox__box input{position:absolute;inset:0;opacity:0;margin:0;cursor:inherit} .sn-checkbox__mark{position:absolute;inset:0;box-sizing:border-box;border-radius:var(--radius-sm);background:var(--gray-0);border:1.5px solid var(--border-default);display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);pointer-events:none} .sn-checkbox__mark svg{opacity:0;color:#fff} .sn-checkbox__box input:checked + .sn-checkbox__mark{background:var(--primary);border-color:var(--primary)} .sn-checkbox__box input:checked + .sn-checkbox__mark svg{opacity:1} .sn-checkbox__box input:focus-visible + .sn-checkbox__mark{box-shadow:var(--focus-ring)} .sn-checkbox--error .sn-checkbox__mark{border-color:var(--error)} /* ----------------------------------------------------------------------------- * Alert — components/feedback/Alert.jsx * -------------------------------------------------------------------------- */ .sn-alert{display:flex;gap:12px;padding:14px 16px;border:1px solid;border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-small);color:var(--color-text-body);line-height:1.5} .sn-alert__icon{margin-top:1px;display:flex} .sn-alert__title{font-weight:var(--weight-bold)} .sn-alert__body{margin-top:2px} .sn-alert--success{background:var(--success-bg);border-color:var(--success)} .sn-alert--success .sn-alert__title,.sn-alert--success .sn-alert__icon{color:var(--success)} .sn-alert--error{background:var(--error-bg);border-color:var(--error)} .sn-alert--error .sn-alert__title,.sn-alert--error .sn-alert__icon{color:var(--error)} .sn-alert--warning{background:var(--warning-bg);border-color:var(--yellow-400)} .sn-alert--warning .sn-alert__title,.sn-alert--warning .sn-alert__icon{color:var(--warning)} .sn-alert--info{background:var(--info-bg);border-color:var(--info)} .sn-alert--info .sn-alert__title,.sn-alert--info .sn-alert__icon{color:var(--cyan-700)} /* ============================================================================= * PAGES DE SERVICE — éléments partagés * ========================================================================== */ /* Fil d'Ariane — deux traitements : monospace sur fond sombre (industriel), * chevrons sur fond clair (fin de chantier). */ .sn-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--text-caption);margin-bottom:22px} .sn-breadcrumb--dark{font-family:var(--font-mono);letter-spacing:.04em} .sn-breadcrumb--dark a{color:var(--text-on-dark-muted);text-decoration:none} .sn-breadcrumb--dark a:hover{color:#fff;text-decoration:underline} .sn-breadcrumb--dark .sn-breadcrumb__sep{color:var(--text-on-dark-muted);opacity:.5} .sn-breadcrumb--dark .sn-breadcrumb__current{color:var(--cyan-300)} .sn-breadcrumb--light{color:var(--text-faint)} .sn-breadcrumb--light a{color:var(--text-muted);text-decoration:none} .sn-breadcrumb--light a:hover{color:var(--navy-800);text-decoration:underline} .sn-breadcrumb--light .sn-breadcrumb__current{color:var(--navy-700);font-weight:600} /* Étiquette technique monospace, réutilisée dans toute la page industriel. */ .sn-mono{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:var(--navy-600)} .sn-mono--on-dark{color:var(--cyan-300)} .sn-mono--accent{color:var(--orange-600)} /* Hachures diagonales des surfaces sombres, mutualisées. */ .sn-pattern{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px)} .sn-section--dark{background:var(--surface-dark-2)} /* Bandeau de conversion sombre, commun aux pages de service. */ .sn-cta-band{background:var(--surface-dark-2);position:relative;overflow:hidden} .sn-cta-band__pattern{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px)} .sn-cta-band__inner{max-width:1200px;margin:0 auto;padding:clamp(48px,6vw,72px) clamp(16px,4vw,24px);position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-lg)} .sn-cta-band__text{flex:1 1 400px;min-width:0} .sn-cta-band__title{color:#fff;font-size:clamp(1.625rem,3vw,2.25rem);font-weight:var(--weight-bold);margin:0 0 10px;text-wrap:balance} .sn-cta-band__lead{margin:0;color:var(--text-on-dark-muted);font-size:var(--text-lead);line-height:1.6} .sn-cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)} .sn-cta-band__eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:12px} .sn-cta-band__eyebrow-icon{flex:none;color:var(--accent);display:flex} /* Titre de section sur fond sombre. */ .sn-heading--on-dark .sn-heading__title{color:#fff} .sn-heading--on-dark .sn-heading__lead{color:var(--text-on-dark-muted)} /* ============================================================================= * PAGE « NETTOYAGE INDUSTRIEL » — `Nettoyage Industriel.dc.html` * ========================================================================== */ .sn-hero-tech{background:var(--surface-dark-2);position:relative;overflow:hidden} .sn-hero-tech__inner{max-width:1200px;margin:0 auto;padding:clamp(44px,6vw,72px) clamp(16px,4vw,24px) clamp(40px,5vw,56px);position:relative} .sn-hero-tech__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,4vw,48px);align-items:center} .sn-hero-tech__title{color:#fff;font-size:clamp(2.125rem,4vw,3.25rem);font-weight:var(--weight-extrabold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);text-wrap:balance;margin:0} .sn-hero-tech__lead{color:var(--text-on-dark-muted);font-size:var(--text-lead);line-height:1.6;margin:18px 0 26px;max-width:54ch} .sn-hero-tech__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)} /* Bandeau de chiffres clés : la grille de 1 px laisse voir le fond, ce qui * dessine les séparateurs sans bordure sur chaque cellule. */ .sn-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1px;background:var(--border-on-dark);border:1px solid var(--border-on-dark);border-radius:var(--radius-md);overflow:hidden;margin-top:clamp(32px,4vw,48px)} /* Le fond du conteneur dessine les séparateurs : une piste vide en fin de * grille apparaîtrait donc comme un bloc clair (mesuré : 351 × 93 px à 768 px). * `auto-fit` escamote les pistes entièrement vides, mais pas celle d'une * seconde ligne incomplète. Au-delà de 769 px le conteneur atteint 722 px et la * grille repasse à 3 colonnes : les 3 items remplissent leur ligne, la règle * n'a plus lieu d'être — et l'appliquer ferait alors couvrir toute la largeur * au 3e item. D'où la borne haute. */ @media (max-width:769px){ .sn-kpi__item:last-child:nth-child(odd){grid-column:1 / -1} } .sn-kpi__item{background:var(--surface-dark);padding:20px 24px;display:flex;align-items:center;gap:14px} .sn-kpi__icon{flex:none;width:44px;height:44px;border-radius:var(--radius-md);background:rgba(255,255,255,.06);border:1px solid var(--border-on-dark);color:var(--cyan-300);display:flex;align-items:center;justify-content:center} .sn-kpi__text{display:flex;flex-direction:column;gap:2px} .sn-kpi__value{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:#fff} .sn-kpi__label{font-size:var(--text-caption);color:var(--text-on-dark-muted)} /* Domaines d'intervention — grille asymétrique, la première carte occupe deux * rangées et porte le visuel. */ .sn-domaines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-lg);align-items:stretch} .sn-domaine{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:28px;gap:12px} .sn-domaine--principal{grid-row:span 2;padding:0;overflow:hidden;gap:0} .sn-domaine__body{padding:28px;display:flex;flex-direction:column;gap:12px;flex:1} .sn-domaine__title{font-size:var(--text-h3);font-weight:700;margin:0} .sn-domaine__text{margin:0;font-size:var(--text-small);color:var(--text-muted);line-height:1.65} .sn-domaine__list{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .sn-domaine__list li{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-small);color:var(--gray-700)} .sn-domaine__check{flex:none;color:var(--cyan-500);margin-top:2px;display:flex} /* Tableau du parc matériel, sur fond sombre. */ .sn-materiel{display:flex;flex-wrap:wrap;gap:var(--space-xl);align-items:flex-start} .sn-materiel__col{flex:1.2 1 400px;min-width:0} .sn-table-wrap{border:1px solid var(--border-on-dark);border-radius:var(--radius-md);overflow:hidden} .sn-table-wrap__head{background:rgba(255,255,255,.06);padding:14px 20px;border-bottom:1px solid var(--border-on-dark);display:flex;justify-content:space-between;align-items:center} /* Sous 375 px, le tableau à trois colonnes dépasse son conteneur : sans cette * zone défilante, l'`overflow:hidden` du cadre arrondi rognerait la colonne * « Rendement » — les chiffres les plus parlants de la page. */ .sn-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .sn-table-scroll:focus-visible{outline:2px solid var(--cyan-300);outline-offset:-2px} .sn-table-wrap__head svg{color:var(--text-on-dark-muted)} .sn-table{width:100%;border-collapse:collapse;font-size:var(--text-small);color:var(--text-on-dark)} .sn-table th{padding:12px 20px;font-family:var(--font-display);font-weight:700;color:var(--text-on-dark-muted);font-size:var(--text-caption);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border-on-dark);text-align:left} .sn-table td{padding:13px 20px;border-bottom:1px solid var(--border-on-dark)} .sn-table tr:last-child td{border-bottom:0} .sn-table__nom{font-weight:600} .sn-table__usage{color:var(--text-on-dark-muted)} .sn-table__valeur,.sn-table th:last-child{text-align:right} .sn-table__valeur{font-family:var(--font-mono);color:var(--cyan-300)} /* Accordéon des modes opératoires. */ .sn-accordeon__col{flex:1 1 360px;min-width:0;display:flex;flex-direction:column} .sn-accordeon__legende{margin-bottom:14px} .sn-accordeon{border:1px solid var(--border-on-dark);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column} .sn-accordeon__item{border-bottom:1px solid var(--border-on-dark)} .sn-accordeon__item:last-child{border-bottom:0} .sn-accordeon__bouton{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;background:transparent;border:none;cursor:pointer;text-align:left;font-family:inherit} .sn-accordeon__bouton:hover{background:rgba(255,255,255,.04)} .sn-accordeon__bouton:focus-visible{outline:2px solid var(--cyan-300);outline-offset:-2px} .sn-accordeon__titre{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:1rem;font-weight:600;color:#fff} .sn-accordeon__titre svg{color:var(--cyan-300)} .sn-accordeon__chevron{color:var(--text-on-dark-muted);display:flex;transition:transform var(--duration-base) var(--ease-out)} .sn-accordeon__bouton[aria-expanded="true"] .sn-accordeon__chevron{transform:rotate(180deg)} .sn-accordeon__panneau{margin:0;padding:0 20px 18px 50px;font-size:var(--text-small);color:var(--text-on-dark-muted);line-height:1.65} .sn-accordeon__panneau[hidden]{display:none} /* Bandeau sécurité — liseré orange en haut de carte. */ .sn-securite{background:var(--surface-alt);padding:clamp(48px,6vw,72px) 0} .sn-securite__carte{background:var(--surface-card);border:1px solid var(--border-default);border-top:4px solid var(--accent);border-radius:var(--radius-md);padding:clamp(24px,4vw,40px)} .sn-securite__cols{display:flex;flex-wrap:wrap;gap:var(--space-xl)} .sn-securite__intro{flex:1 1 320px;min-width:0} .sn-securite__badge{display:flex;align-items:center;gap:12px;margin-bottom:12px} .sn-securite__badge-icon{flex:none;width:44px;height:44px;border-radius:var(--radius-md);background:var(--orange-50);color:var(--orange-600);display:flex;align-items:center;justify-content:center} .sn-securite__titre{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:var(--weight-bold);color:var(--text-heading);margin:0 0 10px} .sn-securite__texte{margin:0;font-size:var(--text-body);color:var(--text-muted);line-height:1.65;max-width:56ch} .sn-securite__liste{flex:1 1 300px;min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0} .sn-securite__liste li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-subtle);font-size:var(--text-small);color:var(--gray-700)} .sn-securite__liste li:last-child{border-bottom:0} .sn-securite__liste strong{color:var(--text-heading)} .sn-securite__check{flex:none;color:var(--orange-600);display:flex} /* ============================================================================= * PAGE « FIN DE CHANTIER » — `Fin de Chantier.dc.html` * ========================================================================== */ .sn-hero-chantier{background:var(--gray-0);border-bottom:1px solid var(--border-subtle)} .sn-hero-chantier__inner{max-width:1200px;margin:0 auto;padding:clamp(44px,6vw,72px) clamp(16px,4vw,24px)} .sn-hero-chantier__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,4vw,56px);align-items:center} .sn-hero-chantier__badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .sn-hero-chantier__title{font-size:clamp(2.125rem,4vw,3.25rem);font-weight:var(--weight-extrabold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:balance;margin:0} .sn-hero-chantier .sn-rule{margin:18px 0} .sn-hero-chantier__lead{font-size:var(--text-lead);color:var(--text-muted);line-height:1.6;margin:0 0 28px;max-width:54ch} .sn-hero-chantier__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)} .sn-avant-apres{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)} /* Bannière « snagging inclus ». */ .sn-snagging{background:var(--surface-alt);padding:clamp(40px,5vw,64px) 0} .sn-snagging__carte{background:var(--surface-dark-2);border-radius:var(--radius-lg);overflow:hidden;position:relative} .sn-snagging__pattern{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px)} .sn-snagging__inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xl);padding:clamp(28px,4vw,44px)} .sn-snagging__sceau{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 8px} .sn-snagging__sceau-icon{width:72px;height:72px;border-radius:var(--radius-md);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center} .sn-snagging__sceau-label{font-family:var(--font-display);font-weight:800;font-size:var(--text-caption);letter-spacing:.1em;color:var(--orange-300)} .sn-snagging__body{flex:1 1 340px;min-width:0} .sn-snagging__titre{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:var(--weight-bold);margin:0 0 10px} .sn-snagging__texte{margin:0;color:var(--text-on-dark-muted);font-size:var(--text-body);line-height:1.65;max-width:64ch} .sn-snagging__badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} /* Timeline verticale de la méthode en 4 étapes. */ .sn-methode{background:var(--surface-alt);padding:0 0 clamp(56px,8vw,96px);scroll-margin-top:76px} /* La frise est une liste ordonnée : l'ordre des étapes a du sens hors CSS. */ .sn-timeline{max-width:860px;display:flex;flex-direction:column;list-style:none;margin:0;padding:0} .sn-timeline__etape{display:flex;gap:clamp(16px,3vw,28px)} .sn-timeline__rail{flex:none;display:flex;flex-direction:column;align-items:center} .sn-timeline__num{flex:none;width:56px;height:56px;border-radius:var(--radius-md);background:var(--navy-800);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.25rem;border:1px solid var(--navy-800)} .sn-timeline__etape--finale .sn-timeline__num{background:var(--accent);border-color:var(--accent)} .sn-timeline__trait{width:2px;flex:1;background:var(--navy-200);min-height:24px} .sn-timeline__contenu{padding-bottom:var(--space-xl);flex:1;min-width:0} .sn-timeline__etape--finale .sn-timeline__contenu{padding-bottom:0} .sn-timeline__carte{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:24px 28px;display:flex;flex-wrap:wrap;gap:var(--space-lg);align-items:center} .sn-timeline__etape--finale .sn-timeline__carte{box-shadow:var(--shadow-sm)} .sn-timeline__texte{flex:1 1 300px;min-width:0} .sn-timeline__entete{display:flex;align-items:center;gap:10px;margin-bottom:8px} .sn-timeline__entete svg{color:var(--navy-600)} .sn-timeline__etape--finale .sn-timeline__entete svg{color:var(--orange-600)} .sn-timeline__titre{font-size:var(--text-h4);font-weight:700;margin:0} .sn-timeline__desc{margin:0;font-size:var(--text-small);color:var(--text-muted);line-height:1.65} /* Garanties maître d'œuvre. */ .sn-garanties{background:var(--gray-0);border-top:1px solid var(--border-subtle);padding:clamp(56px,8vw,96px) 0} .sn-garanties__inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,24px);display:flex;flex-wrap:wrap;gap:var(--space-2xl);align-items:flex-start} .sn-garanties__intro{flex:1 1 320px;min-width:0} .sn-garanties__titre{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:var(--weight-bold);color:var(--text-heading);margin:0 0 12px} .sn-garanties__texte{margin:0 0 20px;font-size:var(--text-lead);color:var(--text-muted);line-height:1.6;max-width:52ch} .sn-garanties__liste{flex:1.2 1 400px;min-width:0;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--space-md)} .sn-garanties__liste li{display:flex;gap:14px;align-items:flex-start;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:20px} .sn-garanties__icon{flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--cyan-50);color:var(--cyan-700);display:flex;align-items:center;justify-content:center} .sn-garanties__item-texte{display:flex;flex-direction:column;gap:4px} .sn-garanties__item-texte strong{font-family:var(--font-display);font-size:1rem;color:var(--text-heading)} .sn-garanties__item-texte span{font-size:var(--text-small);color:var(--text-muted);line-height:1.55} /* ============================================================================= * PAGE « RÉNOVATION » — `Renovation.dc.html` * ========================================================================== */ /* Titre de section centré, employé par rénovation, tertiaire et commerces. */ .sn-heading--center{align-items:center;text-align:center;max-width:640px;margin-left:auto;margin-right:auto} .sn-heading--center .sn-rule{margin-left:auto;margin-right:auto} .sn-hero-centre{background:linear-gradient(180deg,var(--navy-50) 0%,var(--gray-0) 100%)} .sn-hero-centre__inner{max-width:840px;margin:0 auto;padding:clamp(56px,8vw,104px) clamp(16px,4vw,24px) clamp(48px,6vw,72px);display:flex;flex-direction:column;align-items:center;text-align:center} .sn-hero-centre .sn-breadcrumb{justify-content:center;margin-bottom:26px} .sn-hero-centre__title{font-size:clamp(2.125rem,4vw,3.25rem);font-weight:var(--weight-extrabold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:balance;margin:20px 0 0} .sn-hero-centre .sn-rule{margin:22px auto} .sn-hero-centre__lead{font-size:var(--text-lead);color:var(--text-muted);line-height:1.65;margin:0 0 32px;max-width:56ch} .sn-hero-centre__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm)} /* Split-screen défi / solution : une seule bordure englobe les deux colonnes. */ .sn-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:0;border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden} .sn-split__col{padding:clamp(28px,4vw,44px);border-bottom:1px solid var(--border-default)} .sn-split__col--defi{background:var(--gray-50)} .sn-split__col--solution{background:var(--navy-50)} .sn-split__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:var(--text-overline);font-weight:600;letter-spacing:var(--tracking-overline);color:var(--gray-600)} .sn-split__col--solution .sn-split__eyebrow{color:var(--navy-700)} .sn-split__title{font-size:var(--text-h3);font-weight:700;color:var(--text-heading);margin:14px 0 18px} .sn-split__col--solution .sn-split__title{color:var(--navy-900)} .sn-split__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .sn-split__list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--text-small);color:var(--gray-700);line-height:1.6} .sn-split__col--solution .sn-split__list li{color:var(--navy-900)} .sn-split__puce{flex:none;width:22px;height:22px;border-radius:50%;background:var(--gray-200);color:var(--gray-600);display:flex;align-items:center;justify-content:center;margin-top:1px} .sn-split__col--solution .sn-split__puce{background:var(--navy-700);color:#fff} /* Cartes « matériaux délicats » : centrées, pastille ronde. */ .sn-carte-centree{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:36px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px} .sn-carte-centree__icon{width:56px;height:56px;border-radius:50%;background:var(--navy-50);color:var(--navy-700);display:flex;align-items:center;justify-content:center} .sn-carte-centree h3{font-size:var(--text-h4);font-weight:700;margin:0} .sn-carte-centree p{margin:0;font-size:var(--text-small);color:var(--text-muted);line-height:1.65} /* Bandeau de typologies. */ .sn-typologies{background:var(--gray-0);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:clamp(36px,5vw,56px) 0} .sn-typologies__inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,24px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-md) var(--space-lg)} .sn-typologies__legende{font-family:var(--font-display);font-size:var(--text-overline);font-weight:600;letter-spacing:var(--tracking-overline);color:var(--text-faint)} .sn-typologie{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--navy-900)} .sn-typologie svg{color:var(--navy-600)} /* ============================================================================= * PAGE « TERTIAIRE & BUREAUX » — `Tertiaire et Bureaux.dc.html` * ========================================================================== */ .sn-hero-tertiaire{background:var(--gray-0)} .sn-hero-tertiaire__inner{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,88px) clamp(16px,4vw,24px)} .sn-hero-tertiaire__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,64px);align-items:center} .sn-hero-tertiaire__title{font-size:clamp(2.125rem,4vw,3.25rem);font-weight:var(--weight-extrabold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:balance;margin:18px 0 0} .sn-hero-tertiaire .sn-rule{margin:20px 0} .sn-hero-tertiaire__lead{font-size:var(--text-lead);color:var(--text-muted);line-height:1.65;margin:0 0 30px;max-width:54ch} .sn-hero-tertiaire__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:26px} .sn-hero-tertiaire__points{display:flex;flex-wrap:wrap;gap:16px 28px;font-size:var(--text-small);color:var(--text-muted)} .sn-hero-tertiaire__points span{display:flex;align-items:center;gap:8px} .sn-hero-tertiaire__points svg{color:var(--cyan-700)} /* Le visuel est décalé sur un aplat navy, d'où le padding et le calque absolu. */ .sn-hero-tertiaire__visuel{position:relative;padding:0 0 28px 28px} .sn-hero-tertiaire__fond{position:absolute;left:0;top:28px;right:28px;bottom:0;background:var(--navy-50);border-radius:var(--radius-xl)} .sn-cahier{background:var(--surface-alt);padding:clamp(56px,8vw,96px) 0} .sn-cahier__inner{max-width:1040px;margin:0 auto;padding:0 clamp(16px,4vw,24px)} .sn-cahier__carte{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:clamp(32px,5vw,64px)} .sn-cahier__heading{text-align:center;max-width:600px;margin:0 auto var(--space-xl)} .sn-cahier__heading .sn-rule{margin:10px auto 14px} .sn-cahier__titre{font-size:clamp(1.625rem,2.8vw,2.25rem);font-weight:var(--weight-bold);color:var(--text-heading);margin:0} .sn-cahier__lead{margin:12px 0 0;font-size:var(--text-lead);color:var(--text-muted);line-height:1.6} .sn-cahier__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:var(--space-lg)} .sn-cahier__item{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--gray-50);border-radius:var(--radius-lg)} .sn-cahier__icon{width:44px;height:44px;border-radius:50%;background:var(--gray-0);box-shadow:var(--shadow-sm);color:var(--navy-700);display:flex;align-items:center;justify-content:center} .sn-cahier__item strong{font-family:var(--font-display);font-size:1rem;color:var(--text-heading)} .sn-cahier__item span:last-child{font-size:var(--text-small);color:var(--text-muted);line-height:1.55} .sn-frequences{background:var(--gray-0);padding:clamp(56px,8vw,96px) 0;scroll-margin-top:76px} .sn-frequences__inner{max-width:1040px;margin:0 auto;padding:0 clamp(16px,4vw,24px)} .sn-tablist{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;background:var(--gray-50);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:6px;max-width:640px;margin:0 auto var(--space-xl)} .sn-tab{flex:1 1 160px;padding:12px 20px;border:none;border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-display);font-size:.9375rem;font-weight:600;transition:all var(--duration-base) var(--ease-out);background:transparent;color:var(--gray-700);box-shadow:none} .sn-tab[aria-selected="true"]{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-sm)} .sn-tab:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px} .sn-tabpanel{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;gap:var(--space-xl);align-items:center} .sn-tabpanel[hidden]{display:none} .sn-tabpanel__texte{flex:1 1 340px;min-width:0} .sn-tabpanel__entete{display:flex;align-items:center;gap:12px;margin-bottom:14px} .sn-tabpanel__icon{flex:none;width:48px;height:48px;border-radius:50%;background:var(--navy-50);color:var(--navy-700);display:flex;align-items:center;justify-content:center} .sn-tabpanel__titre{font-size:var(--text-h3);font-weight:700;margin:0} .sn-tabpanel__desc{margin:0 0 18px;font-size:var(--text-body);color:var(--text-muted);line-height:1.65} .sn-tabpanel__liste{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px 24px} .sn-tabpanel__liste li{display:flex;gap:10px;align-items:center;font-size:var(--text-small);color:var(--gray-700)} .sn-tabpanel__liste svg{flex:none;color:var(--cyan-700)} /* Cartes « discrétion & confiance » : sans bordure, ombre seule. */ .sn-carte-douce{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:32px;display:flex;flex-direction:column;gap:12px;transition:box-shadow var(--duration-base) var(--ease-out)} .sn-carte-douce:hover{box-shadow:var(--shadow-md)} .sn-carte-douce__icon{width:52px;height:52px;border-radius:50%;background:var(--navy-50);color:var(--navy-700);display:flex;align-items:center;justify-content:center} .sn-carte-douce h3{font-size:var(--text-h4);font-weight:700;margin:6px 0 0} .sn-carte-douce p{margin:0;font-size:var(--text-small);color:var(--text-muted);line-height:1.65} /* ============================================================================= * PAGE « COMMERCES » — `Commerces.dc.html` * ========================================================================== */ .sn-hero-commerces{background:var(--gray-0)} .sn-hero-commerces__inner{max-width:1200px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(16px,4vw,24px) 0} .sn-hero-commerces__texte{max-width:760px} .sn-hero-commerces__title{font-size:clamp(2.125rem,4vw,3.25rem);font-weight:var(--weight-extrabold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:balance;margin:18px 0 0} .sn-hero-commerces .sn-rule{margin:20px 0} .sn-hero-commerces__lead{font-size:var(--text-lead);color:var(--text-muted);line-height:1.65;margin:0 0 30px;max-width:56ch} .sn-hero-commerces__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)} .sn-heading--zigzag{max-width:640px;margin-bottom:var(--space-3xl)} .sn-zigzag{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(28px,4vw,64px);align-items:center;margin-bottom:clamp(48px,7vw,88px)} .sn-zigzag:last-child{margin-bottom:0} /* Bloc pair : le média passe à gauche. L'inversion est déclarée en fin de * feuille (§ Responsive 2), au seuil où les deux colonnes tiennent réellement. */ .sn-zigzag__num{font-family:var(--font-display);font-size:3rem;font-weight:800;line-height:1;color:var(--navy-200)} .sn-zigzag__titre{font-size:var(--text-h3);font-weight:700;margin:10px 0 12px} .sn-zigzag__desc{margin:0 0 16px;font-size:var(--text-body);color:var(--text-muted);line-height:1.7;max-width:50ch} .sn-zigzag__liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .sn-zigzag__liste li{display:flex;gap:10px;align-items:center;font-size:var(--text-small);color:var(--gray-700)} .sn-zigzag__liste svg{flex:none;color:var(--cyan-700)} .sn-horaires{background:var(--gray-0);padding:clamp(48px,6vw,72px) 0} .sn-horaires__carte{background:var(--surface-dark-2);border-radius:var(--radius-xl);position:relative;overflow:hidden} .sn-horaires__inner{position:relative;padding:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xl)} .sn-horaires__texte{flex:1 1 380px;min-width:0} .sn-horaires__eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:var(--text-overline);font-weight:600;letter-spacing:var(--tracking-overline);color:var(--cyan-300)} .sn-horaires__titre{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:var(--weight-bold);margin:14px 0 10px;text-wrap:balance} .sn-horaires__desc{margin:0;color:var(--text-on-dark-muted);font-size:var(--text-body);line-height:1.65;max-width:60ch} .sn-horaires__creneaux{flex:none;display:flex;flex-direction:column;gap:12px} .sn-creneau{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.06);border:1px solid var(--border-on-dark);border-radius:var(--radius-md);padding:14px 20px} .sn-creneau__heure{font-family:var(--font-display);font-size:1.375rem;font-weight:800;color:#fff;min-width:96px} .sn-creneau__libelle{font-size:var(--text-small);color:var(--text-on-dark-muted)} /* Bandeau de conversion clair, centré (variante commerces). */ .sn-cta-clair{background:var(--surface-alt);border-top:1px solid var(--border-subtle);padding:clamp(48px,6vw,72px) 0} .sn-cta-clair__inner{max-width:840px;margin:0 auto;padding:0 clamp(16px,4vw,24px);text-align:center} .sn-cta-clair__titre{font-size:clamp(1.625rem,3vw,2.25rem);font-weight:var(--weight-bold);color:var(--text-heading);margin:0 0 12px;text-wrap:balance} .sn-cta-clair__lead{margin:0 0 28px;font-size:var(--text-lead);color:var(--text-muted);line-height:1.6} .sn-cta-clair__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm)} /* ============================================================================= * PAGE « CONTACT & DEVIS » — `Contact et Devis.dc.html` * ========================================================================== */ .sn-contact{background:var(--surface-alt);padding:clamp(40px,6vw,72px) 0;scroll-margin-top:76px} .sn-contact__inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,24px);display:flex;flex-wrap:wrap;gap:var(--space-xl);align-items:stretch} .sn-contact__aside{flex:1 1 300px;min-width:0;background:var(--surface-dark-2);border-radius:var(--radius-lg);position:relative;overflow:hidden;display:flex;flex-direction:column} .sn-contact__aside-inner{position:relative;padding:clamp(28px,4vw,40px);display:flex;flex-direction:column;gap:var(--space-lg);flex:1} .sn-contact__titre{color:#fff;font-size:clamp(1.625rem,2.6vw,2.125rem);font-weight:var(--weight-bold);line-height:1.2;margin:0;text-wrap:balance} .sn-contact__lead{margin:14px 0 0;color:var(--text-on-dark-muted);font-size:var(--text-small);line-height:1.65} .sn-contact .sn-rule{margin:10px 0 16px} .sn-contact__coords{display:flex;flex-direction:column} .sn-contact__coord{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-on-dark);color:var(--text-on-dark);font-size:var(--text-small)} .sn-contact__coord:last-child{border-bottom:0} .sn-contact__coord svg{color:var(--cyan-300)} a.sn-contact__coord{color:#fff;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:1rem} a.sn-contact__coord:hover{color:var(--cyan-300);text-decoration:none} a.sn-contact__coord--mail{word-break:break-all} .sn-contact__atouts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .sn-contact__atouts li{display:flex;gap:10px;align-items:flex-start;color:var(--text-on-dark);font-size:var(--text-small);line-height:1.55} .sn-contact__atouts svg{flex:none;color:var(--accent);margin-top:1px} .sn-contact__form-col{flex:2 1 460px;min-width:0} .sn-contact__form-carte{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(24px,4vw,40px)} .sn-contact__form-entete{margin-bottom:24px} .sn-contact__form-titre{font-size:var(--text-h3);font-weight:700;margin:0 0 6px} .sn-contact__form-note{margin:0;font-size:var(--text-small);color:var(--text-muted)} /* Passerelle vers les extensions de formulaire (WPForms, Contact Form 7…). * Leur markup n'a pas nos classes : on rattache leurs champs natifs aux mêmes * styles de contrôle, pour que le shortcode hérite du design system. */ .sn-form-shortcode label{display:block;font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-semibold);color:var(--text-heading);margin-bottom:6px} .sn-form-shortcode input[type="text"],.sn-form-shortcode input[type="email"],.sn-form-shortcode input[type="tel"], .sn-form-shortcode input[type="url"],.sn-form-shortcode input[type="number"],.sn-form-shortcode input[type="date"], .sn-form-shortcode select,.sn-form-shortcode textarea{ box-sizing:border-box;width:100%;height:var(--control-h-md);padding:0 14px; font-family:var(--font-body);font-size:var(--text-body);color:var(--color-text-body); background:var(--gray-0);border:1px solid var(--border-default);border-radius:var(--radius-md); outline:none;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out); } .sn-form-shortcode textarea{height:auto;padding:12px 14px;resize:vertical;line-height:1.5} .sn-form-shortcode input:focus,.sn-form-shortcode select:focus,.sn-form-shortcode textarea:focus{border-color:var(--primary);box-shadow:var(--focus-ring)} .sn-form-shortcode input[type="submit"],.sn-form-shortcode button[type="submit"]{ display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;height:var(--control-h-lg);padding:0 32px; font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:1rem;letter-spacing:var(--tracking-button); background:var(--accent);color:var(--text-on-accent);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer; transition:background var(--duration-fast) var(--ease-out); } .sn-form-shortcode input[type="submit"]:hover,.sn-form-shortcode button[type="submit"]:hover{background:var(--accent-hover)} .sn-form-shortcode input[type="checkbox"],.sn-form-shortcode input[type="radio"]{accent-color:var(--primary);width:auto;height:auto} /* ============================================================================= * BLOG — `Blog.dc.html` (home.php) et lecture d'article (single.php) * ========================================================================== */ .sn-blog-hero{background:var(--gray-0);border-bottom:1px solid var(--border-subtle)} .sn-blog-hero__inner{max-width:1200px;margin:0 auto;padding:clamp(44px,6vw,72px) clamp(16px,4vw,24px)} .sn-blog-hero__title{font-size:clamp(2.125rem,4vw,3.25rem);font-weight:var(--weight-extrabold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:balance;margin:0;max-width:20ch} .sn-blog-hero__lead{font-size:var(--text-lead);color:var(--text-muted);line-height:1.6;margin:16px 0 0;max-width:56ch} .sn-une{background:var(--surface-alt);padding:clamp(40px,6vw,72px) 0 0} .sn-une__article{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden} .sn-une__body{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:14px} .sn-une__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .sn-une__titre{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:var(--weight-bold);line-height:1.25;color:var(--text-heading);margin:0;text-wrap:balance} .sn-une__extrait{margin:0;font-size:var(--text-body);color:var(--text-muted);line-height:1.65;max-width:56ch} .sn-articles{background:var(--surface-alt);padding:clamp(40px,6vw,64px) 0 clamp(56px,8vw,96px);scroll-margin-top:76px} .sn-articles__entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-xl)} .sn-articles__titre{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:var(--weight-bold);color:var(--text-heading);margin:0} .sn-filtres{display:flex;flex-wrap:wrap;gap:8px} .sn-filtre{padding:8px 16px;border-radius:999px;cursor:pointer;font-family:var(--font-display);font-size:var(--text-small);font-weight:600;transition:all var(--duration-fast) var(--ease-out);border:1px solid var(--border-default);background:var(--surface-card);color:var(--gray-700);text-decoration:none;display:inline-flex;align-items:center} .sn-filtre:hover{border-color:var(--navy-300);color:var(--navy-800);text-decoration:none} .sn-filtre[aria-current="page"]{border-color:var(--navy-700);background:var(--navy-700);color:#fff} .sn-filtre[aria-current="page"]:hover{color:#fff} /* Lecture d'un article : colonne étroite, mesure de lecture confortable. */ .sn-single{background:var(--gray-0);padding:clamp(40px,6vw,72px) 0} .sn-single__inner{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,24px)} .sn-single__entete{max-width:720px;margin:0 auto clamp(28px,4vw,40px)} .sn-single__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .sn-single__title{font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:var(--weight-extrabold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:balance;margin:0} .sn-single__chapo{font-size:var(--text-lead);color:var(--text-muted);line-height:1.65;margin:16px 0 0} .sn-single__media{max-width:900px;margin:0 auto clamp(28px,4vw,40px);border-radius:var(--radius-lg);overflow:hidden} /* 68 caractères par ligne : la mesure de lecture recommandée en typographie. */ .sn-single__body{max-width:68ch;margin:0 auto} .sn-single__pied{max-width:68ch;margin:clamp(40px,6vw,56px) auto 0;padding-top:24px;border-top:1px solid var(--border-subtle);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px} .sn-single__retour{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:var(--text-small);font-weight:600;color:var(--navy-600);text-decoration:none} /* La flèche « retour » réutilise `arrow-right`, retournée. */ .sn-single__retour-icone{transform:rotate(180deg)} .sn-single__retour:hover{color:var(--navy-800);text-decoration:underline} .sn-single__nav{max-width:68ch;margin:clamp(32px,5vw,48px) auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-md)} .sn-single__nav-lien{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);text-decoration:none;transition:border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)} .sn-single__nav-lien:hover{border-color:var(--navy-300);box-shadow:var(--shadow-sm);text-decoration:none} .sn-single__nav-sens{font-family:var(--font-display);font-size:var(--text-caption);font-weight:600;letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-faint)} .sn-single__nav-titre{font-family:var(--font-display);font-size:var(--text-small);font-weight:600;color:var(--text-heading);line-height:1.4} /* ----------------------------------------------------------------------------- * Gabarits génériques (page.php / index.php) — même grammaire visuelle * -------------------------------------------------------------------------- */ .sn-page{background:var(--gray-0);padding:clamp(40px,6vw,72px) 0} .sn-page__inner{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,24px)} .sn-page__body{max-width:680px} .sn-page__title{font-size:clamp(1.875rem,3.5vw,2.75rem);font-weight:var(--weight-extrabold);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:balance;margin:0 0 24px;max-width:24ch} /* Barre d'admin WordPress : le header sticky se cale dessous. */ .admin-bar .sn-header{top:32px} @media screen and (max-width:782px){.admin-bar .sn-header{top:46px}} /* ============================================================================= * RESPONSIVE — révision intégrale * * Les maquettes Claude Design ne définissent qu'un rendu desktop ; les grilles * `auto-fit` en déduisent seules le reste, ce qui produit sur tablette des * lignes orphelines et des pistes vides. Ce bloc, placé en fin de feuille, * fixe explicitement les trois paliers : * * Mobile 320 → 767 une colonne, cibles tactiles élargies * Tablette 768 → 1024 deux colonnes, marges resserrées * Desktop 1025 + rendu de la maquette, inchangé * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. Tablette — grilles à deux colonnes * -------------------------------------------------------------------------- */ @media (min-width:768px) and (max-width:1024px){ /* Sans cela : 3 à 4 colonnes de ~216 px, cartes écrasées. */ .sn-grid-services, .sn-grid-posts{grid-template-columns:repeat(2,minmax(0,1fr))} /* 4 items sur 3 colonnes laissaient un orphelin sur la seconde ligne. */ .sn-cahier__grille, .sn-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Formulaire de devis : à 1024 px la colonne mesurait 501 px pour un besoin * de 500 px — la grille basculait sur UNE colonne, rendant le formulaire * interminable. Deux colonnes explicites : ni 1 ni 3. */ .sn-form__grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Réassurance : 3 items en `space-between` se répartissaient en 2 + 1 avec * un vide au milieu. Grille explicite, dernier item pleine largeur. */ .sn-reassurance__inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px} .sn-reassurance__item:last-child:nth-child(odd){grid-column:1 / -1} /* Garanties (fin de chantier) : côte à côte, la liste n'avait que ~400 px * et retombait sur UNE colonne. On empile les deux blocs, la liste retrouve * la pleine largeur et ses deux colonnes. */ .sn-garanties__inner{flex-direction:column;gap:var(--space-xl)} .sn-garanties__intro, .sn-garanties__liste{flex:1 1 100%;width:100%} .sn-garanties__liste{grid-template-columns:repeat(2,minmax(0,1fr))} /* Marges de section : 82 px de haut et de bas à 1024 px gaspillaient * l'espace vertical d'un iPad. */ .sn-section,.sn-cahier,.sn-frequences,.sn-articles,.sn-securite,.sn-horaires{padding-top:64px;padding-bottom:64px} .sn-methode{padding-bottom:64px} .sn-garanties{padding-top:64px;padding-bottom:64px} .sn-une{padding-top:48px} .sn-articles{padding-top:48px} } /* ----------------------------------------------------------------------------- * 1 bis. Tablette en paysage — retour à trois colonnes * * Sur 1024 px de large, deux colonnes donnent des cartes de 476 px : massif, et * très loin du rendu desktop. Trois colonnes (~309 px) retrouvent la densité de * la maquette. Le seuil de 901 px laisse tous les iPad en portrait (768, 810, * 820, 834) sur deux colonnes. * * Ne concerne que les grilles dont le nombre d'items s'y prête. Les grilles à * 4 items — cahier des charges, garanties, pied de page — restent à deux * colonnes : à trois, elles retomberaient sur un orphelin en seconde ligne, * précisément le défaut corrigé plus haut. Le formulaire reste à deux colonnes * également, trois champs par ligne devenant illisibles à cette largeur. * -------------------------------------------------------------------------- */ @media (min-width:901px) and (max-width:1024px){ .sn-grid-services, .sn-grid-posts, .sn-reassurance__inner{grid-template-columns:repeat(3,minmax(0,1fr))} /* Les 3 items de la réassurance remplissent la ligne : la règle * « dernier item pleine largeur » du palier portrait n'a plus lieu d'être. */ .sn-reassurance__item:last-child:nth-child(odd){grid-column:auto} } /* ----------------------------------------------------------------------------- * 2. Zig-zag — inversion réservée aux largeurs où les deux colonnes tiennent * * Les colonnes ne se placent côte à côte qu'à partir de ~842 px * (2 × 380 px + gouttière). Le seuil d'inversion était à 820 px : entre les * deux, la grille était empilée mais l'ordre inversé plaçait la photo AVANT * le texte. Seuil relevé à 860 px, avec marge. * -------------------------------------------------------------------------- */ @media (min-width:860px){ .sn-zigzag--inverse .sn-zigzag__media{order:0} .sn-zigzag--inverse .sn-zigzag__texte{order:1} } /* ----------------------------------------------------------------------------- * 3. Mobile — empilements et débordements * -------------------------------------------------------------------------- */ @media (max-width:767px){ /* Split-screen empilé : le trait du bas de la dernière colonne doublait la * bordure du conteneur. */ .sn-split__col:last-child{border-bottom:0} /* Créneaux horaires (commerces) : `flex:none` empêchait toute réduction et * le bloc dépassait à 320 px. */ .sn-horaires__creneaux{flex:1 1 100%;min-width:0} .sn-creneau{flex-wrap:wrap} .sn-creneau__heure{min-width:0} /* Le sommaire latéral des mentions légales est masqué : la colonne de texte * prend toute la largeur. */ .sn-legal__body{max-width:none} } /* Très petits écrans : les titres de hero à 34-36 px produisaient 5 lignes de * 8 caractères. On descend d'un cran — `text-wrap:balance` gère le reste. */ @media (max-width:400px){ .sn-hero__title{font-size:1.875rem} .sn-hero-tech__title, .sn-hero-chantier__title, .sn-hero-centre__title, .sn-hero-tertiaire__title, .sn-hero-commerces__title, .sn-blog-hero__title, .sn-single__title, .sn-legal-hero__title{font-size:1.75rem} } /* ----------------------------------------------------------------------------- * 4. Cibles tactiles — 44 px minimum * * S'applique aux écrans jusqu'à 1024 px ET à tout pointeur grossier : un iPad * en paysage fait 1024 px de large mais reste tactile, et affiche la * navigation desktop. Les pointeurs fins (souris) gardent le rendu maquette. * -------------------------------------------------------------------------- */ @media (max-width:1024px),(pointer:coarse){ .sn-btn--sm{height:auto;min-height:44px} .sn-nav__link, .sn-nav__toggle{display:flex;align-items:center;min-height:44px} /* 42 px mesurés dans le panneau burger. */ .sn-mobile__sub{padding-top:11px;padding-bottom:11px} .sn-tab{min-height:44px} .sn-filtre{min-height:44px} .sn-toc__link{display:flex;align-items:center;min-height:44px} /* La case à cocher ne mesure que 20 px : on étend sa zone sensible sans * toucher à la mise en page. */ .sn-checkbox__box::after{content:"";position:absolute;inset:-12px} /* Lien « Lire l'article » : 22 px, sous le minimum recommandé. */ .sn-post__link{padding:6px 0} .sn-single__retour{padding:6px 0} }