/* ============================================================ 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); } /* Variante étroite : ne dépasse jamais la largeur du site */ .container--narrow { max-width: min(800px, var(--site-width, 1200px)); } .container--wide { max-width: 1400px; } /* ---------------------------------------------------------- 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); } .section__label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-accent); margin-bottom: var(--space-sm); display: block; } /* ---------------------------------------------------------- Grid ---------------------------------------------------------- */ .grid { display: grid; gap: var(--space-lg); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* ---------------------------------------------------------- Flex utilities ---------------------------------------------------------- */ .flex { display: flex; } .flex--center { align-items: center; justify-content: center; } .flex--between { align-items: center; justify-content: space-between; } .flex--column { flex-direction: column; } .flex--gap-sm { gap: var(--space-sm); } .flex--gap-md { gap: var(--space-md); } .flex--gap-lg { gap: var(--space-lg); } /* ---------------------------------------------------------- Spacing utilities ---------------------------------------------------------- */ .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } /* ---------------------------------------------------------- Text alignment ---------------------------------------------------------- */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* ---------------------------------------------------------- Responsive ---------------------------------------------------------- */ @media (max-width: 768px) { .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)); } .grid--2, .grid--3 { grid-template-columns: 1fr; } } @media (max-width: 480px) { .container { padding-inline: var(--space-md); } }