/* Crayon Noir, diagnostic IA : mise en page des écrans et des résultats.
   Couleurs, polices, capsules et boutons viennent du thème (section 18) et de formulaires.css. */

.sc-diagnostic { max-width: 46rem; }
.sc-diagnostic__form > * + * { margin-block-start: 1.5rem; }
.sc-diagnostic__progression { display: grid; gap: 0.5rem; padding-top: 0.75rem; border-top: var(--sky-filet); }
/* Un seul compteur, en encre (lisible, pas un gris décoratif), et la barre décollée de l'intitulé (revue, M10). */
.sc-diagnostic .sc-progression__compteur { color: var(--encre); }
.sc-diagnostic__progression .sc-barre { margin-block-end: 0.75rem; }
.sc-barre { height: 4px; border-radius: 999px; background: var(--voile); overflow: hidden; }
.sc-barre__jauge { display: block; height: 100%; background: var(--encre); transition: width 300ms ease; }
.sc-diagnostic .sc-etape__titre { margin-block: 0.25rem 0.5rem !important; }
/* Le thème traite un h2 enfant direct de .sky-formulaire comme un surtitre (capitales, filet) :
   ici c'est l'intitulé de la question, il garde la voix d'un titre. */
.sc-diagnostic .sky-formulaire > .sc-etape__titre { font-weight: 500; letter-spacing: -0.01em; text-transform: none; padding-top: 0; border-top: 0; }
/* Le focus posé par le script après chaque écran guide les lecteurs d'écran, sans cadre à la souris. */
.sc-diagnostic .sc-etape__titre:focus:not(:focus-visible) { outline: none; }
.sc-diagnostic .sc-champ + .sc-champ { margin-block-start: 1.5rem; }
.sc-diagnostic .sc-legende:empty { display: none; }
.sc-diagnostic__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.sc-diagnostic .sc-diagnostic__grille > .sc-champ { margin: 0; }
/* Prénom et adresse mail (obligatoires) côte à côte, puis nom et entreprise, le téléphone ; taille,
   secteur et consentement sur toute la largeur. */
.sc-diagnostic__grille > .sc-groupe, .sc-diagnostic__grille > .sc-consentement { grid-column: 1 / -1; }
.sc-diagnostic__accueil > * + * { margin-block-start: 1rem; }
/* Ligne de réassurance sous la première question (page du diagnostic et question embarquée). */
.sc-diagnostic__reassurance { margin-block-start: 1rem; color: var(--gris-fonce); }

/* Question 1 embarquée (accueil) : même voix que le premier écran du diagnostic. */
.sc-depart { max-width: 46rem; }
.sc-depart .sc-diagnostic__form > * + * { margin-block-start: 1.5rem; }
.sc-depart .sky-formulaire > .sc-etape__titre { font-weight: 500; letter-spacing: -0.01em; text-transform: none; padding-top: 0; border-top: 0; margin-block: 0.25rem 0.5rem !important; }
.sc-depart .sc-legende:empty { display: none; }
.sc-depart [data-sc-envoi] .sc-etape__actions { opacity: 0.6; }

/* Écran des coordonnées : l'aperçu flouté du score. Le flou est aussi en style en ligne ;
   le texte ne se sélectionne pas, et le lecteur d'écran n'entend que le libellé neutre du bloc. */
.sc-apercu { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.75rem 1.5rem; align-items: center; padding-block: 1rem; border-block: var(--sky-filet); }
.sc-apercu__score > * { margin: 0; }
.sc-apercu__flou { filter: blur(14px); user-select: none; -webkit-user-select: none; pointer-events: none; }
.sc-apercu__texte { margin: 0; font-weight: 500; }
.sc-diagnostic[data-sc-envoi] .sc-etape__actions { opacity: 0.6; }
/* « Précédent » puis « Suivant », alignés à gauche à toutes les largeurs (revue UX, passe 2).
   Dans le balisage, « Suivant » vient d'abord : sans script, la touche Entrée envoie la réponse.
   Au téléphone, les deux boutons se partagent la ligne ; seul, « Suivant » la prend entière. */
