/* ========================================================================== layout.css — conteneurs et utilitaires de mise en page Troisieme feuille de la cascade (apres base.css). Regroupe les classes de structure du site : .wrapper, .wrap, .flex-*, .justify-*, .align-*, .list-icon. ========================================================================== */ /* -------------------------------------------------------------------------- 1. .wrapper — conteneur centre, LARGEUR FLUIDE -------------------------------------------------------------------------- ⚠️ NE PAS REINTRODUIRE DE PALIERS DE LARGEUR ICI. Un modele a six largeurs en paliers (1680 / 1120 / 944 / 912 / 727) produisait une CASSURE MESUREE DE 560px : a 1901px le wrapper valait 1680, a 1900px il tombait a 1120 (-33%). Le header, le footer et tout le contenu partageant cette classe, la page entiere sautait d'un coup, puis restait plafonnee a 1120px jusqu'a 1025px — soit 780px de marges vides dans une fenetre de 1900px. Symptomes visibles : le formulaire se retrecit alors qu'il reste de la place, le texte se colle a gauche, saut d'image, saut du header. Une seule regle fluide donc : le contenu suit la fenetre en continu entre 1024 et 1920px, sans aucun palier intermediaire. Les cassures disparaissent par CONSTRUCTION, pas par ajout de paliers plus fins. Le plafond est a 1920px : a 1680px, un ecran de 2040px de viewport laissait 173px de fond vide de chaque cote du contenu. `padding-inline` plutot qu'un `padding: 10px` : 10px ne suffisent pas a decoller le contenu du bord des que le wrapper atteint la largeur de la fenetre. ⚠️ La gouttiere est FLUIDE, pas fixe — trois valeurs ont ete calculees avant de trancher, parce qu'une gouttiere fixe de 40px reglait la cassure mais retirait 60px de contenu utile aux largeurs ou le wrapper etait DEJA correct (1920, 1100, 900, 600, 494px). `clamp()` la fait porter par la fenetre : 16px mini, 40px maxi (atteints vers 2000px), en continu entre les deux. Aucun palier, donc aucun saut — meme principe que la largeur. Aux quelques largeurs ou la gouttiere retire de la largeur utile par rapport a un modele a 10px (de -12 a -57px, soit 6 a 28px par cote), c'est VOULU : ce sont precisement celles ou le contenu TOUCHAIT le bord de la fenetre. On echange quelques pixels de contenu contre une gouttiere lisible a toute largeur. -------------------------------------------------------------------------- */ .wrapper { width: 100%; max-width: 1920px; margin: auto; padding-block: var(--lba-wrapper-pad); padding-inline: clamp(16px, 2vw, 40px); } /* -------------------------------------------------------------------------- 1 bis. Alignement header / contenu / footer -------------------------------------------------------------------------- ⚠️ DEFAUT MESURE ET CORRIGE : le logo du header partait a 30px du bord et le titre du contenu a 40px — 10px de decalage sur un axe vertical que l'oeil suit. Cause : des sections du site portaient un `padding: Xpx 10px`, heritage d'un temps ou `.wrapper` n'avait que 10px de gouttiere — c'etaient alors les SECTIONS qui l'assuraient. Depuis que le wrapper porte une gouttiere fluide, ces 10px FONT DOUBLE EMPLOI et decalent tout contenu place dans une section par rapport au header, qui n'en a pas. ⭐ REGLE : la gouttiere laterale appartient au wrapper et A LUI SEUL. Les sections gardent leur padding VERTICAL (qui porte le rythme de la page) et perdent le lateral. N'ecrire que `padding-block` dans une regle de section, jamais `padding` en raccourci. ⚠️ Les 18 porteurs ont ete RELEVES dans les feuilles, pas devines : une premiere version de ce bloc citait des classes inexistantes (`.section-split`, `.section-services`...) et aurait ete sans effet. Trois des porteurs reels sont qualifies par `body[data-page="..."]` (specificite 0,2,0) : la regle est donc ecrite avec `:where(body)` pour rester a egalite sans ajouter de poids, et placee APRES les feuilles de page dans la cascade — layout.css etant chargee avant, on qualifie explicitement. -------------------------------------------------------------------------- */ body #banner-page, body #sectionHero, body .section-rse, body .section-cards, body .section-cards--reverse, body .section-cards--last, body .section-split, body .section-split--reverse, body .section-split--pad, body .section-split--last, body #mainFooter .wrap-logo-footer { padding-inline: 0; } /* -------------------------------------------------------------------------- 2. Utilitaires flex -------------------------------------------------------------------------- `start` / `end` sont employes plutot que flex-start / flex-end : valeurs valides, comportement identique en contexte flex. -------------------------------------------------------------------------- */ .wrap { display: flex; } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .justify-start { justify-content: start; } .justify-center { justify-content: center; } .justify-end { justify-content: end; } .align-start { align-items: start; } .align-center { align-items: center; } .align-end { align-items: end; } /* -------------------------------------------------------------------------- 3. Utilitaires de texte -------------------------------------------------------------------------- ⚠️ Ces utilitaires portent le corps de texte courant du site : ils sont partages par TOUTES les pages et ont donc leur place ici, pas dans une feuille de page. Les remettre dans une feuille de page ferait retomber au texte par defaut toute page qui ne la charge pas. Le corps de texte passe de 20px a 16px sur laptop. La reduction est portee au palier 1400px, deja utilise par le reste du site — 34px de largeur de fenetre d'ecart avec le 1366px theorique, sans effet visible. -------------------------------------------------------------------------- */ .lba-text { font-size: var(--lba-text-size); line-height: var(--lba-text-line); } .text-center { text-align: center; } @media screen and (max-width: 1400px) { .lba-text { font-size: 16px; } } /* -------------------------------------------------------------------------- 4. .list-icon — liste a icones -------------------------------------------------------------------------- Coordonnees du footer (telephone, mail, adresse) et listes de service. -------------------------------------------------------------------------- */ .list-icon { list-style: none; padding: 0; margin: 0; } .list-icon li { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 12px; padding: 10px 0; } .list-icon li.align-start { align-items: start; } .list-icon li a { color: inherit; text-decoration: none; } .list-icon li a:hover { color: var(--primary-color); } /* -------------------------------------------------------------------------- Masquage visuel accessible — .sr-only -------------------------------------------------------------------------- Retire l'element du rendu SANS le retirer de l'arbre d'accessibilite : il reste lu par les lecteurs d'ecran. Sert aux