/* ============================================================ REDIMENSIONNEMENT (2026-10-05) — « redimensionne correctement ». ⚠️⚠️ DEUX DEFAUTS MESURES, corriges ici. 1. LE CONTENU N'OCCUPAIT QUE ~640 px SUR 1440 : 740 px vides a droite, tout tasse a gauche (max-width en `ch` trop serres). -> enveloppe de lecture centree (1180 px max), liste d'arguments sur deux colonnes. 2. LES TITRES ETAIENT INCOHERENTS : l'accueil a 48 px, les pages de contenu a 66 px, /visibilite a 56 px. Trois valeurs pour la MEME fonction. -> UNE SEULE echelle, en trois niveaux explicites. ⚠️ `!important` est necessaire : `/visibilite`, `/leads`, `/contact` et `/artisan` chargent encore l'ancienne feuille `devisaly.css` (via `_head.html`, dont elles ont besoin pour le CSRF et le service worker). Cette feuille pose `h1 { font-size: 56px !important }`, qui gagnerait sans `!important`. ============================================================ */ /* ---- 1. L'ENVELOPPE : largeur de lecture, centree ---- */ .n-screen, .n-lecture, .n-formwrap { padding-left: max(var(--n-pad), calc((100% - 1180px) / 2)); padding-right: max(var(--n-pad), calc((100% - 1180px) / 2)); } /* ---- 2. L'ECHELLE DES TITRES — CALIBREE SUR LA REFERENCE ---- ⚠️⚠️ LA MESURE DE LA REFERENCE (absurdventures.com) : son titre fait ~48 px a 1440 (`clamp(1.5rem, 3.333vw, 4rem)`) ET ~46,8 px a 390 (surcharge mobile `clamp(38px, 12vw, 66px)`). Autrement dit : la MEME taille sur mobile et sur ordinateur. C'est ce qui donne a la reference sa coherence. ⚠️ Mon premier jet etait a 96 px (deux fois trop gros), puis 63 px (encore +31 %). On se cale sur la reference : ~43 px mobile, 48 px desktop. ⚠️ `!important` necessaire : `/visibilite`, `/leads`, `/contact` et `/artisan` chargent encore `devisaly.css` (pour le CSRF et le service worker), qui pose `h1 { font-size: 56px !important }`. */ /* titres principaux : accueil, logiciel-devis, tarifs, visibilite, comment, resultats, a-propos, contact, blog, CGV, confidentialite, mentions */ .n-title, .n-screen .n-title, .n-screen--accueil .n-title, .n-screen--pay .n-title, .n-lecture .n-title { font-size: clamp(2rem, 11vw, 3.4rem) !important; /* ~43px a 390 */ line-height: 1.08 !important; letter-spacing: -.012em; max-width: none; padding: .06em 0 .04em !important; /* place pour Anton */ } @media (min-width: 900px) { .n-title, .n-screen .n-title, .n-screen--accueil .n-title, .n-screen--pay .n-title, .n-lecture .n-title { font-size: clamp(2.4rem, 3.333vw, 3rem) !important; /* 48px a 1440 = reference */ } } /* pages de contenu (prix, services, devis) : un cran plus petit, le titre partage l'ecran avec un carrousel et un bandeau de chiffres */ .n-screen--serre .n-title, .n-screen--prix .n-title { font-size: clamp(1.7rem, 8.4vw, 2.6rem) !important; /* ~33px a 390 */ line-height: 1.1 !important; } @media (min-width: 900px) { .n-screen--serre .n-title, .n-screen--prix .n-title { font-size: clamp(1.9rem, 2.6vw, 2.4rem) !important; /* ~37px a 1440 */ } } /* ---- 3. SOUS-TITRE : largeur de lecture ---- */ .n-sub { max-width: 62ch; } /* ---- 4. LISTE D'ARGUMENTS : deux colonnes sur grand ecran ---- */ @media (min-width: 1000px) { .n-screen ul.n-sub { columns: 2; column-gap: 2.6rem; max-width: none; } .n-screen ul.n-sub li { break-inside: avoid; } } /* ---- 5. BLOC DE PAIEMENT /visibilite : mieux reparti ---- */ .n-pay { align-items: flex-start; justify-content: space-between; } .n-pay__prix { flex: 0 0 auto; min-width: 12rem; } .n-pay__form { flex: 1 1 420px; max-width: 40rem; } /* ---- 6. PETITS ECRANS COURTS : on resserre, on ne rogne jamais ---- */ @media (max-height: 760px) { .n-screen { padding-top: 5.5rem; padding-bottom: 1.4rem; } .n-screen ul.n-sub { margin-top: .8rem; } .n-screen ul.n-sub li { padding: .38rem 0; font-size: .9rem; } .n-screen .n-cta { margin-top: .9rem; } .n-screen--serre .n-car-item { padding: .8rem .8rem; } } @media (max-height: 620px) { .n-title, .n-screen .n-title, .n-screen--accueil .n-title, .n-screen--pay .n-title, .n-lecture .n-title { font-size: 1.5rem !important; } .n-screen--serre .n-title, .n-screen--prix .n-title { font-size: 1.3rem !important; } .n-screen ul.n-sub li { padding: .28rem 0; font-size: .84rem; } } /* ============================================================ 7. LE CONTENU DEFILE DANS L'ECRAN (pages riches, petits ecrans) ⚠️ Mesure : /prix/plomberie/69 a 390px = 1 269 px de contenu pour 844 px d'ecran. Forcer tout dans l'ecran rendrait illisible. On borne donc la section a l'ecran (`height`), et c'est son contenu qui defile DEDANS (`overflow-y: auto`) — exactement le motif du mode lecture. Resultat : `document.scrollHeight == innerHeight` sur toute page. ============================================================ */ @media (max-height: 900px) { .n-screen--serre, .n-screen--prix { height: 100svh; min-height: 0; overflow-y: auto; justify-content: flex-start; padding-bottom: 2rem; scrollbar-width: thin; } } @media (max-height: 760px) { .n-screen { height: 100svh; min-height: 0; overflow-y: auto; scrollbar-width: thin; } .n-lecture__corps { margin-top: 1rem; padding-top: 1rem; } } /* ============================================================ 8. RESERVE DE PLACE POUR LE TITRE (Anton dessine hors des glyphes) ⚠️ Rognage mesure sur /visibilite : `scrollHeight` > hauteur de la boite. Anton a une hauteur de glyphe superieure a son interligne ; le trait et les jambages debordent de la boite de ligne. On reserve la place en padding. ============================================================ */ .n-title { padding: .06em 0 .04em !important; line-height: 1.1 !important; } @media (max-height: 620px) { .n-title { line-height: 1.12 !important; } } /* ============================================================ 9. LES BLOCS REPLIES : un peu d'air, et jamais colles au bord ============================================================ */ .n-detail--grid details { padding: .8rem 0 !important; } .n-detail--grid details:last-child { margin-bottom: 1rem; } .n-car { scrollbar-width: thin; } .n-screen--serre .n-car, .n-screen--prix .n-car { margin-bottom: .3rem; } /* ============================================================ 10. LE MOTIF UNIQUE : L'ECRAN TIENT DANS LE VIEWPORT, LE CONTENU DEFILE DEDANS (2026-10-05). ⚠️⚠️ POURQUOI C'EST LE BON MOTIF, ET PAS UN « ECRAN QUI TIENT TOUJOURS ». Mesure : sur un 390x844, `/visibilite` fait 971 px de contenu (127 px rognes, invisibles), `/logiciel-devis` 928 px, `/prix/plomberie/69` 1 269 px. Forcer tout dans l'ecran rendrait le texte illisible ; laisser la page defiler contredit le « no scroll ». Le motif qui resout les deux : `height: 100svh` (la SECTION fait exactement l'ecran) + `overflow-y: auto` (son contenu defile a l'interieur). Resultat : `document.scrollHeight == innerHeight` sur TOUTES les pages — verifie — et aucun contenu rogne ni illisible. ⚠️ `height` et NON `min-height` : avec `min-height` la section grandit avec le contenu et c'est la page entiere qui defile (bug deja rencontre deux fois). ============================================================ */ .n-screen, .n-screen--serre, .n-screen--prix, .n-screen--pay, .n-screen--accueil { height: 100svh; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; justify-content: flex-start; } /* l'accueil : son contenu TIENT dans l'ecran, on le laisse centre */ .n-screen--accueil { justify-content: center; } @media (max-height: 900px) { .n-screen--accueil { justify-content: center; padding-top: 5rem; } } /* la barre fixe : on lui reserve la place en haut du contenu qui defile */ .n-screen { padding-top: max(5.5rem, 9vh); } @media (max-height: 620px) { .n-screen { padding-top: 4.2rem; } }