/* ========================================================================== Marchy Studio — reproduction fidèle de la maquette Canva Repère : le design Canva fait 696 unités de large. Toutes les valeurs ci-dessous sont exprimées dans ces unités et mises à l'échelle par --s. ========================================================================== */ :root { --blue: #0028e2; --cream: #f0eee6; /* crème plus clair, pour détacher un bloc du fond */ --panel: #f8f7f2; /* crème plus soutenu, pour un bandeau posé sur le fond */ --panel-dark: #e8e5d8; /* 1 unité de design Canva -> px écran. Plus de plafond : la maquette occupe toute la largeur de l'écran, sans bandes crème sur les côtés. Le rendu reste proportionnel, la typo grandit avec l'écran (c'est le principe de la maquette Canva). */ --s: calc(100vw / 696); } * { box-sizing: border-box; } /* L'attribut [hidden] doit toujours l'emporter, y compris sur un display flex/grid */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--blue); font-family: 'Poppins', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* 100cqw = largeur réelle de , scrollbar exclue — contrairement à 100vw qui la compte et provoque un débordement horizontal de quelques pixels. Si les container queries ne sont pas supportées, la déclaration est ignorée et le --s en 100vw du :root prend le relais. */ body { container-type: inline-size; } .page { --s: calc(100cqw / 696); width: 100%; overflow-x: hidden; } /* ========================================================================== NAV — superposée au hero (pastilles bleues) ========================================================================== */ .topnav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: calc(78 * var(--s)); display: flex; align-items: center; padding: 0 calc(30 * var(--s)); } .logo-mono { width: calc(66 * var(--s)); flex: none; } .logo-mono img { width: 100%; height: auto; } .nav { /* alignée à gauche, à la suite du logo */ margin-left: calc(26 * var(--s)); margin-right: auto; display: flex; gap: calc(22 * var(--s)); } .nav__link, .pill { background: var(--blue); color: #fff; font-size: calc(8.7 * var(--s)); font-weight: 700; line-height: calc(24 * var(--s)); height: calc(24 * var(--s)); min-width: calc(74 * var(--s)); padding: 0 calc(9 * var(--s)); border-radius: 999px; text-align: center; white-space: nowrap; transition: opacity .15s; } .nav__link:hover, .pill:hover { opacity: .85; } /* Bouton burger — masqué partout par défaut, révélé en <=700px (avec JS). */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 10px; border: 0; background: transparent; cursor: pointer; flex: none; } .nav-burger span { display: block; height: 2px; width: 100%; background: var(--blue); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .topnav.is-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .topnav.is-open .nav-burger span:nth-child(2) { opacity: 0; } .topnav.is-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== HERO ========================================================================== */ .hero { position: relative; height: calc(391 * var(--s)); overflow: hidden; } .hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .hero__logo { position: absolute; left: 50%; /* assets/logo-blanc.webp : 1050x600, dessin centré (marges 251px / 254px), donc un simple -50%. La largeur 280u et le top 95u compensent les marges transparentes du fichier pour que le dessin garde la taille et la position de la maquette. Le fichier est déjà blanc : pas de filtre. */ top: calc(95 * var(--s)); transform: translateX(-50%); width: calc(280 * var(--s)); } .hero__sub { position: absolute; left: 0; right: 0; margin: 0; text-align: center; color: #fff; font-size: calc(13.33 * var(--s)); font-weight: 400; line-height: calc(21 * var(--s)); letter-spacing: calc(0.27 * var(--s)); } .hero__sub--1 { top: calc(224 * var(--s)); } .hero__sub--2 { top: calc(245 * var(--s)); } /* ========================================================================== CITATION — sur la photo de nuancier ========================================================================== */ .quote { position: relative; height: calc(157 * var(--s)); overflow: hidden; display: flex; align-items: center; justify-content: center; } .quote__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* 66% : la main reste bien visible en haut à droite, l'ongle passe juste au-dessus de la première ligne de texte. Miroir comme dans la maquette Canva : la main passe à droite. */ object-position: center 66%; transform: scaleX(-1); } .quote__text { position: relative; z-index: 2; text-align: center; font-size: calc(10 * var(--s)); line-height: calc(16 * var(--s)); letter-spacing: calc(0.2 * var(--s)); padding: 0 calc(50 * var(--s)); } .quote__text p { margin: 0; } /* ========================================================================== DUO d'images pleine largeur ========================================================================== */ .duo { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; height: calc(235 * var(--s)); overflow: hidden; } .duo img { width: 100%; height: 100%; min-height: 0; object-fit: cover; } /* Bandeau image pleine largeur */ .band { height: calc(391 * var(--s)); overflow: hidden; } .band img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== BLOC "texte à gauche / image pleine hauteur à droite" Colonne texte : x 39 -> 301 (262 de large) Colonne image : x 348 -> 696 (348 de large), bord à bord ========================================================================== */ .split { position: relative; display: grid; grid-template-columns: calc(348 * var(--s)) calc(348 * var(--s)); min-height: calc(391 * var(--s)); } /* Le bloc épouse la hauteur de son texte au lieu du gabarit de 391u : l'image est rognée d'autant par object-fit: cover */ .split--fit { min-height: 0; } /* Colonne image resserrée : son rapport (252/354 ≈ 0,71) rejoint celui de la photo (0,67), le recadrage vertical devient négligeable et le sujet tient en entier dans le cadre. */ .split--narrow { grid-template-columns: calc(444 * var(--s)) calc(252 * var(--s)); } .split--narrow .split__body { padding-right: calc(60 * var(--s)); } /* Panneau clair derrière le texte : détache le bloc du fond crème et le sépare visuellement de la section suivante. Le panneau occupe toute la hauteur de la colonne, le texte reste centré dedans. */ .split--panel .split__body { align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: var(--panel); } .split__body { padding: calc(24 * var(--s)) calc(47 * var(--s)) calc(24 * var(--s)) calc(39 * var(--s)); align-self: center; } .split__media { position: relative; overflow: hidden; } /* Image en absolu : elle ne dicte plus la hauteur de la ligne (sinon une photo portrait fait grandir la colonne texte et crée du vide autour du texte). La colonne texte fixe la hauteur, l'image remplit et se recadre en cover. */ .split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Alternance : image à gauche, texte à droite (blocs pairs). Colonnes de même largeur, on inverse simplement l'ordre visuel. */ .split--rev .split__media { order: 1; } .split--rev .split__body { order: 2; } /* ========================================================================== Typographie (valeurs Canva ÷ 2, le canevas est rendu à l'échelle 0.5) ========================================================================== */ .h1 { font-size: calc(20 * var(--s)); font-weight: 700; line-height: calc(28 * var(--s)); margin: 0 0 calc(10 * var(--s)); letter-spacing: calc(-0.2 * var(--s)); } .h2 { font-size: calc(18.7 * var(--s)); font-weight: 700; line-height: calc(26 * var(--s)); margin: 0 0 calc(9 * var(--s)); letter-spacing: calc(-0.2 * var(--s)); } .h3 { font-size: calc(16.7 * var(--s)); font-weight: 700; line-height: calc(23 * var(--s)); margin: 0 0 calc(7 * var(--s)); } .body p { font-size: calc(8 * var(--s)); line-height: calc(11 * var(--s)); text-align: justify; margin: 0 0 calc(11 * var(--s)); } .body p:last-of-type { margin-bottom: 0; } .price { display: block; margin-top: calc(22 * var(--s)); font-size: calc(11.3 * var(--s)); font-weight: 700; line-height: calc(16 * var(--s)); } .btn { display: inline-block; margin-top: calc(17 * var(--s)); background: var(--blue); color: #fff; font-size: calc(9.3 * var(--s)); font-weight: 700; line-height: 1; padding: calc(6.5 * var(--s)) calc(11 * var(--s)); border-radius: calc(4 * var(--s)); } .btn:hover { opacity: .9; } /* ========================================================================== Bloc "Aménagement Intérieur" — texte pleine largeur sur 2 colonnes ========================================================================== */ .wide { padding: calc(37 * var(--s)) calc(39 * var(--s)); } .wide .lead { font-size: calc(8 * var(--s)); line-height: calc(11 * var(--s)); text-align: justify; margin: 0 0 calc(16 * var(--s)); } .steps { display: grid; grid-template-columns: calc(292 * var(--s)) calc(292 * var(--s)); column-gap: calc(34 * var(--s)); } .steps h4 { font-size: calc(8 * var(--s)); font-weight: 700; line-height: calc(11 * var(--s)); margin: 0; } .steps p { font-size: calc(8 * var(--s)); line-height: calc(11 * var(--s)); text-align: justify; margin: 0 0 calc(11 * var(--s)); } /* ========================================================================== BLOC "Aménagement Intérieur" — titre + chapô sur une ligne, puis 4 étapes numérotées reliées par un filet, tarif en pastille en bas à droite ========================================================================== */ .steps-block { padding: calc(28 * var(--s)) calc(39 * var(--s)) calc(42 * var(--s)); } .steps-block__head { display: grid; grid-template-columns: 1fr calc(276 * var(--s)); column-gap: calc(30 * var(--s)); align-items: end; margin-bottom: calc(46 * var(--s)); } .steps-block__title { margin: 0; font-size: calc(20 * var(--s)); font-weight: 700; line-height: calc(26 * var(--s)); letter-spacing: calc(-0.3 * var(--s)); } .steps-block__lead { margin: 0; font-size: calc(8 * var(--s)); line-height: calc(12 * var(--s)); text-align: justify; } .steps-row { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(26 * var(--s)); align-items: start; } /* Filet de liaison : il court derrière toute la rangée, les pastilles opaques le masquent là où elles se trouvent */ .steps-row::before { content: ''; position: absolute; left: 0; right: 0; top: calc(7.5 * var(--s)); height: 1px; background: rgba(0, 40, 226, .25); } .step { position: relative; } .step__num { position: relative; display: flex; align-items: center; justify-content: center; width: calc(15 * var(--s)); height: calc(15 * var(--s)); border-radius: 50%; background: var(--blue); color: #fff; font-size: calc(7 * var(--s)); font-weight: 700; line-height: 1; } .step__title { margin: calc(17 * var(--s)) 0 calc(9 * var(--s)); font-size: calc(9 * var(--s)); font-weight: 700; line-height: calc(12 * var(--s)); } .step p { margin: 0; font-size: calc(8 * var(--s)); line-height: calc(11.5 * var(--s)); /* Colonnes étroites (4 sur la largeur) : la césure évite les rivières */ text-align: justify; hyphens: auto; } /* Bandeau tarif : libellé + montant à gauche, bouton contour à droite */ /* Compact, sur une seule ligne, calé à gauche : tarif, filet vertical, bouton */ .tarif { margin-top: calc(40 * var(--s)); width: fit-content; margin-left: auto; display: flex; /* Alignement optique : les trois textes n'ont ni la même taille ni la même casse. Ni la ligne de base (le libellé en capitales paraît alors flotter), ni le centrage des boîtes (il flotte dans l'autre sens quand le montant est en bas de casse) ne fonctionnent seuls. On part donc de la ligne de base et on remonte le libellé et le bouton pour centrer leurs lettres sur la hauteur d'x du montant — voir les translateY ci-dessous. */ align-items: baseline; gap: calc(18 * var(--s)); } /* Dans une colonne de texte : calé à gauche, sur la marge du paragraphe */ .tarif--start { margin-left: 0; } .tarif__sep { align-self: center; width: 1px; height: calc(22 * var(--s)); background: rgba(0, 40, 226, .3); /* même axe que les textes : le centrage de la boîte tombe 1,65u trop bas, la ligne de base du rang étant tirée vers le bas par le bouton */ transform: translateY(calc(-1.65 * var(--s))); } .tarif__left { display: flex; align-items: baseline; gap: calc(9 * var(--s)); } .tarif__label { font-size: calc(7 * var(--s)); font-weight: 700; line-height: 1; letter-spacing: calc(1.1 * var(--s)); text-transform: uppercase; color: rgba(0, 40, 226, .55); /* capitales de 7u centrées sur la hauteur d'x du montant de 16u */ transform: translateY(calc(-1.9 * var(--s))); } .tarif__value { font-size: calc(16 * var(--s)); font-weight: 700; line-height: 1; } /* Texte bleu sans fond ni cadre. Le trait est un pseudo-élément qui se déroule de la gauche vers la droite au survol : aucun décalage de la mise en page, l'animation ne touche que transform. */ .tarif__btn { position: relative; flex: none; background: none; color: var(--blue); border: none; border-radius: 0; padding: calc(6 * var(--s)) 0; font-size: calc(9.5 * var(--s)); font-weight: 700; line-height: 1; /* même correction optique que le libellé */ transform: translateY(calc(-1.8 * var(--s))); } .tarif__btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(1.6 * var(--s)); background: var(--blue); transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.4, 0, .2, 1); } .tarif__btn:hover::after, .tarif__btn:focus-visible::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .tarif__btn::after { transition: none; } } /* ========================================================================== Cartes "Prestations / Réalisations" — 2 vignettes décalées ========================================================================== */ .cards { position: relative; height: calc(545 * var(--s)); } .card { position: absolute; overflow: hidden; } .card img { width: 100%; height: 100%; object-fit: cover; } .card__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: calc(18.7 * var(--s)); font-weight: 700; text-shadow: 0 calc(1.5 * var(--s)) calc(8 * var(--s)) rgba(0,0,0,.4); transition: background .2s; } .card:hover .card__label { background: rgba(255,255,255,.42); } .card--a { left: calc(39 * var(--s)); top: calc(90 * var(--s)); width: calc(304 * var(--s)); height: calc(455 * var(--s)); } .card--b { left: calc(355 * var(--s)); top: 0; width: calc(302 * var(--s)); height: calc(346 * var(--s)); } /* ========================================================================== Galeries "Réalisations" — 2 images pleine largeur, bord à bord ========================================================================== */ .gal-title { padding: calc(22 * var(--s)) calc(39 * var(--s)) calc(14 * var(--s)); } .gal { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; height: calc(330 * var(--s)); overflow: hidden; } .gal img { width: 100%; height: 100%; min-height: 0; object-fit: cover; } /* ========================================================================== FIL "À la une" — grille de cartes de publication (actualités, projets, événements). Injecté par actualites.js. Unités --s. ========================================================================== */ .feed { display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--s)); padding: calc(30 * var(--s)) calc(39 * var(--s)) calc(56 * var(--s)); } .post-card { display: flex; flex-direction: column; background: var(--panel); border-radius: calc(4 * var(--s)); overflow: hidden; } .post-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.4, 0, .2, 1); } .post-card:hover .post-card__media img { transform: scale(1.04); } /* voile blanc au survol (convention globale du site) */ .post-card__veil { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .2s; pointer-events: none; } .post-card:hover .post-card__veil { opacity: .42; } .post-card__body { padding: calc(18 * var(--s)) calc(20 * var(--s)) calc(22 * var(--s)); display: flex; flex-direction: column; flex: 1; } .post-card__meta { display: flex; align-items: center; gap: calc(10 * var(--s)); margin-bottom: calc(9 * var(--s)); } .post-card__cat { background: var(--blue); color: #fff; font-size: calc(7 * var(--s)); font-weight: 700; letter-spacing: calc(0.6 * var(--s)); text-transform: uppercase; padding: calc(3 * var(--s)) calc(8 * var(--s)); border-radius: 999px; } .post-card__date { font-size: calc(7.5 * var(--s)); color: rgba(0, 40, 226, .6); } .post-card__title { margin: 0 0 calc(8 * var(--s)); font-size: calc(14 * var(--s)); font-weight: 700; line-height: calc(18 * var(--s)); } .post-card__text { font-size: calc(8 * var(--s)); line-height: calc(12 * var(--s)); text-align: justify; } .post-card__text p { margin: 0 0 calc(8 * var(--s)); } .post-card__text p:last-child { margin-bottom: 0; } .post-card__btn { align-self: flex-start; margin-top: calc(14 * var(--s)); background: var(--blue); color: #fff; font-size: calc(8 * var(--s)); font-weight: 700; line-height: 1; padding: calc(6 * var(--s)) calc(11 * var(--s)); border-radius: calc(4 * var(--s)); transition: opacity .15s; } .post-card__btn:hover { opacity: .85; } /* ========================================================================== CARROUSEL "Réalisations" — rangée de cartes projet avec aperçu de la suivante, flèches + points. Injecté par realisations.js. ========================================================================== */ .carousel { padding: 0 calc(39 * var(--s)) calc(42 * var(--s)); } /* Scène coverflow : cartes en position absolue, centre net + côtés en retrait. Hauteur = média (320u * 3/4 = 240u) + bloc info. */ .carousel__stage { position: relative; height: calc(278 * var(--s)); overflow: hidden; } .carousel__card { position: absolute; top: 0; left: 50%; width: calc(320 * var(--s)); cursor: pointer; background: none; border: none; text-align: left; padding: 0; transform: translateX(-50%) scale(.7); transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .45s; will-change: transform; } /* centre : net, au premier plan */ .carousel__card.is-center { transform: translateX(-50%) scale(1); z-index: 3; opacity: 1; } /* côtés : reculés, plus petits, derrière le centre */ .carousel__card.is-prev { transform: translateX(calc(-50% - 205 * var(--s))) scale(.82); z-index: 2; } .carousel__card.is-next { transform: translateX(calc(-50% + 205 * var(--s))) scale(.82); z-index: 2; } /* le reste : masqué */ .carousel__card.is-hidden { opacity: 0; z-index: 1; pointer-events: none; } .carousel__card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .carousel__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.4, 0, .2, 1); } /* voile blanc sur les cartes de côté (pas la carte sélectionnée) */ .carousel__veil { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .45s; pointer-events: none; } .carousel__card.is-prev .carousel__veil, .carousel__card.is-next .carousel__veil { opacity: .42; } .carousel__card.is-center:hover .carousel__card-media img, .carousel__card.is-center:focus-visible .carousel__card-media img { transform: scale(1.04); } .carousel__card:focus-visible { outline: calc(2 * var(--s)) solid var(--blue); outline-offset: calc(2 * var(--s)); } /* info visible seulement sous la carte centrale */ .carousel__card-info { padding: calc(10 * var(--s)) 0 0; opacity: 0; transition: opacity .3s; } .carousel__card.is-center .carousel__card-info { opacity: 1; } .carousel__card-title { display: block; font-size: calc(10 * var(--s)); font-weight: 700; line-height: calc(13 * var(--s)); } .carousel__card-sub { display: block; font-size: calc(7.5 * var(--s)); letter-spacing: calc(0.8 * var(--s)); text-transform: uppercase; color: rgba(0, 40, 226, .55); margin-top: calc(3 * var(--s)); } .carousel__controls { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--s)); margin-top: calc(6 * var(--s)); } .carousel__arrow { display: inline-flex; align-items: center; justify-content: center; width: calc(30 * var(--s)); height: calc(30 * var(--s)); padding: 0; border-radius: 50%; border: 1px solid rgba(0, 40, 226, .35); background: none; color: var(--blue); font-size: calc(15 * var(--s)); line-height: 1; cursor: pointer; transition: background .15s, color .15s; } /* le glyphe ‹ › a un bearing latéral : léger recentrage optique */ .carousel__arrow--prev { padding-right: calc(1 * var(--s)); } .carousel__arrow--next { padding-left: calc(1 * var(--s)); } .carousel__arrow:hover { background: var(--blue); color: #fff; } .carousel__dots { display: flex; align-items: center; gap: calc(7 * var(--s)); } .carousel__dot { width: calc(7 * var(--s)); height: calc(7 * var(--s)); border-radius: 50%; border: none; padding: 0; background: rgba(0, 40, 226, .25); cursor: pointer; transition: background .15s, transform .15s; } .carousel__dot.is-active { background: var(--blue); transform: scale(1.25); } /* ========================================================================== POPUP DÉTAIL PROJET (.rmodal) — hors .page, dimensions en vw/vh/px pour être indépendante de la grille 696. z-index au-dessus de la nav (5). ========================================================================== */ .rmodal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; } .rmodal[hidden] { display: none; } /* Voile blanc, comme les images survolées du site (rgba blanc translucide) */ .rmodal__backdrop { position: absolute; inset: 0; background: rgba(255, 255, 255, .62); } .rmodal__dialog { position: relative; z-index: 1; width: min(1320px, 96vw); height: min(820px, 94vh); /* taille fixe : ne varie plus selon l'image */ overflow: auto; background: var(--cream); color: var(--blue); display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 3vw, 40px); padding: clamp(22px, 3vw, 46px); border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); } .rmodal__dialog:focus { outline: none; } .rmodal__close { position: absolute; top: 10px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent; color: var(--blue); font-size: 26px; line-height: 1; cursor: pointer; transition: background .15s; } .rmodal__close:hover { background: rgba(0, 40, 226, .1); } .rmodal__media { min-width: 0; } .rmodal__stage { position: relative; } .rmodal__img { width: 100%; height: clamp(300px, 58vh, 660px); object-fit: cover; border-radius: 3px; background: var(--panel-dark); } .rmodal__nav { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: none; background: rgba(240, 238, 230, .9); color: var(--blue); font-size: 24px; line-height: 1; cursor: pointer; transition: background .15s; } .rmodal__nav--prev { padding-right: 2px; } .rmodal__nav--next { padding-left: 2px; } .rmodal__nav:hover { background: #fff; } .rmodal__nav--prev { left: 10px; } .rmodal__nav--next { right: 10px; } .rmodal__caption { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: rgba(0, 40, 226, .7); } .rmodal__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; } .rmodal__thumb { flex: 0 0 auto; width: 68px; height: 50px; padding: 0; border: 2px solid transparent; border-radius: 3px; overflow: hidden; background: none; cursor: pointer; } .rmodal__thumb img { width: 100%; height: 100%; object-fit: cover; } .rmodal__thumb.is-active { border-color: var(--blue); } .rmodal__body { min-width: 0; } .rmodal__title { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.15; } .rmodal__meta { margin: 0 0 18px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(0, 40, 226, .55); } .rmodal__desc p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; text-align: justify; } .rmodal__desc p:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .carousel__card, .carousel__card-media img, .carousel__veil, .carousel__card-info, .carousel__arrow, .carousel__dot { transition: none; } } /* ========================================================================== CONTACT ========================================================================== */ .contact { padding: calc(37 * var(--s)) calc(39 * var(--s)) calc(56 * var(--s)); } .contact__card { display: grid; grid-template-columns: 1fr calc(232 * var(--s)); margin-top: calc(22 * var(--s)); border-radius: calc(8 * var(--s)); overflow: hidden; box-shadow: 0 calc(10 * var(--s)) calc(30 * var(--s)) rgba(0, 40, 226, .10); } /* Colonne infos (fond crème clair, badges ronds bleus) */ .contact__list { list-style: none; margin: 0; padding: calc(26 * var(--s)) calc(28 * var(--s)); background: var(--panel); display: flex; flex-direction: column; gap: calc(16 * var(--s)); } .contact__row { display: grid; grid-template-columns: calc(38 * var(--s)) 1fr; align-items: center; gap: calc(14 * var(--s)); } .contact__ic { width: calc(38 * var(--s)); height: calc(38 * var(--s)); border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; flex: none; } .contact__ic svg { width: calc(19 * var(--s)); height: calc(19 * var(--s)); stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .contact__meta { display: flex; flex-direction: column; min-width: 0; } .contact__k { font-size: calc(7 * var(--s)); font-weight: 600; letter-spacing: calc(.6 * var(--s)); text-transform: uppercase; opacity: .5; } .contact__v { font-size: calc(11.5 * var(--s)); line-height: 1.3; word-break: break-word; } a.contact__v:hover { text-decoration: underline; } /* Colonne CTA bleue (logo + boutons réseaux) */ .contact__cta { background: var(--blue); color: #fff; padding: calc(28 * var(--s)) calc(22 * var(--s)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(14 * var(--s)); } .contact__logo { width: calc(120 * var(--s)); height: auto; } .contact__invite { margin: 0; font-size: calc(9.5 * var(--s)); line-height: 1.5; opacity: .95; } .contact__socials { display: flex; flex-direction: column; gap: calc(9 * var(--s)); width: 100%; } .contact__soc { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--s)); background: #fff; color: var(--blue); border-radius: 999px; padding: calc(8 * var(--s)) calc(14 * var(--s)); font-size: calc(9.5 * var(--s)); font-weight: 600; transition: opacity .15s; } .contact__soc:hover { opacity: .85; } .contact__soc-ic { width: calc(15 * var(--s)); height: calc(15 * var(--s)); fill: currentColor; flex: none; } .footer { padding: calc(14 * var(--s)) calc(39 * var(--s)) calc(26 * var(--s)); font-size: calc(7.5 * var(--s)); opacity: .65; } .footer p { margin: 0; } /* ========================================================================== NAV — variantes ========================================================================== */ /* Page courante */ .nav__link--active { background: #fff; color: var(--blue); } /* Pages sans hero : la nav n'est plus superposée, elle occupe sa propre bande */ .topnav--solid { position: static; background: var(--cream); } /* ========================================================================== BANNIÈRE de page — même principe que le hero : photo plein cadre, nav superposée, titre en blanc par-dessus ========================================================================== */ .banner { position: relative; height: calc(280 * var(--s)); overflow: hidden; } .banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Titre réel, en blanc, calé à gauche sur la marge du site */ .banner__title { position: absolute; z-index: 2; left: calc(39 * var(--s)); top: calc(164 * var(--s)); margin: 0; color: #fff; font-size: calc(28 * var(--s)); font-weight: 700; line-height: calc(36 * var(--s)); letter-spacing: calc(-0.3 * var(--s)); } /* Sous-nav posée sur la bannière : pas de bloc, du texte blanc en capitales réparti sur toute la largeur, filet sous l'entrée survolée. */ .banner .subnav { position: absolute; left: 0; right: 0; top: auto; bottom: calc(34 * var(--s)); z-index: 2; /* alignées à gauche, sur la même marge que le titre blanc */ justify-content: flex-start; gap: calc(30 * var(--s)); padding: 0 calc(39 * var(--s)); background: none; border-radius: 0; overflow: visible; } .banner .subnav .pill { position: relative; background: none; color: #fff; border-radius: 0; padding: 0; height: auto; min-width: 0; font-size: calc(8 * var(--s)); line-height: calc(12 * var(--s)); letter-spacing: calc(0.5 * var(--s)); text-transform: uppercase; text-shadow: 0 calc(1 * var(--s)) calc(7 * var(--s)) rgba(0, 0, 0, .45); } /* Le filet est un pseudo-élément : il apparaît sans décaler la mise en page */ .banner .subnav .pill::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(-8 * var(--s)); height: calc(1.2 * var(--s)); background: #fff; opacity: 0; transition: opacity .18s; } .banner .subnav .pill:hover { opacity: 1; } .banner .subnav .pill--current::after, .banner .subnav .pill:hover::after, .banner .subnav .pill:focus-visible::after { opacity: 1; } /* Voile sombre en dégradé : la photo peut être claire, le texte blanc doit rester lisible en bas de bannière */ .banner::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .04) 40%, rgba(0, 0, 0, .38) 100%); } /* ========================================================================== SOUS-NAV collante — saut d'une prestation à l'autre ========================================================================== */ .subnav { position: sticky; top: 0; z-index: 4; background: var(--cream); display: flex; gap: calc(10 * var(--s)); padding: calc(4 * var(--s)) calc(39 * var(--s)) calc(12 * var(--s)); overflow-x: auto; scrollbar-width: none; } .subnav::-webkit-scrollbar { display: none; } .pill { min-width: 0; flex: none; } /* Les cibles des pastilles ne doivent pas passer sous la barre collante */ /* Cibles de la sous-nav : calées PILE en haut de l'écran, aucune marge qui laisserait voir la section précédente. Le padding-top propre à chaque bloc suffit à aérer sous le bord. Règle permanente (voir CLAUDE.md). */ .split[id], .wide[id], .band[id], .steps-block[id], .gal-title[id] { scroll-margin-top: 0; } /* ========================================================================== BANDEAU CTA — fin de page, fond bleu ========================================================================== */ .cta { background: var(--blue); color: #fff; text-align: center; padding: calc(30 * var(--s)) calc(39 * var(--s)) calc(34 * var(--s)); } .cta__title { font-size: calc(16.7 * var(--s)); font-weight: 700; line-height: calc(23 * var(--s)); margin: 0; } .cta__text { font-size: calc(8 * var(--s)); line-height: calc(11 * var(--s)); margin: calc(7 * var(--s)) 0 0; } .cta .btn { background: #fff; color: var(--blue); } /* ========================================================================== BLOC CROISÉ — passerelle vers l'autre univers ========================================================================== */ .cross { position: relative; display: block; height: calc(170 * var(--s)); overflow: hidden; } .cross img { width: 100%; height: 100%; object-fit: cover; } .cross__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--s)); color: #fff; text-align: center; transition: background .2s; } /* Voile de survol blanc (convention globale du site, cf. CLAUDE.md) */ .cross:hover .cross__label { background: rgba(255, 255, 255, .42); } .cross__kicker { font-size: calc(7.5 * var(--s)); letter-spacing: calc(1.2 * var(--s)); text-transform: uppercase; } .cross__title { font-size: calc(18.7 * var(--s)); font-weight: 700; line-height: calc(24 * var(--s)); text-shadow: 0 calc(1.5 * var(--s)) calc(8 * var(--s)) rgba(0, 0, 0, .4); } /* ========================================================================== PORTES D'ENTRÉE de l'accueil — 2 cartes alignées, bord à bord (les vignettes décalées .card--a / .card--b restent en haut des pages métier) ========================================================================== */ .doors { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; height: calc(391 * var(--s)); overflow: hidden; } .doors .card { position: relative; width: 100%; height: 100%; } /* Labels longs sur les portes d'entrée de l'accueil */ .card__label { padding: 0 calc(16 * var(--s)); text-align: center; line-height: calc(24 * var(--s)); } /* Nav de pied de page */ .footer__nav { display: flex; flex-wrap: wrap; gap: calc(14 * var(--s)); margin-bottom: calc(8 * var(--s)); font-size: calc(8 * var(--s)); opacity: 1; } .footer__nav a:hover { text-decoration: underline; } /* ========================================================================== MOBILE — reflow (le scaling pur rendrait le texte illisible) ========================================================================== */ /* Reflow fluide : téléphones ET tablettes / petits portables. Le mode « affiche » (--s = 100cqw/696) ne reprend qu'au-dessus de 1150px, largeur à laquelle le corps de texte poster (8u) vaut déjà ~13px : la bascule est donc continue avec les 13,5px du reflow. */ @media (max-width: 1150px) { .topnav { position: static; height: auto; flex-wrap: wrap; gap: 10px; padding: 12px 16px; background: var(--cream); } .logo-mono { width: 52px; } .nav { width: 100%; margin-left: 0; gap: 6px; flex-wrap: wrap; justify-content: center; } .nav__link { font-size: 11.5px; padding: 8px 12px; } .hero { height: 58vh; min-height: 320px; } .hero__logo { width: 76vw; top: 18%; } .hero__sub { font-size: 15px; line-height: 22px; } .hero__sub--1 { top: auto; bottom: 30%; } .hero__sub--2 { top: auto; bottom: 23%; } .quote { height: auto; padding: 26px 18px; } .quote__text { font-size: 13px; line-height: 20px; padding: 0; } .duo { height: 180px; } .band { height: 220px; } .split, .split--narrow { grid-template-columns: 1fr; min-height: 0; } .split--narrow .split__body { padding-right: 18px; } .split__media { height: 300px; } .split__body { padding: 16px 18px 30px; } /* Empilé : même ordre partout (texte puis image), on annule l'alternance */ .split--rev .split__media, .split--rev .split__body { order: 0; } .h1 { font-size: 26px; line-height: 1.2; margin-bottom: 12px; } .h2 { font-size: 23px; line-height: 1.2; margin-bottom: 12px; } .h3 { font-size: 21px; line-height: 1.2; } .body p, .steps p, .steps h4, .wide .lead { font-size: 13.5px; line-height: 20px; } .body p { margin-bottom: 14px; } .price { font-size: 16px; margin-top: 16px; } .btn { font-size: 14px; padding: 11px 18px; border-radius: 6px; } .steps-block { padding: 16px 18px 30px; } .steps-block__head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 26px; } .steps-block__title { font-size: 23px; line-height: 1.2; } .steps-block__lead { font-size: 13.5px; line-height: 20px; } .steps-row { grid-template-columns: 1fr; row-gap: 26px; } .steps-row::before { display: none; } .step__num { width: 28px; height: 28px; font-size: 13px; } .step__title { margin: 12px 0 8px; font-size: 16px; line-height: 1.25; } .step p { font-size: 13.5px; line-height: 20px; } .tarif { margin-top: 26px; margin-left: 0; flex-wrap: wrap; gap: 14px; } .tarif__sep { display: none; } /* corrections optiques recalculées pour les tailles fixes du mobile */ .tarif__label { font-size: 10px; letter-spacing: 1.6px; transform: translateY(-2.5px); } .tarif__value { font-size: 22px; } .tarif__btn { padding: 8px 0; font-size: 14px; transform: translateY(-2.2px); } .tarif__btn::after { height: 3px; } .steps { grid-template-columns: 1fr; } .wide { padding: 26px 18px; } .cards { height: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 18px 24px; } .card { position: static; width: 100% !important; height: 220px !important; left: auto !important; top: auto !important; } .card__label { font-size: 24px; } .gal-title { padding: 16px 18px 12px; } .gal { height: 200px; } /* Fil « À la une » : une colonne */ .feed { grid-template-columns: 1fr; gap: 20px; padding: 20px 18px 36px; } .post-card__body { padding: 14px 16px 18px; } .post-card__cat { font-size: 10px; letter-spacing: 1px; padding: 3px 9px; } .post-card__date { font-size: 11px; } .post-card__title { font-size: 19px; line-height: 1.25; } .post-card__text { font-size: 14px; line-height: 1.6; } .post-card__btn { font-size: 13px; padding: 9px 15px; margin-top: 14px; } /* Carrousel réalisations — coverflow en px fixes */ .carousel { padding: 0 18px 28px; } .carousel__stage { height: 300px; } .carousel__card { width: 74vw; max-width: 340px; } .carousel__card.is-prev { transform: translateX(calc(-50% - 62vw)) scale(.8); } .carousel__card.is-next { transform: translateX(calc(-50% + 62vw)) scale(.8); } .carousel__card-info { padding: 8px 0 0; } .carousel__card-title { font-size: 15px; line-height: 1.25; } .carousel__card-sub { font-size: 10.5px; letter-spacing: 1px; margin-top: 3px; } .carousel__controls { gap: 12px; margin-top: 14px; } .carousel__arrow { width: 36px; height: 36px; font-size: 18px; } .carousel__dot { width: 8px; height: 8px; } /* Popup : colonnes empilées, image en premier */ .rmodal { padding: 0; } .rmodal__dialog { grid-template-columns: 1fr; width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; gap: 18px; padding: 54px 18px 28px; } .rmodal__img { height: 42vh; } .rmodal__nav { width: 38px; height: 38px; font-size: 22px; } .rmodal__title { font-size: 22px; } .rmodal__desc p { font-size: 14px; text-align: left; } .contact { padding: 26px 18px 40px; } .contact__card { grid-template-columns: 1fr; } .contact__list { padding: 22px 18px; gap: 16px; } .contact__row { grid-template-columns: 40px 1fr; gap: 13px; } .contact__ic { width: 40px; height: 40px; } .contact__ic svg { width: 20px; height: 20px; } .contact__k { font-size: 10px; letter-spacing: .6px; } .contact__v { font-size: 15px; } .contact__cta { padding: 26px 20px; gap: 14px; } .contact__logo { width: 130px; } .contact__invite { font-size: 13px; } .contact__socials { gap: 10px; } .contact__soc { font-size: 13px; padding: 10px 16px; gap: 9px; } .contact__soc-ic { width: 18px; height: 18px; } .footer { padding: 12px 18px 24px; font-size: 12px; } .topnav--solid { padding: 12px 16px; } .banner { height: 42vh; min-height: 280px; } .banner__title { left: 18px; top: auto; bottom: 22%; font-size: 30px; line-height: 1.2; } .banner .subnav { top: auto; bottom: 6%; justify-content: flex-start; gap: 18px; padding: 0 16px; box-shadow: none; } .banner .subnav .pill { padding: 0; font-size: 11px; letter-spacing: .8px; } .banner .subnav .pill::after { bottom: -8px; height: 2px; } .subnav { gap: 6px; padding: 10px 16px; flex-wrap: nowrap; box-shadow: 0 2px 10px rgba(0, 40, 226, .08); } .pill { font-size: 11.5px; padding: 8px 12px; } .split[id], .wide[id], .gal-title[id], .band[id], .steps-block[id] { scroll-margin-top: 0; } .cta { padding: 26px 18px 30px; } .cta__title { font-size: 21px; line-height: 1.2; } .cta__text { font-size: 13.5px; line-height: 20px; } .cross { height: 160px; } .cross__kicker { font-size: 11px; letter-spacing: 2px; } .cross__title { font-size: 22px; line-height: 1.2; } .doors { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } .doors .card { height: 220px !important; } .card__label { padding: 0 14px; line-height: 1.2; } .footer__nav { gap: 12px; font-size: 12px; margin-bottom: 10px; } } /* ========================================================================== PALIER TABLETTE / PETIT PORTABLE (701–1150px) Le reflow ci-dessus s'applique ; ici on empêche les lignes de texte de devenir trop longues (colonnes de contenu plafonnées et centrées), on passe le fil « À la une » en 2 colonnes et on recale le carrousel dont les décalages étaient exprimés en vw (pensés pour un plein écran mobile). Le mode affiche reprend au-dessus de 1150px. ========================================================================== */ @media (min-width: 701px) and (max-width: 1150px) { /* Colonnes de texte : largeur de lecture confortable, centrées. Les images/bannières restent bord à bord (pleine largeur). */ .split__body, .split--narrow .split__body { max-width: 700px; margin-inline: auto; width: 100%; padding-inline: 24px; } .steps-block, .wide, .gal-title, .contact, .cta { max-width: 860px; margin-inline: auto; } .steps-block__head, .steps-row, .steps-block .tarif { max-width: 720px; } .cta__title, .cta__text { max-width: 680px; margin-inline: auto; } /* Fil d'actualités : deux colonnes tant qu'il y a la place. */ .feed { grid-template-columns: 1fr 1fr; max-width: 920px; margin-inline: auto; gap: 24px; } /* Carrousel : décalages en px (les vw dépassaient la zone utile). */ .carousel__stage { height: 340px; } .carousel__card { width: 380px; max-width: 60%; } .carousel__card.is-prev { transform: translateX(calc(-50% - 320px)) scale(.8); } .carousel__card.is-next { transform: translateX(calc(-50% + 320px)) scale(.8); } /* Un peu plus de respiration verticale sur les médias larges. */ .split__media { height: 360px; } .hero { height: 62vh; } .banner { height: 46vh; } } /* ========================================================================== ÉLÉMENTS MOBILE — barre d'action fixe & animations d'apparition Masqués/neutres par défaut (desktop) ; activés dans le bloc <=700px. ========================================================================== */ .mobilebar { display: none; } .hero__cta { display: none; } /* bouton hero : mobile uniquement */ /* Révélation au scroll : n'est appliquée qu'en mobile (mobile.js ajoute la classe .reveal aux sections uniquement sous 700px, puis .reveal-in quand la section entre dans le viewport). Desktop jamais concerné. */ .has-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; } .has-js .reveal.reveal-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-js .reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== ======================== REFONTE MOBILE (<=700px) ====================== Expérience mobile-first repensée : typo lisible alignée à gauche, cartes modernes, menu plein écran, carrousel à swipe, barre d'action fixe. Vient APRÈS le bloc tablette : sur téléphone il gagne les conflits. Le desktop (>=1150px) et les tablettes (701–1150px) ne sont pas touchés. ========================================================================== */ @media (max-width: 700px) { :root { --mx: 20px; } body { padding-bottom: 64px; } /* place pour la barre d'action fixe */ /* ---- Typo : lisible, alignée à gauche (fin du justifié sur mobile) ---- */ .body p, .steps p, .steps h4, .wide .lead, .steps-block__lead, .step p, .post-card__text, .rmodal__desc p, .split__body p { text-align: justify; hyphens: auto; font-size: 15.5px; line-height: 1.6; } .quote__text { text-align: center; } /* ======================= BARRE SUPÉRIEURE ======================= */ .topnav { position: sticky; top: 0; z-index: 60; justify-content: space-between; flex-wrap: nowrap; padding: 12px 16px; background: var(--cream); } .logo-mono { width: 54px; position: relative; z-index: 60; } /* z-index au-dessus de l'overlay .nav (50) pour rester cliquable (croix) */ .has-js .nav-burger { display: flex; position: relative; z-index: 60; } /* ======================= MENU PLEIN ÉCRAN ======================= */ /* Sans JS : nav empilée sous la barre (navigable). */ .nav { width: 100%; margin: 0; flex-direction: column; gap: 0; align-items: stretch; } /* Avec JS : overlay plein écran, ouvert par le burger. */ .has-js .nav { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 72px 28px 40px; background: var(--cream); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; } .has-js .topnav.is-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .28s ease, transform .28s ease; } .nav__link { background: transparent; color: var(--blue); border-radius: 0; width: 100%; min-width: 0; height: auto; line-height: 1.2; font-size: 24px; font-weight: 600; text-align: center; padding: 18px 0; border-bottom: 1px solid rgba(0, 40, 226, .12); } .nav__link:last-child { border-bottom: 0; } .nav__link--active { color: var(--blue); opacity: .55; } /* ======================= HERO (accueil) ======================= */ /* Ne PAS flexer .hero directement : .topnav en est un enfant et se retrouverait rétréci/centré. Le centrage se fait sur .hero__inner. */ .hero { height: 82svh; min-height: 460px; } .hero__inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; } .hero::after { /* voile sombre pour lisibilité */ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12) 45%, rgba(0,0,0,.42)); z-index: 1; } .hero__img { position: absolute; inset: 0; } .hero__logo { position: relative; top: auto; left: auto; transform: none; z-index: 2; width: 66vw; max-width: 260px; margin: 0 auto; } .hero__sub { position: relative; top: auto; bottom: auto; z-index: 2; left: auto; right: auto; font-size: 16px; line-height: 1.4; letter-spacing: .3px; } .hero__sub--1 { margin-top: 18px; } .hero__sub--2 { margin-top: 2px; } .hero__cta { position: relative; z-index: 2; margin-top: 26px; display: inline-flex; align-items: center; background: #fff; color: var(--blue); font-weight: 700; font-size: 15px; padding: 13px 26px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.18); } /* ======================= CITATION ======================= */ /* Le nuancier en fond rend le texte bleu illisible sur mobile : voile crème par-dessus la photo pour le contraste, texte au premier plan. */ .quote { position: relative; height: auto; padding: 44px 24px; } .quote::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(240, 238, 230, .68); } .quote__text { position: relative; z-index: 2; font-size: 16px; line-height: 1.6; padding: 0; } .quote__text p { margin: 0 0 10px; } .quote__text p:last-child { margin-bottom: 0; } /* ======================= PORTES D'ENTRÉE ======================= */ .doors { grid-template-columns: 1fr; grid-template-rows: none; height: auto; gap: 14px; padding: 8px var(--mx) 0; margin-bottom: 28px; /* rythme vertical uniforme (28px) */ } .doors .card { height: 28svh !important; min-height: 190px; left: auto !important; top: auto !important; width: auto !important; border-radius: 18px; overflow: hidden; } .card__label { font-size: 24px; line-height: 1.15; padding: 0 18px; text-align: center; } /* ======================= BANDEAU CTA (accueil) ======================= */ /* Même gouttière + rayon que les cartes -> écarts homogènes de chaque côté */ .cta { margin: 0 var(--mx) 28px; /* écart haut/bas identique (28px) */ padding: 44px 24px; border-radius: 18px; text-align: center; } .cta__title { font-size: 24px; line-height: 1.2; margin-bottom: 10px; } .cta__text { font-size: 15.5px; line-height: 1.55; } /* ======================= BLOCS SPLIT -> CARTES ======================= */ .section { padding: 0; } .split, .split--narrow { display: flex; flex-direction: column; grid-template-columns: none; min-height: 0; margin: 0 var(--mx) 28px; border-radius: 18px; overflow: hidden; background: var(--panel); box-shadow: 0 10px 28px rgba(0, 40, 226, .08); } .split__media, .split--rev .split__media { order: -1; /* image toujours en haut de la carte */ position: relative; height: 240px; } .split--narrow .split__media { height: 240px; } .split__body, .split--panel .split__body, .split--narrow .split__body { order: 0; padding: 22px 20px 26px; background: var(--panel); text-align: left; } /* Titres */ .h1 { font-size: 28px; line-height: 1.2; margin-bottom: 12px; } .h2 { font-size: 24px; line-height: 1.2; margin-bottom: 12px; } .h3 { font-size: 20px; line-height: 1.25; } .body p { margin-bottom: 14px; } .body p:last-child { margin-bottom: 0; } /* Boutons génériques */ .btn { font-size: 15px; padding: 13px 24px; border-radius: 12px; display: inline-block; } /* ======================= TARIF -> pastille pleine ======================= */ .tarif, .tarif--start { margin-top: 22px; margin-left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .tarif__left { display: flex; align-items: baseline; gap: 10px; transform: none; } .tarif__sep { display: none; } .tarif__label { font-size: 11px; letter-spacing: 1.4px; transform: none; } .tarif__value { font-size: 24px; transform: none; } .tarif__btn { background: var(--blue); color: #fff; padding: 13px 24px; border-radius: 12px; font-size: 15px; font-weight: 700; transform: none; } .tarif__btn::after { display: none; } /* ======================= AMÉNAGEMENT -> timeline verticale ============ */ .steps-block { padding: 40px var(--mx); } .steps-block__head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 30px; } .steps-block__title { font-size: 24px; line-height: 1.2; } .steps-block__lead { font-size: 15.5px; line-height: 1.55; } .steps-row { display: block; grid-template-columns: none; padding-left: 0; } .steps-row::before { /* rail vertical le long des pastilles */ display: block; left: 15px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; } .step { position: relative; padding-left: 52px; padding-bottom: 26px; } .step:last-child { padding-bottom: 0; } .step__num { position: absolute; left: 0; top: 0; width: 32px; height: 32px; font-size: 14px; z-index: 1; } .step__title { margin: 3px 0 8px; font-size: 17px; line-height: 1.25; } /* ======================= SECTIONS "WIDE" ======================= */ .wide { padding: 40px var(--mx); } .wide .lead { font-size: 15.5px; line-height: 1.55; } /* Anciennes vignettes décalées (non utilisées) — sécurité */ .cards { height: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 var(--mx) 24px; } .card { position: static; width: 100% !important; height: 220px !important; left: auto !important; top: auto !important; } /* ======================= TITRE "RÉALISATIONS" ======================= */ .gal-title { padding: 34px var(--mx) 14px; text-align: left; } .gal { height: 200px; } /* ======================= FIL "À LA UNE" ======================= */ .feed { grid-template-columns: 1fr; gap: 20px; padding: 24px var(--mx) 40px; } .post-card { border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 40, 226, .08); } .post-card__media, .post-card__img { height: 210px; } .post-card__body { padding: 18px 18px 20px; } .post-card__cat { font-size: 10.5px; letter-spacing: 1px; padding: 4px 10px; } .post-card__date { font-size: 12px; } .post-card__title { font-size: 21px; line-height: 1.25; } .post-card__text { font-size: 15.5px; line-height: 1.6; } .post-card__btn { font-size: 14px; padding: 11px 20px; margin-top: 16px; background: var(--blue); color: #fff; border-radius: 12px; } /* ======================= CARROUSEL -> SWIPE TACTILE ======================= */ .carousel { padding: 6px var(--mx) 30px; } .carousel__stage { height: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0 8px; } .carousel__stage::-webkit-scrollbar { display: none; } .carousel__card, .carousel__card.is-center, .carousel__card.is-prev, .carousel__card.is-next, .carousel__card.is-hidden { position: static; left: auto; top: auto; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; width: 82vw; max-width: 360px; flex: 0 0 auto; scroll-snap-align: center; } .carousel__veil { display: none; } .carousel__card-info { opacity: 1; } /* pas de carte "centre" en mode swipe */ .carousel__card-title { font-size: 16px; line-height: 1.25; } .carousel__card-sub { font-size: 11px; letter-spacing: 1px; margin-top: 4px; } .carousel__arrow { display: none; } /* on swipe */ .carousel__controls { justify-content: center; gap: 0; margin-top: 12px; } .carousel__dots { gap: 8px; } .carousel__dot { width: 8px; height: 8px; } /* ======================= POPUP RÉALISATION ======================= */ .rmodal { padding: 0; } .rmodal__dialog { grid-template-columns: 1fr; width: 100vw; max-height: 100svh; height: 100%; border-radius: 0; gap: 16px; padding: 58px 20px 32px; } .rmodal__img { height: 46svh; } .rmodal__nav { width: 42px; height: 42px; font-size: 24px; } .rmodal__title { font-size: 24px; } .rmodal__desc p { font-size: 15.5px; text-align: justify; hyphens: auto; } /* ======================= CONTACT ======================= */ .contact { padding: 40px var(--mx) 44px; } .contact__card { grid-template-columns: 1fr; border-radius: 18px; } .contact__list { padding: 22px 20px; gap: 6px; } .contact__row { grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(0, 40, 226, .08); } .contact__row:last-child { border-bottom: 0; } .contact__ic { width: 44px; height: 44px; } .contact__ic svg { width: 21px; height: 21px; } .contact__k { font-size: 10.5px; letter-spacing: .6px; } .contact__v { font-size: 16px; } .contact__cta { padding: 30px 22px; gap: 16px; } .contact__logo { width: 140px; } .contact__invite { font-size: 15px; line-height: 1.5; } .contact__socials { gap: 12px; } .contact__soc { font-size: 15px; padding: 13px 18px; gap: 10px; justify-content: center; } .contact__soc-ic { width: 20px; height: 20px; } /* ======================= PIED DE PAGE ======================= */ .footer { padding: 20px var(--mx) 28px; font-size: 13px; } .footer__nav { gap: 14px; font-size: 13px; margin-bottom: 12px; flex-wrap: wrap; } /* ======================= BANNIÈRE + SOUS-NAV CHIPS ======================= */ .banner { height: 40svh; min-height: 260px; overflow: visible; /* la sous-nav déborde juste en dessous */ margin-bottom: 64px; /* réserve la place des chips */ } .banner__img { /* la photo reste clippée à la bannière */ border-radius: 0; } .banner::after { /* garder le clip du voile sur la photo */ border-radius: 0; } .banner__title { left: var(--mx); right: var(--mx); top: auto; bottom: 22px; font-size: 30px; line-height: 1.15; letter-spacing: -.3px; } /* Sous-nav sortie de la photo -> barre de chips à défilement horizontal */ .banner .subnav { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; z-index: 3; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; padding: 12px var(--mx); background: var(--cream); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; box-shadow: 0 6px 16px rgba(0, 40, 226, .06); } .banner .subnav::-webkit-scrollbar { display: none; } .banner .subnav .pill { flex: 0 0 auto; background: var(--blue); color: #fff; padding: 8px 14px; font-size: 12.5px; letter-spacing: .3px; border-radius: 999px; scroll-snap-align: start; } .banner .subnav .pill::after { display: none; } /* pas de filet en mode chips */ .banner .subnav .pill--current { opacity: .6; } /* Ancienne sous-nav collante (non utilisée) — sécurité */ .subnav { gap: 8px; padding: 10px var(--mx); flex-wrap: nowrap; } .pill { font-size: 12.5px; padding: 8px 14px; } .split[id], .wide[id], .gal-title[id], .band[id], .steps-block[id] { scroll-margin-top: 12px; } /* ======================= PASSERELLE (cross) ======================= */ .cross { height: 180px; } .cross__kicker { font-size: 11px; letter-spacing: 2px; } .cross__title { font-size: 24px; line-height: 1.2; } /* ======================= DUO / BAND ======================= */ .duo { height: 180px; } .band { height: 220px; } /* ======================= BARRE D'ACTION FIXE ======================= */ .mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--cream); box-shadow: 0 -6px 20px rgba(0, 40, 226, .10); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); gap: 10px; transition: transform .3s ease; } .mobilebar__btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 12px; font-size: 15px; font-weight: 700; background: rgba(0, 40, 226, .08); color: var(--blue); } .mobilebar__btn--primary { background: var(--blue); color: #fff; } .mobilebar__ic { width: 18px; height: 18px; fill: currentColor; flex: none; } /* Barre masquée quand le menu plein écran est ouvert ou au scroll vers le bas */ .menu-open .mobilebar, .mobilebar.is-hidden { transform: translateY(140%); } .menu-open { overflow: hidden; } /* Menu ouvert : barre haute épinglée au viewport (croix toujours atteignable), au-dessus de l'overlay (z 50). */ .menu-open .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 55; } }