/* Mise en page du site. Couleurs, polices et tailles : uniquement les variables de tokens.css (aucune couleur ici). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-fond); color: var(--c-texte);
  font-family: var(--f-texte); font-size: var(--t-corps); line-height: 1.6;
}
h1, h2, h3 {
  font-family: var(--f-titre); font-weight: var(--g-titre); letter-spacing: var(--ls-titre);
  line-height: 1.1; margin: 0 0 var(--e-4); overflow-wrap: break-word; hyphens: auto; text-wrap: balance;
}
h1 { font-size: var(--t-h1-page); line-height: 1.02; }
:root[dir="rtl"] :is(h1, h2) { line-height: 1.3; }
h2 { font-size: var(--t-h2-texte); margin-top: var(--e-6); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; hyphens: manual; }
p { margin: 0 0 var(--e-4); }
a { color: var(--c-action); text-underline-offset: 0.18em; }
a:hover { color: var(--c-action-survol); }
:focus-visible { outline: 3px solid var(--c-action); outline-offset: 2px; }

.cadre { max-width: 1200px; margin: 0 auto; padding: 0 var(--e-4); }
.texte { max-width: calc(var(--largeur-texte) + 2 * var(--e-4)); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aller-contenu { position: absolute; left: var(--e-4); top: -100px; background: var(--c-carte); padding: var(--e-2) var(--e-4); }
.aller-contenu:focus { top: var(--e-2); }

/* Bandeau de non-affiliation : en haut de chaque page, sur un souci pâle */
.bandeau {
  background: var(--c-accent-doux); color: var(--c-texte); font-size: var(--t-petit);
  text-align: center; padding: var(--e-2) var(--e-4);
}

/* En-tête : marque, puis menu horizontal ; sous 600 px, bouton « Menu » qui ouvre un panneau (scripts/menu.js).
   Sans JavaScript, la classe menu-js manque : le bouton reste caché et les liens restent affichés. */
.entete { background: var(--c-fond); border-bottom: 1px solid var(--c-trait); }
.entete-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-5); padding-block: var(--e-3); }
.marque { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible-min); color: var(--c-action); text-decoration: none; }
.marque span { font-family: var(--f-titre); font-size: var(--t-marque); font-weight: 500; letter-spacing: var(--ls-marque); color: var(--c-texte); }
.marque svg path { stroke: var(--c-fond); }
.menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-5); flex: 1 1 auto; }
.menu-bouton {
  display: none; align-items: center; gap: var(--e-2); min-height: var(--cible-min); min-width: var(--cible-min);
  padding: var(--e-2) var(--e-4); border: 1px solid var(--c-trait); border-radius: var(--rayon-pilule);
  background: var(--c-carte); color: var(--c-texte); font: inherit; font-size: var(--t-petit); font-weight: 700; cursor: pointer;
}
.menu-bouton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.menu-bouton path { transform-box: view-box; transform-origin: 10px 10px; }
.menu-bouton[aria-expanded="true"] path:first-child { transform: rotate(45deg) translateY(5px); }
.menu-bouton[aria-expanded="true"] .menu-trait-milieu { opacity: 0; }
.menu-bouton[aria-expanded="true"] path:last-child { transform: rotate(-45deg) translateY(-5px); }
.nav ul, .langues ul, .pied ul { list-style: none; margin: 0; padding: 0; }
.nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
.nav a, .langues a, .pied a { display: inline-flex; align-items: center; min-height: var(--cible-min); }
.nav a { color: var(--c-texte); text-decoration: none; font-weight: 600; font-size: var(--t-petit); }
.nav a:hover, .nav a[aria-current] { color: var(--c-action); text-decoration: underline; }
.langues ul { display: flex; flex-wrap: wrap; gap: 0 var(--e-3); font-size: var(--t-petit); }
.langues a { color: var(--c-texte-doux); }
.langues a[aria-current] { color: var(--c-texte); font-weight: 700; text-decoration: none; }
@media (max-width: 599px) {
  .menu { flex-basis: 100%; }
  .nav ul { gap: 0 var(--e-4); }
  .menu-js .menu-bouton { display: inline-flex; }
  .menu-js .menu { display: none; }
  .menu-js .menu.menu--ouvert { display: grid; gap: var(--e-3); padding-block: var(--e-3) var(--e-2); border-top: 1px solid var(--c-trait); }
  .menu-js .menu--ouvert .nav ul { display: grid; gap: 0; }
  .menu-js .menu--ouvert .nav a { font-size: var(--t-corps); width: 100%; }
}