.sc-diagnostic .sc-etape__actions, .sc-depart .sc-etape__actions { flex-wrap: nowrap; gap: 0.5rem; }
.sc-diagnostic .sc-etape__actions > .sc-bouton { order: 0; margin-left: 0; }
.sc-diagnostic .sc-etape__actions > .sc-bouton-bloc { order: -1; }
.sc-diagnostic .sc-etape__actions .sc-bouton, .sc-depart .sc-etape__actions .sc-bouton { justify-content: center; min-height: 48px; padding-inline: 1.5rem; }
/* « Suivant » inactif tant qu'aucune réponse n'est choisie : visible, focalisable, mais estompé. */
.sc-formulaire .sc-bouton[data-sc-inactif] { opacity: 0.4; cursor: not-allowed; }
.sc-formulaire .sc-bouton[data-sc-inactif]::after { content: none; }
.sc-diagnostic .sc-bouton-bloc .sc-bouton { background: var(--voile); border-color: var(--voile); color: var(--encre); }
.sc-diagnostic .sc-bouton-bloc .sc-bouton::after { content: none; }

/* Plafond des tâches : le script désactive les cases au-delà du maximum et l'écrit sous la liste. */
.sc-diagnostic .sc-choix__item:has(input:disabled) { opacity: 0.45; }
.sc-diagnostic .sc-choix__item:has(input:disabled) :is(input, label) { cursor: not-allowed; }
.sc-diagnostic .sc-plafond { margin-block-start: 0.75rem; }
/* Vide, la zone reste dans l'arbre d'accessibilité (sinon son remplissage n'est pas annoncé) : seule sa marge tombe. */
.sc-diagnostic .sc-plafond:empty { margin: 0; }

/* Zones cliquables : chaque capsule de réponse fait au moins 48 px de haut (le label couvre la capsule). */
.sc-formulaire.sc-diagnostic .sc-choix__item label, .sc-formulaire.sc-depart .sc-choix__item label { display: flex; align-items: center; min-height: 48px; }
.sc-formulaire.sc-diagnostic .sc-choix__item label { padding: 0.75rem 1.5rem; }
/* Une capsule étirée par sa rangée garde son texte centré verticalement : le libellé suit sa hauteur. */
.sc-formulaire.sc-diagnostic .sc-choix__item, .sc-formulaire.sc-depart .sc-choix__item { align-items: stretch; }
.sc-formulaire.sc-diagnostic .sc-consentement .sc-choix__item label { min-height: 0; padding: 0; }

/* Résultats. Premier écran : phrase-titre, score global seul en grand, heures et euros, appel.
   Échelle de 8 (4, 8, 12, 16, 24, 32, 48, 64) ; deux rayons (capsule, 24 px). */
.sc-resultats > * { margin-block: 0; }
.sc-resultats > * + * { margin-block-start: 3rem; }
.sc-resultats > .sky-surtitre + .sc-resultats__titre { margin-block-start: 0.5rem; }
.sc-resultats > .sc-resultats__titre + .sc-resultats__chiffres { margin-block-start: 1.5rem; }
.sc-resultats > .sc-resultats__chiffres + .sc-resultats__rdv { margin-block-start: 2rem; }
/* La phrase-titre : une déclaration, donc la police des titres (Unbounded 500, tâche 9), alignée à gauche,
   plus petite qu'un h1 d'accueil pour laisser les chiffres dans le premier écran du téléphone.
   Unbounded est large : 28 px au téléphone, 36 px dès 600 px, 48 px dès 1024 px. */
