/* ==========================================================
FITZUNIVERSE — CHOIX DE L'ACCOMPAGNEMENT (offers.html)
Repose sur les variables et le reset définis dans css/base.css
(même palette, même typographie, même système que index.html,
eligibility-test.html, eligibility-questions.html et results.html)
========================================================== */

/* ==========================================================
TYPOGRAPHIE — alignement sur la pile du reste du site (2026-08-22)
==========================================================
offers.html chargeait encore Inter/Sora. Ce n'était pas un choix propre
à la page mais un reste : index.html, universities.html,
scholarships.html et les 2 pages d'éligibilité sont passées à Plus
Jakarta Sans / Space Grotesk lors de leurs audits, chacune via son
propre fichier de typographie (css/homepage-typography.css,
css/catalog-typography.css, css/eligibility-typography.css).

Redéfini ici plutôt que dans un 4e fichier quasi identique : offers.css
EST la feuille propre à cette page, et elle ne consomme les polices que
par tokens (aucun font-family en dur), donc cinq lignes suffisent là où
un fichier séparé n'aurait ajouté qu'un aller-retour réseau.

Fraunces n'est pas chargée : elle sert au registre "récit" de la page
d'accueil, pas à une grille tarifaire.
========================================================== */

:root{

--font-affirmation:'Space Grotesk', sans-serif;

--font-product:'Plus Jakarta Sans', sans-serif;

--font-body:'Plus Jakarta Sans', sans-serif;

--font-display:var(--font-product);

}

body{

font-family:var(--font-body);

}

/* Le h1 porte la voix de la page, comme le h1 de l'écran d'intro du
diagnostic (css/eligibility-typography.css) : Space Grotesk. */
.offer-header h1{

font-family:var(--font-affirmation);

letter-spacing:-.02em;

}


body{

/* Les deux halos décoratifs .container::before/::after sont posés à
left:-8% / right:-10%, donc volontairement hors de la colonne pour
diffuser aux bords de la page. Comme tout élément absolu à retrait
négatif, ils AGRANDISSENT la zone de défilement : mesuré à 1240px de
large, scrollWidth montait à 1316 et une barre horizontale apparaissait
sur une page qui n'a rien à faire défiler latéralement.

Même correction que sur eligibility-*.css : on ne coupe que la part
déjà hors écran, les halos visibles sont intacts. */
overflow-x:hidden;

padding:60px 20px 120px;

}

.container{

position:relative;

width:100%;

max-width:1160px;

margin:0 auto;

}

/* ==========================================================
PROFONDEUR — HALOS DE FOND (hero)
========================================================== */

/* Halos statiques (plus d'animation en boucle) : ces deux blobs
tournaient indéfiniment (translate+scale, 24-28s) même hors écran et
même une fois le défilement commencé — exactement le genre de coût de
compositing continu (filter:blur(70px) sur 420/380px, jamais mis en
pause) qui rendait le scroll de cette page saccadé. Cohérent avec la
règle déjà en place plus bas sur cette page (voir .plan-card-premium) :
« aucune nouvelle animation en boucle en dehors du halo Fitz ». */
.container::before,
.container::after{

content:"";

position:absolute;

z-index:-1;

border-radius:50%;

pointer-events:none;

}

/* Lot DEUX-MOTEURS (2026-09-11) : plus AUCUN filter:blur() sur les halos.
Un dégradé radial qui va jusqu'à transparent est déjà doux ; le flou
n'adoucissait que le dernier bord, au prix d'un calque composé que
WebKit (tous les navigateurs de l'iPhone) a mal peint et mal empilé :
carré noir de ~180 px au coin haut-gauche d'offers.html, deux messages
superposés sur l'accueil (captures de Charles, 2026-09-10). La douceur
est reproduite par des arrêts intermédiaires et un arrêt transparent
repoussé. Gardien : test/flou.test.mjs (rien au-dessus de 8 px). */