/* Hero : sur-titre, titre court, promesse, deux choix ; panneau illustratif à côté sur grand écran */
.hero { padding-block: var(--e-7) var(--e-section); }
.hero-grille { display: grid; gap: var(--e-7); align-items: center; }
.hero-grille > * { min-width: 0; } /* sans cela, les cartes des parcours élargissent la colonne au-delà de l'écran mobile */
.hero h1 { font-size: var(--t-h1); margin-bottom: var(--e-5); }
.hero-court h1, .hero-page h1 { font-size: var(--t-h1-page); }
.hero-texte { max-width: 760px; }
.hero-court { padding-bottom: var(--e-7); }
.cadre.hero-texte { max-width: 1200px; }
.cadre.hero-texte > * { max-width: 760px; }
/* Sur-titre (eyebrow) : une seule règle pour le sur-titre, l'intitulé des offres et les titres du pied */
.surtitre, .offre h3, .pied-titre {
  font-family: var(--f-texte); font-weight: 700; font-size: var(--t-surtitre);
  text-transform: uppercase; letter-spacing: var(--ls-surtitre);
}
.surtitre { color: var(--c-action); margin-bottom: var(--e-4); }
.chapo { font-size: var(--t-chapo); color: var(--c-texte-doux); max-width: 36em; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-block: var(--e-6) var(--e-4); }
.note { font-size: var(--t-petit); color: var(--c-texte-doux); }
@media (min-width: 960px) {
  .hero { padding-top: var(--e-section); }
  .hero-grille { grid-template-columns: 1.15fr 1fr; gap: var(--e-8); }
}

/* Boutons : pilules de 48 px au moins ; le bouton plein porte une flèche qui glisse au survol */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--cible-min);
  padding: var(--e-3) var(--e-6); border-radius: var(--rayon-pilule); border: 2px solid var(--c-texte-doux);
  background: var(--c-carte); color: var(--c-texte); font: inherit; font-weight: 700; text-decoration: none;
}
.bouton:hover { border-color: var(--c-action); color: var(--c-action); }
.bouton-plein { background: var(--c-action); border-color: var(--c-action); color: var(--c-fond); }
.bouton-plein:hover { background: var(--c-action-survol); border-color: var(--c-action-survol); color: var(--c-fond); }
.bouton-plein::after { content: "→"; content: "→" / ""; display: inline-block; }
:root[dir="rtl"] .bouton-plein::after { content: "←"; content: "←" / ""; }
.bouton:disabled, .bouton:disabled:hover {
  background: var(--c-carte-2); color: var(--c-texte-doux); border-color: var(--c-carte-2); cursor: not-allowed;
}
@media (prefers-reduced-motion: no-preference) {
  .bouton { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
  .bouton-plein::after { transition: transform 0.2s ease; }
  .bouton-plein:hover::after { transform: translateX(4px); }
  :root[dir="rtl"] .bouton-plein:hover::after { transform: translateX(-4px); }
}

/* Sections, alternées blanc / avoine */
.section { padding-block: var(--e-section); }
.section-carte { background: var(--c-fond-2); }
.tete-section { max-width: 820px; margin-bottom: var(--e-7); }
.tete-section h2, .titre-section { font-size: var(--t-h2); line-height: 1.02; margin-top: 0; }
.intro { max-width: var(--largeur-texte); color: var(--c-texte-doux); font-size: var(--t-chapo); }
.grille-3, .grille-4, .etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--e-6); }
.carte { background: var(--c-carte); border: 1px solid var(--c-trait); border-radius: var(--rayon-carte); padding: var(--e-6) var(--e-5); }
/* Carte de démarche cliquable en entier : le lien du titre couvre la carte */
.carte { position: relative; }
.carte:has(h3 a) { min-height: var(--cible-min); }
.carte h3 a { color: var(--c-texte); text-decoration: none; }
.carte h3 a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.carte h3 a::after { content: " →"; content: " →" / ""; color: var(--c-action); }
:root[dir="rtl"] .carte h3 a::after { content: " ←"; content: " ←" / ""; }
.carte:has(h3 a:hover) { border-color: var(--c-action); }
.carte:has(h3 a:focus-visible) { outline: 3px solid var(--c-action); outline-offset: 2px; }
@supports selector(:has(*)) { .carte h3 a:focus-visible { outline: none; } }
.carte p:last-child { margin-bottom: 0; color: var(--c-texte-doux); }
.liste { padding-inline-start: var(--e-5); }
.liste li { margin-bottom: var(--e-2); }

