:root { --site-primary: #3e6b7c; --site-on-primary: #ffffff; --site-ink: #1e2a2f; --site-paper: #fafdfe; --site-radius: 0px; --site-muted: #e8f0f3; --site-max-width: 1400px; --site-gutter: 1.25rem; --site-density: 1; --site-font-heading: 'Spectral', Georgia, serif; --site-font-body: 'Source Sans 3', -apple-system, Segoe UI, Roboto, sans-serif; } .site-container { max-width: var(--site-max-width); margin: 0 auto; padding: 0 var(--site-gutter); } /* Sur petit écran, un plancher : la marge choisie peut être minuscule, le texte ne doit jamais toucher le bord. */ @media (max-width: 700px) { .site-container { padding: 0 max(var(--site-gutter), 1.25rem); } } .site-heading { font-family: var(--site-font-heading); font-weight: 600; margin: 0 0 1rem; } .site-overline { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; opacity: .7; margin: 0 0 .5rem; } .site-subtitle { font-size: 1.1rem; opacity: .8; } .site-body :last-child { margin-bottom: 0; } /* Un lien écrit DANS un texte. `a:not([class])` : tous les liens que nos gabarits posent portent une classe (`site-btn`, `site-link-card`, `site-nav-client`…). Ceux qui n'en ont pas sont ceux que le photographe a créés lui-même dans un paragraphe, et eux seuls ont besoin d'être habillés — sans ça, le navigateur les laissait en bleu souligné au milieu d'une page dessinée. `color: inherit` et non la couleur principale : le texte d'un bloc se lit sur cinq schémas, dont un où le fond EST la couleur principale. Un lien de cette couleur y serait invisible. C'est le soulignement qui dit « lien », comme dans un livre. */ .site-block a:not([class]), .site-footer-text a:not([class]) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: opacity .15s; } .site-block a:not([class]):hover, .site-footer-text a:not([class]):hover { opacity: .6; } /* --- animation à l'arrivée dans l'écran ------------------------------ `site-animate` est posée par le script, jamais par la page : sans JavaScript, aucun bloc n'est caché et le site s'affiche en entier. */ .site-animate .site-block { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .site-animate .site-block.is-in { opacity: 1; transform: none; } /* Le réglage système l'emporte : il existe pour les personnes que le mouvement rend malades. */ @media (prefers-reduced-motion: reduce) { .site-animate .site-block { opacity: 1; transform: none; transition: none; } } /* --- boutons ----------------------------------------------------------- Un seul réglage, valable pour tout le site : le gabarit d'un bouton ne porte donc aucune classe de style. Le contour et le souligné héritent de la couleur du texte, donc ils restent lisibles sur les cinq schémas sans qu'on écrive une règle par schéma. */ .site-btn { display: inline-block; margin-top: 1.25rem; text-decoration: none; padding: .7rem 1.6rem; font-size: .88rem; border-radius: 0; text-transform: uppercase; letter-spacing: .1em; background: none; color: inherit; border: 1px solid currentColor; } .site-btn:hover { opacity: .65; } /* Les cinq schémas. Un bloc en choisit un, jamais une couleur. */ .site-scheme--light { background: #fafdfe; color: #1e2a2f; } .site-scheme--light_accent { background: #e8f0f3; color: #1e2a2f; } .site-scheme--accent { background: #3e6b7c; color: #ffffff; } .site-scheme--dark_accent { background: #222e34; color: #f5f5f5; } .site-scheme--dark { background: #12191d; color: #f5f5f5; } /* Le cran du bloc, multiplié par la densité du site. */ .site-spacing--compact { padding: calc(2rem * var(--site-density)) 0; } .site-spacing--normal { padding: calc(4rem * var(--site-density)) 0; } .site-spacing--large { padding: calc(6.5rem * var(--site-density)) 0; } .site-image img, .site-banner-image img { width: 100%; height: auto; display: block; border-radius: var(--site-radius); } .site-image--full { margin: 0; } .site-image--full img { border-radius: 0; } /* « Pleine largeur » veut dire la largeur de la PAGE, pas celle de la colonne de texte. L'enveloppe du bloc relâche donc sa laisse : c'est elle qui tient la largeur maximale et les marges, et une image ne peut pas s'en échapper toute seule sans les hacks en `100vw`, qui débordent dès qu'il y a une barre de défilement. */ .site-block--bleed > .site-container { max-width: none; padding: 0; } /* --- page de bio ----------------------------------------------------------- La page qu'on colle dans une bio Instagram. Une colonne étroite, centrée, et rien autour : le visiteur n'a qu'une chose à y faire, choisir où aller. Ce n'est pas un gabarit de plus : ce sont les blocs du site, resserrés. Un bloc amélioré l'est donc aussi ici. */ .site-bio { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; } .site-bio > .site-block { background: none; color: inherit; } .site-bio > .site-block > .site-container { max-width: 480px; } /* Les blocs y respirent moins : une page de bio se lit d'un écran. */ .site-bio > .site-block { padding-block: calc(1rem * var(--site-density)); } .site-bio > .site-block:first-child { padding-top: calc(3rem * var(--site-density)); } .site-bio > .site-block:last-child { padding-bottom: calc(3rem * var(--site-density)); } .site-bio .site-heading, .site-bio .site-subtitle, .site-bio .site-body { text-align: center; } /* Les liens deviennent des boutons pleine largeur : c'est LE geste de cette page, il ne doit pas ressembler à une ligne de texte. */ .site-bio .site-links-list { display: grid; gap: .75rem; } .site-bio .site-link-card { display: block; width: 100%; margin: 0; padding: .95rem 1.25rem; border: 1px solid currentColor; border-radius: var(--site-radius); text-align: center; transition: opacity .15s ease; } .site-bio .site-link-card + .site-link-card { margin-top: 0; } .site-bio .site-link-card:hover { opacity: .7; } .site-bio .site-link-card-title { font-size: 1rem; } .site-bio .site-link-card-image { display: none; } .site-bio .site-btn { display: block; margin: 0; text-align: center; } .site-bio .site-socials-list { justify-content: center; } .site-bio .site-news-form { max-width: none; } /* Le fond. Un aplat pris dans les couleurs du site, ou une photo derrière un voile — sans lui, un texte clair sur une photo claire ne se lit pas. */ .site-bio--photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--site-bio-photo); background-size: cover; background-position: center; } .site-bio--photo::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, var(--site-bio-veil, 45%)); } .site-bio--photo > * { position: relative; z-index: 1; } @media (max-width: 480px) { .site-bio > .site-block > .site-container { max-width: none; } } .site-image figcaption { font-size: .85rem; opacity: .7; margin-top: .5rem; } .site-gallery-grid { display: grid; gap: 1rem; } .site-gallery--grid_three .site-gallery-grid { grid-template-columns: repeat(3, 1fr); } .site-gallery--grid_two .site-gallery-grid { grid-template-columns: repeat(2, 1fr); } .site-gallery--mosaic .site-gallery-grid { grid-template-columns: repeat(4, 1fr); } .site-gallery--mosaic .site-gallery-cell:first-child { grid-column: span 2; grid-row: span 2; } /* La CASE porte les proportions, l'image la remplit. C'est la case qui donne sa hauteur à la rangée : sans elle, une photo portrait l'imposait à ses voisines, qui s'étiraient pour suivre. */ .site-gallery-cell { display: block; overflow: hidden; border-radius: var(--site-radius); } .site-gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-gallery--ratio-square .site-gallery-cell { aspect-ratio: 1 / 1; } .site-gallery--ratio-portrait .site-gallery-cell { aspect-ratio: 4 / 5; } .site-gallery--ratio-landscape .site-gallery-cell { aspect-ratio: 3 / 2; } .site-gallery--ratio-wide .site-gallery-cell { aspect-ratio: 16 / 9; } /* Une case qui couvre plusieurs rangées se règle sur elles, pas sur ses propres proportions. */ .site-gallery--mosaic .site-gallery-cell:first-child, .site-gallery--collage .site-gallery-cell { aspect-ratio: auto; height: 100%; } @media (max-width: 768px) { .site-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; } .site-gallery--mosaic .site-gallery-cell:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; height: auto; } .site-spacing--large { padding: calc(3.5rem * var(--site-density)) 0; } } .site-banner--image_background { background-size: cover; background-position: center; padding: 5rem 2rem; text-align: center; } /* Une bannière en fond dont la photo manque, dans l'éditeur : un aplat aux couleurs du site dit la place qui attend une photo, sans rien écrire par-dessus le titre. */ .site-banner--waiting { background-color: var(--site-muted); } .site-banner--image_left, .site-banner--image_right { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } .site-banner--image_right .site-banner-image { order: 2; } @media (max-width: 768px) { .site-banner--image_left, .site-banner--image_right { grid-template-columns: 1fr; } } /* --- alignement choisi, champ par champ ------------------------------- Posé sur le champ LUI-MÊME, donc il l'emporte sur l'alignement que la variante donne au bloc : une déclaration directe bat toujours une valeur héritée, quelle que soit la spécificité. Sans choix, l'attribut n'est pas écrit et la variante garde la main. */ [data-fs-align="left"] { text-align: left; } [data-fs-align="center"] { text-align: center; } [data-fs-align="right"] { text-align: right; } /* Un paragraphe bridé à 62ch est centré par ses marges : l'aligner à droite doit le pousser à droite, pas seulement son texte dans sa colonne. */ .site-body[data-fs-align="left"] { margin-left: 0; margin-right: auto; } .site-body[data-fs-align="right"] { margin-left: auto; margin-right: 0; } /* --- alignements des blocs de texte ---------------------------------- */ .site-text--heading, .site-text--heading_subtitle, .site-text--overline_heading, .site-text--paragraph { text-align: center; } .site-text--paragraph .site-body, .site-text--heading_subtitle .site-subtitle { max-width: 62ch; margin-left: auto; margin-right: auto; } .site-text--paragraph_left, .site-text--two_columns, .site-text--split_left { text-align: left; } /* Titre à gauche, texte à droite : la mise en page la plus demandée pour une page « à propos ». */ .site-text--split_left { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5rem; align-items: start; } .site-text--split_left .site-heading { margin-bottom: 0; } .site-text--split_left .site-text-side { position: sticky; top: 2rem; } @media (max-width: 768px) { .site-text--split_left { grid-template-columns: 1fr; gap: 1rem; } } /* --- boutons : alignement du bloc ------------------------------------- */ .site-button-block--centered { text-align: center; } .site-button-block--right { text-align: right; } .site-button-block--full .site-btn { display: block; text-align: center; } /* --- images ------------------------------------------------------------ */ .site-image--wide img { aspect-ratio: 16 / 9; object-fit: cover; } .site-image--portrait img { aspect-ratio: 3 / 4; object-fit: cover; max-width: 520px; margin: 0 auto; } /* L'avatar : une photo de profil, donc ronde, petite et centrée. Elle ne s'étire jamais — une tête déformée se voit tout de suite. */ .site-image--round img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; width: 140px; max-width: 60%; margin: 0 auto; } /* --- galeries supplémentaires ------------------------------------------ */ .site-gallery--grid_four .site-gallery-grid { grid-template-columns: repeat(4, 1fr); } /* Une bande : toutes les images à la même hauteur, alignées. */ .site-gallery--strip .site-gallery-grid { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; } /* Une bande impose son propre format : toutes les images à la même hauteur. */ .site-gallery--strip .site-gallery-cell { aspect-ratio: 3 / 4; } /* En colonnes, sans rognage : chaque image garde ses proportions. */ /* Colonnes : aucune case, donc aucun recadrage. Chaque photo garde ses proportions, c'est la variante pour qui refuse de rogner. */ .site-gallery--masonry .site-gallery-grid { display: block; columns: 3; column-gap: 1rem; } .site-gallery--masonry .site-gallery-cell { aspect-ratio: auto; margin-bottom: 1rem; break-inside: avoid; } .site-gallery--masonry .site-gallery-cell img { height: auto; } /* Un collage : la première image domine, les autres se posent dessus. */ .site-gallery--collage .site-gallery-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 60px; } .site-gallery--collage .site-gallery-cell:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 5; } .site-gallery--collage .site-gallery-cell:nth-child(2) { grid-column: 5 / 7; grid-row: 2 / 5; } .site-gallery--collage .site-gallery-cell:nth-child(3) { grid-column: 4 / 6; grid-row: 5 / 8; } .site-gallery--collage .site-gallery-cell:nth-child(n+4) { display: none; } @media (max-width: 768px) { .site-gallery--grid_four .site-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; } .site-gallery--masonry .site-gallery-grid { columns: 2; } .site-gallery--strip .site-gallery-grid { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); } .site-gallery--collage .site-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto; } .site-gallery--collage .site-gallery-cell { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 1 / 1; height: auto; } } /* --- page introuvable ---------------------------------------------------- */ .site-missing { text-align: center; max-width: 560px; } .site-missing .site-body { margin-bottom: 1.75rem; } /* --- portfolio ---------------------------------------------------------- */ /* Une liste de galeries : une couverture, un nom, parfois une date. Les mêmes proportions de case que les galeries, et le même rognage, parce que des couvertures de formats différents alignées côte à côte donnent une rangée en escalier. */ .site-portfolio-grid { display: grid; gap: 1.5rem; } .site-portfolio--grid_two .site-portfolio-grid { grid-template-columns: repeat(2, 1fr); } .site-portfolio--grid_three .site-portfolio-grid { grid-template-columns: repeat(3, 1fr); } .site-portfolio--grid_four .site-portfolio-grid { grid-template-columns: repeat(4, 1fr); } .site-portfolio-item { display: block; color: inherit; text-decoration: none; } .site-portfolio-cover { display: block; overflow: hidden; border-radius: var(--site-radius); background: var(--site-muted); } .site-portfolio-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } /* Le nom sous la couverture, comme une légende : c'est la photo qu'on regarde d'abord, le nom sert à s'y retrouver. */ .site-portfolio-name { display: block; margin-top: .7rem; font-family: var(--site-font-heading); font-size: 1rem; } .site-portfolio-date { display: block; margin-top: .15rem; font-size: .72rem; opacity: .65; letter-spacing: .08em; text-transform: uppercase; } /* Le survol ne bouge que sur un vrai lien : une carte sans galerie derrière ne doit pas promettre qu'on peut cliquer. */ a.site-portfolio-item:hover .site-portfolio-cover img { transform: scale(1.04); } .site-gallery--ratio-square .site-portfolio-cover { aspect-ratio: 1 / 1; } .site-gallery--ratio-portrait .site-portfolio-cover { aspect-ratio: 4 / 5; } .site-gallery--ratio-landscape .site-portfolio-cover { aspect-ratio: 3 / 2; } .site-gallery--ratio-wide .site-portfolio-cover { aspect-ratio: 16 / 9; } /* En lignes : la couverture à gauche, le nom à côté. Une seule colonne, pour les portfolios courts qu'on lit plutôt qu'on ne parcourt. Le nom et la date sont deux enfants de rang égal : sans les placer, la date retombait dans la colonne de la couverture, une rangée plus bas. Deux rangées, la couverture à cheval sur les deux, et le texte serré autour de la ligne médiane. */ .site-portfolio--rows .site-portfolio-grid { grid-template-columns: 1fr; gap: 1.25rem; } .site-portfolio--rows .site-portfolio-item { display: grid; grid-template-columns: 180px 1fr; grid-template-rows: 1fr 1fr; column-gap: 1.5rem; } .site-portfolio--rows .site-portfolio-cover { grid-row: 1 / span 2; } .site-portfolio--rows .site-portfolio-name { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 1.25rem; align-self: end; } .site-portfolio--rows .site-portfolio-date { grid-column: 2; grid-row: 2; align-self: start; margin-top: .35rem; } @media (max-width: 768px) { .site-portfolio--grid_three .site-portfolio-grid, .site-portfolio--grid_four .site-portfolio-grid { grid-template-columns: repeat(2, 1fr); } .site-portfolio--rows .site-portfolio-item { grid-template-columns: 110px 1fr; column-gap: 1rem; } } /* --- bannières supplémentaires ----------------------------------------- */ .site-banner--image_background_tall { background-size: cover; background-position: center; min-height: 78vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5rem 2rem; } /* Texte posé en bas de l'image, sur un dégradé : lisible quelle que soit la photo. */ .site-banner--overlay_bottom { position: relative; } .site-banner--overlay_bottom .site-banner-image img { aspect-ratio: 16 / 9; object-fit: cover; } .site-banner--overlay_bottom .site-banner-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 2rem 2rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); } .site-banner--overlay_bottom .site-banner-content .site-heading { color: #fff; } /* --- compositions d'images ----------------------------------------------- Elles ne remplissent pas une grille : elles dessinent une mise en page, à nombre d'images fixe. Chaque case impose donc ses propres proportions, et le format choisi pour le bloc ne s'y applique pas. Sur petit écran, tout se remet en colonne : un chevauchement calculé pour 1200 pixels n'a aucun sens sur 375. */ .site-gallery--duo_offset .site-gallery-grid, .site-gallery--duo_overlap .site-gallery-grid, .site-gallery--pair_round .site-gallery-grid { grid-template-columns: repeat(2, 1fr); align-items: start; } .site-gallery--trio_center .site-gallery-grid, .site-gallery--trio_stagger .site-gallery-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } .site-gallery--duo_offset .site-gallery-cell { aspect-ratio: 4 / 5; } .site-gallery--duo_offset .site-gallery-cell:nth-child(2) { margin-top: 22%; } .site-gallery--duo_overlap .site-gallery-grid { gap: 0; } .site-gallery--duo_overlap .site-gallery-cell { aspect-ratio: 4 / 5; } .site-gallery--duo_overlap .site-gallery-cell:nth-child(2) { margin: 16% 0 0 -18%; z-index: 2; aspect-ratio: 1 / 1; box-shadow: 0 8px 40px rgba(0, 0, 0, .18); } .site-gallery--trio_center .site-gallery-cell { aspect-ratio: 1 / 1; margin-top: 12%; } .site-gallery--trio_center .site-gallery-cell:nth-child(2) { aspect-ratio: 3 / 4; margin-top: 0; } .site-gallery--trio_stagger .site-gallery-cell { aspect-ratio: 4 / 5; } .site-gallery--trio_stagger .site-gallery-cell:nth-child(2) { margin-top: 16%; } .site-gallery--trio_stagger .site-gallery-cell:nth-child(3) { margin-top: 32%; } .site-gallery--pair_round .site-gallery-cell:nth-child(1) { aspect-ratio: 1 / 1; border-radius: 50%; margin-top: 10%; } .site-gallery--pair_round .site-gallery-cell:nth-child(2) { aspect-ratio: 3 / 4; } /* Une grande image, et une petite posée dans son coin. */ .site-gallery--hero_inset .site-gallery-grid { display: block; position: relative; } .site-gallery--hero_inset .site-gallery-cell:nth-child(1) { aspect-ratio: 3 / 2; } .site-gallery--hero_inset .site-gallery-cell:nth-child(2) { position: absolute; right: -2%; bottom: -12%; width: 32%; aspect-ratio: 3 / 4; z-index: 2; box-shadow: 0 8px 40px rgba(0, 0, 0, .18); } .site-gallery--hero_inset { padding-bottom: 6%; } .site-gallery--duo_offset .site-gallery-cell:nth-child(n+3) { display: none; } .site-gallery--duo_overlap .site-gallery-cell:nth-child(n+3) { display: none; } .site-gallery--trio_center .site-gallery-cell:nth-child(n+4) { display: none; } .site-gallery--trio_stagger .site-gallery-cell:nth-child(n+4) { display: none; } .site-gallery--pair_round .site-gallery-cell:nth-child(n+3) { display: none; } .site-gallery--hero_inset .site-gallery-cell:nth-child(n+3) { display: none; } .site-gallery--collage .site-gallery-cell:nth-child(n+4) { display: none; } @media (max-width: 768px) { .site-gallery--duo_offset .site-gallery-grid, .site-gallery--duo_overlap .site-gallery-grid, .site-gallery--pair_round .site-gallery-grid, .site-gallery--trio_center .site-gallery-grid, .site-gallery--trio_stagger .site-gallery-grid { grid-template-columns: 1fr; gap: 1rem; } .site-gallery--duo_offset .site-gallery-cell, .site-gallery--duo_overlap .site-gallery-cell, .site-gallery--pair_round .site-gallery-cell, .site-gallery--trio_center .site-gallery-cell, .site-gallery--trio_stagger .site-gallery-cell { margin: 0 !important; aspect-ratio: 4 / 5; } .site-gallery--pair_round .site-gallery-cell:nth-child(1) { aspect-ratio: 1 / 1; } .site-gallery--hero_inset .site-gallery-cell:nth-child(2) { position: static; width: 100%; margin-top: 1rem; } .site-gallery--hero_inset { padding-bottom: 0; } } /* --- diaporama ----------------------------------------------------------- Le défilement et l'accroche sont ceux du navigateur. Sans JavaScript, la bande reste parcourable au doigt et au clavier ; seuls les boutons et les vignettes s'en passent. */ .site-slider-viewport { position: relative; } .site-slider-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .site-slider-track::-webkit-scrollbar { display: none; } .site-slider-slide { flex: 0 0 100%; scroll-snap-align: center; display: block; border-radius: var(--site-radius); overflow: hidden; } .site-slider-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-slider-slide > .site-slide-photo { height: 100%; } .site-slider--ratio-square .site-slider-slide { aspect-ratio: 1 / 1; } .site-slider--ratio-portrait .site-slider-slide { aspect-ratio: 4 / 5; } .site-slider--ratio-landscape .site-slider-slide { aspect-ratio: 3 / 2; } .site-slider--ratio-wide .site-slider-slide { aspect-ratio: 16 / 9; } /* Les voisines dépassent de chaque côté : on voit qu'il y a une suite. */ .site-slider--peek .site-slider-slide { flex-basis: 74%; } .site-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; background: var(--site-paper); color: var(--site-ink); opacity: .85; } .site-slider-arrow:hover { opacity: 1; } .site-slider-arrow::before { content: ""; display: block; width: 9px; height: 9px; margin: 0 auto; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; } .site-slider-arrow--prev { left: .75rem; } .site-slider-arrow--prev::before { transform: translateX(2px) rotate(-135deg); } .site-slider-arrow--next { right: .75rem; } .site-slider-arrow--next::before { transform: translateX(-2px) rotate(45deg); } .site-slider-thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; scrollbar-width: none; } .site-slider-thumbs::-webkit-scrollbar { display: none; } .site-slider-thumb { flex: 0 0 72px; aspect-ratio: 1; border: 0; padding: 0; cursor: pointer; border-radius: var(--site-radius); overflow: hidden; opacity: .45; transition: opacity .15s; background: none; } .site-slider-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-slider-thumb.is-on, .site-slider-thumb:hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .site-slider-track { scroll-behavior: auto; } } @media (max-width: 768px) { .site-slider--peek .site-slider-slide { flex-basis: 88%; } .site-slider-arrow { display: none; } } /* --- image et texte ------------------------------------------------------ L'ordre du HTML ne change jamais : l'image d'abord, le texte ensuite. Les variantes les placent en CSS, donc la lecture au clavier et par un lecteur d'écran reste la même partout. */ .site-feature { display: grid; gap: 2.5rem; align-items: center; } .site-feature--image_left, .site-feature--image_right { grid-template-columns: repeat(2, 1fr); } .site-feature--image_right .site-feature-image { order: 2; } .site-feature-image img { width: 100%; display: block; border-radius: var(--site-radius); } .site-feature-text .site-heading { margin-bottom: 1rem; } /* Titre et deux colonnes de texte, puis l'image en grand dessous. */ .site-feature--image_below { grid-template-columns: 1fr; gap: 1.75rem; } .site-feature--image_below .site-feature-image { order: 2; } .site-feature--image_below .site-feature-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } .site-feature--image_below .site-feature-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2.5rem; align-items: start; } .site-feature--image_below .site-heading { grid-row: span 2; margin-bottom: 0; } /* Le texte dans une carte posée sur l'image. */ .site-feature--card_overlap { grid-template-columns: 1fr; gap: 0; position: relative; } .site-feature--card_overlap .site-feature-image img { aspect-ratio: 16 / 9; object-fit: cover; } .site-feature--card_overlap .site-feature-text { background: var(--site-paper); color: var(--site-ink); padding: 2.5rem; border-radius: var(--site-radius); width: min(480px, 82%); margin: -12% 0 0 auto; position: relative; z-index: 2; box-shadow: 0 10px 50px rgba(0, 0, 0, .12); } /* L'image décalée, le texte qui la chevauche. */ .site-feature--image_offset { grid-template-columns: repeat(12, 1fr); gap: 0; align-items: center; } .site-feature--image_offset .site-feature-image { grid-column: 5 / 13; grid-row: 1; } .site-feature--image_offset .site-feature-image img { aspect-ratio: 4 / 5; object-fit: cover; } .site-feature--image_offset .site-feature-text { grid-column: 1 / 6; grid-row: 1; z-index: 2; background: var(--site-paper); color: var(--site-ink); padding: 2.25rem; border-radius: var(--site-radius); box-shadow: 0 10px 50px rgba(0, 0, 0, .12); } @media (max-width: 768px) { .site-feature { grid-template-columns: 1fr !important; gap: 1.5rem; } .site-feature-image, .site-feature-text { order: 0 !important; grid-column: auto !important; grid-row: auto !important; } .site-feature--card_overlap .site-feature-text, .site-feature--image_offset .site-feature-text { width: auto; margin: 0; padding: 1.5rem 0; background: none; box-shadow: none; } .site-feature--image_below .site-feature-text, .site-feature--image_below .site-feature-columns { grid-template-columns: 1fr; gap: 1rem; } } /* --- cartes image + titre + texte ---------------------------------------- */ .site-cards-grid { display: grid; gap: 1.75rem; } .site-cards--two .site-cards-grid { grid-template-columns: repeat(2, 1fr); } .site-cards--three .site-cards-grid { grid-template-columns: repeat(3, 1fr); } .site-cards--four .site-cards-grid { grid-template-columns: repeat(4, 1fr); } .site-card-image { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--site-radius); } .site-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-card-title { font-family: var(--site-font-heading); font-size: 1.05rem; font-weight: 500; margin: 1rem 0 .5rem; } .site-card-text { font-size: .92rem; opacity: .85; } .site-card-text :last-child { margin-bottom: 0; } @media (max-width: 768px) { .site-cards--three .site-cards-grid, .site-cards--four .site-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .site-cards-grid { grid-template-columns: 1fr !important; } } /* --- liens présentés ----------------------------------------------------- Un seul gabarit, trois familles : une grande image avec la carte des liens posée dessus, une image par lien, ou les liens seuls. */ .site-links { position: relative; } .site-link-card { display: block; text-decoration: none; color: inherit; } .site-link-card-title { display: block; font-family: var(--site-font-heading); font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; } .site-link-card-subtitle { display: block; font-size: .74rem; letter-spacing: .08em; opacity: .65; margin-top: .35rem; text-transform: uppercase; } .site-link-card:hover .site-link-card-title { opacity: .65; } /* Une grande image, la carte des liens posée dessus. */ .site-links--card_left, .site-links--card_right { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; } .site-links--card_left .site-links-image, .site-links--card_right .site-links-image { grid-row: 1; } .site-links--card_left .site-links-image { grid-column: 4 / 13; } .site-links--card_right .site-links-image { grid-column: 1 / 10; } .site-links--card_left .site-links-image img, .site-links--card_right .site-links-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--site-radius); } .site-links--card_left .site-links-list, .site-links--card_right .site-links-list { grid-row: 1; z-index: 2; background: var(--site-paper); color: var(--site-ink); padding: 2.5rem 2rem; text-align: center; border-radius: var(--site-radius); box-shadow: 0 10px 50px rgba(0, 0, 0, .12); } .site-links--card_left .site-links-list { grid-column: 1 / 6; } .site-links--card_right .site-links-list { grid-column: 8 / 13; } .site-links--card_left .site-link-card + .site-link-card, .site-links--card_right .site-link-card + .site-link-card { margin-top: 1.75rem; } /* Une image par lien. */ .site-links--columns_two .site-links-list, .site-links--columns_three .site-links-list, .site-links--columns_four .site-links-list, .site-links--overlay .site-links-list { display: grid; gap: 1.5rem; text-align: center; } .site-links--columns_two .site-links-list { grid-template-columns: repeat(2, 1fr); } .site-links--columns_three .site-links-list, .site-links--overlay .site-links-list { grid-template-columns: repeat(3, 1fr); } .site-links--columns_four .site-links-list { grid-template-columns: repeat(4, 1fr); } .site-link-card-image { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--site-radius); } .site-link-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .site-link-card:hover .site-link-card-image img { transform: scale(1.04); } .site-links--columns_two .site-link-card-text, .site-links--columns_three .site-link-card-text, .site-links--columns_four .site-link-card-text { display: block; margin-top: 1rem; } /* Le titre posé sur l'image, sur un voile sombre pour rester lisible. */ .site-links--overlay .site-link-card { position: relative; } .site-links--overlay .site-link-card-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .28); border-radius: var(--site-radius); } .site-links--overlay .site-link-card-subtitle { opacity: .85; } /* Images décalées, titre dessous. */ .site-links--stagger .site-links-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; align-items: start; } .site-links--stagger .site-link-card:nth-child(2) { margin-top: 14%; } .site-links--stagger .site-link-card:nth-child(3) { margin-top: 28%; } .site-links--stagger .site-link-card-text { display: block; margin-top: 1rem; } /* Sans image. */ .site-links--inline .site-links-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 3.5rem; text-align: center; } .site-links--boxed .site-links-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .site-links--boxed .site-link-card { background: var(--site-muted, rgba(128, 128, 128, .08)); padding: 2.25rem 1.25rem; text-align: center; border-radius: var(--site-radius); } .site-links--boxed .site-link-card:hover { opacity: .85; } .site-links--stacked .site-links-list { text-align: center; } .site-links--stacked .site-link-card + .site-link-card { margin-top: 1.75rem; } @media (max-width: 768px) { .site-links--card_left, .site-links--card_right { grid-template-columns: 1fr; gap: 1rem; } .site-links--card_left .site-links-image, .site-links--card_right .site-links-image, .site-links--card_left .site-links-list, .site-links--card_right .site-links-list { grid-column: auto; grid-row: auto; } .site-links--card_left .site-links-list, .site-links--card_right .site-links-list { background: none; box-shadow: none; padding: 1.5rem 0; } .site-links--columns_three .site-links-list, .site-links--columns_four .site-links-list, .site-links--overlay .site-links-list, .site-links--boxed .site-links-list, .site-links--stagger .site-links-list { grid-template-columns: repeat(2, 1fr); } .site-links--stagger .site-link-card { margin-top: 0 !important; } .site-links--inline .site-links-list { gap: 1.75rem; } } /* --- un texte long, replié --------------------------------------------- Une description de tarif fait parfois vingt lignes et écrase la carte. On la coupe à six, avec un fondu qui dit que ça continue, et de quoi la déplier. Tout en CSS, par une case à cocher : sans JavaScript le dépliage marche quand même. Un bouton piloté par script aurait laissé le texte coupé sans aucun moyen de le lire. */ .site-clamp { position: relative; } .site-clamp-check { position: absolute; width: 1px; height: 1px; opacity: 0; } .site-clamp-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } /* Le fondu ne peut pas vivre sur le texte lui-même : `-webkit-box` ne rend pas ses pseudo-éléments. Il se pose donc sur l'enveloppe. */ .site-clamp:not(:has(.site-clamp-check:checked))::before { content: ""; position: absolute; left: 0; right: 0; bottom: 1.8rem; height: 3.5rem; pointer-events: none; z-index: 1; background: linear-gradient(to bottom, transparent, var(--site-paper)); } .site-clamp:has(.site-clamp-check:checked) .site-clamp-text { display: block; -webkit-line-clamp: none; overflow: visible; } .site-clamp-more { display: inline-block; margin-top: .5rem; cursor: pointer; font-size: .82rem; text-decoration: underline; opacity: .75; } .site-clamp-more:hover { opacity: 1; } .site-clamp-check:focus-visible + .site-clamp-more { outline: 2px solid var(--site-primary); outline-offset: 2px; } .site-clamp .site-clamp-close, .site-clamp:has(.site-clamp-check:checked) .site-clamp-open { display: none; } .site-clamp:has(.site-clamp-check:checked) .site-clamp-close { display: inline; } /* --- catalogue du CRM ------------------------------------------------------ Il emprunte tout l'habillage des prestations : ce sont des tarifs. Ne s'ajoute ici que ce qu'il a en propre — une intro, et le nom d'une rubrique quand le catalogue en compte plusieurs. */ .site-catalog-intro { text-align: center; max-width: 660px; margin: 0 auto 2rem; } .site-catalog-section { font-family: var(--site-font-heading); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; opacity: .7; margin: 2.5rem 0 1.25rem; text-align: center; } .site-catalog-section:first-of-type { margin-top: 0; } .site-catalog-choose { margin: 0; } .site-catalog-empty { text-align: center; opacity: .6; font-size: .92rem; padding: 2rem 0; } /* --- prestations --------------------------------------------------------- Chaque entrée porte sa photo, son prix, son détail et son bouton. Le HTML est le même pour les six variantes : seul le CSS les place. */ .site-pricing-list { display: grid; gap: 1.75rem; } .site-pricing-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--site-radius); } .site-pricing-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-pricing-title { font-family: var(--site-font-heading); font-size: 1.1rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin: 1rem 0 .35rem; } .site-pricing-price { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin: 0 0 .85rem; } .site-pricing-text { font-size: .92rem; opacity: .85; } .site-pricing-text ul { padding-left: 1.1rem; margin: 0; } .site-pricing-text :last-child { margin-bottom: 0; } .site-pricing--columns_two .site-pricing-list { grid-template-columns: repeat(2, 1fr); } .site-pricing--columns_three .site-pricing-list { grid-template-columns: repeat(3, 1fr); } .site-pricing--columns_two .site-pricing-item, .site-pricing--columns_three .site-pricing-item { text-align: center; } /* En cases, sans photo : le prix et le détail suffisent. */ .site-pricing--boxed .site-pricing-list { grid-template-columns: repeat(3, 1fr); } .site-pricing--boxed .site-pricing-item { background: var(--site-muted); color: var(--site-ink); padding: 2.25rem 1.5rem; text-align: center; border-radius: var(--site-radius); } .site-pricing--boxed .site-pricing-title { margin-top: 0; } /* Le titre et le prix posés sur la photo, sur un voile pour rester lisibles. */ .site-pricing--overlay .site-pricing-list { grid-template-columns: repeat(3, 1fr); } .site-pricing--overlay .site-pricing-item { position: relative; } .site-pricing--overlay .site-pricing-image { aspect-ratio: 3 / 4; } .site-pricing--overlay .site-pricing-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; background: rgba(0, 0, 0, .3); padding: 1.5rem; border-radius: var(--site-radius); } .site-pricing--overlay .site-pricing-title { margin-top: 0; } /* Une prestation par ligne, la photo alternant de côté. */ .site-pricing--rows .site-pricing-item { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; align-items: center; } .site-pricing--rows .site-pricing-item:nth-child(even) .site-pricing-image { order: 2; } .site-pricing--rows .site-pricing-image { aspect-ratio: 3 / 2; } .site-pricing--rows .site-pricing-title { margin-top: 0; } /* Une seule prestation, détaillée. */ .site-pricing--detail .site-pricing-item { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; align-items: center; } .site-pricing--detail .site-pricing-image { order: 2; aspect-ratio: 4 / 5; } .site-pricing--detail .site-pricing-title { margin-top: 0; font-size: 1.35rem; } @media (max-width: 768px) { .site-pricing--columns_three .site-pricing-list, .site-pricing--boxed .site-pricing-list, .site-pricing--overlay .site-pricing-list { grid-template-columns: repeat(2, 1fr); } .site-pricing--rows .site-pricing-item, .site-pricing--detail .site-pricing-item { grid-template-columns: 1fr; gap: 1.25rem; } .site-pricing--rows .site-pricing-image, .site-pricing--detail .site-pricing-image { order: 0; } } @media (max-width: 480px) { .site-pricing-list { grid-template-columns: 1fr !important; } } /* --- la photo en grand --------------------------------------------------- Le voile est fabriqué par le script : ces règles ne s'appliquent donc à rien tant que personne n'a cliqué, et une page sans JavaScript ne porte aucun élément caché qu'un accident pourrait révéler. Fond très sombre et neutre, jamais la couleur du site : ce qu'on regarde ici, c'est la photo. */ .site-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 3.5rem 4.5rem; background: rgba(16, 16, 18, .94); } .site-lightbox-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .9rem; } .site-lightbox-figure img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; object-fit: contain; display: block; } .site-lightbox figcaption { color: rgba(255, 255, 255, .8); font-size: .85rem; text-align: center; max-width: 60ch; } .site-lightbox-count { position: absolute; bottom: 1.25rem; left: 0; right: 0; margin: 0; text-align: center; color: rgba(255, 255, 255, .55); font-size: .75rem; letter-spacing: .16em; } .site-lightbox-arrow, .site-lightbox-close { position: absolute; border: 0; cursor: pointer; background: none; padding: 0; color: rgba(255, 255, 255, .75); } .site-lightbox-arrow:hover, .site-lightbox-close:hover { color: #fff; } .site-lightbox-arrow:focus-visible, .site-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } .site-lightbox-arrow { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; } .site-lightbox-arrow::before { content: ""; display: block; width: 16px; height: 16px; margin: 0 auto; border-top: 2px solid currentColor; border-right: 2px solid currentColor; } .site-lightbox-arrow--prev { left: .5rem; } .site-lightbox-arrow--prev::before { transform: translateX(4px) rotate(-135deg); } .site-lightbox-arrow--next { right: .5rem; } .site-lightbox-arrow--next::before { transform: translateX(-4px) rotate(45deg); } .site-lightbox-close { top: 1rem; right: 1rem; width: 44px; height: 44px; } .site-lightbox-close::before, .site-lightbox-close::after { content: ""; position: absolute; top: 50%; left: 25%; width: 50%; height: 2px; background: currentColor; } .site-lightbox-close::before { transform: rotate(45deg); } .site-lightbox-close::after { transform: rotate(-45deg); } /* La photo cliquable : le curseur l'annonce, rien d'autre ne change. */ a[data-lightbox-item] { cursor: zoom-in; } .site-image-frame { display: block; } .site-slide-photo { display: block; width: 100%; height: 100%; } @media (max-width: 768px) { .site-lightbox { padding: 3.5rem 1rem; } .site-lightbox-arrow { width: 40px; height: 40px; } .site-lightbox-arrow--prev { left: 0; } .site-lightbox-arrow--next { right: 0; } } /* --- vidéo --------------------------------------------------------------- Le cadre porte le format, pas l'affiche : le lecteur qui remplace l'affiche au clic tient donc exactement la même place, et la page ne saute pas. */ .site-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--site-radius); background: var(--site-muted); } .site-video-poster { position: absolute; inset: 0; display: block; cursor: pointer; } .site-video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-video iframe, .site-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Un bloc neuf n'a pas encore de lien : le bouton est là, mais il ne fait rien tant qu'on n'a pas collé d'adresse. */ .site-video--empty .site-video-poster { cursor: default; } /* Le bouton de lecture : deux pseudo-éléments, donc aucune image à charger et il reste net à toutes les tailles. */ .site-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; display: block; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 24px rgba(0, 0, 0, .18); transition: transform .15s; } .site-video-play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-left: 17px solid var(--site-ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; } a.site-video-poster:hover .site-video-play { transform: translate(-50%, -50%) scale(1.08); } @media (prefers-reduced-motion: reduce) { .site-video-play, a.site-video-poster:hover .site-video-play { transition: none; transform: translate(-50%, -50%); } } /* Une vidéo seule : les mêmes cadrages que le bloc image. */ .site-video-block { margin: 0; } .site-video-block--contained .site-video, .site-video-block--with_caption .site-video { max-width: 860px; margin: 0 auto; } .site-video-block--full .site-video { border-radius: 0; } .site-video-block figcaption { margin-top: .7rem; font-size: .9rem; opacity: .75; text-align: center; } /* Vidéo et texte. */ .site-video-text-list { display: grid; gap: 2.5rem; } .site-video-text-item { display: grid; gap: 2.5rem; align-items: center; } .site-video-text-title { font-family: var(--site-font-heading); font-size: 1.15rem; font-weight: 500; margin: 0 0 .6rem; } .site-video-text-text :last-child { margin-bottom: 0; } .site-video-text--video_left .site-video-text-item, .site-video-text--video_right .site-video-text-item, .site-video-text--rows .site-video-text-item { grid-template-columns: repeat(2, 1fr); } .site-video-text--video_right .site-video-text-item > .site-video { order: 2; } /* Une ligne sur deux inverse le côté : c'est ce qui donne le rythme. */ .site-video-text--rows .site-video-text-item:nth-child(even) > .site-video { order: 2; } /* Le texte au-dessus ou en dessous, centré et bridé : une colonne de texte large comme la page ne se lit pas. */ .site-video-text--text_above .site-video-text-item, .site-video-text--text_below .site-video-text-item { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; } .site-video-text--text_above .site-video-text-body, .site-video-text--text_below .site-video-text-body { max-width: 720px; margin: 0 auto; } .site-video-text--text_above .site-video-text-body { order: -1; } .site-video-text--columns_two .site-video-text-list { grid-template-columns: repeat(2, 1fr); } .site-video-text--columns_three .site-video-text-list { grid-template-columns: repeat(3, 1fr); } .site-video-text--columns_two .site-video-text-item, .site-video-text--columns_three .site-video-text-item { grid-template-columns: 1fr; gap: 1.1rem; align-items: start; text-align: center; } @media (max-width: 768px) { .site-video-text-item { grid-template-columns: 1fr !important; gap: 1.25rem; } .site-video-text-item > .site-video { order: 0 !important; } .site-video-text--columns_three .site-video-text-list { grid-template-columns: repeat(2, 1fr); } .site-video-play { width: 52px; height: 52px; } .site-video-play::after { border-left-width: 13px; border-top-width: 9px; border-bottom-width: 9px; } } @media (max-width: 480px) { .site-video-text-list { grid-template-columns: 1fr !important; } } /* --- citations et témoignages -------------------------------------------- Un seul jeu de classes pour le texte (.site-quote-text, .site-quote-author) : la citation seule et la liste de témoignages se composent donc pareil, et un réglage de police vaut pour les deux. */ .site-quote-text { font-family: var(--site-font-heading); font-size: 1.25rem; line-height: 1.65; font-style: italic; margin: 0; border: 0; padding: 0; } .site-quote-text :last-child { margin-bottom: 0; } .site-quote-author { margin-top: 1.1rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; opacity: .75; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; } /* La mention vient après le nom : la puce ne s'affiche que s'il y a les deux, donc un témoignage sans mention ne traîne pas un séparateur orphelin. */ .site-quote-name + .site-quote-role::before { content: "·"; margin-right: .5rem; opacity: .6; } .site-quote-role { font-style: italic; text-transform: none; letter-spacing: .04em; } /* La citation seule. */ .site-quote { margin: 0; display: grid; gap: 2.5rem; align-items: center; } .site-quote-image img { width: 100%; display: block; border-radius: var(--site-radius); } /* Sans photo : le texte au centre, la largeur bridée. Une citation qui court sur toute la page ne se lit plus comme une citation. */ .site-quote--centered, .site-quote--bordered, .site-quote--tinted, .site-quote--mark { max-width: 760px; margin: 0 auto; text-align: center; } .site-quote--centered .site-quote-author, .site-quote--bordered .site-quote-author, .site-quote--tinted .site-quote-author, .site-quote--mark .site-quote-author, .site-quote--image_background .site-quote-author { justify-content: center; } .site-quote--bordered { border: 1px solid rgba(128, 128, 128, .35); padding: 3rem 2.5rem; border-radius: var(--site-radius); } .site-quote--tinted { background: var(--site-muted); color: var(--site-ink); padding: 3.5rem 2.5rem; border-radius: var(--site-radius); max-width: none; } .site-quote--tinted .site-quote-body { max-width: 760px; margin: 0 auto; } /* Le grand guillemet est décoratif : aria-hidden ne s'écrit pas sur un pseudo-élément, et un lecteur d'écran ne lit pas le contenu généré. */ .site-quote--mark .site-quote-body::before { content: "\201C"; display: block; font-family: var(--site-font-heading); font-size: 4.5rem; line-height: .8; opacity: .3; margin-bottom: .5rem; } /* La pastille ronde : une photo de client, pas une photo de mariage. */ .site-quote--avatar { max-width: 760px; margin: 0 auto; text-align: center; justify-items: center; gap: 1.5rem; } .site-quote--avatar .site-quote-image { width: 84px; height: 84px; display: block; } .site-quote--avatar .site-quote-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .site-quote--avatar .site-quote-author { justify-content: center; } .site-quote--image_left, .site-quote--image_right { grid-template-columns: repeat(2, 1fr); } .site-quote--image_right .site-quote-image { order: 2; } .site-quote--image_left .site-quote-image img, .site-quote--image_right .site-quote-image img { aspect-ratio: 4 / 5; object-fit: cover; } /* La citation posée sur l'image : le voile garde le texte lisible quelle que soit la photo, y compris une photo claire. */ .site-quote--image_background { grid-template-columns: 1fr; gap: 0; position: relative; text-align: center; } .site-quote--image_background .site-quote-image { grid-area: 1 / 1; position: relative; display: block; } .site-quote--image_background .site-quote-image img { aspect-ratio: 16 / 9; object-fit: cover; } .site-quote--image_background .site-quote-image::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); border-radius: var(--site-radius); } .site-quote--image_background .site-quote-body { grid-area: 1 / 1; z-index: 2; color: #fff; align-self: center; padding: 2.5rem; max-width: 700px; margin: 0 auto; } /* La citation en carte, qui mord sur l'image. */ .site-quote--image_card { grid-template-columns: 1fr; gap: 0; } .site-quote--image_card .site-quote-image img { aspect-ratio: 16 / 9; object-fit: cover; } .site-quote--image_card .site-quote-body { background: var(--site-paper); color: var(--site-ink); padding: 2.5rem; border-radius: var(--site-radius); width: min(560px, 86%); margin: -10% auto 0; position: relative; z-index: 2; text-align: center; box-shadow: 0 10px 50px rgba(0, 0, 0, .12); } .site-quote--image_card .site-quote-author { justify-content: center; } /* Plusieurs témoignages. */ .site-quotes-list { display: grid; gap: 2.5rem; } .site-quotes-item { margin: 0; } .site-quotes-image { display: block; overflow: hidden; border-radius: var(--site-radius); } .site-quotes-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-quotes--columns_two .site-quotes-list { grid-template-columns: repeat(2, 1fr); } .site-quotes--columns_three .site-quotes-list { grid-template-columns: repeat(3, 1fr); } .site-quotes--columns_two .site-quotes-image, .site-quotes--columns_three .site-quotes-image, .site-quotes--carousel .site-quotes-image { aspect-ratio: 4 / 5; margin-bottom: 1.25rem; } .site-quotes--columns_two .site-quote-text, .site-quotes--columns_three .site-quote-text, .site-quotes--carousel .site-quote-text { font-size: 1.02rem; } /* Une par ligne, photo et texte côte à côte, et le côté s'inverse d'une ligne à l'autre : c'est ce qui donne le rythme d'une page de témoignages. */ .site-quotes--rows .site-quotes-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem; align-items: center; } .site-quotes--rows .site-quotes-image { aspect-ratio: 4 / 5; } .site-quotes--rows .site-quotes-item:nth-child(even) .site-quotes-image { order: 2; } .site-quotes--boxed .site-quotes-list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .site-quotes--boxed .site-quotes-item { border: 1px solid rgba(128, 128, 128, .3); border-radius: var(--site-radius); padding: 2rem; } .site-quotes--boxed .site-quote-text { font-size: 1rem; } .site-quotes--stacked .site-quotes-list { max-width: 760px; margin: 0 auto; gap: 0; } .site-quotes--stacked .site-quotes-item { padding: 2rem 0; border-bottom: 1px solid rgba(128, 128, 128, .25); } .site-quotes--stacked .site-quotes-item:last-child { border-bottom: 0; } /* Le carrousel emprunte le diaporama : mêmes attributs, donc mêmes flèches. */ .site-quotes--carousel .site-quotes-viewport { position: relative; } .site-quotes--carousel .site-quotes-list { display: flex; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .site-quotes--carousel .site-quotes-list::-webkit-scrollbar { display: none; } .site-quotes--carousel .site-quotes-item { flex: 0 0 32%; scroll-snap-align: center; } @media (prefers-reduced-motion: reduce) { .site-quotes--carousel .site-quotes-list { scroll-behavior: auto; } } @media (max-width: 768px) { .site-quote { grid-template-columns: 1fr !important; gap: 1.5rem; } .site-quote-image, .site-quote-body { order: 0 !important; } .site-quote--image_card .site-quote-body { width: auto; margin: 0; padding: 1.5rem 0; background: none; box-shadow: none; } .site-quotes--columns_three .site-quotes-list, .site-quotes--boxed .site-quotes-list { grid-template-columns: repeat(2, 1fr); } .site-quotes--rows .site-quotes-item { grid-template-columns: 1fr; gap: 1.25rem; } .site-quotes--rows .site-quotes-image { order: 0 !important; } .site-quotes--carousel .site-quotes-item { flex-basis: 78%; } .site-quotes--carousel .site-slider-arrow { display: none; } } @media (max-width: 480px) { .site-quotes-list { grid-template-columns: 1fr !important; } } /* --- foire aux questions ------------------------------------------------ */ .site-faq-items { max-width: 780px; margin: 0 auto; } .site-faq--two_columns .site-faq-items { max-width: none; columns: 2; column-gap: 3rem; } .site-faq-item { border-bottom: 1px solid rgba(128, 128, 128, .25); padding: 1.1rem 0; break-inside: avoid; } .site-faq-item summary { list-style: none; cursor: pointer; font-weight: 500; display: flex; align-items: flex-start; gap: 1rem; } .site-faq-item summary::-webkit-details-marker { display: none; } /* Le signe ne s'affiche qu'en accordéon : ailleurs il n'y a rien à déplier. */ .site-faq--accordion .site-faq-item summary::after { content: ""; margin-left: auto; flex: none; width: 9px; height: 9px; margin-top: .35rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; } .site-faq--accordion .site-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: .55rem; } .site-faq--accordion .site-faq-item summary { cursor: pointer; } .site-faq--open .site-faq-item summary { cursor: default; } .site-faq-answer { margin-top: .7rem; opacity: .85; } .site-faq-answer :last-child { margin-bottom: 0; } @media (max-width: 768px) { .site-faq--two_columns .site-faq-items { columns: 1; } } /* --- bandeau de consentement --------------------------------------------- En bas, discret, et jamais en plein écran : un bandeau qui recouvre la page pousse à cliquer « J'accepte » pour s'en débarrasser, ce qui n'est pas un consentement. Les deux boutons ont le même poids visuel, pour la même raison. */ .site-cookies { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 900; max-width: 640px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--site-paper); color: var(--site-ink); border-radius: var(--site-radius); box-shadow: 0 8px 40px rgba(0, 0, 0, .18); } .site-cookies-text { margin: 0; flex: 1 1 260px; font-size: .85rem; line-height: 1.5; } .site-cookies-text a { color: inherit; } .site-cookies-actions { display: flex; gap: .5rem; flex: none; } .site-cookies .site-btn { margin-top: 0; font-size: .8rem; padding: .5rem 1rem; } @media (max-width: 480px) { .site-cookies-actions { width: 100%; } .site-cookies .site-btn { flex: 1; text-align: center; } } /* --- fil d'Ariane -------------------------------------------------------- Le séparateur est dessiné ici et non écrit dans le texte : un lecteur d'écran n'a pas à énoncer un chevron entre chaque nom. */ .site-breadcrumb { padding-top: 1.25rem; font-size: .78rem; letter-spacing: .06em; } .site-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; opacity: .7; } .site-breadcrumb li + li::before { content: "›"; margin-right: .5rem; opacity: .6; } .site-breadcrumb a { color: inherit; text-decoration: none; } .site-breadcrumb a:hover { text-decoration: underline; } .site-breadcrumb [aria-current] { opacity: .75; } /* --- réseaux sociaux ------------------------------------------------------ `--social-brand` est posée sur chaque lien par le gabarit : une seule règle par variante, quelle que soit la marque, et une marque de plus au registre n'ajoute pas une ligne ici. */ .site-socials-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; opacity: .65; margin: 0 0 1.25rem; text-align: center; } .site-socials-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; } .site-social { display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; opacity: .75; transition: opacity .15s, transform .15s; } .site-social:hover { opacity: 1; } .site-social-icon { width: 18px; height: 18px; display: block; } .site-social-text { font-size: .8rem; } /* Dans un carré bordé. */ .site-socials--outlined .site-social { width: 40px; height: 40px; border: 1px solid rgba(128, 128, 128, .4); border-radius: var(--site-radius); } /* Un bandeau : l'intitulé à gauche, les icônes à droite. */ .site-socials--band { background: var(--site-muted); color: var(--site-ink); border-radius: var(--site-radius); padding: 1.1rem 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .site-socials--band .site-socials-label { margin: 0; text-align: left; } .site-socials--band .site-socials-list { gap: 1.1rem; } /* Aux couleurs des marques : le trait, puis le fond. */ .site-socials--colored .site-social { color: var(--social-brand); opacity: 1; } .site-socials--filled .site-social, .site-socials--round .site-social { width: 38px; height: 38px; background: var(--social-brand); color: #fff; opacity: 1; } .site-socials--filled .site-social { border-radius: var(--site-radius); } .site-socials--round .site-social { border-radius: 50%; } a.site-social:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { a.site-social:hover { transform: none; } } /* --- mur Instagram -------------------------------------------------------- Des carrés, comme sur le réseau : une photo portrait au milieu d'une rangée de carrés casserait la ressemblance qui fait tout l'intérêt. */ .site-insta-intro { text-align: center; } .site-insta-intro:empty { display: none; } .site-insta-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; opacity: .65; margin: 0 0 .4rem; } .site-insta-handle { font-family: var(--site-font-heading); font-size: 1.05rem; letter-spacing: .08em; color: inherit; text-decoration: none; display: inline-block; } a.site-insta-handle:hover { text-decoration: underline; } .site-insta-grid { display: grid; gap: .6rem; grid-template-columns: repeat(4, 1fr); margin-top: 1.5rem; } .site-insta-cell { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--site-radius); } .site-insta-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-insta--band .site-insta-grid { grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0; } .site-insta--band .site-insta-cell { border-radius: 0; } /* Le pseudo posé au centre de la bande, sur une pastille claire. */ .site-insta--band { position: relative; } .site-insta--band .site-insta-intro { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; } .site-insta--band .site-insta-handle { background: var(--site-paper); color: var(--site-ink); padding: .8rem 2rem; } /* L'intitulé d'un bord, le pseudo de l'autre. */ .site-insta--edges .site-insta-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; } .site-insta--edges .site-insta-label { margin: 0; } .site-insta--edges .site-insta-grid { grid-template-columns: repeat(6, 1fr); } .site-insta--mosaic .site-insta-grid { grid-template-columns: repeat(6, 1fr); } /* Le texte d'un côté, les photos de l'autre. */ .site-insta--side, .site-insta--text_grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .site-insta--side .site-insta-intro, .site-insta--text_grid .site-insta-intro { text-align: left; } .site-insta--side .site-insta-grid { grid-template-columns: repeat(3, 1fr); margin: 0; } .site-insta--text_grid .site-insta-grid { grid-template-columns: repeat(3, 1fr); margin: 0; } .site-insta--text_grid .site-body { margin-bottom: 1.25rem; } @media (max-width: 768px) { .site-socials--band { justify-content: center; } .site-socials--band .site-socials-label { text-align: center; width: 100%; } .site-insta--edges .site-insta-intro { flex-direction: column; align-items: center; gap: .4rem; } .site-insta-grid { grid-template-columns: repeat(3, 1fr) !important; } .site-insta--band .site-insta-grid { grid-template-columns: repeat(3, 1fr) !important; } .site-insta--side, .site-insta--text_grid { grid-template-columns: 1fr; gap: 1.5rem; } .site-insta--side .site-insta-intro, .site-insta--text_grid .site-insta-intro { text-align: center; } } /* --- partenaires --------------------------------------------------------- Les logos arrivent de partout, en couleur, en noir, en tailles diverses. Une hauteur commune et un niveau de gris les rangent : c'est ce qui fait qu'une bande de logos a l'air voulue plutôt que ramassée. */ .site-partners-intro { text-align: center; } .site-partners-intro .site-heading { margin-bottom: .75rem; } .site-partners-intro .site-body { max-width: 660px; margin: 0 auto 2rem; opacity: .85; } .site-partners-intro:empty { display: none; } .site-partners-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem 3.5rem; } .site-partner { display: flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; } .site-partner img { max-height: 46px; width: auto; max-width: 160px; object-fit: contain; display: block; filter: grayscale(1); opacity: .7; transition: opacity .15s, filter .15s; } a.site-partner:hover img { filter: grayscale(0); opacity: 1; } .site-partner-name { font-family: var(--site-font-heading); font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; opacity: .75; } a.site-partner:hover .site-partner-name { opacity: 1; } /* Titre à gauche, logos à droite. */ .site-partners--grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; align-items: center; } .site-partners--grid .site-partners-intro { text-align: left; } .site-partners--grid .site-partners-intro .site-body { margin-left: 0; } /* Les noms sans logo : des colonnes, parce qu'une liste de dix magazines sur une ligne devient illisible. */ .site-partners--names .site-partners-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem 2rem; } /* Un bandeau teinté : la bande se détache de la page sans bord dur. */ .site-partners--band .site-partners-viewport { background: var(--site-muted); color: var(--site-ink); border-radius: var(--site-radius); padding: 2.25rem 2rem; } .site-partners--carousel .site-partners-viewport { position: relative; } .site-partners--carousel .site-partners-list { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 0 2.5rem; } .site-partners--carousel .site-partners-list::-webkit-scrollbar { display: none; } .site-partners--carousel .site-partner { flex: 0 0 auto; scroll-snap-align: center; } @media (prefers-reduced-motion: reduce) { .site-partners--carousel .site-partners-list { scroll-behavior: auto; } } /* --- coordonnées --------------------------------------------------------- `dl` : chaque intitulé décrit vraiment sa valeur. Un lecteur d'écran annonce « Téléphone, puis le numéro », au lieu de six textes de suite. */ .site-contact .site-heading { text-align: center; } .site-contact-list { margin: 0; display: grid; gap: 2rem; } .site-contact-item { margin: 0; } .site-contact-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; opacity: .6; font-weight: 400; margin: 0 0 .5rem; font-style: italic; } .site-contact-value { margin: 0; font-size: .98rem; line-height: 1.6; } .site-contact-value :last-child { margin-bottom: 0; } .site-contact--columns .site-contact-list { grid-template-columns: repeat(3, 1fr); text-align: center; } /* Un panneau teinté, les colonnes séparées par un filet. */ .site-contact--panel { background: var(--site-muted); color: var(--site-ink); border-radius: var(--site-radius); padding: 3rem 2.5rem; } .site-contact--panel .site-contact-list { grid-template-columns: repeat(3, 1fr); gap: 0; text-align: center; } .site-contact--panel .site-contact-item { padding: 0 1.75rem; border-left: 1px solid rgba(128, 128, 128, .3); } .site-contact--panel .site-contact-item:first-child { border-left: 0; } /* Intitulé à gauche, valeur à droite, un filet entre chaque ligne. */ .site-contact--rows .site-contact-list { gap: 0; max-width: 820px; margin: 0 auto; } .site-contact--rows .site-contact-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 2rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid rgba(128, 128, 128, .25); } .site-contact--rows .site-contact-item:last-child { border-bottom: 0; } .site-contact--rows .site-contact-label { margin: 0; } /* --- lieu ---------------------------------------------------------------- Le cadre porte le format : la carte se charge en arrivant à l'écran, et la page ne saute pas au moment où elle apparaît. */ .site-map { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--site-radius); background: var(--site-muted); } .site-map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Dans l'éditeur, la carte ne prend pas le clic : il va au bloc, qui se sélectionne. */ .site-map--locked { pointer-events: none; } .site-location-address { margin: 1rem 0 .5rem; font-size: .95rem; line-height: 1.6; } .site-location-link { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .15rem; } .site-location-body:empty { display: none; } .site-location--full { display: grid; gap: 1.25rem; } .site-location--full .site-map { aspect-ratio: 16 / 9; } .site-location--full .site-location-body { order: 2; text-align: center; } .site-location--text_left, .site-location--panel { display: grid; gap: 3rem; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; } .site-location--panel .site-location-body { background: var(--site-muted); color: var(--site-ink); border-radius: var(--site-radius); padding: 2.5rem; } .site-location--panel { gap: 0; grid-template-columns: repeat(2, 1fr); align-items: stretch; } .site-location--panel .site-map { aspect-ratio: auto; } @media (max-width: 768px) { .site-partners--grid { grid-template-columns: 1fr; gap: 1.75rem; } .site-partners--grid .site-partners-intro { text-align: center; } .site-partners--names .site-partners-list { grid-template-columns: repeat(2, 1fr); } .site-partners-list { gap: 1.75rem 2.25rem; } .site-contact--columns .site-contact-list, .site-contact--panel .site-contact-list { grid-template-columns: 1fr; } .site-contact--panel .site-contact-item { border-left: 0; padding: 1.25rem 0; border-top: 1px solid rgba(128, 128, 128, .3); } .site-contact--panel .site-contact-item:first-child { border-top: 0; padding-top: 0; } .site-contact--rows .site-contact-item { grid-template-columns: 1fr; gap: .35rem; } .site-location--text_left, .site-location--panel { grid-template-columns: 1fr; gap: 1.5rem; } .site-location--panel .site-map { aspect-ratio: 16 / 10; } } @media (max-width: 480px) { .site-partners--names .site-partners-list { grid-template-columns: 1fr; } } /* --- mise en page pure -------------------------------------------------- */ .site-spacer--small { height: calc(2rem * var(--site-density)); } .site-spacer--medium { height: calc(4.5rem * var(--site-density)); } .site-spacer--large { height: calc(8rem * var(--site-density)); } .site-divider { display: flex; justify-content: center; } .site-divider span { display: block; height: 1px; background: currentColor; opacity: .25; } .site-divider--line span { width: 100%; } .site-divider--short span { width: 90px; } .site-divider--dots { gap: .5rem; } .site-divider--dots span { width: 4px; height: 4px; border-radius: 50%; opacity: .4; } .site-divider--dots::before, .site-divider--dots::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .4; } /* --- en-tête --------------------------------------------------------- La mise en page ne change pas l'ordre du HTML : elle place les trois éléments avec `order` et `justify-self`. Le menu reste au même endroit dans le document, donc lisible au clavier et par un lecteur d'écran quelle que soit la mise en page choisie. */ :root { --site-header-height: 80px; --site-nav-gap: 28px; } .site-header { border-bottom: 1px solid rgba(0,0,0,.08); position: relative; z-index: 30; } .site-header--sticky { position: sticky; top: 0; } .site-header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--site-header-height); } .site-header-brand { font-family: var(--site-font-heading); font-size: 1.25rem; text-decoration: none; color: inherit; letter-spacing: .08em; flex: none; } .site-header-brand img { max-height: calc(var(--site-header-height) - 28px); width: auto; display: block; } /* Le survol du logo. Joué sur la marque et non sur le lien : celui-ci porte déjà un `transform` dans les mises en page qui le centrent, et l'animer l'effacerait. */ .site-brand-mark { display: inline-block; transition: opacity .25s ease, transform .25s ease; } .site-header--hover-fade .site-header-brand:hover .site-brand-mark { opacity: .6; } .site-header--hover-zoom .site-header-brand:hover .site-brand-mark { transform: scale(1.05); } .site-header--hover-lift .site-header-brand:hover .site-brand-mark { transform: translateY(-3px); } /* Sur un écran tactile il n'y a pas de survol : le logo s'y allume au doigt, le temps du contact, plutôt que de ne rien faire. */ .site-header-brand:active .site-brand-mark { opacity: .6; } @media (prefers-reduced-motion: reduce) { .site-brand-mark { transition: none; } .site-header--hover-zoom .site-header-brand:hover .site-brand-mark, .site-header--hover-lift .site-header-brand:hover .site-brand-mark { transform: none; } } .site-nav { display: flex; gap: var(--site-nav-gap); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .site-nav a, .site-nav-label { text-decoration: none; color: inherit; font-size: .8rem; letter-spacing: .1em; display: inline-flex; align-items: center; gap: .35rem; cursor: default; } .site-nav a { cursor: pointer; } .site-header--upper .site-nav a, .site-header--upper .site-nav-label { text-transform: uppercase; } .site-nav a:hover { opacity: .6; } .site-nav li { position: relative; } .site-nav-main { flex: 1; display: flex; align-items: center; gap: var(--site-nav-gap); } .site-nav-side { flex: 1; display: flex; } /* Le signe d'un sous-menu, dessiné en CSS : pas de police d'icônes sur le site d'un photographe pour deux traits. */ .site-nav-sign { width: 8px; height: 8px; position: relative; display: inline-block; opacity: .7; } .site-nav-sign--plus::before, .site-nav-sign--plus::after { content: ""; position: absolute; background: currentColor; } .site-nav-sign--plus::before { left: 0; right: 0; top: 3.5px; height: 1px; } .site-nav-sign--plus::after { top: 0; bottom: 0; left: 3.5px; width: 1px; } .site-nav-sign--chevron { width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); } .site-subnav { list-style: none; margin: 0; padding: .75rem 1rem; display: none; position: absolute; left: 0; top: 100%; background: var(--site-paper); color: var(--site-ink); box-shadow: 0 6px 24px rgba(0,0,0,.12); min-width: 180px; z-index: 20; } .site-nav li:hover > .site-subnav, .site-nav li:focus-within > .site-subnav { display: block; } .site-subnav li + li { margin-top: .5rem; } /* Les huit mises en page. */ .site-header--logo_left .site-nav-main { justify-content: flex-end; } .site-header--logo_left_nav_center .site-nav-main { justify-content: center; } .site-header--logo_right .site-header-brand { order: 2; } .site-header--logo_right .site-nav-main { order: 1; justify-content: flex-start; } .site-header--nav_split .site-nav-side--left { justify-content: flex-end; } .site-header--nav_split .site-nav-main { justify-content: flex-start; } .site-header--logo_center_nav_below .site-header-inner { flex-wrap: wrap; justify-content: center; padding: 1.25rem 0; } .site-header--logo_center_nav_below .site-header-brand { width: 100%; text-align: center; } .site-header--logo_center_nav_below .site-header-brand img { margin: 0 auto; } .site-header--logo_center_nav_below .site-nav-main { justify-content: center; } .site-header--burger_left .site-header-brand { order: 2; } .site-header--burger_left .site-burger { order: 1; } .site-header--logo_center_burger .site-header-brand { position: absolute; left: 50%; transform: translateX(-50%); } /* Un en-tête transparent flotte sur le bloc suivant, au lieu de le pousser. */ .site-header--transparent { position: absolute; left: 0; right: 0; border-bottom: 0; background: none; } .site-header--transparent.site-header--sticky { position: fixed; } body:has(> .site-header--transparent) main > .site-block:first-of-type { padding-top: var(--site-header-height); } /* Un bouton d'action dans le menu. Il reprend l'allure des boutons du site — d'où `.site-btn` — mais en plus petit : un bouton de page n'a pas la taille d'un bouton de barre de navigation. La marge haute de `.site-btn` est annulée, elle n'a de sens qu'à la suite d'un texte. */ /* `flex: none` : le bouton garde sa taille, c'est au menu de s'ajuster. */ .site-nav-btn { margin-top: 0; padding: .5rem 1.1rem; font-size: .78rem; white-space: nowrap; flex: none; } /* Les majuscules du menu valent aussi pour lui : il en fait partie. */ .site-header--upper .site-nav-btn { text-transform: inherit; } /* Replié, le panneau redevient une colonne : le bouton se pose sous les liens, séparé d'eux. */ .site-header--burger .site-nav-main { flex-direction: column; align-items: flex-start; gap: 1rem; } .site-header--burger .site-nav-btn { margin-top: .25rem; } /* L'espace client : un lien, pas un bouton. Il ramène quelqu'un qui est déjà client, là où le bouton d'action appelle un visiteur — les deux côte à côte en gras se disputeraient l'attention. L'icône dit « c'est chez moi » sans allonger la barre. */ .site-nav-client { display: inline-flex; align-items: center; gap: .4rem; flex: none; font-size: .78rem; white-space: nowrap; text-decoration: none; color: inherit; opacity: .75; } .site-nav-client:hover { opacity: 1; } .site-header--upper .site-nav-client span { text-transform: uppercase; letter-spacing: .08em; } .site-header--burger .site-nav-client { margin-top: .25rem; } /* --- blog ---------------------------------------------------------------- La liste des articles et leurs cartes : une grille de deux ou trois, ou une liste avec l'image à gauche. Même carte partout. */ .site-posts-list { display: grid; gap: 1.75rem; } .site-posts--grid_three .site-posts-list, .site-posts--three .site-posts-list { grid-template-columns: repeat(3, 1fr); } .site-posts--grid_two .site-posts-list { grid-template-columns: repeat(2, 1fr); } .site-posts--four .site-posts-list { grid-template-columns: repeat(4, 1fr); } .site-post-card-link { display: block; text-decoration: none; color: inherit; } .site-post-card-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--site-radius); margin-bottom: .9rem; } .site-post-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .site-post-card-link:hover .site-post-card-image img { transform: scale(1.03); } .site-post-card-date { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; margin-bottom: .35rem; } .site-post-card-title { display: block; font-family: var(--site-font-heading); font-size: 1.15rem; font-weight: 500; line-height: 1.3; } .site-post-card-link:hover .site-post-card-title { opacity: .7; } .site-post-card-excerpt { display: block; font-size: .92rem; opacity: .8; margin-top: .4rem; } .site-posts--list .site-posts-list { grid-template-columns: 1fr; gap: 2rem; } .site-posts--list .site-post-card-link { display: grid; grid-template-columns: 2fr 3fr; gap: 1.5rem; align-items: center; } .site-posts--list .site-post-card-image { margin-bottom: 0; } .site-posts-empty { text-align: center; opacity: .6; margin-top: 1.5rem; font-size: .9rem; } .site-posts-more { text-align: center; margin: 2rem 0 0; } .site-post-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.75rem; } .site-post-tag { display: inline-block; font-size: .78rem; letter-spacing: .04em; padding: .3rem .75rem; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; color: inherit; opacity: .7; } .site-post-tag:hover, .site-post-tag.is-active { opacity: 1; background-color: var(--site-primary); color: var(--site-on-primary); border-color: var(--site-primary); } .site-pagination { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.5rem; } .site-pagination-state { font-size: .85rem; opacity: .7; } .site-btn--ghost { background: transparent; color: inherit; border: 1px solid currentColor; } /* La tête d'un article : la couverture en grand, puis la date et le titre. */ .site-post-cover { max-height: 70vh; overflow: hidden; } .site-post-cover img { width: 100%; height: 100%; max-height: 70vh; object-fit: cover; display: block; } .site-post-head-inner { padding-top: calc(2.5rem * var(--site-density)); text-align: center; } .site-post-meta { display: flex; justify-content: center; gap: .75rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65; margin-bottom: .75rem; } .site-post-meta a { color: inherit; text-decoration: none; } .site-post-meta a:hover { text-decoration: underline; } .site-post-title { margin-bottom: .75rem; } .site-post-excerpt { font-size: 1.1rem; opacity: .8; max-width: 44rem; margin: 0 auto 1rem; } .site-post-tags--inline { justify-content: center; margin: 0; } /* Le pied : suivant, précédent, retour au blog. */ .site-post-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: calc(2.5rem * var(--site-density)) 1.25rem; border-top: 1px solid rgba(128, 128, 128, .25); } .site-post-nav-link { text-decoration: none; color: inherit; display: block; } .site-post-nav-link--older { grid-column: 1; text-align: left; } .site-post-nav-link--blog { grid-column: 2; text-align: center; } .site-post-nav-link--newer { grid-column: 3; text-align: right; } .site-post-nav-label { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; } .site-post-nav-title { display: block; font-family: var(--site-font-heading); margin-top: .25rem; } .site-post-nav-link:hover .site-post-nav-title { opacity: .7; } @media (max-width: 768px) { .site-posts--grid_three .site-posts-list, .site-posts--three .site-posts-list, .site-posts--four .site-posts-list { grid-template-columns: repeat(2, 1fr); } .site-posts--list .site-post-card-link { grid-template-columns: 1fr; } .site-post-nav { grid-template-columns: 1fr; } .site-post-nav-link--older, .site-post-nav-link--blog, .site-post-nav-link--newer { grid-column: 1; text-align: left; } } @media (max-width: 480px) { .site-posts-list { grid-template-columns: 1fr !important; } } /* Le sélecteur de langue : des codes courts, séparés d'un point, aussi discrets que le lien de l'espace client. La langue courante est en couleur, les autres s'éteignent au repos. */ .site-lang { display: inline-flex; align-items: center; flex: none; font-size: .78rem; letter-spacing: .06em; white-space: nowrap; } .site-lang-item { text-decoration: none; color: inherit; opacity: .55; padding: 0 .1rem; } .site-lang-item:hover { opacity: 1; } .site-lang-item.is-current { opacity: 1; color: var(--site-primary); } .site-lang-item + .site-lang-item::before { content: '·'; opacity: .5; margin-right: .3rem; } .site-header--burger .site-lang { margin-top: .25rem; } /* La suggestion de langue : une ligne sous l'en-tête, aux couleurs douces du site, avec sa croix. Rien de fixe, rien qui recouvre : elle pousse la page d'une ligne et disparaît d'un clic. */ .site-lang-hint { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .55rem 2.5rem .55rem 1rem; position: relative; font-size: .85rem; background: var(--site-muted); color: var(--site-ink); } .site-lang-hint-text { margin: 0; } .site-lang-hint-link { color: inherit; font-weight: 600; margin-left: .35rem; } .site-lang-hint-close { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: .6; } .site-lang-hint-close:hover { opacity: 1; } /* --- formulaires ------------------------------------------------------- Le formulaire vient du CRM avec ses classes (`lead-form__*`) et celles de Bootstrap, mais SANS son habillage : c'est ici qu'il prend celui du site. On vise donc ses classes à lui, pas des classes à nous. */ .site-form-intro { margin-bottom: 2rem; text-align: center; } .site-form--text_left .site-form-intro { text-align: left; } .site-form-fields { max-width: 640px; margin: 0 auto; text-align: left; } /* L'encadré se sert de la couleur douce, comme les autres panneaux du site (coordonnées, newsletter). Il prenait celle du PAPIER, c'est-à-dire celle de la page : « Dans un encadré » et « Formulaire seul » se rendaient donc rigoureusement pareil, sauf à poser le bloc sur un schéma sombre. `color` suit le fond : sur un schéma sombre, un encadré clair porte du texte sombre, sinon il est illisible. */ .site-form--panel .site-form-fields { padding: 2.5rem; background: var(--site-muted); color: var(--site-ink); border: 1px solid rgba(128, 128, 128, .18); border-radius: calc(var(--site-radius) * 2); } .site-form--text_left { display: grid; gap: 3rem; align-items: start; } .site-form--text_left .site-form-intro { margin-bottom: 0; } @media (min-width: 860px) { .site-form--text_left { grid-template-columns: 1fr 1fr; } .site-form--text_left .site-form-fields { margin: 0; } } /* Le champ piège : invisible pour un visiteur, atteignable pour un robot. Ni `display: none` ni `hidden`, qu'un robot un peu sérieux reconnaît. */ .site-form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .site-form-fields .form-group, .site-form-fields .lead-form__field { margin-bottom: 1.1rem; } .site-form-fields label, .site-form-fields .lead-form__label { display: block; margin-bottom: .35rem; font-family: var(--site-font-body); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; } .site-form-fields input[type="text"], .site-form-fields input[type="email"], .site-form-fields input[type="tel"], .site-form-fields input[type="date"], .site-form-fields input[type="number"], .site-form-fields select, .site-form-fields textarea, .site-form-fields .form-control, .site-form-fields .lead-form__input { width: 100%; box-sizing: border-box; padding: .75rem .9rem; font-family: var(--site-font-body); font-size: .95rem; color: inherit; background: var(--site-paper); border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--site-radius); appearance: none; } .site-form-fields textarea { min-height: 150px; resize: vertical; } .site-form-fields input:focus, .site-form-fields select:focus, .site-form-fields textarea:focus { outline: 2px solid var(--site-primary); outline-offset: 1px; border-color: transparent; } /* Les cases à cocher gardent leur taille : ce sont des cases, pas des champs. La case native, teintée à la couleur du site. Bootstrap, chargé sur la page, efface l'apparence de `.form-check-input` pour dessiner la sienne en 1em : notre `width: auto` écrasait cette largeur et il ne restait que deux bordures, une barre de 2 px. D'où `appearance: auto` et le reste remis à plat, y compris le décalage de `.form-check`. */ .site-form-fields input[type="checkbox"], .site-form-fields input[type="radio"] { appearance: auto; width: 1rem; height: 1rem; float: none; margin: 0 .45rem 0 0; padding: 0; border: 0; background: none; vertical-align: -.15em; accent-color: var(--site-primary); } .site-form-fields .form-check { padding-left: 0; } .site-form-fields .form-check label, .site-form-fields .form-check-label, .site-form-fields input[type="radio"] + label, .site-form-fields input[type="checkbox"] + label { display: inline; margin: 0; text-transform: none; letter-spacing: 0; font-size: .9rem; opacity: 1; vertical-align: middle; } /* Oui / Non d'une case facultative : sous la question, côte à côte. */ .site-form-fields .lead-form__choices { display: block; margin-top: .55rem; } .site-form-fields .lead-form__choices input + label { margin-right: 1.5rem; } /* Le formulaire partagé masque ses messages d'aide avec `sr-only`, la classe de Bootstrap 4. La page charge Bootstrap 5, qui l'a renommée `visually-hidden` : « La date de la séance est invalide » s'affichait donc sous le champ, avant même toute saisie. */ .site-form-fields .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .site-form-submit { margin-top: 1.5rem; } .site-form-done, .site-form-failed { margin: 1.25rem 0 0; padding: .9rem 1.1rem; border-radius: var(--site-radius); font-size: .9rem; } .site-form-done { background: rgba(60, 150, 90, .12); } .site-form-failed { background: rgba(200, 60, 60, .1); } .site-form-empty { margin: 1.25rem auto 0; max-width: 640px; padding: .9rem 1.1rem; text-align: center; opacity: .6; font-size: .85rem; border: 1px dashed currentColor; border-radius: var(--site-radius); } /* L'aperçu du bloc tant qu'aucun formulaire n'est choisi : il montre la mise en page, il ne se remplit pas. Rendu nulle part sur le site public. */ .site-form-sample { pointer-events: none; user-select: none; } /* Le badge flottant de reCAPTCHA est masqué — un rectangle bleu accroché en bas à droite d'un site dessiné, non. Google l'autorise à condition d'afficher la mention, c'est ce que fait `site/_captcha_notice`. */ .grecaptcha-badge { visibility: hidden; } .site-captcha-notice { margin: 1rem 0 0; font-size: .7rem; line-height: 1.5; opacity: .5; } .site-captcha-notice a { color: inherit; } .site-form-sample .site-form-submit { display: inline-block; } /* Un envoi en cours : on empêche le double clic sans faire disparaître le bouton. */ .site-form-fields.is-sending .site-form-submit { opacity: .5; pointer-events: none; } /* --- inscription à la newsletter --------------------------------------- Une ligne : adresse et bouton côte à côte sur grand écran, l'un sous l'autre dès que c'est serré. */ .site-news-intro { margin-bottom: 1.5rem; text-align: center; } .site-news-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; max-width: 520px; margin: 0 auto; } .site-news-label { position: absolute; left: -9999px; } .site-news-form input[type="email"] { flex: 1 1 240px; min-width: 0; padding: .8rem .9rem; font-family: var(--site-font-body); font-size: .95rem; color: inherit; background: var(--site-paper); border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--site-radius); } .site-news-form input[type="email"]:focus { outline: 2px solid var(--site-primary); outline-offset: 1px; border-color: transparent; } /* Le bouton reprend l'allure des boutons du site, sans sa marge haute : ici il est à côté d'un champ, pas à la suite d'un texte. */ .site-news-form .site-btn { flex: none; margin-top: 0; } /* Mêmes couleurs que le formulaire de contact : vert quand c'est fait ou qu'il reste un email à ouvrir, rouge quand ça n'est pas passé. Un message de succès doit se reconnaître sans être lu. */ .site-news-message { flex-basis: 100%; margin: .75rem 0 0; padding: .8rem 1rem; border-radius: var(--site-radius); font-size: .9rem; } .site-news-done, .site-news-pending { background: rgba(60, 150, 90, .12); } .site-news-failed { background: rgba(200, 60, 60, .1); } .site-news-form.is-sending .site-btn { opacity: .5; pointer-events: none; } /* Dans un encadré : le bloc se détache du reste de la page. */ .site-news--panel .site-news-form, .site-news--panel .site-news-intro { max-width: 620px; } .site-news--panel { max-width: 720px; margin: 0 auto; padding: 3rem 2rem; background: var(--site-muted); border-radius: calc(var(--site-radius) * 2); } /* Sur toute la largeur, texte à gauche et champ à droite. */ @media (min-width: 860px) { .site-news--split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .site-news--split .site-news-intro { margin-bottom: 0; text-align: left; } .site-news--split .site-news-form { margin: 0; } } .site-news--band .site-news-intro { margin-bottom: 1rem; } /* --- le bouton repliable --------------------------------------------- Rendu partout : sur petit écran, toute mise en page se replie. */ .site-burger { display: none; flex: none; margin-left: auto; width: 34px; height: 26px; padding: 4px 0; border: 0; background: none; color: inherit; flex-direction: column; justify-content: space-between; cursor: pointer; } .site-burger span { display: block; height: 1px; background: currentColor; transition: transform .2s, opacity .2s; } .site-header--burger .site-burger { display: flex; } .site-header--burger .site-nav-main { position: absolute; top: 100%; left: 0; right: 0; display: none; background: var(--site-paper); color: var(--site-ink); padding: 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.12); } .site-header.is-open .site-nav-main { display: block; } .site-header.is-open .site-burger span:nth-child(1) { transform: translateY(11px) rotate(45deg); } .site-header.is-open .site-burger span:nth-child(2) { opacity: 0; } .site-header.is-open .site-burger span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } .site-header--burger .site-nav { flex-direction: column; gap: 1rem; } .site-header--burger .site-subnav { position: static; display: block; box-shadow: none; padding: .5rem 0 0 1rem; } /* --- pied de page ----------------------------------------------------- Comme l'en-tête : la mise en page place les deux blocs, elle ne change pas l'ordre du HTML. */ .site-footer { padding: 3rem 0; border-top: 1px solid rgba(0,0,0,.08); font-size: .9rem; } .site-footer-inner { display: flex; align-items: center; gap: 1.5rem 2.5rem; flex-wrap: wrap; } .site-footer-text { flex: 1; min-width: 180px; } /* Le texte du pied accepte quelques paragraphes : sans ça leurs marges par défaut décalent la ligne des liens. */ .site-footer-text p { margin: 0 0 .35rem; } .site-footer-text p:last-child { margin-bottom: 0; } .site-footer-text a { color: inherit; } .site-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; } .site-footer-links a, .site-footer-links li > span { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; } .site-link-icon { flex: none; display: block; } /* Réduits à leur icône, les liens se resserrent et s'agrandissent un peu : une rangée d'icônes minuscules très espacées ne se clique pas. */ .site-footer-links { gap: 1.1rem; } .site-link-icon { width: 19px; height: 19px; } .site-footer-links a:hover { opacity: .6; text-decoration: underline; } .site-footer--upper .site-footer-links { text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; } .site-footer--centered .site-footer-inner { flex-direction: column; text-align: center; } .site-footer--centered .site-footer-text { flex: none; } .site-footer--centered .site-footer-links { justify-content: center; } .site-footer--split .site-footer-links { justify-content: flex-end; } .site-footer--stacked .site-footer-inner { flex-direction: column-reverse; text-align: center; } .site-footer--stacked .site-footer-text { flex: none; opacity: .7; font-size: .82rem; } .site-footer--stacked .site-footer-links { justify-content: center; } .site-footer--columns .site-footer-links { flex-direction: column; gap: .5rem; min-width: 160px; } @media (max-width: 700px) { .site-footer-inner { flex-direction: column; text-align: center; } .site-footer-links { justify-content: center; } } /* Centrée quelle que soit la mise en page du pied : sans alignement propre, la mention héritait de celle du pied et se retrouvait collée à gauche ou à droite selon la variante. Elle ne nous appartient pas assez pour tirer la mise en page d'un côté. */ .site-badge { margin-top: 2rem; font-size: .78rem; opacity: .55; text-align: center; } /* Sur une page servie nue, la mention n'a pas de pied de page où se poser : elle se range sous la colonne, au même endroit qu'elle. */ body:has(> .site-bio) > .site-badge { padding-bottom: 2rem; } .site-badge a { color: inherit; text-decoration: none; } .site-badge a:hover { opacity: 1; text-decoration: underline; } .site-footer-columns { display: flex; gap: 3rem; flex-wrap: wrap; justify-content: space-between; } .site-footer a { color: inherit; } /* Sur petit écran, tout se replie, quelle que soit la mise en page. */ @media (max-width: 900px) { .site-burger { display: flex; } .site-nav-side { display: none; } .site-header .site-nav-main { position: absolute; top: 100%; left: 0; right: 0; display: none; background: var(--site-paper); color: var(--site-ink); padding: 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.12); flex: none; } .site-header.is-open .site-nav-main { display: block; } .site-header .site-nav { flex-direction: column; gap: 1rem; } .site-header .site-subnav { position: static; display: block; box-shadow: none; padding: .5rem 0 0 1rem; } .site-header--logo_center_burger .site-header-brand { position: static; transform: none; } .site-header-inner { flex-wrap: nowrap; } .site-header--logo_center_nav_below .site-header-brand { width: auto; text-align: left; } }