/* ==========================================================
preinscriptions.html — lot Préinscriptions (2026-09-07)
Feuille propre à la page. Tokens de base.css / catalog.css seulement :
aucune couleur nouvelle, aucune police nouvelle (Newsreader / Public
Sans via catalog-typography.css et catalog-redesign.css). Les icônes
sont nues, colorées par leur sens (règle « Icônes » de DESIGN_SYSTEM).
========================================================== */

.pre-section{
padding:var(--space-xl, 56px) 0;
}

.pre-section + .pre-section{
border-top:1px solid var(--border-color);
}

.pre-section h2{
font-size:var(--fs-h2);
margin:0 0 12px;
max-width:720px;
}

.pre-section > .container > p.pre-lead{
color:var(--text-light);
max-width:720px;
margin:0 0 24px;
line-height:1.6;
}

/* Les trois phrases de l'en-tête : ce que l'accompagnement promet, et
ce qu'il ne promet pas. */
.pre-promesses{
list-style:none;
padding:0;
margin:20px 0 0;
display:grid;
gap:12px;
max-width:720px;
}

.pre-promesses li{
display:grid;
grid-template-columns:22px 1fr;
gap:12px;
align-items:start;
color:var(--text-light);
line-height:1.55;
}

.pre-promesses li > i,
.pre-promesses li > svg{
width:20px;
height:20px;
margin-top:2px;
color:var(--text-muted);
flex-shrink:0;
}

/* ---------- Les faits (France, et dans chaque carte) ---------- */
.pre-faits{
list-style:none;
padding:0;
margin:16px 0 0;
display:grid;
gap:14px;
}

.pre-fait{
display:grid;
grid-template-columns:20px 1fr;
gap:12px;
align-items:start;
}

.pre-fait > i,
.pre-fait > svg{
width:18px;
height:18px;
margin-top:3px;
color:var(--success);
flex-shrink:0;
}

.pre-fait p{
margin:0 0 4px;
line-height:1.55;
}

.pre-fait-source{
font-size:var(--fs-caption);
color:var(--text-muted);
text-decoration:underline;
text-underline-offset:3px;
}

.pre-fait-source:hover,
.pre-fait-source:focus-visible{
color:var(--amber-700);
}

/* ---------- La procédure de portail (lot E2) ---------- */
.pre-procedure{
margin:14px 0 0;
border:1px solid var(--border-color);
border-radius:12px;
background:rgba(255,255,255,.04);
}

.pre-procedure > summary{
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
cursor:pointer;
font-weight:600;
list-style:none;
}

.pre-procedure > summary::-webkit-details-marker{display:none;}

.pre-procedure > summary i,
.pre-procedure > summary svg{width:18px;height:18px;flex-shrink:0;color:var(--text-muted);}

.pre-procedure .pre-lead{margin:0 14px 10px;font-size:var(--fs-small);}

.pre-procedure-liste{
list-style:none;
margin:0;
padding:0 14px 14px;
display:flex;
flex-direction:column;
gap:14px;
}

.pre-procedure-etape{
display:grid;
grid-template-columns:20px 1fr;
gap:12px;
align-items:start;
font-size:var(--fs-small);
line-height:1.55;
}

.pre-procedure-etape > i,
.pre-procedure-etape > svg{width:18px;height:18px;margin-top:3px;color:var(--text-muted);}

.pre-procedure-etape p{margin:0 0 4px;}

.pre-procedure-fiabilite{
display:inline-block;
margin-left:6px;
padding:1px 8px;
border-radius:999px;
border:1px solid var(--border-color);
font-size:var(--fs-caption);
font-weight:500;
color:var(--text-muted);
vertical-align:middle;
}