/* Atouts : icônes fines au trait (symboles de partials/icones.html) */
.icone { width: 44px; height: 44px; color: var(--c-action); margin-bottom: var(--e-4); }
.icone use { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.grille-4 h3 { margin-bottom: var(--e-2); }
.grille-4 p { color: var(--c-texte-doux); }

/* Trois étapes : grand numéro serif, filet en haut */
.etapes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); counter-reset: etape; gap: var(--e-6); }
.etapes li { counter-increment: etape; border-top: 1px solid var(--c-trait); padding-top: var(--e-5); }
.etapes li::before {
  content: "0" counter(etape); display: block; margin-bottom: var(--e-4); color: var(--c-action);
  font-family: var(--f-titre); font-weight: var(--g-titre); font-size: var(--t-h2); line-height: 1; letter-spacing: var(--ls-titre);
}
.etapes p { color: var(--c-texte-doux); }

/* Tarifs : ancrage sur le prix d'un repassage, trois offres, l'offre du milieu en bloc genévrier */
.ancrage {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); margin-bottom: var(--e-6);
  padding: var(--e-4) var(--e-5); border-radius: var(--rayon-carte); background: var(--c-accent-doux);
}
.ancrage p { margin: 0; }
.ancrage strong { font-weight: 800; }
.offres { margin-bottom: var(--e-5); align-items: stretch; }
.offre { display: flex; flex-direction: column; position: relative; }
.offre .liste { flex: 1; margin-bottom: 0; }
.prix { color: var(--c-texte-doux); margin-bottom: var(--e-5); }
.prix span {
  display: block; font-family: var(--f-titre); font-size: var(--t-h2); font-weight: var(--g-titre);
  letter-spacing: var(--ls-titre); line-height: 1; color: var(--c-texte); margin-bottom: var(--e-2);
}
.offre-mise-en-avant { background: var(--c-premium); color: var(--c-sur-premium); border-color: var(--c-premium); box-shadow: var(--ombre); }
.offre-mise-en-avant .prix, .offre-mise-en-avant .prix span { color: var(--c-sur-premium); }
.offre-mise-en-avant .liste li::marker { color: var(--c-accent); }
.badge {
  position: absolute; inset-block-start: calc(-1 * var(--e-3)); inset-inline-start: var(--e-5);
  padding: var(--e-1) var(--e-3); border-radius: var(--rayon-pilule); background: var(--c-accent); color: var(--c-sur-accent);
  font-size: var(--t-surtitre); font-weight: 700; letter-spacing: 0.04em;
}
.offre .bouton { margin-top: var(--e-6); }

