/* ============================================================ ARTAWEB -- Layout Containers, Grid, Spacing, Responsive ============================================================ */ /* ---------------------------------------------------------- Container ---------------------------------------------------------- */ .container { width: 100%; /* Largeur du site pilotée par la charte (--site-width), repli 1200px */ max-width: var(--site-width, 1200px); margin-inline: auto; padding-inline: var(--space-lg); } /* ---------------------------------------------------------- Sections ---------------------------------------------------------- */ .section { /* Densité des espacements pilotée par la charte (--section-py), repli 8rem, modulée par le réglage « Espace ↑ / ↓ » de la section (--sp-top / --sp-bottom, posés en inline par le gabarit). Le coefficient vaut 1 par défaut : une section réglée sur « Normal » reçoit exactement la densité de la Charte, ni plus ni moins. C'est ce qui rend chaque cran VISIBLE — en densité « aéré », un cran vaut 64px, pas 8. */ padding-block: calc(var(--section-py, 8rem) * var(--sp-top, 1)) calc(var(--section-py, 8rem) * var(--sp-bottom, 1)); position: relative; overflow: hidden; } /* La première section dégage la hauteur de l'en-tête fixe pour que le titre ne passe pas dessous. --header-h est posée sur par index.php d'après la structure composée dans l'admin : un en-tête à deux lignes est plus haut qu'un en-tête à une. Le repli 88px est la hauteur historique — il garde son sens si la variable venait à manquer. */ #main-content > .section:first-child { /* La hauteur de l'en-tête n'est PAS négociable — sans elle le titre passe dessous. Seule la respiration qui s'y ajoute suit le réglage. */ padding-top: calc(var(--header-h, 88px) + var(--space-xl, 3rem) * var(--sp-top, 1)); } .section--full { min-height: 100vh; display: flex; align-items: center; justify-content: center; } /* Section CONTENUE : la bande elle-même s'arrête à la largeur du site — donc son FOND aussi. C'est ce qui la distingue d'une simple ligne contenue, et ce qui rend possible un bloc coloré qui ne touche pas les bords de l'écran. */ .section--contained { max-width: var(--site-width, 1200px); margin-inline: auto; } .section--alt { background-color: var(--color-surface); } .section__header { text-align: center; margin-bottom: var(--space-xl); } /* FILET SEUL, SANS ÉTIQUETTE (2026-09-11). `.divider` porte une marge haute ET basse — juste sous une étiquette, c'est ce qu'il faut. Seul en tête de section, cette marge haute s'ajoute au rembourrage de la section : le trait descendait vers le titre au lieu d'ouvrir la section. On la retire, et la marge basse de l'en-tête suffit à séparer le trait de ce qui suit. */ .section__header--filet-seul { margin-bottom: var(--space-xl); } .section__header--filet-seul .divider { margin-block: 0; } /* LE FILET AU-DESSUS D'UNE ÉTIQUETTE (2026-09-16). Il ouvre alors le groupe au lieu de le clore : sa marge haute n'a plus lieu d'être — il est déjà le premier élément —, et sa marge basse se resserre pour qu'il appartienne visiblement à l'étiquette qui suit, au lieu de flotter entre deux. L'étiquette porte son propre soulignement quelques pixels sous elle : les deux traits encadrent le mot, ils ne se suivent plus. */ .divider--avant-etiquette { margin-top: 0; margin-bottom: var(--space-sm, .75rem); } /* Les trois jetons ci-dessous sont posés par la Charte, et SEULEMENT si on les y a réglés (renderDesignCss). Le repli reprend mot pour mot ce qui était écrit en dur ici : un site qui n'y touche pas ne bouge pas d'un pixel. */ .section__label { font-family: var(--font-heading); font-size: var(--label-size, var(--text-xs)); font-weight: var(--label-weight, 600); text-transform: uppercase; letter-spacing: 0.15em; color: var(--label-color, var(--color-accent)); margin-bottom: var(--space-sm); display: block; } /* ---------------------------------------------------------- Grid ---------------------------------------------------------- */ .grid { display: grid; gap: var(--space-lg); } /* ---------------------------------------------------------- Flex utilities ---------------------------------------------------------- */ .flex { display: flex; } /* ---------------------------------------------------------- L'ÉCHELLE DE RUPTURES DU SITE Elle est UNE, et c'est celle-ci : ≤ 599.98px téléphone étroit — une colonne, tout compacté ≤ 640px grilles de composants — galerie, chiffres clés, liste à icônes passent à deux colonnes ≤ 899.98px téléphone large et tablette — le menu passe en burger, les grilles de page s'empilent ≥ 900px ordinateur Les bornes portent « .98 » à dessein : `max-width: 899px` + `min-width: 900px` laisse un trou d'un pixel où AUCUNE des deux ne s'applique, sur les écrans à densité fractionnaire. La paire .98 / entier ne laisse aucun trou. ⚠️ NE PAS CONFONDRE avec l'échelle de VISIBILITÉ (base.css) — 767 / 768–1023 / 1024 — qui traduit les trois cases « masquer sur téléphone / tablette / ordinateur » de l'administration. Celle-là est un CONTRAT avec l'exploitant : la changer changerait le sens de réglages déjà posés sur des sites en ligne. Elle décrit ce que l'utilisateur a demandé de cacher ; celle-ci décrit où le design se réorganise. Deux intentions, deux échelles. ---------------------------------------------------------- */ /* ---------------------------------------------------------- Responsive ---------------------------------------------------------- */ /* 899.98 et non 768 : entre 769 et 900 px le menu était DÉJÀ en burger (components.css) alors que les grilles tenaient encore sur deux colonnes — deux idées du « mobile » qui ne coïncidaient pas. Elles coïncident. */ @media (max-width: 899.98px) { .container { padding-inline: var(--space-md); } .section { /* Le coefficient de la section vaut AUSSI en mobile : sans lui, un réglage « Grand » ou « Aucun » n'aurait aucun effet sur téléphone, alors que c'est là que la respiration compte le plus. */ padding-block: calc(var(--space-xl) * var(--sp-top, 1)) calc(var(--space-xl) * var(--sp-bottom, 1)); } }