/* ──────────────────────────────────────────────────────────────────
Mon Puzzle Intérieur — coquille « MODALE »
Créée le 04/08/2026 (décision Yann) en extrayant la coquille que
/merci portait en inline, pour que les pages de compte et d'accès
cessent d'être des pages pleines et deviennent des fenêtres posées
sur la maison.
Le principe : la page n'occupe pas l'écran, elle FLOTTE dessus.
Derrière, le fond du menu (posé par page-brand.css) reste visible —
le client ne quitte jamais vraiment la maison, il ouvre un tiroir.
À charger APRÈS page-brand.css :
Balisage attendu :
✕
Mon Puzzle Intérieur
…contenu…
⚠️ Cette feuille ne décrit QUE la coquille : le fond, la carte, la
croix, le logo. Jamais le contenu (formulaires, boutons, tableaux) —
il reste défini par chaque page, qui a ses propres besoins.
────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 16px;
}
/* Centrage vertical par marges automatiques et NON par `justify-content` seul.
Quand le contenu dépasse la hauteur d'écran, un conteneur flex centré fait
déborder le haut HORS de la zone scrollable : le début de la carte devient
inatteignable. Les marges `auto` sur l'enfant centrent quand il y a de la
place et se replient sur zéro quand il n'y en a plus. Un seul enfant visible
ici — en-tête et pied sont masqués juste en dessous.
Sélecteur nommé plutôt que `body > *` : les scripts de modales (évolution,
documents légaux) injectent leurs calques en fin de `body`, et il ne faut pas
leur poser de marges. Ces trois formes couvrent les pages converties —
`` direct, `.wrap` (offert), `.conn-content` (connexion). */
body > main,
body > .wrap,
body > .conn-content,
body > .modal-card { margin-top: auto; margin-bottom: auto; }
/* ── Page ouverte DANS la fenêtre volante (doc-overlay.js) ────────────────────
/support et /legal ont deux vies : visitées directement, elles sont des
modales posées sur la maison ; ouvertes depuis un pied de page, elles sont
chargées en iframe DANS une carte qui fait déjà tout ce travail. Sans cette
neutralisation on obtiendrait la maison et le voile à l'intérieur de la
petite carte — une modale dans une modale.
La classe est posée sur par un garde en tête de ces pages : iframe
détectée OU `?embed=1` (passé par doc-overlay.js). Les huit pages de compte
ne la posent jamais — ce bloc leur est invisible. */
html.doc-embed body {
display: block;
min-height: 0;
padding: 0;
background-image: none;
}
html.doc-embed body::before { content: none; }
html.doc-embed .modal-card {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
}
/* La fenêtre volante a déjà sa propre croix de fermeture. */
html.doc-embed .modal-x { display: none; }
/* En-tête et pied de page bruns : masqués. La carte porte déjà le logo,
et une modale n'a ni barre de nav ni plan du site. Sélecteurs larges à
dessein — ces pages déclarent leur en-tête de six façons différentes. */
header,
.topbar,
.site-header,
.nav-header,
footer,
footer.site-footer { display: none !important; }
/* Voile sombre entre le fond du menu et la carte. Sans lui, une carte crème
sur une maison claire ne se détache pas.
⚠️ Il était en `z-index:-1`, et n'apparaissait alors que sur UNE PARTIE des
pages. Cause : un élément en z-index négatif se peint AVANT le fond des blocs
en flux. Les pages qui chargent page-brand.css ont un `html{background-color}`,
ce qui empêche le fond du `body` de remonter au canevas — le body peint donc
son propre fond, PAR-DESSUS le voile, qui disparaissait. Les pages sans
page-brand.css laissaient le fond remonter au canevas et gardaient le voile.
Correction : voile en `z-index:0` (au-dessus de tout fond de bloc) et carte
remontée à `z-index:1`. `pointer-events:none` pour qu'il n'intercepte rien. */
body::before {
content: '';
position: fixed;
inset: 0;
background: rgba(12, 7, 3, .55);
z-index: 0;
pointer-events: none;
}
/* ── La carte ── */
.modal-card {
position: relative;
z-index: 1; /* au-dessus du voile (cf. body::before) */
width: 100%;
max-width: 600px;
margin: auto;
background: linear-gradient(168deg, #F7EFD9, #EFE3C2);
border: 1px solid #C99A4E;
border-radius: 18px;
box-shadow: 0 26px 64px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
padding: 38px 40px 42px;
}
@media (max-width: 540px) {
.modal-card { padding: 28px 22px 32px; border-radius: 14px; }
body { padding: 20px 12px; }
}
/* Cardo dans toute la carte : les pages de compte héritaient de polices
système hétéroclites (-apple-system, Spectral…). Une seule voix. */
.modal-card,
.modal-card p, .modal-card h1, .modal-card h2, .modal-card h3,
.modal-card a, .modal-card strong, .modal-card em, .modal-card label {
font-family: 'Cardo', Georgia, serif;
}
.modal-card h1, .modal-card h2, .modal-card h3 { color: #111111; font-weight: 500; }
.modal-card p { color: #111111; }
.modal-card a { color: #A63828; }
/* ── La croix de fermeture ── */
.modal-x {
position: absolute;
top: 14px; right: 16px;
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid #C99A4E;
background: rgba(255, 255, 255, .45);
color: #4A3B26;
font-size: 16px; line-height: 30px; text-align: center;
text-decoration: none;
transition: background .15s;
}
.modal-x:hover { background: rgba(255, 255, 255, .8); color: #4A3B26; }
/* La croix est un placé DANS la carte : `.modal-card a` (0,1,1) l'emporte
sur `.modal-x` (0,1,0), et la croix virait au rouge des liens. Ce rappel plus
spécifique (0,2,1) lui rend son brun. */
.modal-card a.modal-x { color: #4A3B26; }
/* ── Le logo en tête de carte ── */
.card-logo {
display: flex; align-items: center; justify-content: center;
gap: 10px; margin: 0 0 20px;
}
.card-logo img {
width: 36px; height: 36px; object-fit: contain;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}
.card-logo span {
font-family: 'IM Fell English', Georgia, serif;
font-size: 20px; color: #4A3B26; letter-spacing: .3px;
}
Mon Puzzle Intérieur