.container::before{

top:-140px;

left:-8%;

width:420px;

height:420px;

background:radial-gradient(circle,rgba(233,163,25,.20) 0%,rgba(233,163,25,.13) 28%,rgba(233,163,25,.06) 50%,rgba(233,163,25,.02) 64%,transparent 78%);

}

.container::after{

top:-90px;

right:-10%;

width:380px;

height:380px;

background:radial-gradient(circle,rgba(126,113,216,.20) 0%,rgba(126,113,216,.13) 28%,rgba(126,113,216,.06) 50%,rgba(126,113,216,.02) 64%,transparent 78%);

}

/* ==========================================================
RÉVÉLATION AU DÉFILEMENT
========================================================== */

.reveal{

opacity:1;

transform:none;

}

html.js-ready .reveal{

opacity:0;

transform:translateY(26px);

transition:opacity .8s var(--ease-premium), transform .8s var(--ease-premium);

}

html.js-ready .reveal.is-visible{

opacity:1;

transform:translateY(0);

}

html.js-ready .free-step.reveal{ transition-delay:.05s; }
/* .pricing-grid ne porte plus .reveal lui-même (2026-08-15) : chaque
.plan-card la porte désormais individuellement pour un stagger par
carte plutôt qu'un fondu de bloc unique — voir css/animations.css
(.pricing-grid .reveal:nth-child). */

@media (prefers-reduced-motion: reduce){

.reveal{

opacity:1 !important;

transform:none !important;

transition:none !important;

}

}

/* ==========================================================
EN-TÊTE
========================================================== */

/* .back-link centralisé dans css/base.css (2026-08-28) — vivait ici en
double, à l'identique, avec la copie de payment.css (même sort que
.ai-badge avant lui, voir la note en tête de sa règle dans
payment.css). Rien à redéfinir ici : le style de base convient tel
quel à un lien posé en haut de .container comme celui-ci. */

/* Bandeau contextuel (offers-context.js) — même gabarit que .free-step
plus bas (icône ronde + texte en ligne) mais teinté de l'identité
"aurore" propre à Fitz (--gradient-fitz/--glow-fitz, voir css/base.css)
plutôt que du vert générique de .free-step-icon : ce bandeau reprend
un diagnostic que Fitz vient de produire, pas un simple repère "étape
gratuite déjà faite". */
/* Ambre et non violet/cyan (2026-08-27) : identité "aurore" de Fitz,
comme --gradient-fitz (css/base.css), qui est passé du violet à
l'ambre ce même jour — voir la note à cet endroit. */
.context-banner{

display:flex;

align-items:center;

gap:16px;

background:rgba(233,163,25,.08);

border:1px solid rgba(233,163,25,.25);

border-radius:var(--radius-lg);

padding:18px 24px;

margin-bottom:28px;

}

/* Sans cette règle, l'attribut hidden posé dans le HTML n'a AUCUN effet :
[hidden]{display:none} est une feuille de style navigateur, que le
display:flex ci-dessus — style auteur — bat systématiquement. Le bandeau
s'affichait donc VIDE en haut de page pour tout visiteur arrivé sans
?program dans l'URL, c'est-à-dire le parcours normal. Même bug, même
correction que .results-loading dans results.css. */
.context-banner[hidden]{

display:none;

}


/* Icône nue — le disque de 40px en dégradé Fitz a disparu le 2026-08-22
(règle « Icônes » de DESIGN_SYSTEM.md : aucun conteneur, la couleur
porte le sens). */
.context-banner-icon{

flex-shrink:0;

width:22px;

height:22px;

color:var(--accent-600);

}

.context-banner-icon i,
.context-banner-icon svg{

width:19px;

height:19px;

}

.context-banner p{

margin:0;

color:var(--text-color);

font-size:.96rem;

font-weight:500;

line-height:1.5;

}

.context-banner strong{

color:var(--fitz-color);

}

@media(max-width:600px){

.context-banner{

flex-direction:column;

align-items:flex-start;

text-align:left;

padding:18px 20px;

}

}