.pre-procedure-fiabilite.is-a_confirmer{border-color:rgba(233,163,25,.5);color:var(--amber-500, #E9A319);}

.pre-procedure-date{font-size:var(--fs-caption);color:var(--text-muted);}

/* ---------- Les pays ---------- */
.pre-pays-liste{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:20px;
margin-top:8px;
}

.pre-pays{
border:1px solid var(--border-color);
border-radius:var(--radius-md, 16px);
background:var(--background-soft);
padding:24px;
display:flex;
flex-direction:column;
gap:12px;
min-width:0;
}

/* La France en plein : toute la largeur, fond de carte, pas de couleur
nouvelle — la hiérarchie vient de la place et de la bordure. */
.pre-pays--principal{
grid-column:1 / -1;
background:var(--card-background, var(--background-color));
border-color:var(--amber-700);
}

.pre-pays-head{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.pre-pays-head img{
width:28px;
height:21px;
border-radius:3px;
object-fit:cover;
flex-shrink:0;
}

.pre-pays-head h3{
margin:0;
font-size:var(--fs-h3);
}

.pre-pays-prochain{
font-size:var(--fs-caption);
font-weight:600;
color:var(--text-muted);
border:1px dashed var(--border-color);
border-radius:var(--radius-full);
padding:3px 10px;
white-space:nowrap;
}

.pre-pays-position{
margin:0;
line-height:1.55;
}

.pre-pays-effectifs{
margin:0;
color:var(--text-light);
font-size:var(--fs-small);
}

.pre-pays-effectifs strong{
color:var(--text-color);
}

.pre-pays-procedure,
.pre-pays-langues,
.pre-pays-residences,
.pre-pays-avertissement{
margin:0;
display:grid;
grid-template-columns:18px 1fr;
gap:10px;
align-items:start;
font-size:var(--fs-small);
color:var(--text-light);
line-height:1.5;
}

.pre-pays-procedure > i,
.pre-pays-procedure > svg,
.pre-pays-langues > i,
.pre-pays-langues > svg,
.pre-pays-residences > i,
.pre-pays-residences > svg,
.pre-pays-avertissement > i,
.pre-pays-avertissement > svg{
width:16px;
height:16px;
margin-top:3px;
color:var(--text-muted);
flex-shrink:0;
}

/* L'avertissement est une information à lire, pas une alerte rouge :
ambre du site, même ton que le sur-titre. */
.pre-pays-avertissement > i,
.pre-pays-avertissement > svg{
color:var(--amber-700);
}

.pre-pays-avertissement{
color:var(--text-color);
}

.pre-pays-lien{
margin-top:auto;
align-self:flex-start;
display:inline-flex;
align-items:center;
gap:8px;
font-weight:600;
color:var(--amber-700);
text-decoration:none;
padding:6px 0;
}

.pre-pays-lien > i,
.pre-pays-lien > svg{
width:16px;
height:16px;
}

.pre-pays-lien:hover{
text-decoration:underline;
text-underline-offset:4px;
}

.pre-pays-lien:focus-visible,
.pre-fait-source:focus-visible,
.pre-pays-procedure a:focus-visible{
outline:2px solid var(--amber-700);
outline-offset:4px;
border-radius:4px;
}

/* ---------- Les quatre étapes ---------- */
.pre-etapes{
list-style:none;
padding:0;
margin:8px 0 0;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:20px;
counter-reset:etape;
}

.pre-etapes li{
counter-increment:etape;
display:grid;
grid-template-columns:24px 1fr;
gap:14px;
align-items:start;
}

.pre-etapes li > i,
.pre-etapes li > svg{
width:22px;
height:22px;
margin-top:2px;
color:var(--text-decorative, var(--text-muted));
}

.pre-etapes h3{
margin:0 0 6px;
font-size:var(--fs-body-lg, 1.05rem);
}

.pre-etapes h3::before{
content:counter(etape) ". ";
color:var(--text-muted);
}

.pre-etapes p{
margin:0;
color:var(--text-light);
line-height:1.55;
font-size:var(--fs-small);
}

/* ---------- L'entrée ---------- */
.pre-entree{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
}

@media(max-width:640px){
.pre-section{ padding:40px 0; }
.pre-pays{ padding:18px; }
.pre-pays-liste{ grid-template-columns:1fr; }
.pre-entree .btn{ width:100%; justify-content:center; }
}

/* Lot S2-PAYS : les pays de residence documentes, sur la carte et
   hors du bloc repliable. Le chiffre est ce que le site a de plus
   difficile a copier — il se lit sans un clic. */
.pre-pays-residences strong{
color:var(--text-color);
}

/* ==================================================================
LOT PRÉINSCRIPTIONS-VITRINE (2026-09-09) — le hub et la page destination.

La grille de destinations remplace les cartes-pays. Deux états, et un
seul écart visuel entre eux : la destination OUVERTE a quelque chose à
montrer et un bouton ; celle À VENIR a son nom et une phrase. Pas de
gris « désactivé », pas de cadenas — ce qu'on ne vend pas encore
s'annonce sobrement, il ne se met pas en berne.

LES RÈGLES .pre-pays* ET .pre-procedure* CI-DESSUS SONT MORTES depuis ce
lot : plus aucune page ne porte ces classes (le hub est une grille de
destinations, et le dépliant des onze étapes est retiré du public).
Elles sont laissées en place à dessein — leurs sélecteurs sont groupés
avec des règles encore vivantes (.pre-fait-source, notamment), et les
découper au couteau a déjà produit ici une feuille au sélecteur
pendant. Elles se retireront proprement le jour où quelqu'un reprendra
ce fichier en entier.

Aucune couleur ni police nouvelle : tokens de base.css et catalog-*.
================================================================== */
.pre-dest-liste{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:20px;
margin-top:8px;
}

.pre-dest{
border:1px solid var(--border-color);
border-radius:var(--radius-md, 16px);
background:var(--background-soft);
padding:24px;
display:flex;
flex-direction:column;
gap:12px;
min-width:0;
}

/* La destination ouverte prend toute la largeur : elle est le sujet de
la page, les autres en sont la suite annoncée. */
/* Une SURFACE, pas le fond nu : --card-background ne résout à rien dans
la portée sombre de #pageMain (transparent, mesuré), et le bouton encre
(.btn-primary = --ink-surface) disparaissait sur l'encre du fond. Sur
--background-soft, il se lit comme sur les cartes d'offres. */
.pre-dest--ouverte{
grid-column:1 / -1;
background:var(--background-soft);
border-color:var(--amber-700);
}

.pre-dest--a-venir{ gap:10px; }

.pre-dest-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pre-dest-head img{ width:28px; height:21px; border-radius:3px; object-fit:cover; flex-shrink:0; }
.pre-dest-head h3{ margin:0; font-size:var(--fs-h3); }

.pre-dest-ouverte{
font-size:var(--fs-caption);
font-weight:700;
color:var(--amber-700);
border:1px solid var(--amber-700);
border-radius:var(--radius-full);
padding:3px 10px;
white-space:nowrap;
}

.pre-dest-prochain{
margin:0;
font-size:var(--fs-caption);
font-weight:600;
color:var(--text-muted);
}

.pre-dest-position{ margin:0; line-height:1.55; }
.pre-dest-effectifs{ margin:0; color:var(--text-light); font-size:var(--fs-small); }
.pre-dest-effectifs strong{ color:var(--text-color); }

.pre-dest-residences,
.pre-dest-langues{
margin:0;
display:flex;
align-items:flex-start;
gap:8px;
font-size:var(--fs-small);
color:var(--text-light);
line-height:1.5;
}
.pre-dest-residences i, .pre-dest-residences svg,
.pre-dest-langues i, .pre-dest-langues svg{ width:16px; height:16px; flex:none; margin-top:2px; }

.pre-dest-cta{ align-self:flex-start; margin-top:4px; }

/* ---------- La page d'une destination ---------- */
.dest-langues{
display:inline-flex;
align-items:center;
gap:8px;
margin:14px 0 0;
font-size:var(--fs-small);
}
.dest-langues i, .dest-langues svg{ width:16px; height:16px; flex:none; }

.uni-hero-badge img{ width:22px; height:16px; border-radius:2px; object-fit:cover; }

.dest-residences-phrase{ margin:0; line-height:1.6; font-weight:600; }

/* Les pays de résidence sont NOMMÉS, un par un. Aucun détail : savoir
que le Cameroun est vérifié est une preuve de sérieux, savoir ce qu'on y
paie et quand est ce que le Diagnostic vend. */
.dest-residences{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-wrap:wrap;
gap:8px;
}
/*  EXPLICITE : la portée sombre de #pageMain redéfinit les tokens
mais ne pose pas de couleur — un élément sans la sienne hérite l'encre de
body (#1A1714 sur #211D18, mesuré : invisible). Même correctif que
.pre-pays-residences strong au lot S2-PAYS. */
.dest-residences li{
border:1px solid var(--border-color);
border-radius:var(--radius-full);
padding:4px 12px;
font-size:var(--fs-small);
font-weight:600;
color:var(--text-color);
}

.dest-procedure-titre{ margin:0; }
.dest-procedure-client{
margin:0;
padding:16px 18px;
border:1px solid var(--amber-700);
border-radius:var(--radius-md, 16px);
background:var(--background-soft);
line-height:1.6;
}

/* Les trois offres sont LA carte de formule du site (css/formule.css,
lot VITRINE-COMMERCIALE, 2026-09-11) : .pre-offre ne porte plus que
la grille — les anciennes règles de surface (translucides sur cette
page sombre, avec des boutons fantômes) sont parties. Trois colonnes
à égalité ; une seule sous 1024 px. */
.pre-offres{
list-style:none;
padding:0;
margin:24px 0 0;
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
align-items:stretch;
gap:22px;
}

@media(max-width:1023px){
.pre-offres{ grid-template-columns:minmax(0, 1fr); max-width:460px; }
}

.dest-deduction{ margin-top:18px; }

@media(max-width:640px){
.pre-dest{ padding:18px; }
.pre-dest-liste{ grid-template-columns:1fr; }
.pre-dest-cta{ align-self:stretch; justify-content:center; }
}

/* Le filet local sur .btn-primary (« le bouton encre sur le fond encre »)
est parti avec le lot VITRINE-COMMERCIALE (2026-09-11) : l'action
principale de ce bloc est désormais ambre (.btn-accent), définie dans
css/base.css, et aucune feuille de page ne redéfinit un bouton. */