/* ═══ LE STYLE « QUESTIONNAIRE » — UN SEUL ENDROIT POUR LE DESIGN DES FORMULAIRES ═══════════════════════════
 *
 * Ilyes, 2026-10-22 : « ce style partout », d'après la maquette de la session SEAO — une carte blanche, des
 * questions numérotées, de grands ronds, un bouton pilule bleu ; « à condition que rien ne change dans le
 * fonctionnement ».
 *
 * ⛔ CE FICHIER NE CHANGE QUE L'APPARENCE. Aucun champ, aucun libellé, aucun `name`, aucune classe lue par le
 *    JavaScript n'est touché : les branchements (`.hidden` posé et retiré par js/), la validation (`offsetParent`),
 *    la sauvegarde et la reprise voient le même DOM qu'avant. Seule exception mesurée : `display` n'est JAMAIS
 *    forcé sur un élément que le JS cache par `.hidden` (un `display: … !important` ici le rallumerait).
 *
 * L'INTERRUPTEUR : chaque règle commence par `.iq-questionnaire`, la classe que build.js pose sur <html>
 *    (constante STYLE_QUESTIONNAIRE). Sans elle, la feuille est chargée mais ne s'applique à rien : c'est
 *    l'ancien style, au pixel près. `STYLE=ancien node build.js` construit l'ancien rendu sans toucher au code.
 *    Figé par tests/style-questionnaire.test.mjs (toute règle hors de la portée rougit).
 *
 * CHANGER LE DESIGN = changer un JETON ci-dessous. Les mesures viennent de la maquette (capture 2x ÷ 2).
 * La barre de progression de gauche (`.rail-*`, css/form-inline.css) n'est PAS restylée : seule sa place
 * horizontale suit la carte, plus étroite.
 * ════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.iq-questionnaire {
    /* Couleurs — blanc et bleu du site */
    --iq-bleu: #2563eb;
    --iq-bleu-fonce: #1d4ed8;
    --iq-bleu-pale: #eff6ff;
    --iq-anneau: #dbeafe;          /* halo du champ actif */
    --iq-anneau-rond: #bfdbfe;     /* halo clavier d'un rond */
    --iq-texte: #111827;
    --iq-doux: #6b7280;            /* aide, notes */
    --iq-trait: #e5e7eb;           /* bordures, séparateurs */
    --iq-rond: #c4c8cf;            /* rond vide */
    --iq-erreur: #dc2626;
    --iq-indice: #9ca3af;          /* texte indicatif des champs */

    /* Police système */
    --iq-police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;

    /* La carte */
    --iq-carte-largeur: 767px;
    --iq-rail-place: 170px;        /* la place de la barre de gauche : sa largeur (120 px) + l'écart à la carte */
    --iq-carte-rayon: 16px;
    --iq-carte-marge: 20px 17px 17px;   /* haut, côtés, bas */

    /* Typographie */
    --iq-titre: 600 16px/22px var(--iq-police);      /* titre dans la carte */
    --iq-aide: 400 14px/20px var(--iq-police);       /* aide sous le titre */
    /* ⛔ 24-10 (Ilyes : « trop gras », « trop gros », « le même style partout ») : une question, un libellé de champ et le
       texte d'un choix (Oui, Président…) ont UN seul style — 14 px, sans gras. */
    --iq-question: 400 14px/20px var(--iq-police);   /* une question (oui/non, « Quels sont les postes ? ») */
    --iq-choix: 400 14px/20px var(--iq-police);      /* texte d'un choix */
    --iq-libelle: 400 14px/20px var(--iq-police);    /* libellé d'un champ */

    /* Rythme */
    --iq-question-ecart: 13px;     /* question → ses choix */
    --iq-avant-trait: 18px;        /* fin d'un bloc → séparateur */
    --iq-apres-trait: 27px;        /* séparateur → bloc suivant */
    --iq-entete-apres: 36px;       /* aide de l’étape → premier champ (Ilyes : 23-10 « beaucoup plus » que 18, 24-10 « beaucoup trop » à 56) */
    --iq-titre-aide: 10px;         /* titre de l’étape → son aide (Ilyes, 24-10 : « trop collé », était 2 px) */
    --iq-choix-haut: 36px;         /* une ligne de choix tous les 36 px */
    --iq-ouinon-ecart: 24px;       /* une question seule : écart entre « ○ Oui » et « ○ Non », et entre la question et « ○ Oui » */
    --iq-denomination-bloc: 28px;  /* étape 2 : air au-dessus et au-dessous du filet entre deux blocs (Ilyes, 24-10 : « plus d'espace ») */
    --iq-colonne-reponse: 48px;    /* une série : largeur d'une colonne de réponse (Oui, Non) */
    --iq-grille-largeur: 34rem;    /* une série : largeur de la grille questions + colonnes */
    --iq-ligne-champ: 16rem;       /* une question en ligne : largeur de la colonne du champ, à droite */

    /* Le rond */
    --iq-rond-taille: 20px;
    --iq-rond-ecart: 11px;         /* rond → texte */
    --iq-rond-bord: 1.5px;
    --iq-point: 7px;               /* point blanc du rond coché */

    /* Champs et boutons */
    --iq-champ-rayon: 10px;
    --iq-case-rayon: 6px;          /* case à cocher (choix multiples) */
    --iq-bouton-haut: 36px;
    --iq-bouton: 500 15px/1 var(--iq-police);
    --iq-bouton-largeur: calc(var(--iq-carte-largeur) / 2);   /* « Suivant », « Envoyer », « Continuer » : la même largeur (24-10) */
    --iq-avant-bouton: 40px;
    --iq-paiement-largeur: 80rem;  /* « Finaliser la commande » : la carte de paiement, plus large (24-10) */       /* air au-dessus de « Suivant » / « Envoyer » (Ilyes, 24-10 : « plus prononcé ») */
    --iq-personne-rayon: 12px;     /* boîte d'une personne */

    /* Le « i » d'une bulle : la MÊME pastille partout, à la même distance de son texte */
    --iq-i-diametre: 17px;
    --iq-i-lettre: 11px;
    --iq-i-graisse: 600;
    --iq-i-ecart: 6px;             /* texte → « i » */
    --iq-i-aplomb: -1px;           /* ajustement vertical : centre du cercle = centre des lettres */

    /* La bulle : largeur fixe, celle de « Remboursable à 100 % » sur le site Docs */
    --iq-bulle-largeur: 38rem;
}

/* ─── La zone du formulaire : police, largeur ─────────────────────────────────────────────────────────── */
.iq-questionnaire #form-shell {
    max-width: var(--iq-carte-largeur);
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    font-family: var(--iq-police);
    -webkit-font-smoothing: antialiased;
    color: var(--iq-texte);
}