/* Panneau illustratif : une question d'examen et un courrier en cartes flottantes (pas de photo) */
.panneau { position: relative; padding: var(--e-6) var(--e-4); border-radius: calc(2 * var(--rayon-carte)); background: var(--c-fond-2); }
.flottante { background: var(--c-carte); border: 1px solid var(--c-trait); border-radius: var(--rayon-carte); box-shadow: var(--ombre); padding: var(--e-5); }
.flottante p { margin: 0; }
.fl-question { position: relative; z-index: 1; display: grid; gap: var(--e-3); }
.fl-haut { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-petit); color: var(--c-texte-doux); }
.fl-chrono { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c-texte); }
.fl-barre { height: 6px; border-radius: var(--rayon-pilule); background: var(--c-carte-2); overflow: hidden; }
.fl-barre span { display: block; width: 30%; height: 100%; background: var(--c-action); }
.fl-enonce { font-family: var(--f-titre); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; }
.fl-choix { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); font-size: var(--t-petit); }
.fl-choix li { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border: 1px solid var(--c-trait); border-radius: var(--rayon); }
.fl-choix b { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--c-carte-2); font-size: 0.8125rem; }
.fl-choix .fl-bonne { border-color: var(--c-succes); background: var(--c-action-doux); font-weight: 700; }
.fl-choix .fl-bonne b { background: var(--c-succes); color: var(--c-carte); }
.fl-explication { padding: var(--e-2) var(--e-3); border-radius: var(--rayon); background: var(--c-accent-doux); font-size: var(--t-petit); }
.fl-courrier {
  position: relative; z-index: 2; margin: calc(-1 * var(--e-4)) calc(-1 * var(--e-2)) 0 auto;
  width: min(70%, 260px); padding: var(--e-4); font-size: 0.8125rem; transform: rotate(2.5deg);
}
.fl-courrier .fl-objet { font-weight: 700; margin-bottom: var(--e-2); }
.fl-ligne { height: 6px; border-radius: var(--rayon-pilule); background: var(--c-carte-2); margin-top: var(--e-2); }
.fl-ligne:nth-child(odd) { width: 80%; }
.fl-pdf { display: inline-block; margin-top: var(--e-3); padding: 2px var(--e-2); border-radius: var(--rayon-pilule); background: var(--c-action-doux); color: var(--c-action); font-weight: 700; }
@media (min-width: 960px) {
  .panneau { padding: var(--e-7) var(--e-6); }
  .fl-question { transform: rotate(-1.5deg); }
}

/* Deux colonnes sur grand écran : texte et feuille de courrier, titre et FAQ */
.duo { display: grid; gap: var(--e-6) var(--e-8); align-items: center; }
.duo .fl-courrier { width: min(100%, 420px); margin: 0 auto; padding: var(--e-6); font-size: var(--t-petit); transform: rotate(-1.5deg); }
.duo-faq { align-items: start; }
.note-format { margin-top: var(--e-7); }
@media (min-width: 960px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo-faq { grid-template-columns: 1fr 1.6fr; }
}

/* FAQ en accordéon */
.faq { border-top: 1px solid var(--c-trait); }
details { border-bottom: 1px solid var(--c-trait); }
summary {
  cursor: pointer; font-weight: 700; min-height: var(--cible-min); padding-block: var(--e-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; content: "+" / ""; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid var(--c-trait); border-radius: 50%; font-weight: 400; color: var(--c-action);
}
details[open] summary::after { content: "−"; content: "−" / ""; }
details p { margin: 0 0 var(--e-5); color: var(--c-texte-doux); max-width: var(--largeur-texte); }

/* Parcours d'achat et saisie du code : formulaires courts sur une colonne (scripts/achat/) */
[hidden] { display: none !important; }
.parcours { max-width: calc(680px + 2 * var(--e-4)); }
.parcours h1 { font-size: var(--t-h1-page); }
.formulaire { display: grid; gap: var(--e-5); margin-block: var(--e-6); }
.formulaire fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.formulaire legend, .champ label { font-weight: 700; margin-bottom: var(--e-2); }
.champ { display: grid; gap: var(--e-1); }
.aide { margin: 0; font-size: var(--t-petit); color: var(--c-texte-doux); }
.champ input {
  min-height: var(--cible-min); padding: var(--e-2) var(--e-3); border: 2px solid var(--c-texte-doux); border-radius: var(--rayon);
  background: var(--c-carte); color: var(--c-texte); font: inherit; width: 100%;
}
.saisie-code { font-size: var(--t-h3); letter-spacing: 0.12em; text-transform: uppercase; max-width: 16ch; }
.champ input[aria-invalid="true"], .choix:has(input[aria-invalid="true"]) { border-color: var(--c-erreur); }
.choix, .case { display: flex; align-items: flex-start; gap: var(--e-3); cursor: pointer; }
.choix { min-height: var(--cible-min); padding: var(--e-3) var(--e-4); border: 2px solid var(--c-trait); border-radius: var(--rayon); background: var(--c-carte); }
.choix:has(input:checked) { border-color: var(--c-action); background: var(--c-action-doux); }
.choix > span { display: grid; gap: var(--e-1); flex: 1; }
.choix-prix { font-weight: 700; color: var(--c-action); }
.choix small { color: var(--c-texte-doux); font-size: var(--t-petit); }
.choix input, .case input { flex: none; width: 1.375rem; height: 1.375rem; margin: 0.15em 0 0; accent-color: var(--c-action); }
.case { min-height: var(--cible-min); }
.case[data-invalide] { color: var(--c-erreur); }
.traduction { display: block; margin-top: var(--e-1); font-size: var(--t-petit); color: var(--c-texte-doux); }
.traduction:empty { display: none; }
.message, .alerte { margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--rayon); background: var(--c-erreur-doux); color: var(--c-erreur); font-weight: 600; }
.message[data-etat="succes"] { background: var(--c-action-doux); color: var(--c-succes); }
.message[data-etat="info"] { background: var(--c-action-doux); color: var(--c-texte); }
.formulaire .bouton { justify-self: start; }
.formulaire[aria-busy="true"] .bouton { opacity: 0.6; cursor: progress; }
.ouvert { margin-block: var(--e-6); padding: var(--e-5); border-radius: var(--rayon-carte); background: var(--c-action-doux); }
.ouvert h2 { margin-top: 0; }
.liens-acces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* Textes juridiques */
.avertissement { background: var(--c-erreur-doux); color: var(--c-erreur); border-radius: var(--rayon); padding: var(--e-3) var(--e-4); }

