/* ========================================================================== THE ICON MARKETING : gabarit des pages « Digital » Chargé APRÈS style.css, dont il réutilise les tokens et les composants communs (.section, .btn, .marquee, .faq-item, .banner-*, .footer-*). Aucune règle de style.css n'est modifiée : tout ce qui suit est soit une classe nouvelle, soit une surcharge portée par body.page-service. Ces pages n'ont ni écran de chargement, ni hero photo plein écran : elles se lisent tout de suite. L'accueil garde les deux, c'est lui qui pose la marque. ========================================================================== */ body.page-service { --card-radius: 3px; } /* Le hero de ces pages n'est pas en position: fixed : les sections n'ont donc pas besoin d'un fond opaque, contrairement à l'accueil. */ /* Intitulé de section. Sur l'accueil, .sec-tag vit dans un .section-head centré ; ici il est posé seul en tête de colonne, en plus petit. */ body.page-service .sec-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); padding: 0; } body.page-service .dark .sec-tag { color: var(--silver); } body.page-service .sec-tag.badge-champagne { color: var(--onyx); padding: 0.22rem 0.6rem; } /* ========================================================================== BARRE DE PROGRESSION DE LECTURE Enfant direct de : un ancêtre avec clip-path (comme .architecture) piégerait le position: fixed. ========================================================================== */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--champagne); z-index: 101; pointer-events: none; will-change: transform; } /* ========================================================================== HERO DE PAGE SERVICE Composition propre aux pages « Digital » : promesse à gauche, preuve chiffrée à droite. Pas de photo, pas de mot géant, pas de préchargeur. ========================================================================== */ .svc-hero { position: relative; background: var(--onyx); color: var(--white); /* --steel sur onyx tombe à 3,85:1, sous le seuil AA de 4,5:1 : voir la même surcharge sur .dark dans style.css. Le hero n'a pas la classe .dark (c'est .svc-hero qui pose son propre fond), d'où la répétition. */ --steel: var(--silver-dark); padding: var(--page-top) var(--pad-x) clamp(3rem, 5vw, 5rem); overflow: hidden; /* Pleine hauteur d'écran, comme le hero de l'accueil. Décision du client le 2026-09-08, après un essai à 82svh qui laissait deviner la section suivante : le hero occupe tout l'écran, point. Trois unités, dans cet ordre, et l'ordre compte : - 100vh : repli pour les navigateurs sans unités dynamiques. Sur mobile, vh vaut la hauteur barre d'URL *masquée*, donc trop grand. - 100svh : hauteur réellement visible quand la barre d'URL du haut ET la barre d'outils du bas sont affichées, c'est-à-dire à l'arrivée sur la page. Le bas du hero, CTA compris, reste au-dessus de la ligne de flottaison au lieu de passer sous les barres. Ne pas passer à dvh : la hauteur changerait pendant que les barres se rétractent, et le hero se redimensionnerait sous le doigt à chaque défilement. height auto laisse la section grandir si le titre passe à cinq lignes sur écran étroit, plutôt que de rogner le contenu. */ min-height: 100vh; min-height: 100svh; height: auto; display: flex; align-items: center; } .svc-hero > .svc-hero-inner { width: 100%; } /* Trame de fond : hairlines Swiss, estompées vers le bas pour ne pas concurrencer le texte. */ .svc-hero-rules { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(191, 192, 199, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(191, 192, 199, 0.06) 1px, transparent 1px); background-size: 92px 92px; -webkit-mask-image: radial-gradient(130% 95% at 15% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(130% 95% at 15% 0%, #000 0%, transparent 70%); pointer-events: none; } /* Halo champagne qui dérive lentement : la seule couleur de la page, et elle bouge à peine. */ .svc-hero::after { content: ''; position: absolute; width: 46vw; height: 46vw; right: -8vw; top: -14vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 182, 143, 0.15), transparent 72%); pointer-events: none; animation: halo-drift 22s ease-in-out infinite alternate; } @keyframes halo-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-5vw, 5vw, 0) scale(1.12); } } /* Une seule colonne depuis le retrait de .svc-hero-card (2026-09-08). Le bloc de gauche ne s'étale pas pour autant : .svc-hero-title est plafonné à 19ch et .svc-hero-sub à 48ch, la composition ne bouge donc pas. Le halo champagne de .svc-hero::after occupe la droite laissée libre. */ .svc-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); } /* Entrée en cascade, sans dépendance à GSAP */ @keyframes svc-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .svc-hero-main > * { opacity: 0; animation: svc-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .svc-hero-main > *:nth-child(1) { animation-delay: 0.05s; } .svc-hero-main > *:nth-child(2) { animation-delay: 0.15s; } .svc-hero-main > *:nth-child(3) { animation-delay: 0.25s; } .svc-hero-main > *:nth-child(4) { animation-delay: 0.35s; } .svc-crumb { display: flex; align-items: center; gap: 0.5rem; color: var(--steel); margin-bottom: 1.6rem; } .svc-crumb a { color: var(--silver); transition: color 0.3s ease; } .svc-crumb a:hover { color: var(--white); } .svc-crumb .crumb-current { color: var(--champagne); } .svc-hero-title { /* Même police que le titre du hero de l'accueil, pour que les deux entrées de site aient le même poids typographique. */ margin-bottom: 1.6rem; max-width: 19ch; /* Un mot long casse plutôt que de déborder sur un écran étroit */ } .svc-hero-title .hl { color: var(--champagne); } .svc-hero-sub { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.55; color: var(--silver-light); max-width: 48ch; margin-bottom: 2.2rem; } .svc-hero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .svc-hero-micro { color: var(--steel); letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.66rem; } /* ========================================================================== LE CONSTAT : la chaîne d'une demande, et le maillon qui casse Le trait se dessine de gauche à droite (scaleX au reveal, décalé d'un maillon à l'autre), s'interrompt au maillon rompu, et ce qui suit passe en gris : la fuite se voit avant d'être lue. ========================================================================== */ .pain { padding-top: var(--section-gap-tight); padding-bottom: var(--section-gap-tight); } .pain-head { margin-bottom: clamp(2.8rem, 5vw, 4rem); } .pain-kicker { display: block; margin-bottom: 0.9rem; } .pain-title { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; max-width: 22ch; } .pain-kicker { color: var(--steel); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.62rem; font-weight: 700; } .chain { display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: chain; } .chain-step { counter-increment: chain; position: relative; padding: 3.4rem 1.6rem 0 0; } /* Le trait, porté par chaque maillon : il court de son nœud jusqu'au suivant */ .chain-step::before { content: ''; position: absolute; top: 1.05rem; left: 0; right: 0; border-top: 1px solid var(--onyx); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } .chain-step.in::before { transform: scaleX(1); } /* Rien après le dernier maillon : un trait qui file vers le bord se lirait comme une suite, alors que l'histoire s'arrête là. */ .chain-step:last-child::before { display: none; } /* Le nœud */ .chain-step::after { content: ''; position: absolute; top: calc(1.05rem - 4px); left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1px solid var(--onyx); opacity: 0; transition: opacity 0.3s ease 0.15s; } .chain-step.in::after { opacity: 1; } /* Cascade : un maillon après l'autre, la lecture suit le trait */ .chain-step:nth-child(2)::before, .chain-step:nth-child(2)::after { transition-delay: 0.14s; } .chain-step:nth-child(3)::before, .chain-step:nth-child(3)::after { transition-delay: 0.28s; } .chain-step:nth-child(4)::before, .chain-step:nth-child(4)::after { transition-delay: 0.42s; } .chain-step:nth-child(5)::before, .chain-step:nth-child(5)::after { transition-delay: 0.56s; } .chain-tag { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); margin-bottom: 0.7rem; } .chain-step p { font-size: 1rem; line-height: 1.45; color: var(--onyx); max-width: 20ch; } .chain-step > * { position: relative; z-index: 1; } /* Le maillon rompu : le trait qui y mène est interrompu, le nœud devient un losange champagne, l'intitulé passe en gras. */ .chain-break::before { border-top-style: dashed; border-top-color: var(--champagne); } .chain-break::after { width: 11px; height: 11px; top: calc(1.05rem - 5px); border-radius: 0; transform: rotate(45deg); background: var(--champagne); border-color: var(--champagne); } .chain-break .chain-tag { color: var(--onyx); background: var(--champagne); display: inline-block; padding: 0.2rem 0.5rem; border-radius: 2px; } .chain-break p { font-weight: 700; } /* Après la rupture : l'étape a lieu, mais sans vous. */ .chain-lost::after { background: var(--paper); border-color: var(--silver-dark); } .chain-lost p, .chain-lost .chain-tag { color: var(--silver-dark); } /* ---------- L'état d'arrivée ---------- Le contrepoids de la chaîne. Elle montre comment le lecteur échoue ; sans cette bande, il n'a nulle part où se voir réussir, et une menace sans issue fait fermer l'onglet au lieu de faire appeler. Objet volontairement différent de tout ce qui précède : la chaîne est une grille à nœuds, le verdict un filet champagne à gauche, ceci est une bande pleine à deux colonnes. Ne pas en refaire une deuxième chaîne : l'erreur a déjà été commise sur la page référencement, et elle se voit tout de suite. ========================================================================== */ .pain-after { display: grid; grid-template-columns: 11rem 1fr; gap: 1.4rem 2rem; align-items: baseline; margin-top: clamp(1.6rem, 3vw, 2.2rem); padding: 1.5rem 1.6rem 1.6rem; background: var(--white); border-radius: var(--card-radius); } .pain-after-tag { color: var(--steel); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .pain-after-line { font-size: clamp(0.98rem, 1.6vw, 1.1rem); line-height: 1.6; color: var(--anthracite); max-width: 68ch; } .pain-after-line b { color: var(--onyx); font-weight: 700; } /* Sur fond sombre, la bande s'inverse : c'est la surface qui change, pas le dispositif. */ .dark .pain-after { background: rgba(255, 255, 255, 0.04); } .dark .pain-after-line { color: var(--silver); } .dark .pain-after-line b { color: var(--white); } @media (max-width: 700px) { .pain-after { grid-template-columns: 1fr; gap: 0.7rem; } } .pain-verdict { margin-top: clamp(2.4rem, 4vw, 3.2rem); font-size: clamp(1.05rem, 1.9vw, 1.3rem); font-weight: 500; line-height: 1.45; max-width: 54ch; border-left: 2px solid var(--champagne); padding-left: 1.2rem; } /* ========================================================================== CE QUE NOUS PILOTONS : six cartes, une ligne chacune ========================================================================== */ .lever-head { display: flex; align-items: baseline; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); } .lever-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; max-width: 22ch; } .lever-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); } .lever-card { position: relative; display: flex; flex-direction: column; padding: 1.8rem 1.7rem 1.9rem; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); overflow: hidden; } /* Le filet et le livrable s'alignent d'une carte à l'autre, quel que soit le nombre de lignes du texte au-dessus. */ .lever-card .tool-row { margin-top: auto; } /* Voile champagne qui monte au survol */ .lever-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(200, 182, 143, 0) 0%, rgba(200, 182, 143, 0.1) 100%); transform: scaleY(0); transform-origin: 0 100%; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); pointer-events: none; } .lever-card:hover::before { transform: scaleY(1); } .lever-card > * { position: relative; z-index: 1; } .lever-num { display: block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; color: var(--steel); margin-bottom: 1.1rem; transition: color 0.35s ease; } .lever-card:hover .lever-num { color: var(--champagne); } .lever-title { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.5rem; } .lever-card p { color: var(--silver); font-size: 0.9rem; line-height: 1.55; margin-bottom: 1.2rem; } /* ---------- Logos d'outils ---------- Les fichiers vivent dans assets/img/logos/ (voir le README qui s'y trouve). Tant qu'un logo manque, c'est _placeholder.svg qui s'affiche : la mise en page ne bouge pas et le nom de l'outil reste lisible à côté. Le filtre force le monochrome clair, donc peu importe que l'agence dépose des fichiers en couleur ou non, l'ensemble tient sur fond sombre. */ .tool-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); opacity: 0.6; transition: opacity 0.35s ease; } .tool-row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 1rem; } /* Certaines marques n'autorisent pas la reprise de leur logo par un tiers (LinkedIn, Adobe). Leur nom est écrit, plutôt qu'un logo approximatif. */ .tool-chip { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); border: 1px solid var(--line-dark); border-radius: 999px; padding: 0.25rem 0.6rem; transition: color 0.35s ease, border-color 0.35s ease; } /* Sur la page agence, la puce n'est plus une étiquette d'outil mais un lien de vérification : elle doit se voir cliquable, et le rester au clavier. */ a.tool-chip { display: inline-block; } a.tool-chip:hover, a.tool-chip:focus-visible { color: var(--champagne); border-color: var(--champagne); } .lever-card:hover .tool-chip { color: var(--white); border-color: var(--steel); } .lever-card:hover .tool-logo { opacity: 1; } .lever-out { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--pearl); padding-top: 0.85rem; border-top: 1px solid var(--line-dark); } a.lever-out { transition: color 0.3s ease; } a.lever-out:hover { color: var(--champagne); } /* Trois indicateurs par cas, sur /resultats. Le nombre porte, pas la pastille : .tool-chip (pensé pour un nom d'outil sur une ligne) écrasait des chiffres qui devaient être le premier élément lu de la carte. */ /* Le bloc chiffré n'existe que là où il y a un vrai chiffre. Un mot posé dans la case du nombre (« Ads », « Dédiée », « Continu ») ressemblait à une métrique sans en être une, et remplissait trois cases pour ne rien dire. Les cartes sans chiffre portent .result-done à la place : une ligne qui dit ce qui a été livré, en texte courant. grid-auto-flow plutôt que trois colonnes fixes : une carte porte un, deux ou trois chiffres selon ce que le dossier donne, et les colonnes se partagent la largeur en conséquence au lieu de laisser un trou. */ /* Le filet et tout ce qui le suit vivent dans .result-zone. C'est elle, et elle seule, qui porte le trait et la poussée vers le bas : sans ce conteneur, le filet tombait à une hauteur différente sur chaque carte, de 121 à 176 px du bas selon que la carte portait une ligne de texte, un bloc de chiffres, ou les deux. La hauteur minimale cale le trait à la même hauteur sur toute une rangée, quel que soit ce qu'il y a en dessous. */ .result-zone { margin: auto 0 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-dark); min-height: 5.4rem; } .result-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.7rem 0.5rem; } .result-stats div { display: flex; flex-direction: column; gap: 0.25rem; } .result-done { margin: 0; font-size: 0.72rem; line-height: 1.5; color: var(--silver); } /* Une carte porte des chiffres OU une ligne, jamais les deux : c'est ce qui permet au filet de tomber à la même hauteur d'une carte à l'autre. Cette règle reste au cas où les deux se retrouveraient un jour ensemble, mais l'alignement ne tiendrait plus. */ .result-stats + .result-done { margin-top: 0.85rem; } .result-stat-v { font-family: var(--font-mono); font-weight: 800; font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--champagne); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1; } .result-stat-l { font-size: 0.66rem; color: var(--silver); line-height: 1.3; } /* Slider d'outils : chaque entrée est un logo suivi de son nom. */ .dark .marquee { border-color: var(--line-dark); } .marquee-tools .marquee-group { gap: 2.4rem; padding-right: 2.4rem; } .marquee-tool { display: inline-flex; align-items: center; gap: 0.6rem; } .marquee-tool .tool-logo { width: 22px; height: 22px; opacity: 0.72; } .marquee-tools:hover .tool-logo { opacity: 1; } .tool-name { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; white-space: nowrap; } /* ========================================================================== BANDEAU OUTIL Une carte noire posée sur le papier, entre le constat et les leviers. Elle propose au visiteur de chiffrer lui-même ce que le constat vient de lui décrire, sans rendez-vous. Elle ne concurrence pas les liens vers #devis : la promesse est plus petite, l'engagement moindre, et la carte ne prend qu'une fraction de la hauteur d'une vraie section. C'est une porte de côté pour ceux qui ne sont pas prêts à appeler, pas une deuxième porte d'entrée. ========================================================================== */ .toolband { padding-top: 0; padding-bottom: var(--section-gap-tight); } .toolband-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; position: relative; overflow: hidden; background: var(--onyx); color: var(--white); --steel: var(--silver-dark); border-radius: var(--card-radius); padding: clamp(1.8rem, 4vw, 2.8rem); } /* Le même halo que le hero des pages de service, en plus discret : il relie la carte au reste de la page sans attirer l'oeil plus que le cas client. */ .toolband-card::after { content: ''; position: absolute; width: 26rem; height: 26rem; right: -8rem; top: -12rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 182, 143, 0.14), transparent 70%); pointer-events: none; } .toolband-main, .toolband-facets { position: relative; z-index: 1; } .toolband-tag { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--onyx); background: var(--champagne); border-radius: 2px; padding: 0.22rem 0.6rem; margin-bottom: 1rem; } .toolband-title { font-size: clamp(1.3rem, 2.6vw, 1.95rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 0.9rem; max-width: 22ch; } .toolband-text { color: var(--silver); font-size: 0.93rem; line-height: 1.6; max-width: 58ch; margin-bottom: 1.6rem; } .toolband-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; } .toolband-micro { color: var(--steel); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; } .toolband-facets { border-top: 1px solid var(--line-dark); } /* Numéro en repère absolu, pas en colonne de grille : en grille, une amorce en gras dans la facette devenait un troisième élément de grille et partait à la ligne. Même correction que .form-assure. */ .toolband-facets li { position: relative; padding: 0.85rem 0 0.85rem 2.4rem; border-bottom: 1px solid var(--line-dark); font-size: 0.86rem; line-height: 1.45; color: var(--silver-light); } .toolband-facets li > span { position: absolute; left: 0; top: 1.05rem; } .toolband-facets span { color: var(--champagne); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; } /* Capture courte, dans la carte noire : une seule adresse contre un document. Le nom, l'entreprise et le téléphone sont demandés au formulaire d'audit, pas ici : sur un aimant à leads, chaque champ supplémentaire est un visiteur qui referme la page. Les champs reprennent .field, déjà taillé pour le fond sombre, il n'y a donc que la mise en ligne à décrire. */ .magnet-form { display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.85rem; } /* L'attribut hidden ne suffit pas contre un display: flex déclaré ici. */ .magnet-form[hidden] { display: none; } .magnet-form .field { flex: 1 1 17rem; margin-bottom: 0; } .magnet-form .btn { flex: 0 0 auto; background: var(--champagne); color: var(--onyx); border-color: var(--champagne); } .magnet-form .btn:hover { background: var(--white); border-color: var(--white); transform: translateY(-2px); } .magnet-ok { display: flex; align-items: center; gap: 0.6rem; color: var(--white); font-size: 0.9rem; line-height: 1.5; max-width: 46ch; } .magnet-ok[hidden] { display: none; } /* Passerelle discrète dans la section de conversion : le visiteur qui n'est pas prêt à demander un audit repart avec un chiffre au lieu de repartir. */ .form-alt-tool { margin: -0.6rem 0 1.6rem; color: var(--steel); font-size: 0.82rem; line-height: 1.6; } .form-alt-tool a { color: var(--silver-light); border-bottom: 1px solid var(--steel); padding-bottom: 1px; transition: color 0.3s ease, border-color 0.3s ease; } .form-alt-tool a:hover { color: var(--champagne); border-bottom-color: var(--champagne); } /* ========================================================================== CAS CLIENT : une seule section (contexte, 3 décisions, chiffres, verbatim) ========================================================================== */ .case-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .case-title { font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin: 1rem 0 1.1rem; } .case-lede { color: var(--anthracite); line-height: 1.6; max-width: 58ch; margin-bottom: 2rem; } /* La largeur est portée par la liste, pas par les

: sinon le filet du haut court plus large que ceux des items et l'alignement se voit. */ .case-moves { counter-reset: mv; border-top: 1px solid var(--line-light); max-width: 68ch; } .case-moves li { counter-increment: mv; position: relative; padding: 1.15rem 0 1.15rem 3.1rem; border-bottom: 1px solid var(--line-light); font-size: 0.95rem; line-height: 1.55; color: var(--anthracite); } .case-moves li::before { content: '0' counter(mv); position: absolute; left: 0; top: 1.15rem; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: var(--onyx); background: var(--champagne); border-radius: 2px; padding: 0.2rem 0.45rem; } .case-moves b { color: var(--onyx); font-weight: 700; } /* L'aside n'est plus la carte : elle empile la carte blanche et, dessous, le logo du client posé à même le fond de la section. */ .case-id { display: grid; } .case-id-card { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--card-radius); overflow: hidden; } .case-id-media img { width: 100%; height: 190px; object-fit: cover; object-position: 50% 42%; } .case-id dl { padding: 0.4rem 1.4rem 1.1rem; } /* Ce faible retrait en tête suppose une photo juste au-dessus. Le cas Mon Jouet Montessori n'en a pas : la liste se retrouverait collée au bord. */ .case-id-card:not(:has(.case-id-media)) dl { padding-top: 1.2rem; } .case-id dl > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 0.7rem 0; align-items: baseline; border-bottom: 1px solid var(--line-light); } .case-id dl > div:last-child { border-bottom: 0; } .case-id dt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); } .case-id dd { font-size: 0.86rem; font-weight: 500; } /* Mention courte des clients sans cas détaillé (resultats.html) */ .other-clients-lede { max-width: 66ch; margin: 0 auto; text-align: center; color: var(--anthracite); line-height: 1.6; } /* Tableau avant / après, cinq lignes */ .ba-table { border-top: 1px solid var(--line-light); } .ba-head, .ba-row { display: grid; grid-template-columns: 1.7fr 0.8fr 0.8fr 1.3fr; gap: 1.2rem; align-items: center; padding: 0.95rem 0.5rem; border-bottom: 1px solid var(--line-light); } .ba-head { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--steel); padding-top: 0.6rem; padding-bottom: 0.6rem; } .ba-row { transition: background 0.3s ease, padding-left 0.3s ease; } .ba-row:hover { background: var(--white); padding-left: 1.1rem; } .ba-metric { font-weight: 700; font-size: 0.95rem; } .ba-before, .ba-after { font-variant-numeric: tabular-nums; font-size: 0.96rem; } .ba-before { color: var(--steel); } .ba-after { font-weight: 800; } /* display: block indispensable : .ba-track est un , donc inline par défaut, et sa hauteur de 6px serait ignorée. */ .ba-track { display: block; position: relative; height: 6px; background: var(--line-light); border-radius: 999px; overflow: hidden; } .ba-fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); background: var(--champagne); border-radius: 999px; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); } .ba-row.in .ba-fill { transform: scaleX(1); } .ba-delta { display: block; margin-top: 0.4rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; color: var(--steel); } .ba-caption { color: var(--steel); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.6rem; margin-bottom: 0.9rem; } /* La ligne la plus convaincante de la page : elle explique d'où vient le gain. Elle était en gris 12px sous le tableau, personne ne la lisait. */ .case-insight { margin-top: 1.8rem; border-left: 2px solid var(--champagne); padding-left: 1.2rem; font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.5; color: var(--anthracite); max-width: 56ch; } .case-insight b { display: block; margin-top: 0.35rem; color: var(--onyx); font-weight: 700; } /* Verbatim + relance */ .case-quote { display: grid; grid-template-columns: 3fr 6fr auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2.2rem, 4vw, 3rem); border-top: 1px solid var(--line-light); } /* Variante sans photo : le cas de la boutique en ligne (référencement) n'a aucune image du dossier qui la représente. Plutôt que d'y coller une photo qui montre autre chose, la citation prend la largeur. Déclarée APRÈS la règle de base : à spécificité égale, c'est la dernière qui l'emporte. */ .case-quote-nomedia { grid-template-columns: minmax(0, 1fr) auto; } .case-quote-media { border-radius: var(--card-radius); overflow: hidden; } /* Le portrait est un format vertical : une boîte trop basse le rognerait au point de perdre la silhouette et la porte ouverte qui l'éclaire. */ .case-quote-media img { width: 100%; height: 260px; object-fit: cover; object-position: 50% 30%; } .case-quote blockquote p { font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; } .case-quote blockquote footer { margin-top: 0.9rem; color: var(--steel); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; } /* ========================================================================== OFFRE + DÉMARRAGE ========================================================================== */ .offer-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .offer-title { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -0.025em; margin: 1rem 0 1.5rem; } .offer-list { border-top: 1px solid var(--line-light); margin-bottom: 2.6rem; } .offer-list li { padding: 0.95rem 0.3rem; border-bottom: 1px solid var(--line-light); font-size: 0.96rem; } .steps-title { display: block; color: var(--steel); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.6rem; margin-bottom: 0.9rem; } .steps ol { counter-reset: st; display: grid; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); border-radius: var(--card-radius); overflow: hidden; } .steps li { counter-increment: st; background: var(--white); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.1rem; font-size: 0.92rem; } .steps li::before { content: '0' counter(st); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: var(--steel); margin-right: 0.9rem; } .steps li b { flex: 1; font-weight: 700; } .steps li span { color: var(--steel); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .offer-card { background: var(--onyx); color: var(--white); --steel: var(--silver-dark); border-radius: var(--card-radius); padding: 1.9rem 1.8rem 2rem; position: sticky; top: 7rem; } .offer-card-tag { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--onyx); background: var(--champagne); border-radius: 2px; padding: 0.2rem 0.55rem; margin-bottom: 1.3rem; } /* Les tarifs sont centralisés sur la page Offres : cette carte situe la prestation et renvoie, elle ne chiffre pas. */ .offer-formats { font-size: 1.05rem; line-height: 1.5; color: var(--silver-light); } .offer-formats b { color: var(--white); font-weight: 700; } .offer-alt { display: block; margin-top: 0.9rem; text-align: center; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); transition: color 0.3s ease; } .offer-alt:hover { color: var(--champagne); } .offer-terms { margin: 1.5rem 0; border-top: 1px solid var(--line-dark); } .offer-terms > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-dark); } .offer-terms dt { color: var(--steel); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; } .offer-terms dd { text-align: right; font-weight: 700; font-size: 0.84rem; } .offer-card .btn { width: 100%; justify-content: center; } .offer-guard { margin-top: 1.2rem; color: var(--silver); font-size: 0.76rem; line-height: 1.6; } .offer-guard b { color: var(--white); } /* ========================================================================== FAQ : liste seule, sans visuel, pour rester compacte ========================================================================== */ /* ========================================================================== CONVERSION ========================================================================== */ .form-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .form-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 1rem 0 1.8rem; max-width: 18ch; } .form-assure { border-top: 1px solid var(--line-dark); margin-bottom: 1.8rem; } /* Marqueur en repère absolu, pas en colonne de grille : en grille, le moindre dans la puce devenait un élément de grille distinct et partait à la ligne. Même motif que .key-points, le texte coule normalement. */ .form-assure li { padding: 0.8rem 0; border-bottom: 1px solid var(--line-dark); font-size: 0.9rem; line-height: 1.5; color: var(--pearl); } /* Preuve au point de décision : les certifications se lisent à hauteur du formulaire, pas dans le pied de page. */ .form-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; } .form-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pearl); border: 1px solid var(--line-dark); border-radius: 999px; padding: 0.32rem 0.8rem 0.32rem 0.6rem; white-space: nowrap; } /* Logo réel du partenaire (Simple Icons, même méthode que .tool-logo) : la pastille passait pour un simple libellé, illisible au moment précis où un visiteur hésitant cherche un dernier repère avant de laisser ses coordonnées. */ .form-badge-logo { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); } .form-direct { display: flex; gap: 1.6rem; flex-wrap: wrap; } .form-direct a { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; border-bottom: 1px solid rgba(255, 255, 255, 0.28); padding-bottom: 2px; transition: border-color 0.3s ease, color 0.3s ease; } .form-direct a:hover { color: var(--champagne); border-bottom-color: var(--champagne); } /* Widget carte (contact.html) : même rayon que .founder-media et .agency-tile. Le style couleur par défaut de Google Maps (parcs verts, eau bleue) jure sur fond --onyx ; grayscale + invert donne une carte sombre monochrome qui reste de la même famille que le reste de .devis. */ .contact-map { margin-top: 1.6rem; border-radius: 2px; overflow: hidden; filter: grayscale(1) invert(0.92) contrast(0.86); } .contact-map iframe { display: block; width: 100%; height: 260px; border: 0; } .form-card { position: relative; background: var(--anthracite); border: 1px solid var(--line-dark); border-radius: var(--card-radius); padding: clamp(1.5rem, 3vw, 2.2rem); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.05rem; } .field label { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver); } .field label .req { color: var(--champagne); } .field input { font-family: var(--font-display); font-size: 0.95rem; color: var(--white); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-dark); border-radius: 2px; padding: 0.78rem 0.9rem; width: 100%; transition: border-color 0.3s ease, background 0.3s ease; } .field input::placeholder { color: var(--steel); } .field input:focus { outline: none; border-color: var(--champagne); background: rgba(255, 255, 255, 0.07); } .field-consent { flex-direction: row; align-items: flex-start; gap: 0.7rem; } /* La case à cocher garde le rendu natif (accent-color suffit) : les styles de champ texte ci-dessus lui donneraient un fond et une bordure en double. */ .field-consent input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.15rem; padding: 0; background: none; border: 0; accent-color: var(--champagne); } .field-consent label { font-family: var(--font-display); font-size: 0.8rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--silver); line-height: 1.5; } .form-submit { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.3rem; } .form-submit .btn { background: var(--champagne); color: var(--onyx); border-color: var(--champagne); } .form-submit .btn:hover { background: var(--white); border-color: var(--white); transform: translateY(-2px); } .form-micro { font-size: 0.6rem; letter-spacing: 0.08em; color: var(--steel); } /* État de confirmation, superposé à la carte. visibility plutôt que display : on ne peut pas animer une opacité depuis display: none. */ .form-ok { position: absolute; inset: 0; display: flex; visibility: hidden; pointer-events: none; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.9rem; padding: clamp(1.5rem, 3vw, 2.2rem); background: var(--anthracite); border-radius: var(--card-radius); opacity: 0; transition: opacity 0.45s ease; } .form-card.is-sent .form-ok { visibility: visible; pointer-events: auto; opacity: 1; } .form-card.is-sent form { visibility: hidden; } .form-ok-mark { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--onyx); background: var(--champagne); border-radius: 2px; padding: 0.25rem 0.6rem; } .form-ok h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; max-width: 24ch; } .form-ok p { color: var(--silver); font-size: 0.9rem; max-width: 44ch; } .form-ok p a { color: var(--champagne); } /* ========================================================================== BARRE D'ACTION COLLANTE (≤ 1100px) Enfant direct de : hors de tout ancêtre à clip-path, sinon le position: fixed serait piégé par .architecture. ========================================================================== */ .sticky-cta { position: fixed; inset: auto 0 0 0; z-index: 90; display: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem var(--pad-x); background: rgba(13, 13, 13, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line-dark); color: var(--white); --steel: var(--silver-dark); transform: translateY(110%); transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .sticky-cta.is-visible { transform: none; } .sticky-cta-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; } .sticky-cta-text b { font-size: 0.86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-cta-text span { font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); } .sticky-cta .btn { padding: 0.72rem 1.15rem; font-size: 0.68rem; flex-shrink: 0; } /* ========================================================================== PAGE COURANTE DANS LA NAVIGATION ========================================================================== */ .nav-menu a[aria-current="page"], .drawer-group a[aria-current="page"], .footer-col a[aria-current="page"] { color: var(--champagne); } .nav-menu a[aria-current="page"]::before, .drawer-group a[aria-current="page"]::before, .footer-col a[aria-current="page"]::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--champagne); margin-right: 0.5rem; vertical-align: middle; } /* ========================================================================== LES MOTEURS DE RÉPONSE (deuxième mouvement du constat, page référencement) Ce bloc vient juste après la chaîne, dans la même section claire, et ne doit surtout pas lui ressembler. Une chaîne dessine un parcours ; ici le propos est qu'il n'y en a plus : la réponse arrive d'un bloc et nomme trois entreprises. D'où un objet unique, sans trait courant, sans nœud, sans étape. Le bloc de réponse est blanc et non onyx, alors que le fond de section est déjà clair. Deux raisons : la bande .toolband qui suit pose une carte onyx sur ce même papier, et un deuxième aplat onyx à cette distance ferait clignoter la page ; et un document caviardé se lit sur du blanc, pas sur du noir. Les barres grises disent alors ce qu'elles sont : des noms retirés. Les seuls numéros ici sont ceux des citations, parce qu'une réponse générée numérote ses sources. C'est une information, pas une décoration. ========================================================================== */ .geo-shift { margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--line-light); } .geo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .geo-title { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1.5rem; } .geo-p { color: var(--anthracite); font-size: 1rem; line-height: 1.65; max-width: 46ch; margin-bottom: 1.1rem; } .geo-p i { font-style: italic; } /* La phrase à retenir. Même repère que .pain-verdict quelques lignes plus haut : c'est voulu, les deux mouvements se referment de la même façon. */ .geo-verdict { margin-top: clamp(1.6rem, 3vw, 2.2rem); padding-left: 1.2rem; border-left: 2px solid var(--champagne); font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 500; line-height: 1.5; max-width: 42ch; } /* ---------- Le bloc de réponse ---------- Pas une capture d'écran, pas le décor d'un produit existant : un texte, ses citations, et la ligne qui manque. */ .geo-answer { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--card-radius); padding: clamp(1.4rem, 3vw, 2rem); } .geo-question { font-size: clamp(1.05rem, 1.9vw, 1.2rem); font-weight: 700; line-height: 1.45; letter-spacing: -0.015em; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line-light); } .geo-question::before { content: '« '; color: var(--steel); } .geo-question::after { content: ' »'; color: var(--steel); } .geo-reply { color: var(--anthracite); font-size: 0.95rem; line-height: 1.8; } /* Le nom d'un concurrent, retiré. Le mot reste dans le flux : il donne sa largeur à la barre et se lit dans un lecteur d'écran, seule l'encre disparaît. Ne pas remplacer par une largeur fixe, le texte serait perdu. */ .geo-redact { color: transparent; background: rgba(13, 13, 13, 0.13); border-radius: 2px; padding: 0 0.2em; user-select: none; } .geo-cites { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line-light); } .geo-cites-title { display: block; color: var(--steel); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.8rem; } .geo-cites li { display: flex; align-items: center; gap: 0.85rem; padding: 0.62rem 0; font-size: 0.92rem; border-bottom: 1px solid var(--line-light); } .geo-cites li:last-child { border-bottom: 0; } /* La source d'où le modèle tire le nom. Sans elle, chaque ligne s'arrêtait au tiers de la largeur et la liste flottait dans un panneau vide. Plus pâle que le nom : c'est la référence, pas l'entreprise. */ .geo-redact-src { background: rgba(13, 13, 13, 0.07); font-size: 0.82rem; } .geo-cite-n { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border: 1px solid var(--line-light); border-radius: 2px; font-size: 0.62rem; font-weight: 700; color: var(--steel); } /* La ligne manquante. Le champagne ne passe pas le contraste en texte sur du blanc : il tient la case vide et le filet, le mot reste en onyx. */ .geo-cite-empty { border-style: dashed; border-color: var(--champagne); background: rgba(200, 182, 143, 0.12); } .geo-cite-absent { font-weight: 700; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1100px) { .sticky-cta { display: flex; } /* La barre collante est fixée en bas de l'écran et recouvre la fin de la page : le dernier bloc du pied de page doit lui rendre sa hauteur. Ce bloc est .footer-giant depuis qu'il a été posé sur les 22 pages le 2026-09-08 ; c'était .footer-legal avant, et laisser la règle sur lui aurait fait passer le mot géant sous la barre. */ body.page-service .footer-giant { padding-bottom: calc(4.5rem + clamp(1.5rem, 3vw, 3rem)); } .lever-grid { grid-template-columns: repeat(2, 1fr); } /* Cinq colonnes deviennent illisibles : la chaîne se replie sur deux rangs, le trait de la première rangée s'arrête net au bord. */ .chain { grid-template-columns: repeat(3, 1fr); row-gap: 2.4rem; } .geo-grid { grid-template-columns: 1fr; } .geo-p, .geo-verdict { max-width: 60ch; } } @media (max-width: 860px) { .svc-hero { padding-top: 7rem; } .svc-crumb { display: none; } /* La chaîne bascule à la verticale : le trait descend le long de la marge, même lecture, même rupture. */ .chain { grid-template-columns: 1fr; } .chain-step { padding: 0 0 1.9rem 2.1rem; } .chain-step:last-child { padding-bottom: 0; } .chain-step::before { top: 0.45rem; bottom: 0; left: 4px; right: auto; border-top: 0; border-left: 1px solid var(--onyx); transform: scaleY(0); transform-origin: 50% 0; } .chain-step.in::before { transform: scaleY(1); } .chain-step:last-child::before { display: none; } .chain-step::after { top: 0.2rem; } .chain-break::before { border-left-style: dashed; border-left-color: var(--champagne); } .chain-step p { max-width: none; } .lever-grid { grid-template-columns: 1fr; } .case-head, .offer-grid, .form-grid, .toolband-card { grid-template-columns: 1fr; } .offer-card { position: static; } .case-quote { grid-template-columns: 1fr; align-items: start; } .case-quote-media img { height: 220px; } .form-row { grid-template-columns: 1fr; gap: 0; } /* Le tableau passe en deux colonnes : la barre n'a plus la place d'être lisible, le delta prend le relais. */ .ba-head { display: none; } .ba-row { grid-template-columns: 1fr auto; row-gap: 0.3rem; padding: 1rem 0.3rem; } .ba-metric { grid-column: 1 / -1; } .ba-before::before { content: 'AVANT · '; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; } .ba-after { text-align: right; } .ba-after::before { content: 'APRÈS · '; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; font-weight: 400; color: var(--steel); } .ba-viz { grid-column: 1 / -1; } } @media (max-width: 520px) { .case-id dl > div { grid-template-columns: 1fr; gap: 0.15rem; } } @media (prefers-reduced-motion: reduce) { .ba-fill { transform: scaleX(1); } .chain-step::before { transform: none; } .chain-step::after { opacity: 1; } .svc-hero::after { animation: none; } .svc-hero-main > * { opacity: 1; animation: none; } .sticky-cta { transition: none; } } /* ========================================================================== BANDEAU D'OUVERTURE SOMBRE, pour les pages qui n'ont pas de vrai .svc-hero (contact, pages légales). Le header reste fixe et transparent tant que la page n'a pas défilé (.header, texte blanc, cf. style.css) : la section posée juste dessous doit donc rester sombre, jamais .section.light, sinon le header devient illisible et .svc-crumb (réglé pour du texte clair sur fond sombre) disparaît. Plus court qu'un .svc-hero : pas de titre géant, ces pages se lisent d'un coup. ========================================================================== */ .page-intro { background: var(--onyx); color: var(--white); --steel: var(--silver-dark); padding: var(--page-top) var(--pad-x) clamp(3rem, 5vw, 5rem); position: relative; overflow: hidden; } .page-intro::before { content: ''; position: absolute; inset: auto -10% -60% auto; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; background: radial-gradient(circle, rgba(200, 182, 143, 0.16), transparent 70%); pointer-events: none; } .page-intro-inner { position: relative; z-index: 1; } .page-intro h1 { max-width: 24ch; } .page-intro h1 .hl { color: var(--champagne); } .page-intro p { margin-top: 1.1rem; max-width: 52ch; color: var(--silver); font-size: 1.05rem; line-height: 1.6; } /* ========================================================================== PAGES LÉGALES : mentions, confidentialité, cookies. Une seule colonne de texte, pas de composant de conversion propre : la sortie se fait par la navigation, pas par un CTA au milieu du texte. ========================================================================== */ .legal-body { max-width: 46rem; margin: 0 auto; padding: clamp(1rem, 4vw, 2rem) var(--pad-x) clamp(4rem, 8vw, 6rem); } .legal-body h2 { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-top: 2.6rem; margin-bottom: 0.9rem; } .legal-body h2:first-of-type { margin-top: 0.6rem; } .legal-body p, .legal-body li { color: var(--anthracite); line-height: 1.65; margin-bottom: 0.9rem; } .legal-body ul { padding-left: 1.2rem; } .legal-body a { color: inherit; text-decoration-color: var(--silver-dark); } .legal-body .legal-updated { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); margin-bottom: 0; } /* ========================================================================== LE SEUIL D'ENGAGEMENT (page Méthode) Cinq étapes, mais pas cinq blocs équivalents : trois sont gratuites, deux engagent. La composition 3 | seuil | 2 rend visible ce que dit le titre, ce qu'une grille de cinq cartes identiques ne montrait nulle part. ========================================================================== */ .gate { display: grid; grid-template-columns: 1.25fr auto 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .gate-zone { padding-top: clamp(1.3rem, 2.2vw, 2.1rem); } .gate-zone-tag { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); padding-bottom: 0.9rem; border-bottom: 1px solid var(--line-dark); margin-bottom: 0.4rem; } .gate-zone-engaged { background: linear-gradient(to right, rgba(200, 182, 143, 0.06), transparent 70%); padding-left: clamp(1rem, 2vw, 1.8rem); padding-bottom: clamp(1.3rem, 2.2vw, 2.1rem); } .gate-zone-engaged .gate-zone-tag { color: var(--champagne); border-bottom-color: rgba(200, 182, 143, 0.4); } .gate-steps { list-style: none; margin: 0; padding: 0; } .gate-step { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2vw, 1.8rem); align-items: start; padding: 1.5rem 0; border-bottom: 1px solid var(--line-dark); } .gate-step:last-child { border-bottom: 0; } /* Chiffre ajouré, même traitement que les numéros de l'accueil */ .gate-num { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 850; line-height: 0.85; color: transparent; -webkit-text-stroke: 1px var(--steel); transition: -webkit-text-stroke-color 0.35s ease; } .gate-zone-engaged .gate-num { -webkit-text-stroke: 1px var(--champagne); } .gate-step:hover .gate-num { -webkit-text-stroke-color: var(--white); } .gate-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.35rem; } .gate-body p { font-size: 0.88rem; line-height: 1.55; color: var(--silver); max-width: 46ch; } /* Le seuil : un filet champagne et son étiquette, à la verticale */ .gate-line { position: relative; align-self: stretch; width: 1px; min-height: 100%; background: linear-gradient(to bottom, transparent, var(--champagne) 7%, var(--champagne) 93%, transparent); display: flex; justify-content: center; align-items: center; } .gate-line-label { white-space: nowrap; writing-mode: vertical-rl; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); background: var(--onyx); padding: 0.7rem 0.15rem; } /* Sous 900px la composition se déplie : les deux zones s'empilent et le seuil redevient un filet horizontal, étiquette à plat. */ @media (max-width: 900px) { .gate { grid-template-columns: 1fr; gap: 0; } .gate-line { width: 100%; min-height: 0; height: 1px; background: linear-gradient(to right, transparent, var(--champagne) 7%, var(--champagne) 93%, transparent); margin: 2.2rem 0; align-items: center; } .gate-line-label { writing-mode: horizontal-tb; position: static; padding: 0 0.9rem; } /* Ne pas rabaisser le retrait haut ici : le fond teinté viendrait toucher le libellé, exactement le défaut corrigé sur grand écran. */ .gate-zone-engaged { padding-left: 1rem; padding-right: 1rem; } } /* ========================================================================== GALERIE AGENCE (notre-agence.html) : mosaïque de photos réelles, prises sur place. grid-auto-flow: dense comble les trous laissés par les cases larges (.agency-tile-big, .agency-tile-wide) quel que soit leur ordre dans le HTML. ========================================================================== */ .agency-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 2px; background: var(--line-dark); } .agency-tile { position: relative; overflow: hidden; background: var(--onyx); } .agency-tile img, .agency-tile video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .agency-tile:hover img, .agency-tile:hover video { transform: scale(1.05); } .agency-tile-big { grid-column: span 2; grid-row: span 2; } .agency-tile-wide { grid-column: span 2; } .agency-tile-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem 1rem; background: linear-gradient(to top, rgba(13, 13, 13, 0.85), transparent); color: var(--white); font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; } .agency-tile:hover .agency-tile-caption, .agency-tile:focus-within .agency-tile-caption { opacity: 1; transform: translateY(0); } /* ========================================================================== REGISTRE DE CONTRÔLE (page agence) Quatre lignes pleine largeur, un repère, un lien de vérification à droite. Pourquoi pas la grille de cartes du reste du site : ces quatre items ne sont pas des prestations parallèles qu'on compare, ce sont des vérifications qu'on va faire une par une. Une liste le dit ; une grille de trois colonnes ne le disait pas, et laissait un quatrième élément seul sur son rang. ========================================================================== */ .verif { border-top: 1px solid var(--line-dark); } .verif-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem clamp(1.4rem, 4vw, 3.5rem); align-items: start; padding: clamp(1.4rem, 3vw, 2rem) 0.2rem; border-bottom: 1px solid var(--line-dark); } .verif-title { font-size: clamp(1.02rem, 1.9vw, 1.22rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.45rem; } .verif-main p { color: var(--silver); font-size: 0.95rem; line-height: 1.6; max-width: 78ch; } .verif-main a { color: var(--silver-light); border-bottom: 1px solid var(--line-dark); transition: color 0.3s ease, border-color 0.3s ease; } .verif-main a:hover, .verif-main a:focus-visible { color: var(--champagne); border-bottom-color: var(--champagne); } .verif-link { align-self: center; flex-shrink: 0; white-space: nowrap; color: var(--champagne); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .verif-link:hover, .verif-link:focus-visible { border-bottom-color: var(--champagne); } @media (max-width: 760px) { /* Le lien passe sous le texte plutôt que de comprimer la colonne centrale. */ .verif-row { grid-template-columns: minmax(0, 1fr); } .verif-link { align-self: start; white-space: normal; } } /* Pastille de case vidéo dans la mosaïque. Plus aucune case ne l'utilise depuis que le b-roll est remonté dans « D'où l'on part » : la règle reste pour la prochaine vidéo qui redescendra ici. */ .agency-tile-live { position: absolute; top: 0.8rem; left: 0.8rem; display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.1em; color: var(--white); background: rgba(13, 13, 13, 0.55); border-radius: 999px; padding: 0.25rem 0.55rem 0.25rem 0.4rem; } .agency-tile-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); } @media (max-width: 860px) { .agency-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; } .agency-tile-wide { grid-column: span 2; grid-row: span 1; } } @media (max-width: 520px) { .agency-gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; } .agency-tile-big, .agency-tile-wide { grid-column: span 1; grid-row: span 1; } }