/* =============================================================================
   CV by Belentia — couche outil commune (DA v3.3, 24/09/2026)
   Composants absents du kit pour les pages secondaires : en-tête de page,
   gabarit de lecture (légal, guide), formulaires, bouton « Gérer mes choix »
   du pied, raccord Tailwind (préflight) et ancien système .cm-*.
   Teal #0D9488 en touches, jamais assombri ; aucune ombre.
   ========================================================================== */
body { background: var(--canvas); }

/* Pied : bouton de consentement présenté comme un lien discret */
.footer__consent {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-decoration: none;
}
.footer__consent:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.footer__mediator { margin-top: var(--space-2, 16px); font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 90ch; }
.footer__mediator a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.footer__lang { margin-left: auto; }

/* En-tête des pages secondaires : même rythme que les maquettes */
.page-head { padding-top: 64px; padding-bottom: 32px; max-width: 760px; }
.page-head > * + * { margin-top: var(--space-2, 16px); }
.page-head .lead { color: var(--text); }
@media (max-width: 720px) { .page-head { padding-top: 40px; padding-bottom: 24px; } }

/* Gabarit de lecture (légal, guide, reconversion) : colonne de 68 caractères */
.reading {
  max-width: 720px; margin: 0 auto; padding: 56px var(--gutter) 24px;
  color: var(--text); font-size: 17px; line-height: 1.7;
}

/* Formulaires (signalement, opposition à la mesure) */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; box-shadow: none;
}
.form-card label { font-weight: 600; color: var(--ink); font-size: 15px; }
.form-card input[type="text"], .form-card input[type="email"], .form-card input[type="url"], .form-card textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.form-card input[type="text"]:focus, .form-card input[type="email"]:focus, .form-card input[type="url"]:focus, .form-card textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Ancien système .cm-* (refonte Codex du 21/09) : mêmes jetons */
.cm-button { background: var(--accent) !important; color: #fff !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; }
.cm-eyebrow { color: var(--accent) !important; }
.cm-prose { color: var(--text); }

/* Titres : Sora pour les titres de toutes les pages publiques */
h1, h2, h3 { font-family: var(--font-title); color: var(--ink); }

/* En-tête de page (partials/cv-page-head) */
.page-head-section { padding-block: 64px 8px; }
.page-head .h1 { font-size: clamp(34px, 5.2vw, 48px); }
.page-head .accent { color: var(--accent); font-style: normal; }
.page-head__meta { font-size: 14px; color: var(--muted); }
.page-body { padding-top: 24px; }
.faq--page { max-width: 820px; }
.related-cards { margin-top: var(--space-8, 64px); }
.related-cards .h3 { font-size: 18px; }
@media (max-width: 720px) {
  .page-head-section { padding-block: 40px 0; }
  .related-cards { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
}

/* Encadrés de lecture (guide, reconversion) : filet complet teinté + fond 9 %, jamais de filet latéral */
.note-box { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 9%, #fff); border-radius: var(--radius-sm); padding: 20px 22px; }
.note-box--warn { border-color: color-mix(in srgb, #FF3B30 35%, transparent); background: color-mix(in srgb, #FF3B30 7%, #fff); }
.toc { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; background: #fff; }
.toc .eyebrow { margin-bottom: 8px; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.toc a { color: var(--ink); font-weight: 500; text-decoration: none; }
.toc a:hover { color: var(--accent); }

/* Gabarit de lecture : fil d'Ariane, sommaire, encadrés, liste d'étapes, FAQ imbriquée */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.article__head .actions { margin-top: var(--space-3, 24px); }
.prose-toc { max-width: 720px; margin: var(--space-5, 40px) auto 0; }
.prose .pdf-duo { margin-top: var(--space-3, 24px); }
.prose .note-box p { font-size: 16px; line-height: 1.6; margin-top: 6px; }
.prose .note-box .h3 { font-size: 17px; margin: 0; }
.note-box--neutral { border-color: var(--line); background: var(--soft); }
.prose .prose__source { font-size: 15px; color: var(--muted); }
.prose ol.steps-list { display: grid; gap: 12px; padding-left: 1.3em; margin-top: var(--space-2, 16px); list-style: decimal; }
.prose ol.steps-list li { font-size: 18px; line-height: 1.7; color: var(--text); padding-left: 4px; }
.prose ol.steps-list li::marker { color: var(--accent); font-weight: 700; }
.prose .faq { margin-top: var(--space-3, 24px); }
.faq summary .faq__q { font: inherit; margin: 0; color: inherit; }
@media (max-width: 720px) { .prose .pdf-duo { grid-template-columns: minmax(0, 1fr); } }

/* Installation (/comment-installer) */
.install-actions { max-width: 760px; }
#pwaInstallButton[hidden] { display: none; }
.install-status { margin-top: 12px; font-size: 15px; color: var(--muted); min-height: 1.5em; }
.install-note { margin-top: 16px; font-size: 16px; color: var(--ink); }
.install-grid { margin-top: 48px; }
.install-steps { list-style: decimal; padding-left: 1.2em; display: grid; gap: 8px; color: var(--text); font-size: 16px; }
.install-steps li::marker { color: var(--accent); font-weight: 700; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 900px) { .install-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .install-actions .btn { width: 100%; } }

/* Pages légales : gabarit de lecture */
.legal-page .article__head { margin-bottom: 8px; }
.legal-prose > div + div { margin-top: var(--space-5, 40px); }
.legal-prose h2 { font-size: 22px; margin-top: 0; margin-bottom: 12px; }
.legal-prose p, .legal-prose li { font-size: 17px; }
.legal-prose a { color: var(--ink); text-decoration-color: var(--accent); }

/* Signaler un bug */
.bug-page { max-width: 760px; }
.bug-head { padding-top: 0; padding-bottom: 32px; }
.bug-form { padding: 32px; }
.bug-form .rounded-xl { border-radius: var(--radius-sm); }
@media (max-width: 560px) { .bug-form { padding: 20px; } .bug-submit { width: 100%; } }

/* Listes des textes légaux : contenu mixte (gras + texte), puce en position absolue */
.legal-prose ul li, .prose .legal-list li { display: block; position: relative; padding-left: 20px; font-size: 17px; }
.legal-prose ul li::before { position: absolute; left: 0; top: 0; margin-top: 11px; }
.legal-prose ul, .legal-prose ol { padding-left: 0; }
.legal-prose li { min-width: 0; overflow-wrap: anywhere; }

/* 24/09/2026 (retour de Kylian) : à partir de 901 px, les liens de la barre sont au milieu,
   la marque à gauche et les actions à droite, comme Mot de passe et Transcriptor.
   Grille 1fr | auto | 1fr : les deux côtés ont la même largeur, donc le groupe central est
   vraiment centré. Sous 901 px, rien ne change (burger). */
@media (min-width: 901px) {
  .nav .nav__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .nav .nav__links { margin-left: 0; justify-content: center; }
  .nav .nav__spacer { display: none; }
  .nav .nav__actions { justify-self: end; }
  .nav .nav__inner > .brand { justify-self: start; }
}