dans la
carte formulaire pour le réactiver. */
.aide-recap {
display: none;
}
.aide-recap .aide-sub {
text-align: center;
}
/* --- TABLETTE / DESKTOP : la photo remplit la hauteur restante à côté du formulaire --- */
@media (min-width: 768px) {
.hero-grid {
align-items: stretch;
}
.hero-aside {
display: flex;
flex-direction: column;
}
.hero-photo {
flex: 1 1 0;
height: 0;
min-height: 250px;
}
}
/* Variante
du visuel de hero, portée par les quatre pages. Elle
permet de servir l'AVIF avec un repli WebP (c'est le cas de pac.html).
C'est alors le qui occupe la place dans la colonne, pas
l'![]()
: le dimensionnement porte sur le conteneur. */
.hero-pic {
display: block;
overflow: hidden;
}
.hero-pic>img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 768px) {
.hero-aside>.hero-pic {
flex: 1 1 0;
height: 0;
min-height: 250px;
}
}
/* Carrousel du visuel de hero (index.html) : les images sont empilées
dans le cadre de .hero-pic et se fondent l'une dans l'autre. La classe
.on désigne la vue affichée ; main.js la fait tourner. */
.hero-caro {
position: relative;
}
.hero-caro>img {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .5s ease;
}
.hero-caro>img.on {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.hero-caro>img {
transition: none;
}
}
/* En mobile la bande ne fait que 140 px : on remonte le cadrage pour
garder le groupe extérieur entier plutôt que la pelouse. */
@media (max-width: 767px) {
.hero-pic {
height: 140px;
}
.hero-pic>img {
object-position: center 30%;
}
}
/* bloc « jusqu'à X € d'aides » */
.aide-box {
background: var(--navy-d);
color: #fff;
padding: 20px 22px 16px;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
/* Variante posée sur le navy de la charte plutôt que sur le navy foncé.
Portée par les quatre pages : pac.html, pv.html, ite.html et
renovation-maison.html.
Le palier min-width n'est pas décoratif : plus haut, le bloc
@media (max-width: 767px) de .hero-grid-alt retire tout l'habillage de
carte avec un sélecteur de même spécificité (0,2,0). Placée après lui,
cette règle l'emporterait en mobile et y réafficherait un fond bleu.
La borner au desktop la cantonne aux largeurs où le bloc est peint.
Sur une page sans .hero-grid-alt, le bloc resterait donc en --navy-d
en mobile — aucune des quatre pages concernées n'est dans ce cas. */
@media (min-width: 768px) {
.aide-box.aide-box-navy {
background: var(--navy);
}
}
.aide-box::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 50% -20%, rgba(255, 255, 255, .10), transparent 60%);
pointer-events: none;
}
.aide-box>* {
position: relative;
}
.aide-pill {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 6px;
padding: 5px 10px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #a9c0e0;
}
.cocarde {
width: 15px;
height: 10px;
border-radius: 2px;
flex: 0 0 15px;
overflow: hidden;
display: flex;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
.cocarde i {
flex: 1;
}
.cocarde i:nth-child(1) {
background: #1e4bab;
}
.cocarde i:nth-child(2) {
background: #fff;
}
.cocarde i:nth-child(3) {
background: #E1000F;
}
.aide-lead {
font-size: 10.5px;
letter-spacing: .18em;
text-transform: uppercase;
color: #7e99c2;
font-weight: 700;
margin-top: 16px;
}
.aide-amount {
font-size: 44px;
line-height: 1;
font-weight: 800;
letter-spacing: -.025em;
font-variant-numeric: tabular-nums;
margin-top: 8px;
color: #fff;
}
/* Le symbole est à la même taille et à la même graisse que le montant : il
hérite des deux. Plus de vertical-align, qui ne servait qu'à rattraper
l'alignement optique d'un glyphe plus petit — à taille égale les lignes
de base coïncident déjà. */
.aide-amount em {
font-style: normal;
font-size: inherit;
font-weight: inherit;
color: var(--orange);
margin-left: 4px;
}
.aide-rule {
width: 34px;
height: 3px;
border-radius: 2px;
background: var(--orange);
margin: 15px auto 13px;
}
.aide-sub {
font-size: 12.5px;
color: #9db4d6;
line-height: 1.5;
}
.aide-list {
margin-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .09);
text-align: left;
}
.aide-list span {
display: flex;
align-items: center;
gap: 9px;
font-size: 12.5px;
color: #cddcf0;
padding: 7px 0;
border-bottom: 1px solid rgba(255, 255, 255, .07);
font-weight: 500;
}
.aide-list span:last-child {
border-bottom: 0;
}
.aide-list span::before {
content: "";
width: 14px;
height: 14px;
flex: 0 0 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F47124' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
}
/* --- carte formulaire --- */
#form-card {
min-height: 420px;
display: flex;
flex-direction: column;
}
.fc-head {
text-align: center;
padding-bottom: 18px;
margin-bottom: 20px;
border-bottom: 1px solid #eef2f8;
}
/* text-wrap: balance répartit les lignes à égalité plutôt que de remplir
la première au maximum : sans lui, « aides » restait seul en 2e ligne. */
.fc-title {
font-size: 17px;
font-weight: 800;
color: var(--navy);
line-height: 1.35;
text-wrap: balance;
}
.fc-sub {
font-size: 13px;
color: #94a3b8;
margin-top: 5px;
}
@media (min-width: 768px) {
.fc-title {
font-size: 19px;
}
}
/* --- Variante : titre détaché dans sa propre carte (les quatre pages) ---
.fc-col empile la carte titre et la carte formulaire dans la cellule
de droite du hero, avec un écart qui rend la séparation lisible. La
carte du bas prend la hauteur restante pour rester alignée sur la
colonne de gauche en desktop.
Une page qui garderait le titre à l'intérieur de la carte formulaire
ne porterait pas .fc-headcard et conserverait le trait de séparation
défini par .fc-head — aucune n'est aujourd'hui dans ce cas. */
.fc-col {
display: flex;
flex-direction: column;
gap: 14px;
}
.fc-col> :last-child {
flex: 1 1 auto;
}
/* Le widget du formulaire annonce 800 px de large. Un élément de grille ou
de flex ne rétrécit pas sous la largeur de son contenu (min-width: auto) :
sans ces règles, la colonne prenait donc 800 px et débordait de l'écran
sous 1100 px environ — carte coupée à droite, page qui défile de côté.
min-width: 0 à chaque niveau laisse la colonne suivre la largeur
disponible, et le widget est borné à celle de son conteneur. */
.hero-grid>*,
.fc-col>*,
#form-slot,
#form-slot-modal {
min-width: 0;
}
heyflow-wrapper {
display: block;
max-width: 100%;
}
.fc-headcard {
padding: 10px 22px;
/* Ombre plus marquée que celle de .card : cette carte est basse et large,
l'ombre par défaut s'y lisait à peine. Même teinte navy et même
construction en trois couches — contact, portée, diffusion — pour rester
dans le langage visuel des autres cartes, avec des valeurs plus fortes. */
box-shadow:
0 2px 4px rgba(2, 42, 106, .07),
0 16px 32px -10px rgba(2, 42, 106, .22),
0 40px 72px -26px rgba(2, 42, 106, .26);
}
/* Bordure lisible sur les deux cartes de la colonne de droite. .card la pose
à 6 % d'opacité, ce qui la rend imperceptible sur le fond bleuté de la page :
le contour n'était dessiné que par l'ombre. À 18 % le trait se voit sans
cerner la carte. On reste sur le navy de la charte, donc aucune couleur
nouvelle n'entre dans la palette. Ces règles passent après .card, à
spécificité égale, et l'emportent donc. */
.fc-headcard,
.fc-body {
border-color: rgba(2, 42, 106, .18);
}
/* dans sa propre carte, le trait sous le titre n'a plus d'objet */
.fc-headcard .fc-head {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
/* Le titre ayant quitté la carte formulaire, son espace intérieur est
resserré. Réglé ici plutôt qu'avec les classes utilitaires p-6 / md:p-10 :
le build Tailwind de ce fichier ne contient pas de md:p-6, et poser la
règle sur #form-card la ferait déborder sur les autres pages. */
.fc-body {
padding: 16px;
}
/* La hauteur plancher de #form-card servait à donner du corps à la carte
quand le titre y figurait encore. Ici elle ne produisait plus que du vide
autour du formulaire sur mobile : la carte épouse désormais son contenu.
En desktop, .fc-col > :last-child la fait malgré tout s'étirer pour rester
alignée sur la colonne de gauche. Sélecteur id + classe pour passer devant
#form-card sans toucher aux autres pages. */
#form-card.fc-body {
min-height: 0;
}
@media (min-width: 768px) {
.fc-col {
gap: 18px;
}
.fc-headcard {
padding: 22px 32px;
}
.fc-body {
padding: 24px;
}
}
/* emplacement réservé au formulaire (Heyflow ou autre) */
#form-slot {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-placeholder {
border: 2px dashed #cfdaea;
border-radius: 14px;
background: #fbfcfe;
padding: 34px 20px;
text-align: center;
color: #7b8aa3;
}
.form-placeholder b {
display: block;
color: var(--navy);
font-size: 15px;
margin-bottom: 8px;
}
.form-placeholder span {
font-size: 13px;
line-height: 1.6;
display: block;
}
.form-placeholder code {
display: inline-block;
margin-top: 12px;
font-size: 12px;
background: #eef3fb;
color: #40587f;
padding: 4px 9px;
border-radius: 6px;
}
/* --- popup formulaire ---
Élément