/* ⛔ La barre d'étapes HORIZONTALE (« 1 Contact — 2 Dénomination — … », montrée sous 1 400 px) est retirée « pour le
   moment » (Ilyes, 2026-10-23). Elle reste dans le DOM : js/nav.js la peint toujours, et js/paid-banner.js insère son
   bandeau avant elle. La rallumer = supprimer cette règle. Le rail de gauche (≥ 1 400 px) n'est pas touché. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) #stepper { display: none; }
/* La place qu'elle occupait ne reste pas vide (sous 1 400 px, rien ne la remplace : le texte d'intro n'y vit qu'au-delà). */
@media (max-width: 1399.98px) {
    .iq-questionnaire :is(#form-shell, .iq-carte-simple) #incorporation-form,
    .iq-questionnaire #form-shell > .bg-white.mt-16 { margin-top: 0; }
}

/* Le rail garde son dessin ; il se pose à gauche de la carte, comme sur la maquette.
   ⛔ Ilyes, 2026-10-23 : visible le plus longtemps possible quand l'écran rétrécit, invisible sur téléphone. Dès la
   tablette (768 px) et non plus seulement à 1 400 px : la carte reste centrée tant qu'il reste `--iq-rail-place` à sa
   gauche, puis se décale vers la droite pour lui laisser la place. Sous 768 px : caché (« Étape n sur 5 » prend le
   relais). js/rail-aligne.js cale sa hauteur sur le titre de l'étape, à toute largeur. */
@media (min-width: 768px) {
    .iq-questionnaire #progress-rail {
        display: block;
        position: absolute;
        top: 0;
        /* ⛔ 24-10 (Ilyes) : « à mi-chemin de l'espace visible » — le rail se CENTRE dans l'espace libre entre le bord
           de l'écran et la carte (le milieu entre le bord et la place RÉELLE de la carte, cf. `margin-left` de #form-shell
           plus bas, ramené au repère du conteneur), au lieu de se coller à
           la carte. Jamais plus près de la carte qu'avant (`min` avec l'ancienne place), jamais hors de l'écran (16 px).
           La carte et le texte du dessus ne bougent pas. */
        left: max(
            calc(16px - (100vw - 100%) / 2),
            min(
                calc(max(var(--iq-rail-place), (100% - var(--iq-carte-largeur)) / 2) - var(--iq-rail-place)),
                calc((max(var(--iq-rail-place), (100% - var(--iq-carte-largeur)) / 2) - (100vw - 100%) / 2) / 2 - 60px)
            )
        );
        width: 120px;
        z-index: 20;
    }
    .iq-questionnaire #form-shell {
        margin-left: max(var(--iq-rail-place), calc((100% - var(--iq-carte-largeur)) / 2));
        margin-right: auto;
    }
}

/* ─── La carte ────────────────────────────────────────────────────────────────────────────────────────── */
.iq-questionnaire :is(#incorporation-form > .bg-white, :is(#form-shell, .iq-carte-simple) > .bg-white.mt-16) {
    border: 1px solid var(--iq-trait) !important;
    border-radius: var(--iq-carte-rayon) !important;
    padding: var(--iq-carte-marge) !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* Titre et aide de l'étape, en tête de carte — « 4. Individus » : le numéro de l'étape devant (posé par js/nav.js dans
   `data-etape`), et de l'air sous l'aide avant la première question (Ilyes, 2026-10-23). */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-entete {
    border: 0;
    padding: 0;
    margin: 0 0 var(--iq-entete-apres);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(#step-title, [data-form-etape-titre])[data-etape]::before { content: attr(data-etape) ". "; }
/* « Étape n sur 5 » en haut à droite, sur la ligne du titre ; l'aide passe dessous, sur toute la largeur. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-entete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: baseline;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-entete > :is(#step-subtitle, [data-form-etape-sous]) { grid-column: 1 / -1; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(#step-title, [data-form-etape-titre]) {
    font: var(--iq-titre) !important;
    color: var(--iq-texte);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(#step-subtitle, [data-form-etape-sous]) {
    font: var(--iq-aide) !important;
    color: var(--iq-doux);
    margin-top: var(--iq-titre-aide);
}

/* ─── Libellés et champs ──────────────────────────────────────────────────────────────────────────────── */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.wizard-step, .form-step, .director-entry, .corporate-shareholder-entry, fieldset) label.block,
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .corporate-shareholder-entry label.text-xs {
    font: var(--iq-libelle) !important;
    color: var(--iq-texte);
    margin-bottom: 6px;
}

.iq-questionnaire :is(#form-shell, .iq-carte-simple, #entity-modal, #resume-modal, .chg-form) :is(input:is([type="text"], [type="email"], [type="number"], [type="tel"], [type="date"], :not([type])), select:not(#modal-quoi), textarea) {
    font-family: inherit;
    font-size: 16px !important;   /* jamais sous 16 px : iOS zoomerait au focus */
    line-height: 22px;
    font-weight: 400;
    padding: 8px 12px !important;
    border: 1px solid var(--iq-trait) !important;
    border-radius: var(--iq-champ-rayon) !important;
    box-shadow: none !important;
    color: var(--iq-texte);
}
/* Une liste : la même flèche partout (celle de « Inc. »), dessinée ici et non par le navigateur. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple, #entity-modal, #resume-modal, .chg-form) select:not(#modal-quoi) {
    padding-right: 36px !important;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple, #entity-modal, #resume-modal, .chg-form) :is(input, textarea)::placeholder { color: var(--iq-indice); }
.iq-questionnaire :is(#form-shell, .iq-carte-simple, #entity-modal, #resume-modal, .chg-form) :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--iq-bleu) !important;
    box-shadow: 0 0 0 3px var(--iq-anneau) !important;
}
/* Le champ que la validation désigne (js/validation.js pose `aria-invalid`) */
.iq-questionnaire :is(#form-shell, .iq-carte-simple, #entity-modal, #resume-modal, .chg-form) :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--iq-erreur) !important;
}

/* ─── Le rond (une seule réponse) ─────────────────────────────────────────────────────────────────────── */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) input[type="radio"]:is(.form-radio, .iq-case) {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: var(--iq-rond-taille);
    height: var(--iq-rond-taille);
    margin: 0;
    border: var(--iq-rond-bord) solid var(--iq-rond);
    border-radius: 9999px;
    background: #fff;
    cursor: pointer;
    vertical-align: middle;
    transition: border-color .15s, background-color .15s;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) input[type="radio"]:is(.form-radio, .iq-case):hover { border-color: var(--iq-bleu); }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) input[type="radio"]:is(.form-radio, .iq-case):checked {
    border-color: var(--iq-bleu);
    background: radial-gradient(circle, #fff 0 calc(var(--iq-point) / 2), transparent calc(var(--iq-point) / 2 + .5px)), var(--iq-bleu);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) input[type="radio"]:is(.form-radio, .iq-case):focus-visible {
    outline: 3px solid var(--iq-anneau-rond);
    outline-offset: 2px;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) input[type="radio"]:is(.form-radio, .iq-case):disabled { opacity: .45; cursor: not-allowed; }

/* ─── La case (plusieurs réponses : postes, options) — NOUVEAU dans le système, à valider par Ilyes ──── */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) input[type="checkbox"]:is(.iq-case, .form-checkbox),
.iq-questionnaire .case-cf > input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: var(--iq-rond-taille);
    height: var(--iq-rond-taille);
    margin: 0;
    border: var(--iq-rond-bord) solid var(--iq-rond);
    border-radius: var(--iq-case-rayon);
    background-color: #fff;
    cursor: pointer;
    vertical-align: middle;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) input[type="checkbox"]:is(.iq-case, .form-checkbox):hover,