.sc-resultats .sc-resultats__titre { max-width: 22ch; margin: 0; font-family: var(--sky-titres, 'Unbounded', 'Arial Black', Arial, sans-serif); font-size: 1.75rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; text-align: left; }
/* Les grands chiffres des résultats : Unbounded 500, chiffres tabulaires (le compteur ne fait pas danser la ligne). */
.sc-resultats .sky-chiffre { font-family: var(--sky-titres, 'Unbounded', 'Arial Black', Arial, sans-serif); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sc-resultats__chiffres { display: grid; gap: 1rem; }
/* Surtitres des résultats : petites capitales espacées, comme les catégories du site (12 px, gris lisible). */
.sc-resultats .sky-surtitre { font-size: var(--wp--preset--font-size--mention, 0.75rem); font-weight: 400; line-height: 1.4; letter-spacing: 0.11em; text-transform: uppercase; color: var(--gris); }
.sc-resultats__score > * { margin: 0; }
/* « /100 » suit le score en Onest, plus petit et en gris, comme dans le PDF et le courriel : en Unbounded au
   même corps, « 100/100 » débordait de sa colonne au téléphone (tâche 9). */
.sc-resultats .sc-resultats__sur { font-family: var(--sky-texte, 'Onest', Helvetica, Arial, sans-serif); font-size: 0.4em; font-weight: 400; letter-spacing: 0; color: var(--gris); }
.sc-resultats__score > * + * { margin-block-start: 0.5rem; }
.sc-resultats__score .sc-barre { margin-block-start: 0.75rem; }
/* Le score global domine : seul en grand. */
.sc-resultats__score--global .sky-chiffre { font-size: 3rem; line-height: 1; }
.sc-resultats__score--global .sky-note { max-width: 40ch; }
.sc-resultats__score--global .sc-barre { max-width: 24rem; }
/* Heures et euros : deux colonnes, même au téléphone. */
.sc-resultats__gains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; padding-top: 1rem; border-top: var(--sky-filet); }
.sc-resultats__gain > * { margin: 0; }
.sc-resultats__gain > * + * { margin-block-start: 0.5rem; }
/* « 105,7 h » fait 4,3 em en Unbounded : 32 px au téléphone tiennent dans une demi-colonne de 171 px. */
.sc-resultats__gain .sky-chiffre { font-size: 2rem; line-height: 1; white-space: nowrap; }
/* Gain modeste (moins de 8 h par mois, config « paliers_gain ») : les deux chiffres restent là, sans
   emphase, au corps des sous-scores (24 px à toutes les largeurs), suivis de la mention en gris. */
.sc-resultats__gains--modeste .sc-resultats__gain .sky-chiffre { font-size: 1.5rem; line-height: 1.1; }
.sc-resultats__gains-mention { grid-column: 1 / -1; margin: 0; max-width: 40ch; color: var(--gris); }
/* L'appel de restitution, juste sous les chiffres. */
.sc-resultats__rdv { padding-top: 1.5rem; border-top: var(--sky-filet); }
.sc-resultats__rdv > * { margin: 0; }
.sc-resultats__rdv > * + * { margin-block-start: 1rem; }
.sc-resultats .sc-resultats__rdv-titre { max-width: none; font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
/* Aperçu de l'appel avant le clic : trois repères courts. */
.sc-resultats__rdv-points { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.sc-resultats__rdv-points li { padding-left: 1rem; position: relative; }
.sc-resultats__rdv-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--encre); }
.sc-resultats__rdv .sc-cal__ouvrir .wp-block-button__link { min-height: 48px; }
.sc-cal:focus { outline: none; }
.sc-cal__repli a { display: inline-block; padding-block: 0.75rem; }
.sc-cal-absent > * { margin: 0; }
.sc-cal-absent > * + * { margin-block-start: 1rem; }
/* Les trois sous-scores : une rangée compacte de trois colonnes, à toutes les largeurs. */
.sc-resultats__scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; padding-top: 1.5rem; border-top: var(--sky-filet); }
.sc-resultats__scores .sky-chiffre { font-size: 1.5rem; line-height: 1.1; }
.sc-tableau { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--petit); }
.sc-tableau th, .sc-tableau td { padding: 0.75rem 0; border-bottom: var(--sky-filet); text-align: left; vertical-align: top; }
.sc-tableau th { font-weight: 500; }
.sc-tableau td.sc-tableau__nombre, .sc-tableau th.sc-tableau__nombre { text-align: right; font-variant-numeric: tabular-nums; }
.sc-tableau tfoot td { font-weight: 500; }
.sc-tableau caption { caption-side: top; text-align: left; margin-block-end: 0.75rem; }
.sc-tableau tbody th { font-weight: 400; }
.sc-tableau + .sky-note { margin-block-start: 1rem; }
.sc-resultats__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.sc-resultats__action { padding-top: 1.5rem; border-top: var(--sky-filet); }
.sc-resultats__action > * { margin: 0; }
.sc-resultats__action > * + * { margin-block-start: 0.5rem; }
/* Titre d'une action : en Onest, sous le titre de l'appel en Unbounded (20 px chacun au téléphone, puis 24 contre 28 dès 600 px). */
.sc-resultats .sc-resultats__action > :is(h2, h3, h4) { font-family: var(--sky-texte, "Onest", Helvetica, Arial, sans-serif); font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.sc-resultats__action .sky-lien-suite a { display: inline-flex; align-items: center; min-height: 44px; }
.sc-resultats__synthese { max-width: 62ch; }
.sc-resultats__synthese > * + * { margin-block-start: 1rem; }
.sc-resultats__presence { padding-top: 1.5rem; border-top: var(--sky-filet); }
.sc-resultats__presence > * { margin: 0; }
.sc-resultats__presence .sky-chiffre { margin-block-start: 0.5rem; }
.sc-resultats__presence .sc-barre { max-width: 24rem; margin-block: 0.75rem 1rem; }
.sc-resultats__presence > p:last-child { max-width: 62ch; }
/* Hypothèses repliées : le résumé est une vraie zone de 48 px, avec le « + » du site au lieu du triangle natif. */
.sc-resultats__hypotheses { max-width: 62ch; font-size: var(--wp--preset--font-size--petit); color: var(--gris-fonce); border-block: var(--sky-filet); }
.sc-resultats__hypotheses summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding-block: 0.75rem; list-style: none; cursor: pointer; font-weight: 500; color: var(--encre); }
.sc-resultats__hypotheses summary::-webkit-details-marker { display: none; }
.sc-resultats__hypotheses summary::after { content: "+"; font-weight: 400; }
.sc-resultats__hypotheses[open] summary::after { content: "\2212"; }
.sc-resultats__hypotheses ul { margin-block: 1rem; padding-left: 1.5rem; display: grid; gap: 0.5rem; }
.sc-resultats .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Le libellé long passe à la ligne sur mobile plutôt que de déborder. */
.sc-resultats__cta .wp-block-button { max-width: 100%; }
.sc-resultats__cta .wp-block-button__link { white-space: normal; text-align: left; }
/* La variation « outline » du thème n'est émise que si un vrai bloc bouton est sur la page ;
   ici le balisage vient du shortcode : même pastille claire que .sc-bouton--secondaire (section 18). */
