/** * Aveline — site vitrine : adaptations tablette / téléphone (28-08-26). * * Le DESKTOP (>1080px) reste STRICTEMENT identique au design v8 : hormis le * bloc 0 (contours de titres, tous formats), toutes les règles vivent dans des * media queries ≤1080px et surchargent les styles * inline du markup (d'où les !important systématiques — un style inline ne * peut être battu que par une déclaration !important de feuille de style). * * Breakpoints alignés sur les apps (theme/breakpoints.ts) : * téléphone < 720 · tablette 720–1080 · desktop > 1080. * Cas particulier : le header compact s'applique dès 920px (la nav 6 entrées * ne tient plus sur une ligne avant la fin de la plage tablette). * * Classes posées dans index.html / contact.html (cf CHANGELOG 2026-08-28) : * .wrap conteneur max-width:1360 (padding horizontal adaptatif) * .header-row ligne logo / nav / toggle du header * .nav-main navigation principale (.hdr-home : la petite maison → accueil ; * .hdr-lieu : la punaise → plan du site ; les deux desktop seul, 19-09-26) * .h-display h1 géants (héros) .h-section h2 de section * .h-quote citations géantes (p) * .cols-2 grille 2 colonnes → 1 colonne sur téléphone * .cols-2-t grille 2 colonnes → 1 colonne dès la tablette * .hero-grid variante héros (colonne visuelle recentrée sur téléphone) * .grid-cards grilles de cartes 3 col → 2 (tablette) → 1 (téléphone) * .mosaic mosaïques avec cellules en span → 2 col → 1 col (spans neutralisés) * .grid-kpi bandeau chiffres 4 col → 2 → 1 * .form-grid grilles de champs 2 col → 1 col sur téléphone * .footer-grid footer 4/3 col → 2 → 1 * .mq bandeaux défilants (corps de texte réduit sur téléphone) * .bg-grid grille pointillée décorative (masquée sur téléphone) * .night-msg message fixe bas d'écran côté nuit * .egg-title titre de l'easter egg * .at-* accueil, planche d'imposition de « L'atelier » (bloc 14, 06-09-26) * .bk-* page 404 « casse-briques » (19-09-26) * Posées par site.js (téléphone, 05-09-26) : .hdr-burger (bouton du header), * .site-menu (panneau plein écran, accroché à ), html.has-menu / html.menu-open. */ /* ═══ 0.bis Header collant : réparation, tous formats (05-09-26) ═══ Chaque page déclare `position: sticky` sur son

depuis le design v8, mais le conteneur de version (`.side-jour` / `.side-nuit`) portait `overflow-x: hidden` pour ravaler les bandeaux penchés. Or `hidden` sur un axe fait calculer l'autre à `auto` : le conteneur devenait un bloc de défilement, et le header collait à un scrollport qui ne défile jamais, donc à rien. Correction dans le markup de chaque page : `overflow-x: hidden` suivi de `overflow-x: clip` (même rognage, sans bloc de défilement ; `hidden` reste en repli pour les navigateurs qui ignorent `clip`). Conséquence ici : toute cible d'ancre doit réserver la hauteur du header, sinon `href="#magasin"` amène le titre SOUS le bandeau. La marge est posée sur `[id]` et non sur `:target`, pour couvrir aussi les `scrollIntoView` appelés par les scripts de page ; un sélecteur d'id la surcharge si besoin (cf `#rz-app` de /realisations, calé sur la hauteur mesurée). */ :root { --hdr-h: 69px; } @media (max-width: 920px) { :root { --hdr-h: 97px; } } /* nav sur 2 lignes */ [id] { scroll-margin-top: calc(var(--hdr-h) + 16px); } /* ═══ 0.ter Fondu du contenu, header immobile (05-09-26) ═══ `header ~ *` = tout ce qui suit le header dans son conteneur, sur chaque page et dans chaque version : sections, bandeaux, footer. Le header, lui, ne bouge pas. Entrée : une animation CSS (donc rejouée à chaque apparition, y compris quand la bascule affiche l'autre version, et jouée même sans JS). Sortie : la classe `fade` posée par site.js avant de quitter la page ou d'échanger les versions, en `!important` pour passer devant les opacités/transitions inline des sections du côté nuit. */ @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } header ~ * { animation: pageIn .38s ease backwards; transition: opacity .22s ease; } html.fade header ~ * { opacity: 0 !important; transition-duration: .22s !important; } @media (prefers-reduced-motion: reduce) { header ~ * { animation: none; transition: none; } } /* ═══ 0.quater Point d'ouverture du magasin, à côté du numéro (05-09-26) ═══ Vert = ouvert (état posé dans le markup), rouge = fermé, décidé par site.js d'après l'heure de Paris. Le point pulse dans les deux cas. */ .hdr-dot[data-etat="ferme"] { background: #E23A2E !important; } /* ═══ 0. Contours de titres : chevauchements de glyphes masqués (04-09-26, TOUS formats) ═══ Bricolage Grotesque est une fonte variable dont les lettres sont construites par superposition de traits ; un contour seul (`color:transparent` + `-webkit-text-stroke`) dessine aussi ces chevauchements internes (« traits de coupe » dans R, Q, A…). Remède : `paint-order: stroke fill` + remplissage de la couleur du fond, qui recouvre la moitié intérieure du trait et ses chevauchements. Seule la moitié extérieure reste visible : les largeurs inline sont donc élargies (× 1,6) ci-dessous, cf. compensation. Le fond est porté par la variable `--outline-fill`, calée sur chaque contexte (`.space`, `.toile`, côté nuit, et tout élément à `background:#xxxxxx` inline). */ :root { --outline-fill: #FFFFFF; } .side-nuit { --outline-fill: #06060C; } .space { --outline-fill: #070B1A; } .toile { --outline-fill: #F6F4EF; } [style*="background:#00AEEF"] { --outline-fill: #00AEEF; } [style*="background:#06060C"] { --outline-fill: #06060C; } [style*="background:#070B1A"] { --outline-fill: #070B1A; } [style*="background:#08080F"] { --outline-fill: #08080F; } [style*="background:#0B0B14"] { --outline-fill: #0B0B14; } [style*="background:#0C0C12"] { --outline-fill: #0C0C12; } [style*="background:#121212"] { --outline-fill: #121212; } [style*="background:#17172A"] { --outline-fill: #17172A; } [style*="background:#1A1A1A"] { --outline-fill: #1A1A1A; } [style*="background:#2F6BDF"] { --outline-fill: #2F6BDF; } [style*="background:#33312C"] { --outline-fill: #33312C; } [style*="background:#524F47"] { --outline-fill: #524F47; } [style*="background:#6E6A5F"] { --outline-fill: #6E6A5F; } [style*="background:#6FB847"] { --outline-fill: #6FB847; } [style*="background:#8E897C"] { --outline-fill: #8E897C; } [style*="background:#8FFF62"] { --outline-fill: #8FFF62; } [style*="background:#ACA89B"] { --outline-fill: #ACA89B; } [style*="background:#CBC7BA"] { --outline-fill: #CBC7BA; } [style*="background:#D6336C"] { --outline-fill: #D6336C; } [style*="background:#E23A2E"] { --outline-fill: #E23A2E; } [style*="background:#E9E5DA"] { --outline-fill: #E9E5DA; } [style*="background:#EC008C"] { --outline-fill: #EC008C; } [style*="background:#F2B90D"] { --outline-fill: #F2B90D; } [style*="background:#F4F2EC"] { --outline-fill: #F4F2EC; } [style*="background:#F6F4EF"] { --outline-fill: #F6F4EF; } [style*="background:#FDFBF6"] { --outline-fill: #FDFBF6; } [style*="background:#FFE800"] { --outline-fill: #FFE800; } [style*="background:#FFFFFF"] { --outline-fill: #FFFFFF; } [style*="color:transparent"][style*="-webkit-text-stroke"] { paint-order: stroke fill; -webkit-text-fill-color: var(--outline-fill); letter-spacing: 2px; /* les contours voisins se touchaient */ display: inline-block; /* une translation n'agit pas sur un inline : inline-block (un `display:block` inline garde la main) */ } /* Compensation MODÉRÉE (retour utilisateur : une compensation exacte rétrécissait trop le corps des lettres). Pour un trait inline s : largeur 1,6 s (0,8 s visibles à l'extérieur), corps réduit de s / 0,7 (une seule épaisseur sur la hauteur des capitales ≈ 0,7 em) et remontée de 0,4 s (1 px pour s = 2,5 px : réglage validé à l'œil par l'utilisateur, 2 px était trop). `translate` se combine avec un `transform` inline et ne touche pas au positionnement (jamais `top`). Les surcharges téléphone refont le calcul. */ [style*="-webkit-text-stroke:1.8px"] { -webkit-text-stroke-width: 2.9px !important; font-size: calc(1em - 2.6px); translate: 0 -0.72px; } [style*="-webkit-text-stroke:2px"] { -webkit-text-stroke-width: 3.2px !important; font-size: calc(1em - 2.9px); translate: 0 -0.8px; } [style*="-webkit-text-stroke:2.5px"] { -webkit-text-stroke-width: 4px !important; font-size: calc(1em - 3.6px); translate: 0 -1px; } [style*="-webkit-text-stroke:3px"] { -webkit-text-stroke-width: 4.8px !important; font-size: calc(1em - 4.3px); translate: 0 -1.2px; } [style*="-webkit-text-stroke:3.5px"] { -webkit-text-stroke-width: 5.6px !important; font-size: calc(1em - 5px); translate: 0 -1.4px; } [style*="-webkit-text-stroke:6px"] { -webkit-text-stroke-width: 9.6px !important; font-size: calc(1em - 8.6px); translate: 0 -2.4px; } /* ─── Header compact (≤920px) : logo + toggle sur la 1re ligne, nav défilable horizontalement sur la 2e ─── */ @media (max-width: 920px) { .header-row { flex-wrap: wrap !important; row-gap: 10px !important; } .nav-main .hdr-home { display: none !important; } /* la maison est réservée au desktop : « Accueil » a son entrée dans le menu téléphone */ .nav-main .hdr-lieu { display: none !important; } /* idem pour la punaise → plan du site : le menu téléphone s'arrête à Contact, le pied de page porte le lien */ .nav-main { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start !important; gap: 16px !important; font-size: 11.5px !important; padding-bottom: 2px; scrollbar-width: none; } .nav-main::-webkit-scrollbar { display: none; } } /* ─── Tablette (720–1080px) ─── */ @media (min-width: 720px) and (max-width: 1080px) { .wrap { padding-left: 32px !important; padding-right: 32px !important; } .h-display { font-size: clamp(54px, 7.6vw, 82px) !important; } .h-section { font-size: clamp(38px, 4.6vw, 50px) !important; } .h-quote { font-size: clamp(34px, 4.4vw, 46px) !important; } .grid-cards { grid-template-columns: repeat(2, 1fr) !important; } .mosaic { grid-template-columns: repeat(2, 1fr) !important; } .grid-kpi { grid-template-columns: repeat(2, 1fr) !important; gap: 34px 0 !important; } .cols-2-t { grid-template-columns: 1fr !important; } .footer-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ─── Téléphone (<720px) ─── */ @media (max-width: 719px) { .wrap { padding-left: 18px !important; padding-right: 18px !important; } .header-row a > img { height: 30px !important; } .h-display { font-size: clamp(36px, 11vw, 46px) !important; } /* Seuls les mots EN CONTOUR sont recalculés : un sélecteur `span` nu posait aussi le trait de 3,2 px sur les mots pleins et sur les enveloppes de ligne, d'où des titres empâtés, aux lettres soudées, sur téléphone (corrigé 05-09-26). */ .h-display span[style*="-webkit-text-stroke"] { -webkit-text-stroke-width: 3.2px !important; font-size: calc(1em - 2.9px) !important; translate: 0 -0.8px !important; } /* s = 2px (bloc 0) */ .h-section { font-size: clamp(28px, 8.4vw, 34px) !important; } .h-section span[style*="-webkit-text-stroke"] { -webkit-text-stroke-width: 2.6px !important; font-size: calc(1em - 2.3px) !important; translate: 0 -0.64px !important; } /* s = 1.6px (bloc 0) */ .h-quote { font-size: clamp(26px, 7.6vw, 32px) !important; } /* Retours à la ligne forcés des titres (05-09-26) : les coupes sont dessinées pour 1400 px de large, sur 375 px elles hachent des lignes déjà courtes. Les
sont masqués (le markup porte une espace juste avant chacun, jamais rendue en desktop puisqu'en fin de ligne) et les lignes en `display:block` du héros de l'accueil redeviennent du texte courant, même quand la typographie change d'une ligne à l'autre. Les h3 sont concernés aussi (« la montgolfière » de /enseignes). */ h1 br, h2 br, h3 br, .h-quote br { display: none !important; } .h-display > span[style*="display:block"] { display: inline !important; } .cols-2, .cols-2-t { grid-template-columns: 1fr !important; gap: 28px !important; } .mg-legende { position: static !important; } /* légende de la montgolfière : hors flux en desktop (le titre se centre sur la photo seule), remise sous la photo une fois empilée */ /* Colonne visuelle du héros : recentrée et bornée une fois empilée. */ .hero-grid > div:last-child { width: 100%; max-width: 440px; margin: 0 auto; } /* Pastille tournante du héros accueil : ramenée dans le cadre. */ .hero-grid > div:last-child > div:first-child:not(:only-child) { left: -8px !important; top: -30px !important; width: 94px !important; height: 94px !important; } .grid-cards { grid-template-columns: 1fr !important; } .mosaic { grid-template-columns: 1fr !important; } /* En 1 colonne, les cellules en span 2 déborderaient : spans neutralisés. */ .mosaic > * { grid-column: auto !important; grid-row: auto !important; } .grid-kpi { grid-template-columns: 1fr !important; gap: 26px 0 !important; } .form-grid { grid-template-columns: 1fr !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 26px !important; } .mq { font-size: 20px !important; } .bg-grid { display: none !important; } .night-msg { white-space: normal !important; width: calc(100% - 40px); text-align: center; } .egg-title { font-size: 44px !important; } #egg > div > div:nth-child(2) { padding: 30px 24px !important; } } /* ─── Page 404 « casse-briques » (19-09-26) : feuille moins haute, boutons ◀ ▶ pour la raquette sur téléphone (la souris n'existe pas), boutons de bas de page empilés. ─── */ @media (max-width: 1080px) { .bk-sheet { height: clamp(380px, 56vh, 540px) !important; } } @media (max-width: 719px) { .bk .h-display { font-size: clamp(30px, 8.4vw, 40px) !important; } .bk-sheet { height: clamp(360px, 54vh, 460px) !important; box-shadow: 8px 8px 0 #121212 !important; } .bk-ticket { font-size: 10px !important; gap: 14px 18px !important; } .bk-ticket > span:first-child { flex: 1 1 100%; } .bk-pad { display: flex !important; flex: 1 1 100%; justify-content: center; } .bk .cols-2 > div { justify-content: flex-start !important; } .bk .cols-2 a { width: 100%; text-align: center; box-sizing: border-box; } } } } /* ─── Page L'atelier v2 (mise en forme disruptive, 28-08-26) ─── */ @media (max-width: 719px) { /* Timeline zigzag → rail unique à gauche, cartes pleine largeur droites. */ .tl-line { left: 7px !important; transform: none !important; } .tl-row { grid-template-columns: 1fr !important; padding-left: 34px; margin-bottom: 30px !important; } .tl-card { grid-column: 1 !important; justify-self: stretch !important; width: 100% !important; transform: none !important; } .tl-dot { left: 8px !important; top: 30px !important; } /* Numéros de chapitre et filigrane : réduits pour ne pas envahir. */ .story-num { font-size: 64px !important; top: -46px !important; left: -6px !important; } .wm-1957 { font-size: 96px !important; bottom: calc(100% - 26px) !important; } .tl-cont { left: 7px !important; transform: none !important; height: 54px !important; } .tl-mask { left: 8px !important; top: 0 !important; height: 30px !important; } /* Polaroïds : aplomb retrouvé, ombre plus courte. */ .polaroid { transform: none !important; box-shadow: 7px 7px 0 #121212 !important; } } /* Pellicule d'archives entre les chapitres et les dates (17-09-26) : bande noire penchée de +1,6° (angle inverse du bandeau du haut), perforations blanches sur les deux rails, quatorze tirages qui défilent en boucle (keyframes `mq`). Desktop = vues de 116 px (réduites d'un tiers le 17-09-26, la bande de 172 était jugée trop massive) ; tablette 100 ; téléphone 78, marges resserrées, et la bande respire moins pour ne pas manger un demi-écran de 667 px. Les perforations (petit SVG arrondi répété, look négatif 35 mm) sont le fond de la piste avec la base orange : elles défilent avec les vues, et le pas des trous doit diviser vue + marges (8 trous par vue), sinon la boucle saute au retour à zéro. Tablette : 100 + 2 × 6 = 112 = 8 × 14. Téléphone : 78 + 2 × 5 = 88 = 8 × 11. */ @media (max-width: 1080px) { .film-frame { height: 100px !important; margin: 0 6px !important; } .film-track { background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2214%22 height=%226%22%3E%3Crect x=%223%22 y=%220%22 width=%228%22 height=%226%22 rx=%221.6%22 fill=%22%23FFFFFF%22/%3E%3C/svg%3E') 0 10px / 14px 6px repeat-x, url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2214%22 height=%226%22%3E%3Crect x=%223%22 y=%220%22 width=%228%22 height=%226%22 rx=%221.6%22 fill=%22%23FFFFFF%22/%3E%3C/svg%3E') 0 calc(100% - 12px) / 14px 6px repeat-x, linear-gradient(180deg, #3E1006 0%, #2E0B04 55%, #260903 100%) !important; } } @media (max-width: 719px) { .film-wrap { padding: 18px 0 52px !important; margin-bottom: -28px !important; } .film { box-shadow: 0 8px 18px rgba(40,10,3,0.32) !important; } .film-track { padding: 24px 0 !important; background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2211%22 height=%225%22%3E%3Crect x=%222.5%22 y=%220%22 width=%226%22 height=%225%22 rx=%221.3%22 fill=%22%23FFFFFF%22/%3E%3C/svg%3E') 0 8px / 11px 5px repeat-x, url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2211%22 height=%225%22%3E%3Crect x=%222.5%22 y=%220%22 width=%226%22 height=%225%22 rx=%221.3%22 fill=%22%23FFFFFF%22/%3E%3C/svg%3E') 0 calc(100% - 10px) / 11px 5px repeat-x, linear-gradient(180deg, #3E1006 0%, #2E0B04 55%, #260903 100%) !important; } .film-frame { height: 78px !important; margin: 0 5px !important; } } /* Comité de direction (atelier, 17-09-26) : 4 portraits → 2 colonnes dès la tablette, 2 aussi sur téléphone (quatre portraits à la file feraient un écran par tête) ; ombre raccourcie sur téléphone, à la manière des polaroïds (couleur lue dans `--codir-c`, posée en inline sur chaque fiche). */ @media (max-width: 1080px) { .codir-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 719px) { .codir-grid { gap: 30px 18px !important; } .codir-photo { box-shadow: 6px 6px 0 var(--codir-c, #121212) !important; } .codir-card h3 { font-size: 15px !important; margin-top: 18px !important; } .codir-role { font-size: 10.5px !important; } .codir-photo > span:last-child { font-size: 9px !important; left: 8px !important; bottom: 6px !important; } } /* « Les archives » (atelier, 17-09-26) : le rayonnage est dessiné à taille fixe (580 px) ; en dessous de 1080 il est réduit à l'échelle depuis son coin bas gauche et sa scène raccourcie en conséquence, sous le texte sur téléphone. */ @media (max-width: 1080px) { .arch-stage { height: 210px !important; max-width: 464px !important; } .arch-shelf { transform: scale(0.8); } } @media (max-width: 719px) { .arch-row { gap: 36px !important; } .arch-stage { height: 152px !important; max-width: 336px !important; } .arch-shelf { transform: scale(0.58); } } /* Badges de chapitre (atelier) : l'écart qui dégage le numéro 01/02 est réduit sur téléphone où le numéro est plus petit. */ @media (max-width: 719px) { .story-chip { margin-top: 2px !important; } .hero-grid > div:last-child { margin-top: 52px !important; } /* Chapitres : 104 px entre deux histoires, c'est un écran vide sur 375 px. */ .story-row { margin-bottom: 56px !important; } .story-row:last-child { margin-bottom: 16px !important; } /* Appel final : l'étiquette « Sans rendez-vous », posée en absolu à droite du titre, le recouvrait ; elle passe au-dessus, dans le flux. */ section[style*="padding:88px 44px 74px"] > div[style*="right:10%"] { position: static !important; transform: none !important; margin-bottom: 18px; } section[style*="padding:88px 44px 74px"] > div[style*="right:10%"] > span { transform: rotate(-2deg) !important; } } /* ─── Pages métier v2 : layouts distincts (28-08-26) ─── */ @media (min-width: 720px) and (max-width: 1080px) { .g4 { grid-template-columns: repeat(2, 1fr) !important; } /* process enseignes */ .inv-grid { grid-template-columns: repeat(2, 1fr) !important; } /* inventaire objet */ .inv-last { grid-column: span 2 !important; } } @media (max-width: 719px) { .g4 { grid-template-columns: 1fr !important; } .g4 > div { transform: none !important; } .photo-strip img { height: 140px !important; } .tech-tag { transform: none !important; } /* étiquettes textile */ .tag-hero { transform: none !important; box-shadow: 8px 8px 0 #121212 !important; } .ticket { transform: none !important; } /* ticket objet */ .inv-grid { grid-template-columns: repeat(2, 1fr) !important; } .inv-last { grid-column: span 2 !important; } .sizes-band { gap: 14px !important; } } /* ─── /enseignes v3 « sortie de presse » (28-08-26) ─── */ @media (min-width: 720px) and (max-width: 1080px) { .g3 { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 1080px) { .cmyk-side { display: none !important; } /* barre verticale de contrôle : desktop only */ .sep-coupe-repere { position: static !important; transform: none !important; } /* trait de coupe : plus de barre à viser, la croix revient à droite dans le flux */ .met-step::before, .met-step::after { display: none !important; } /* flèches de « La méthode » : sur 2 colonnes ou 1, le parcours ne se lit plus en ligne */ } @media (max-width: 719px) { .g3 { grid-template-columns: 1fr !important; } .crop { display: none !important; } /* traits de coupe : trop denses sur petit écran */ .duo-photos { grid-template-columns: 1fr !important; } .ink-bar { justify-content: flex-start !important; } .stamp { font-size: 14px !important; padding: 8px 12px !important; } /* Appel final : le tampon « Devis gratuit », posé en absolu au coin du titre, le recouvrait ; il passe au-dessus, dans le flux. */ div[style*="top:-32px; right:-16px"] { position: static !important; margin-bottom: 16px; } } /* ─── /objet v3 « nouvelle ère » (02-09-26) : cockpit, orbites, compte à rebours ─── */ @media (min-width: 720px) and (max-width: 1080px) { .obj-hero { grid-template-columns: 1fr !important; gap: 40px !important; } .orbit-wrap { grid-template-columns: 1fr !important; } .launch-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 719px) { .obj-hero { grid-template-columns: 1fr !important; gap: 30px !important; } .obj-hero > div:last-child { padding: 40px 0 44px !important; } .porthole { width: min(100%, 300px) !important; } .porthole-orbit2 { display: none !important; } /* 2e orbite : déborde du cadre */ .hud-side { display: none !important; } /* annotations latérales du hublot */ .obj-console-row { gap: 16px !important; } .orbit-wrap { grid-template-columns: 1fr !important; gap: 36px !important; } /* Orbites : rayons ramenés à l'échelle d'un système de 300 px environ. */ .orbit-sys { width: min(100%, 320px) !important; } .orbit-ring:nth-child(1) .orbit-item { transform: rotate(var(--a, 0deg)) translate(136px) rotate(calc(-1 * var(--a, 0deg))) !important; } .orbit-ring:nth-child(2) .orbit-item { transform: rotate(var(--a, 0deg)) translate(96px) rotate(calc(-1 * var(--a, 0deg))) !important; } .orbit-ring:nth-child(3) .orbit-item { transform: rotate(var(--a, 0deg)) translate(52px) rotate(calc(-1 * var(--a, 0deg))) !important; } .orbit-chip { font-size: 9.5px !important; padding: 4px 7px !important; box-shadow: 2px 2px 0 #121212 !important; } .orbit-chip .tech-note { display: none !important; } .orbit-sys > div:nth-last-child(2) { width: 70px !important; height: 70px !important; margin: -35px 0 0 -35px !important; font-size: 9.5px !important; } .launch-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .launch-svg { display: none !important; } /* trajectoire : desktop / tablette */ .station.is-lit { transform: none !important; } .tilt { transform: none !important; box-shadow: 8px 8px 0 #2F6BDF !important; } } /* ─── /textile v3 « lookbook » (04-09-26) : lookbook, ruban, bento, rail, étiquette, portant ─── */ @media (min-width: 720px) and (max-width: 1080px) { .tx-hero { grid-template-columns: 1fr !important; gap: 44px !important; } .look { margin-top: 30px; } .tx-bento { grid-template-columns: repeat(2, 1fr) !important; } .tx-label { grid-template-columns: 1fr !important; gap: 40px !important; } .tx-hangers { grid-template-columns: repeat(3, 1fr) !important; row-gap: 40px !important; } } @media (max-width: 719px) { .tx-hero { grid-template-columns: 1fr !important; gap: 34px !important; } .look { margin-top: 26px; width: 100% !important; } .look-frame { transform: none !important; box-shadow: 8px 8px 0 #F2B90D !important; } .look-tag { right: 14px !important; } .care { position: static !important; width: 100% !important; transform: none !important; margin-top: 18px; box-shadow: 4px 4px 0 #121212 !important; } .ruban { height: 60px !important; } .ruban-word { font-size: 18px !important; padding: 0 14px !important; } .ruban-cm { width: 44px !important; } .tx-bento { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; } .tx-bento .tile { min-height: 150px; } .tx-bento .tile.big, .tx-bento .tile.wide, .tx-bento .tile.tall { grid-column: auto !important; grid-row: auto !important; } .tx-bento .tile.photo { height: 320px; } .tx-rail-btn { display: none !important; } /* le rail se fait glisser au doigt */ .rail { padding-left: 18px !important; padding-right: 18px !important; scroll-padding: 0 18px !important; } .tx-label { grid-template-columns: 1fr !important; gap: 34px !important; } .etiq { transform: none !important; box-shadow: 8px 8px 0 #121212 !important; padding: 26px 18px 20px !important; } .etiq .pictos div { max-width: 46% !important; } .tx-hangers { grid-template-columns: repeat(2, 1fr) !important; row-gap: 36px !important; padding: 0 !important; } .rail-bar { margin: 0 8px !important; } } /* /objet, frise « Transmission » : le pointillé qui relie les 4 escales n'a de sens qu'en 4 colonnes. */ @media (max-width: 1080px) { .obj-kpi > div[aria-hidden] { display: none !important; } .obj-kpi > div { padding: 0 8px !important; } } /* ─── /batiment v4 « poussez la porte » (04-09-26) : héros, porte, lés, lames, couches ─── */ @media (min-width: 720px) and (max-width: 1080px) { .bt-hero { grid-template-columns: 1fr !important; gap: 50px !important; } .vitrine { max-width: 640px; margin: 0 auto; } .bt-magasin { grid-template-columns: 1fr !important; gap: 30px !important; } .porte { height: 520px !important; } .marques { grid-template-columns: repeat(3, 1fr) !important; } /* Côté matériel (19-09-26) : une carte par ligne. */ .materiel { grid-template-columns: 1fr !important; } .les { height: 520px !important; } .le .photo { height: 260px !important; } /* 19-09-26 : photo plus haute, sans toucher la fiche */ .lame { grid-template-columns: 220px 1fr !important; } .bt-couches { grid-template-columns: 1fr !important; gap: 40px !important; } } @media (max-width: 719px) { .bt-hero { grid-template-columns: 1fr !important; gap: 36px !important; } .vitrine { padding: 0 0 56px 0 !important; } .vitrine .cadre { transform: none !important; box-shadow: 8px 8px 0 #E23A2E !important; } .vitrine .cadre img { height: 260px !important; } .sticker { right: -6px !important; top: -16px !important; font-size: 11px !important; padding: 9px 11px !important; } .fiche-teinte { width: 78px !important; height: 116px !important; margin-right: -30px !important; } .fiche-teinte b { font-size: 10px !important; padding: 6px 6px 0 !important; } .fiche-teinte span { font-size: 8.5px !important; padding: 2px 6px 6px !important; } .fiche-teinte i em { font-size: 7px !important; } .teinte { width: 128px !important; } .teinte i { height: 52px !important; } .bt-magasin { grid-template-columns: 1fr !important; gap: 26px !important; } /* La porte (19-09-26) : neuf photos en 3 × 3 cases égales, sans étiquettes, trop petites ici. */ .porte { height: 400px !important; } .porte .interieur { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(3, 1fr) !important; gap: 4px !important; padding: 4px !important; } .porte .interieur > a { grid-column: auto !important; grid-row: auto !important; } .porte .interieur .cap { display: none !important; } /* Côté matériel (19-09-26) : cartes empilées, visuel en bandeau au-dessus du texte. */ .materiel { grid-template-columns: 1fr !important; gap: 20px !important; } .mtl-card { grid-template-columns: 1fr !important; box-shadow: 6px 6px 0 #121212 !important; } .mtl-visuel { min-height: 200px !important; border-right: 0 !important; border-bottom: 3px solid #121212; } .mtl-txt { padding: 18px 18px 20px !important; } .mtl-txt h3 { font-size: 22px !important; } .poignee { padding: 12px 16px !important; font-size: 12px !important; } /* Lés : l'accordéon horizontal devient une pile verticale, chaque lé se déroule vers le bas. */ .les { flex-direction: column !important; height: auto !important; gap: 14px !important; } .le { flex: none !important; height: 96px; transition: height .5s cubic-bezier(.2,.8,.2,1) !important; } .le.open { height: auto; min-height: 420px; } .le .titre { writing-mode: horizontal-tb !important; transform: none !important; left: 14px !important; top: 40px !important; bottom: auto !important; font-size: 17px !important; padding: 8px 12px !important; } .le .photo { height: 200px !important; } /* 19-09-26 : 150 → 200, la fiche descend d'autant */ .le.open .fiche { position: relative !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 260px 14px 14px !important; } .le:not(.open) .fiche, .le:not(.open) .photo { display: none; } /* Les étiquettes « LÉ 0x » et le tube gris de rouleau sont retirés depuis le 17-09-26 : plus de règle `.le .num`. */ .bt-mural { grid-template-columns: 1fr !important; } /* Lames : plus de biseau ni de décalage, échantillon en bandeau au-dessus du texte. */ .lames { padding: 0 !important; gap: 14px !important; } .lame { grid-template-columns: 1fr !important; transform: none !important; margin: 0 !important; box-shadow: 6px 6px 0 #121212 !important; } .lame > .txt { transform: none !important; } .lame .ech i { transform: none !important; inset: 0 !important; } /* plus de biseau à compenser */ .lame .ech { height: 90px; margin: 0 !important; padding: 0 !important; border-right: 0 !important; border-bottom: 2.5px solid #121212; } .lame .txt { padding: 18px 18px 20px !important; } .bt-qui { grid-template-columns: 1fr !important; } /* Coup de rouleau (17-09-26) : bande plus basse, rouleau aux deux tiers, note en 9 px. */ .rl { height: 104px !important; } .rl-bande { top: 32px !important; height: 40px !important; } .rl-rouleau { top: 18px !important; width: 100px !important; height: 80px !important; margin-left: -10px !important; } .rl-note { left: 20px !important; top: 8px !important; font-size: 9px !important; } /* Macaron QUALIBAT : sous le titre, centré (16-09-26) */ .bt-titre-macaron { display: block !important; } .macaron-titre { position: static !important; display: block; margin: 22px auto 0 !important; width: 120px !important; height: 120px !important; transform: rotate(7deg) !important; } .marques { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } .marque { box-shadow: 4px 4px 0 #121212 !important; } .marque:not(.sombre) img { inset: 12px 14px !important; width: calc(100% - 28px) !important; height: calc(100% - 24px) !important; } /* cofinancement v4 (16-09-26) : ligne discrète, logos un peu plus petits sur téléphone */ .cofi { margin-top: 36px !important; padding-top: 18px !important; gap: 14px 24px !important; } .cofi-logos { gap: 20px !important; } .cofi-logos img { height: 30px !important; } /* trait de coupe sous le héros (17-09-26) : sur téléphone on garde les ciseaux et le repère, pas la gamme */ .sep-coupe { padding: 0 20px !important; } .sep-coupe-gamme { display: none !important; } /* la route des véhicules (17-09-26) : moins haute, et on la fait glisser au doigt (sept véhicules ne tiennent pas sur 375 px ; deux rangées casseraient la ligne médiane) */ .vh-band { margin-top: 44px !important; --vh-line: 62px; } /* 22 + 34 + 8 */ .vh-frise { justify-content: flex-start !important; gap: 30px !important; padding: 22px 36px 20px !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* la bande déborde de 3 % de chaque côté : on garde le premier picto dans l'écran */ .vh-frise::-webkit-scrollbar { display: none; } .vh-item { gap: 16px !important; } .vh-item svg { width: 34px !important; height: 34px !important; } .bt-couches { grid-template-columns: 1fr !important; gap: 34px !important; } .couche { grid-template-columns: 96px 1fr !important; } .couche .bande b { font-size: 9.5px !important; left: 8px !important; } } /* ═══ 9. Galerie des réalisations (/realisations, 05-09-26) ═══ La mosaïque utilise `columns: 300px` : le nombre de colonnes s'adapte tout seul, aucune media query n'est nécessaire pour la grille elle-même. Ne sont repris ici que le héros (planche de tirages), la barre de filtres et la visionneuse. */ @media (max-width: 1080px) { /* Le héros passe sur une colonne : la planche prendrait toute la largeur. */ .rz-planche { max-width: 560px !important; margin: 0 auto !important; } /* `width:100%` reste posé côté page : une marge auto désactive l'étirement de la cellule de grille */ .rz-kpi > div { border-left: 0 !important; padding-left: 0 !important; } .rz-grid { padding-top: 26px !important; } .rz-bar-in { padding-top: 12px !important; padding-bottom: 12px !important; } } @media (max-width: 719px) { /* La planche du héros perd son désordre : trois tirages superposés ne tiennent pas sur 375 px, on garde deux vignettes alignées. */ .rz-planche { aspect-ratio: auto !important; max-width: none !important; display: flex !important; gap: 12px !important; } .rz-tirage { position: static !important; width: auto !important; flex: 1 1 0 !important; transform: none !important; padding: 5px !important; } .rz-tirage:nth-child(3) { display: none !important; } /* 13 catégories = un pavé de pastilles trop haut pour une barre collante : on passe au défilement horizontal, comme la nav du header. */ .rz-bar-in { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 7px !important; padding-top: 11px !important; padding-bottom: 11px !important; } .rz-bar-in::-webkit-scrollbar { display: none; } .rz-chip { font-size: 11px !important; padding: 7px 12px !important; } /* Chiffres du héros empilés : le filet vertical n'a plus de sens en colonne. */ .rz-kpi > div { padding-right: 0 !important; } /* Le caisson de la citation (côté nuit) : 54 px de marge intérieure ne laissaient plus que 228 px au texte sur un écran de 375. */ .nz-box { padding: 42px 22px 34px !important; } .rz-grid { columns: 1 !important; padding-top: 22px !important; } .rz-cadre { padding: 12px !important; box-shadow: 0 0 0 2px #8E897C, 0 0 0 3.5px #121212, inset 0 0 0 2px #524F47, inset 0 0 0 3px #17150F, inset 0 0 0 4px #6E6A5F, 6px 8px 0 rgba(0,0,0,0.55) !important; } .rz-passe { padding: 16px !important; } .rz-slot114 { margin-bottom: 20px; } .rz-card { margin-bottom: 24px !important; } .rz-more-wrap { padding-left: 18px !important; padding-right: 18px !important; } .rz-stage { padding: 54px 14px 100px !important; } .rz-x { top: 12px !important; right: 12px !important; width: 38px !important; height: 38px !important; } .rz-arrow { width: 40px !important; height: 40px !important; margin-top: -20px !important; } .rz-prev { left: 8px !important; } .rz-next { right: 8px !important; } .rz-legend-t { font-size: 16px !important; } .rz-legend-m { font-size: 12.5px !important; } } /* ═══ 9.ter Plan du site en plan de métro (05-09-26) : sur téléphone, la carte laisse place à la liste (`hidden` levé). ═══ */ @media (max-width: 719px) { .pl-carte { display: none !important; } .pl-liste { display: grid !important; grid-template-columns: 1fr !important; } } /* ═══ 9.bis Accueil : planche « Nos coups d'éclat » (05-09-26) ═══ */ @media (min-width: 720px) and (max-width: 1080px) { .hm-planche { grid-template-columns: repeat(2, 1fr) !important; gap: 34px 26px !important; } } @media (max-width: 719px) { .hm-planche { grid-template-columns: 1fr !important; gap: 28px !important; padding: 8px 4px 16px !important; } .hm-tirage { transform: none !important; box-shadow: 7px 7px 0 var(--a) !important; } } /* ═══ 10. /contact v2 « le bon de commande » (05-09-26) : guichets, carte postale, bon de demande et reçu, porte et horaires ═══ */ @media (min-width: 720px) and (max-width: 1080px) { .ct-hero { grid-template-columns: 1fr !important; gap: 40px !important; } .ct-card-wrap { width: 100%; max-width: 620px; margin: 0 auto; } /* `width` explicite : avec des marges auto, la boîte se réduirait à ses faces absolues (largeur 0, donc hauteur 0 via aspect-ratio) */ .ct-bon-grid { grid-template-columns: 1fr !important; } .ct-recu-wrap { position: static !important; max-width: 420px; } .ct-venir { grid-template-columns: 1fr !important; } .ct-photo { min-height: 300px; } } @media (max-width: 719px) { .ct-hero { grid-template-columns: 1fr !important; gap: 34px !important; } .ct-ways { gap: 18px 12px !important; } .ct-way { flex-basis: 100% !important; } /* La carte postale perd son inclinaison et ses deux colonnes deviennent une pile. */ .ct-card-wrap { padding: 22px 12px 26px 6px !important; } .ct-card { transform: none !important; } .ct-card-in { aspect-ratio: auto !important; height: 400px; } .ct-front { box-shadow: 8px 8px 0 #6FB847 !important; } .ct-back { box-shadow: -8px 8px 0 #121212 !important; } .ct-front-grid { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; } .ct-msg { border-right: 0 !important; border-bottom: 2px solid #121212; padding: 18px 16px 16px !important; } .ct-msg p { font-size: 15px !important; } .ct-msg .sig { margin-top: 10px !important; } .ct-addr { padding: 16px 16px 48px !important; } .ct-lines span { font-size: 13.5px !important; padding: 6px 0 3px !important; } .ct-lines span:first-child { font-size: 19px !important; } .ct-stamp { width: 72px !important; top: 10px !important; right: 10px !important; padding: 4px !important; } .ct-stamp .b { margin: 3px 0 !important; } .ct-postmark { width: 92px !important; height: 70px !important; top: 26px !important; right: 60px !important; } /* Le bon : plus de double carbone, il prend toute la largeur. */ .ct-bon-grid { grid-template-columns: 1fr !important; gap: 34px !important; } .ct-copie { display: none !important; } .ct-bon { padding: 22px 16px 24px !important; box-shadow: 6px 6px 0 #121212 !important; } .ct-perf { display: none !important; } .ct-tampon { right: 10px !important; top: -14px !important; font-size: 11px !important; } .ct-bon-head .t { font-size: 17px !important; } .ct-recu-wrap { position: static !important; padding: 0 8px 10px 0 !important; } .ct-recu { animation: none !important; } /* La porte : pancarte réduite et recentrée au-dessus, colonnes empilées. */ .ct-venir { grid-template-columns: 1fr !important; gap: 22px !important; } .ct-porte { padding: 92px 18px 22px !important; box-shadow: 6px 6px 0 #121212 !important; } .ct-sign-wrap { right: 50% !important; transform: translateX(50%); width: 200px !important; } .ct-sign .ct-etat b { font-size: 28px !important; } .ct-sign::before, .ct-sign::after { height: 101px !important; } /* pancarte de 200 px : ficelles plus courtes */ .ct-sign::before { transform: rotate(84deg) !important; } .ct-sign::after { transform: rotate(-84deg) !important; } .ct-h3 { font-size: 28px !important; } .ct-h3 span[style*="-webkit-text-stroke"] { -webkit-text-stroke-width: 2.6px !important; font-size: calc(1em - 2.3px) !important; translate: 0 -0.64px !important; } /* s = 1.6px (bloc 0) */ .ct-hrow.today { margin: 0 -8px !important; padding-left: 12px !important; padding-right: 12px !important; } .ct-hrow.today .j::after { display: block; width: max-content; margin: 6px 0 0 !important; } .ct-porte-bas { grid-template-columns: 1fr !important; } .ct-photo { min-height: 240px; box-shadow: 6px 6px 0 #6FB847 !important; } .ct-maps { margin-top: 6px !important; } .ct-plaque b { font-size: 18px !important; } .ct-moyens { grid-template-columns: 1fr !important; } .ct-tel-btn { font-size: 18px !important; padding: 14px 22px 14px 18px !important; } } /* ═══ 11. Menu téléphone : burger + panneau plein écran (05-09-26, < 720px) ═══ Le markup des 13 pages ne change pas : site.js fabrique, dans chaque header, un bouton `.hdr-burger` à la place du contenu de `.hdr-right` (interrupteur ☀︎/☾ sur l'accueil, pastille téléphone ailleurs) et UN panneau `.site-menu` accroché à (pas au header : le `backdrop-filter` du header nuit en ferait le bloc conteneur d'un `position: fixed`). Il pose `has-menu` sur : sans JS, rien ne change et la nav défilable reste en place. Le panneau reprend les entrées de `.nav-main`, précédées d'« Accueil » (`data-mode="jour"` : même effet que le logo) et complétées, juste après « Enseignes », par « Enseignes lumineuses » (le côté nuit de l'accueil, `data-mode="nuit"`) puisque l'interrupteur n'est pas montré ici. Rien sous « Contact » : ni téléphone, ni adresse. Le thème du panneau suit `html.nuit`, classe que seule la page d'accueil pose : ailleurs il est toujours blanc. */ /* Hors téléphone, ni le bouton ni le panneau n'existent visuellement : le desktop et la tablette gardent leur nav et leur bloc de droite intacts. */ .hdr-burger, .site-menu { display: none; } @media (max-width: 719px) { html.has-menu { --hdr-h: 69px; } /* header sur une ligne : 13 + 38 (burger) + 13 + 5 (barre) */ html.has-menu.nuit { --hdr-h: 73px; } /* le header nuit a 15 px de marge intérieure */ html.has-menu .nav-main { display: none !important; } html.has-menu .header-row { flex-wrap: nowrap !important; } html.has-menu .hdr-right { width: auto !important; gap: 0 !important; } html.has-menu .hdr-right > :not(.hdr-burger) { display: none !important; } .hdr-burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 54px; height: 38px; box-sizing: border-box; padding: 0 16px; margin: 0; background: #FFFFFF; border: 2px solid #121212; border-radius: 100px; box-shadow: 4px 4px 0 #121212; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease; } .hdr-burger span { display: block; height: 2px; width: 100%; background: #121212; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .hdr-burger:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212; } html.menu-open .hdr-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } html.menu-open .hdr-burger span:nth-child(2) { opacity: 0; } html.menu-open .hdr-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Côté nuit de l'accueil : le bouton prend la livrée de l'interrupteur nuit. */ html.nuit .hdr-burger { background: #0C0C12; border-color: #2A2A40; box-shadow: 0 0 18px rgba(111,184,71,0.2); } html.nuit .hdr-burger span { background: #8FFF62; box-shadow: 0 0 8px rgba(143,255,98,0.8); } /* Le panneau couvre tout l'écran. Il porte sa propre copie du header (posée par site.js à l'ouverture : logo, barre de couleurs, burger en croix), collée en haut pendant que la liste défile. Le header de la page, lui, est `sticky` sur le viewport : quand `overflow: hidden` verrouille , le viewport n'est plus un conteneur de défilement et ce header retombe à sa position d'origine, hors écran dès qu'on a défilé. D'où la copie. */ .site-menu { position: fixed; inset: 0; z-index: 950; /* au-dessus du header de la page (900) */ background: #FFFFFF; color: #121212; font-family: 'Instrument Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; /* hors du conteneur de page, qui porte la police */ display: flex; flex-direction: column; box-sizing: border-box; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease, visibility 0s linear .28s; } html.menu-open .site-menu { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; } html.menu-open, html.menu-open body { overflow: hidden !important; } .site-menu > header { position: sticky; top: 0; z-index: 2; flex: none; animation: none !important; } /* Toujours un peu plus haut que l'écran : ainsi le panneau est son propre défilement et un glissement du doigt n'entraîne jamais la page derrière. */ .site-menu .sm-in { flex: 1 0 auto; min-height: calc(100% + 1px); box-sizing: border-box; padding: 26px 24px calc(22px + env(safe-area-inset-bottom, 0px)); animation: none !important; } .site-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .site-menu li { border-bottom: 1px solid #E3DFD4; } .site-menu li:last-child { border-bottom: 0; } .site-menu a { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; } .site-menu .sm-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 23px; line-height: 1.05; /* 23 : « Enseignes lumineuses » tient sur une ligne en 375 */ letter-spacing: -0.01em; text-transform: uppercase; } .site-menu .sm-link::after { content: '→'; font-weight: 600; font-size: 18px; color: #B9B4A6; transition: transform .2s ease; } .site-menu .sm-link:active::after { transform: translateX(4px); } .site-menu .sm-link.is-current { color: #3E7A22; } .site-menu .sm-link.is-current::after { content: '·'; color: #6FB847; font-size: 30px; } /* Livrée nuit (accueil seulement). */ html.nuit .site-menu { background: #06060C; color: #C9C7D4; } html.nuit .site-menu li { border-bottom-color: #2A2A40; } html.nuit .site-menu .sm-link::after { color: #4A4A62; } html.nuit .site-menu .sm-link.is-current { color: #8FFF62; text-shadow: 0 0 12px rgba(143,255,98,0.6); } } @media (prefers-reduced-motion: reduce) { .site-menu, .hdr-burger span { transition: none !important; } } /* ═══ 12. Espacements de section resserrés sur téléphone (05-09-26, < 720px) ═══ Les marges verticales des sections sont écrites en dur dans le markup (`padding:110px 44px 80px` sur le `.wrap`) et taillées pour un écran de 1400 px : sur 375 px, 110 px de blanc avant un titre font une page qui n'en finit pas. Comme au bloc 0, on lit la valeur inline par sélecteur d'attribut et on la remplace : environ la moitié, jamais sous 24 px. Les valeurs de 34 px et moins restent (elles servent déjà de respiration fine). Le padding horizontal, lui, est déjà ramené à 18 px par `.wrap`. */ @media (max-width: 719px) { /* haut */ .wrap[style*="padding:120px 44px"], .wrap[style*="padding:112px 44px"], .wrap[style*="padding:110px 44px"], .wrap[style*="padding:100px 44px"], .wrap[style*="padding:98px 44px"], .wrap[style*="padding:96px 44px"] { padding-top: 56px !important; } .wrap[style*="padding:92px 44px"], .wrap[style*="padding:88px 44px"], .wrap[style*="padding:84px 44px"], .wrap[style*="padding:82px 44px"], .wrap[style*="padding:80px 44px"], .wrap[style*="padding:78px 44px"], .wrap[style*="padding:76px 44px"] { padding-top: 48px !important; } .wrap[style*="padding:72px 44px"], .wrap[style*="padding:70px 44px"], .wrap[style*="padding:66px 44px"], .wrap[style*="padding:64px 44px"], .wrap[style*="padding:60px 44px"] { padding-top: 40px !important; } .wrap[style*="padding:56px 44px"], .wrap[style*="padding:52px 44px"] { padding-top: 36px !important; } /* bas (3 valeurs : `… 44px Npx;` ; 2 valeurs : `padding:Npx 44px;`, bas = haut) */ .wrap[style*="44px 168px;"], .wrap[style*="44px 110px;"], .wrap[style*="44px 100px;"], .wrap[style*="44px 90px;"], .wrap[style*="padding:120px 44px;"], .wrap[style*="padding:110px 44px;"], .wrap[style*="padding:96px 44px;"] { padding-bottom: 56px !important; } .wrap[style*="44px 88px;"], .wrap[style*="44px 84px;"], .wrap[style*="44px 80px;"], .wrap[style*="44px 76px;"], .wrap[style*="44px 74px;"], .wrap[style*="44px 72px;"], .wrap[style*="padding:92px 44px;"], .wrap[style*="padding:88px 44px;"], .wrap[style*="padding:78px 44px;"] { padding-bottom: 48px !important; } .wrap[style*="44px 60px;"], .wrap[style*="44px 56px;"], .wrap[style*="padding:52px 44px;"] { padding-bottom: 40px !important; } .wrap[style*="44px 44px;"], .wrap[style*="44px 40px;"] { padding-bottom: 30px !important; } /* Sections à padding vertical porté par la section elle-même (0 horizontal). */ section[style*="padding:112px 0 168px"] { padding-top: 56px !important; padding-bottom: 80px !important; } section[style*="padding:64px 0 40px"] { padding-top: 40px !important; padding-bottom: 30px !important; } section[style*="padding:64px 0;"] { padding-top: 40px !important; padding-bottom: 40px !important; } section[style*="padding:60px 0 0"] { padding-top: 40px !important; } /* Marges qui séparent deux sections. */ section[style*="margin-top:70px"] { margin-top: 40px !important; } section[style*="margin-top:60px"] { margin-top: 36px !important; } section[style*="margin-top:50px"] { margin-top: 32px !important; } section[style*="margin-top:40px"] { margin-top: 28px !important; } } /* ═══ 13. Footer téléphone : « Métiers » et « La maison » retirés (05-09-26) ═══ Sur téléphone le footer est une pile : les deux colonnes de liens doublent le menu et allongent la page pour rien. Restent le logo + la phrase, et « Nous joindre ». Les colonnes ont le même ordre sur les 13 pages (jour et nuit de l'accueil compris). */ @media (max-width: 719px) { .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(3) { display: none !important; } .footer-grid { gap: 22px !important; } .wrap[style*="padding:52px 44px 34px"] { padding-top: 36px !important; padding-bottom: 26px !important; } } /* ═══ 14. Accueil : la planche d'imposition de « L'atelier » (06-09-26) ═══ Desktop : 12 colonnes sur deux rangées de hauteur fixe (300 / 230), le portique traverse de gauche à droite. Tablette : 6 colonnes, quatre rangées, même balayage horizontal. Téléphone : une colonne, et le portique DESCEND (`.at-vert`, posé par index.js) : la cote `--cut` se lit alors depuis le haut du voile, le portique devient une ligne horizontale, le chariot se pose à son bout droit, tourné d'un quart de tour. Les gabarits du voile sont mesurés sur les cellules, ils suivent tout seuls. */ @media (min-width: 720px) and (max-width: 1080px) { .at-rule i:nth-child(7) { display: none; } /* « 300 » chevauche « 320 cm » sous 1080 px */ .at-grid { grid-template-columns: repeat(6, 1fr) !important; grid-template-rows: auto !important; grid-auto-rows: auto; } .at-c1 { grid-column: span 6 !important; min-height: 260px; } .at-c2, .at-c4, .at-c7 { grid-column: span 2 !important; } .at-c3, .at-c5 { grid-column: span 4 !important; min-height: 220px; } .at-c6 { grid-column: span 4 !important; } .at-fact { min-height: 170px; } } @media (max-width: 719px) { .at-sheet { padding-left: 16px !important; padding-right: 16px !important; box-shadow: 8px 8px 0 #121212 !important; margin-bottom: 8px !important; } .at-rule { margin: 0 -16px 22px !important; } .at-rule i:nth-child(2), .at-rule i:nth-child(4), .at-rule i:nth-child(6), .at-rule i:nth-child(7) { display: none; } /* 50 · 150 · 250 · 300 : trop serrés, 300 chevauchait « 320 cm » */ .at-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; gap: 22px !important; } .at-cell { grid-column: auto !important; grid-row: auto !important; } .at-photo { min-height: 190px; } .at-fact { min-height: 150px; } .at-foot { flex-direction: column; align-items: flex-start; gap: 10px; } .at-sheet.at-vert .at-veil { clip-path: inset(var(--cut) 0 0 0) !important; } .at-sheet.at-vert .at-gantry { left: 0 !important; right: 0; width: auto !important; height: 2px; top: calc(32px + var(--cut)) !important; bottom: auto !important; margin: -1px 0 0 !important; box-shadow: 0 -10px 14px -6px rgba(18, 18, 18, 0.28) !important; } .at-sheet.at-vert .at-head { top: calc(32px + var(--cut)) !important; left: auto !important; right: 6px; transform: translateY(-50%) rotate(-90deg) !important; } }