.iq-questionnaire .case-cf > input[type="checkbox"]:hover { border-color: var(--iq-bleu); }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) input[type="checkbox"]:is(.iq-case, .form-checkbox):checked,
.iq-questionnaire .case-cf > input[type="checkbox"]:checked {
    border-color: var(--iq-bleu);
    background: var(--iq-bleu) url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.5 10.5l3 3 6-6.5'/%3e%3c/svg%3e") center / 100% 100% no-repeat;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) input[type="checkbox"]:is(.iq-case, .form-checkbox):focus-visible,
.iq-questionnaire .case-cf > input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--iq-anneau-rond);
    outline-offset: 2px;
}

/* ─── Les choix : une ligne tous les 36 px, rond puis texte ───────────────────────────────────────────── */
/* Dénomination : « Société à numéro » / « Société avec un nom » (la maquette d'Ilyes, 2026-10-22) — l'exemple SOUS
   le choix, le prix à droite, « 1. Type de dénomination » puis, après un trait, « 2. Votre nom ». */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-legende.hidden {
    display: block;
    font: var(--iq-question) !important;
    color: var(--iq-texte) !important;   /* css/style.css force la couleur des <p> (piège connu) */
    margin: 0 0 var(--iq-question-ecart);
}
/* Plus de numéro devant « Type de dénomination » / « Votre nom » (Ilyes, 24-10). */
/* Le nom : une CONSIGNE au style d'un libellé de champ (« Précisez la nature… »), à la même distance de son champ. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-legende.iq-legende-champ { margin-bottom: 6px; }
/* Étape 2 : plus d'air entre ses blocs (Ilyes, 24-10) — le choix du type, le nom, la précision, les mots du nom. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) #named-company-section { margin-top: var(--iq-denomination-bloc); }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) #named-company-section .border-t {
    margin-top: var(--iq-denomination-bloc);
    padding-top: var(--iq-denomination-bloc);
}
.iq-questionnaire #constitution-type-choice > div {
    border: 0;
    padding: 0;
}
.iq-questionnaire #constitution-type-choice > div > * + * { margin-top: 0; }
.iq-questionnaire #constitution-type-choice label {
    display: grid;
    grid-template-columns: var(--iq-rond-taille) minmax(0, 1fr) auto;
    column-gap: var(--iq-rond-ecart);
    align-items: center;
    min-height: var(--iq-choix-haut);
    padding: 6px 0;
    border-radius: 0;
    background: transparent !important;
}
.iq-questionnaire #constitution-type-choice label > input { grid-column: 1; grid-row: 1; }
.iq-questionnaire #constitution-type-choice .label-text {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font: var(--iq-choix);
    color: var(--iq-texte);
}
.iq-questionnaire #constitution-type-choice .label-text + span:not(.denom-prix, .iq-note) {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    margin: 2px 0 0;
    font: 400 14px/20px var(--iq-police) !important;
    color: var(--iq-doux);
}
.iq-questionnaire #constitution-type-choice .label-text + span:not(.denom-prix, .iq-note) strong { font-weight: 400; color: inherit; }
.iq-questionnaire #constitution-type-choice .denom-prix {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    text-align: right;
    margin: 0;
    padding: 0;
    font: 400 14px/20px var(--iq-police);
    color: var(--iq-doux);
}
/* « 2. Votre nom » : un trait de 1 px, 18 px avant, 27 px après ; les champs alignés sur le bord de la carte. */
.iq-questionnaire #named-company-section:not(.hidden) {
    margin-top: var(--iq-avant-trait);
    padding-top: var(--iq-apres-trait);
    border-top: 1px solid var(--iq-trait);
}
.iq-questionnaire #named-company-section > div { padding-left: 0; padding-right: 0; }

/* ─── Oui / Non ─────────────────────────────────────────────────────────────────────────────────────────
   Ilyes, 2026-10-22 : « chaque question propose le même choix : oui/non, oui/non… une seule colonne ».
   • UNE question oui/non = UNE ligne : la question à gauche, ses ronds à droite, chacun avec son mot.
   • Une SÉRIE de questions au même choix (carte d'un individu) = une GRILLE : les questions à gauche, une colonne
     de ronds par réponse à droite, « Oui » et « Non » écrits UNE fois en tête (`.iq-entetes-ouinon`) ; chaque rond
     garde son mot pour le lecteur d'écran (`.sr-only`, non affiché).
   Mêmes éléments, mêmes `name` ; seul l'alignement change. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-ouinon {
    flex-direction: row;
    align-items: center;
    /* ⛔ 24-10 (Ilyes : « beaucoup trop loin à droite ») : une question SEULE garde ses ronds juste après elle. Seules les
       GRILLES (carte d'un individu, série du moteur) alignent leurs ronds en colonnes, plus bas. */
    justify-content: flex-start;
    gap: var(--iq-ouinon-ecart);
    min-height: var(--iq-choix-haut);
    max-width: none;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) [data-question] {
    font: var(--iq-question) !important;
    color: var(--iq-texte);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) [role="radiogroup"] {
    flex-direction: row;
    align-items: center;
    gap: var(--iq-ouinon-ecart);
    padding-top: 0;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) [role="radiogroup"] > label {
    display: flex;
    align-items: center;
    gap: var(--iq-rond-ecart);
    min-height: var(--iq-choix-haut);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) [role="radiogroup"] > label > span:not(.sr-only) {
    font: var(--iq-choix) !important;
    color: var(--iq-texte);
}

