/* ==========================================================
FITZUNIVERSE — REFONTE VISUELLE DE LA GRILLE TARIFAIRE (2026-08-29)
offers.html UNIQUEMENT — chargée en dernier, après offers.css, pour
gagner la cascade sur les couleurs/polices déclarées dans css/base.css
et offers.css.

CONTEXTE — cette page suit results.html (déjà refaite, voir
css/results-redesign.css) dans le même parcours de conversion. Elle
avait déjà migré vers Plus Jakarta Sans/Space Grotesk le 2026-08-22
(voir le commentaire de tête d'offers.html) mais gardait, sous cette
police plus récente, plusieurs halos décoratifs de l'ère bleu marine/
violet jamais retintés (rgba(51,65,140,…), rgba(126,113,216,…)) —
c'est-à-dire une ancienne palette derrière une police déjà à jour.
Même valeurs que le reste du parcours.
========================================================== */

:root{

--font-affirmation:'Newsreader', serif;
--font-product:'Public Sans', sans-serif;
--font-body:'Public Sans', sans-serif;
--font-display:var(--font-product);

--amber-500:#D9805A;
--amber-600:#BE6032;
--amber-700:#8F3E22;

--primary-color:var(--amber-700);
--primary-dark:var(--ink-surface);
--primary-900:var(--ink-surface);

--background:#FDF9EF;
--background-soft:#EEE4CE;
--background-alt:#E7DAB9;
--border-color:#E2D5B8;

--gradient-hero:
radial-gradient(circle at top left,#F7F1E3 0%,transparent 45%),
radial-gradient(circle at bottom right,#EFE6D1 0%,transparent 35%),
#F3EEE3;


/* Famille --accent-* (2026-08-29) : le violet #7E71D8 de l'ancien
espace connecté fuyait encore sur cette page à travers les feuilles
historiques (icônes de réassurance, compteurs, liens) alors que tout
le reste de la palette est déjà remappé ci-dessus. Terracotta aux
mêmes rôles — et au passage le contraste s'améliore : #7E71D8 en
texte sur fond clair tombait à ~3,4:1, #BE6032 tient 4,5:1+. */
--accent-100:#F7E4D3;
--accent-500:var(--amber-600);
--accent-600:var(--amber-700);
--accent-color:var(--amber-600);
}

/* ==========================================================
TITRES — même signature Newsreader que le reste du parcours.
========================================================== */
.offer-header h1,
.section-heading-plans h2,
.faq h2{
font-family:var(--font-affirmation);
font-weight:700;
letter-spacing:-.01em;
}

/* ==========================================================
HALOS DÉCORATIFS — dernières traces de l'ère bleu marine/violet
(rgba(51,65,140,…) / rgba(126,113,216,…)) sous une police déjà migrée :
retintées en terracotta, même logique à deux tons que les halos déjà
recolorés ailleurs sur le site (.container::before/::after en tête de
page, la lueur derrière la grille de prix, le filet de la carte mise
en avant).
========================================================== */
.container::before{
background:radial-gradient(circle,rgba(217,128,90,.22) 0%,transparent 70%);
}

.container::after{
background:radial-gradient(circle,rgba(190,96,50,.20) 0%,transparent 70%);
}

.offer-header::after{
background:radial-gradient(circle at 12% 15%,rgba(217,128,90,.20),transparent 50%);
}

.free-step{
background:linear-gradient(135deg,rgba(217,128,90,.06),rgba(190,96,50,.05));
}

.pricing-glow{
background:
radial-gradient(ellipse at 60% 20%,rgba(217,128,90,.18) 0%,transparent 55%),
radial-gradient(ellipse at 25% 75%,rgba(190,96,50,.14) 0%,transparent 55%);
}

.faq-item[open]{
border-color:rgba(217,128,90,.22);
}

/* ==========================================================
BANDEAU CONTEXTUEL — ambre écrit en dur avec l'ancienne valeur brute
(rgba(233,163,25,…), pas un token) → terracotta, mêmes opacités.
========================================================== */
.context-banner{
background:rgba(217,128,90,.08);
border:1px solid rgba(217,128,90,.25);
}

/* ==========================================================
BANNIÈRE D'EN-TÊTE — même correctif que .details-hero-overlay et
.catalog-hero::after : voiles écrits en dur, marine → encre chaude,
ambre brut → terracotta. Même géométrie, mêmes opacités.
========================================================== */
.offer-header{
background:
radial-gradient(ellipse 66% 78% at 82% 14%,rgba(217,128,90,.30) 0%,rgba(217,128,90,.10) 45%,transparent 68%),
linear-gradient(155deg,rgba(28,22,16,.88) 0%,rgba(40,34,27,.76) 52%,rgba(20,17,13,.91) 100%),
url("../assets/images/graduation-1600w.jpg");
background-size:cover;
/* 45% : centre la nappe de toques, en laissant hors cadre le haut
sombre (estrade) et le bas (dossiers de chaises). */
background-position:center 45%;
}

/* Poids de la photo d'en-tête : jamais le fichier d'origine (même
défaut « photo servie en taille d'origine » que sur les pages
catalogue). AVIF (176 Ko) puis WebP servis aux navigateurs qui savent
les lire, JPEG 1600w (343 Ko) en repli via la déclaration précédente.
Les deux blocs background: doivent rester identiques hors format. */
@supports (background-image: image-set(url("a.avif") type("image/avif"))) {
.offer-header{
background:
radial-gradient(ellipse 66% 78% at 82% 14%,rgba(217,128,90,.30) 0%,rgba(217,128,90,.10) 45%,transparent 68%),
linear-gradient(155deg,rgba(28,22,16,.88) 0%,rgba(40,34,27,.76) 52%,rgba(20,17,13,.91) 100%),
image-set(
url("../assets/images/graduation-1600w.avif") type("image/avif"),
url("../assets/images/graduation-1600w.webp") type("image/webp"),
url("../assets/images/graduation-1600w.jpg") type("image/jpeg")
);
}
}


/* ==========================================================
AVATAR FITZ — même levier que results.html/scholarship-details.html :
cette page n'a jamais chargé css/ai-suite.css et n'avait donc que la
pastille texte (.ai-badge) pour signaler Fitz, sans le halo qui
respire porté par le reste du parcours. Composant dupliqué plutôt que
d'ajouter ai-suite.css (bien plus lourde qu'une grille tarifaire n'en
a besoin), même logique que css/results-redesign.css.
========================================================== */
.fitz-badge-row{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:20px;
}

.offer-header .fitz-badge-row .ai-badge{
margin:0;
}

.fitz-avatar{
position:relative;
flex-shrink:0;
width:36px;
height:36px;
border-radius:50%;
isolation:isolate;
}

.fitz-avatar::after{
content:"";
position:absolute;
inset:3px;
border-radius:50%;
background:radial-gradient(circle, var(--amber-500) 0%, var(--amber-700) 45%, transparent 72%);
filter:blur(5px);
animation:fitzPulse 2.2s ease-in-out infinite;
}

@keyframes fitzPulse{
0%,100%{ opacity:.4; transform:scale(.85); }
50%{ opacity:1; transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
.fitz-avatar::after{ animation:none; }
}




/* ==========================================================
DÉBORDEMENT HORIZONTAL SUR TÉLÉPHONE (2026-09-03)
==========================================================
Mesuré à 375px : scrollWidth 409 alors qu'aucun élément visible ne
dépasse — ce sont les deux halos .container::before/::after (420 et
380px, posés à left:-8% / right:-10%) qui agrandissent la zone de
défilement. Le body{overflow-x:hidden} d'offers.css suffit sur bureau,
mais Chrome mobile élargit quand même son viewport de mise en page
(innerWidth 409 : la page s'affichait légèrement dézoomée, prise pour
un « artefact d'émulateur » lors des audits précédents). overflow-x:
clip ne crée pas de conteneur de défilement (position:sticky intact)
et empêche cet élargissement — sur html, body ET le conteneur des
halos, qui n'a plus le droit de déborder latéralement. */
html,
body{ overflow-x:clip; }

main.container{ overflow-x:clip; }


/* ==========================================================
GRILLE A (2026-09-07) — une grille à la fois.
Remplace les deux colonnes de la grille B : le choix (deux boutons de
poids égal), puis UNE vue par parcours, avec une bascule discrète en
tête. Aucune couleur ni composant neuf.
========================================================== */
.pricing-view[hidden],
.parcours-choice[hidden]{ display:none !important; }

/* Les vues sont des <section> : base.css leur donne padding:110px 0
et overflow:hidden. Ici la page espace déjà. */
.pricing-view{
padding:0;
overflow:visible;
}

.pricing-column-head{
max-width:680px;
margin:0 0 20px;
}

.pricing-column-head h2{
margin:6px 0 10px;
}

.pricing-column-head p{
margin:0;
color:var(--text-light);
line-height:1.6;
}

/* Le choix — deux boutons de même poids, jamais un parcours d'office. */
.parcours-choice{
text-align:center;
margin:8px 0 48px;
}

.parcours-choice h2{
margin:6px auto 22px;
max-width:22ch;
}

.parcours-choice-actions{
display:grid;
grid-template-columns:1fr;
gap:14px;
max-width:760px;
margin:0 auto;
}

.parcours-choice-btn{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
padding:22px 22px 20px;
border:1px solid var(--border-color);
border-radius:18px;
background:var(--surface-color, #fff);
color:var(--text-color);
text-align:left;
text-decoration:none;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.parcours-choice-btn:hover,
.parcours-choice-btn:focus-visible{
transform:translateY(-2px);
border-color:var(--amber-500, #E9A319);
box-shadow:0 12px 30px rgba(33,29,24,.08);
outline:none;
}

.parcours-choice-btn i,
.parcours-choice-btn svg{
width:22px;
height:22px;
color:var(--amber-700);
}

.parcours-choice-title{
font-family:var(--font-heading, inherit);
font-size:1.35rem;
font-weight:700;
}

.parcours-choice-sub{
font-size:.92rem;
color:var(--text-light);
line-height:1.5;
}

/* La bascule, en tête de chaque vue. */
.parcours-switch{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:10px 18px;
margin:0 0 26px;
padding:10px 14px;
border:1px solid var(--border-color);
border-radius:999px;
font-size:.86rem;
}

.parcours-switch-current{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:700;
}

.parcours-switch-current i,
.parcours-switch-current svg,
.parcours-switch-link i,
.parcours-switch-link svg{
width:16px;
height:16px;
}

.parcours-switch-link{
display:inline-flex;
align-items:center;
gap:6px;
color:var(--amber-700);
font-weight:600;
text-decoration:none;
}

.parcours-switch-link:hover span,
.parcours-switch-link:focus-visible span{
text-decoration:underline;
}

@media(min-width:720px){
.parcours-choice-actions{ grid-template-columns:1fr 1fr; }
}
}