/* ==========================================================================
AIDES ÉQUILIBRE HABITAT — Page offre « Pompe à chaleur air/eau »
Adresse publique : /pac-air-eau/
GRAMMAIRE DE MISE EN PAGE — relevée dans le navigateur sur la page de
référence Carrefour Énergies, le 27/10/2026, en 1440 px et en 375 px :
conteneur ........... 1320 px (Bootstrap container-xxl), gouttière 12 px
en-tête ............. fixe, 110 px sur ordinateur, 70 px sur mobile
corps de texte ...... 16 px
titres de section ... 30 px, centrés, suivis d'un chapô centré
hero ................ bande de 550 px (ici : deux colonnes, discours à
gauche et photographie du produit à droite)
cartes .............. 380 × 892 px, rayon 16 px, bordure 1 px
rgba(0,0,0,.176), ombre 0 2px 4px rgba(0,0,0,.075),
TROIS par rangée
bande d'avantages ... aplat de couleur contenant des CARTES BLANCHES
(`rounded-3 bg-white p-3`), trois par rangée
bouton principal .... 14 px/700, rayon 4 px, hauteur 55-58 px
bouton secondaire ... fond blanc, texte coloré, 16 px/500, rayon 4 px
CE RELEVÉ RESTE EXACT ; LE PARTI PRIS, LUI, A CHANGÉ. Les proportions de
la référence tiennent, mais son vocabulaire de surface est celui de
Bootstrap : rayon de 4 px, aplats sans relief, corps de texte à 16 px.
La page a depuis son propre vocabulaire — boutons en gélule, ombres
longues teintées d'encre, corps à 17 px, titres resserrés. Les écarts
sont commentés à l'endroit où ils sont pris.
LA PALETTE RESTE CELLE D'ÉQUILIBRE HABITAT. Les valeurs ci-dessous sont
copiées des jetons de `site/index.html` : une même marque ne peut pas avoir
deux identités selon la page. Seules les PROPORTIONS sont empruntées —
jamais les couleurs, la typographie, les visuels ni les textes.
TROIS IMAGES, PAS UNE DE PLUS. La photographie du hero — l'unité
extérieure installée le long d'une maison — porte le produit et la couleur
de la page ; le logo de la marque et le logo France Rénov' (imposé par
l'arrêté du 7 juillet 2026) complètent le compte. Tout le reste est du
tracé SVG écrit dans le code : aucune icône n'est un fichier, et aucune
image décorative ne vient alourdir le chargement.
Ordre du fichier : jetons → base → composants → sections → responsive.
========================================================================== */
:root{
/* --- Couleurs : identiques à la landing principale --- */
/* PALETTE IMPOSÉE PAR LE COMMANDITAIRE, valeurs reprises telles quelles.
Chacune a été mesurée sous le texte qu'elle porte : les deux aplats qui
reçoivent du blanc passent AA de justesse et sont commentés plus bas. */
--ink: #071B55; /* bleu foncé — titres et encre */
--ink-soft: #53658A; /* texte secondaire */
--ink-mute: #53658A; /* une seule teinte secondaire est spécifiée */
--cream: #fcfbf7;
--cream-deep: #F4F4F2; /* fond secondaire */
/* --- RÔLES D'ACTION — valeurs relevées dans le DOM de la page de
référence le 27/10/2026, pas estimées à l'œil :
bouton principal #0d6efd lien #0970e6
pastille de titre #004f9f accent turquoise #11b4bb
pied de page #f5faff sur texte #212529
Les noms disent le rôle et non la teinte : changer de palette ne
doit plus obliger à relire tout le fichier. --- */
/* Bleu principal. Du blanc dessus donne 4,83:1 — au-dessus du seuil AA,
mais sans marge : tout éclaircissement de cet aplat le ferait passer
dessous (voir l'absence de voile sur `.btn`). */
--action: #0066FF;
--action-dark: #0052CC; /* survol */
--action-soft: #E6F0FF;
--action-line: #CCE0FF;
/* COULEURS DE LA MAQUETTE, REMISES SUR DEMANDE après une parenthèse
sobre. Elles ne servent QU'À deux endroits : les quatre pastilles du
hero et l'autocollant du taux d'aides. AUCUN BOUTON NE LES PREND — le
bleu reste la seule couleur d'action de la page, sur consigne expresse
(« je le laisse en bleu »). Le turquoise de l'ancienne bande
d'avantages, lui, ne revient pas : il ne portait aucune information.
Les icônes blanches posées sur l'orange et le vert ne tiennent pas le
rapport de 3:1 du critère 1.4.11. Ce n'est pas un manquement : elles
sont `aria-hidden` et purement décoratives, le libellé placé à côté
portant seul l'information. Les teintes sont donc celles de la maquette.
Si un jour une pastille devient cliquable ou porte seule un sens, il
faudra assombrir l'orange et le vert. */
--jaune: #FFD500; /* autocollant du taux d'aides */
/* Fond du bloc de promesse du hero. Ambre PLUS SOUTENU que celui de la
ORANGE CLAIR AVEC DU TEXTE BLANC — DEMANDÉ EXPRESSÉMENT.
⚠ CE COUPLE NE PASSE PAS LE CONTRASTE : 2,80:1, sous le seuil de
3:1 qui s'applique au grand corps gras. Le commanditaire a été
averti et a maintenu sa demande ; la décision est la sienne.
Deux sorties si l'on veut revenir dans les clous, sans changer
l'impression d'ensemble : garder cet orange et passer le texte dans
l'encre de la marque (5,78:1), ou garder le blanc et descendre
l'orange à #EE680D (3,17:1). */
--promesse: #F97316; /* bloc de promesse du hero */
--rouge: #E60023; /* pastille « factures » */
--vert: #16B364; /* pastille « logement » */
--orange: #F59E0B; /* pastille « confort » */
--cyan: #38A3F1; /* pastille « écologie » */
--gris: #F5F5F3; /* alternance des sections */
/* ROUGE DE CONVERSION. Le bleu reste la couleur de la marque et de la
navigation ; le rouge ne sert QU'AU bouton qui déclenche l'étude, pour
qu'il ne se confonde avec aucun autre. #dc2626 donne 4,83:1 sous du
blanc — le rouge plus vif de la maquette tombait à 4,47:1, sous AA. */
/* Le bleu de lien de la référence est #0970e6 : 4,27:1 sur le bandeau
France Rénov' et 4,47:1 dans le pied de page clair — sous le seuil AA
dans les deux cas. Assombri de deux crans, il passe à 5,2 et 5,5 sans
changer de teinte perceptible. */
--blue: #0052CC; /* liens : 6,83:1 sur blanc */
--blue-soft: #EFEFEC;
--line: #E3E3DF;
--white: #ffffff;
--grey: #EFEFEC;
--red: #b3261e;
--red-soft: #fdf1f0;
/* --- RAYONS ---
La référence posait des boutons à rayon court (4 px), hérités de
Bootstrap. Le parti pris est désormais contemporain : boutons en
gélule, cartes franchement arrondies, et un rayon DISTINCT pour les
contrôles (champs, tuiles de réponse), où la gélule serait illisible. */
--r-btn: 999px; /* boutons */
--r-ctrl: 14px; /* champs de saisie, tuiles de réponse, encarts */
--r: 20px; /* cartes */
--r-lg: 28px; /* grands blocs : simulateur, visuels */
/* --- OMBRES ---
Portées longues, très diffuses, et NEUTRES. Elles étaient teintées de
bleu d'encre : sur des fonds eux-mêmes bleutés, c'est ce qui donnait au
site son voile bleu général. Les fonds sont devenus neutres, les ombres
aussi. Le rayon négatif (`-16px`) resserre l'ombre sous l'objet au lieu
de l'étaler. */
--sh-sm: 0 1px 2px rgba(28,28,26,.05), 0 10px 24px -16px rgba(28,28,26,.38);
--sh: 0 1px 3px rgba(28,28,26,.05), 0 20px 44px -24px rgba(28,28,26,.45);
--sh-lg: 0 2px 6px rgba(28,28,26,.05), 0 44px 90px -44px rgba(28,28,26,.6);
/* L'ombre du bouton principal emprunte SA couleur, pas du gris. */
/* Ombre d'action DISCRÈTE : les portées colorées appuyées faisaient
« bouton publicitaire ». */
--sh-action: 0 2px 6px rgba(28,28,26,.14);
--focus: 0 0 0 3px #fff, 0 0 0 6px var(--blue);
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* 1560 px, et non les 1320 de la page de référence. Sur la maquette, le
logo commence à 45 px du bord et le dernier bouton finit à 40 px de
l'autre : la grille y occupe 95 % de la fenêtre. À 1320, toute la page
était rentrée de 140 px de chaque côté — c'est ce qui la faisait
paraître étroite et tassée, bien plus que n'importe quel détail. */
/* 1840 et non 1640 : sur demande, la page occupe davantage la largeur.
Les blocs de PROSE gardent leur mesure propre — 62ch pour un chapô,
56ch pour un point technique — donc élargir le conteneur élargit
les grilles et les images, jamais les lignes de texte. */
--maxw: 1840px;
/* GOUTTIÈRE GÉNÉREUSE SUR GRAND ÉCRAN.
Elle valait 22 px au maximum : sur une fenêtre de 1 440, le logo et
tout le contenu de la page commençaient à 22 px du bord. C'est une
marge de gabarit serré, pas de page commerciale — et c'est une des
raisons pour lesquelles le premier écran paraissait mal cadré.
À 1 440 px elle vaut désormais 58 px, à 1 920 px 72 px, et elle
retombe à 16 px sur téléphone, où chaque pixel de largeur compte. */
/* Gouttière resserrée : 4vw mettait 58 px de marge de chaque côté sur
un écran de 1 440, et 72 px au-delà. Le plancher de 16 px reste —
c'est lui qui tient le confort sur téléphone, et `max()` avec les
zones sûres s'y ajoute en paysage sur un appareil à encoche. */
/* LA GOUTTIÈRE DÉCIDE DE L'AIR SUR LES CÔTÉS, et c'est elle seule : la
largeur maximale de la page est à 1 840 px, donc en dessous de cette
valeur le contenu touche les bords de la fenêtre à la gouttière près.
À 2,2 vw, cela faisait 32 px de marge sur un écran de 1 440 — un
texte collé au cadre, qui donnait à la version ordinateur son air
étriqué. À 4 vw elle suit la fenêtre au lieu de la subir : 41 px à
1 024, 58 à 1 440, 67 à 1 680. Le plancher mobile ne bouge pas. */
/* LE PLANCHER MONTE DE 16 À 21 px. À 402 px — l'iPhone de référence —
4vw valait 16,1 px : tout le contenu touchait donc le plancher du
clamp et longeait le bord de l'écran. 21 px donne à la page une
marge qui se voit sans manger la colonne. */
--gutter: clamp(21px, 4vw, 80px);
/* Hauteur de l'en-tête. Sert aussi de décalage d'ancre : sans elle, un lien
« #simulateur » placerait le titre sous la barre. */
/* 62 et non 70 : sur un écran de 812, l'en-tête consommait 9 % de la
hauteur avant le premier mot. Le logo et les boutons gardent leur
taille — c'est le rembourrage vertical qui se resserre, et la cible
tactile des boutons (44 px) reste intacte. */
--header-h: 62px;
/* LE RYTHME VERTICAL PLAFONNAIT TROP TÔT : 86 px dès 1 324 px de large,
et plus rien au-delà. Sur un grand écran, les sections s'enchaînaient
donc avec le même intervalle qu'au format portable, ce qui les faisait
paraître entassées. */
--section-y: clamp(48px, 7.2vw, 112px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{
scroll-behavior:smooth;
/* SAFARI iOS GROSSIT LE TEXTE DE SON PROPRE CHEF quand on bascule le
téléphone en paysage : il « ajuste » la taille des blocs qu'il juge
trop étroits. Le résultat est une page dont la typographie ne
correspond plus à aucune des tailles mesurées ici. */
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
/* `clip` plutôt que `hidden` : il coupe le débordement horizontal sans créer
de conteneur de défilement, donc `position:sticky` continue de marcher. */
overflow-x:clip;
scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
margin:0;
background:var(--white);
color:var(--ink);
font-family:var(--font);
/* 17 px. La référence est à 16 px ; sur un écran de 2026 c'est un corps
de texte daté, et le confort de lecture prime sur la copie au pixel. */
font-size:17px;
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
width:100%; max-width:100%;
}
/* `height:auto` N'EST PAS DE LA COSMÉTIQUE, C'EST LA CORRECTION D'UN BUG.
Chaque ` sans width/height prend toute la place disponible : sans cette
règle, la flèche du bouton principal fait la hauteur du bouton. */
.btn svg{ width:20px; height:20px; flex:none; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; pointer-events:none; }
/* ==========================================================================
EN-TÊTE
========================================================================== */
.site-header{
position:sticky; top:0; z-index:60;
background:var(--white); border-bottom:1px solid rgba(28,28,26,.07);
/* Un simple filet, pas d'ombre portée : l'en-tête d'un site commercial
haut de gamme se signale par son alignement, pas par son relief. Le
fond reste OPAQUE — translucide, le texte de navigation passerait sur
la photographie au défilement et perdrait son contraste. */
}
.site-header__in{ display:flex; align-items:center; gap:16px; min-height:var(--header-h); }
.brand{
display:flex; align-items:center; gap:13px;
text-decoration:none; color:var(--ink);
flex:0 1 auto; min-width:0;
}
.brand > span{ min-width:0; }
.brand img{ width:clamp(42px, 3.4vw, 56px); height:auto; object-fit:contain; flex:none; }
.brand strong{ display:block; font-size:clamp(1rem, 1.3vw, 1.22rem); line-height:1.15; letter-spacing:-.018em; }
.brand em{ display:block; font-style:normal; font-size:clamp(.76rem, .9vw, .86rem); color:var(--ink-soft); margin-top:2px; }
/* LA SIGNATURE NE S'AFFICHE QU'OÙ ELLE TIENT.
À 1 024 px, la barre porte le logo, le nom, sept liens de navigation,
deux boutons et deux pastilles rondes. La marque y était comprimée à
88 px : « Aides Équilibre Habitat » tombait sur TROIS lignes et sa
signature sur QUATRE, et l'en-tête passait de 70 à 137 px de haut —
le double de sa hauteur de référence, celle qui sert aussi de décalage
aux ancres.
La signature est la seule chose qu'on puisse retirer sans rien perdre :
le nom dit déjà qui l'on est. En dessous de 1 200 px elle disparaît, et
le nom retrouve la largeur de ses deux lignes. Au-delà, elle revient et
tient sur une seule ligne.
LE SEUIL EST À 1 360 px, PAS À 1 200, et c'est une mesure et non un
chiffre rond : à 1 280, la signature réapparue reprenait assez de
largeur pour renvoyer le nom sur trois lignes. Elle ne s'affiche donc
qu'à partir de la largeur où le nom tient sur UNE ligne à côté d'elle. */
@media (max-width:1359px){ .brand em{ display:none; } }
@media (min-width:1360px){ .brand em{ white-space:nowrap; } }
/* La navigation occupe l'espace libre et s'y centre : c'est la composition
de la maquette, où le menu est à peu près au milieu de la barre. */
.nav{ display:none; flex:1; justify-content:center; }
.nav__list{ display:flex; align-items:center; gap:clamp(2px, .8vw, 14px); }
.nav__link{
display:inline-flex; align-items:center; min-height:44px; padding:0 12px;
color:var(--ink); text-decoration:none;
font-size:clamp(.92rem, 1.02vw, 1.04rem); font-weight:600;
white-space:nowrap; border-radius:var(--r-btn);
}
.nav__link{ transition:background-color .15s ease, color .15s ease; }
.nav__link:hover{ background:var(--action-soft); color:var(--action-dark); }
.header__cta,.header__rappel{ display:none; white-space:nowrap; }
.header__rappel svg{ width:18px; height:18px; }
.header__cta svg{ width:18px; height:18px; }
.burger{
display:inline-flex; align-items:center; justify-content:center;
width:46px; height:46px; flex:none; margin-left:auto;
background:var(--white); color:var(--ink);
border:1px solid var(--line); border-radius:var(--r-btn); cursor:pointer;
}
.burger svg{ width:24px; height:24px; }
.burger__close{ display:none; }
.burger[aria-expanded="true"] .burger__open{ display:none; }
.burger[aria-expanded="true"] .burger__close{ display:block; }
.nav-panel{ border-top:1px solid var(--line); background:var(--white); padding:10px var(--gutter) 18px; }
.nav-panel[hidden]{ display:none; }
.nav-panel__link{
display:flex; align-items:center; min-height:52px;
color:var(--ink); text-decoration:none; font-weight:600;
border-bottom:1px solid var(--line);
}
.nav-panel .btn{ margin-top:14px; }
/* ==========================================================================
HERO — LA PHOTOGRAPHIE EN FOND, SANS AUCUN VOILE
LA PHOTOGRAPHIE N'EST PLUS TEINTÉE DU TOUT. Elle couvre toute la bande,
bord à bord, avec ses couleurs d'origine : aucun calque, aucun dégradé,
aucune opacité posée dessus.
CE QUI OBLIGE LE TEXTE À QUITTER L'IMAGE. Du texte posé directement sur
une photographie non voilée ne tient aucun seuil de contraste : la même
phrase passe sur du ciel blanc puis sur une haie sombre. Le discours est
donc écrit dans une CARTE OPAQUE posée sur la photographie. Le contraste
y est celui du texte sur blanc — connu, stable, indépendant de l'image.
C'est le seul montage qui satisfasse les deux demandes à la fois : une
image de fond, et pas la moindre teinte dessus.
========================================================================== */
.hero{
position:relative; isolation:isolate;
/* Filet de sécurité derrière la photographie, si elle manque. */
background:var(--gris);
padding-block:clamp(18px, 2.4vw, 44px);
}
.hero__fond{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
/* VOILE BLANC, dense à gauche où vit le texte, transparent à droite où la
pompe à chaleur doit rester nette. C'est l'inverse du voile marine
qu'avait porté ce hero : ici on éclaircit, on n'assombrit pas. */
.hero__fond::after{
content:""; position:absolute; inset:0; z-index:1;
/* MESURÉ : le texte le plus à droite qui dépend du voile — la mention
sous les boutons — s'arrête à 52,7 % de la largeur du calque. Le voile
reste donc dense jusqu'à 54 %, puis tombe vite : au-delà de 68 % il
ne reste rien, et la personne comme l'appareil se voient en entier.
L'ancienne courbe était encore à 74 % d'opacité au milieu du sujet. */
/* 90deg ET NON 100 : le dégradé penchait de 10°, donc sa frontière
glissait vers la droite en descendant — d'environ 158 px sur la
hauteur du hero, soit 11 % de sa largeur. Le haut du sujet était
dégagé pendant que ses jambes restaient dans la brume, et aucun
réglage des étapes ne pouvait corriger ça : c'était l'angle. À
l'horizontale, la frontière est la même à toutes les hauteurs. */
background:linear-gradient(90deg,
rgba(255,255,255,.97) 0%,
rgba(255,255,255,.95) 48%,
rgba(255,255,255,.90) 52.5%,
rgba(255,255,255,.04) 54.5%,
rgba(255,255,255,0) 55.5%);
}
@media (max-width:999px){
/* Empilé, le texte occupe toute la largeur : le voile doit être dense
partout, sinon la fin de chaque ligne passe sur l'image. */
.hero__fond::after{
/* MESURÉ : sur téléphone, le calque d'image ne fait que 173 px, tout
en haut du hero, et AUCUN texte ne le recouvre — le titre commence
en dessous. Le voile n'a donc rien à protéger ici ; il ne sert qu'à
fondre le bas de l'image dans le fond de la page. D'où un calque
transparent sur plus de la moitié de sa hauteur. */
background:linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0) 56%,
rgba(255,255,255,.34) 84%,
rgba(255,255,255,.92) 100%);
}
}
.hero__photo{
display:block; width:100%; height:100%;
object-fit:cover;
/* CADRAGE CALÉ À GAUCHE, ET C'EST CE QUI DÉGAGE LE SUJET.
À 58 %, la fenêtre de recadrage mordait sur la droite de la
photographie : l'homme se retrouvait vers 51 % de la largeur du
bandeau, donc DANS la zone où le voile doit rester dense pour que le
texte reste lisible. Aucun réglage du voile ne pouvait les séparer,
puisqu'ils occupaient la même bande.
À 0 %, la fenêtre prend le bord gauche de la photographie et pousse
l'homme vers la droite, au-delà de la chute du voile. Le texte garde
sa densité, le sujet sort de la brume. */
object-position:0% 52%;
}
.hero__grille{ display:grid; gap:clamp(18px, 2.6vw, 44px); align-items:center; }
/* ---- LA CARTE DU DISCOURS ---- */
/* LE DISCOURS N'EST PLUS DANS UNE CARTE OPAQUE : c'est la photographie
qu'on voit sous lui, éclairée par un voile blanc très dense. La
référence montre une composition lumineuse d'un seul tenant, pas un
rectangle blanc posé sur une image.
LE VOILE RESTE TRÈS DENSE — 94 % à gauche. Le texte est en bleu marine
sur blanc : ce sont les mêmes 13:1 que partout ailleurs, et ils ne
dépendent pas de ce que montre la photographie à cet endroit. */
.hero__texte{
position:relative; z-index:1;
display:grid; align-content:center; justify-items:start;
/* AUCUNE MARGE INTERNE HORIZONTALE, et c'est le point.
Le bloc en portait une, héritée du temps où le discours vivait dans
une carte blanche posée sur la photographie. La carte est partie, la
marge est restée : le titre commençait 78 px plus à droite que le
logo juste au-dessus. Rien ne s'alignait sur la verticale gauche.
C'est la gouttière du `wrap` qui aligne tout désormais — logo, titre,
bouton, bande d'engagements, et les sections en dessous. */
padding:clamp(18px, 2.2vw, 36px) 0;
}
/* Badge de catégorie : bleu clair, texte bleu, discret. Il nomme le
produit, il n'annonce plus un taux d'aides. */
.hero__kicker{
display:inline-flex; align-items:center; gap:8px;
margin:0 0 clamp(12px, 1.4vw, 18px);
padding:7px 15px; border-radius:var(--r-btn);
background:var(--action-soft); color:var(--action-dark);
border:1px solid var(--action-line);
font-size:.86rem; font-weight:700; letter-spacing:0; text-transform:none;
}
.hero__kicker svg{ width:17px; height:17px; flex:none; }
.hero__titre{
margin:0 0 clamp(10px, 1.2vw, 15px);
font-size:clamp(1.8rem, 2.9vw, 2.7rem);
font-weight:800; line-height:1.08; letter-spacing:-.03em;
color:var(--ink);
/* LA MESURE PILOTE LES RETOURS À LA LIGNE. Laissé courir sur toute la
carte, le titre se brisait là où tombait le mot le plus long. Borné à
18 caractères de large, il se coupe toujours au même endroit et la
composition ne bouge plus d'une largeur à l'autre.
LE PLAFOND VIT SUR LES LIGNES DE PHRASE, ET NON SUR LE TITRE ENTIER.
Posé sur le titre, il ramenait la colonne à 406 px — et le bloc de
promesse, qui en est l'enfant, ne pouvait pas la dépasser : pour tenir
sur une ligne il devait descendre à 25 px de corps, ce qui éteignait
l'argument le plus commercial de la page. */
}
/* LA MESURE DE 18 CARACTÈRES EST UNE RÈGLE DE GRAND ÉCRAN. Elle protège
la lecture quand la colonne est large. Sur téléphone, la colonne EST
déjà la mesure : la brider à 18ch cassait les lignes bien avant le bord
et laissait des bouts de phrase esseulés — « par une » seul sur sa
ligne, constaté sur iPhone. Elle ne s'applique donc qu'à partir de
768 px, plus bas.
L'ACCENT N'EST PLUS BRIDÉ DU TOUT : il est en `nowrap` depuis qu'il doit
tenir sur une ligne, et une mesure sur une boîte qui ne se replie pas ne
fait que mentir sur sa largeur réelle. */
/* L'ACCENT EST SUR LA REQUÊTE ACHETÉE : « pompe à chaleur air/eau » passe
en bleu électrique et descend à la ligne. C'est le mot que le visiteur
vient de taper dans Google ; le voir en couleur lui dit qu'il est au bon
endroit avant même d'avoir lu la phrase. */
.hero__titre-l1{
display:block;
max-width:none;
/* ÉQUILIBRE LES LIGNES plutôt que de remplir la première au maximum.
C'est ce qui empêche une dernière ligne de deux mots. Ignoré par les
navigateurs qui ne le connaissent pas, qui retombent alors sur un
repli normal à la largeur de la colonne — déjà meilleur que 18ch. */
text-wrap:balance;
}
/* ---- LA PROMESSE D'ÉCONOMIES, DANS UN BLOC ENCADRÉ ----
UN SEUL BLOC, JAMAIS DEUX. La version précédente laissait le cadre se
couper au retour à la ligne : le navigateur dessinait alors deux boîtes,
une par ligne, qui se touchaient et paraissaient se chevaucher — la
hauteur de ligne du titre est plus serrée que la hauteur des boîtes.
`display:inline-block` règle la cause : le bloc ne se coupe plus. Quand
la place manque, c'est le TEXTE qui se replie À L'INTÉRIEUR du cadre,
qui reste un rectangle unique et fermé. `box-decoration-break` n'a donc
plus lieu d'être.
L'ambre ne sert QU'ICI, et le jaune reste réservé aux pastilles et à
l'étiquette du taux d'aides. Aucune des deux ne passe sous un bouton. */
.hero__titre-l2{ display:block; margin-top:.16em; }
/* L'indication d'éligibilité, juste sous la promesse. Corps réduit et
teinte sourde : elle doit être lue, pas concurrencer le titre. */
.hero__eligibilite{
margin:clamp(8px, 1vw, 12px) 0 clamp(11px, 1.3vw, 15px);
font-size:.8rem; line-height:1.45; color:var(--ink-mute);
}
.hero__titre-encadre{
display:inline-block;
background:var(--promesse);
color:#fff;
border-radius:var(--r-ctrl);
padding:.1em .42em .14em;
/* UNE SEULE LIGNE, À TOUTES LES LARGEURS.
La colonne du titre ne fait que 406 px sur un écran de 1 440 : au
corps du titre, la promesse s'y repliait en deux. Le corps est donc
calculé pour que la ligne entière tienne — mesuré à 385 px de texte
pour 26 px de corps, d'où le plafond à 25. `nowrap` garantit qu'aucun
repli ne revienne si le libellé change d'un mot. */
white-space:nowrap;
/* Calculé pour que la ligne entière tienne dans la colonne de texte du
hero, mesurée à 630 px sur un écran de 1 440 : 511 px de texte pour
34 px de corps, plus le rembourrage. */
font-size:clamp(19px, 2.4vw, 34px); line-height:1.25;
}
.hero__titre-etoile{
font-size:.55em; vertical-align:super; line-height:0;
/* `currentColor` + opacité plutôt qu'une couleur à part : l'astérisque
suit le texte du bloc, en mode clair comme en mode sombre. */
margin-left:3px; color:currentColor; opacity:.72; font-weight:700;
}
/* LA REQUÊTE VISÉE TIENT SUR UNE LIGNE, sur demande. `nowrap` seul ne
suffirait pas : à 320 px le corps du titre la ferait déborder. Le
corps de CETTE ligne est donc borné par la largeur disponible, sans
toucher au reste du titre. */
.hero__titre-accent{
display:block; color:var(--action);
white-space:nowrap;
}
/* LE CHAPÔ EST MONTÉ D'UN CRAN, sur demande : il se lisait comme une note
de bas de page entre un titre très affirmé et les trois arguments.
Il passe dans l'encre pleine, en demi-gras, et gagne deux points de
corps. Il reste UN cran sous le titre — le dépasser ferait deux voix
qui parlent en même temps. */
.hero__chapo{
margin:0 0 clamp(16px, 1.9vw, 24px);
max-width:44ch;
font-size:clamp(1.08rem, 1.3vw, 1.28rem);
line-height:1.5; font-weight:600; color:var(--ink);
}
/* ---- TROIS BÉNÉFICES, UNE SEULE COULEUR ----
Quatre pastilles rouge, verte, orange et cyan ont cédé la place : la
consigne demande des icônes « cohérentes, simples et élégantes » et
d'éviter « les couleurs criardes ». Le trait est fin, la couleur unique,
et ce qui sépare les trois est un filet d'un pixel — pas une boîte.
EN RANGÉE SUR ORDINATEUR, en file sur téléphone : trois libellés de deux
lignes côte à côte sous 700 px donnent trois colonnes de six lignes. */
/* TROIS CARTES DISTINCTES, sur demande : « que chacun soit entouré, que
ça fasse comme un style de bouton ». Elles étaient trois rangées séparées
par un filet, donc un seul bloc à l'œil — on ne distinguait pas trois
arguments mais une liste continue.
Même grammaire que les cartes du socle juste en dessous : fond de
surface, filet fin, coins arrondis. L'ombre reste très basse — ce sont
des arguments, pas des boutons cliquables, et une ombre marquée les
ferait passer pour tels. */
.atouts{
display:grid; gap:10px; margin:0 0 clamp(18px, 2.1vw, 26px); padding:0;
list-style:none;
/* `.hero__texte` EST UNE GRILLE EN `justify-items:start` : chaque enfant
y est dimensionné sur son contenu, pas sur la piste. Les trois cartes
s'arrêtaient donc à 333 px quelle que soit la largeur — 25 px avant le
bord à 390 px, 219 px à 600 — pendant que le bouton et le chapô
allaient de bord à bord. Le bord droit était en escalier. */
justify-self:stretch;
}
.atout{
display:grid; grid-template-columns:auto 1fr; align-items:center; gap:13px;
padding:14px 16px;
background:var(--white);
border:1px solid var(--line);
border-radius:var(--r-ctrl);
box-shadow:0 1px 2px rgba(7, 27, 85, .04);
}
/* PASTILLES RONDES ET PASTEL, une teinte par bénéfice, comme sur la
référence. Ce sont des fonds très clairs avec un trait foncé dessus :
le contraste du pictogramme reste franc, et aucune des trois teintes
n'est criarde. */
.atout__ico{
display:grid; place-items:center; flex:none;
width:42px; height:42px; border-radius:50%;
background:var(--action-soft); color:var(--action-dark);
}
.atout__ico--budget { background:#FDECEF; color:#B3123A; }
.atout__ico--confort{ background:#FEF3E2; color:#A85B06; }
.atout__ico--aides { background:#E8F7EE; color:#0E7A43; }
.atout__ico svg{ width:23px; height:23px; }
.atout__txt{ display:grid; gap:2px; min-width:0; }
.atout__txt strong{ font-size:.95rem; font-weight:700; line-height:1.22; color:var(--ink); }
.atout__txt span{ font-size:.86rem; line-height:1.4; color:var(--ink-soft); }
@media (min-width:700px){
/* En rangée : le filet passe à la verticale, entre les colonnes. */
.atouts{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(12px, 1.4vw, 18px); }
.atout{
grid-template-columns:1fr; gap:8px;
padding:16px 18px;
align-items:start;
}
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; width:100%; max-width:640px; }
.hero__cta .btn{ min-height:54px; padding-block:12px; }
.btn__ico{ width:21px; height:21px; flex:none; }
.hero__cta .btn--lg{ flex:1 1 min(302px, 100%); padding-inline:26px; }
.hero__cta .btn--ghost{ flex:1 1 min(206px, 100%); padding-inline:22px; }
/* ---- BANDE DES TROIS ENGAGEMENTS ----
Sous la réassurance, sur un voile blanc légèrement plus dense que le
reste : elle se détache sans devenir une carte de plus. */
.hero__socle{
display:grid; gap:12px; margin:clamp(12px, 1.5vw, 18px) 0 0; padding:0;
list-style:none; width:100%;
}
.hero__socle li{
display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px;
font-size:.83rem; line-height:1.4; color:var(--ink-soft);
}
.hero__socle svg{ width:22px; height:22px; flex:none; color:var(--action-dark); }
/* Le logo RGE remplace le pictogramme : c'est une marque de qualification,
elle se reconnaît et ne se redessine pas. */
/* LE LOGO RGE PREND MOINS DE LARGEUR QUE SA HAUTEUR NE LE SUGGÈRE. À 36 px
de haut il mesurait 48 px de large, soit le double du pictogramme voisin :
le libellé du milieu tombait à trois lignes et la rangée penchait. À
30 px, les trois colonnes se tiennent. */
.hero__socle-logo{
width:auto; height:30px; flex:none; object-fit:contain; object-position:left center;
}
.hero__socle strong{ display:block; font-size:.87rem; color:var(--ink); line-height:1.3; }
.hero__socle span span{ display:block; }
@media (min-width:760px){
.hero__socle{
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:clamp(14px, 1.8vw, 26px);
padding:clamp(11px, 1.3vw, 15px) clamp(14px, 1.7vw, 20px);
background:rgba(255,255,255,.72);
border:1px solid var(--line); border-radius:var(--r);
}
.hero__socle li + li{ padding-left:clamp(14px, 1.8vw, 26px); border-left:1px solid var(--line); }
}
/* Mention de l'astérisque, discrète et lisible. */
.hero__note{
margin:clamp(8px, 1vw, 12px) 0 0; max-width:none;
font-size:.76rem; line-height:1.5; color:var(--ink-mute);
}
.hero__note a{ color:var(--blue); }
/* ---- Les objets posés sur la photographie ---- */
.hero__objets{ position:relative; z-index:1; display:none; }
/* ---- L'ÉTIQUETTE D'ÉCONOMIE ----
Posée sur la photographie, en haut à droite, légèrement inclinée. Le
jaune est la seule couleur chaude de la page : il ne sert qu'ici, et
c'est ce qui le rend lisible comme une accroche et non comme un élément
d'interface. Texte marine sur jaune : 12,6:1. */
.hero__sticker{
display:none; /* n'apparaît qu'en deux colonnes, voir plus bas */
position:absolute; margin:0;
width:clamp(188px, 15vw, 226px);
padding:16px 18px 15px; border-radius:26px;
background:var(--jaune); color:var(--ink);
text-align:center; transform:rotate(-4deg);
box-shadow:0 20px 44px -18px rgba(0,0,0,.4);
}
.hero__sticker-haut{ display:block; font-size:.95rem; font-weight:700; }
.hero__sticker-taux{
display:block; margin:-2px 0 1px;
font-size:3.1rem; font-weight:800; line-height:1; letter-spacing:-.04em;
}
.hero__sticker-taux span{ font-size:.58em; }
.hero__sticker-bas{ display:block; font-size:.82rem; font-weight:700; line-height:1.25; }
/* L'ANCIEN AUTOCOLLANT « 70 % D'AIDES » A ÉTÉ RETIRÉ — et pas remplacé par
celui-ci : ils ne disent pas la même chose. L'un parlait d'un barème
public, l'autre d'une performance chez le client.
Il portait « Jusqu'à 70 % d'aides possibles », posé sur la
photographie. Consigne : « n'ajoute pas de badge "jusqu'à 70 %
d'aides" ». Le hero n'annonce donc plus aucun taux — ni en pastille de
titre, ni sur l'image.
Le jeton `--jaune` reste déclaré plus haut, inutilisé : si une couleur
chaude redevient nécessaire un jour, autant qu'elle reprenne celle-là
plutôt qu'une autre inventée au hasard. */
.hero__dispositifs{
display:none; /* n'apparaît qu'en deux colonnes, voir plus bas */
position:absolute; margin:0; padding:9px;
background:var(--white);
border-radius:var(--r-lg);
box-shadow:0 34px 80px -28px rgba(0,0,0,.5);
}
.dispo{
display:flex; align-items:center; gap:12px;
padding:11px 12px; border-radius:var(--r-ctrl);
color:var(--ink); text-decoration:none;
transition:background-color .18s ease;
}
.dispo:hover{ background:var(--cream-deep); }
.dispo__ico{
display:grid; place-items:center; flex:none;
width:42px; height:42px; border-radius:13px;
background:var(--action-soft); color:var(--action-dark);
}
.dispo__ico svg{ width:22px; height:22px; }
.dispo__ico--mpr svg{ width:26px; height:26px; border-radius:3px; overflow:hidden; }
/* UNE TUILE PLUS LARGE POUR UN VRAI LOGO. Le logo CEE fait 398 × 172 :
placé dans la tuile carrée des pictogrammes, il tomberait à 18 px de
haut et deviendrait illégible. Fond blanc, parce qu'un logo officiel ne
se reteinte pas. */
.dispo__ico--logo{
width:64px; height:44px; border-radius:11px;
background:var(--white); border:1px solid var(--line);
}
.dispo__ico--logo img{ width:54px; height:auto; object-fit:contain; }
.dispo__ico--cee { background:#E8F7EE; color:#0E7A43; }
.dispo__ico--lieu{ background:#FDECEF; color:#B3123A; }
.dispo__txt{ display:grid; gap:1px; min-width:0; }
.dispo__txt strong{ font-size:.95rem; font-weight:700; }
.dispo__txt span{ font-size:.8rem; color:var(--ink-soft); line-height:1.3; }
.dispo .chev{ width:18px; height:18px; flex:none; margin-left:auto; color:#a8a8a2; }
/* ==========================================================================
RÉCAPITULATIF AVANT ENVOI
Le visiteur voit ce qu'il a répondu avant de laisser ses coordonnées : il
doit avoir le sentiment d'avoir commencé une étude, pas d'avoir rempli un
formulaire de rappel. Les libellés sont relus dans `ETAPES`, donc ils ne
peuvent pas diverger des options proposées.
========================================================================== */
.recap{
margin:0 0 20px;
padding:16px 18px;
background:var(--cream-deep);
border:1px solid var(--line); border-radius:var(--r-ctrl);
}
.recap__titre{
margin:0 0 12px;
font-size:.88rem; font-weight:700; color:var(--ink);
}
.recap dl{
display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0;
font-size:.86rem;
}
.recap dt{ color:var(--ink-soft); }
.recap dd{ margin:0; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.recap__modifier{
display:inline-flex; align-items:center; min-height:44px;
margin-top:8px; padding:0; border:0; background:none;
color:var(--blue); font:inherit; font-size:.86rem; font-weight:600;
text-decoration:underline; cursor:pointer;
}
/* ==========================================================================
QUATRE REPÈRES — à qui, à la place de quoi, ce qui est compris, par qui.
Chaque repère mène à la section qui le développe.
========================================================================== */
/* La bande tombe JUSTE SOUS le hero sombre : un fond blanc cassé et des
cartes blanches posées dessus prolongent la bande au lieu de la couper
net. Le gris plat d'avant faisait marche d'escalier. */
.reperes{
background:linear-gradient(180deg, #F8F8F6 0%, var(--white) 100%);
padding-block:clamp(20px, 2.2vw, 30px);
}
.reperes__liste{
display:grid; gap:clamp(10px, 1.4vw, 16px);
grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (max-width:539px){ .reperes__liste{ grid-template-columns:1fr; } }
@media (min-width:1200px){ .reperes__liste{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.repere{
display:flex; align-items:center; gap:14px; height:100%;
padding:13px 16px;
background:var(--white); color:var(--ink); text-decoration:none;
border:1px solid rgba(227,227,223,.9); border-radius:var(--r-lg);
box-shadow:0 1px 2px rgba(28,28,26,.04), 0 14px 30px -22px rgba(28,28,26,.5);
transition:border-color .18s ease, box-shadow .18s ease;
}
/* Survol discret : un filet qui se colore et l'ombre qui s'approfondit.
Le soulèvement de 2 px faisait « raccourci d'application ». */
.repere:hover{
border-color:var(--action-line);
box-shadow:0 1px 2px rgba(28,28,26,.04), 0 20px 40px -22px rgba(28,28,26,.6);
}
/* VIGNETTE PHOTOGRAPHIQUE. La maquette montre une image à gauche de chaque
carte : ce sont les clichés réels du dépôt, jamais une banque d'images.
La quatrième carte porte le vrai logo RGE, posé sur un fond blanc pour
qu'il garde ses couleurs. */
.repere__vignette{
width:clamp(78px, 6.4vw, 104px); height:clamp(70px, 5.8vw, 94px); flex:none;
border-radius:var(--r-ctrl); object-fit:cover; object-position:center;
background:var(--gris);
}
.repere__logo{
width:clamp(78px, 6.4vw, 104px); height:clamp(70px, 5.8vw, 94px); flex:none;
object-fit:contain; padding:5px;
background:var(--white); border-radius:var(--r-ctrl);
}
.repere__ico{
display:inline-flex; align-items:center; justify-content:center;
width:50px; height:50px; flex:none; border-radius:var(--r-ctrl);
background:var(--action-soft); color:var(--action-dark);
}
.repere__ico svg{ width:24px; height:24px; }
.repere__txt{ display:grid; gap:2px; min-width:0; }
.repere__txt strong{ font-size:clamp(.97rem, 1.05vw, 1.06rem); line-height:1.22; }
.repere__txt span{ font-size:clamp(.84rem, .92vw, .92rem); line-height:1.35; color:var(--ink-soft); }
.repere .chev{ width:20px; height:20px; margin-left:auto; flex:none; color:var(--action-dark); }
/* ==========================================================================
DISPOSITIFS PUBLICS — rangée de logos institutionnels.
========================================================================== */
/* BANDE AGRANDIE sur demande : « on ne voit pas assez ça ». Elle était
serrée à 11 px de marge, logos à 28 px et texte à 0,83 rem — une ligne
de bas de page pour ce qui est la caution publique de l'offre. */
.officiels{
background:var(--white);
border-top:1px solid var(--line);
padding-block:clamp(20px, 2.2vw, 30px);
}
.officiels__liste{
display:grid; gap:clamp(14px, 2vw, 26px);
grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (max-width:539px){ .officiels__liste{ grid-template-columns:1fr; } }
@media (min-width:1200px){
/* Le premier bloc porte une phrase entière, les trois autres un
libellé : des colonnes égales donneraient quatre lignes au premier et
une seule aux autres. */
.officiels__liste{ grid-template-columns:minmax(0, 1.85fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr); }
}
/* Le filet de séparation n'a de sens qu'entre deux colonnes voisines. */
@media (max-width:1199px){ .officiel:nth-child(odd){ border-left:0; padding-left:0; } }
@media (max-width:539px){ .officiel{ border-left:0 !important; padding-left:0 !important; } }
.officiel{
display:flex; align-items:center; gap:15px;
font-size:.95rem; line-height:1.4; color:var(--ink-soft);
}
.officiel + .officiel{ border-left:1px solid var(--line); padding-left:clamp(13px, 1.7vw, 22px); }
/* Tous les logos à la MÊME hauteur optique et dans la même boîte : sans
largeur maximale commune, MaPrimeRénov' (trois fois plus large que
haut) écrasait la colonne de texte voisine. */
.officiel img{
height:clamp(40px, 4vw, 52px); width:auto; max-width:132px;
flex:none; object-fit:contain; object-position:center;
}
.officiel strong{ color:var(--ink); }
/* ---- Bloc France Rénov' : il porte la mention réglementaire ----
Reproduite au mot près (arrêté du 7 juillet 2026), avec le logo et le
lien. Elle est plus longue que les trois autres libellés : sa colonne
est donc plus large, sinon elle déborde sur quatre lignes. */
.officiel__lien{
display:flex; align-items:center; gap:13px;
color:inherit; text-decoration:none;
}
.officiel__lien:hover .officiel__url{ text-decoration:underline; }
.officiel__url{ color:var(--blue); font-weight:700; white-space:nowrap; }
.officiel__drapeau{ flex:none; }
.officiel__drapeau svg{
width:60px; height:41px; display:block;
border:1px solid var(--line); border-radius:3px;
}
/* ==========================================================================
CARTE PRODUIT — le matériel d'un côté, ce que comprend l'offre de l'autre.
C'est la composition centrale de la page de référence : une grande carte
blanche, le visuel du produit à gauche, le nom de l'offre et la LISTE
COCHÉE de ce qu'elle comprend à droite, puis l'action. Sans elle, une
page d'offre n'affiche jamais son offre.
========================================================================== */
.produit{
display:grid; gap:clamp(20px, 2.8vw, 44px); align-items:center;
background:var(--white);
border:1px solid rgba(28,28,26,.08); border-radius:var(--r-lg);
box-shadow:var(--sh);
padding:clamp(20px, 2.6vw, 38px);
}
.produit__media{ border-radius:var(--r); overflow:hidden; background:var(--cream-deep); }
.produit__media img{ transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.produit:hover .produit__media img{ transform:scale(1.04); }
.produit__media img{
display:block; width:100%; height:auto;
aspect-ratio:3/2; /* le rapport natif des clichés : aucun rognage */
object-fit:cover; object-position:center;
}
.produit__titre{ font-size:clamp(1.22rem, 2vw, 1.62rem); margin:0 0 .5em; }
.produit__texte{ color:var(--ink-soft); margin:0 0 20px; }
.produit__liste{ display:grid; gap:11px; margin:0 0 24px; }
.produit__liste li{ display:flex; align-items:flex-start; gap:10px; font-size:.97rem; }
.produit__liste svg{ width:20px; height:20px; flex:none; margin-top:2px; color:var(--action); }
.produit__note{ margin:16px 0 0; font-size:.8rem; color:var(--ink-mute); }
/* ==========================================================================
SECTIONS
========================================================================== */
/* ==========================================================================
« COMMENT ÇA MARCHE » — COMPOSITION ÉDITORIALE
La section comptait dix cadres : quatre étapes en cartes à bordure, six
points en cartes à bordure, le tout dans une grille à deux colonnes avec
la photographie coincée dans l'une d'elles. À 390 px, elle mesurait
2 712 px de haut — plus de trois écrans pour une seule section.
IL N'Y A PLUS AUCUNE BOÎTE. Ce qui structure, c'est la mesure du texte,
l'espace et des filets d'un pixel. Quatre temps dans l'ordre : le titre,
la photographie, le fonctionnement, ce que l'étude vérifie.
========================================================================== */
/* ---- 1. L'en-tête, sur une mesure étroite ----
Un titre et un chapô qui courent sur 1 600 px ne se lisent pas : l'œil
perd la ligne. 62 caractères, c'est la longueur de ligne confortable. */
.tech__tete{ max-width:62ch; margin:0 0 clamp(26px, 3.4vw, 50px); }
.tech__tete h2{
margin:10px 0 0;
font-size:clamp(1.75rem, 3.1vw, 2.75rem);
line-height:1.1; letter-spacing:-.025em; color:var(--ink);
}
.tech__chapo{
margin:clamp(12px, 1.4vw, 18px) 0 0;
font-size:clamp(1rem, 1.15vw, 1.18rem); line-height:1.6; color:var(--ink-soft);
}
/* ---- 2. La photographie, élément majeur ----
Au rapport natif du cliché, donc sans rien couper du socle ni de
l'appareil. Sa largeur est plafonnée : à pleine largeur d'un écran de
1 440, un 3/2 mesurerait 930 px de haut et deviendrait un obstacle.
Coins arrondis, un filet très clair, AUCUNE ombre portée. */
/* EN-TÊTE : LA PHOTOGRAPHIE À GAUCHE, LA CARTE À DROITE.
En file sur téléphone, côte à côte dès 900 px. Le cliché garde son
rapport natif ; c'est la carte qui s'adapte à sa hauteur. */
.tech__entete{
display:grid; gap:clamp(16px, 2vw, 26px);
margin:0 0 clamp(26px, 3.4vw, 46px);
}
/* LES DEUX COLONNES N'EXISTENT QUE S'IL Y A UNE CARTE À DROITE.
Sans elle, la règle laissait le cliché dans une demi-colonne, avec une
moitié de rangée vide à côté. Un navigateur sans `:has()` n'applique
pas la règle du tout : il rend une colonne unique, ce qui est précisément
le bon repli. */
@media (min-width:900px){
.tech__entete:has(.tech__carte){
grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); align-items:stretch;
}
/* Le cliché occupe la hauteur de la rangée, la légende reste sous lui.
`aspect-ratio:auto` neutralise le 3/2 de la règle générale, qui
imposerait sinon une hauteur et rouvrirait l'écart. */
.tech__entete:has(.tech__carte) .tech__photo{
display:flex; flex-direction:column; min-height:0;
}
.tech__entete:has(.tech__carte) .tech__photo img{
flex:1 1 auto; min-height:0; height:auto;
aspect-ratio:auto; object-fit:cover; object-position:center 48%;
}
/* Seul, le cliché est plafonné : à 1 310 px de large, un 3/2 mesurerait
873 px de haut et il faudrait le faire défiler pour atteindre la suite. */
.tech__entete:not(:has(.tech__carte)) .tech__photo{ max-width:920px; }
}
.tech__photo{ margin:0; }
/* ---- LA CARTE DE L'EN-TÊTE ----
Elle porte maintenant un contenu complet : un chapeau, un titre, un
paragraphe, trois mentions expliquées et un encart d'appel. C'est ce
qui règle pour de bon le vide des versions précédentes — la carte ne
réclame plus ni étirement ni répartition artificielle, elle remplit sa
colonne parce qu'elle a quelque chose à dire. D'où `align-content:start`
et non `space-between` : le contenu part du haut et descend. */
.tech__carte{
display:grid; gap:clamp(11px, 1.15vw, 14px); align-content:start;
padding:clamp(20px, 2.1vw, 26px);
background:var(--white);
border:1px solid var(--line); border-radius:var(--r-lg);
}
/* Le chapeau : une étiquette, pas un titre. Elle nomme l'émetteur de ce
qui suit — « c'est nous qui posons » — avant que le titre ne parle du
logement du visiteur. */
.tech__carte-chapeau{
display:inline-flex; align-items:center; gap:8px;
justify-self:start; margin:0;
padding:7px 12px; border-radius:999px;
background:var(--action-soft); color:var(--action-dark);
font-size:.78rem; font-weight:700; line-height:1.2;
}
.tech__carte-chapeau-ico{ display:grid; place-items:center; }
.tech__carte-chapeau-ico svg{ width:15px; height:15px; }
.tech__carte-titre{
margin:0; font-size:clamp(1.18rem, 1.45vw, 1.42rem); font-weight:800;
line-height:1.15; letter-spacing:-.02em; color:var(--ink);
}
.tech__carte-txt{
margin:0; font-size:.9rem; line-height:1.55; color:var(--ink-soft);
}
/* Les trois mentions, en colonne, séparées par un filet d'un pixel.
Chacune porte son intitulé ET sa ligne d'explication : « Installation
soignée » seul n'apprend rien, la ligne dessous dit en quoi. */
.tech__badges{
display:grid; grid-template-columns:1fr; gap:0;
margin:0; padding:0; list-style:none;
}
.tech__badges li{
display:grid; grid-template-columns:auto 1fr; align-items:center;
gap:14px; padding:clamp(10px, 1.1vw, 12px) 0;
}
.tech__badges li + li{ border-top:1px solid var(--line); }
.tech__badge-ico{
display:grid; place-items:center; flex:none;
width:38px; height:38px; border-radius:50%;
background:var(--action-soft); color:var(--action-dark);
}
.tech__badge-corps{ display:grid; gap:3px; min-width:0; }
.tech__badge-corps strong{
font-size:.9rem; font-weight:700; line-height:1.25; color:var(--ink);
}
.tech__badge-corps span{
font-size:.84rem; line-height:1.45; color:var(--ink-soft);
}
/* ---- L'ENCART D'APPEL, EN PIED DE CARTE ----
Fond bleu très pâle pour le détacher du blanc de la carte sans ajouter
de filet. Le bouton ramène au questionnaire : il ne déclenche aucune
conversion, qui reste appelée une seule fois, après la réponse du
serveur. */
.tech__encart{
display:grid; grid-template-columns:auto 1fr; align-items:center;
gap:12px 14px;
margin:0;
padding:clamp(14px, 1.5vw, 17px);
background:var(--action-soft); border-radius:var(--r);
}
.tech__encart-ico{
display:grid; place-items:center; align-self:start;
width:38px; height:38px; border-radius:11px;
background:var(--white); color:var(--action-dark);
}
.tech__encart-corps{ min-width:0; }
.tech__encart-titre{
display:block; margin:0 0 4px;
font-size:.9rem; font-weight:700; line-height:1.25; color:var(--ink);
}
.tech__encart-txt{
margin:0; font-size:.81rem; line-height:1.45; color:var(--ink-soft);
}
/* LE BOUTON RESTE SOUS LE TEXTE, À TOUTES LES LARGEURS.
Une variante le plaçait à côté au-delà de 1 180 px de fenêtre — mais
c'est la largeur de la CARTE qui compte, et elle fait 503 px quelle
que soit la fenêtre. Le bouton de 300 px ne laissait alors que 35 px
au texte : un mot par ligne, et un encart de 489 px de haut. */
.tech__encart-cta{
grid-column:1 / -1; justify-self:stretch; text-align:center;
/* Plus ramassé que le gabarit général : dans une carte qui doit tenir
la hauteur du cliché, 54 px de bouton pèsent lourd. La cible tactile
reste au-dessus des 44 px recommandés. */
min-height:46px; padding:11px 20px; font-size:.87rem;
}
.tech__photo img{
display:block; width:100%; height:auto;
aspect-ratio:3/2; object-fit:cover; object-position:center 45%;
border-radius:var(--r-lg);
border:1px solid var(--line);
}
.tech__legende{
margin:12px 2px 0;
font-size:.82rem; line-height:1.5; color:var(--ink-mute);
}
/* ---- 3. Les deux parties, et leurs intertitres ---- */
.tech__partie + .tech__partie{ margin-top:clamp(30px, 3.8vw, 58px); }
/* INTERTITRE SOULIGNÉ D'UN TRAIT BLEU COURT, et non d'un filet gris sur
toute la largeur : le trait court ouvre une partie, le filet long la
sépare de la précédente. C'est le premier qu'on veut ici. */
.tech__st{
position:relative;
display:flex; align-items:flex-end;
margin:0 0 clamp(18px, 2.1vw, 26px);
font-size:clamp(1.18rem, 1.5vw, 1.5rem); font-weight:800;
letter-spacing:-.015em; color:var(--ink);
}
/* LE FILET PÂLE COURT SUR TOUTE LA LARGEUR : il pose la partie dans la
page. Le segment bleu, lui, s'arrête au bout du texte — d'où le `span`,
seul moyen pour un trait de connaître la largeur d'une ligne de titre.
Un `::after` sur le `h3` mesurerait le conteneur, pas le texte. */
.tech__st::after{
content:""; position:absolute; left:0; right:0; bottom:0;
height:1px; background:var(--line);
}
.tech__st > span{
position:relative; display:inline-block; padding-bottom:14px;
}
.tech__st > span::after{
content:""; position:absolute; left:0; right:0; bottom:0;
height:3px; border-radius:2px; background:var(--action);
}
/* ---- LE TRAJET DE LA CHALEUR : QUATRE CARTES RELIÉES ----
Chacune porte son numéro, son picto et deux lignes. Entre deux cartes,
une flèche : elle dit le SENS du trajet, ce qu'une simple juxtaposition
ne dit pas. Les cartes reviennent ici — et nulle part ailleurs dans la
section — parce qu'une suite d'étapes se lit comme une chaîne, et
qu'une chaîne a besoin de maillons visibles. */
.trajet{
display:grid; gap:clamp(12px, 1.5vw, 18px);
margin:0; padding:0; list-style:none;
}
@media (min-width:980px){
.trajet{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
.trajet__pas{
position:relative;
display:grid; grid-template-columns:auto auto 1fr; align-items:center;
gap:12px;
padding:clamp(14px, 1.6vw, 18px);
background:var(--white);
border:1px solid var(--line); border-radius:var(--r);
}
@media (min-width:980px){
/* La flèche, dessinée entre deux cartes. */
.trajet__pas + .trajet__pas::before{
content:""; position:absolute;
left:calc(-1 * clamp(12px, 1.5vw, 18px)); top:50%;
width:clamp(12px, 1.5vw, 18px); height:9px;
transform:translateY(-50%);
background:var(--action-line);
clip-path:polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
}
}
.trajet__num{
display:grid; place-items:center;
width:30px; height:30px; border-radius:50%;
background:var(--action); color:#fff;
font-size:.84rem; font-weight:800; font-variant-numeric:tabular-nums;
}
.trajet__ico{
display:grid; place-items:center;
width:40px; height:40px; border-radius:12px;
background:var(--action-soft); color:var(--action-dark);
}
.trajet__ico svg{ width:22px; height:22px; }
.trajet__txt{ display:grid; gap:4px; min-width:0; }
.trajet__txt strong{ font-size:.97rem; line-height:1.25; color:var(--ink); }
.trajet__txt span{ font-size:.88rem; line-height:1.45; color:var(--ink-soft); }
/* ---- 4. Les points techniques : une liste éditoriale, pas des cartes ----
Deux colonnes dès qu'il y a la place, séparées par des filets d'un
pixel. La première rangée n'a pas de filet du haut : il doublerait celui
de l'intertitre. */
.points{ display:grid; gap:clamp(12px, 1.5vw, 18px); }
@media (min-width:860px){
.points{ grid-template-columns:1fr 1fr; }
/* Le dernier point, s'il est seul sur sa rangée, la prend en entier :
une demi-carte orpheline déséquilibre la grille. */
.point:last-child:nth-child(odd){ grid-column:1 / -1; }
}
.point{
display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px;
padding:clamp(14px, 1.6vw, 18px);
background:var(--white);
border:1px solid var(--line); border-radius:var(--r);
}
/* Le point illustré ouvre une colonne de plus, à gauche, pour sa vignette.
Elle est COLLÉE AU BORD de la carte : détourée, elle ferait un timbre. */
.point--illustre{ grid-template-columns:auto auto 1fr; padding-left:0; overflow:hidden; }
.point__vignette{
display:block; align-self:stretch;
margin:calc(-1 * clamp(14px, 1.6vw, 18px)) 0;
}
.point__vignette img{
display:block; width:clamp(96px, 11vw, 160px); height:100%;
object-fit:cover; object-position:center;
}
@media (max-width:539px){
.point--illustre{ grid-template-columns:auto 1fr; }
.point__vignette{ display:none; }
}
.point__ico{
display:grid; place-items:center; flex:none;
width:38px; height:38px; border-radius:12px;
background:var(--action-soft); color:var(--action-dark);
}
.point__ico svg{ width:20px; height:20px; }
.point__corps{ min-width:0; }
.point__titre{
margin:0 0 6px;
font-size:1rem; font-weight:700; line-height:1.3; color:var(--ink);
}
.point__txt{
margin:0; max-width:56ch;
font-size:.92rem; line-height:1.6; color:var(--ink-soft);
}
/* ==========================================================================
FAQ — LE BOUTON « VOIR PLUS »
========================================================================== */
/* La suite garde le même écart que les cinq premières : dépliée, on ne
doit pas voir où la coupure se trouvait. */
.faq--suite{ margin-top:8px; }
/* L'OUVERTURE EST ANIMÉE PAR UNE CLASSE, pas par `hidden` : un attribut ne
se transitionne pas. La classe est posée à l'affichage puis retirée,
pour que rien ne reste en cours sur la page. */
@keyframes faqEntre{
from{ opacity:0; transform:translateY(-6px); }
to { opacity:1; transform:none; }
}
.faq--entre{ animation:faqEntre .34s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce){ .faq--entre{ animation:none; } }
.faq__plus-zone{ display:flex; justify-content:center; margin-top:clamp(16px, 1.9vw, 22px); }
/* LE BOUTON SE DISTINGUE DU CTA COMMERCIAL, et c'est voulu : le CTA est un
aplat bleu plein qui engage une démarche ; celui-ci n'est qu'un contour,
il déplie du texte. Deux actions de poids très différents ne peuvent pas
porter le même vêtement. */
.faq__plus{
display:inline-flex; align-items:center; gap:9px;
min-height:48px; padding:11px 22px;
background:transparent; color:var(--action-dark);
border:1px solid var(--action-line); border-radius:var(--r-btn);
font:inherit; font-size:.94rem; font-weight:600; cursor:pointer;
transition:background-color .18s ease, border-color .18s ease;
}
.faq__plus:hover{ background:var(--action-soft); border-color:var(--action); }
.faq__plus:active{ background:var(--action-line); }
.faq__plus svg{ transition:transform .2s ease; }
.faq__plus[aria-expanded="true"] svg{ transform:rotate(-90deg); }
/* DEUX FONDS POUR DEUX SUJETS.
« Comment ça marche » et « Budget et devis » se suivaient sur le même
gris, avec chacune une grille de cartes : on ne savait plus laquelle on
lisait. Elles ont désormais chacune la sienne.
LE BLEU TRÈS PÂLE EST UNE EXCEPTION ASSUMÉE. La teinte bleue générale
avait été retirée de la page sur demande ; celle-ci revient à UN SEUL
endroit, pour séparer la section technique de la section commerciale.
Elle reste assez froide pour ne pas recolorer la page — #F3F6FB, soit
deux points de bleu au-dessus du gris neutre. */
.section{ padding-block:var(--section-y); }
.section--grey{ background:var(--gris); }
.section--white{ background:var(--white); }
.section--froid{ background:#F3F6FB; } /* technique : blanc froid */
.section--beige{ background:#FBF8F2; } /* budget : blanc cassé */
/* LE BLOC « TRAJET » DE LA PREMIÈRE VERSION A ÉTÉ RETIRÉ D'ICI.
Il posait un fond blanc, une bordure et un rayon sur chaque étape. Placé
APRÈS la nouvelle composition éditoriale, il l'emportait sur elle pour
toutes les propriétés qu'elle ne redéclare pas : les quatre étapes
revenaient en cartes alors que le reste de la section n'en a plus aucune.
Les règles qui font foi sont celles de « COMMENT ÇA MARCHE », plus haut. */
/* Les engagements, sous le parcours numéroté : même forme éditoriale que
les points techniques, pour que la page n'invente pas un motif de plus. */
.engagements{ margin-top:clamp(32px, 4vw, 60px); }
/* Intertitre de sous-partie — le budget en compte trois. */
.sous-titre{
margin:clamp(22px, 2.6vw, 34px) 0 clamp(14px, 1.6vw, 20px);
font-size:clamp(1.08rem, 1.3vw, 1.28rem); font-weight:800; color:var(--ink);
}
/* ==========================================================================
PERFORMANCE — POURQUOI IL N'Y A PAS DE `content-visibility` ICI.
Il a été posé sur les sections hors écran, puis RETIRÉ. Le gain au
premier rendu est réel, mais il se paie sur une page dont l'en-tête est
un menu d'ancres : tant qu'une section n'a pas été rendue une première
fois, sa hauteur n'est qu'une estimation. Les hauteurs réelles
remplacent les estimations à mesure qu'on descend, la hauteur du
document change sous les pieds du visiteur, et un saut vers « Prix » ou
« Questions » atterrit à côté. Mesuré : un `scrollIntoView` visant une
fiche la laissait 1 133 px plus bas que l'écran.
Une page qui arrive vite au mauvais endroit n'est pas plus rapide.
CE QUI TIENT LIEU D'OPTIMISATION, et qui ne coûte rien à la navigation :
aucune bibliothèque, aucune police distante, un seul fichier de style,
trois scripts locaux, les images en `lazy` sous la ligne de flottaison
avec leurs dimensions déclarées, et le cliché du hero préchargé — un
seul des deux cadrages, selon la largeur de l'écran.
========================================================================== */
/* Conservé pour mémoire : plus aucune section n'emploie ce fond. La
référence termine son parcours sur un bouton posé sur fond clair. */
.section--ink{ background:var(--ink); color:var(--white); }
.section--ink h2{ color:var(--white); }
/* La bande d'avantages était un aplat turquoise. Retirée : une couleur
décorative de plus sur une page qui en comptait six. La section passe
dans l'alternance blanc / gris très clair comme toutes les autres. */
/* En-tête de section : titre centré, chapô centré. */
.section__head{ max-width:70ch; margin:0 auto clamp(26px, 3.2vw, 42px); text-align:center; }
.section__head--left{ margin-inline:0; text-align:left; }
/* Sur-titre en PASTILLE plutôt qu'en ligne de capitales nue : c'est le
signal le plus simple qu'une section commence. */
.eyebrow{
display:inline-block; margin-bottom:14px;
padding:6px 14px; border-radius:999px;
background:var(--action-soft); color:var(--action-dark);
font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
}
.section--ink .eyebrow{ color:#9ff0c8; }
.section__lead{ color:var(--ink-soft); font-size:1.08rem; line-height:1.6; margin-bottom:0; }
.section--ink .section__lead{ color:rgba(255,255,255,.82); }
.section__foot{ margin-top:26px; font-size:.82rem; line-height:1.55; color:var(--ink-mute); text-align:center; }
.section--ink .section__foot{ color:rgba(255,255,255,.78); }
.section__cta{ margin-top:clamp(26px, 3.2vw, 40px); text-align:center; }
/* ==========================================================================
GRILLES
`minmax(min(100%, …), 1fr)` : une carte ne peut jamais dépasser la largeur
de son conteneur, donc aucune ne déborde sur un petit écran.
========================================================================== */
.grid{ display:grid; gap:clamp(16px, 1.8vw, 24px); }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* ==========================================================================
CARTE
========================================================================== */
.card{
display:flex; flex-direction:column;
background:var(--white); color:var(--ink);
border:1px solid rgba(28,28,26,.08);
border-radius:var(--r);
box-shadow:var(--sh-sm);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Survol sobre : l'ombre s'approfondit un peu, la carte ne bouge pas. */
.card:hover{ box-shadow:0 2px 12px rgba(28,28,26,.08); }
.card__body{ padding:clamp(18px, 2vw, 26px); display:flex; flex-direction:column; flex:1; }
.card__title{ margin-bottom:.45em; }
.card__text{ color:var(--ink-soft); font-size:.95rem; margin-bottom:0; }
/* ==========================================================================
PRIX ET DEVIS
Deux blocs posés sous les six facteurs : la liste de ce qu'un devis doit
montrer, et l'encart qui distingue une estimation d'une proposition
chiffrée. L'encart porte un filet bleu à gauche — c'est le seul endroit
de la page où le bleu sert à attirer l'œil sans être une action, et
c'est assumé : la phrase qu'il contient est celle qu'un visiteur pressé
ne doit pas manquer.
========================================================================== */
.devis{
margin-top:clamp(26px, 3vw, 40px);
padding:clamp(20px, 2.4vw, 30px);
background:var(--white);
border:1px solid var(--line); border-radius:var(--r-lg);
}
.devis__titre{
margin:0 0 16px;
font-size:clamp(1.05rem, 1.2vw, 1.18rem); font-weight:700; color:var(--ink);
}
/* Deux colonnes dès qu'il y a la place : sept lignes en file font une
colonne maigre et longue au milieu d'une section large. */
.devis__liste{ display:grid; gap:11px; margin:0; }
@media (min-width:760px){ .devis__liste{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:11px 28px; } }
.devis__liste li{ display:flex; align-items:flex-start; gap:10px; font-size:.95rem; line-height:1.45; color:var(--ink-soft); }
.devis__liste svg{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--action); }
.encart{
margin-top:clamp(16px, 1.8vw, 22px);
padding:clamp(18px, 2.2vw, 26px);
background:var(--cream-deep);
border-left:4px solid var(--action);
border-radius:0 var(--r-ctrl) var(--r-ctrl) 0;
}
.encart__titre{ margin:0 0 9px; font-size:1.02rem; font-weight:700; color:var(--ink); }
.encart__txt{ margin:0; font-size:.95rem; line-height:1.6; color:var(--ink-soft); }
.card__list{ display:grid; gap:9px; margin-top:16px; }
.card__list li{ display:flex; align-items:flex-start; gap:9px; font-size:.93rem; color:var(--ink-soft); }
.card__list svg{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--action); }
.card__foot{ margin-top:auto; padding-top:20px; }
/* Étiquette « OFFRE » en tête de carte produit. */
.card__tag{
align-self:flex-start; margin-bottom:12px;
padding:5px 12px; border-radius:var(--r-btn);
background:var(--action-soft); color:var(--action-dark);
font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.card--featured{ border-color:var(--action); box-shadow:var(--sh); }
.card--featured:hover{ box-shadow:var(--sh-lg); }
/* Carte centrée sur un picto — forme des six cartes blanches que la
référence pose sur son aplat de couleur. */
.card--centre .card__body{ align-items:center; text-align:center; }
.card__picto{
display:inline-flex; align-items:center; justify-content:center;
width:58px; height:58px; margin-bottom:16px;
background:linear-gradient(150deg, var(--action-soft), #f6faff);
border:1px solid var(--action-line);
color:var(--action-dark); border-radius:50%;
}
/* La carte garde son encre : posée sur une bande colorée, elle hériterait
sinon d'un texte blanc — invisible sur son propre fond blanc. */
/* ==========================================================================
FICHE TECHNIQUE
========================================================================== */
.specs{
border:1px solid rgba(28,28,26,.08); border-radius:var(--r);
background:var(--white); box-shadow:var(--sh-sm); overflow:hidden;
}
.specs__row{
display:grid; grid-template-columns:1fr; gap:2px;
padding:14px clamp(16px, 2vw, 22px);
border-bottom:1px solid var(--line);
}
.specs__row:nth-child(odd){ background:rgba(28,28,26,.016); }
.specs__row:last-child{ border-bottom:0; }
.specs__key{ font-size:.78rem; font-weight:800; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.06em; }
.specs__val{ color:var(--ink); font-size:.95rem; }
/* ==========================================================================
MEDIA — texte d'un côté, photographie de l'autre.
C'est la composition qui donne sa densité à une page commerciale : un
argument développé face au produit qu'il décrit. Trois usages sur cette
page — la présentation détaillée, les équipements (image à gauche), et la
fiche technique (visuel au format portrait).
========================================================================== */
.media{ display:grid; gap:clamp(24px, 3.2vw, 50px); align-items:center; }
.media__texte > :last-child{ margin-bottom:0; }
.media__texte p{ color:var(--ink-soft); }
.media__visuel{
margin:0; border-radius:var(--r-lg); overflow:hidden;
box-shadow:var(--sh); background:var(--cream-deep);
}
.media__visuel img{
display:block; width:100%; height:100%;
aspect-ratio:3/2; object-fit:cover; object-position:center;
transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.media__visuel:hover img{ transform:scale(1.04); }
/* ==========================================================================
CE QUI EST COMPRIS — le détail POSTE PAR POSTE.
Remplace le quatuor d'intertitres qui occupait cette place : quatre
phrases ne disaient pas ce que « installation comprise » recouvre
réellement. Chaque poste porte maintenant son icône, sa phrase, et la
liste de ce qu'il couvre.
Aucune photographie ici : les clichés propres du dépôt servent déjà
ailleurs sur la page, et les deux qui restaient montrent un visage
masqué par un émoji. Les postes tiennent donc la largeur, sur deux
colonnes à partir de 900 px.
========================================================================== */
.postes{ display:grid; gap:14px; }
.poste{
display:flex; gap:16px; align-items:flex-start;
background:var(--white);
border:1px solid rgba(28,28,26,.08); border-radius:var(--r);
box-shadow:var(--sh-sm);
padding:clamp(16px, 2vw, 22px);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.poste:hover{ box-shadow:0 2px 12px rgba(28,28,26,.08); border-color:var(--action-line); }
.poste__ico{
display:inline-flex; align-items:center; justify-content:center;
width:46px; height:46px; flex:none;
background:linear-gradient(150deg, var(--action-soft), #f6faff);
border:1px solid var(--action-line); border-radius:var(--r-ctrl);
color:var(--action-dark);
}
.poste__corps{ flex:1; min-width:0; }
.poste__corps h3{ margin:0 0 .3em; font-size:1.06rem; }
.poste__corps p{ margin:0; color:var(--ink-soft); font-size:.95rem; }
.poste__liste{ display:grid; gap:8px; margin:12px 0 0; }
.poste__liste li{ display:flex; align-items:flex-start; gap:9px; font-size:.92rem; color:var(--ink-soft); }
.poste__liste svg{ width:17px; height:17px; flex:none; margin-top:3px; color:var(--action); }
/* Ce qui N'EST PAS compris se dit aussi, et au même endroit. Une liste
d'inclusions sans sa limite se lit comme une promesse ouverte. */
.inclus__note{
margin:clamp(18px, 2.2vw, 26px) 0 0;
padding:18px 20px;
background:var(--blue-soft); border:1px solid var(--action-line);
border-radius:var(--r-ctrl);
font-size:.9rem; line-height:1.6; color:var(--ink-soft);
}
/* ==========================================================================
NOS INSTALLATIONS — CARROUSEL
Le mouvement est porté par un conteneur qui DÉFILE RÉELLEMENT, calé par
`scroll-snap`. La molette, le doigt, la tabulation et les flèches
marchent donc sans une ligne de script ; les boutons ne font qu'appeler
`scrollTo`. Un carrousel bâti sur `transform` et un index en mémoire
perd tout cela.
Les vues voisines dépassent volontairement du cadre à partir de 700 px :
c'est ce débord qui dit qu'il y a autre chose à voir.
========================================================================== */
.galerie__piste{
display:grid; grid-auto-flow:column;
/* TAILLE FIXE, PAS `minmax(0, …)`. Avec un minimum à zéro, la grille
rétrécit les colonnes jusqu'à faire tenir les cinq vues dans la
largeur : plus rien ne dépasse, donc plus rien ne défile. */
grid-auto-columns:100%;
gap:clamp(12px, 1.8vw, 20px);
margin:0; padding:0 0 4px;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scrollbar-width:none;
}
.galerie__piste::-webkit-scrollbar{ display:none; }
.galerie__piste:focus-visible{ box-shadow:var(--focus); border-radius:var(--r-lg); }
.galerie__vue{ min-width:0; scroll-snap-align:center; }
.galerie__fig{
position:relative; margin:0; overflow:hidden;
border-radius:var(--r-lg);
background:var(--cream-deep);
border:1px solid rgba(28,28,26,.08);
box-shadow:var(--sh);
}
.galerie__img{
display:block; width:100%; height:auto;
aspect-ratio:1120/747; object-fit:cover; object-position:center;
transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.galerie__fig:hover .galerie__img{ transform:scale(1.05); }
/* La légende PORTE SON PROPRE VOILE plutôt que de compter sur un calque
posé par-dessus la photographie : le contraste du texte blanc est alors
garanti par la couleur de son propre fond, quelle que soit l'image. */
.galerie__cap{
position:absolute; left:0; right:0; bottom:0; z-index:2;
display:grid; gap:4px;
padding:clamp(44px, 7vw, 76px) clamp(15px, 2vw, 24px) clamp(15px, 2vw, 22px);
background:linear-gradient(180deg, rgba(22,22,22,0) 0%, rgba(22,22,22,.9) 46%, rgba(22,22,22,.94) 100%);
color:var(--white);
}
.galerie__cap strong{ font-size:1.04rem; letter-spacing:-.012em; }
.galerie__cap span{ font-size:.92rem; line-height:1.45; }
/* ---- Commandes ---- */
.galerie__barre{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:8px; margin-top:clamp(16px, 2vw, 24px);
}
.galerie__btn{
display:inline-flex; align-items:center; justify-content:center;
width:48px; height:48px; flex:none; padding:0;
background:var(--white); color:var(--action-dark);
border:1px solid var(--action-line); border-radius:50%;
box-shadow:var(--sh-sm); cursor:pointer;
transition:background-color .18s ease, border-color .18s ease,
box-shadow .18s ease, transform .18s ease;
}
.galerie__btn:hover{
background:var(--action-soft); border-color:var(--action);
box-shadow:0 10px 24px -12px rgba(28,28,26,.5); transform:translateY(-2px);
}
.galerie__btn--lecture{ margin-left:6px; }
.galerie__points{ display:flex; align-items:center; gap:2px; }
/* La pastille visible fait 10 px, mais la CIBLE en fait 30 × 44 : un point
de 10 px est impossible à viser au doigt. */
.galerie__point{
position:relative; width:30px; height:44px; flex:none;
padding:0; border:0; background:none; cursor:pointer;
}
.galerie__point::before{
content:""; position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
width:10px; height:10px; border-radius:999px;
background:var(--action-line);
transition:width .28s ease, background-color .28s ease;
}
.galerie__point:hover::before{ background:var(--action-dark); }
.galerie__point[aria-current="true"]::before{ width:26px; background:var(--action); }
/* ==========================================================================
BANDEAU DE RÉASSURANCE — qualification, dispositifs, marques.
Rangée de logos, comme celle que la référence place avant son pied de
page. Tous ces visuels sont déjà affichés en production sur la page
d'accueil : rien n'est revendiqué ici qui ne le soit déjà ailleurs.
========================================================================== */
.bandeau{
background:linear-gradient(180deg, var(--white) 0%, #FAFAF8 100%);
border-block:1px solid var(--line);
padding-block:clamp(26px, 3.2vw, 46px);
}
/* DEUX BLOCS DE POIDS INÉGAL, séparés d'un filet. En colonnes égales, le
logo RGE — seul de son côté — flottait au milieu d'une moitié vide
tandis que les quatre marques se serraient dans l'autre. */
.bandeau__grille{
display:grid; gap:clamp(22px, 2.6vw, 32px); align-items:center;
grid-template-columns:1fr;
}
@media (min-width:900px){
.bandeau__grille{ grid-template-columns:minmax(0, auto) minmax(0, 1fr); }
.bandeau__bloc + .bandeau__bloc{
border-left:1px solid var(--line);
padding-left:clamp(30px, 4vw, 66px);
}
}
.bandeau__bloc{
display:grid; gap:clamp(13px, 1.5vw, 18px);
justify-items:center; text-align:center;
}
/* LE LIBELLÉ EST BRIDÉ EN LARGEUR, et ce n'est pas cosmétique : c'est lui
qui donnait sa largeur à la colonne de gauche. Sur une seule ligne,
« Travaux réalisés par un professionnel qualifié » mesurait près de
400 px, et le logo RGE se retrouvait centré au milieu d'un vide de sa
fabrication. Sur deux lignes, la colonne se referme sur sa tuile. */
.bandeau__label{
margin:0; max-width:24ch;
font-size:.7rem; font-weight:800; line-height:1.5;
letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.bandeau__logos{
display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
gap:clamp(10px, 1.4vw, 16px);
}
/* LA TUILE. C'est elle qui fait tenir ensemble des logos qui n'ont ni la
même forme, ni la même couleur, ni le même poids : même largeur
minimale, même fond, même filet, même ombre très basse. */
.marque{
display:grid; place-items:center;
min-width:clamp(104px, 9.5vw, 142px);
min-height:clamp(54px, 4.8vw, 68px);
padding:10px clamp(14px, 1.6vw, 22px);
background:var(--white);
border:1px solid var(--line); border-radius:var(--r-ctrl);
box-shadow:0 1px 2px rgba(28,28,26,.04), 0 14px 28px -22px rgba(28,28,26,.55);
}
.marque--rge{
min-width:clamp(124px, 11vw, 166px);
min-height:clamp(86px, 7.4vw, 112px);
}
.bandeau__logos img{ height:clamp(32px, 3.6vw, 44px); width:auto; object-fit:contain; }
/* Le logo RGE est carré : à hauteur égale il paraît deux fois plus petit. */
.bandeau__logos img.bandeau__rge{ height:clamp(58px, 5.6vw, 76px); }
/* Les logos de marques sont des mots : ils se lisent à taille plus modeste,
mais plus celle d'une note de bas de page. */
.bandeau__logos--marques img{ height:clamp(20px, 2.3vw, 28px); }
/* ==========================================================================
DÉROULEMENT — gros cercles numérotés reliés par un trait,
comme le bloc « Comment profiter des services ? » de la référence.
========================================================================== */
.parcours{ display:grid; gap:clamp(18px, 2vw, 24px); }
.jalon{ display:flex; gap:16px; align-items:flex-start; text-align:left; }
/* Le parcours est passé sur fond gris très clair : le bleu nuit est réservé
à l'appel à l'action final et au pied de page. Les pastilles numérotées
portent donc le vert de la marque, pas du blanc sur couleur. */
.jalon__num{
position:relative; z-index:1;
display:inline-flex; align-items:center; justify-content:center;
width:60px; height:60px; flex:none;
/* Le départ du dégradé doit rester assez sombre pour porter un chiffre
blanc : 3,86:1, au-dessus du seuil de 3:1 d'un grand texte gras. */
background:linear-gradient(160deg, #2F7DFA, var(--action));
color:var(--white);
border:4px solid var(--white); border-radius:50%;
box-shadow:var(--sh-action);
font-size:1.3rem; font-weight:800;
}
.jalon h3{ margin:0 0 .35em; color:var(--ink); }
.jalon p{ margin:0; font-size:.93rem; color:var(--ink-soft); }
/* ==========================================================================
FAQ — natif : clavier et lecteurs d'écran sans une ligne de JS
========================================================================== */
/* ACCORDÉON — SANS OMBRE PORTÉE. Quatorze cartes à ombre empilées
faisaient une pile de tickets ; un filet d'un pixel suffit à détacher
chaque question du fond. L'ombre ne revient qu'à l'ouverture, très
basse, pour dire laquelle est dépliée. */
.faq{ display:grid; gap:8px; }
.faq__item{
background:var(--white); border:1px solid var(--line);
border-radius:var(--r-ctrl); overflow:hidden;
transition:box-shadow .2s ease, border-color .2s ease;
}
.faq__item[open]{
border-color:var(--action-line);
box-shadow:0 1px 2px rgba(28,28,26,.04), 0 10px 22px -18px rgba(28,28,26,.5);
}
.faq__q{
position:relative;
display:flex; align-items:center; gap:14px;
/* 56 px de haut au minimum : c'est la cible tactile, et elle prime sur
la compacité. Le reste de l'espace a été repris. */
min-height:56px; padding:15px 60px 15px clamp(16px, 1.8vw, 22px);
font-weight:700; line-height:1.35; cursor:pointer; list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ background:var(--action-soft); }
/* Le chevron est posé dans une PASTILLE ronde : une question dépliable se
reconnaît alors sans avoir à viser le trait. */
.faq__chip{
position:absolute; right:clamp(14px, 1.6vw, 18px); top:50%;
transform:translateY(-50%);
width:34px; height:34px; border-radius:50%;
background:var(--action-soft); transition:background-color .18s ease;
}
.faq__q:hover .faq__chip{ background:var(--action-line); }
.faq__q::after{
content:""; position:absolute; right:clamp(24px, 2.2vw, 28px); top:calc(50% - 7px);
flex:none; width:9px; height:9px;
border-right:2.5px solid var(--action-dark); border-bottom:2.5px solid var(--action-dark);
transform:rotate(45deg); transition:transform .22s ease, top .22s ease;
}
.faq__item[open] .faq__q::after{ transform:rotate(225deg); top:calc(50% - 3px); }
.faq__a{ padding:0 clamp(16px, 1.8vw, 22px) 18px; color:var(--ink-soft); font-size:.95rem; line-height:1.6; }
.faq__a p{ margin:0; }
/* ==========================================================================
AVIS CLIENTS
La section n'est rendue que si des avis authentiques existent dans
`contenu.js`. Tant que la liste est vide, rien n'est affiché.
========================================================================== */
/* ---- Avis clients ----
LES ÉTOILES VIDES SONT DESSINÉES, pas omises : sans elles une note de 4
et une note de 5 ont la même largeur et ne se distinguent plus d'un coup
d'œil. Le jaune des étoiles est celui de l'autocollant du hero — une
seule teinte chaude sur la page. */
.card--avis .card__body{ gap:0; }
.avis__note{ display:flex; gap:3px; margin:0 0 12px; }
.etoile{ display:inline-flex; color:#D9E2F0; }
.etoile svg{ width:18px; height:18px; }
.etoile--pleine{ color:#F0B400; }
.etoile--pleine svg{ fill:currentColor; }
/* Une citation : marges du navigateur remises à zéro. */
blockquote.card__text{ margin:0; font-style:normal; }
.avis__meta{ margin-top:14px; font-size:.85rem; color:var(--ink-mute); }
.avis__src{ font-weight:700; }
/* D'où viennent les avis. Rendue avec les cartes, jamais séparée d'elles. */
.avis__origine{
margin:clamp(16px, 2vw, 22px) 0 0;
font-size:.78rem; line-height:1.5; color:var(--ink-mute);
}
/* La bande de réassurance a été supprimée pour de bon. Elle avait d'abord
été une bande autonome sous l'en-tête — trois bandes horizontales
d'affilée s'y empilaient sans respiration — puis une ligne à l'intérieur
du hero. Le commanditaire l'a retirée des deux endroits : le pied du
questionnaire porte déjà les mêmes garanties.
========================================================================== */
/* ==========================================================================
SIMULATEUR — section autonome, comme sur la référence où le questionnaire
occupe sa propre page. Ici il est juste sous le hero : même séparation,
sans faire changer de page au visiteur.
========================================================================== */
.simu{
max-width:720px; margin-inline:auto;
background:var(--white); color:var(--ink);
border:1px solid rgba(28,28,26,.08); border-radius:var(--r-lg);
box-shadow:var(--sh-lg); overflow:hidden;
}
.simu__head{ padding:clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 30px) 0; }
/* LE TITRE DU QUESTIONNAIRE, DANS LA CARTE.
Il vivait au-dessus d'elle, dans l'en-tête de section. Le commanditaire
l'a voulu à l'intérieur, à la place du badge « Gratuit et sans
engagement » — qui a disparu avec lui.
CENTRÉ, et sur toute la largeur de la carte : c'est la première chose
qu'on lit en y entrant, et un titre aligné à gauche au-dessus d'un fil
d'étapes centré donnait deux axes de lecture pour un même bloc. */
.simu__intro{ text-align:center; }
/* LE TITRE EST ENCADRÉ, sur demande. Un cartouche dans le bleu doux du
système, pas une seconde étiquette orange : l'orange est la voix de la
promesse commerciale du hero, et deux oranges sur la même page se
disputeraient l'attention. Ici le titre ouvre un formulaire, il annonce
une action — le bleu de l'action lui va.
`inline-block` pour que le cadre épouse le texte au lieu de barrer
toute la carte ; le centrage vient de `.simu__intro{text-align:center}`,
que l'élément hérite sans rien faire de plus. */
.simu__titre{
display:inline-block;
/* `max-width:34ch` BRIDAIT LE TITRE À 34 CARACTÈRES pour 48 : c'est lui,
et non la largeur disponible, qui le cassait en deux. */
margin:0; max-width:min(100%, 46ch); margin-inline:auto;
padding:.5em 1.05em .56em;
background:linear-gradient(135deg, var(--action) 0%, var(--action-dark) 100%);
color:#fff;
border-radius:999px;
box-shadow:0 12px 26px -16px rgba(0, 82, 204, .85);
font-size:clamp(1.02rem, 1.75vw, 1.5rem); line-height:1.25;
letter-spacing:-.018em; font-weight:800;
}
.simu__sous-titre{
/* LE TITRE EST DEVENU UN CARTOUCHE PLEIN. Une marge de 7 px, qui
convenait sous un titre en texte nu, colle le sous-titre contre un
bloc coloré. Elle est doublée. */
margin:15px auto 0; max-width:48ch;
font-size:.92rem; line-height:1.5; color:var(--ink-soft);
}
/* FIL D'ÉTAPES NOMMÉ. Quatre pastilles reliées par un trait disaient
COMBIEN d'étapes restaient, jamais lesquelles. Chaque pastille porte
maintenant le nom de son étape : le visiteur lit le parcours entier
avant de commencer, et voit que les coordonnées viennent en dernier.
LE TRAIT DE LIAISON RELIE LES PASTILLES, PAS LES COLONNES. Il était
autrefois un élément à part, posé dans le flux à la suite de chaque
pastille ; cette mise en page-là a disparu avec les noms. Il est
désormais tracé par la colonne de DROITE de chaque paire, qui sait où
est sa voisine de gauche : une demi-colonne plus la gouttière. Il n'y a
donc pas de trait après la quatrième, et aucun ne pend dans le vide.
Il se peint à la hauteur du centre des pastilles et s'arrête à six
pixels de chacune : collé, il ferait un trait d'union entre deux
chiffres au lieu d'un chemin entre deux étapes. */
.stepper{
--dot: 32px; /* diamètre des pastilles */
--fil-gap: 8px; /* gouttière entre deux colonnes */
display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
gap:var(--fil-gap); margin:18px 0 10px;
}
.stepper__item{
position:relative;
display:grid; justify-items:center; gap:7px; min-width:0; text-align:center;
}
.stepper__item + .stepper__item::before{
content:"";
position:absolute;
/* Le centre de la pastille est à une moitié de diamètre du haut ; le
trait fait 2 px, on le remonte d'un pixel pour qu'il soit centré
dessus et non posé en dessous. */
top:calc(var(--dot) / 2 - 1px);
/* Bord droit de la pastille précédente, plus six pixels d'air. */
left:calc(-50% - var(--fil-gap) + var(--dot) / 2 + 6px);
/* Bord gauche de la pastille de cette colonne, moins six pixels. */
right:calc(50% + var(--dot) / 2 + 6px);
height:2px; border-radius:1px;
background:var(--line);
transition:background-color .25s ease;
}
/* LE TRAIT SE REMPLIT DERRIÈRE LE VISITEUR. Il appartient à la colonne de
droite, mais c'est l'étape de GAUCHE qui décide de sa couleur : un trait
bleu signifie « cette étape-là est faite », pas « celle-ci est en
cours ». D'où le sélecteur de voisinage. */
.stepper__item[data-state="done"] + .stepper__item::before{ background:var(--action); }
.stepper__nom{
font-size:.72rem; line-height:1.3; font-weight:600; color:var(--ink-mute);
transition:color .2s ease;
}
.stepper__item[data-state="current"] .stepper__nom{ color:var(--action-dark); font-weight:700; }
.stepper__item[data-state="done"] .stepper__nom{ color:var(--ink-soft); }
.stepper__dot{
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; flex:none; border-radius:50%;
border:2px solid var(--line); background:var(--white);
color:var(--ink-mute); font-size:.85rem; font-weight:800;
}
.stepper__item[data-state="current"] .stepper__dot{ border-color:var(--action); color:var(--action-dark); background:var(--action-soft); }
.stepper__item[data-state="done"] .stepper__dot{ border-color:var(--action); background:var(--action); color:var(--white); }
.simu__meta{ display:flex; justify-content:space-between; gap:12px; font-size:.82rem; color:var(--ink-mute); font-weight:600; margin:18px 0 10px; }
.progress{ height:8px; background:var(--grey); border-radius:999px; overflow:hidden; }
.progress__bar{
height:100%; width:0; border-radius:inherit;
background:linear-gradient(90deg, #3D8BFF, var(--action));
transition:width .3s cubic-bezier(.4,0,.2,1);
}
.simu__body{ padding:clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 30px); }
/* CHANGEMENT D'ÉTAPE. Le panneau est reconstruit à chaque étape : une
animation d'entrée suffit à dire qu'on a avancé, là où le contenu
changeait sans prévenir. Courte — 320 ms — parce qu'elle se joue à
chaque fois et qu'une attente répétée devient une gêne. */
@keyframes etapeEntre{
from{ opacity:0; transform:translateY(10px); }
to { opacity:1; transform:none; }
}
.step-panel{ animation:etapeEntre .32s cubic-bezier(.2,.7,.3,1) both; }
.simu__q{ font-size:1.14rem; font-weight:800; margin:0 0 4px; }
.simu__hint{ font-size:.88rem; color:var(--ink-mute); margin:0 0 18px; }
.field-group{ margin-bottom:22px; }
.field-group:last-of-type{ margin-bottom:0; }
.field-group__label{ font-weight:700; font-size:.96rem; margin:0 0 10px; }
/* Grandes tuiles de réponse, EMPILÉES : une par ligne, à toutes les
largeurs. Côte à côte, les libellés longs se coupaient et l'œil hésitait
entre lire en ligne ou en colonne. */
.choices{ display:grid; gap:10px; grid-template-columns:1fr; }
.choice{
display:flex; align-items:center; gap:11px;
min-height:62px; padding:13px 16px;
background:var(--white); color:var(--ink);
border:1.5px solid var(--line); border-radius:var(--r-ctrl);
box-shadow:0 1px 2px rgba(28,28,26,.04);
font:inherit; font-size:.97rem; font-weight:600; text-align:left; cursor:pointer;
transition:border-color .16s ease, background-color .16s ease,
box-shadow .16s ease, transform .16s ease;
}
.choice:hover{
border-color:var(--action); background:var(--action-soft);
box-shadow:0 8px 20px -12px rgba(28,28,26,.5); transform:translateY(-1px);
}
.choice svg{ width:22px; height:22px; flex:none; color:var(--action-dark); }
/* Réponse retenue : le liseré intérieur épaissit le contour sans décaler
la tuile d'un pixel, ce que ferait une bordure plus large. */
.choice[aria-checked="true"]{
border-color:var(--action); background:var(--action-soft); color:var(--action-dark);
box-shadow:inset 0 0 0 1px var(--action), 0 8px 20px -12px rgba(0,102,255,.6);
}
.fields{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:.88rem; font-weight:700; }
.field input{
min-height:56px; padding:13px 16px;
background:var(--white); color:var(--ink);
border:1.5px solid var(--line); border-radius:var(--r-ctrl);
box-shadow:0 1px 2px rgba(28,28,26,.04);
font:inherit; font-size:1rem; width:100%;
transition:border-color .16s ease, box-shadow .16s ease;
}
.field input:hover{ border-color:#c3d2d8; }
.field input[aria-invalid="true"]{ border-color:var(--red); background:var(--red-soft); }
.field__err{ font-size:.84rem; color:var(--red); font-weight:600; }
.field__err[hidden]{ display:none; }
.consent{ display:flex; align-items:flex-start; gap:11px; margin-top:4px; font-size:.88rem; color:var(--ink-soft); line-height:1.5; }
.consent input{ width:22px; height:22px; flex:none; margin-top:2px; accent-color:var(--action); }
.consent input[aria-invalid="true"]{ outline:2px solid var(--red); outline-offset:2px; }
.simu__nav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.simu__nav .btn{ flex:1 1 160px; }
/* Retour : pas d'ombre colorée, ce n'est pas une action principale. */
.btn--back{ --btn-bg:transparent; --btn-fg:var(--ink-soft); --btn-bd:var(--line); --btn-sh:none; flex:0 0 auto; }
.btn--back:hover{ --btn-bg:var(--grey); --btn-bd:var(--ink-mute); }
.notice{ display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:var(--r-ctrl); font-size:.91rem; line-height:1.5; margin:14px 0 0; }
.notice--error{ background:var(--red-soft); color:var(--red); border:1px solid #f0c9c5; font-weight:600; }
.notice--info{ background:var(--blue-soft); color:var(--ink); border:1px solid var(--line); }
.notice svg{ width:19px; height:19px; flex:none; margin-top:2px; }
.simu__disclaimer{ margin:16px 0 0; font-size:.78rem; line-height:1.5; color:var(--ink-mute); }
.simu__foot{
display:grid; gap:10px; grid-template-columns:repeat(3, 1fr);
padding:16px clamp(18px, 2.2vw, 30px);
background:var(--cream-deep); border-top:1px solid var(--line);
font-size:.78rem; font-weight:600; color:var(--ink-soft); text-align:center;
}
.simu__foot div{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.simu__foot svg{ width:21px; height:21px; color:var(--action); }
/* Écran de confirmation */
.done{ text-align:center; }
.done__ico{
display:inline-flex; align-items:center; justify-content:center;
width:66px; height:66px; margin-bottom:18px;
background:linear-gradient(150deg, var(--action-soft), #f6faff);
border:1px solid var(--action-line);
color:var(--action-dark); border-radius:50%;
}
.done__ico svg{ width:32px; height:32px; }
.done p{ color:var(--ink-soft); }
/* Le titre de la confirmation vit dans l'en-tête de SECTION, pas dans la
carte : voir `rendreSucces()`. La carte ne porte donc qu'une ligne
d'introduction au récapitulatif. */
.done__intro{ margin:0; font-size:.95rem; }
.done__recap{
text-align:left; margin-top:18px; padding:16px;
background:var(--cream-deep); border:1px solid var(--line); border-radius:var(--r-ctrl);
font-size:.92rem;
}
.done__recap dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; }
.done__recap dt{ color:var(--ink-mute); font-weight:600; }
.done__recap dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
/* ==========================================================================
CONDITIONS DE L'OFFRE — BLOC DÉPLIABLE, TOUT EN BAS.
Six paragraphes de mentions déroulés en pleine page coupaient le parcours
juste avant l'appel à l'action final. Ils sont désormais repliés, après
ce dernier. `` natif : clavier et lecteurs d'écran sans une
ligne de script, et le contenu reste dans le document — donc indexable
et consultable, ce qu'un onglet en JavaScript ne garantit pas.
========================================================================== */
.conditions-section{ padding-block:clamp(22px, 2.6vw, 34px); }
.conditions{
background:var(--cream-deep);
border:1px solid var(--line); border-radius:var(--r);
overflow:hidden;
}
.conditions__ouvre{
display:flex; align-items:center; gap:14px;
padding:14px clamp(16px, 2vw, 22px);
font-size:.95rem; font-weight:700; color:var(--ink);
cursor:pointer; list-style:none;
}
.conditions__ouvre::-webkit-details-marker{ display:none; }
.conditions__ouvre:hover{ background:var(--action-soft); }
.conditions__chip{
position:relative; margin-left:auto;
width:26px; height:26px; flex:none;
}
.conditions__chip::before,
.conditions__chip::after{
content:""; position:absolute; left:50%; top:50%;
width:13px; height:2px; border-radius:2px;
background:var(--action-dark);
transform:translate(-50%,-50%);
transition:transform .22s ease, opacity .22s ease;
}
.conditions__chip::after{ transform:translate(-50%,-50%) rotate(90deg); }
.conditions[open] .conditions__chip::after{ opacity:0; transform:translate(-50%,-50%) rotate(0); }
.conditions__corps{
padding:0 clamp(16px, 2vw, 22px) 18px;
font-size:.78rem; line-height:1.55; color:var(--ink-soft);
}
.conditions__corps p{ margin:0 0 .7em; }
.conditions__corps p:last-child{ margin-bottom:0; }
/* ==========================================================================
BANDEAU RÉGLEMENTAIRE FRANCE RÉNOV'
Mention imposée par l'arrêté du 7 juillet 2026, en vigueur au 01/10/2026 :
texte reproduit mot pour mot, sans bouton de fermeture.
========================================================================== */
/* Hauteur réduite : la mention reste obligatoire et pleinement lisible, mais
elle ne doit pas peser autant qu'une section. */
.frenov{ background:var(--blue-soft); border-block:1px solid var(--line); }
.frenov__band{ display:flex; align-items:center; gap:13px; padding:10px 0; text-decoration:none; color:var(--ink); }
.frenov__logo{ height:28px; width:auto; flex:none; }
.frenov__txt{ font-size:.82rem; line-height:1.4; }
.frenov__url{ color:var(--blue); font-weight:700; white-space:nowrap; }
.frenov__arrow{ margin-left:auto; flex:none; color:var(--blue); }
.frenov__arrow svg{ width:20px; height:20px; }
/* ==========================================================================
PIED DE PAGE
========================================================================== */
/* Pied de page CLAIR, comme celui de la référence (#f5faff sur #212529).
Le bleu nuit ne sert plus nulle part comme fond de section. */
.footer{ background:#f5faff; color:#3f4b5c; padding-block:34px 26px; border-top:1px solid var(--line); }
.footer__in{
display:flex; flex-wrap:wrap; gap:20px 32px;
align-items:flex-start; justify-content:space-between;
padding-bottom:22px; border-bottom:1px solid var(--line);
}
.footer strong{ color:var(--ink); font-size:1.02rem; }
.footer__links{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.footer__links a{ display:inline-flex; align-items:center; min-height:44px; color:var(--blue); text-decoration:underline; font-size:.9rem; }
.footer__legal{ margin:18px 0 0; font-size:.8rem; line-height:1.55; color:var(--ink-mute); }
/* ==========================================================================
BANDEAU COOKIES + CTA FIXE MOBILE
========================================================================== */
.cmp{
position:fixed; left:0; right:0; bottom:0; z-index:90;
background:var(--white); border-top:1px solid var(--line);
box-shadow:0 -10px 40px -14px rgba(28,28,26,.45);
}
.cmp[data-open="false"]{ display:none; }
/* LE BANDEAU NE MASQUE PLUS LE BAS DE LA PAGE.
Il est en `position:fixed` : sans réserve, ses ~177 px de hauteur
recouvrent la fin du document — mentions légales et liens compris. Le
script de consentement mesure sa hauteur réelle (elle dépend du retour
à la ligne du texte, donc de la largeur) et la publie dans `--cmp-h` ;
la page la réserve ici. Valeur de repli à 0 : si le script n'a pas
encore mesuré, rien ne bouge. */
body{ padding-bottom:var(--cmp-h, 0px); }
html{ scroll-padding-bottom:calc(var(--cmp-h, 0px) + 12px); }
.cmp__in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding-block:14px; }
.cmp__in p{ margin:0; flex:1 1 280px; font-size:.88rem; line-height:1.5; }
.cmp__actions{ display:flex; gap:10px; flex:0 0 auto; }
.cmp__actions .btn{ min-height:48px; padding-inline:20px; }
.sticky-cta{
position:fixed; left:0; right:0; bottom:0; z-index:70;
padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.9); border-top:1px solid var(--line);
box-shadow:0 -10px 34px -16px rgba(28,28,26,.45);
backdrop-filter:saturate(1.6) blur(14px);
}
.sticky-cta[data-hidden="true"]{ display:none; }
/* Deux barres superposées en bas d'écran masqueraient le contenu. */
.cmp[data-open="true"] ~ .sticky-cta{ display:none; }
/* ==========================================================================
RESPONSIVE — testé à 320, 375, 390, 768, 1024 et 1440 px
========================================================================== */
/* ---- Très petits écrans (320 px) ---- */
/* ---- En-tête compact sur téléphone ----
Sous 480 px, la signature de la marque prend deux lignes et pousse la
barre à 90 px : sur une page d'acquisition, c'est de la hauteur prise
au premier écran, donc au bouton. */
@media (max-width:479px){
.brand em{ display:none; }
.brand img{ width:44px; }
.brand strong{ font-size:1.06rem; }
}
@media (max-width:359px){
.simu__foot{ grid-template-columns:1fr; text-align:left; }
.simu__foot div{ flex-direction:row; align-items:center; }
/* Deux réponses côte à côte deviennent illisibles sous 360 px. */
.choices{ grid-template-columns:1fr; }
/* La flèche du bandeau France Rénov' pousse la bande 6 px hors de l'écran.
Elle est décorative (aria-hidden) : on la retire plutôt que d'afficher
un demi-chevron. */
.frenov__arrow{ display:none; }
/* Les trois bénéfices restent en file : trois colonnes sous 360 px ne
laisseraient pas 100 px par libellé. */
.atout{ padding:12px 14px; }
.atout__ico{ width:30px; height:30px; }
.atout__ico svg{ width:17px; height:17px; }
.atout__txt strong{ font-size:.9rem; }
.atout__txt span{ font-size:.83rem; }
.officiel + .officiel{ border-left:0; padding-left:0; }
}
/* ---- Mobile : le CTA fixe laisse la place qu'il occupe ----
SUR IPHONE, LE CTA FIXE EST LUI-MÊME REMONTÉ par `safe-area-inset-bottom`
pour passer au-dessus de la barre d'accueil. Sans ajouter la même valeur
ici, le bas de la page restait caché derrière lui de la hauteur exacte
de cette barre. */
@media (max-width:1023px){
/* RÉSERVE DU BAS D'ÉCRAN — LE MAXIMUM DES DEUX BARRES, PAS LEUR SOMME.
Deux éléments fixes se disputent le bas de l'écran : la barre d'action
(84 px) et le bandeau de consentement (`--cmp-h`, mesuré par le script,
177 px à 390 px de large). Ils ne s'affichent JAMAIS ensemble — la règle
`.cmp[data-open="true"] ~ .sticky-cta` masque la barre tant que le
bandeau est là. Les additionner réserverait 261 px pour un seul objet
affiché, et creuserait un vide sous le pied de page.
Cette règle écrasait la réserve générale déclarée plus haut, puisqu'elle
vient après elle dans la feuille : le bandeau continuait donc de
recouvrir la fin du document sur téléphone, c'est-à-dire exactement là
où il est le plus haut. */
body{ padding-bottom:max(calc(84px + env(safe-area-inset-bottom)), var(--cmp-h, 0px)); }
}
/* ---- Hero empilé (< 900 px) : la photo reprend son format d'origine ----
Le recadrage en 4/3 n'a de sens que dans la colonne de droite, où il
remplit la hauteur du texte. Empilée pleine largeur, la même image en 4/3
mesurait 539 px de haut sur tablette et repoussait tout le reste. En 16/9,
soit exactement le format du fichier, elle n'est pas recadrée du tout et
le premier écran reste utile. */
@media (max-width:999px){
/* Empilé, le hero montre la photographie SOUS le discours : le titre et
le bouton doivent tomber dans le premier écran du téléphone. */
.hero__grille{ gap:clamp(18px, 3vw, 26px); }
}
/* ---- Les blocs texte + image passent côte à côte (≥ 900 px) ---- */
@media (min-width:900px){
.media{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
/* Fiche technique : le visuel est au format portrait, il prend donc moins
de largeur, et le tableau de caractéristiques s'aligne en haut. */
.media--portrait{ grid-template-columns:minmax(0, .72fr) minmax(0, 1fr); align-items:start; }
/* Pas de 4/5 imposé : les clichés sont en 3/2, un portrait forcé en
amputait près de la moitié. La colonne est élargie à la place. */
/* Ce qui est compris : deux colonnes de postes. Six encarts en file
indienne donnaient une section interminable. */
.postes{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* ---- Carte produit : visuel à gauche, offre à droite (≥ 900 px) ---- */
@media (min-width:900px){
.produit{ grid-template-columns:minmax(0, .82fr) minmax(0, 1fr); }
}
/* ---- Le hero passe en deux colonnes (≥ 1000 px) ----
La carte du discours à gauche, la photographie derrière et tout autour.
Pas avant 1000 px : en dessous, la carte tomberait sous 460 px et le
titre se briserait en quatre lignes. */
@media (min-width:1000px){
.hero{ padding-block:0; }
.hero__grille{
/* 54 / 46 : la colonne de gauche porte trois bénéfices côte à côte. */
grid-template-columns:minmax(0, 54fr) minmax(0, 46fr);
align-items:center;
gap:clamp(18px, 2vw, 32px);
/* LE HERO DOIT TENIR DANS UN ÉCRAN. Il mesurait 992 px sur une fenêtre
de 900 : on ne voyait ni la bande d'engagements ni la fin de la
photographie, et l'ensemble paraissait mal cadré. Borné à la hauteur
de la fenêtre moins l'en-tête, il tient d'un seul tenant. */
min-height:min(calc(100vh - var(--header-h)), 760px);
padding-block:clamp(20px, 2.2vw, 34px);
}
/* LE DÉFAUT DE CENTRAGE VENAIT BIEN DE LÀ, mais la correction est
ailleurs. Une marge interne ajoutée au bloc de texte éloignait le
titre du bord — et du même coup du LOGO juste au-dessus, resté, lui,
sur la gouttière. Le titre démarrait 78 px plus à droite que la
marque : plus rien ne s'alignait sur la verticale gauche.
C'est la gouttière de la page qui a été élargie à la place : elle
écarte TOUT du bord en même temps, logo compris. */
.hero__objets{ padding-right:clamp(16px, 2.4vw, 40px); }
.hero__sticker{ display:block; top:4%; right:0; z-index:3; }
/* La colonne de droite n'a pas de contenu visible : elle sert d'ancre aux
deux objets posés sur la photographie. */
.hero__objets{ display:block; align-self:stretch; }
/* La rangée des trois bénéfices est posée à partir de 700 px : rien à
redéclarer ici. Les règles des quatre grosses pastilles sont parties
avec elles. */
.hero__dispositifs{
display:block; bottom:6%; right:0; z-index:2;
width:clamp(300px, 22vw, 348px);
}
}
/* Entre 1000 et 1229 px, la colonne de droite n'a plus que 450 px : la
carte des dispositifs se recentre verticalement. L'autocollant qui
l'obligeait auparavant à céder la place n'existe plus. */
@media (min-width:1000px) and (max-width:1229px){
/* L'étiquette et la carte se chevaucheraient : l'étiquette cède la
place, le titre porte déjà la même promesse avec son astérisque. */
.hero__sticker{ display:none; }
.hero__dispositifs{ bottom:auto; top:50%; transform:translateY(-50%); }
}
/* ---- Carrousel : les vues voisines dépassent du cadre ----
Une vue pleine largeur ne dit pas qu'il y en a d'autres. Dès que la
place le permet, la suivante déborde : c'est l'indice le plus simple
qu'on peut continuer. */
@media (min-width:700px){
.galerie__piste{ grid-auto-columns:62%; }
}
@media (min-width:1100px){
.galerie__piste{ grid-auto-columns:42%; }
}
/* ---- Tablette (≥ 768 px) ---- */
@media (min-width:768px){
:root{ --header-h:78px; }
.specs__row{ grid-template-columns:240px 1fr; gap:16px; align-items:baseline; }
.frenov__txt{ font-size:.9rem; }
/* Les jalons s'alignent horizontalement et le trait de liaison apparaît,
comme sur la référence. */
.parcours{ grid-auto-flow:column; grid-auto-columns:1fr; }
.jalon{ flex-direction:column; text-align:center; align-items:center; position:relative; }
.jalon::before{
content:""; position:absolute; top:27px; left:calc(-50% + 28px); width:calc(100% - 56px);
height:2px; background:var(--action-line);
}
.jalon:first-child::before{ display:none; }
}
/* ---- Ordinateur (≥ 1024 px) ---- */
@media (min-width:1024px){
/* Hauteur d'en-tête imposée : 82 à 90 px. */
:root{ --header-h:86px; }
.nav{ display:flex; }
.burger{ display:none; }
.nav-panel{ display:none !important; }
/* TROIS CARTES PAR RANGÉE. Laissée à `auto-fit`, la grille passait à
quatre colonnes au-delà de 1300 px : six avantages se répartissaient
alors en 4 + 2. Trois colonnes donnent 3 + 3. */
.grid--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
/* Le CTA fixe n'a plus lieu d'être : la page tient dans la largeur. */
.sticky-cta{ display:none !important; }
}
/* ---- CHAQUE BOUTON N'APPARAÎT QU'OÙ IL TIENT ----
LA BARRE ÉTAIT SURCHARGÉE, et c'est le nom de la marque qui payait.
Mesuré : « Aides Équilibre Habitat » réclame 186 px sur une ligne, plus
55 px de logo et de gouttière — 241 px en tout. À 1 024 px il n'en
recevait que 107, écrasé entre six liens de navigation (521 px), le
bouton d'appel (208 px) et la bascule de thème. Il tombait donc sur
TROIS lignes, dans une barre qui en fait 86 de haut.
Les seuils ci-dessous ne sont pas des chiffres ronds : chacun est la
largeur à partir de laquelle la somme des éléments laisse au nom ses
241 px. On n'y gagne pas seulement de la place — c'est aussi ce qui
rend la barre aérée au lieu d'être pleine à ras bord. */
@media (min-width:1200px){
.header__cta{ display:inline-flex; min-height:48px; padding-inline:22px; }
}
@media (min-width:1440px){
.header__rappel{ display:inline-flex; min-height:48px; padding-inline:18px; }
}
/* ---- Impression ---- */
@media print{
.site-header,.sticky-cta,.cmp,.simu__foot{ display:none !important; }
body{ padding-bottom:0; background:#fff; }
}
/* ==========================================================================
PREMIER ÉCRAN SUR TÉLÉPHONE
La première question du formulaire doit tomber dans le premier écran d'un
390 × 844. Le hero y était à 831 px et la question à 1214 : titre, chapô,
photo, bénéfices, deux boutons et une mention, chacun à sa taille
d'ordinateur, puis un en-tête de section complet avant la question.
CE BLOC DOIT RESTER EN FIN DE FEUILLE. À spécificité égale, c'est la
dernière règle qui l'emporte : placé plus haut, il était écrasé par les
règles du simulateur définies après lui.
========================================================================== */
@media (max-width:767px){
.hero__grille{ gap:14px; }
.hero__kicker{ margin-bottom:8px; font-size:.72rem; }
/* LA PENTE DESCEND DE 7,8 À 7,4 vw, ET CE DEMI-PIXEL CHANGE TOUT.
Seuil mesuré du passage à trois lignes, par balayage : 7,50 vw à
320 px, 7,69 à 390, 7,67 à 430. À 7,8 on était juste au-dessus — le
titre basculait sur trois lignes et laissait « Remplacez » seul,
constaté sur iPhone. À 7,4 il tient sur deux lignes de 320 à 430,
pour 1,5 px de corps en moins à 390. */
.hero__titre{ font-size:clamp(1.6rem, 7.25vw, 2.1rem); margin-bottom:20px; }
.hero__chapo{ margin-bottom:22px; font-size:1.02rem; line-height:1.4; }
/* DEUX DE FRONT SUR TÉLÉPHONE. Les quatre pastilles en file coûtaient
quatre rangées là où les trois bénéfices précédents en coûtaient
trois : le premier écran s'allongeait de près de 50 px, et la première
question du formulaire reculait d'autant. En 2 × 2, le hero rend plus
que ce que les pastilles ont pris. */
.atouts{ margin-bottom:24px; }
.atout{ padding:14px 16px; gap:12px; }
.atout__ico{ width:32px; height:32px; }
.atout__ico svg{ width:18px; height:18px; }
/* La pastille de titre reprend sa taille de téléphone. */
.hero__kicker{ padding:5px 12px; font-size:.82rem; }
/* UNE BANDE DE PHOTOGRAPHIE AU-DESSUS DE LA CARTE. Le padding du haut
est la seule chose qui la laisse voir : la carte couvre le reste.
SA HAUTEUR EST EN `vw`, ET CE N'EST PAS UN DÉTAIL. Le cliché du
téléphone fait 1200 × 814 ; mise à l'échelle de la largeur de l'écran,
une bande de 46 vw en montre toujours la même part verticale — 68 % —
quelle que soit la largeur. L'unité extérieure occupe 66 % de la
hauteur du cliché : elle tient donc ENTIÈRE, de 320 à 999 px. En
pixels fixes, elle se faisait couper dès qu'on changeait de téléphone.
`object-position` vertical à 60 % place la fenêtre juste au-dessus du
socle et juste sous le sommet de l'unité. */
.hero{ --bande:clamp(150px, 46vw, 212px); padding:var(--bande) 0 12px; }
/* LE FOND SE LIMITE À LA BANDE. Tant qu'il couvrait toute la section,
`object-fit:cover` travaillait sur un cadre bien plus haut que large :
il mettait le cliché à l'échelle de la HAUTEUR, le grossissait trois
fois, et la bande n'en montrait qu'un coin de mur. Borné à la bande,
le même `cover` met à l'échelle de la largeur : le cliché est vu sur
toute sa largeur, et seule sa hauteur est rognée. */
.hero__fond{ inset:0 0 auto 0; height:var(--bande); }
.hero__photo{ object-position:50% 60%; }
/* RESTES DE LA CARTE BLANCHE, RETIRÉS. Le discours a vécu dans une carte
posée sur la photographie ; elle a disparu, mais son rayon, son ombre
et sa marge interne étaient restés. Ils dessinaient un cadre autour
d'un bloc qui n'en est plus un, et décalaient le texte de la
gouttière. */
.hero__texte{ padding:16px 0 18px; }
.hero__cta{ gap:7px; }
/* LE BOUTON PRINCIPAL EST AGRANDI ET RENFORCÉ, sur demande : « sur
Galaxy Android on le voit pas bien ». Trois leviers, pas un seul —
la hauteur (52 -> 60 px, bien au-dessus des 44 px de la cible
tactile minimale), le corps du libellé, et une ombre colorée qui le
décolle du fond clair au lieu de le laisser flotter dessus. */
.hero__cta .btn{ min-height:60px; }
.hero__cta .btn--lg{
font-size:1.06rem; font-weight:800; letter-spacing:-.01em;
box-shadow:0 12px 26px -12px rgba(0, 82, 204, .75);
}
/* Le second bouton devient un lien : deux boutons pleins côte à côte
brouillent l'action principale sur un écran étroit. */
.hero__cta .btn--ghost{
min-height:44px; font-size:.92rem; text-decoration:underline;
--btn-bg:transparent; --btn-bd:transparent; --btn-fg:var(--action-dark);
--btn-sh:none;
}
.hero__note{ margin-top:5px; font-size:.7rem; }
/* ------------------------------------------------------------------
LE BOUTON PASSE AVANT LES TROIS BÉNÉFICES, SUR TÉLÉPHONE UNIQUEMENT.
POURQUOI. Mesuré au navigateur, défilement à zéro, bandeau de
consentement ouvert comme il l'est à la première visite :
écran 390 × 844 — bas du bouton 803 px, haut du bandeau 667 px
écran 360 × 800 — bas du bouton 832 px, haut du bandeau 623 px
Le bouton d'appel à l'action était donc recouvert sur 136 px à 390,
et carrément sous la ligne de flottaison à 360. Un visiteur qui
arrive d'une annonce payée ne voyait pas le bouton qu'il a cliqué
une annonce pour atteindre : il voyait le bandeau à sa place.
CE QUI OCCUPE LA PLACE. Entre l'accroche et le bouton, la liste des
trois bénéfices prend 236 px à elle seule. En la passant APRÈS le
bouton, celui-ci remonte de 735 à 475 px : il est franchement
au-dessus du bandeau sur les deux formats, sans que rien ne
disparaisse de la page.
POURQUOI PAS TOUCHER AU BANDEAU. Le réduire ou le retarder
affaiblirait le consentement. Il garde donc son texte entier, ses
deux boutons et sa place ; c'est le hero qui s'organise autour.
POURQUOI `order` ET PAS UN DÉPLACEMENT DANS LE BALISAGE. Sur grand
écran l'ordre actuel est voulu et le premier écran y est large :
une permutation du balisage l'aurait changé partout. Les trois
bénéfices ne contiennent aucun lien ni bouton — vérifié — donc rien
ne sort de l'ordre de tabulation ici.
L'ordre est déclaré en entier, et non sur les deux seuls éléments
permutés : un enfant sans `order` vaut 0 et remonterait en tête.
------------------------------------------------------------------ */
.hero__texte > .hero__titre{ order:1; }
.hero__texte > .hero__chapo{ order:2; }
.hero__texte > .hero__cta { order:3; margin-bottom:24px; }
.hero__texte > .atouts { order:4; }
.hero__texte > .hero__socle{ order:5; }
.hero__texte > .hero__note { order:6; }
/* ---- Le formulaire enchaîne directement ----
Son en-tête de section coûtait 240 px à lui seul : sur-titre, titre sur
trois lignes et chapô, avant même la première question. Sur téléphone,
seul le titre reste — il porte `aria-labelledby`, le retirer casserait
l'intitulé de la section. */
/* Onze pixels gagnés ici font entrer la première question dans le
premier écran d'un 360 × 740, où il n'en manquait que quatre. */
#simulateur{ padding-block:6px 22px; }
#simulateur .section__head{ margin-bottom:9px; }
/* Le titre et son sous-titre sont dans la carte : c'est là qu'on les
resserre, et le sous-titre reste VISIBLE — « en moins d'une minute »
est la phrase qui décide un visiteur à commencer, la masquer là où
elle sert le plus n'aurait pas de sens. */
.simu__titre{ font-size:1.22rem; line-height:1.22; }
.simu__sous-titre{ margin-top:13px; font-size:.88rem; line-height:1.45; }
/* Le fil d'étapes disparaît : la barre de progression et « Étape 1 sur
4 » disent exactement la même chose en deux fois moins de place, et
chaque pixel du premier écran est compté. */
.stepper{ display:none; }
.simu__head{ padding-top:16px; }
.simu__body{ padding-block:10px 18px; }
}
/* ==========================================================================
PETITS TÉLÉPHONES (≤ 389 px)
En 375 × 812 la question tombait 49 px sous la ligne de flottaison. Ce
bloc ne s'applique qu'en dessous de 390 px : le rendu validé en 390 et
430 n'est pas touché.
La ligne « Sans engagement · Gratuit · Réponse rapide » disparaît ici :
le pied du formulaire porte déjà « Sans engagement », juste en dessous.
C'était un doublon, et le seul élément du hero qu'on pouvait retirer sans
rien enlever à la compréhension de l'offre.
========================================================================== */
@media (max-width:389px){
.hero__titre{ font-size:1.56rem; margin-bottom:17px; }
.hero__chapo{ font-size:.98rem; line-height:1.38; margin-bottom:19px; }
.atouts{ margin-bottom:20px; }
.atout{ padding:13px 15px; }
.hero__note{ margin-top:6px; }
.hero__cta .btn{ min-height:50px; }
.hero__cta .btn--ghost{ min-height:40px; }
}
/* ---- Très petits écrans (≤ 359 px) ----
La bande de photographie se réduit à 48 px : à cette largeur, le premier
écran n'a plus rien à céder. */
@media (max-width:359px){
/* La proportion est conservée : c'est le minimum du `clamp` qui tombe.
`--bande` pilote à la fois le creux du haut et la hauteur du fond. */
.hero{ --bande:clamp(132px, 46vw, 150px); }
.hero__texte{ padding:14px 0 16px; }
.hero__titre{ font-size:1.38rem; }
.hero__chapo{ font-size:.94rem; }
/* Le sur-titre est décoratif : le titre dit déjà de quoi il s'agit. */
.hero__kicker{ display:none; }
.hero__note{ font-size:.68rem; margin-top:5px; }
.hero__cta .btn{ min-height:48px; }
.hero__cta .btn--ghost{ min-height:38px; }
/* Le titre du formulaire tenait sur quatre lignes à cette largeur. */
#simulateur{ padding-top:6px; }
#simulateur .section__head{ margin-bottom:9px; }
#simulateur .section__head h2{ font-size:1.1rem; }
}
/* ==========================================================================
FORMULAIRE PREMIUM — IVOIRE, CARTES BLANCHES, CALENDRIER INTÉGRÉ
Fond ivoire chaud demandé pour la section du formulaire. Le bleu
électrique ne sert qu'aux sélections, au calendrier et à l'action
principale : c'est lui qui dit « ceci est actif », nulle part ailleurs.
Ce bloc est EN FIN DE FEUILLE à dessein : à spécificité égale, la
dernière règle gagne, et il doit l'emporter sur celles du simulateur
définies plus haut.
========================================================================== */
:root{ --ivoire:#FAF7F0; }
/* ---- L'ARRIÈRE-PLAN DU FORMULAIRE ----
L'ivoire plat posait deux problèmes. Il ne se distinguait pas de la
section qui le précède — #FAF7F0 contre #F5F5F3, soit deux gris chauds
que l'œil lit comme un seul aplat : rien ne disait où commençait la
partie où l'on agit. Et il n'appelait pas : c'est pourtant le seul
endroit de la page où le visiteur a quelque chose à faire.
Le champ passe donc dans le bleu de la marque, du plus soutenu en haut
au blanc en bas, avec une lueur diffuse derrière la carte. Le dégradé
descend vers le blanc pour que la carte, blanche elle aussi, se pose
sur un fond qui s'éclaircit à sa rencontre.
RIEN N'EST ÉCRIT SUR LA TEINTE : le titre et le chapô gardent l'encre
sombre, les champs vivent dans la carte blanche. La couleur n'entre
donc jamais entre un texte et son fond. */
#simulateur{
position:relative; isolation:isolate;
background:linear-gradient(180deg, #E8F0FF 0%, #F2F7FF 38%, #FAFCFF 72%, var(--white) 100%);
}
/* La lueur, derrière la carte et sous elle : elle concentre le regard au
centre sans dessiner de bord. Posée en `::before` plutôt que dans le
fond du bloc pour rester indépendante du dégradé. */
#simulateur::before{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:radial-gradient(68% 42% at 50% 30%, rgba(0,102,255,.14), rgba(0,102,255,0) 72%);
}
/* LE CHAPÔ FONCE DANS CETTE SECTION, ET SEULEMENT ICI. Sur l'ivoire
d'avant, `--ink-soft` tenait largement ; sur la zone la plus teintée du
nouveau champ il tombait à 4,24:1, sous le seuil AA de 4,5 pour du
texte courant de 17 px. Baisser la lueur l'aurait ramené à 4,58 — un
passage de justesse ; cette teinte donne 5,15 et laisse la lueur
intacte. Le titre, lui, est à 11,75:1. */
#simulateur .section__lead{ color:#47587D; }
#simulateur .simu{
background:var(--white);
border:1px solid rgba(28,28,26,.08);
/* OMBRE NEUTRE, pas teintée. Une portée dans l'encre de la marque se
fondrait mieux dans le champ bleuté, mais la feuille proscrit les
ombres et les filets bleutés : c'est ce qui donnait au site sa teinte
bleue générale. Elle est seulement portée plus loin qu'avant, pour
que la carte se détache d'un fond qui n'est plus blanc. */
box-shadow:0 1px 2px rgba(28,28,26,.05), 0 30px 60px -32px rgba(28,28,26,.32);
}
/* ---- Tuiles de réponse ---- */
.choice{ transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.choice[aria-checked="true"]{
border-color:var(--action); background:var(--action-soft); color:var(--action-dark);
box-shadow:inset 0 0 0 1px var(--action);
}
/* ==========================================================================
CALENDRIER
========================================================================== */
.cal{
background:var(--white);
border:1px solid var(--line); border-radius:var(--r);
padding:clamp(12px, 2vw, 18px);
}
.cal__tete{
display:flex; align-items:center; justify-content:space-between;
gap:10px; margin-bottom:12px;
}
.cal__mois{
margin:0; flex:1; text-align:center;
font-size:1rem; font-weight:700; color:var(--ink);
}
.cal__mois::first-letter{ text-transform:uppercase; }
.cal__fleche{
display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px; flex:none; padding:0;
background:var(--white); color:var(--action-dark);
border:1px solid var(--line); border-radius:50%; cursor:pointer;
}
.cal__fleche:hover:not([disabled]){ background:var(--action-soft); border-color:var(--action); }
.cal__fleche[disabled]{ opacity:.35; cursor:not-allowed; }
.cal__grille{
display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
}
.cal__dow{
text-align:center; font-size:.74rem; font-weight:700;
color:var(--ink-soft); padding-bottom:4px;
}
.cal__vide{ aspect-ratio:1; }
.cal__jour{
display:flex; align-items:center; justify-content:center;
aspect-ratio:1; min-height:40px; padding:0;
background:var(--white); color:var(--ink);
border:1px solid var(--line); border-radius:10px;
font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;
transition:background-color .15s ease, border-color .15s ease;
}
.cal__jour:hover:not([disabled]):not([aria-disabled="true"]){
border-color:var(--action); background:var(--action-soft);
}
/* UNE DATE FERMÉE RESTE UN BOUTON. Elle portait `disabled`, qui empêche
le navigateur d'émettre le moindre clic : la case grise ne POUVAIT pas
expliquer son refus. Elle porte désormais `aria-disabled`, qui l'annonce
indisponible sans la rendre inerte — son clic affiche la raison. D'où le
curseur de main : il y a quelque chose à y gagner. */
.cal__jour[disabled],
.cal__jour[aria-disabled="true"]{
color:#aab4c6; background:var(--gris); border-color:transparent;
}
.cal__jour[disabled]{ cursor:not-allowed; }
.cal__jour[aria-disabled="true"]{ cursor:pointer; }
.cal__jour[aria-disabled="true"]:hover{ box-shadow:inset 0 0 0 1px var(--line); }
.cal__jour[aria-pressed="true"]{
background:var(--action); border-color:var(--action); color:var(--white);
}
.cal__fuseau{
margin:10px 0 0; font-size:.74rem; color:var(--ink-soft);
}
/* LE MESSAGE SOUS LA GRILLE. Deux tons : « info » pour la première
disponibilité, annoncée d'emblée ; « avert » pour la raison d'un refus,
après un clic sur une date fermée. Le second doit se remarquer sans
alarmer — c'est une explication, pas une erreur du visiteur. */
.cal__alerte{
margin:12px 0 0; padding:10px 13px;
font-size:.85rem; line-height:1.45; border-radius:12px;
}
.cal__alerte[data-ton="info"]{
color:var(--action-dark); background:var(--action-soft);
}
.cal__alerte[data-ton="avert"]{
color:var(--ink); background:var(--gris);
box-shadow:inset 0 0 0 1px var(--line);
}
.cal__alerte[hidden]{ display:none; }
.cal__creneaux{ margin-top:14px; }
.cal__titre-creneaux{
margin:0 0 9px; font-size:.88rem; font-weight:700; color:var(--ink);
}
.cal__titre-creneaux::first-letter{ text-transform:uppercase; }
.cal__invite{ margin:0; font-size:.88rem; color:var(--ink-soft); }
.cal__slots{
display:grid; gap:8px;
grid-template-columns:repeat(auto-fit, minmax(min(100%, 92px), 1fr));
}
.cal__slot{
min-height:46px; padding:10px 8px;
background:var(--white); color:var(--ink);
border:1.5px solid var(--line); border-radius:var(--r-ctrl);
font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;
transition:border-color .15s ease, background-color .15s ease;
}
.cal__slot:hover{ border-color:var(--action); background:var(--action-soft); }
.cal__slot[aria-pressed="true"]{
background:var(--action); border-color:var(--action); color:var(--white);
}
.cal__resume{
margin:14px 0 0; padding:11px 13px;
background:var(--action-soft); border:1px solid var(--action-line);
border-radius:var(--r-ctrl);
font-size:.88rem; font-weight:600; color:var(--ink);
}
.cal__resume[hidden]{ display:none; }
/* ---- Téléphone : la grille reste touchable ---- */
@media (max-width:389px){
.cal{ padding:10px; }
.cal__grille{ gap:3px; }
.cal__jour{ min-height:36px; font-size:.86rem; border-radius:8px; }
.cal__slots{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 80px), 1fr)); }
}
/* ==========================================================================
MODE SOMBRE
IL EST UN CHOIX, PAS UN REFLET DU SYSTÈME. La page s'ouvre toujours en
clair ; le visiteur bascule avec le bouton de l'en-tête, et son choix
est retenu d'une visite à l'autre. D'où un attribut sur `` plutôt
qu'une requête `prefers-color-scheme`.
LE PLUS GROS DU TRAVAIL SE FAIT SUR LES JETONS. Les surfaces, l'encre et
les filets changent de valeur, et tout ce qui les emploie suit. Le reste
de ce bloc ne traite que les endroits où une couleur claire avait été
écrite en dur : sans eux, le mode sombre laisse des plaques blanches.
CE QUI NE BOUGE PAS : le bleu d'action. Les boutons gardent `#0066FF`
avec du texte blanc, qui y vaut 4,83:1 dans les deux modes. L'éclaircir
pour le fond sombre aurait dégradé le texte blanc qu'il porte.
========================================================================== */
:root[data-theme="dark"]{
/* Surfaces : deux niveaux seulement, comme en clair — le fond de page
et la surface des cartes, qui doit s'en détacher. */
--white: #141A28; /* surface des cartes */
--gris: #0C1120; /* alternance des sections */
--cream: #0C1120;
--cream-deep: #0C1120;
--ivoire: #0C1120;
/* Encre : jamais du blanc pur sur du noir pur — le contraste maximal
fatigue et fait vibrer le texte. #E9EDF6 sur #141A28 donne 13,2:1. */
--ink: #E9EDF6;
--ink-soft: #A7B2C9;
--ink-mute: #A7B2C9;
--line: #2A3449;
/* Les pastilles bleu pâle deviennent des pastilles bleu nuit, et le
texte qu'elles portent s'éclaircit d'autant. */
--action-soft: #16233D;
--action-line: #27395C;
--action-dark: #8FBCFF; /* texte et pictos sur pastille sombre */
/* Ombres : sur fond sombre, une ombre grise ne se voit pas. On garde
une portée noire, plus large et plus franche. */
--sh: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -28px rgba(0,0,0,.8);
--sh-action: 0 2px 6px rgba(0,0,0,.55);
}
:root[data-theme="dark"] body{ background:var(--gris); }
/* L'ACCENT DU TITRE S'ÉCLAIRCIT. `--action` reste le bleu des boutons ;
posé en TEXTE sur une surface sombre il ne donnerait que 3,4:1. */
:root[data-theme="dark"] .hero__titre-accent{ color:#8FBCFF; }
/* LE VOILE DU HERO PASSE AU SOMBRE. Laissé blanc, il recouvrait la
photographie d'un drap clair au milieu d'une page sombre. Les étapes
et l'angle sont ceux du mode clair : c'est la couleur qui change. */
:root[data-theme="dark"] .hero__fond::after{
background:linear-gradient(90deg,
rgba(12,17,32,.97) 0%,
rgba(12,17,32,.95) 48%,
rgba(12,17,32,.90) 52.5%,
rgba(12,17,32,.04) 54.5%,
rgba(12,17,32,0) 55.5%);
}
@media (max-width:999px){
:root[data-theme="dark"] .hero__fond::after{
background:linear-gradient(180deg,
rgba(12,17,32,0) 0%,
rgba(12,17,32,0) 56%,
rgba(12,17,32,.34) 84%,
rgba(12,17,32,.92) 100%);
}
}
/* Le champ du formulaire : même composition, en bleu nuit. */
:root[data-theme="dark"] #simulateur{
background:linear-gradient(180deg, #16203A 0%, #121A2E 38%, #0E1526 72%, var(--gris) 100%);
}
:root[data-theme="dark"] #simulateur::before{
background:radial-gradient(68% 42% at 50% 30%, rgba(0,102,255,.20), rgba(0,102,255,0) 72%);
}
:root[data-theme="dark"] #simulateur .section__lead{ color:var(--ink-soft); }
/* Les aplats de section écrits en dur. */
:root[data-theme="dark"] .section--beige{ background:#141020; }
:root[data-theme="dark"] .footer{ background:#0A0F1C; color:#A7B2C9; }
/* Les pastilles de couleur du hero et des dispositifs : fond assombri,
picto éclairci. Les teintes claires d'origine donnaient un confetti
lumineux sur fond sombre. */
:root[data-theme="dark"] .atout__ico--budget,
:root[data-theme="dark"] .dispo__ico--lieu{ background:#3A1420; color:#FF9BB4; }
:root[data-theme="dark"] .atout__ico--confort{ background:#352411; color:#FFC178; }
:root[data-theme="dark"] .atout__ico--aides,
:root[data-theme="dark"] .dispo__ico--cee{ background:#0F2C1D; color:#6FD99B; }
/* L'étoile vide des avis : elle doit rester visible sans attirer l'œil. */
:root[data-theme="dark"] .etoile{ color:#39445C; }
/* Les dégradés clairs restants, un par un. */
:root[data-theme="dark"] .officiels{ background:linear-gradient(180deg, #0A0F1C 0%, var(--white) 100%); }
:root[data-theme="dark"] .avis{ background:linear-gradient(180deg, var(--white) 0%, #0A0F1C 100%); }
:root[data-theme="dark"] .card--featured,
:root[data-theme="dark"] .poste--phare,
:root[data-theme="dark"] .simu__foot{
background:linear-gradient(150deg, var(--action-soft), #101A2E);
}
:root[data-theme="dark"] .reperes__liste > li{ background:rgba(20,26,40,.72); }
:root[data-theme="dark"] .sticky-cta{
background:rgba(12,17,32,.92);
box-shadow:0 -10px 34px -16px rgba(0,0,0,.7);
}
/* --------------------------------------------------------------------------
MODE SOMBRE, SECOND PASSAGE
Le premier bloc a été écrit en redéfinissant les jetons, puis MESURÉ sur
la page : 32 textes tombaient sous le seuil. Les causes, relevées une à
une plutôt que devinées :
1. `--white` SERT À DEUX CHOSES. Surface des cartes (33 emplois) et
texte blanc posé sur un aplat coloré (7 emplois). En le passant au
sombre, le libellé des boutons est devenu noir sur bleu. Les sept
emplois « texte » reprennent donc du blanc littéral.
2. Six jetons de couleur n'étaient pas couverts : `--blue`, `--grey`,
`--blue-soft`, `--red`, `--red-soft`, `--focus`.
3. Quatre aplats clairs restaient écrits en dur, et deux dégradés.
-------------------------------------------------------------------------- */
:root[data-theme="dark"]{
--blue: #8FBCFF; /* liens */
--blue-soft: #16233D;
--grey: #1B2335;
--red: #FF8FA8;
--red-soft: #3A1420;
--focus: #8FBCFF;
}
/* LE BLANC LITTÉRAL, LÀ OÙ IL S'AGIT DE TEXTE SUR UN APLAT COLORÉ. */
:root[data-theme="dark"] .btn{ --btn-fg:#fff; }
:root[data-theme="dark"] .btn--ink{ --btn-bg:#E9EDF6; --btn-fg:#0C1120; --btn-bd:#E9EDF6; }
:root[data-theme="dark"] .galerie__cap,
:root[data-theme="dark"] .galerie__cap *{ color:#fff; }
:root[data-theme="dark"] .stepper__item[data-state="done"] .stepper__dot,
:root[data-theme="dark"] .cal__jour[aria-pressed="true"],
:root[data-theme="dark"] .cal__slot[aria-pressed="true"]{ color:#fff; }
:root[data-theme="dark"] .section--ink,
:root[data-theme="dark"] .section--ink h2{ color:#fff; }
/* L'ÉTIQUETTE JAUNE GARDE SON ENCRE SOMBRE : le jaune ne change pas de
valeur d'un mode à l'autre, donc le texte qu'il porte non plus. */
:root[data-theme="dark"] .hero__sticker,
:root[data-theme="dark"] .hero__sticker *{ color:#071B55; }
/* Les derniers aplats clairs. */
:root[data-theme="dark"] .section--froid{ background:#101827; }
:root[data-theme="dark"] .hero__socle{ background:rgba(20,26,40,.72); }
/* LE LOGO RGE EST UNE IMAGE, PAS UN PICTOGRAMME : son encre est fixe,
et elle est sombre. Posé tel quel sur une carte bleu nuit, il
disparaissait. On lui rend le fond clair pour lequel il a été
dessiné — un petit cartouche, comme sur un papier à en-tête. */
:root[data-theme="dark"] .hero__socle-logo{
background:#fff; border-radius:5px; padding:3px 4px;
box-sizing:content-box;
}
:root[data-theme="dark"] .inclus__note{ background:#1B2335; }
:root[data-theme="dark"] .progress{ background:#1B2335; }
/* Et les derniers dégradés clairs. */
:root[data-theme="dark"] .card__picto,
:root[data-theme="dark"] .poste__ico{
background:linear-gradient(150deg, #1B2A47, #16233D);
}
:root[data-theme="dark"] .reperes{ background:linear-gradient(180deg, var(--gris) 0%, var(--white) 100%); }
:root[data-theme="dark"] .bandeau{ background:linear-gradient(180deg, var(--white) 0%, var(--gris) 100%); }
/* --------------------------------------------------------------------------
LES TROIS BÉNÉFICES EN RANGÉE SUR TÉLÉPHONE
Ils étaient en file, un par ligne — c'était une décision prise pour la
largeur : sous 360 px, trois colonnes laissent moins de 100 px par
libellé. Le commanditaire les veut en rangée, picto au-dessus et
description en dessous. On y va, avec les réglages qui rendent la
contrainte tenable : pictos plus petits, corps réduit, césure autorisée
pour qu'aucun mot long ne déborde de sa colonne.
-------------------------------------------------------------------------- */
@media (max-width:699px){
/* TROIS LIGNES, PLUS TROIS COLONNES.
Les trois arguments étaient en colonnes, picto au-dessus, avec la
césure autorisée pour que les mots longs tiennent. À 390 px cela fait
122 px par colonne, et le résultat se lisait « Un confort opti-mal »,
« Des aides finan-cières ». Le brief suivant interdit expressément le
texte coupé et demande « trois lignes parfaitement alignées ».
EN LIGNES, LA CONTRAINTE DISPARAÎT : chaque libellé dispose de la
largeur entière, aucune césure n'est nécessaire, les trois pictos
s'alignent sur une même verticale et les trois titres aussi. C'est
aussi le sens de lecture naturel sur un téléphone. */
.atouts{
grid-template-columns:1fr;
gap:10px;
}
.atout{
grid-template-columns:auto 1fr; gap:13px;
justify-items:start; text-align:left;
align-items:center;
padding:14px 16px;
}
.atout__ico{ width:42px; height:42px; }
.atout__ico svg{ width:22px; height:22px; }
.atout__txt{ justify-items:start; gap:2px; }
/* PLUS AUCUNE CÉSURE : elle n'a plus de raison d'être, et elle couperait
encore des mots qui tiennent désormais largement. */
.atout__txt strong{
font-size:.95rem; line-height:1.25;
hyphens:manual; -webkit-hyphens:manual; overflow-wrap:normal;
}
.atout__txt span{
font-size:.85rem; line-height:1.4;
hyphens:manual; -webkit-hyphens:manual; overflow-wrap:normal;
}
}
/* --------------------------------------------------------------------------
LE BOUTON DE BASCULE CLAIR / SOMBRE
Même gabarit que le bouton du menu : c'est son voisin dans l'en-tête, et
deux cibles tactiles côte à côte doivent faire la même taille. Les deux
pictogrammes vivent dans le bouton ; seul celui du mode À VENIR est
affiché, l'autre est retiré du flux.
-------------------------------------------------------------------------- */
.theme-bascule{
display:inline-grid; place-items:center;
width:44px; height:44px; flex:none;
border:1px solid var(--line); border-radius:50%;
background:var(--white); color:var(--ink-soft);
cursor:pointer;
transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.theme-bascule:hover{ border-color:var(--action-line); color:var(--action-dark); }
.theme-bascule svg{ width:20px; height:20px; }
/* En clair on propose la lune ; en sombre, le soleil. */
.theme-bascule__clair{ display:none; }
.theme-bascule__sombre{ display:block; }
:root[data-theme="dark"] .theme-bascule__clair{ display:block; }
:root[data-theme="dark"] .theme-bascule__sombre{ display:none; }
:root[data-theme="dark"] .theme-bascule{
background:var(--white); border-color:var(--line); color:var(--ink-soft);
}
/* --------------------------------------------------------------------------
L'AVERTISSEMENT LÉGAL DE LA SECTION FINANCEMENT
Les règles de l'ancienne carte (`.financement`, `.financement__titre`,
`.financement__txt`, `.financement__liste`) ont été retirées : depuis
que le financement est une section bâtie sur le gabarit commun, elles
ne visaient plus rien.
-------------------------------------------------------------------------- */
/* L'AVERTISSEMENT LÉGAL SUR LE CRÉDIT — LISIBLE, PAS CRIARD.
La phrase est imposée au mot près par l'article L312-5 du code de la
consommation, parce que cette section annonce un crédit : l'éco-prêt à
taux zéro, et le financement d'un partenaire « réparti en mensualités ».
Elle ne peut donc pas disparaître tant que ces deux cartes sont là.
CE QUE LA LOI EXIGE, C'EST LA LISIBILITÉ, PAS L'ENCADRÉ. Elle vivait
dans un cartouche gris pleine largeur, barré d'orange et en gras : la
chose la plus voyante de la section, au-dessus des aides elles-mêmes.
Elle prend la forme de la mention légale qui la suit immédiatement —
même corps, même centrage, même largeur de colonne — avec une encre
d'un cran plus soutenue.
SON CORPS NE DESCEND PAS SOUS CELUI DE LA NOTE VOISINE, et c'est la
limite à ne pas franchir : une mention obligatoire rapetissée par
rapport aux autres informations de la page cesse d'être lisible au sens
du texte. `.82rem` est donc un plancher, pas un réglage esthétique. */
.financement__avertissement{
max-width:92ch; margin:26px auto 0;
font-size:.82rem; line-height:1.55; color:var(--ink-soft);
text-align:center;
}
/* La note générale suit l'avertissement : elle se rapproche, les deux
lisant comme un même pied de section. */
.financement__avertissement + .section__foot{ margin-top:10px; }
/* --------------------------------------------------------------------------
TÉLÉPHONE : LA ZONE ENTRE LES BOUTONS ET LE FORMULAIRE
Trois défauts s'y cumulaient.
1. LES TROIS ENGAGEMENTS N'AVAIENT PAS DE CONTENEUR. Au-delà de 760 px
ils vivent dans une carte ; en dessous, ils flottaient entre le
bouton et la mention légale, sans rien qui dise où le groupe commence
et où il finit.
2. LEURS PICTOS N'AVAIENT PAS LA MÊME LARGEUR. Deux pictogrammes de
22 px et un logo RGE de 44 : les trois textes démarraient à trois
abscisses différentes, et la colonne penchait.
3. LA MENTION LÉGALE COLLAIT au dernier engagement, puis la section du
formulaire arrivait sans transition.
-------------------------------------------------------------------------- */
@media (max-width:759px){
/* TROIS CARTES DISTINCTES, PLUS UN PANNEAU À FILETS.
Les trois garanties vivaient dans une seule carte, séparées par deux
filets. Lu sur un téléphone, cela se confondait avec la liste des
bénéfices juste au-dessus, qui emploie exactement le même procédé —
picto à gauche, filet entre les lignes. Deux groupes de sens
différents se présentaient de la même façon.
Détachées, chacune sur son fond et son ombre, elles se lisent comme
ce qu'elles sont : trois engagements, et non la suite de la liste
précédente. `grid-auto-rows:1fr` les tient à la même hauteur alors
que l'une d'elles n'a pas de sous-ligne. */
.hero__socle{
gap:8px;
grid-auto-rows:1fr;
margin-top:clamp(14px, 3.2vw, 20px);
padding:0;
background:none;
border:0;
}
/* Le panneau sombre du mode nuit disparaît avec le panneau clair : sans
cette ligne il resterait en fond des trois cartes, sa sélectivité
étant supérieure à celle de la règle ci-dessus. */
:root[data-theme="dark"] .hero__socle{ background:none; }
.hero__socle li{
/* UNE GOUTTIÈRE DE LARGEUR FIXE : c'est elle qui aligne les trois
textes, quelle que soit la largeur du picto qu'elle contient. */
grid-template-columns:34px 1fr;
align-items:center; gap:12px;
padding:11px clamp(12px, 3.2vw, 15px);
background:var(--white);
border:1px solid var(--line); border-radius:var(--r-ctrl);
box-shadow:var(--sh-sm);
}
.hero__socle svg{ width:21px; height:21px; justify-self:center; }
.hero__socle-logo{ height:26px; justify-self:center; object-position:center; }
/* La mention légale respire, et se distingue du groupe au-dessus. */
.hero__note{ margin-top:clamp(12px, 3vw, 16px); }
}
/* ==========================================================================
FINITIONS DU PREMIER ÉCRAN SUR TÉLÉPHONE
Trois défauts relevés à la mesure, sur la composition validée :
l'en-tête, la jonction photographie / page, et l'étiquette de promesse.
========================================================================== */
/* ---- 1. LA JONCTION DE LA PHOTOGRAPHIE ----
La bande se terminait sur une arête nette, au pixel près : une ligne
horizontale franche en travers de l'écran, à l'endroit même où l'œil
descend vers le titre. C'est la couture d'un montage, pas une image de
marque.
Un masque dégradé sur les derniers pourcents de la bande suffit. On
masque plutôt qu'on ne superpose un voile : un voile devrait connaître
la couleur de la page, qui change du mode clair au mode sombre, alors
qu'un masque laisse simplement apparaître ce qui est derrière — quel
qu'il soit. */
@media (max-width:767px){
.hero__fond{
-webkit-mask-image:linear-gradient(to bottom, #000 72%, rgba(0,0,0,.45) 90%, transparent 100%);
mask-image:linear-gradient(to bottom, #000 72%, rgba(0,0,0,.45) 90%, transparent 100%);
}
/* ---- 2. L'ÉTIQUETTE DE PROMESSE ----
Elle était un rectangle plein à angles de 14 px, du même corps que le
titre qu'elle suit, et pesait autant que lui. Deux blocs de même
poids se disputaient le regard.
Le rayon devient une pilule : la forme dit « étiquette » et non
« deuxième titre ». Le corps descend d'un cran sous celui du titre,
l'ombre colorée la décolle du fond sans l'alourdir, et le rembourrage
horizontal lui rend l'air qui lui manquait. L'ensemble la rend plus
basse qu'avant malgré le rembourrage, parce que c'est le corps qui
dictait sa hauteur. */
.hero__titre-encadre{
border-radius:999px;
padding:.1em .5em .14em;
/* L'ÉTIQUETTE EST AU CORPS DU TITRE, sur demande : elle doit peser
autant que « Pompe à Chaleur Air/Eau ». Elle était à 17 px contre
30 pour le titre.
CE QUI CHANGE EN CONSÉQUENCE. À ce corps, la phrase réclame 497 px
dans une colonne qui en fait 358 : `nowrap` la ferait déborder. Elle
se replie donc, et c'est `box-decoration-break:clone` qui redonne à
CHAQUE fragment son fond orange et ses bouts arrondis — sans lui, le
fond s'interromprait au retour à la ligne. `display:inline` est
requis pour ça : un `inline-block` ne se coupe pas.
L'interligne monte à 1.42. Le rembourrage d'une boîte en ligne
déborde de sa ligne sans la grandir : à 1.2, les deux fragments
orange se chevauchaient. */
display:inline;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
white-space:normal;
/* LE CORPS EST REDESCENDU, sur demande, POUR TENIR SUR UNE SEULE
LIGNE. Au corps du titre, l'étiquette se repliait en deux pastilles.
Seuil mesuré du repli, étiquette privée de son « et » : 5,156 vw à
320 px, 5,278 à 360, 5,581 à 430, 5,737 à 767. C'est 320 qui
commande, et 5 vw passe dessous partout, avec au moins 16 px de
marge à droite.
`white-space:normal` ET LE `clone` RESTENT : si le libellé gagne un
mot, l'étiquette se replie proprement au lieu de sortir de l'écran,
et chaque fragment garde son fond orange. */
/* PENTE RELEVÉE, sur demande, AU PLAFOND MESURÉ. Plafond du repli
relevé par balayage, marge droite d'au moins 10 px : 5,234 vw à
320, 5,347 à 360, 5,577 à 390. 320 interdisait de dépasser 5,2 ;
on lui donne sa propre pente plus bas, ce qui libère 5,5 vw ici.
Gain réel à 390 : 19,5 px -> 21,4 px. */
font-size:clamp(17px, 5.5vw, 34px);
line-height:1.42;
box-shadow:0 6px 16px -10px rgba(249,115,22,.9);
}
/* La condition d'éligibilité est la note de l'étiquette, pas un
paragraphe : collée sous elle et d'un corps nettement plus petit,
elle cesse de concurrencer l'accroche qui suit. */
.hero__eligibilite{
margin-top:7px; font-size:.74rem; line-height:1.38;
}
}
/* ---- 3. L'EN-TÊTE DES PETITS TÉLÉPHONES ----
À 320 px, « Aides Équilibre Habitat » tombait sur TROIS lignes de
19,5 px dans une barre qui en fait 70 : le nom de l'entreprise occupait
presque toute la hauteur de son en-tête, serré entre le logo et deux
boutons ronds. Il ne restait que 109 px de largeur pour le porter.
On reprend cette largeur là où elle ne coûte rien : les gouttières, et
les deux boutons ronds, qui restent au-dessus des 44 px de la cible
tactile minimale. Le nom descend d'un demi-point. Il se replie encore,
mais sur deux lignes — ce que la barre absorbe.
Le logo, lui, GRANDIT : c'est la seule marque visuelle de l'entreprise
sur le premier écran, et elle était plus petite que le bouton de menu
voisin. */
@media (max-width:767px){
/* Les quatre pixels que le logo prend, les gouttières les rendent :
sans cette compensation, « Aides Équilibre Habitat » repassait sur
deux lignes à 390 px, la largeur de téléphone la plus répandue. */
.site-header__in{ gap:12px; }
.brand{ gap:10px; }
.brand img{ width:48px; }
}
@media (max-width:389px){
.site-header__in{ gap:10px; }
.brand img{ width:46px; }
.brand strong{ font-size:.94rem; letter-spacing:-.022em; }
.burger{ width:44px; height:44px; }
}
/* À 320 px le nom se replie de toute façon : le logo garde donc sa taille
d'origine plutôt que de prendre la place d'un repli qui aura lieu. */
@media (max-width:359px){
.brand img{ width:44px; }
.brand strong{ font-size:.88rem; }
}
/* ==========================================================================
PARCOURS DE CONVERSION — L'HABILLAGE DU QUESTIONNAIRE
Le questionnaire était juste, mais il avait l'air d'un formulaire
administratif : un aplat gris, une carte blanche, des tuiles sobres. Le
commanditaire le veut commercial — « fond bleu très clair avec une
légère profondeur, carte centrale blanche, grandes réponses cliquables ».
========================================================================== */
/* ---- LE FOND, ET SA PROFONDEUR ----
Un aplat bleu clair seul reste plat, quelle que soit sa teinte. La
profondeur vient de la LUMIÈRE : un halo bleu tombant du haut, derrière
la carte, qui fait lever la page vers le questionnaire au lieu de le
poser dessus. Le dégradé vertical sous le halo empêche le bas de la
section de retomber dans le blanc du reste de la page. */
#simulateur{
background:
radial-gradient(1000px 460px at 50% -12%, rgba(0,102,255,.13), transparent 72%),
linear-gradient(180deg, #F3F7FF 0%, #E8F0FF 100%);
}
:root[data-theme="dark"] #simulateur{
background:
radial-gradient(1000px 460px at 50% -12%, rgba(0,102,255,.18), transparent 72%),
linear-gradient(180deg, #0E1526 0%, #0A0F1C 100%);
}
/* La carte se détache du fond bleu : ombre plus portée, et un liseré clair
sur le dessus qui simule la lumière rasante du halo. */
/* L'OMBRE RESTE NEUTRE. Une ombre bleutée sur un fond bleu aurait été
plus flatteuse, mais la feuille s'interdit les rgba teintés en mode
clair — c'est cette teinte, accumulée sur les ombres et les filets, qui
donnait autrefois au site entier son voile bleu. La profondeur vient
ici du halo derrière la carte, pas de la couleur de son ombre. */
#simulateur .simu{
box-shadow:
0 1px 2px rgba(28,28,26,.06),
0 28px 60px -34px rgba(28,28,26,.42);
}
/* ---- LE SOUS-TITRE RESTE VISIBLE SUR TÉLÉPHONE ----
Il était masqué sous 768 px pour gagner la hauteur du premier écran. Le
commanditaire l'a réécrit — « En moins d'une minute » — et c'est
précisément la phrase qui décide un visiteur à commencer : la masquer
là où elle sert le plus n'a plus de sens. Le sur-titre, lui, reste
masqué : « En 4 étapes » est déjà dit par le compteur juste en dessous. */
@media (max-width:767px){
}
/* ---- LA JAUGE S'ANIME EN AVANÇANT ----
La largeur était déjà en transition. Ce qui manquait, c'est le signe que
la barre vient de bouger : un reflet qui la traverse une fois, à chaque
changement d'étape. Il est posé en `::after` et rejoué par l'animation
— aucune temporisation en JavaScript. */
.progress{ height:10px; }
.progress__bar{ position:relative; overflow:hidden; }
.progress__bar::after{
content:""; position:absolute; inset:0;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
transform:translateX(-100%);
animation:jaugeReflet 1.1s cubic-bezier(.3,0,.2,1) .15s;
}
@keyframes jaugeReflet{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
.progress__bar::after{ animation:none; display:none; }
}
/* ---- LES RÉPONSES DEVIENNENT DE GRANDES CARTES ----
Elles faisaient 62 px de haut, picto de 22 px, bordure d'un pixel et
demi. Elles se cliquaient ; elles n'invitaient pas à le faire. Le picto
passe dans une pastille ronde — la même grammaire que le reste de la
page — et la carte gagne la hauteur et l'air qui la rendent évidente au
pouce comme à l'œil. */
.choice{
min-height:72px; padding:14px 18px; gap:14px;
border-radius:16px;
font-size:1rem;
}
.choice svg{ width:21px; height:21px; }
/* La pastille du picto : posée en fond du SVG, elle ne change rien au
balisage — le JavaScript continue d'insérer un `` nu. */
.choice > svg:first-child{
box-sizing:content-box;
width:21px; height:21px; padding:10px;
border-radius:50%;
background:var(--action-soft);
color:var(--action-dark);
transition:background-color .16s ease, color .16s ease;
}
.choice[aria-checked="true"] > svg:first-child{
background:var(--action); color:#fff;
}
/* La réponse retenue porte une coche à droite : sur une liste de quatre
cartes toutes bleutées au survol, la couleur seule ne suffisait pas à
dire laquelle est cochée. */
.choice::after{
content:""; margin-left:auto; flex:none;
width:22px; height:22px; border-radius:50%;
border:1.5px solid var(--line);
transition:border-color .16s ease, background-color .16s ease;
}
/* LE TÉMOIN COCHÉ EST DESSINÉ, PAS CHARGÉ. Une coche en image de fond
aurait fait l'affaire, mais la feuille s'interdit les images de fond
CSS — elles échappent aux dimensions et au texte de remplacement. Deux
anneaux posés en ombre intérieure donnent le disque plein cerclé de
blanc d'un bouton radio sélectionné, sans un octet à télécharger. */
.choice[aria-checked="true"]::after{
border-color:var(--action); background:var(--action);
box-shadow:inset 0 0 0 3.5px #fff;
}
/* ---- LE MICRO-TEXTE RASSURANT, SOUS LA NAVIGATION ----
Une ligne par écran, à l'endroit où l'on hésite : juste sous le bouton. */
.simu__rassure{
display:flex; align-items:center; gap:8px;
margin:14px 0 0; font-size:.82rem; line-height:1.45; color:var(--ink-mute);
}
.simu__rassure svg{ width:16px; height:16px; flex:none; color:var(--action-dark); }
/* Sur téléphone, le fil nommé ne tient pas en quatre colonnes : les noms
tomberaient à trois lignes chacun. Le compteur « Étape n sur 4 » et le
titre de l'écran disent la même chose en une ligne. */
@media (max-width:767px){
.stepper{ display:none; }
.choice{ min-height:66px; padding:12px 14px; gap:12px; }
.choice > svg:first-child{ padding:8px; }
}
/* ---- LE BOUTON D'ÉTAPE SUR LES PETITS ÉCRANS ----
« J'avance sur mon projet » se repliait sur deux lignes à 320 px, et il
s'en fallait de DEUX pixels : 196 px de texte et de flèche pour 194 px
utiles, le reste étant mangé par 28 px de marge interne de chaque côté.
Cette marge sert à isoler un libellé court au milieu d'un bouton large ;
sur un bouton pleine largeur qui porte une phrase, elle ne protège plus
rien et coûte la ligne. */
@media (max-width:389px){
.simu__nav .btn{ padding-inline:16px; }
}
/* ==========================================================================
PETITS TÉLÉPHONES — LE CORPS DE L'ÉTIQUETTE DE PROMESSE
CE BLOC EST EN FIN DE FEUILLE À DESSEIN. Il surcharge
`.hero__titre-encadre` du bloc ≤ 767 px, à spécificité strictement
égale : seul l'ordre d'apparition les départage. Placé plus haut, il
était écrasé — constaté à l'écran, l'étiquette repassait sur deux
lignes à 320 px et ne gardait que 6 px de marge à 360.
Plafond du repli relevé par balayage, marge droite d'au moins 10 px :
5,234 vw à 320 px, 5,347 à 360. 5,2 vw passe sous les deux.
========================================================================== */
@media (max-width:389px){
.hero__titre-encadre{ font-size:clamp(15px, 5.2vw, 20px); }
}
/* ==========================================================================
LE TITRE DU QUESTIONNAIRE TIENT SUR UNE LIGNE SUR ORDINATEUR
Demande expresse : « il faut que ça soit en une seule ligne, en
particulier sur la version ordinateur ». Au-dessus de 768 px la carte
est assez large pour les 48 caractères ; `nowrap` garantit qu'aucun
repli ne revienne si la police est rendue plus large.
EN DESSOUS, LE REPLI RESTE PERMIS, et c'est volontaire : à 320 px la
phrase sur une ligne réclamerait environ 500 px pour 256 disponibles.
Le cartouche reste alors UN bloc arrondi contenant deux lignes, ce que
`inline-block` fait sans rien ajouter — et non deux pastilles coupées.
========================================================================== */
@media (min-width:768px){
.simu__titre{ white-space:nowrap; max-width:none; }
}
/* ==========================================================================
LE CARTOUCHE DU TITRE EN MODE SOMBRE
Le dégradé clair utilise `--action` -> `--action-dark`. En mode sombre,
`--action-dark` est RÉDÉFINI en bleu clair (#8FBCFF) : c'est un jeton
fait pour du texte sur fond foncé, pas pour un fond. Mesuré, le blanc
y tombait à 1,94:1 — illisible.
Les deux bornes sont donc écrites en dur ici, et vérifiées : 4,56:1 au
départ, 8,65:1 à l'arrivée, pour un seuil de 4,5:1.
========================================================================== */
:root[data-theme="dark"] .simu__titre{
background:linear-gradient(135deg, #1E6BFF 0%, #0A45A8 100%);
box-shadow:0 12px 26px -16px rgba(0, 0, 0, .9);
}
/* ==========================================================================
LA MESURE DU TITRE REVIENT SUR GRAND ÉCRAN
Au-delà de 768 px la colonne du hero s'élargit sans limite utile : une
ligne de titre y deviendrait trop longue à lire d'un seul balayage de
l'œil. La borne de 18 caractères reprend donc ici, et seulement ici.
========================================================================== */
@media (min-width:768px){
.hero__titre-l1{ max-width:18ch; }
}
/* CHAMP-PIÈGE ANTI-ROBOT.
Volontairement PAS `display:none` ni `type="hidden"` : les robots sérieux
ignorent ces deux formes, justement parce qu'elles trahissent un piège. Le
champ reste un vrai champ de saisie, simplement sorti de l'écran. */
.hp-field{
position:absolute; left:-9999px; top:auto;
width:1px; height:1px; overflow:hidden; opacity:0;
pointer-events:none;
}
/* CAPTCHA Cloudflare Turnstile. Tant que la clé publique n'est pas posée, le
conteneur reste vide : `:empty` le retire alors complètement du flux. */
.turnstile{ margin-top:14px; display:flex; justify-content:center; }
.turnstile:empty{ margin-top:0; display:none; }