/* Pages portées depuis les maquettes Claude Design — adaptation responsive. Les maquettes sont dessinées à 1440 : leurs grilles sont écrites en style inline et ne se replient donc pas sous le breakpoint tablette. Ce fichier ne touche ni aux couleurs, ni aux tailles desktop, ni aux espacements du design : il replie les grilles sous 992px et ramène le H1 aux paliers responsive du site (66px puis 60px — design-system/TYPE-SCALE.md). S'applique uniquement à . */ @media (max-width: 991px) { .page-maquette [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } .page-maquette [style*="position: sticky"] { position: static !important; } .page-maquette [style*="gap: 70px"] { gap: 34px !important; } .page-maquette [style*="gap: 60px"] { gap: 30px !important; } .page-maquette [style*="left: -"] { left: 0 !important; } .page-maquette [style*="right: -"] { right: 0 !important; } } @media (max-width: 767px) { .page-maquette h1 { font-size: 66px !important; line-height: 72px !important; } } @media (max-width: 479px) { .page-maquette h1 { font-size: 60px !important; line-height: 64px !important; } } /* CtaBand : `.heading-4` (25px) hérite du line-height 52px des h2 du site, ce qui creuse un trou entre les deux lignes du titre. Interligne ramené à 1,25 ici. */ .page-maquette h2.heading-4 { line-height: 1.25; } /* Rythme des pages secondaires : deux sections qui s'enchaînent sur le même fond n'ont pas de frontière visible. Leur écart passe donc de 200px (100 + 100) à 124px. L'écart plein est gardé quand le fond change (pastel ↔ bande noire), là où la respiration se voit. */ .page-maquette section[data-tone="light"] + section[data-tone="light"], .page-maquette section[data-tone="dark"] + section[data-tone="dark"] { padding-top: 24px; } @media (max-width: 767px) { .page-maquette section[data-tone="light"] + section[data-tone="light"], .page-maquette section[data-tone="dark"] + section[data-tone="dark"] { padding-top: 16px; } } /* Footer : la liste complète du site tient sur plusieurs lignes sans couper un libellé en deux (« Cas / clients »). */ .page-maquette .footer_bottom-row > div:not(.text-mono):not(.text-align-right) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 6px; } .page-maquette .footer_links { white-space: nowrap; } /* Mur d'avis (« wall of love », page /temoignages) : les cartes du design system en grille de trois, toutes à la même hauteur sur une ligne, la signature calée en bas de carte. La grille est aussi posée en style inline sur le mur (avec la forme courte `grid: auto-flow / repeat(3, 1fr)`, qui échappe volontairement au repli 1 colonne générique ci-dessus) : la page tient donc même servie avec une version en cache de ce fichier. Ici on gère l'écartement et le repli, 2 colonnes en tablette, 1 en mobile. */ .page-maquette .wall-hero { padding-bottom: 40px; } .page-maquette .wall-section { padding-top: 0; } .page-maquette .wall-of-love { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: stretch; } .page-maquette .wall-of-love .proof_marquee-card { height: 100%; display: flex; flex-direction: column; margin: 0; cursor: auto; } .page-maquette .wall-of-love .proof_marquee-row { margin-top: auto; padding-top: 20px; } .page-maquette .wall-of-love .proof_marquee-card[hidden] { display: none; } /* Filtres par métier : mêmes puces que le blog (assets/css/blog.css). La barre est remplie par script-filtres-temoignages.html — vide, elle ne prend pas de place. */ .page-maquette .wall-filtres { margin: 0 0 34px; } .page-maquette .wall-filtres:empty { display: none; } .page-maquette .wall-vide { display: none; margin-top: 40px; } .page-maquette .wall-vide.est-visible { display: block; } /* Le métier, sous le nom : même gris que le corps de l'avis, un cran plus petit. */ .page-maquette .proof_marquee-role { margin-top: 1px; font-size: 15px; line-height: 20px; opacity: .5; } @media (max-width: 991px) { .page-maquette .wall-of-love { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 767px) { .page-maquette .wall-of-love { grid-template-columns: 1fr !important; } } /* Faux agenda Calendly (page contact) : le repli 1 colonne ci-dessus vise toutes les grilles inline. La grille des jours, elle, doit rester sur sept colonnes, sinon le mois se déroule en une seule bande. Les trois panneaux du widget (infos, calendrier, créneaux) s'empilent normalement. */ @media (max-width: 991px) { .page-maquette .cal-grille { grid-template-columns: repeat(7, 1fr) !important; } }