/* Pied de page clair */
.pied { background: var(--c-fond-2); border-top: 1px solid var(--c-trait); padding-block: var(--e-7) var(--e-5); font-size: var(--t-petit); color: var(--c-texte-doux); }
.pied-grille { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pied-marque { font-family: var(--f-titre); font-size: var(--t-marque); letter-spacing: var(--ls-marque); color: var(--c-texte); }
.pied-titre { color: var(--c-texte); }
.pied-droits { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--c-trait); }

/* Pages de contenu (guides) : fil d'Ariane, tableaux, exemples de questions, encart de suite, sources */
.guide { padding-block: var(--e-6) var(--e-section); }
.guide h1 { margin-bottom: var(--e-5); }
.ariane ol { list-style: none; margin: 0 0 var(--e-6); padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-2); font-size: var(--t-petit); color: var(--c-texte-doux); }
.ariane li + li::before { content: "›"; content: "›" / ""; margin-inline-end: var(--e-2); }
.ariane a { display: inline-flex; align-items: center; min-height: var(--cible-min); }
.fiche-defile { overflow-x: auto; margin-bottom: var(--e-4); } /* tableau plus large que l'écran : défile dans son conteneur (C13, P-C7) ; une seule définition, aussi pour les fiches PDF */
.tableau { width: 100%; border-collapse: collapse; margin-bottom: var(--e-5); font-size: var(--t-petit); }
.tableau th, .tableau td { text-align: start; vertical-align: top; padding: var(--e-3); border-bottom: 1px solid var(--c-trait); }
.tableau th { color: var(--c-texte); }
.questions { list-style: none; margin: 0 0 var(--e-6); padding: 0; display: grid; gap: var(--e-5); }
.question { background: var(--c-carte); border: 1px solid var(--c-trait); border-radius: var(--rayon-carte); padding: var(--e-5); }
.question .surtitre { margin-bottom: var(--e-2); }
.question-enonce { font-weight: 700; }
.question-choix { margin: 0 0 var(--e-3); padding-inline-start: var(--e-5); }
.question .note { margin: var(--e-3) 0 0; }
.guide-suite { margin-top: var(--e-7); padding: var(--e-5); border-radius: var(--rayon-carte); background: var(--c-fond-2); }
.guide-suite h2, .sources h2, .guide-faq h2 { margin-top: 0; }
.guide-faq, .sources { margin-top: var(--e-7); }
.sources { font-size: var(--t-petit); color: var(--c-texte-doux); border-top: 1px solid var(--c-trait); padding-top: var(--e-5); }
.sources a { overflow-wrap: anywhere; }

