/* Tarifs (tarifs.html). */
/* -------------------------- tarifs.html -------------------------- */
.page-head { max-width: 760px; }
.page-head > * + * { margin-top: var(--space-2); }
.facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin-top: var(--space-4);
font-size: 15px;
color: var(--text);
}
.facts li { display: flex; align-items: center; gap: 8px; }
.facts svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--accent); }
.plan__sub { font-size: 14px; line-height: 1.4; color: var(--muted); min-height: 38px; }
/* « 19,99 € / paiement unique » ne tient pas sur une ligne dans une carte
de 270 px : on autorise le retour et on réserve la hauteur sur les 4. */
.plan__price { flex-wrap: wrap; align-content: flex-start; min-height: 58px; }
.plan__amount { white-space: nowrap; }
/* Libellés longs : le bouton reste sur une seule ligne. */
.plan__foot .btn { padding-inline: var(--space-2); font-size: 15px; }
.free-start {
display: grid;
grid-template-columns: minmax(0, 1fr) 210px;
gap: var(--space-8);
align-items: center;
padding: var(--space-6);
background: var(--soft);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.free-start p { margin-top: var(--space-2); color: var(--muted); max-width: 52ch; }
.free-start__note { margin-top: var(--space-3); font-size: 15px; }
.free-start__sheet {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--canvas);
}
.free-start__sheet img { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; object-position: top center; }
@media (max-width: 900px) {
.free-start { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.free-start__sheet { max-width: 210px; }
}
@media (max-width: 720px) {
.plan__sub { min-height: 0; }
.free-start { padding: var(--space-4); }
.free-start .btn { width: 100%; }
}
/* =====================================================================
v3.3 — reprise après critique (23/09/2026)
================================================================== */
/* ---- Offres : pastille posée sur le bord, rangées alignées d'une carte
à l'autre (nom, accroche, prix, liste, bouton). Plus de bande vide
réservée en tête des trois cartes non mises en avant. ---- */
@media (min-width: 721px) {
.plans { grid-auto-rows: auto; }
.plan {
position: relative;
display: grid;
grid-row: span 5;
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%;
}
.plan__price { min-height: 0; }
}
/* Le prix, puis l'unité en dessous, sur les quatre cartes : « paiement
unique » ne passe plus seul à la ligne sous 19,99 € (il ne tient pas à
côté dans une carte de 270 px), 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; }
.plan__list { align-content: start; }
.plan__foot .btn { white-space: nowrap; }
/* ---- FAQ : même bord gauche que sur l'accueil, seule la liste est limitée ---- */
#faq .faq { max-width: 900px; }
/* ---- Bandeau final : celui de l'accueil (fond teinté, vraie capture sur
le téléphone du kit, téléphone à gauche du texte ; au-dessus et centré
sous 1 000 px). ---- */
.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); text-align: center; }
.cta-band--visual .cta-device { order: -1; }
.cta-band--visual .h2 { margin-inline: auto; }
.cta-band--visual .actions { justify-content: center; }
.cta-band--visual p.lead { margin-inline: auto; }
}
@media (max-width: 720px) {
.cta-device .dv--phone { --dv-w: min(74vw, 290px); }
}
/* ---- Veuves : dernière ligne jamais réduite à un mot ---- */
.lead,
.hero__note,
.section-head p,
.plan__sub,
.plans__note,
.faq__answer p { text-wrap: pretty; }
/* =====================================================================
v3.3 — boucle 2 (23/09/2026, après contre-critique à 8,5)
================================================================== */
/* ---- En-tête : les prix dans le premier écran ----
Téléphone : texte seul, les offres suivent tout de suite. Tablette
(721–1 000 px) : texte et éventail côte à côte, comme sur ordinateur.
L'éventail montre trois vrais exports (une famille par offre), sur le
blanc de la page, sans cadre ni fond. */
.head-visual__fan { display: flex; justify-content: center; align-items: center; }
.fan--tarifs { width: 100%; height: 380px; }
.fan--tarifs .fan__sheet { width: 200px; }
.fan--tarifs .fan__sheet:nth-child(1) { translate: -128px 16px; }
.fan--tarifs .fan__sheet:nth-child(3) { translate: 128px 16px; }
@media (min-width: 1001px) and (max-width: 1180px) {
.fan--tarifs { height: 330px; }
.fan--tarifs .fan__sheet { width: 170px; }
.fan--tarifs .fan__sheet:nth-child(1) { translate: -104px 14px; }
.fan--tarifs .fan__sheet:nth-child(3) { translate: 104px 14px; }
}
@media (min-width: 721px) and (max-width: 1000px) {
.head-visual { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-4); }
.fan--tarifs { height: 250px; }
.fan--tarifs .fan__sheet { width: 128px; }
.fan--tarifs .fan__sheet:nth-child(1) { translate: -78px 10px; }
.fan--tarifs .fan__sheet:nth-child(3) { translate: 78px 10px; }
}
@media (min-width: 721px) and (max-width: 800px) {
.fan--tarifs .fan__sheet { width: 118px; }
.fan--tarifs .fan__sheet:nth-child(1) { translate: -70px 10px; }
.fan--tarifs .fan__sheet:nth-child(3) { translate: 70px 10px; }
}
/* Boucle 5 : sur téléphone, l'éventail revient en réduction sous les trois
garanties (le premier écran n'était que du texte) ; la carte Gratuit reste
amorcée dans le premier écran de 844 px. */
@media (max-width: 720px) {
.head-visual__fan { margin-top: var(--space-3); }
.fan--tarifs { height: 150px; max-width: 300px; margin-inline: auto; }
.fan--tarifs .fan__sheet { width: 92px; }
.fan--tarifs .fan__sheet:nth-child(1) { translate: -62px 8px; }
.fan--tarifs .fan__sheet:nth-child(3) { translate: 62px 8px; }
}
/* Boucle 5 : premier écran vivant — l'éventail s'ouvre une fois (0,6 → 1,6 s),
depuis la pile ; en mouvement réduit il est posé ouvert. */
@media (prefers-reduced-motion: no-preference) {
.fan--tarifs .fan__sheet:nth-child(odd) { animation: cv-fan-open 1s cubic-bezier(.2, .7, .2, 1) .6s both; }
}
@keyframes cv-fan-open { from { translate: 0 0; rotate: 0deg; } }
/* ---- 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; }
}
/* ---- 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)
================================================================== */
/* Lignes des offres : deux lignes équilibrées, jamais un mot seul en fin
de ligne (cartes de 270 px à 1 181–1 440 px). Les groupes qui doivent
rester ensemble sont liés par des espaces insécables dans le texte
(« au choix », « pas d'abonnement », « Classique Essentiel »…). */
.plan__list li > span { text-wrap: pretty; }
/* =====================================================================
v3.3 — boucle 3, correction (23/09/2026, après critique à 8,6)
================================================================== */
/* ---- En-tête en tablette (721–1 000 px) : le titre sur deux lignes ----
Dans la colonne de texte (337 à 483 px), le titre à 44 px se coupait en
trois lignes, « Des tarifs / simples : vous / payez une fois. », les
deux-points au milieu d'une ligne. Le titre passe au-dessus des deux
colonnes et se coupe comme à 390 et 1 440 px : « Des tarifs simples : /
vous payez une fois. » ; la phrase et les trois garanties restent à
gauche, l'éventail à droite, centré sur elles. Essai de l'empilement
(éventail sous le texte, 420 px) écarté : l'éventail flottait seul dans
le blanc et les prix descendaient de 768 à 909 px à 768 de large ; ici
ils montent à 720 px. */
@media (min-width: 721px) and (max-width: 1000px) {
.head-visual {
grid-template-areas: "eyebrow eyebrow" "title title" "lead fan" "facts fan";
row-gap: 0;
align-items: start;
}
.head-visual .page-head { display: contents; }
.page-head > .eyebrow { grid-area: eyebrow; }
.page-head > h1 { grid-area: title; max-width: 11em; text-wrap: balance; }
.page-head > .lead { grid-area: lead; }
.page-head > .facts { grid-area: facts; }
.head-visual__fan { grid-area: fan; align-self: center; }
}
/* Très petits écrans (≤ 359 px, balayage à 320) : à 32 px le titre passait
sur trois lignes, « Des tarifs / simples : vous / payez une fois. ». */
@media (max-width: 359px) {
.page-head > h1 { font-size: 29px; }
}
/* =====================================================================
v3.3 — boucle 4 (23/09/2026, après contre-critique à 8,9)
================================================================== */
/* 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; } }
.mobile-panel__cta { margin-bottom: 0; }
.mobile-panel .mobile-panel__cta + .btn--block { margin-top: 12px; }
/* Contre-vérification du 24/09 : premier écran mobile. Les offres montent
sous le chapeau (l'éventail décoratif s'efface sous 720 px),
garanties compactes. */
@media (max-width: 720px) {
.head-visual__fan { display: none; }
.page-head .lead { margin-top: 12px; }
.page-head .facts { margin-top: 14px; gap: 6px; font-size: 14px; }
.page-head .facts li { gap: 6px; }
main > .section--tight:first-child { padding-top: var(--space-4); padding-bottom: var(--space-4); }
}
#all-access { scroll-margin-top: 96px; }