/* La grille d'une série (carte d'un individu) : colonnes de largeur fixe, en-tête aligné sur elles. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form :is(.iq-ouinon, .iq-entetes-ouinon) { max-width: var(--iq-grille-largeur); }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form .iq-ouinon { padding-block: 4px; justify-content: space-between; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form .iq-ouinon + * { margin-top: 0; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form [role="radiogroup"],
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-entetes-ouinon > div { gap: 0; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form [role="radiogroup"] > label,
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-entetes-ouinon > div > span {
    width: var(--iq-colonne-reponse);
    justify-content: center;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-entetes-ouinon { margin-bottom: 0; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-entetes-ouinon > div > span {
    font: 500 13px/18px var(--iq-police);
    color: var(--iq-doux);
    text-align: center;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form .iq-roles > div > .space-y-6 > * + * { margin-top: 0; }

/* Les SÉRIES du moteur de formulaires (build.js : deux `oui_non` ou plus d'affilée ⇒ `.iq-serie` + un en-tête caché).
   L'en-tête « Oui | Non » ne paraît que si AU MOINS DEUX lignes de la série sont visibles (les autres s'ouvrent par
   leurs conditions) ; ces lignes rangent alors leurs ronds en colonnes et taisent leurs mots à l'écran (ils restent
   pour le lecteur d'écran). Une ligne seule garde « ○ Oui  ○ Non ». */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-serie { margin-bottom: 0; }