/* Outil « Suis-je concerné ? » (scripts/concerne/) : l'état du résultat se lit aussi dans le texte, pas seulement à la couleur */
.concerne { margin-block: var(--e-6); }
.concerne-resultat { border-inline-start: 6px solid var(--c-action); }
.concerne-particulier { border-inline-start-color: var(--c-texte-doux); }
.concerne-resultat .actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-block: var(--e-4); }
.concerne-resultat ul.liste { font-size: var(--t-petit); }
.traduction { color: var(--c-texte-doux); font-size: var(--t-petit); }
.choix small { display: block; color: var(--c-texte-doux); }

/* Page « Préparer l'entretien de naturalisation » : zone d'entraînement. Couleurs et tailles : tokens.css. */
.entretien-zone { background: var(--c-carte); border: 1px solid var(--c-trait); border-radius: var(--rayon-carte); padding: var(--e-6) var(--e-5); display: grid; gap: var(--e-4); }
.entretien-zone h2 { font-size: var(--t-h3); margin: 0; }
.entretien-zone h3 { font-size: var(--t-corps); margin: var(--e-3) 0 0; }
.entretien-zone p, .entretien-zone ul { margin: 0; }
.entretien-zone select { min-height: var(--cible-min); padding: var(--e-2) var(--e-3); border: 1px solid var(--c-trait-champ); border-radius: var(--rayon); font: inherit; background: var(--c-fond); color: var(--c-texte); }
.entretien-zone button { justify-self: start; cursor: pointer; font: inherit; }
.entretien-zone blockquote { margin: 0; padding: var(--e-3) var(--e-4); background: var(--c-action-doux); border-inline-start: 4px solid var(--c-action); border-radius: var(--rayon); }
.entretien-zone .compte-bloc { font-size: var(--t-h3); }
.entretien-zone .compte { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-action); }
.entretien-zone .consigne { font-size: var(--t-chapo); }
.entretien-offre { background: var(--c-premium); color: var(--c-sur-premium); border-radius: var(--rayon-carte); padding: var(--e-6) var(--e-5); display: grid; gap: var(--e-3); }
.entretien-offre a:not(.bouton) { color: var(--c-sur-premium); }
.entretien-offre .note { color: var(--c-sur-premium-doux); }

/* Test « Quel est mon niveau de français ? » (scripts/niveau/) : traduction sous le français, état lu aussi dans le texte */
.niveau { margin-block: var(--e-6); }
.niveau-ecran { display: grid; gap: var(--e-4); margin-block: var(--e-4); }
.niveau .bilingue__trad { display: block; font-size: var(--t-petit); color: var(--c-texte-doux); }
.niveau .bilingue__fr { display: inline; }
.niveau-texte { margin: 0; padding: var(--e-4); background: var(--c-fond-2); border-inline-start: 4px solid var(--c-action); border-radius: var(--rayon); font-size: var(--t-chapo); }
.niveau-question { margin: 0; font-weight: 700; }
.niveau .choix.choix-juste, .niveau .choix.choix-juste:has(input:checked) { border-color: var(--c-succes); background: var(--c-action-doux); }
.niveau .choix.choix-faux, .niveau .choix.choix-faux:has(input:checked) { border-color: var(--c-erreur); background: var(--c-erreur-doux); }
.niveau-correction { padding: var(--e-4); border-radius: var(--rayon); background: var(--c-fond-2); }
.niveau-correction p { margin: 0 0 var(--e-2); }
.niveau-resultat { padding: var(--e-5); border-radius: var(--rayon-carte); border: 1px solid var(--c-trait); border-inline-start: 6px solid var(--c-action); background: var(--c-carte); }
.niveau-resultat h2 { margin: 0; }
.niveau-resultat .actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.alerte-niveau { margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--rayon); background: var(--c-accent-doux); color: var(--c-texte); }
.niveau-langue { max-width: 22rem; }
.niveau-info { margin-top: var(--e-6); }
/* Calculateur de dates (scripts/calculateur/) : traduction sous le français, liste des dates du résultat */
.trad { display: block; color: var(--c-texte-doux); font-weight: 400; font-size: var(--t-petit); }
.calculateur select { min-height: var(--cible-min); max-width: 100%; }
.calculateur .formulaire { margin-block: var(--e-5); }
.dates { display: grid; grid-template-columns: max-content 1fr; gap: var(--e-2) var(--e-4); margin-block: var(--e-4); }
.dates dt { font-weight: 400; } .dates dd { margin: 0; }
@media (max-width: 30em) { .dates { grid-template-columns: 1fr; } }
/* Lexique : définition, traductions sous le français, index alphabétique */
.lexique-definition { font-size: var(--t-chapo); }
.lexique-trad { border-inline-start: 3px solid var(--c-trait); padding-inline-start: var(--e-4); margin-block: var(--e-4); }
.lexique-trad h3 { margin: 0 0 var(--e-2); font-size: var(--t-petit); color: var(--c-texte-doux); }
.lexique-trad p { margin: 0; }
.lexique-lettres { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); }
.lexique-lettres a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--cible-min); min-height: var(--cible-min); }
.lexique-liste { margin: 0 0 var(--e-5); }
.lexique-entree { padding-block: var(--e-3); border-bottom: 1px solid var(--c-trait); }
.lexique-entree dt { font-weight: 700; }
.lexique-entree dd { margin: var(--e-1) 0 0; }
.lexique-termes { display: block; margin-top: var(--e-2); font-size: var(--t-petit); color: var(--c-texte-doux); }
/* Préparer mes pièces (scripts/pieces-pdf/) : liste des fichiers, vignettes, résultats */
.pieces-pdf select { min-height: var(--cible-min); max-width: 100%; }
.pieces-pdf .cadre-etape { margin-block: var(--e-6); }
.pieces-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-4); }
.piece-fichier, .piece-resultat { display: grid; gap: var(--e-3); padding: var(--e-4); border: 2px solid var(--c-trait); border-radius: var(--rayon); background: var(--c-carte); }
.piece-tete { display: flex; align-items: center; gap: var(--e-4); }
.piece-nom { display: grid; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.piece-vignette { flex: none; width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--c-trait); border-radius: 4px; background: var(--c-carte); }
.piece-type { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--c-texte-doux); }
.rot-90 { transform: rotate(90deg); } .rot-180 { transform: rotate(180deg); } .rot-270 { transform: rotate(270deg); }
.pieces-pdf .actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.pieces-pdf .bouton { min-height: var(--cible-min); }
.pieces-pdf .case { align-items: center; }