.offer-header{

position:relative;

isolation:isolate;

overflow:hidden;

text-align:center;

margin-bottom:48px;

padding:72px 32px;

border-radius:var(--radius-lg);

background:

/* Le bleu de marque du voile central (rgba(51,65,140,.74)) a laissé
place à un marine presque noir réchauffé d'une lueur ambrée, le
2026-08-22. Même recette que le héros d'index.html et que le fond des
pages d'éligibilité : l'ambre est devenu le signal de chaleur de
FitzUniverse — on le retrouve sur le kicker de la page d'accueil, les
libellés d'étapes, la frise des universités, les surfaces Fitz et l'état
pressé des boutons. Le voile reste sombre et opaque : la lueur passe
au-dessus mais à 20%, assez pour réchauffer la photo de remise de
diplômes, trop peu pour entamer le contraste du texte blanc (mesuré
plus bas). */
radial-gradient(ellipse 66% 78% at 82% 14%,rgba(233,163,25,.30) 0%,rgba(233,163,25,.10) 45%,transparent 68%),
linear-gradient(155deg,rgba(10,13,28,.88) 0%,rgba(19,24,50,.76) 52%,rgba(8,11,24,.91) 100%),

/* graduation-1600w depuis le 2026-08-29 (remplace hero-bg5 : ses
visages en gros plan étaient tranchés par le recadrage du bandeau —
retour utilisateur avec capture). La mer de toques est une texture :
elle se recadre sans jamais rien couper d'important. Variante 1600w,
jamais le fichier d'origine (1,4 Mo). */
url("assets/images/graduation-1600w.jpg");

background-size:cover;

background-position:center 45%;

box-shadow:var(--shadow-lg);

}

.offer-header::after{

content:"";

position:absolute;

inset:0;

z-index:-1;

background:radial-gradient(circle at 12% 15%,rgba(126,113,216,.22),transparent 50%);

}

/* Badge Fitz : apparence définie une seule fois dans css/base.css
(section "BADGE FITZ — signature unique"). Ne reste ici que
l'espacement propre à cette page.
Cette page portait la variante la plus éloignée des autres — blanc
translucide + text-shadow — parce que le badge se pose ici sur une
photo sombre et qu'un fond clair translucide y aurait disparu. La
pilule blanche opaque de base.css règle le problème à la source :
elle tient sur la photo comme sur un fond clair, donc plus besoin
de variante locale. Ne pas réintroduire de fond translucide ici. */
.ai-badge{

margin:0 auto 22px;

}

.offer-header h1{

font-size:clamp(2rem,4.4vw,2.9rem);

line-height:1.15;

font-weight:800;

color:#fff;

margin-bottom:18px;

text-shadow:0 1px 3px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);

}

.offer-header .lead{

max-width:640px;

margin:0 auto;

color:rgba(255,255,255,.85);

font-size:1.05rem;

line-height:1.8;

text-shadow:0 1px 3px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.2);

}

@keyframes fitzHalo{

100%{ transform:rotate(360deg); }

}/* ==========================================================
ÉTAPE GRATUITE DÉJÀ RÉALISÉE
========================================================== */

.free-step{

display:flex;

align-items:center;

gap:18px;

background:linear-gradient(135deg,rgba(233,163,25,.06),rgba(126,113,216,.05));

border:1px solid var(--border-color);

border-radius:var(--radius-lg);

padding:22px 26px;

margin-bottom:64px;

box-shadow:var(--shadow-xs);

}

/* Icône nue, verte : elle signale un état déjà acquis (« toujours
gratuit »), pas un décor. --success-700 et non --success brut : c'est
une icône porteuse de sens sur fond clair, le vert vif ne tient pas le
contraste (voir l'échelle d'état dans css/base.css). */
.free-step-icon{

flex-shrink:0;

width:20px;

height:20px;

color:var(--success-700);

}

.free-step-icon i,
.free-step-icon svg{

width:18px;

height:18px;

}

