/* Extrait de maquettes/motdepasse/tarifs.html (v3.3) */
/* =========================================================================
Mot de passe by Belentia — même socle que A.html (v2).
Couleur de l'outil : orange #F97316 (survol #EA580C).
====================================================================== */
/* ---- Jetons de l'outil : orange #F97316 ---- */
:root {
--accent: #F97316;
--accent-ink: #FFFFFF;
--accent-hover: #EA580C;
--symbol: #4B5A75; /* symboles du secret affiché */
--mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}
/* ---- Nav centrée : marque | liens centrés | EN ---- */
.nav--centered .nav__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.nav--centered .nav__links { margin-left: 0; justify-content: center; }
.nav--centered .nav__actions { justify-self: end; }
.nav__actions .btn--ghost { padding-inline: 14px; font-weight: 600; }
@media (max-width: 900px) {
.nav--centered .nav__inner { display: flex; }
}
/* Boutons secondaires, eyebrows, chips : voir _assets/motdepasse/affine.css (v3 affinée). */
/* ---- Cibles tactiles : 44 px sur les liens autonomes ---- */
.link-arrow, .brand { min-height: 44px; }
/* ---- Emplacement d'image à produire ---- */
.slot-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
padding: var(--space-3);
background: #EEF0F4;
border: 1px dashed #C9CDD6;
border-radius: var(--radius);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: var(--muted);
text-align: center;
}
/* ---- Liste des emplacements d'images ---- */
.slots-section { padding-block: var(--space-6) var(--space-8); border-top: 1px solid var(--line); }
.slots > summary {
display: flex;
align-items: center;
gap: var(--space-1);
min-height: 44px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--muted);
cursor: pointer;
list-style: none;
}
.slots > summary::-webkit-details-marker { display: none; }
.slots > summary:hover { color: var(--ink); }
.slots > summary svg { transition: transform var(--t) var(--ease); }
.slots[open] > summary svg { transform: rotate(180deg); }
.slots__list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.slot {
min-width: 0; /* boucle 2 : même règle sur les 4 pages */
padding: var(--space-3);
background: var(--canvas);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.slot__id {
font-family: var(--mono);
font-size: 13px;
font-weight: 500;
color: var(--accent);
}
.slot__meta {
margin-top: 4px;
font-size: 14px;
line-height: 1.6;
color: var(--muted);
overflow-wrap: anywhere; /* v3.3 : chemins de fichiers longs */
}
.slot__meta b { color: var(--ink); font-weight: 600; }
.slot__prompt {
margin-top: var(--space-2);
padding: var(--space-2);
background: var(--soft);
border-radius: var(--radius-sm);
font-family: var(--mono);
font-size: 12.5px;
line-height: 1.6;
color: var(--text);
overflow-wrap: anywhere;
}
/* ---------- En-tête ---------- */
.tar-head { padding-block: var(--space-8) var(--space-5); }
.tar-head__inner { max-width: 720px; }
.tar-head__inner > * + * { margin-top: var(--space-2); }
/* Contre-vérification v33 : premier écran mobile = titre, chapeau, faits ET l'offre
avec son prix. L'affiche de l'en-tête (la même que l'ambiance de l'accueil) n'est
gardée qu'au-delà de 720 px ; le produit reste montré sous l'offre (téléphone). */
/* Passe 9,5 (24/09) : l'en-tête porte la vraie boucle d'ambiance de l'accueil
(vidéo 960/1280 par le kit ambiance.js, affiche en attendant). Sous 720 px,
elle n'est plus masquée : bande 16/9 (~200 px à 390) sous le chapeau, avant
les faits ; le premier écran mobile bouge, sur la même image que l'accueil. */
.head-photo.amb { position: relative; isolation: isolate; padding: 0; --amb-pos: 100% 50%; --amb-pos-m: 100% 50%; }
@media (max-width: 720px) {
.tar-head { padding-block: var(--space-4) var(--space-3); }
.tar-head .head-photo { aspect-ratio: 16 / 9; margin-top: var(--space-3); border-radius: 20px; }
.offer-section { padding-top: var(--space-5); }
}
/* ---------- Ligne de faits ---------- */
.facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
padding-block: var(--space-3);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.fact { display: flex; align-items: center; gap: var(--space-1); font-size: 15px; color: var(--muted); }
.fact .check { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; }
.fact b { color: var(--ink); font-weight: 700; }
/* Boucle 2 — tablette et petit bureau : les quatre faits en grille 2 × 2,
colonnes alignées au pixel (en flex, la 2e colonne tombait à 255 puis
260 px à 768, et « 3 + 1 » à 1 024). Au-delà de 1 180 px, une rangée. */
@media (min-width: 721px) and (max-width: 1180px) {
.facts {
display: grid;
grid-template-columns: repeat(2, max-content);
column-gap: var(--space-6);
}
}
/* ---------- Offre ---------- */
.offer { align-items: center; }
/* v3 affinée — la SEULE offre du produit garde la mise en avant, adoucie :
fond accent 5 %, filet 1 px accent, aucune ombre, coches dessinées. */
.price {
padding: var(--space-4);
background: color-mix(in srgb, #F97316 9%, #fff); /* contre-vérification v33 : fond 9 % + filet plein (recette validée), plus de crème à 4 % */
border: 1px solid var(--accent);
border-radius: var(--radius);
}
.price .chip { background: var(--canvas); border: 1px solid var(--line); color: #4B5563; }
/* Boucle 4 : la coche se cale sur la PREMIÈRE ligne de sa puce (centrée sur le
bloc, elle flottait entre deux lignes), comme les autres listes du site. */
.price .ticks li { align-items: flex-start; }
.price .check { flex: 0 0 24px; width: 24px; height: 24px; margin: 1px 0 0; }
.price .check__ring { fill: var(--canvas); }
.price__sub { margin-top: 4px; font-size: 15px; color: var(--muted); }
.price__amount {
margin-top: var(--space-2);
font-family: var(--font-title);
font-weight: 700;
font-size: 56px;
line-height: 1;
letter-spacing: -.02em;
color: var(--ink);
}
.price .ticks { margin-top: var(--space-3); }
.price .ticks li { font-size: 16px; color: var(--text); }
.price .btn { margin-top: var(--space-4); }
.offer__aside > * + * { margin-top: var(--space-2); }
/* ---------- Passerelle ---------- */
.bridge__inner { max-width: 640px; margin-inline: 0; padding-inline: 0; }
.bridge__inner > * + * { margin-top: var(--space-2); }
.bridge__inner .actions { margin-top: var(--space-4); }
/* ---- v3 : jetons partagés avec l'accueil ---- */
:root {
--accent-6: color-mix(in srgb, var(--accent) 6%, #FFF);
--accent-line: color-mix(in srgb, var(--accent) 40%, #FFF);
}
@supports not (color: color-mix(in srgb, #000 6%, #fff)) {
:root { --accent-6: #FEF5EE; --accent-line: #FBC9A3; }
}
/* ---- v3 : nav collante et légèrement floutée, comme sur l'accueil ---- */
.nav--centered {
position: sticky;
top: 0;
background: rgba(255, 255, 255, .86);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
}
@media (max-width: 900px) { .nav--centered { position: static; } }
/* ---- v3 : strip « Les outils Belentia », identique sur les 4 pages ---- */
.tools { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.tools__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.tools__list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.tools__list a {
display: inline-flex; align-items: center; gap: 8px;
min-height: 44px; padding: 0 16px;
background: var(--canvas);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
font-size: 15px; font-weight: 600; color: var(--text);
transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.tools__list a:hover { border-color: var(--accent-line); background: var(--accent-6); color: var(--ink); text-decoration: none; }
.tools__list a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.tools__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 8px; }