/* Socle dérivé des tokens de style par la plateforme.
* NE PAS LE RÉÉCRIRE : il est régénéré à chaque nouvelle version des tokens.
* Les couleurs, les tailles et les espacements passent par les variables.
*
* À COLLER DANS LE DE CHAQUE PAGE :
*
*
*
*/
:root {
--fond: #F2EFE9;
--surface: #E8E4DB;
--texte: #111111;
--texte-doux: #333333;
--accent: #D32F2F;
--accent-texte: #FFFFFF;
--trait: #111111;
--succes: #1A1A1A;
--alerte: #D32F2F;
--police-titre: 'Anton, sans-serif', Georgia, 'Times New Roman', serif;
--police-corps: 'Roboto Mono, monospace', system-ui, -apple-system, 'Segoe UI', sans-serif;
--police-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--t--1: 12.8px;
--t-0: 16.0px;
--t-1: 20.0px;
--t-2: 25.0px;
--t-3: 31.3px;
--t-4: 39.1px;
--t-5: 48.8px;
--t-6: 61.0px;
--esp-0: 4px;
--esp-1: 8px;
--esp-2: 12px;
--esp-3: 16px;
--esp-4: 24px;
--esp-5: 32px;
--esp-6: 48px;
--esp-7: 64px;
--esp-8: 96px;
--rayon: 2px;
--rayon-petit: 8px;
--rayon-bouton: 2px;
--rayon-pastille: 999px;
--ombre: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
--largeur-page: 1180px;
--largeur-texte: 68ch;
}
*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden l'emporte TOUJOURS. Sans cette ligne, un « .age-gate {
display: flex } » écrit plus loin rend hidden sans effet : à la deuxième
répétition Vladimir, l'écran d'âge restait affiché après « Oui » et aucun
visiteur n'entrait sur le site — invisible aux captures, qui ne l'ouvrent
jamais (navigator.webdriver). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--fond);
color: var(--texte);
font-family: var(--police-corps);
font-size: var(--t-0);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Titres : ferrés à gauche, casse phrase, jamais centrés par défaut. */
h1, h2, h3, h4 {
font-family: var(--police-titre);
font-weight: 600;
line-height: 1.15;
margin: 0 0 var(--esp-3);
text-wrap: balance;
}
h1 { font-size: var(--t-5); letter-spacing: -0.02em; }
h2 { font-size: var(--t-3); letter-spacing: -0.01em; }
h3 { font-size: var(--t-2); }
h4 { font-size: var(--t-1); }
p, ul, ol { margin: 0 0 var(--esp-3); max-width: var(--largeur-texte); }
small, .meta { font-size: var(--t--1); color: var(--texte-doux); }
code, pre { font-family: var(--police-mono); font-size: var(--t--1); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
/* Rythme : une section respire, et la page a une largeur. */
.page { width: 100%; max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--esp-4); }
/* Filet de sécurité : une bande de premier niveau SANS conteneur .page garde
ses marges — son fond reste pleine largeur, son contenu tient dans la
colonne. À la troisième répétition Vladimir, aucune section n'avait de
.page : tout le site collait au bord gauche de l'écran. Le « body > div »
couvre l'enveloppe que pose un contrôle d'âge (inert sur tout le site). */
:where(body > header, body > footer, body > section, body > div > header, body > div > footer, main > section, main > article, main > header):not(.page):not(:has(.page)) {
padding-inline: max(var(--esp-4), calc((100% - var(--largeur-page)) / 2 + var(--esp-4)));
}
section { padding-block: var(--esp-8); }
section + section { border-top: 1px solid var(--trait); }
.alternee { background: var(--surface); }
/* Grille : jamais de calcul de pourcentages en flex. */
.grille { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grille-2 { display: grid; gap: var(--esp-5); grid-template-columns: 1fr; }
.duo { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) {
.grille-2 { grid-template-columns: 1fr 1fr; }
.duo { grid-template-columns: 1fr 1fr; }
}
/* Cartes : le relief se fait au trait avant de se faire à l'ombre (personnalite.relief). */
.carte {
background: var(--fond);
border: 1px solid var(--trait);
border-radius: var(--rayon);
padding: var(--esp-4);
box-shadow: none;
}
.carte.posee { box-shadow: var(--ombre); border-color: transparent; }
/* Boutons : la forme vient de personnalite.forme (pilule par défaut). Plein pour une décision, au trait pour le reste. */
.bouton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--esp-1);
padding: var(--esp-2) var(--esp-4);
min-height: 44px;
border-radius: var(--rayon-bouton);
border: 1px solid var(--accent);
background: var(--accent);
color: var(--accent-texte);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform .12s ease, opacity .12s ease;
}
.bouton:hover { opacity: .9; }
.bouton:active { transform: translateY(1px); }
.bouton.trait { background: transparent; color: var(--texte); border-color: var(--trait); }
.bouton.trait:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
/* Formulaires : l'erreur se dit à côté du champ, pas ailleurs. */
label { display: block; font-weight: 500; margin-bottom: var(--esp-1); }
input, select, textarea {
width: 100%;
padding: var(--esp-2) var(--esp-3);
min-height: 44px;
background: var(--fond);
border: 1px solid var(--trait);
border-radius: var(--rayon-petit);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.champ { margin-bottom: var(--esp-4); }
.champ .erreur { display: block; margin-top: var(--esp-1); font-size: var(--t--1); color: var(--alerte); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--alerte); }
/* États : ils signalent, ils ne décorent pas. */
.pastille { display: inline-block; padding: 2px var(--esp-2); border-radius: var(--rayon-pastille); font-size: var(--t--1); border: 1px solid var(--trait); }
.pastille.ok { color: var(--succes); border-color: color-mix(in srgb, var(--succes) 40%, transparent); }
.pastille.ko { color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 40%, transparent); }
/* En-tête et pied : la navigation ne prend pas le bouton plein. */
.barre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); padding-block: var(--esp-3); }
.barre nav { display: flex; gap: var(--esp-4); flex-wrap: wrap; }
.barre nav a { color: var(--texte); text-decoration: none; }
.barre nav a:hover, .barre nav a[aria-current="page"] { color: var(--accent); }
footer { padding-block: var(--esp-6); border-top: 1px solid var(--trait); color: var(--texte-doux); font-size: var(--t--1); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ───────────────────── RECETTES DU SOCLE ─────────────────────
* Le contrat entre la bible de la landing, ce fichier et le webdesigner :
* chaque nom cité par RECETTES_SOCLE (@feat/shared) a sa classe ici. */
/* En-tête : collant, filet au trait, jamais l'ombre. */
.entete {
position: sticky;
top: 0;
z-index: 10;
background: color-mix(in srgb, var(--fond) 88%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--trait);
}
/* Héros : visible sans défiler, trois variantes. */
.heros { padding-block: var(--esp-8); }
.heros--duo { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) {
.heros--duo { grid-template-columns: 1fr 1.1fr; }
.heros--duo > .media { order: 2; }
}
.heros--plein { position: relative; padding-block: var(--esp-8); color: var(--accent-texte); overflow: hidden; }
.heros--plein > .media { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.heros--plein::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, color-mix(in srgb, var(--fond) 12%, transparent), color-mix(in srgb, var(--fond) 80%, transparent));
}
.heros--typo h1 { font-size: var(--t-6); }
.sur-titre {
display: inline-block;
margin-bottom: var(--esp-2);
font-family: var(--police-corps);
font-size: var(--t--1);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--accent);
}
.sous-titre { font-size: var(--t-1); color: var(--texte-doux); max-width: var(--largeur-texte); }
.actions { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }
@media (max-width: 759px) {
.actions { flex-direction: column; align-items: stretch; }
.actions .bouton { width: 100%; }
}
/* Preuves : une bande de faits RÉELS sous le héros, jamais un logo inventé. */
.preuves {
display: flex;
flex-wrap: wrap;
gap: var(--esp-5);
justify-content: center;
padding-block: var(--esp-5);
border-top: 1px solid var(--trait);
border-bottom: 1px solid var(--trait);
color: var(--texte-doux);
font-size: var(--t--1);
text-align: center;
}
/* Bénéfices : trois colonnes, titre court + phrase + visuel ou icône. */
.benefices { display: grid; gap: var(--esp-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .benefices { grid-template-columns: repeat(3, 1fr); } }
.benefices svg { width: 28px; height: 28px; margin-bottom: var(--esp-2); stroke: var(--accent); fill: none; stroke-width: 1.75; }
/* Étapes : compteur CSS, jamais une liste à puces. */
.etapes { counter-reset: etape; display: grid; gap: var(--esp-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etapes > * { position: relative; padding-top: var(--esp-6); counter-increment: etape; }
.etapes > *::before {
content: counter(etape);
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--rayon-pastille);
background: var(--accent);
color: var(--accent-texte);
font-family: var(--police-titre);
font-weight: 600;
}
/* Bloc alterné : image et texte côte à côte — jamais trois cartes d'affilée. */
.bloc-alterne { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) {
.bloc-alterne { grid-template-columns: 1fr 1fr; }
.bloc-alterne.bloc-alterne--inverse > :first-child { order: 2; }
}
/* Offre : prix / accès anticipé, une carte se détache en vedette. */
.offre { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .offre { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.offre--vedette {
border: 2px solid var(--accent);
border-radius: var(--rayon);
padding: var(--esp-5);
background: var(--surface);
}
/* FAQ : /, chevron en masque SVG qui hérite de currentColor. */
.faq details { padding-block: var(--esp-3); border-bottom: 1px solid var(--trait); }
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--esp-3);
cursor: pointer;
font-weight: 500;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "";
flex: none;
width: 12px;
height: 12px;
background: currentColor;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq p { color: var(--texte-doux); margin-top: var(--esp-2); }
/* Appel final : la promesse reprise, un dernier bouton. */
.appel-final { padding-block: var(--esp-8); }
.appel-final .actions { margin-top: var(--esp-4); }
/* Media : le cadre d'une image — ratio, recadrage, rayon ; jamais agrandie. */
.media { border-radius: var(--rayon); overflow: hidden; background: var(--surface); }
.media img, .media svg, .media video { width: 100%; height: 100%; object-fit: cover; }
/* Apparition douce au défilement : rien n'est masqué sans JavaScript (classe
* posée par le script sur = .js). Transform + opacity, rien d'autre —
* aucune saccade, rien sous prefers-reduced-motion (voir plus bas). */
.js .apparition { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js .apparition.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}