/* ============================================================ Pure Spray — version « deux spécialités » (armoires + extérieur) Chargée APRÈS style.css : on réutilise ses couleurs, ses boutons, son en-tête, sa FAQ et son formulaire; ce fichier n'ajoute que les blocs des nouvelles pages (préfixe fx-). ============================================================ */ :root { --fx-cream: #F5F4E6; /* crème de la marque, adouci pour les grands fonds */ --fx-cream-2:#ECEADA; --fx-card: #FFFFFF; --fx-ink: var(--dark); --fx-teal: #133128; /* vert forêt : la couleur de la marque (2026-10) */ --fx-star: #E0A100; } html[data-theme="dark"] { --fx-cream: #0F2620; --fx-cream-2:#0B1A15; --fx-card: #16352A; --fx-ink: var(--text); --fx-teal: #F0F0C0; /* sur fond vert, l'accent est la crème */ } .fx-section { padding: 5rem 0; } .fx-section.is-cream { background: var(--fx-cream); } .fx-section.is-tight { padding: 3.5rem 0; } .fx-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fx-teal); margin-bottom: .9rem; } .fx-eyebrow svg { flex-shrink: 0; } .fx-h2 { color: var(--fx-ink); margin-bottom: .85rem; max-width: 22ch; } .fx-lead { font-size: 1.125rem; color: var(--text-light); max-width: 62ch; } .fx-center { text-align: center; } .fx-center .fx-h2, .fx-center .fx-lead { margin-left: auto; margin-right: auto; } .fx-center .fx-h2 { max-width: 26ch; } /* Une image de 800 px dans une colonne « 1fr » élargit la colonne à 800 px (largeur minimale automatique des grilles) : sur téléphone, toute la page débordait à droite et le menu sortait de l'écran. */ .fx-hero-grid > *, .fx-split > *, .fx-ba-pair > *, .fx-photos > *, .fx-facts > *, .fx-choices > *, .fx-steps > *, .fx-cards > *, .fx-proof > *, .fx-reviews > *, .fx-focus-inner > *, .fx-pricebox > *, .fx-method > * { min-width: 0; } .fx-steps, .fx-method { list-style: none; padding: 0; } /* === Héros ================================================= */ .fx-hero { background: linear-gradient(180deg, var(--fx-cream) 0%, var(--bg) 100%); padding: 4rem 0 4.5rem; } /* Trois blocs : texte, photo, actions. Sur ordinateur la photo occupe la colonne de droite sur toute la hauteur; sur téléphone elle vient entre le titre et les boutons, pour que quelqu'un qui arrive d'une pub voie le résultat avant d'avoir à défiler. */ .fx-hero-grid { display: grid; grid-template-columns: 1.08fr 1fr; grid-template-areas: "txt fig" "act fig"; column-gap: 3.5rem; row-gap: 0; align-items: center; } .fx-hero-txt { grid-area: txt; align-self: end; } .fx-hero-act { grid-area: act; align-self: start; } .fx-hero-grid > figure { grid-area: fig; } .fx-hero h1 { color: var(--fx-ink); margin-bottom: 1.1rem; max-width: 18ch; } .fx-hero .fx-lead { margin-bottom: 1.75rem; } .fx-crumbs { font-size: .8125rem; color: var(--text-light); margin-bottom: 1.1rem; } .fx-crumbs a { color: var(--fx-teal); font-weight: 600; } .fx-price-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; background: var(--fx-card); border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1.1rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); } .fx-price-line strong { font-size: 1.25rem; color: var(--fx-ink); letter-spacing: -.01em; } .fx-price-line span { color: var(--text-light); font-size: .9375rem; } /* Les deux portes d'entrée : l'internaute se classe lui-même */ .fx-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .fx-choice { position: relative; display: block; background: var(--fx-card); border: 1.5px solid var(--border); border-radius: 14px; padding: 1.15rem 2.6rem 1.15rem 1.15rem; transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease); } .fx-choice:hover { border-color: var(--fx-teal); transform: translateY(-2px); box-shadow: var(--shadow-md); } .fx-choice strong { display: block; color: var(--fx-ink); font-size: 1.0625rem; margin-bottom: .3rem; } .fx-choice span { display: block; color: var(--text-light); font-size: .875rem; line-height: 1.5; } .fx-choice .fx-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--fx-teal); } .fx-ctas { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.5rem; } .fx-btn-ghost { display: inline-flex; align-items: center; gap: .5rem; padding: .875rem 1.25rem; border-radius: var(--radius); font-weight: 600; color: var(--fx-ink); border: 2px solid var(--border); transition: border-color var(--ease), color var(--ease); } .fx-btn-ghost:hover { border-color: var(--fx-teal); color: var(--fx-teal); } .fx-trust { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: .875rem; color: var(--text-light); } .fx-trust > * { display: inline-flex; align-items: center; gap: .4rem; } .fx-trust svg { color: var(--fx-teal); flex-shrink: 0; } .fx-trust a { text-decoration: underline; text-underline-offset: 2px; } .fx-stars { color: var(--fx-star); letter-spacing: 1px; } /* === Avant / après ========================================= */ .fx-ba { margin: 0; } .fx-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .fx-ba-pair.is-wide { grid-template-columns: 1fr; } .fx-ba-cell { position: relative; border-radius: 14px; overflow: hidden; background: var(--bg-light); } .fx-ba-cell img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; } .fx-ba.is-landscape .fx-ba-cell img { aspect-ratio: 4 / 3; } .fx-ba-tag { position: absolute; left: .65rem; top: .65rem; padding: .25rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(9,21,21,.78); color: #fff; } .fx-ba-tag.is-after { background: var(--amber); color: var(--dark); } .fx-ba figcaption { font-size: .8125rem; color: var(--text-light); line-height: 1.55; margin-top: .7rem; } /* === Blocs texte + image =================================== */ .fx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .fx-split.is-top { align-items: start; } /* La photo suit la lecture quand le texte d'à côté est plus long qu'elle. */ .fx-split.is-top > figure { position: sticky; top: 90px; } .fx-split + .fx-split { margin-top: 4rem; } .fx-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; } .fx-fact { background: var(--fx-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; } .fx-fact strong { display: block; font-size: 1.5rem; line-height: 1.15; color: var(--fx-ink); letter-spacing: -.02em; margin-bottom: .4rem; } .fx-fact span { display: block; font-size: .875rem; color: var(--text-light); line-height: 1.55; } .fx-list { display: grid; gap: .65rem; margin: 1.25rem 0 1.75rem; } .fx-list.is-2 { grid-template-columns: 1fr 1fr; gap: .65rem 1.5rem; } .fx-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; line-height: 1.6; } .fx-list svg { color: var(--fx-teal); flex-shrink: 0; margin-top: .25rem; } .fx-note { border-left: 4px solid var(--amber-dark); background: var(--fx-card); border-radius: 0 12px 12px 0; padding: 1.1rem 1.25rem; margin: 1.5rem 0; box-shadow: var(--shadow); } .fx-note h3 { font-size: 1rem; color: var(--fx-ink); margin-bottom: .5rem; } .fx-note ul { display: grid; gap: .45rem; } .fx-note li { font-size: .9rem; color: var(--text-light); line-height: 1.6; padding-left: 1rem; position: relative; } .fx-note li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-dark); } .fx-note p { font-size: .9rem; color: var(--text-light); } .fx-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--fx-teal); } .fx-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* === Pourquoi deux services ================================ */ .fx-focus { background: var(--dark); color: #fff; padding: 3.5rem 0; } .fx-focus-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; } .fx-focus h2 { color: #fff; } .fx-focus p { color: rgba(255,255,255,.75); } .fx-focus-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; } .fx-focus-pills span { border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .35rem .85rem; font-size: .8125rem; color: rgba(255,255,255,.85); } /* === Méthode (bande sombre) ================================ */ .fx-dark { background: var(--dark); color: #fff; } .fx-dark .fx-h2 { color: #fff; } .fx-dark .fx-lead, .fx-dark p { color: rgba(255,255,255,.72); } .fx-dark .fx-list li { color: rgba(255,255,255,.85); } .fx-dark .fx-list svg { color: var(--amber); } .fx-dark .fx-eyebrow { color: var(--amber); } .fx-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .fx-photo { margin: 0; } .fx-photo img { border-radius: 14px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .fx-photo figcaption { font-size: .8rem; line-height: 1.5; margin-top: .5rem; color: var(--text-light); } .fx-dark .fx-photo figcaption { color: rgba(255,255,255,.6); } .fx-video { border-radius: 14px; overflow: hidden; background: #000; width: 100%; max-width: 340px; justify-self: center; } .fx-video video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; } /* === Étapes vers le prix =================================== */ .fx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; counter-reset: fx; } .fx-step { background: var(--fx-card); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; position: relative; } .fx-step::before { counter-increment: fx; content: counter(fx); display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--fx-teal); color: #fff; font-weight: 800; margin-bottom: .9rem; } .fx-step h3 { color: var(--fx-ink); margin-bottom: .45rem; } .fx-step p { font-size: .9375rem; color: var(--text-light); line-height: 1.65; } .fx-pricebox { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; margin-top: 2.5rem; background: var(--fx-card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); } .fx-pricebox > div { padding: 1.75rem; } .fx-pricebox > div + div { border-left: 1px solid var(--border); } .fx-pricebox h3 { color: var(--fx-ink); margin-bottom: .35rem; } .fx-pricebox .fx-big { font-size: clamp(1.75rem, 3.5vw, 2.35rem); font-weight: 800; color: var(--fx-ink); letter-spacing: -.02em; line-height: 1.15; } .fx-pricebox .fx-sub { color: var(--text-light); font-size: .9rem; margin-bottom: 1rem; } .fx-pricebox p { font-size: .9375rem; color: var(--text-light); } /* === Preuves vérifiables =================================== */ .fx-proof { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2.5rem; } .fx-proof-item { background: var(--fx-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.35rem; } .fx-proof-item svg { color: var(--fx-teal); margin-bottom: .6rem; } .fx-proof-item h3 { font-size: 1rem; color: var(--fx-ink); margin-bottom: .4rem; } .fx-proof-item p { font-size: .875rem; color: var(--text-light); line-height: 1.6; margin-bottom: .6rem; } .fx-proof-item a { font-size: .875rem; } /* === Avis ================================================== */ .fx-reviews-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; } .fx-score { display: flex; align-items: center; gap: .8rem; } .fx-score strong { font-size: 2.5rem; line-height: 1; color: var(--fx-ink); } .fx-score span { font-size: .875rem; color: var(--text-light); line-height: 1.4; } .fx-score .fx-stars { color: var(--fx-star); } .fx-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .fx-review { background: var(--fx-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.35rem; display: flex; flex-direction: column; } .fx-review blockquote { font-size: .9375rem; line-height: 1.7; color: var(--text); flex: 1; margin: .5rem 0 1rem; } .fx-review cite { font-style: normal; font-size: .8125rem; color: var(--text-light); } .fx-review cite strong { color: var(--fx-ink); display: block; font-size: .875rem; } /* === Villes ================================================ */ .fx-zones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; } .fx-zones a, .fx-zones span { border: 1px solid var(--border); border-radius: 999px; padding: .4rem .9rem; font-size: .875rem; background: var(--fx-card); color: var(--text); } .fx-zones a { border-color: var(--fx-teal); color: var(--fx-teal); font-weight: 600; } .fx-zones a:hover { background: var(--fx-teal); color: #fff; } /* === Cartes de substrat (pages de service) ================= */ .fx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; } .fx-card { background: var(--fx-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem; } .fx-card h3 { color: var(--fx-ink); margin-bottom: .5rem; } .fx-card p { font-size: .9rem; color: var(--text-light); line-height: 1.65; } .fx-method { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; margin-top: 2rem; counter-reset: m; } .fx-method li { position: relative; padding-left: 3rem; } .fx-method li::before { counter-increment: m; content: counter(m); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; border: 2px solid var(--fx-teal); color: var(--fx-teal); } .fx-method h3 { font-size: 1rem; color: var(--fx-ink); margin-bottom: .3rem; } .fx-method p { font-size: .9rem; color: var(--text-light); line-height: 1.65; } /* === Notre fini : 2K contre 1K ============================= */ /* Vidéo du test (clés + acétone) au format téléphone, 9:16. */ .fx-test { margin: 0; width: 100%; max-width: 360px; justify-self: center; } .fx-test video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: #000; } .fx-test .fx-a-venir { width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; } .fx-test figcaption { font-size: .8rem; line-height: 1.5; margin-top: .55rem; color: var(--text-light); } .fx-vs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1.5rem 0; } .fx-vs > * { min-width: 0; } .fx-vs-col { background: var(--fx-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.2rem; } .fx-vs-col.is-2k { border: 2px solid var(--fx-teal); } .fx-vs-tag { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); margin-bottom: .65rem; } .fx-vs-col.is-2k .fx-vs-tag { color: var(--fx-teal); } .fx-vs-col ul:not(.fx-list) { display: grid; gap: .5rem; } .fx-vs-col ul:not(.fx-list) li { position: relative; padding-left: 1.1rem; font-size: .9rem; line-height: 1.55; color: var(--text-light); } .fx-vs-col ul:not(.fx-list) li::before { content: "–"; position: absolute; left: 0; color: var(--text-light); } .fx-vs .fx-list { margin: 0; gap: .5rem; } .fx-vs .fx-list li { font-size: .9rem; line-height: 1.55; } .fx-case-title { color: var(--fx-ink); font-size: 1.25rem; margin-bottom: .25rem; } /* === Porte témoin : encadré sarcelle ======================= */ .fx-callout { display: flex; gap: 1rem; align-items: flex-start; margin: 1.5rem 0; background: var(--fx-card); border: 1px solid var(--border); border-left: 4px solid var(--fx-teal); border-radius: 0 12px 12px 0; padding: 1.1rem 1.25rem; } .fx-callout > svg { color: var(--fx-teal); flex-shrink: 0; margin-top: .1rem; } .fx-callout h3 { font-size: 1rem; color: var(--fx-ink); margin-bottom: .3rem; } .fx-callout p { font-size: .9rem; color: var(--text-light); line-height: 1.6; margin: 0; } /* === Deux forfaits : Signature d'abord ===================== */ .fx-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.5rem; align-items: stretch; } .fx-packs > * { min-width: 0; } .fx-pack { position: relative; background: var(--fx-card); border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem; display: flex; flex-direction: column; } .fx-pack.is-featured { border: 2px solid var(--amber); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); } .fx-pack h3 { font-size: 1.6rem; letter-spacing: -.02em; color: var(--fx-ink); margin-bottom: .25rem; } .fx-pack-tag { align-self: flex-start; margin-bottom: .8rem; padding: .2rem .65rem; border-radius: 999px; background: var(--amber); color: var(--dark); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .fx-pack-sub { color: var(--text-light); font-size: .9375rem; margin-bottom: .25rem; } .fx-pack .fx-list { flex: 1; margin-bottom: 1.25rem; } .fx-pack .btn { align-self: flex-start; } .fx-packs-note { margin: 1.5rem auto 0; max-width: 70ch; text-align: center; font-size: .875rem; color: var(--text-light); line-height: 1.65; } /* === Titre à gauche, chapeau à droite ===================== */ .fx-head-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3.5rem; align-items: end; } .fx-head-split .fx-h2 { margin-bottom: 0; } .fx-head-split .fx-lead { margin: 0; } /* === Réalisations : vidéo haute + photos =================== */ /* Ordre des tuiles : vidéo (haute), cuisine (large), vanité (haute), puis deux petites. « dense » laisse le navigateur boucher les trous quand la grille passe à 2 colonnes. */ .fx-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 17vw, 250px); grid-auto-flow: dense; gap: .75rem; margin-top: 2.5rem; } .fx-gallery.is-photos { grid-template-columns: repeat(3, 1fr); margin-top: 1.25rem; } .fx-gallery > * { min-width: 0; } .fx-tile { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--bg-light); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .fx-tile img, .fx-tile video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .fx-tile:hover img { transform: scale(1.035); } .fx-tile.is-video, .fx-tile.is-tall { grid-row: span 2; } .fx-tile.is-wide { grid-column: span 2; } .fx-tile.is-low img { object-position: 50% 85%; } /* la vanité est au bas de la photo */ /* Avant / après dans une seule tuile large : deux moitiés, chacune avec son étiquette. */ .fx-tile-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 100%; } .fx-tile-ba > div { position: relative; min-width: 0; overflow: hidden; } .fx-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem .95rem .85rem; font-size: .8125rem; font-weight: 600; line-height: 1.4; color: #fff; background: linear-gradient(180deg, transparent, rgba(5,14,14,.85)); } .fx-tile-tag { display: inline-block; margin-right: .45rem; padding: .12rem .5rem; border-radius: 999px; background: var(--amber); color: var(--dark); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; } .fx-gallery-title { color: var(--fx-ink); margin-top: 3.5rem; } /* Bande « de près » sous le héros (cuisine vedette en détails + vidéo du fini sur l'accueil). */ .fx-gallery.is-vedette { grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; } @media (max-width: 900px) { .fx-gallery.is-vedette { grid-template-columns: 1fr 1fr; } .fx-gallery.is-vedette.sans-video .fx-tile:first-child { grid-column: span 2; } } .fx-gallery-more { margin-top: 1.5rem; text-align: center; } /* === Qui arrive chez vous (bande sombre) =================== */ .fx-crew { background: var(--dark); } .fx-crew .fx-h2 { color: #fff; } .fx-crew .fx-lead { color: rgba(255,255,255,.74); } .fx-crew .fx-eyebrow { color: var(--amber); } .fx-crew-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .75rem; margin-top: 2.5rem; } .fx-crew-grid > * { min-width: 0; } .fx-crew-photo { margin: 0; } .fx-crew-photo img, .fx-a-venir { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; } /* Le camion prend toute la hauteur des deux portraits d'à côté. */ .fx-crew-photo.is-van { display: flex; flex-direction: column; } .fx-crew-photo.is-van img, .fx-crew-photo.is-van .fx-a-venir { flex: 1 1 auto; aspect-ratio: auto; height: auto; min-height: 220px; } .fx-crew-photo figcaption { font-size: .8rem; line-height: 1.5; margin-top: .55rem; color: rgba(255,255,255,.6); } /* Case vide tant que la vraie photo n'est pas là : l'aperçu la montre, la vérification (verif_apercu.mjs) refuse qu'elle parte en ligne. */ .fx-a-venir { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: 1.25rem; text-align: center; border: 1.5px dashed rgba(230,230,136,.45); background: rgba(255,255,255,.03); color: rgba(255,255,255,.72); } .fx-a-venir strong { color: var(--amber); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; } .fx-a-venir span { font-size: .875rem; line-height: 1.5; max-width: 28ch; } .fx-crew-points { list-style: none; padding: 2rem 0 0; margin-top: 2.25rem; border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2.25rem; } .fx-crew-points li { display: flex; gap: .65rem; align-items: flex-start; font-size: .9375rem; line-height: 1.6; color: rgba(255,255,255,.72); } .fx-crew-points svg { color: var(--amber); flex-shrink: 0; margin-top: .25rem; } .fx-crew-points strong { color: #fff; margin-right: .3rem; } /* === En-tête : le nom en toutes lettres à côté du sceau ==== */ /* À 42 px, « PURE SPRAY » est illisible dans le sceau : on l'écrit à côté. */ .header-logo { display: inline-flex; align-items: center; gap: .7rem; } .header-wordmark { font-size: .8125rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--fx-ink); white-space: nowrap; } /* Tablette (769-1000 px) : les 7 entrées du menu débordaient à droite de l'écran. On y garde le numéro de téléphone visible et le reste passe dans le menu hamburger. */ @media (min-width: 769px) and (max-width: 1000px) { .header-nav { display: none; } .header-phone { margin-left: auto; } .hamburger { display: flex; margin-left: .5rem; } } /* Juste au-dessus, la barre de navigation complète a besoin de la place du nom. */ @media (min-width: 1001px) and (max-width: 1240px) { .header-wordmark { display: none; } } /* Titres un peu plus serrés : l'allure d'une marque, pas d'un gabarit. */ .fx-hero h1 { letter-spacing: -.03em; } .fx-h2 { letter-spacing: -.02em; } /* Formulaire : le choix du service guide le reste */ /* La zone photos est un