/* Les lignes d'une série se suivent serrées (Ilyes, 24-10 : seize questions « trop espacées ») : la grille du moteur
   écarte chaque champ de 24 px (`gap-6`) ; entre deux lignes d'une même série, il n'en reste que 8. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.iq-serie, .iq-entetes-ouinon) + .iq-serie { margin-top: -16px; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-entetes-ouinon.hidden:has(~ .iq-serie:not(.hidden) ~ .iq-serie:not(.hidden)),
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-entetes-ouinon.iq-entete-seul.hidden {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: var(--iq-question-ecart);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.iq-serie:not(.hidden):has(~ .iq-serie:not(.hidden)), .iq-serie:not(.hidden) ~ .iq-serie:not(.hidden)) [role="radiogroup"] { gap: 0; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.iq-serie:not(.hidden):has(~ .iq-serie:not(.hidden)), .iq-serie:not(.hidden) ~ .iq-serie:not(.hidden)) [role="radiogroup"] > label {
    width: var(--iq-colonne-reponse);
    justify-content: center;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.iq-serie:not(.hidden):has(~ .iq-serie:not(.hidden)), .iq-serie:not(.hidden) ~ .iq-serie:not(.hidden)) [role="radiogroup"] > label > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-serie .iq-ouinon { align-items: center; padding-block: 4px; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.iq-serie:not(.hidden):has(~ .iq-serie:not(.hidden)), .iq-serie:not(.hidden) ~ .iq-serie:not(.hidden)) .iq-ouinon { justify-content: space-between; }


/* Questions numérotées dans la boîte d'une personne : « 1. Est-ce que cet individu est un administrateur ? »
   Le compteur saute les questions cachées (une question `display: none` ne compte pas). */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form { counter-reset: iq-question; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form [data-question] { counter-increment: iq-question; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form [data-question]::before { content: counter(iq-question) ". "; }

/* ─── La boîte d'une personne ─────────────────────────────────────────────────────────────────────────── */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.director-entry, .corporate-shareholder-entry) {
    border: 1px solid var(--iq-trait) !important;
    border-radius: var(--iq-personne-rayon) !important;
    box-shadow: none !important;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.director-form, .corp-sh-form) {
    padding: 16px !important;
    background: #fff !important;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.director-form, .corp-sh-form) > div:first-child {
    margin-bottom: var(--iq-avant-trait);
    padding-bottom: 14px;
    border-color: var(--iq-trait);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.director-form, .corp-sh-form) h3,
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.director-name-display, .corp-sh-name-display) {
    font: var(--iq-titre) !important;
    color: var(--iq-texte);
}
/* Identité · Rôle · Adresse : un intertitre sobre et un séparateur de 1 px entre les blocs */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form .director-section,
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .corp-sh-form h4 {
    font: var(--iq-titre) !important;
    color: var(--iq-texte);
    text-transform: none;
    letter-spacing: 0;
    border-left: 0;
    padding-left: 0;
    margin-bottom: 4px;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form > .space-y-8 > * + * {
    margin-top: var(--iq-avant-trait);
    padding-top: var(--iq-apres-trait);
    border-top: 1px solid var(--iq-trait);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .director-form .director-section + .text-xs {
    font: var(--iq-aide);
    color: var(--iq-doux);
    margin: 0 0 var(--iq-question-ecart);
}

/* Rôle & statut : la grille des trois questions, puis ce que les « Oui » ouvrent — les postes, le pourcentage —
   l'un sous l'autre (la carte de 767 px n'a plus la place des deux colonnes d'avant). */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-roles { flex-direction: column; flex-wrap: nowrap; gap: var(--iq-avant-trait); }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-roles > div { flex: none; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-roles > div + div > * + * { margin-top: var(--iq-avant-trait); }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .roles-group > label.block {
    font: var(--iq-question) !important;
    color: var(--iq-texte);
    margin-bottom: 4px;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .roles-group > .grid { row-gap: 0; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .roles-group > .grid > label {
    align-items: center;
    gap: var(--iq-rond-ecart);
    min-height: var(--iq-choix-haut);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .roles-group > .grid > label > span {
    font: var(--iq-choix);
    color: var(--iq-texte);
    margin-left: 0;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .roles-group > .grid > label > input { margin-top: 0; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .shareholder-details label { font: var(--iq-libelle); color: var(--iq-texte); }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .fondateur-contact-note { font: var(--iq-aide); color: var(--iq-doux); max-width: none; }

/* La société actionnaire : plus de dégradé ni de boîtes dans la boîte */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .corp-sh-form .rounded-xl.border {
    border: 0;
    padding: 0;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) [data-corp-manuel] { color: var(--iq-bleu); font-size: 14px; }

/* ─── Boutons ─────────────────────────────────────────────────────────────────────────────────────────── */
/* Principal : la pilule bleue pleine largeur. `display` n'est pas touché (`.hidden` doit continuer de cacher). */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.wizard-step, .form-step, [data-form-submit-row]) .btn-primary:is(.next-section, #org-next-btn, [data-form-next], [data-form-save]) {
    /* La moitié de la carte, centré — la largeur de « Continuer » de la fenêtre de démarrage (Ilyes, 24-10). */
    width: min(100%, var(--iq-bouton-largeur));
    justify-self: center;
    margin-inline: auto;
    height: var(--iq-bouton-haut);
    min-height: var(--iq-bouton-haut) !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: var(--iq-bleu) !important;
    color: #fff !important;
    font: var(--iq-bouton) !important;
    box-shadow: none !important;
    transform: none !important;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.wizard-step, .form-step, [data-form-submit-row]) .btn-primary:is(.next-section, #org-next-btn, [data-form-next], [data-form-save]):hover { background: var(--iq-bleu-fonce) !important; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.wizard-step, .form-step, [data-form-submit-row]) .btn-primary:is(.next-section, #org-next-btn, [data-form-next], [data-form-save]):disabled { opacity: .5; }

/* Retour : un lien sous la pilule (même texte qu'avant) */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.wizard-step, .form-step) :is(.prev-section, #org-prev-btn, [data-form-prev]) {
    width: auto;
    min-height: 0 !important;
    padding: 6px 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--iq-bleu) !important;
    font: 500 14px/20px var(--iq-police) !important;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.wizard-step, .form-step) :is(.prev-section, #org-prev-btn, [data-form-prev])::before { content: "\2190\00a0"; }

/* La rangée des boutons d'étape : la pilule en haut ; dessous « ← Précédent » à gauche. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "suite suite" "retour .";
    row-gap: 6px;
    margin-top: var(--iq-avant-bouton);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-actions > :is(.next-section, [data-form-next], [data-form-save]) { grid-area: suite; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-actions > span:empty { display: none; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-actions > :is(.prev-section, [data-form-prev]) { grid-area: retour; justify-self: start; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-indicateur.hidden {
    display: block;
    white-space: nowrap;
    font: 400 13px/18px var(--iq-police);
    color: var(--iq-doux);
}
/* « Étape 1 sur 3 » : les deux nombres en gras (Ilyes, 24-10) — posés en <strong> par js/indicateur-etape.js. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-indicateur strong { font-weight: 600; }
/* En bas d'« Organisation », l'ancien compteur de diapos se tait : le compte est en haut (js/nav.js le peint encore). */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) #org-step-indicator { display: none; }

/* Organisation : la pilule, puis « Précédent » à gauche et « Étape n sur 7 » à droite */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-actions-org {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "suite suite" "retour indice";
    row-gap: 6px;
    max-width: none;
    margin-top: var(--iq-avant-bouton);
    padding-top: 0;
    border-top: 0;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-actions-org-droite { display: contents; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) #org-prev-btn { grid-area: retour; justify-self: start; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(#org-next-btn, #org-finish-btn) { grid-area: suite; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) #org-step-indicator {
    grid-area: indice;
    align-self: center;
    margin: 0;
    font: 400 13px/18px var(--iq-police);
    color: var(--iq-doux);
}

/* Secondaire — NOUVEAU dans le système, à valider par Ilyes : « Enregistrer » d'une personne */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.save-director-btn, .save-corp-sh-btn) {
    height: var(--iq-bouton-haut);
    min-height: var(--iq-bouton-haut) !important;
    padding: 0 18px !important;
    border: 1px solid var(--iq-bleu) !important;
    border-radius: 9999px !important;
    background: #fff !important;
    color: var(--iq-bleu) !important;
    font: var(--iq-bouton) !important;
    box-shadow: none !important;
    transform: none !important;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(.save-director-btn, .save-corp-sh-btn):hover { background: var(--iq-bleu-pale) !important; }

/* « + Ajouter un individu » / « + Entreprise existante » : des liens bleus, comme « + Ajouter une personne » */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) :is(#add-director-btn, #add-corporate-shareholder-btn) {
    width: auto;
    flex: none;
    min-height: 0 !important;
    padding: 6px 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: var(--iq-bleu) !important;
    font: 500 14px/20px var(--iq-police) !important;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-ajouts {
    flex-direction: row;
    gap: 20px;
    margin-bottom: 12px;
}

/* ─── Organisation interne : chaque diapo dans la carte, sans boîte imbriquée ──────────────────────────── */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .org-slide > .space-y-3 {
    max-width: none;
    margin: 0;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .org-slide h3 {
    font: var(--iq-titre) !important;
    color: var(--iq-texte);
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .org-slide .bg-white.rounded-lg.border,
.iq-questionnaire :is(#form-shell, .iq-carte-simple) [data-immatriculation-seulement].bg-white {
    border: 0;
    padding: 0 !important;   /* bat « #org-carousel .bg-white.p-6 { padding: 1rem !important } » (téléphone, form-inline.css) */
    box-shadow: none;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .org-slide :is(.text-xs, .text-sm.text-gray-500) { color: var(--iq-doux); }

/* Une question EN LIGNE (moteur, `en_ligne: true` — Ilyes, 24-10) : le libellé à gauche, le champ à droite, sur une
   ligne ; le message d'erreur sous le champ. Les bords droits des champs s'alignent d'une ligne à l'autre. Au téléphone,
   le libellé repasse au-dessus. */
@media (min-width: 640px) {
    /* ⛔ `:not(.hidden)` : une question conditionnelle fermée garde son `display: none` (24-10 : les champs de salaire
       restaient visibles sur « Non »). */
    .iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-en-ligne:not(.hidden) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--iq-ligne-champ);
        column-gap: 24px;
        align-items: center;
    }
    .iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-en-ligne > label { grid-column: 1; margin: 0 !important; }
    .iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-en-ligne > :not(label) { grid-column: 2; justify-self: end; width: 100%; }
    /* Un oui/non EN LIGNE (hors série) : ses ronds dans la colonne des champs, à droite (Ilyes, 24-10 : les salaires). */
    /* Une date en ligne prend la largeur des autres champs de la colonne (Ilyes, 24-10). */
    .iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-en-ligne > .form-datepicker { max-width: none; }
}
/* Après une série de oui/non, une question en ligne reprend de l'air (les salaires, 24-10). */
/* Un oui/non hors série garde ses ronds dans les colonnes « Oui » / « Non » de la série au-dessus (Ilyes, 24-10). */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-ouinon-ligne .iq-ouinon { justify-content: space-between; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-ouinon-ligne [role="radiogroup"] { gap: 0; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-ouinon-ligne [role="radiogroup"] > label { width: var(--iq-colonne-reponse); justify-content: center; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-ouinon-ligne [role="radiogroup"] > label > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-serie + .iq-ouinon-ligne { margin-top: var(--iq-avant-trait); }
/* Un montant est un CHAMP, sans flèches (Ilyes, 24-10 : « je ne veux pas de bouton d'augmentation »). */
.iq-questionnaire :is(#form-shell, .iq-carte-simple, .chg-form) input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple, .chg-form) input[type="number"]::-webkit-inner-spin-button,
.iq-questionnaire :is(#form-shell, .iq-carte-simple, .chg-form) input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Une liste du moteur sans choix montre son texte indicatif (`exemple`, « Annuelle ») en gris, comme un champ vide. */
.iq-questionnaire [data-form] #form-shell select:has(> option[value=""]:checked) { color: var(--iq-indice) !important; }
.iq-questionnaire [data-form] #form-shell select option { color: var(--iq-texte); }

/* ─── Les bulles d'information : DEUX variantes, un seul « i », une seule bulle ──────────────────────────────
   Ilyes, 2026-10-22 : « uniquement ces deux styles de bulle […] avec le "i" ou sans le "i" », le « i » « avec le
   même style et la même position à chaque fois par rapport à son texte », la bulle au style de « Remboursable à
   100 % » du site Docs (c'est `.iq-bulle`, css/style.css), à largeur fixe.
   • SANS « i » : le texte d'un champ ouvre sa bulle (js/tooltips.js).
   • AVEC « i » : le « i » suit le texte à `--iq-i-ecart`, centré sur la ligne, et le texte comme le « i » ouvrent la
     bulle (js/bulles-questions.js). Trois endroits le portent, UN dessin : la pastille du sous-titre d'étape (`.iq-i`),
     le « En savoir plus » d'un titre (redessiné en « i », son texte reste pour le lecteur d'écran), et une question
     qui porte une note (`.iq-a-note` … `.iq-note`, la note devient la bulle). */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-i,
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-titre-bulle .tooltip-text-trigger::before,
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-a-note:has(.iq-note:not(.hidden)) :is([data-question], [data-note-cible]):not([data-note-cible="sans-i"])::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--iq-i-diametre);
    height: var(--iq-i-diametre);
    margin: 0 0 0 var(--iq-i-ecart);
    padding: 0;
    border: var(--iq-rond-bord) solid var(--iq-bleu);
    border-radius: 50%;
    background: transparent;
    color: var(--iq-bleu);
    font: var(--iq-i-graisse) var(--iq-i-lettre)/1 var(--iq-police);
    font-style: normal;
    letter-spacing: 0;
    text-decoration: none;
    vertical-align: middle;
    position: relative;
    top: var(--iq-i-aplomb);
    cursor: pointer;
    transition: background-color .15s;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-titre-bulle .tooltip-text-trigger::before,
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-a-note:has(.iq-note:not(.hidden)) :is([data-question], [data-note-cible]):not([data-note-cible="sans-i"])::after { content: "i"; }
/* ⛔ 24-10 (Ilyes) : PAS de « i » sur une question du moteur (taxes…) — survoler son texte ouvre déjà la bulle. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) [data-question][data-tooltip] { cursor: help; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-i:hover,
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-i[aria-expanded='true'],
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-titre-bulle:hover .tooltip-text-trigger::before,
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-a-note :is([data-question], [data-note-cible]):hover::after { background: var(--iq-bleu-pale); }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-i:focus-visible { outline: 3px solid var(--iq-anneau-rond); outline-offset: 2px; }

/* « En savoir plus » : le mot reste dans la page (lecteur d'écran), seul le « i » se voit, collé au titre. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-titre-bulle { column-gap: 0; align-items: baseline; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-titre-bulle .tooltip-text-trigger {
    font-size: 0 !important;
    line-height: normal;
    margin: 0 !important;
    text-decoration: none;
    color: transparent;
}
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-titre-bulle :is(h3, .tooltip-text-trigger) { cursor: help; }
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-a-note:has(.iq-note:not(.hidden)) :is([data-question], [data-note-cible]) { cursor: help; }

/* La note d'une question : hors de la vue, lue par les lecteurs d'écran, affichée dans la bulle au survol. */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) .iq-note {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* La bulle elle-même (#tooltip, hors du formulaire) : largeur FIXE, comme sur le site Docs. */
.iq-questionnaire #tooltip.custom-tooltip {
    width: min(var(--iq-bulle-largeur), calc(100vw - 32px));
    max-width: none;
}

/* ─── Les fenêtres : « Démarrer votre entreprise » et « Reprendre une demande » ─────────────────────────────
   Mêmes composants que l'assistant (champ, case, pilule) ; la facture de la fenêtre garde son dessin. Aucun
   identifiant, aucun texte, aucun comportement ne change (Turnstile, case d'avertissement, envoi du code). */
.iq-questionnaire :is(#entity-modal, #resume-modal) > div {
    font-family: var(--iq-police);
    -webkit-font-smoothing: antialiased;
    border-radius: var(--iq-carte-rayon) !important;
}
.iq-questionnaire :is(#entity-modal, #resume-modal) :is(#modal-title, #resume-modal-title) {
    font: var(--iq-titre) !important;
    color: var(--iq-texte);
}
.iq-questionnaire :is(#entity-modal, #resume-modal) :is(#btn-continue-entity, .btn-incopty) {
    width: 100%;
    height: var(--iq-bouton-haut);
    min-height: var(--iq-bouton-haut);
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: var(--iq-bleu) !important;
    color: #fff !important;
    font: var(--iq-bouton) !important;
    box-shadow: none !important;
    transform: none !important;
    gap: 8px;
}
/* Le SEUL bouton qui change (Ilyes, 24-10) : « Continuer », qui mène au formulaire — la moitié de son ancienne largeur
   (767 → 384 px), centré. Rien d'autre de la fenêtre ne bouge. */
.iq-questionnaire #entity-modal #btn-continue-entity { max-width: var(--iq-bouton-largeur); margin-inline: auto; }
.iq-questionnaire :is(#entity-modal, #resume-modal) :is(#btn-continue-entity, .btn-incopty):hover:not(:disabled) { background: var(--iq-bleu-fonce) !important; }
.iq-questionnaire :is(#entity-modal, #resume-modal) :is(#btn-continue-entity, .btn-incopty):disabled { opacity: .45; }
.iq-questionnaire :is(#entity-modal, #resume-modal, #form-shell) .case-cf > span { font: var(--iq-aide); color: var(--iq-doux); }
.iq-questionnaire :is(#entity-modal, #resume-modal, #form-shell) .case-cf > span a { color: var(--iq-bleu); }

/* ─── Total des actions ───────────────────────────────────────────────────────────────────────────────── */
.iq-questionnaire :is(#form-shell, .iq-carte-simple) #total-shares {
    font: 600 16px/22px var(--iq-police);
    color: var(--iq-bleu);
}

/* ─── Le bleu du formulaire, partout où le client le voit (Ilyes, 24-10) ─────────────────────────────────────────
   « Payer » prend le bleu de « Suivant » (au lieu du #007AB3 de css/style.css) ; désactivé, il garde son lilas
   (css/form-inline.css, `#submit-payment:disabled`) — d'où le `:not(:disabled)`. La boîte « Nous utilisons des
   cookies » (js/consent.js, styles en ligne : d'où les !important) passe du marine au même bleu. Couleur seule. */
.iq-questionnaire #submit-payment:not(:disabled) {
    background: var(--iq-bleu) !important;
    border-color: var(--iq-bleu) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}
.iq-questionnaire #submit-payment:not(:disabled):hover { background: var(--iq-bleu-fonce) !important; }
.iq-questionnaire #iq-consent #iq-consent-accept { background: var(--iq-bleu) !important; border-color: var(--iq-bleu) !important; }
.iq-questionnaire #iq-consent #iq-consent-refuse { color: var(--iq-bleu) !important; }
.iq-questionnaire #iq-consent a { color: var(--iq-bleu) !important; }

/* ─── « Finaliser la commande » : plus large, moins haute, juste sous le pli (Ilyes, 24-10) ───────────────────────
   La section reste SOUS le pli (règle de css/form-inline.css : la zone du formulaire remplit l'écran) mais commence
   pile au bas de l'écran — plus de marge de 48 px ni de 40 px de rembourrage avant son titre. Sur ordinateur, Stripe et
   la facture prennent chacun une moitié d'une carte de 80 rem (au lieu de 7/12 × 77 % et 5/12 de 72 rem) ; la facture
   est moins haute : lignes, totaux et marges resserrés. Couleur et mise en page seulement — aucun identifiant, aucun
   texte, aucun comportement du paiement ne change. */
@media (min-width: 1024px) {
    .iq-questionnaire #payment-container {
        /* ⛔ `width: 100%` : dans la grille de <main>, des marges `auto` RÉTRÉCISSENT la carte à son contenu — sans le
           message d'erreur (le cas réel d'un client), elle tombait à 976 px au lieu de 80 rem (mesuré le 24-10). */
        width: 100%;
        max-width: var(--iq-paiement-largeur);
        margin-top: 0;
        padding: 24px 40px 32px;
    }
    .iq-questionnaire #payment-container > .grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 40px;
    }
    .iq-questionnaire #payment-container > .grid > * { grid-column: auto; }
    .iq-questionnaire #payment-container .paiement-colonne { width: 100%; margin-left: 0; }
    .iq-questionnaire #payment-container .paiement-titre { margin-left: 0; margin-bottom: 24px; }
    .iq-questionnaire #payment-container .paiement-facture { padding: 24px 28px; }
}
/* La facture, au style des cartes de forfait (Ilyes, 24-10) : fond bleu très pâle, coins de 24 px, ombre douce ; lignes
   aérées ; pas de trait au-dessus d'« Ajouter un service ». Sur ordinateur, elle prend la HAUTEUR de la colonne Stripe
   (la rangée de la grille l'étire) et « Payer » descend en bas. */
.iq-questionnaire #payment-container .paiement-facture {
    /* Un peu plus claire (Ilyes, 24-10 : « le thème est légèrement gris ») : #f4f7fd → #fafcff, trait #dbe4f3 → #e5ebf5. */
    background: #fafcff !important;
    border: 1px solid #e5ebf5 !important;
    border-radius: 24px !important;
    box-shadow: 0 1px 2px rgba(11, 24, 71, 0.04), 0 18px 40px -12px rgba(11, 24, 71, 0.14) !important;
}
.iq-questionnaire #payment-container .paiement-facture > .mb-6 { margin-bottom: 18px; }
.iq-questionnaire #payment-container #payment-product-details { margin-bottom: 22px; }
.iq-questionnaire #payment-container #payment-product-details > :not([hidden]) ~ :not([hidden]) { margin-top: 2px; }
.iq-questionnaire #payment-container #payment-product-details > .mb-4 { margin-bottom: 12px; }
.iq-questionnaire #payment-container #payment-product-details .facture-ligne { padding-block: 7px; }
.iq-questionnaire #payment-container #payment-product-details > .border-b.pt-2 { border-bottom: 0; }
.iq-questionnaire #payment-container .paiement-facture .border-t.pt-6 { padding-top: 20px; }
.iq-questionnaire #payment-container .paiement-facture .border-t.pt-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 10px; }
.iq-questionnaire #payment-container .paiement-facture .my-4 { margin-block: 14px; }
@media (min-width: 1024px) {
    /* La facture un peu moins large (Ilyes, 24-10) : 30 rem au plus, calée à droite de sa colonne. */
    .iq-questionnaire #payment-container .paiement-colonne + * { display: flex; justify-content: flex-end; }
    .iq-questionnaire #payment-container .paiement-facture { max-width: 30rem; }
    .iq-questionnaire #payment-container .paiement-facture {
        position: static;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .iq-questionnaire #payment-container #submit-payment { margin-top: auto; }
    /* L'air au-dessus de « Payer » que `mt-6` donnait : posé sous les totaux, il tient même quand la facture est étirée. */
    .iq-questionnaire #payment-container .paiement-facture > .border-t { margin-bottom: 24px; }
}


/* ─── Les formulaires du PORTAIL (livre des minutes, changements, invitations…) : le même système (Ilyes, 24-10) ──────
   Ils sont construits en JS (js/portal-livre.js, js/portal-changements.js) avec leurs classes à eux : `.chg-form`
   (la carte), `.login-label` (le libellé), `.chg-input` (le champ), `.btn-incopty` (l'envoi). On ne crée RIEN : ces
   classes prennent les jetons du tunnel — les champs par les règles partagées plus haut (`.chg-form` ajouté à leur
   portée), la carte, le titre, le libellé et la pilule ici. Aucun identifiant, aucun texte, aucun JS ne change. */
.iq-questionnaire .chg-form { font-family: var(--iq-police); }
.iq-questionnaire .chg-form .login-label {
    display: block;
    font: var(--iq-libelle) !important;
    color: var(--iq-texte);
    margin-bottom: 6px;
}
.iq-questionnaire .livre-carte-geste.chg-form {
    max-width: var(--iq-carte-largeur);
    border: 1px solid var(--iq-trait);
    border-radius: var(--iq-carte-rayon);
    box-shadow: none;
}
.iq-questionnaire .livre-carte-geste .livre-carte-tete { padding: 20px 17px 0; border-bottom: 0; }
.iq-questionnaire .livre-carte-geste .livre-carte-titre { font: var(--iq-titre); color: var(--iq-texte); }
.iq-questionnaire .livre-carte-geste .livre-carte-fermer { font: 400 14px/20px var(--iq-police); color: var(--iq-bleu); }
.iq-questionnaire .livre-carte-geste .livre-carte-fermer:hover { background: none; text-decoration: underline; }
.iq-questionnaire .livre-carte-geste .livre-carte-corps { padding: var(--iq-entete-apres) 17px 0; }
.iq-questionnaire .livre-carte-geste .livre-etape-titre { font: var(--iq-question); color: var(--iq-texte); }
.iq-questionnaire .livre-carte-geste .livre-geste-case { font: var(--iq-choix); color: var(--iq-texte); }
.iq-questionnaire .chg-form input[type="checkbox"], .iq-questionnaire .chg-form input[type="radio"] { accent-color: var(--iq-bleu); }
/* L'envoi : la pilule bleue de « Suivant », centrée, à la largeur de « Continuer ». */
.iq-questionnaire .livre-carte-geste .livre-carte-pied {
    justify-content: center;
    border-top: 0;
    background: none;
    padding: var(--iq-avant-bouton) 17px 20px;
}
/* L'apparence de la pilule vaut pour TOUT envoi d'un `.chg-form` (pièces d'identité…), hors la rangée d'invitation
   où le bouton est soudé au champ ; la largeur de « Continuer », elle, ne vaut que dans le pied d'une carte du livre. */
.iq-questionnaire .chg-form .livre-carte-pied .btn-incopty:is([type="submit"], :not([type])) { width: min(100%, var(--iq-bouton-largeur)); }
.iq-questionnaire .chg-form :not(.livre-invitation-rangee) > .btn-incopty[type="submit"],
.iq-questionnaire .chg-form .livre-carte-pied .btn-incopty:not([type]) {
    height: var(--iq-bouton-haut);
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: var(--iq-bleu) !important;
    color: #fff !important;
    font: var(--iq-bouton) !important;
    box-shadow: none !important;
}
.iq-questionnaire .chg-form :not(.livre-invitation-rangee) > .btn-incopty:hover:not(:disabled) { background: var(--iq-bleu-fonce) !important; }
/* Le « i » d'un titre de carte : celui du tunnel (bleu), pas le gris d'avant. */
.iq-questionnaire .livre-carte-geste .livre-carte-tete .iq-i { border-color: var(--iq-bleu); color: var(--iq-bleu); }

/* ─── Un formulaire SANS étapes du moteur (exercice financier…) : la même carte (Ilyes, 24-10) ───────────────────────
   `iq-carte-simple` (build.js) remplace #form-shell : mêmes règles, sans rail ni remontée. Son titre est au-dessus de
   la carte (la page) ; l'en-tête d'étape, vide, ne laisse pas de trou ; la légende de la section prend le titre d'étape. */
.iq-questionnaire .iq-carte-simple .iq-entete:has([data-form-etape-titre]:empty) { display: none; }
.iq-questionnaire .iq-carte-simple fieldset > legend { font: var(--iq-titre); color: var(--iq-texte); margin-bottom: 20px; }
.iq-questionnaire .iq-carte-simple > .bg-white { max-width: var(--iq-carte-largeur); margin-inline: auto; }

/* ─── La connexion /compte : la carte de connexion prend le système (Ilyes, 24-10, boucle de refonte) ───────────────
   Mêmes jetons que le tunnel : libellé 14 px sans gras, champ 16 px au trait gris et au rayon de 10 px (la place des
   icônes à gauche et à droite reste celle de css/style.css : seules les marges verticales changent), halo bleu au focus,
   pilule bleue « Se connecter », liens bleus. Le portail des comptables (`body.login-cabinet`) garde son thème : ses
   règles, plus précises, l'emportent. Aucun identifiant, texte ni JS ne change. */
.iq-questionnaire body:not(.login-cabinet) .login-card .login-label { font: var(--iq-libelle); color: var(--iq-texte); }
.iq-questionnaire body:not(.login-cabinet) .login-card .login-input {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-family: var(--iq-police);
    font-size: 16px;
    line-height: 22px;
    color: var(--iq-texte);
    border: 1px solid var(--iq-trait) !important;
    border-radius: var(--iq-champ-rayon) !important;
}
.iq-questionnaire body:not(.login-cabinet) .login-card .login-input::placeholder { color: var(--iq-indice); }
.iq-questionnaire body:not(.login-cabinet) .login-card .login-input:focus {
    border-color: var(--iq-bleu) !important;
    box-shadow: 0 0 0 3px var(--iq-anneau);
}
.iq-questionnaire body:not(.login-cabinet) .login-card .btn-incopty {
    height: var(--iq-bouton-haut);
    min-height: var(--iq-bouton-haut);
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: var(--iq-bleu) !important;
    color: #fff !important;
    font: var(--iq-bouton) !important;
    box-shadow: none !important;
}
.iq-questionnaire body:not(.login-cabinet) .login-card .btn-incopty:hover:not(:disabled) { background: var(--iq-bleu-fonce) !important; }
.iq-questionnaire body:not(.login-cabinet) .login-card .login-link { color: var(--iq-bleu); }

/* ─── Page de succès : « Suivez votre dossier en ligne » (courriel → code) au style du système (24-10) ─────────────── */
.iq-questionnaire [data-acct] { border-color: var(--iq-trait); border-radius: var(--iq-carte-rayon); font-family: var(--iq-police); }
.iq-questionnaire [data-acct] h3 { font: var(--iq-titre); color: var(--iq-texte); }
.iq-questionnaire [data-acct] label { font: var(--iq-libelle); color: var(--iq-texte); }
.iq-questionnaire [data-acct] input[data-acct-email] {
    font-size: 16px; line-height: 22px; padding: 8px 12px; color: var(--iq-texte);
    border: 1px solid var(--iq-trait); border-radius: var(--iq-champ-rayon); background: #fff;
}
.iq-questionnaire [data-acct] :is(input[data-acct-email], .otp-cell):focus { outline: none; border-color: var(--iq-bleu); box-shadow: 0 0 0 3px var(--iq-anneau); }
.iq-questionnaire [data-acct] .otp-cell { border-color: var(--iq-trait); border-radius: var(--iq-champ-rayon); }
.iq-questionnaire [data-acct] .btn-incopty {
    height: var(--iq-bouton-haut); padding: 0 20px !important; border: 0 !important; border-radius: 9999px !important;
    background: var(--iq-bleu) !important; color: #fff !important; font: var(--iq-bouton) !important; box-shadow: none !important;
}
.iq-questionnaire [data-acct] .btn-incopty:hover:not(:disabled) { background: var(--iq-bleu-fonce) !important; }
.iq-questionnaire [data-acct] [data-acct-resend] { color: var(--iq-bleu); }