/* ========================================================================= Propul — couche « ordinateurs » (responsive desktop). Chargée en DERNIER, après propul-charte.css. Tout est enfermé dans @media (min-width: 992px) : le mobile et la tablette portrait gardent exactement le rendu du gabarit Agenio. CE QUI N'ALLAIT PAS ------------------- Le gabarit empilait trois échelles de largeur incompatibles : .container 960px (≥992) 1170px (≥1200) 1408px, padding 0 (≥1440) La marge extérieure sautait donc dans tous les sens d'une largeur d'écran à la voisine : 1200px 15px de marge 1439px 134px de marge 1440px 16px de marge 1707px 150px de marge Autrement dit : à 1439px le contenu flottait au milieu de l'écran, à 1440px il touchait presque le bord, puis le vide regrandissait. Sur un 13 pouces (1707 × 1067 CSS, soit 2560 × 1600 à 150 %), on tombait dans le dernier palier : 1408px de contenu perdus au centre de 1707px. S'y ajoutaient deux incohérences internes : — les cartes de section se retraitaient de 40, 56, 60 ou 70px selon la section, sans logique commune ; — le filet des cadres de section disparaissait en haut et en bas sous 1440px : le même bloc n'avait pas la même forme sur deux portables. CE QU'ON POSE ------------- Une seule formule fluide. La gouttière de page croît avec l'écran puis plafonne, la largeur utile plafonne à --propul-page. La marge devient monotone de 992px à l'ultra-large — plus aucun saut : 992px 36px de gouttière, 920px de contenu 1200px 43px 1114px 1366px 49px 1268px 1440px 52px 1336px 1536px 55px 1425px 1707px 74px 1560px (plafond atteint) 1920px 180px 1560px 2560px 408px 1560px Les rythmes verticaux passent en vh : sur un écran court (portable), les sections se resserrent d'elles-mêmes au lieu de garder les 100 à 160px de respiration dessinés pour un 27 pouces. ========================================================================= */ @media (min-width: 992px) { /* ------------------------------------------------- 1. TOKENS DE GRILLE */ :root { /* --propul-gouttiere a QUITTE ce bloc en session 3 : elle n'est plus une affaire d'ordinateurs. Elle vivait ici, donc elle n'existait pas sous 992px, et la page passait de 15px de marge a 35,7px en un pixel de fenetre — 40px de contenu perdus. Elle est desormais dans propul-tokens.css, en clamp continu du telephone a l'ultra-large, avec les memes valeurs qu'ici au-dessus de 992px. */ /* Largeur utile maximale. C'est LE réglage à bouger si le contenu doit respirer plus ou moins large : tout le reste suit. */ --propul-page: 1560px; /* Retrait intérieur des cartes de section : remplace le 40/56/60/70px hérité du gabarit par une seule valeur qui suit la gouttière. */ --propul-retrait: clamp(32px, 3.4vw, 64px); /* Rythmes verticaux, indexés sur la hauteur de fenêtre. */ --propul-bloc-y: clamp(60px, 8.5vh, 100px); /* les anciens 100px */ --propul-bloc-y-sm: clamp(40px, 5.5vh, 64px); /* les anciens 60-70px */ --propul-bloc-y-lg: clamp(88px, 13vh, 160px); /* les anciens 140-160px */ } /* ---------------------------------------------- 2. CONTENEUR DE PAGE */ /* Une seule règle remplace les trois paliers de style.css. Le max-width inclut la gouttière (box-sizing: border-box est global via Bootstrap), donc la largeur utile plafonne bien à --propul-page. */ .container { max-width: calc(var(--propul-page) + 2 * var(--propul-gouttiere)); } /* ------------------------------------------ 3. CADRES DE SECTION */ /* Le gabarit retirait le filet haut/bas sous 1440px. Le cadre changeait donc de forme entre deux portables. Un seul cadre partout. */ section .section-inner.border-1 { border-width: 1px !important; } /* --------------------------------- 4. RETRAITS INTÉRIEURS UNIFIÉS */ /* Toutes les cartes de section se retraitent de la même valeur, quelle que soit la section. C'est ce qui rendait les marges « pas cohérentes » d'un bloc à l'autre sur la même page. */ .services-details-banner .section-inner, .wpr-service-extended-area .section-inner, .our-approch-area-style-one .section-inner, .wpr-working-process .section-inner, .wpr-blog-area .section-inner, .wpr-get-in-touch .section-inner, .wpr-about-area .section-inner .section-top-area, .wpr-about-area .section-inner .about-bottom-content .left-area ul li, .wpr-footer-area .footer-top, .wpr-footer-area .copyright-area, .wpr-project-area.inner .project-slider-inner, .wpr-why-choose-us-area2 .section-inner .section-title-area, .wpr-team-area .section-bottom-inner, .wpr-pricing-plans-area .section-inner .section-mid-area .pricing-inner, .work-details-banner .text-area, .award-item { padding-inline: var(--propul-retrait); } /* Le bloc contact : le texte à gauche prenait 56px de marge, le formulaire à droite 40px de padding. Les deux bords ne tombaient pas au même endroit. On aligne, et on rend au formulaire la largeur mangée. */ .wpr-contact-area .section-inner .left-content-area { margin-inline: var(--propul-retrait); /* Plafonné à 714px, le bloc de gauche s'arrêtait 228px avant le filet de séparation. Il va maintenant jusqu'au filet ; en dessous, flex le fait rétrécir comme avant. */ max-width: 900px; } .wpr-contact-area .section-inner .contact-form-area { padding-inline: var(--propul-retrait); max-width: 560px; } /* ------------------------- 4bis. LA RANGEE QUI NE SAIT PAS REVENIR */ /* `.bottom-content-area` est un `display: flex` sans `flex-wrap`, et ses cartes font `width: 25%` : le bloc est dessine pour QUATRE items. Sous 991px le gabarit pose deja `flex-wrap: wrap` et deux colonnes ; au-dessus, il ne l'a jamais pose, parce qu'aucune de ses demos ne depassait quatre. 2 066 pages en posent 3, 98 en posent 4, et `avis.html` en pose HUIT — un avis Google reel par carte. Les huit cartes reclamaient 1 921px dans un cadre de 1 334 : la page se laissait pousser de 539px sur le cote, et les six cartes visibles se composaient dans des colonnes de 101 a 151px. On rend le retour a la ligne au module qui l'avait deja : 25% par carte, donc quatre par rangee, donc deux rangees. Pour 3 ou 4 items — les 2 164 autres pages — une rangee ne se remplit pas et rien ne change. */ .wpr-why-choose-us-area2 .section-inner .bottom-content-area { flex-wrap: wrap; } /* Les filets suivent le module au lieu d'etre enumeres. `:nth-child(4n)` est la carte de bord de rangee, elle n'a pas de filet a droite ; `:nth-last-child(n+5)` designe toute carte suivie d'au moins quatre autres, c'est-a-dire toute rangee qui n'est pas la derniere. Les deux sont vraies quel que soit le nombre de cartes. */ .why-choose-wrapper2:nth-child(4n) { border-right: none; } .why-choose-wrapper2:nth-last-child(n+5) { border-bottom: 1px solid color-mix(in srgb, var(--encre) 10%, transparent); } /* ---------------------------------- 5. COLONNES DE LECTURE */ /* La FAQ était bloquée à 856px : centrée dans un conteneur déjà centré, elle donnait l'impression d'un site deux fois trop étroit. On la laisse respirer sans dépasser une longueur de ligne lisible. */ .wpr-faq-area .section-inner .section-content-area .accordion-one { max-width: min(100%, 1040px); } /* Les deux cartes « avant / après » étaient plafonnées à 416px puis collées à droite de leur colonne par ml-auto : elles laissaient 85px de décalage à l'intérieur d'un bloc pourtant symétrique. Elles remplissent maintenant leur colonne, donc les deux bords tombent au même endroit. */ .why-choose-wrapper { max-width: 100% !important; } /* Les fiches en deux colonnes (mentions légales, politique de confidentialité, en-tête des cas clients) : le gabarit posait `justify-content: space-between` sur une rangée dont les deux colonnes se dimensionnent sur leur contenu. Une ligne courte — « Conversa Mensurável », « 519146433 », « Client : CoProFlex » — était donc projetée contre le bord droit, une ligne longue restait à gauche : le texte sautait d'un bord à l'autre d'une rangée à la suivante. On fixe la colonne d'étiquette et on laisse le texte occuper le reste, il commence toujours au même endroit. Sous 992px le gabarit empile déjà les deux colonnes, rien ne change. */ .work-details-banner .text-area { justify-content: flex-start; gap: clamp(24px, 3vw, 64px); } .work-details-banner .text-area .left-content { flex: 0 0 clamp(160px, 17%, 280px); } .work-details-banner .text-area .right-content { flex: 1 1 auto; /* Longueur de ligne lisible : le texte ne s'étale pas sur toute la largeur regagnée. */ max-width: 900px; } /* ------------------------------------- 6. RYTHME VERTICAL */ /* Les grandes respirations du gabarit sont dessinées pour un grand écran. Sur un portable de 950px de haut, elles avalaient un écran entier de vide entre deux blocs. Elles suivent maintenant la hauteur de fenêtre. Les valeurs horizontales sont conservées telles quelles. */ .wpr-services-area .section-top-area, .wpr-pricing-plans-area .section-inner .section-top-area { padding: var(--propul-bloc-y) 0 var(--propul-bloc-y-sm); } .wpr-about-area .section-inner .section-top-area { padding-block: var(--propul-bloc-y) var(--propul-bloc-y-sm); } .wpr-working-process .section-inner, .wpr-get-in-touch .section-inner { padding-block: var(--propul-bloc-y); } .wpr-team-area .section-inner .content-area, .wpr-faq-area .section-inner .section-content-area { padding-block: var(--propul-bloc-y); } .wpr-awards-area .section-inner .section-title-area { padding-block: var(--propul-bloc-y) var(--propul-bloc-y-sm); } .wpr-cta-area .section-inner { padding-block: var(--propul-bloc-y-sm) var(--propul-bloc-y-lg); } /* 200px de vide sous ce titre : un écran entier de portable pour rien. */ .wpr-why-choose-us-area2 .section-inner .section-title-area { padding-block: var(--propul-bloc-y) calc(var(--propul-bloc-y) * 1.7); } .services-details-banner .section-inner, .wpr-service-extended-area .section-inner, .wpr-blog-area .section-inner { padding-block: var(--propul-bloc-y-sm); } .wpr-footer-area .footer-logo-area { padding-block: var(--propul-bloc-y-lg); } } /* ------------------------------------------- 7. TITRE DE BANNIÈRE */ /* Le titre de hero sautait de 120px (≥1440) à 100px (1200-1439) : une marche visible entre deux portables. Le clamp couvre exactement la même amplitude, en continu, et sur la même plage : à 1200px il vaut 100px, à 1439px il vaut 120px. Il ne descend jamais sous la valeur du gabarit. En dessous de 1200px, le gabarit garde la main (80px, puis 60px sur mobile). */ @media (min-width: 1200px) { .wpr-banner-area .banner-content-area .section-title { font-size: clamp(100px, 8.34vw, 120px); } } /* ------------------------------------------ 8. EN-TÊTE SUR PETIT ÉCRAN */ /* RETIREE en session 3, et voici pourquoi elle est mentionnee plutot que simplement effacee. Cette section resserrait `.header-style-one`, `.main-nav-area ul` et `.button-area-start` — les classes du bandeau d'Agenio. Elles ne sont rendues NULLE PART : l'en-tete koul.io (`.pk-*`) a remplace celui du gabarit, et ces trois selecteurs comptent zero occurrence dans les 2 210 pages. La section reparait un en-tete qui n'existe plus, ce qui explique que le defaut qu'elle decrit — un debordement horizontal sous 1080px — soit toujours la. Le correctif reel est pose sur l'en-tete reel, dans `propul-header.css`, section 7. Il ne pouvait pas vivre ici : `propul-header.css` est chargee APRES cette feuille, et sa regle `.pk-link { padding: 0 14px }` gagne a specificite egale. Une reparation posee en amont de ce qu'elle repare ne s'applique pas — c'est verifie au navigateur, pas suppose. */ /* ------------------------------------------------ 9. TRÈS GRANDS ÉCRANS */ /* Au-delà de 1800px, la gouttière est déjà à son plafond : on laisse le contenu gagner un peu de largeur plutôt que d'empiler du vide. La progression reste continue (le calc part exactement de --propul-page). */ @media (min-width: 1800px) { :root { --propul-page: clamp(1560px, calc(1560px + (100vw - 1800px) * 0.2), 1680px); } }