.free-step-link{

flex-shrink:0;

display:inline-flex;

align-items:center;

gap:6px;

color:var(--primary-color);

font-weight:700;

font-size:.9rem;

white-space:nowrap;

}

.free-step-link i,
.free-step-link svg{

width:15px;

height:15px;

}

/* ==========================================================
GRILLE TARIFAIRE
========================================================== */

.pricing-grid-wrap{

position:relative;

margin-bottom:56px;

}

.pricing-glow{

position:absolute;

inset:-60px -10px;

z-index:0;

pointer-events:none;

/* Sans filter:blur (lot DEUX-MOTEURS) : voir la note des halos plus haut. */
background:
radial-gradient(ellipse at 60% 20%,rgba(233,163,25,.16) 0%,rgba(233,163,25,.10) 22%,rgba(233,163,25,.04) 42%,rgba(233,163,25,.01) 56%,transparent 68%),
radial-gradient(ellipse at 25% 75%,rgba(126,113,216,.16) 0%,rgba(126,113,216,.10) 22%,rgba(126,113,216,.04) 42%,rgba(126,113,216,.01) 56%,transparent 68%);

}


.section-heading-plans{

text-align:center;

max-width:560px;

margin:0 auto 40px;

}

.section-heading-plans h2{

font-size:clamp(1.4rem,2.4vw,1.8rem);

color:var(--primary-dark);

margin-bottom:10px;

}

.section-heading-plans p{

color:var(--text-light);

font-size:.98rem;

}

/* ==========================================================
FAQ (accordéon natif)
========================================================== */

.faq h2{

text-align:center;

font-size:1.5rem;

font-weight:800;

color:var(--text-color);

margin-bottom:28px;

}

.faq-item{

background:var(--background);

border:1px solid var(--border-color);

border-radius:var(--radius-md);

padding:0 26px;

margin-bottom:14px;

transition:var(--transition);

}

.faq-item[open]{

border-color:rgba(26,23,20,.18);

box-shadow:var(--shadow-xs);

}

.faq-item summary{

display:flex;

align-items:center;

justify-content:space-between;

gap:16px;

padding:20px 0;

cursor:pointer;

font-weight:700;

font-size:.98rem;

color:var(--text-color);

list-style:none;

}

.faq-item summary::-webkit-details-marker{

display:none;

}

.faq-item summary i,
.faq-item summary svg{

flex-shrink:0;

width:18px;

height:18px;

color:var(--text-muted);

transition:transform .3s var(--ease-premium);

}

.faq-item[open] summary i,
.faq-item[open] summary svg{

transform:rotate(180deg);

color:var(--primary-color);

}

.faq-item p{

padding-bottom:22px;

color:var(--text-light);

font-size:.9rem;

line-height:1.75;

}

/* ==========================================================
DESKTOP (≥1024px) — RÉDUCTION DE LA HAUTEUR
Les paliers doivent être visibles plus rapidement, sans toucher
aux marges déjà calibrées pour tablette et mobile ci-dessous.
========================================================== */

@media(min-width:1024px){

body{

padding:44px 20px 90px;

}

.offer-header{

margin-bottom:32px;

}

.free-step{

margin-bottom:40px;

}

.pricing-grid-wrap{

margin-bottom:40px;

}

}


/* ==========================================================
RESPONSIVE — MOBILE (< 768px)
========================================================== */

@media(max-width:767px){

body{

padding:36px 16px 90px;

}

.free-step{

flex-direction:column;

align-items:flex-start;

text-align:left;

}

.free-step-link{

align-self:flex-start;

}

.pricing-glow{

opacity:.7;

}

.faq-item{

padding:0 20px;

}

}

@media(max-width:380px){

.container{

max-width:100%;

}

}

