/* Accueil (A.html) — v3.3 appareils et finition. */
/* =====================================================================
v3.3 — appareils et finition (23/09/2026)
Les photos d'appareils recomposées (appareil-editeur-hd.webp,
appareil-telephone-pdf.webp) sont remplacées par le kit d'appareils
(_assets/device.css) et trois vraies captures de l'outil
(_assets/cv/ecrans/). L'appareil est toujours montré entier : pas de
cadre arrondi, pas de fond gris, pas de balayage qui le rogne. Les
anciennes règles .reveal__frame et .cta-photo de v32.css ne sont plus
utilisées par cette page.
================================================================== */
/* Ordinateur ou téléphone selon la largeur : .dv-only-desktop / .dv-only-mobile
du kit (720 / 721 px). Boucle 2 : la page ne les redéfinit plus, et ne
pose plus d'isolation sur les enveloppes (chaque .dv isole déjà son reflet). */
/* ---- Révélation produit ---- */
/* La phrase et l'ordinateur tiennent dans un écran à la fin du scrub :
largeur plafonnée à 1 040 px et à la hauteur utile (l'appareil fait
0,57 × sa largeur en hauteur). */
.reveal__device {
position: relative;
width: min(100%, 1040px, calc((100vh - 230px) * 1.74));
width: min(100%, 1040px, calc((100svh - 230px) * 1.74));
margin-inline: auto;
padding-bottom: 12px;
transform-origin: 50% 40%;
}
.reveal__device .dv { --dv-w: 100%; }
.reveal__device--phone { width: auto; padding-bottom: 16px; }
.reveal__device--phone .dv { --dv-w: min(74vw, 290px); }
/* ---- Bandeau final : le PDF sur téléphone ---- */
.cta-band--visual { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); }
.cta-device { position: relative; padding-bottom: 14px; }
.cta-device .dv--phone { --dv-w: 280px; }
@media (max-width: 1000px) {
.cta-band--visual { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.cta-band--visual .cta-device { order: -1; }
}
@media (max-width: 720px) {
.cta-device .dv--phone { --dv-w: min(74vw, 290px); }
}
/* ---- Finition ---- */
/* Cartes de CV (rails du hero, bandes des modèles) : le nom tient sur une
ligne et le prix passe dessous. En v3.2, « Classique Essentiel »,
« Magazine Éditorial »… se coupaient sur deux lignes à côté de la
pastille, et les cartes d'une même bande n'avaient pas la même hauteur. */
.cvcard__foot {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 6px;
padding: 10px 12px 12px;
}
.cvcard__name { white-space: nowrap; line-height: 1.25; }
/* Liens « Voir les 60 familles », « Voir tous les articles » : une ligne,
même quand la tête de section se resserre (tablette). */
.section-head--row .link-arrow { flex: 0 0 auto; white-space: nowrap; }
/* Filtres de la galerie sur téléphone : les quatre tiennent sur une ligne
(« Créatif » passait seul à la ligne à 390 px). Cible tactile de 44 px gardée. */
@media (max-width: 720px) {
.filters { flex-wrap: nowrap; gap: 8px; }
.filter { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: 14px; }
}
/* Petits téléphones (≤ 380 px) : l'éventail de « Ce que vous obtenez »
débordait de 3 px à 360 px ; on le resserre au lieu de le rogner. */
@media (max-width: 380px) {
.fan--result .fan__sheet { width: 136px; }
.fan--result .fan__sheet:nth-child(1) { translate: -82px 12px; }
.fan--result .fan__sheet:nth-child(3) { translate: 82px 12px; }
}
@media (max-width: 350px) {
.filters { flex-wrap: wrap; }
.fan--result .fan__sheet { width: 124px; }
.fan--result .fan__sheet:nth-child(1) { translate: -72px 10px; }
.fan--result .fan__sheet:nth-child(3) { translate: 72px 10px; }
}
/* Guides sur tablette : trois colonnes plutôt que 2 + 1 carte orpheline ;
titres sur trois lignes et accroche sur deux, sans rien couper. */
@media (min-width: 721px) and (max-width: 1024px) {
#guides .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
#guides .guide-card__title { -webkit-line-clamp: 3; line-clamp: 3; }
#guides .guide-card__excerpt { -webkit-line-clamp: 2; line-clamp: 2; }
}
/* =====================================================================
v3.3 — reprise après critique (23/09/2026)
================================================================== */
/* ---- Réplique de l'éditeur (#saisie) ----
L'aperçu montre deux vraies captures A4 de /generator, faites avec les
données du tour (Camille Rousseau, chargée de communication, Maison
Aster) : nom, colonne de contact et corps du CV sont ceux de la même
personne. Le calque blanc ne couvre l'en-tête que pendant la frappe du
nom et du poste, puis s'efface en fondu sur le vrai rendu (même texte).
Géométrie mesurée au pixel sur les deux captures (feuille de 680 px) ;
police proche de celle du moteur PDF (DejaVu Sans, sinon Verdana). */
.sheet-ov {
display: block;
font-family: "DejaVu Sans", Verdana, var(--font-body);
white-space: nowrap;
transition: opacity .35s ease;
}
.sheet-ov[data-on="false"] { opacity: 0; }
.sheet-ov__nom,
.sheet-ov__poste { position: absolute; margin: 0; font-family: inherit; line-height: 1; }
.sheet-ov__nom { left: var(--ov-nx); top: var(--ov-ny); }
.sheet-ov__poste { left: var(--ov-px); top: var(--ov-py); }
.sheet-ov[data-style="classic-essential"] {
--ov-l: 6.47cqw; --ov-t: 8.68cqw; --ov-w: 60.07cqw; --ov-h: 11.62cqw;
--ov-nx: .74cqw; --ov-ny: .8cqw; --ov-ns: 4.54cqw; --ov-nls: 0em; --ov-ntt: uppercase;
--ov-px: .67cqw; --ov-py: 8.19cqw; --ov-ps: 2.06cqw; --ov-pls: -.018em; --ov-pw: 700; --ov-pc: #111624; --ov-ptt: none;
}
.sheet-ov[data-style="minimal-air"] {
--ov-l: 38.97cqw; --ov-t: 10.3cqw; --ov-w: 56.6cqw; --ov-h: 11cqw;
--ov-nx: .55cqw; --ov-ny: 1.03cqw; --ov-ns: 3.7cqw; --ov-nls: -.011em; --ov-ntt: none;
--ov-px: .5cqw; --ov-py: 8.28cqw; --ov-ps: 1.55cqw; --ov-pls: .176em; --ov-pw: 700; --ov-pc: #4C5361; --ov-ptt: uppercase;
}
/* Sans animation : l'état final du parcours, sans curseur ni bulle. Boucle 2 :
c'est désormais le kit qui le fait (motion.js retire curseur et bulle) ;
la page ne garde que ce que le kit ne connaît pas (expérience ajoutée,
style Minimal Air), voir le script en bas de page. */
/* Boucle 2 — Pause / Rejouer sous la démo, dans le flux (.tour--controls-flow
du kit) : ils ne tombent plus sur la ligne de la légende, ni dans le coin
de la carte. La ligne occupe toute la grille de l'éditeur ; l'écart de
grille (48 / 32 px) est ramené à 16 px sous la légende. */
#saisie .editor > .tour__controls {
grid-column: 1 / -1;
margin-top: calc(var(--space-2) - var(--space-6));
}
@media (max-width: 1000px) {
/* une seule colonne : centrés sur l'axe de l'aperçu, comme la légende */
#saisie .editor > .tour__controls {
justify-content: center;
margin-top: calc(var(--space-2) - var(--space-4));
}
}
/* La pastille « En direct → PDF prêt » quitte la feuille (elle y masquait
le filigrane réel du pied de page) : elle passe dans une tête de colonne,
en miroir de « Mon CV — contenu ». */
.ed-head--apercu { justify-content: space-between; }
.ed-head .sheet-badge {
position: static;
margin-block: -4px;
padding: 4px 10px;
font-size: 12px;
letter-spacing: 0;
text-transform: none;
}
.ed-caption { text-wrap: pretty; }
/* Expérience : poste et entreprise dans deux champs, comme dans l'app
(« Chargée de communication — Maison Aster » était coupé à 390 px). */
.ed-exp__fields { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
.ed-exp__fields { grid-template-columns: minmax(0, 1fr); }
}
/* Scène épinglée (≥ 1 001 × 800 px) : la tête « Aperçu A4 » ajoute une
ligne ; la feuille se règle sur la hauteur d'écran pour que l'éditeur
garde de l'air sous la barre et en bas (35 px à 800 px de haut). */
.ed-scene.scene .editor {
grid-template-columns: minmax(0, 1fr) minmax(0, min(400px, calc((100vh - 300px) / 1.4142)));
grid-template-columns: minmax(0, 1fr) minmax(0, min(400px, calc((100svh - 300px) / 1.4142)));
}
/* Éditeur sur deux colonnes étroites (1 001–1 100 px) : « Chargée de
communication » reste entier dans son champ (texte à 15 px, marge
intérieure de 10 px), sans empiler les champs ni grandir l'éditeur. */
@media (min-width: 1001px) and (max-width: 1100px) {
.editor,
.ed-scene.scene .editor {
grid-template-columns: minmax(0, 1fr) minmax(0, min(360px, calc((100vh - 300px) / 1.4142)));
grid-template-columns: minmax(0, 1fr) minmax(0, min(360px, calc((100svh - 300px) / 1.4142)));
}
.ed-exp { padding: 12px; }
.ed-exp__fields { gap: 12px; }
.ed-exp__fields .field input { padding-inline: 10px; font-size: 15px; }
}
/* Très petits téléphones (≤ 360 px) : un peu moins de marge intérieure,
même raison. */
@media (max-width: 360px) {
.editor { padding: var(--space-2); }
.ed-exp { padding: 12px; }
}
/* « Ce que vous obtenez » de 1 001 à 1 180 px : l'éventail, calé pour
1 200 px, sortait de la gouttière (et de l'écran à 1 001 px). */
@media (min-width: 1001px) and (max-width: 1180px) {
.fan--result .fan__sheet { width: 212px; }
.fan--result .fan__sheet:nth-child(1) { translate: -132px 16px; }
.fan--result .fan__sheet:nth-child(3) { translate: 132px 16px; }
}
/* Tablette : la colonne de l'aperçu (tête, feuille A4, légende) est centrée
dans la carte, à la largeur de la feuille. */
@media (min-width: 721px) and (max-width: 1000px) {
.editor .ed-apercu { width: 100%; max-width: 360px; margin-inline: auto; }
.editor .ed-caption { text-align: center; }
}
/* ---- Téléphone de la révélation : chrome fixe, comme dans l'app ----
En-tête et onglets en haut, barre d'action en bas : deux images posées
au-dessus de l'écran ; seul le formulaire défile entre les deux. Les
marges du défileur (en % de la largeur) valent la hauteur de ces bandes. */
.cv-app-view > .cv-app-chrome {
position: absolute;
left: 0;
z-index: 2;
width: 100%;
height: auto;
pointer-events: none;
}
.cv-app-view > .cv-app-chrome--haut { top: 0; }
.cv-app-view > .cv-app-chrome--bas { bottom: 0; }
.cv-app-view > .dv__scroller {
padding-top: calc(100% * 483 / 1170);
padding-bottom: calc(100% * 261 / 1170);
}
/* ---- Révélation, ordinateur de 721 à 1 100 px : de l'air sur les côtés ---- */
@media (min-width: 721px) and (max-width: 1100px) {
.reveal__device:not(.reveal__device--phone) {
width: min(92%, 1040px, calc((100vh - 230px) * 1.74));
width: min(92%, 1040px, calc((100svh - 230px) * 1.74));
}
}
/* ---- Film « Un clic. Un autre style. » : titre d'abord, puis le visuel ---- */
@media (max-width: 1000px) {
.film__media { order: 0; }
.film__text { margin-bottom: var(--space-2); }
}
/* ---- Avant / après : bloc centré, tête centrée avec lui ---- */
#comparatif .section-head { margin-inline: auto; text-align: center; }
#comparatif .section-head .eyebrow { justify-content: center; }
#comparatif .duo { margin-inline: auto; }
/* 390 : « Traitement de texte » tient sur deux lignes ; les deux légendes
réservent la même hauteur, les sous-légendes restent alignées. */
@media (max-width: 720px) {
.duo__panel figcaption b {
display: flex;
align-items: flex-end;
justify-content: center;
line-height: 1.3;
min-height: 2.6em;
/* boucle 4 : « Traitement / de texte » plutôt que « texte » seul */
text-wrap: balance;
}
}
/* ---- Galerie : une seule présentation des familles (la grille filtrée) ---- */
#modeles .filters { margin-top: 0; }
/* ---- Tarifs : pastille posée sur le bord, rangées alignées d'une carte à l'autre ---- */
@media (min-width: 721px) {
.plans { grid-auto-rows: auto; }
.plan {
position: relative;
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
align-content: start;
}
.plan__flag--empty { display: none; }
.plan--featured .plan__flag {
position: absolute;
top: 0;
left: var(--space-3);
min-height: 0;
margin: 0;
line-height: 1;
translate: 0 -50%;
}
}
/* Le prix, puis l'unité en dessous, sur les quatre cartes : « paiement
unique » ne passe plus seul à la ligne sous 19,99 €, et les unités
s'alignent d'une carte à l'autre (bas de la rangée). */
.plan__price { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; }
.plan__unit { white-space: nowrap; }
/* Liste : les lignes restent serrées en haut de leur rangée. */
.plan__list { align-content: start; }
/* Libellés alignés sur tarifs.html : le bouton tient sur une ligne. */
.plan__foot .btn { padding-inline: var(--space-2); font-size: 15px; white-space: nowrap; }
/* ---- Bandeau final sous 1 000 px : un seul axe, centré sous le téléphone ---- */
@media (max-width: 1000px) {
.cta-band--visual { text-align: center; }
.cta-band--visual .h2 { margin-inline: auto; }
.cta-band--visual .actions { justify-content: center; }
.cta-band--visual p.lead { margin-inline: auto; }
}
/* ---- Veuves : dernière ligne jamais réduite à un mot ---- */
.lead,
.hero__note,
.section-head p,
.use figcaption span,
.fact p,
.faq__answer p { text-wrap: pretty; }
/* « familles de mise en page » : deux lignes équilibrées à 390 px. */
.stats__l { text-wrap: balance; }
/* =====================================================================
v3.3 — boucle 2 (23/09/2026, après contre-critique à 8,5)
================================================================== */
/* ---- Hero, mouvement réduit : des cartes entières, jamais tranchées ----
Rails figés : le kit fond le bas de la piste. On retire le décalage
permanent du second rail (sinon sa première carte est coupée net en
haut). Téléphone (un seul rail) : une seule carte, entière, sans fondu. */
@media (prefers-reduced-motion: reduce) {
.rail--b .marquee__track { margin-top: 0; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
.hero .marquee.rail--a { height: auto; -webkit-mask-image: none; mask-image: none; }
.rail--a .marquee__track > :not(:first-child),
.rail--a .marquee__group > :not(:first-child) { display: none; }
}
/* ---- « Ce que vous obtenez » en tablette : l'éventail est centré, les
trois atouts le suivent sur le même axe (trois colonnes centrées). ---- */
@media (min-width: 721px) and (max-width: 1000px) {
.gain__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.gain__list li { flex-direction: column; justify-content: flex-start; gap: 12px; text-align: center; }
.gain__list b { font-size: 17px; }
}
/* ---- Offres en 2 × 2 (721–1 180 px) : même prix pour les deux rangées ----
Le 44 px d'All Access agrandissait la rangée qu'il partage avec Premium
Plus. La carte reste distinguée par son cadre teal et sa pastille. */
@media (min-width: 721px) and (max-width: 1180px) {
.plan--featured .plan__amount { font-size: 30px; }
}
/* ---- Guides en carrousel (≤ 720 px) : 403 px au plus par carte (grand
téléphone, petite tablette), la suivante dépasse toujours. Boucle 4 : les
couvertures font désormais 1 800 px, la limite ne sert plus qu'à la mise
en page. ---- */
@media (max-width: 720px) {
#guides .guide-card { flex-basis: min(80%, 403px); }
}
/* ---- Images jamais agrandies sur écran Retina, aussi hors des largeurs
de référence (balayage 320–1 440 px) : aperçu A4 de l'éditeur (840 px)
et photos « Pour qui » (960 px) plafonnés entre 480 et 720 px ; grille
des modèles sur trois colonnes dès 861 px. ---- */
@media (max-width: 720px) {
.editor .ed-apercu { width: 100%; max-width: 420px; margin-inline: auto; }
.use { flex-basis: min(76%, 480px); }
}
@media (min-width: 861px) and (max-width: 1000px) {
.models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---- Guides : « Lire le guide » aligné d'une carte à l'autre ----
Boucle 4 : fait par base.css (corps de carte en flex: 1, lien en bas),
la règle de page est retirée. */
/* ---- Bandeau final (≥ 1 001 px) : le téléphone posé avec de l'air ---- */
@media (min-width: 1001px) {
.cta-band--visual { padding-block: 72px 64px; }
}
/* =====================================================================
v3.3 — boucle 3 (23/09/2026) : section ambiance
================================================================== */
/* Réglages du kit (AMBIANCE.md, ligne « cv ») : fond relevé sur le mur teal
de la vidéo (#014C4E), bouton à la couleur vive de l'outil. */
.amb--cv {
--amb-bg: #014C4E;
--amb-ink: #0F766E;
--amb-pos: 68% 60%;
--amb-pos-m: 76% 50%;
--amb-y: 0px; /* l'air vient des sections voisines (96 / 64 px) */
}
/* 481–900 px : vidéo en 16:10, désormais le défaut du kit (--amb-ratio-t) ;
boucle 4, la règle de page est retirée. Tablette (721–900 px) : le kit
empile désormais texte et vidéo ; en 16:10, le mur vide montait jusqu'à
780 px de panneau à 900 px. En 2:1, cadré un peu bas (80 %), bureau, tasse
et plante gardent leur taille et le panneau redescend à 603 px à 768 px
(671 à 900). De 481 à 720 px, le 16:10 du kit reste le meilleur cadrage. */
@media (min-width: 721px) and (max-width: 900px) {
.amb--cv { --amb-ratio-t: 2 / 1; --amb-pos-t: 76% 80%; }
}
/* Lignes des offres : deux lignes équilibrées, jamais un mot seul en fin
de ligne (mêmes règles que tarifs.html ; espaces insécables dans le texte). */
.plan__list li > span { text-wrap: pretty; }
/* Liseré intérieur neutre du panneau : boucle 4, fourni par le kit
(--amb-ring, 7 %) ; la règle de page est retirée. */
/* =====================================================================
v3.3 — boucle 3, correction (23/09/2026, après critique à 8,6)
================================================================== */
/* ---- Ambiance : « Tout est en place. » sur une ligne partout ----
Boucle 4 : le kit plafonne le titre à 52 px (--amb-title-max) et empile
texte et vidéo jusqu'à 900 px ; le titre (≈ 450 px) tient dans la zone
par défaut (50 %, 494 px utiles à 1 440). Les zones élargies de la page
(52 % au-dessus de 1 280 px, 54 % de 721 à 760 px) sont retirées. */
/* ---- Ambiance au téléphone (≤ 480 px) : la tasse entière avec son anse ----
À 76 %, le bord droit du 4:3 tranchait la tasse au milieu de l'anse et le
pot de la plante. Calé à droite (100 %), la fenêtre va de 24,7 à 100 % de
l'image : planchette, stylo, coin du bureau et tasse entiers, 20 px d'air
après l'anse, le pot aussi entier que la photo le permet (la source le
coupe à son bord droit). Essais à 90 et 95 % : l'anse à 8 px du bord, le
pot tranché en son milieu. De 481 à 720 px (16:10), 76 % comme le kit. */
@media (max-width: 480px) {
.amb--cv { --amb-pos-m: 100% 50%; }
}
/* ---- Vos données : titres de carte équilibrés (1 001–1 100 px, « Rattaché
à votre / compte » laissait « compte » seul). ---- */
#donnees .fact .h3 { text-wrap: balance; }
/* ---- Ce que vous obtenez, tablette (721–1 000 px) : de l'air sous
l'éventail. Le coin bas de la feuille inclinée « Claire Vasseur »
descendait à 11 px des tuiles d'icônes ; 35 px, comme à 390. ---- */
@media (min-width: 721px) and (max-width: 1000px) {
.gain__list { margin-top: calc(var(--space-4) + 24px); }
}
/* ---- Hero, 1 001–1 100 px : « Votre prochain » (401 px à 54 px)
dépassait la colonne de 7 px et laissait « Votre » seul en tête. À 48 px,
le titre revient sur les deux lignes des autres largeurs : « Votre prochain /
CV commence ici. ». */
@media (min-width: 1001px) and (max-width: 1100px) {
.h1--xl { font-size: 48px; }
}
/* Très petits écrans (≤ 359 px, balayage à 320) : à 34 px, trois lignes
« Votre / prochain CV / commence ici. » ; à 30 px, les deux lignes de 390. */
@media (max-width: 359px) {
.h1--xl { font-size: 30px; }
}
/* =====================================================================
v3.3 — boucle 4 (23/09/2026, après contre-critique à 8,9)
================================================================== */
/* Couvertures des guides sur fond teal clair : fond d'attente au teal des
photos, jamais de gris pendant le chargement. */
#guides .guide-card__cover { background: #6CEBD9; }
/* Bande « Sept outils » : jamais une pastille seule sur la dernière ligne.
Les sept pastilles (80 · 112 · 141 · 138 · 72 · 103 · 133 px, mêmes
largeurs sous Chromium et WebKit) tiennent sur une ligne dès 839 px de
conteneur ; en dessous, le repli laissait « Transcriptor » seul (6 + 1 à
768, 3 + 3 + 1 à 390). Une largeur plafonnée donne des lignes pleines :
4 + 3 de 533 à 899 px, 2 + 2 + 3 de 360 à 532 px (écart de 8 px, 4 px de
marge), 2 + 1 + 2 + 2 sous 360 px. */
@media (max-width: 532px) { .tools { gap: 8px; } }
@media (max-width: 359px) { .tools { max-width: 280px; } }
@media (min-width: 360px) and (max-width: 532px) { .tools { max-width: 340px; } }
@media (min-width: 533px) and (max-width: 899px) { .tools { max-width: 540px; } }
/* ===================================================================
Boucle 5 — appareils vivants : parcours du kit motion posés SUR
l'ordinateur et le téléphone de la révélation. Écrans = vraies
captures de /generator (une par état, prises en cliquant) ; cibles
invisibles en % au-dessus de la capture, dans .dv__view.
================================================================== */
.cv-tour { position: relative; }
.cv-hit { position: absolute; display: block; }
.tour .cv-hit.is-tour-hover,
.tour .cv-hit.is-tour-active { outline: 0; box-shadow: none; transform: none; }
.cv-tour .tour__cursor:not([style*="translate"]) { opacity: 0; }
.cv-tour__ctrls { margin-top: var(--space-3, 12px); }
.cv-tour__ctrls:empty { display: none; }
/* téléphone : point de toucher à la place de la flèche, même sur ordinateur */
.cv-tour--touch .tour__cursor svg { display: none; }
.cv-tour--touch .tour__cursor::before {
content: "";
display: block;
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
border-radius: 50%;
background: rgba(17, 24, 39, .28);
box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}
.reveal__device--phone .dv__view { background: #FFFFFF; }
/* Boucle 5 : tablette empilée (721-1 000 px) — la tête « Aperçu A4 » et son
filet vont d'un bord à l'autre de la carte, comme « Mon CV — contenu » ;
la feuille et sa légende restent centrées à 360 px. */
@media (min-width: 721px) and (max-width: 1000px) {
.editor .ed-apercu { max-width: none; }
.editor .ed-apercu > .sheet,
.editor .ed-apercu > .ed-caption { max-width: 360px; margin-inline: auto; }
}
.mobile-panel__cta { margin-bottom: 0; }
/* Le libellé caché des liens « Lire le guide » reste dans sa carte (carrousel des guides). */
.guide-card .link-arrow { position: relative; }
.mobile-panel .mobile-panel__cta + .btn--block { margin-top: 12px; }
/* Contre-vérification du 24/09 : premier écran mobile. Les trois étapes
sont racontées par #produit et #saisie ; la note tient sur une ligne ;
le rail n'est plus fondu en haut (la première carte arrive entière). */
/* Correction après contrôle (24/09) : le fil « 1 Contenu → 2 Style → 3 PDF » et la fin de la
ligne de réassurance reviennent sur téléphone ; la note passe sur deux lignes au besoin. */
@media (max-width: 720px) {
.hero .steps { margin-top: var(--space-3); }
.hero__note { text-wrap: pretty; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
.hero .marquee.rail--a { -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); }
/* Passe 9,5 b : sans fondu en haut, le pied de la carte qui remonte (« Gratuit ») était coupé net sous les étapes.
Une bande de fondu de 36 px est ajoutée AU-DESSUS du rail (marge négative + remplissage) : la première carte
arrive toujours entière au même endroit, et ce qui remonte s'efface avant le bord. */
.hero .marquee.rail--a {
margin-top: -36px;
padding-top: 36px;
height: 466px;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 86%, transparent);
mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 86%, transparent);
}
}
#all-access, #tarifs { scroll-margin-top: 96px; }
/* Boucle 9,5 (24/09, 5 h 50) : le fond photo flouté du film (film-fond.webp,
ciel bleu et feuillage vert) est retiré. Les trois vrais exports défilent
sur la surface douce du kit, sans image : blanc pur autour, rien d'inventé. */
.film__stage { background: var(--soft); }
.film__sheet { outline-color: rgba(17, 24, 39, .09); }
.amb--cv .amb__btn { border-radius: 10px; }