/* Outils « Vérifier mon dossier » et « Traducteur de vocabulaire » : le niveau se lit aussi au symbole et au texte */
.verif-fichiers, .verif-pieces, .verif-constats, .traducteur-resultats, .traducteur-traductions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.verif-entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.verif-nom { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.verif-badge { font-size: var(--t-petit); font-weight: 700; }
.verif-fichier { border-inline-start: 6px solid var(--c-trait); }
.verif-fichier.verif-ok { border-inline-start-color: var(--c-succes); }
.verif-fichier.verif-attention { border-inline-start-color: var(--c-texte-doux); }
.verif-fichier.verif-probleme { border-inline-start-color: var(--c-erreur); }
.verif-constat { display: flex; gap: var(--e-3); align-items: baseline; }
.verif-symbole { flex: none; min-width: 1.25rem; font-weight: 700; text-align: center; }
.verif-piece { display: grid; gap: var(--e-2); }
.verif-piece select, .verifier select, .traducteur input[type="search"] { width: 100%; min-height: var(--cible-min); padding: var(--e-2) var(--e-3); border: 1px solid var(--c-trait-champ); border-radius: var(--rayon); font: inherit; background: var(--c-fond); color: var(--c-texte); }
.traducteur-carte h3 { margin: 0 0 var(--e-2); }
.traducteur-langue { color: var(--c-texte-doux); font-size: var(--t-petit); }
.traducteur-liens { display: grid; gap: var(--e-3); margin-top: var(--e-3); }

/* Accueil : trois parcours et prix de départ au premier écran */
.parcours-accueil { gap: var(--e-3); margin-top: var(--e-4); }
.parcours-accueil .carte { padding: var(--e-3) var(--e-4); }
.parcours-accueil .carte h3 { margin: 0 0 var(--e-1); font-size: var(--t-corps); }
.parcours-accueil .carte p a { position: relative; z-index: 1; }
.prix-depart { margin: var(--e-4) 0 0; font-weight: 600; }
/* Boutons des accueils traduits : la mention « (in French) » passe sur sa propre ligne, plus petite. */
.bouton .en-francais { display: block; font-weight: 400; font-size: var(--t-petit); }