/* ==========================================================
BLOCS INTRODUITS PAR LA RESTRUCTURATION DU 2026-08-22
==========================================================
La page enchaînait avant : bandeau contextuel, en-tête, vitrine Fitz à
message rotatif, rappel du gratuit sur 3 niveaux, question filtrante
"seul ou accompagné" avec 2 boutons d'ancre, puis 3 intertitres à
paragraphe, puis les 5 offres, puis mentions, puis réassurance, puis
FAQ. Soit sept blocs de mise en condition avant le premier prix.

Retirés : la vitrine Fitz (décorative, elle repoussait les prix sans
rien dire du produit) et la question filtrante (un clic de plus pour
atteindre des offres déjà toutes visibles plus bas). Fusionnés :
mentions et réassurance, qui disaient la même chose sur deux mises en
page. Allégés : les intertitres, passés d'un paragraphe à un libellé
court. Aucune offre, aucun tarif et aucune mention légale n'a été
supprimé — uniquement de l'emballage.
========================================================== */

/* Libellé d'intertitre, même langage que le kicker de la page d'accueil
(css/homepage-typography.css) : ambre, majuscules espacées. --amber-700
et non --amber-500 — c'est du texte sur fond clair. */
.plans-kicker{

display:block;

margin-bottom:10px;

font-family:var(--font-display);

font-size:.74rem;

font-weight:700;

letter-spacing:.16em;

text-transform:uppercase;

color:var(--amber-700);

}

/* Rappel du gratuit — une seule ligne désormais (voir le commentaire
dans offers.html). */
.free-step p{

flex:1;

min-width:0;

margin:0;

font-size:.95rem;

line-height:1.6;

color:var(--text-light);

}

.free-step p strong{

color:var(--text-color);

}

/* Pied de page fusionné (mentions + réassurance). Icônes nues alignées
sur la première ligne de leur texte. */
.offer-footnotes{

max-width:760px;

margin:56px auto 0;

padding-top:28px;

border-top:1px solid var(--border-color);

display:flex;

flex-direction:column;

gap:14px;

}

.footnote-line{

display:flex;

align-items:flex-start;

gap:12px;

margin:0;

font-size:.88rem;

line-height:1.6;

color:var(--text-muted);

text-decoration:none;

}

.footnote-line > i,
.footnote-line > svg{

flex-shrink:0;

width:17px;

height:17px;

margin-top:2px;

color:var(--text-decorative);

}

/* La mention "aucune garantie d'admission" est la seule du lot qui
engage juridiquement : elle se lit en texte courant, pas en gris pâle
de bas de page. */
.footnote-line--strong{

color:var(--text-color);

font-weight:500;

}

.footnote-line--strong > i,
.footnote-line--strong > svg{

color:var(--success-700);

}

/* Le lien WhatsApp de cette liste porte l'attribut hidden et n'est
révélé qu'aux abonnés Renforcé/Signature par le script en pied de
offers.html. Sans cette règle il resterait VISIBLE POUR TOUS :
[hidden]{display:none} est une feuille de style navigateur, que le
display:flex de .footnote-line — style auteur — bat systématiquement.
Ce n'est pas cosmétique, c'est une fuite de contenu réservé. Même piège
que .results-loading (results.css) et .context-banner plus haut. */
.footnote-line[hidden]{

display:none;

}

a.footnote-line:hover{

color:var(--primary-color);

}

a.footnote-line:hover > i,
a.footnote-line:hover > svg{

color:var(--primary-color);

}

/* ==========================================================
EN-TÊTE DES FORMULES SUR TÉLÉPHONE (2026-09-01, passe mobile lot 5)
==========================================================
La carte d'introduction gardait ses 72px de rembourrage de bureau et
un titre à plancher 2rem : sur 375px, six lignes de titre dans une
colonne étroite, la carte occupait plus d'un écran (capture
utilisateur). Rembourrage resserré + titre aligné sur l'échelle
mobile de css/base.css (~1.7rem pour un h1 de page) : la carte tient
dans un écran, la photo de fond reste lisible. */
@media(max-width:576px){

.offer-header{

padding:44px 20px;

}

.offer-header h1{

font-size:1.7rem;

}

}