.sc-resultats .wp-block-button.is-style-outline .wp-block-button__link { background: var(--voile); border-color: var(--voile); color: var(--encre); }
.sc-resultats .wp-block-button.is-style-outline .wp-block-button__link:is(:hover, :focus-visible) { background: var(--trait); border-color: var(--trait); color: var(--encre); }
/* Page « Réserver un appel » */
.sc-reserver > * + * { margin-block-start: 1.5rem; }
.sc-reserver__intro { max-width: 62ch; }
/* Agenda Cal.com : pleine largeur, hauteur réservée pour que la page ne saute pas au chargement de l'iframe. */
.sc-cal { width: 100%; min-height: 600px; margin-block-start: 1.5rem; scroll-margin-top: 2rem; }
.sc-cal[hidden], .sc-cal__ouvrir[hidden] { display: none; }
.sc-cal iframe { width: 100%; }
.sc-cal__merci { margin: 0; font-weight: 500; }

@media (min-width: 600px) {
	.sc-resultats .sc-resultats__titre { font-size: 2.25rem; }
	.sc-resultats__score--global .sky-chiffre { font-size: 4rem; }
	.sc-resultats__chiffres { gap: 1.5rem; }
	.sc-resultats__gains { padding-top: 1.5rem; }
	.sc-resultats__gain .sky-chiffre { font-size: 2.5rem; }
	.sc-resultats .sc-resultats__rdv-titre { font-size: 1.75rem; }
	.sc-resultats .sc-resultats__action > :is(h2, h3, h4) { font-size: 1.5rem; }
}
/* Grand écran : le score global à gauche, heures et euros à droite, sur une même ligne. */
@media (min-width: 1024px) {
	.sc-resultats .sc-resultats__titre { font-size: 3rem; max-width: 24ch; }
	.sc-resultats__chiffres { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: end; }
	.sc-resultats__score--global .sky-chiffre { font-size: 5rem; }
	.sc-resultats__gains { padding-top: 0; border-top: 0; }
	.sc-resultats__gain .sky-chiffre { font-size: 3.5rem; }
}

@media (max-width: 899px) {
	.sc-resultats__actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
	.sc-apercu { grid-template-columns: minmax(0, 1fr); }
	.sc-tableau th, .sc-tableau td { padding-inline-end: 0.5rem; }
	.sc-tableau th:last-child, .sc-tableau td:last-child { padding-inline-end: 0; }
	.sc-diagnostic__grille { grid-template-columns: minmax(0, 1fr); }
	.sc-resultats__gains, .sc-resultats__scores { gap: 1rem; }
	.sc-diagnostic .sc-etape__actions > *, .sc-depart .sc-etape__actions > * { flex: 1 1 0; width: auto; }
	.sc-diagnostic .sc-etape__actions .sc-bouton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.sc-barre__jauge { transition: none; }
}