/**
 * com_ifsgestclient — feuille de style du questionnaire de transition.
 * Tokens de design + BEM, alignés sur le design system du template
 * `iformasite` (variables --ifs-*, avec valeurs de repli si absentes).
 * Mode sombre automatique via les tokens du template.
 */

.ifsgc {
    --ef-primaire: var(--ifs-primary, #38a9db);
    --ef-primaire-fonce: var(--ifs-primary-dark, #2a8ab5);
    --ef-primaire-clair: var(--ifs-primary-light, #5cbde5);
    --ef-primaire-rgb: var(--ifs-primary-rgb, 56, 169, 219);
    --ef-accent: var(--ifs-secondary, #97be0b);
    --ef-accent-rgb: var(--ifs-secondary-rgb, 151, 190, 11);
    --ef-encre: var(--ifs-text, #1a1a2e);
    --ef-douce: var(--ifs-text-muted, #6b7280);
    --ef-inverse: var(--ifs-text-inverse, #ffffff);
    --ef-fond: var(--ifs-bg-alt, #f7f9fc);
    --ef-surface: var(--ifs-bg-elevated, #ffffff);
    --ef-bord: var(--ifs-border, #e5e7eb);
    --ef-rayon: var(--ifs-radius-lg, 16px);
    --ef-rayon-sm: var(--ifs-radius-md, 10px);
    --ef-rayon-pill: var(--ifs-radius-full, 9999px);
    --ef-ombre: var(--ifs-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 7%), 0 2px 4px -2px rgb(0 0 0 / 5%));
    --ef-ombre-l: var(--ifs-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 8%), 0 4px 6px -4px rgb(0 0 0 / 4%));
    --ef-espace: 1rem;
    --ef-espace-l: 1.75rem;
    --ef-degrade: linear-gradient(135deg, var(--ef-primaire), var(--ef-primaire-fonce));
    --ef-degrade-marque: linear-gradient(90deg, var(--ef-primaire), var(--ef-accent));

    max-width: 66rem;
    margin-inline: auto;
    padding: var(--ef-espace);
    color: var(--ef-encre);
    line-height: 1.65;
}

/* ---- Liens : jamais de soulignement, couleur de marque ---- */

.ifsgc a:not(.ifsgc-btn) {
    color: var(--ef-primaire);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s ease;
}

.ifsgc a:not(.ifsgc-btn):hover {
    color: var(--ef-primaire-fonce);
}

/* ---- En-tête ---- */

.ifsgc__hero {
    text-align: center;
    padding-block: var(--ef-espace-l) calc(var(--ef-espace-l) * 1.25);
}

.ifsgc__title {
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 .6em;
}

/* Soulignement dégradé signature (bleu → vert de la marque). */
.ifsgc__title::after {
    content: "";
    display: block;
    width: 5.5rem;
    height: 4px;
    border-radius: var(--ef-rayon-pill);
    background: var(--ef-degrade-marque);
    margin: .55em auto 0;
}

.ifsgc__lead {
    font-size: 1.15rem;
    color: var(--ef-douce);
    max-width: 44rem;
    margin-inline: auto;
}

/* ---- Cartes ---- */

.ifsgc-card {
    background: var(--ef-surface);
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon);
    padding: var(--ef-espace-l);
    margin-block-end: var(--ef-espace-l);
    box-shadow: var(--ef-ombre);
}

.ifsgc-card h2 {
    margin-block-start: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.ifsgc-card h2::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    border-radius: var(--ef-rayon-pill);
    background: var(--ef-degrade-marque);
    margin-block-start: .45rem;
}

/* Carte du code d'accès (centrée) : trait centré lui aussi. */
.ifsgc-card--code h2::after {
    margin-inline: auto;
}

.ifsgc-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ef-espace);
    flex-wrap: wrap;
}

/* Carte d'accès : centrée, resserrée, liseré dégradé en tête. */
.ifsgc-card--code {
    position: relative;
    overflow: hidden;
    max-width: 38rem;
    margin-inline: auto;
    text-align: center;
    padding: calc(var(--ef-espace-l) * 1.25) var(--ef-espace-l);
    box-shadow: var(--ef-ombre-l);
}

.ifsgc-card--code::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--ef-degrade-marque);
}

.ifsgc-card--code > p {
    color: var(--ef-douce);
    max-width: 30rem;
    margin-inline: auto;
}

.ifsgc-card--confirmation {
    text-align: center;
}

/* ---- Formulaires ---- */

.ifsgc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ef-espace);
}

/* Tablette : 2 colonnes pour garder des champs lisibles. */
@media (max-width: 1023px) {
    .ifsgc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ifsgc-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ifsgc-field--full {
    grid-column: 1 / -1;
}

.ifsgc-field label,
.ifsgc-form-code label,
.ifsgc-fieldset legend {
    font-weight: 600;
}

.ifsgc-form-code {
    margin-block-start: var(--ef-espace);
}

.ifsgc-input {
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon-sm);
    padding: .65rem .85rem;
    font: inherit;
    color: inherit;
    background: var(--ef-surface);
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ifsgc-input:hover {
    border-color: var(--ef-primaire-clair);
}

.ifsgc-input[readonly] {
    background: var(--ef-fond);
    color: var(--ef-douce);
    cursor: default;
}

.ifsgc-input[readonly]:hover {
    border-color: var(--ef-bord);
}

.ifsgc-input:focus-visible,
.ifsgc-btn:focus-visible,
.ifsgc-radio input:focus-visible + span {
    outline: 3px solid var(--ef-primaire);
    outline-offset: 2px;
}

.ifsgc-input--code {
    font-size: 1.3rem;
    letter-spacing: .18em;
    text-align: center;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    border-radius: var(--ef-rayon-pill);
    border-width: 2px;
    padding: .7rem 1.25rem;
}

.ifsgc-input--code:focus-visible {
    border-color: var(--ef-primaire);
    box-shadow: 0 0 0 4px rgba(var(--ef-primaire-rgb), 0.15);
    outline: none;
}

.ifsgc-input--code::placeholder {
    letter-spacing: .18em;
    color: var(--ef-douce);
    opacity: .55;
}

.ifsgc-form-code__row {
    display: flex;
    gap: .75rem;
    margin-block-start: .6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.ifsgc-form-code__row .ifsgc-input {
    flex: 1 1 14rem;
}

.ifsgc-aide {
    color: var(--ef-douce);
    font-size: .9rem;
    margin-block-start: var(--ef-espace);
}

.ifsgc-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--ef-espace);
}

.ifsgc-radio-row {
    display: flex;
    gap: var(--ef-espace);
    flex-wrap: wrap;
    margin-block-start: .5rem;
}

.ifsgc-radio {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon-pill);
    padding: .5rem 1.1rem;
    cursor: pointer;
    background: var(--ef-surface);
    transition: border-color .15s ease, background-color .15s ease;
}

.ifsgc-radio:hover {
    border-color: var(--ef-primaire-clair);
}

.ifsgc-radio:has(input:checked) {
    border-color: var(--ef-primaire);
    background: rgba(var(--ef-primaire-rgb), 0.10);
    font-weight: 600;
}

/* ---- Boutons (alignés sur les .btn du template : pill + dégradé + lift) ---- */

.ifsgc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 2px solid transparent;
    border-radius: var(--ef-rayon-pill);
    padding: .7rem 1.6rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease,
        transform .15s ease, box-shadow .15s ease;
}

/* L'attribut hidden doit primer sur le display des boutons (JS Précédent/Suivant). */
.ifsgc-btn[hidden] {
    display: none;
}

/* État désactivé : le bouton « Payer » reste inactif tant que le pack et les
   coordonnées ne sont pas renseignés — il doit le montrer clairement. */
.ifsgc-btn:disabled,
.ifsgc-btn[disabled] {
    background: var(--ef-surface-2, #eef1f6);
    border-color: var(--ef-bord, #d9dfea);
    color: var(--ef-texte-doux, #8a94a8);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: .85;
}
.ifsgc-btn:disabled:hover,
.ifsgc-btn[disabled]:hover {
    background: var(--ef-surface-2, #eef1f6);
    border-color: var(--ef-bord, #d9dfea);
    color: var(--ef-texte-doux, #8a94a8);
    transform: none;
    box-shadow: none;
}

/* Bande d'avantages compacte sous les packs (remplace l'argumentaire long). */
.ifsgc-avantages {
    list-style: none;
    margin: var(--ef-espace-l, 1.5rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ef-espace, 1rem);
}
.ifsgc-avantage {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
}
.ifsgc-avantage__icone {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--ef-primaire-pale, #eaf1ff);
    color: var(--ef-primaire, #2a6df4);
}
.ifsgc-avantage__icone svg { width: 1.25rem; height: 1.25rem; }
.ifsgc-avantage__texte { font-size: .95rem; line-height: 1.4; color: var(--ef-texte-doux, #5a6478); }
.ifsgc-avantage__texte strong { display: block; color: var(--ef-texte, #172033); }

@media (max-width: 780px) {
    .ifsgc-avantages { grid-template-columns: 1fr; gap: .8rem; }
}

/* Solde confirmé sur la page de remerciement. */
.ifsgc-merci__solde {
    max-width: 32rem;
    margin: var(--ef-espace) auto 0;
    padding: .85rem 1.1rem;
    border-radius: var(--ef-rayon, 12px);
    background: #e8f7ee;
    border: 1px solid #b7e4c7;
    color: #1b7a43;
    font-weight: 600;
    text-align: center;
}
.ifsgc-merci__solde strong { font-size: 1.15em; }

@media (prefers-color-scheme: dark) {
    .ifsgc-merci__solde { background: #16301f; border-color: #245c38; color: #7ee2a4; }
}

.ifsgc-btn--primary {
    background: var(--ef-degrade);
    color: var(--ef-inverse);
    border-color: var(--ef-primaire);
}

.ifsgc-btn--primary:hover {
    background: linear-gradient(135deg, var(--ef-primaire-clair), var(--ef-primaire));
    border-color: var(--ef-primaire-clair);
    color: var(--ef-inverse);
    transform: translateY(-2px);
    box-shadow: var(--ef-ombre);
}

.ifsgc-btn--bloc {
    display: flex;
    width: 100%;
    text-align: center;
    margin-block-start: var(--ef-espace-l);
}

/* Bouton discret en forme de pastille (ex-lien souligné). */
.ifsgc-btn--link {
    background: transparent;
    border: 1px solid var(--ef-bord);
    color: var(--ef-primaire);
    text-decoration: none;
    padding: .4rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    border-radius: var(--ef-rayon-pill);
}

.ifsgc-btn--link:hover {
    border-color: var(--ef-primaire);
    background: rgba(var(--ef-primaire-rgb), 0.10);
    color: var(--ef-primaire-fonce);
}

.ifsgc-btn--ghost {
    background: transparent;
    color: var(--ef-primaire);
    border-color: var(--ef-bord);
}

.ifsgc-btn--ghost:hover {
    border-color: var(--ef-primaire);
    background: rgba(var(--ef-primaire-rgb), 0.10);
}

/* ---- Notices ---- */

.ifsgc-notice {
    border-radius: var(--ef-rayon-sm);
    padding: .75rem 1rem;
    margin-block: var(--ef-espace);
}

/* Confirmation discrète : simple ligne en petit, coche verte, sans encadré. */
.ifsgc-notice--ok {
    background: none;
    border: 0;
    padding: 0;
    margin-block: var(--ef-espace) var(--ef-espace-l);
    color: var(--ef-douce);
    font-size: .875rem;
}

.ifsgc-notice--ok::before {
    content: "✓ ";
    color: var(--ef-accent);
    font-weight: 700;
}

/* ---- Listes ---- */

.ifsgc-liste {
    padding-inline-start: 1.25rem;
}

.ifsgc-liste li {
    margin-block-end: .4rem;
}

.ifsgc-liste--atouts {
    list-style: none;
    padding: 0;
    margin-block-start: var(--ef-espace-l);
}

.ifsgc-liste--atouts li::before {
    content: "✓ ";
    color: var(--ef-accent);
    font-weight: 700;
}

/* ---- Tarifs Hermès ---- */

.ifsgc-card--hermes {
    border-color: rgba(var(--ef-primaire-rgb), 0.45);
}

.ifsgc-tarifs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ef-espace);
    margin-block: var(--ef-espace-l);
}

.ifsgc-tarifs--trois {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
    .ifsgc-tarifs--trois {
        grid-template-columns: 1fr;
    }
}

/* Carte-formule cliquable (sondage) : toute la carte sélectionne la formule. */
.ifsgc-tarif--choix {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.ifsgc-tarif--choix .ifsgc-tarif__note {
    flex: 1;
}

/* Pastille de sélection pleine largeur, radio natif masqué, coche au choix. */
.ifsgc-tarif__choisir {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    font-size: .95rem;
    padding-block: .6rem;
    margin-block-start: var(--ef-espace);
}

.ifsgc-tarif__choisir input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ifsgc-tarif__choisir span::before {
    content: "○";
    margin-inline-end: .5rem;
    opacity: .55;
}

.ifsgc-tarif--choix:has(input:checked) {
    border: 2px solid var(--ef-primaire);
    background: rgba(var(--ef-primaire-rgb), 0.08);
    box-shadow: var(--ef-ombre);
}

.ifsgc-tarif--choix:has(input:checked) .ifsgc-tarif__choisir {
    border-color: var(--ef-primaire);
    background: var(--ef-degrade);
    color: var(--ef-inverse);
}

.ifsgc-tarif--choix:has(input:checked) .ifsgc-tarif__choisir span::before {
    content: "✓";
    opacity: 1;
}

.ifsgc-tarif--choix:has(input:focus-visible) {
    outline: 3px solid var(--ef-primaire);
    outline-offset: 2px;
}

/* ---- Cartes sélectionnables dans le contenu riche (choix + outils) ---- */

.ifsgc-uichoice {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ifsgc-choix__carte--select,
.ifsgc-outil--select {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.ifsgc-choix__carte--select:has(.ifsgc-uichoice:checked),
.ifsgc-outil--select:has(.ifsgc-uichoice:checked) {
    border: 2px solid var(--ef-primaire);
    background: rgba(var(--ef-primaire-rgb), 0.08);
    box-shadow: var(--ef-ombre);
}

.ifsgc-choix__carte--select:has(.ifsgc-uichoice:focus-visible),
.ifsgc-outil--select:has(.ifsgc-uichoice:focus-visible) {
    outline: 3px solid var(--ef-primaire);
    outline-offset: 2px;
}

/* Indicateur d'état en bas de carte : ○ non retenu / ✓ retenu (dégradé).
   Ancré au bas de la carte (flex) avec une vraie respiration au-dessus. */
.ifsgc-carte__etat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    align-self: center;
    margin-block-start: auto;
    padding: .45rem 1.2rem;
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon-pill);
    font-size: .9rem;
    font-weight: 600;
    color: var(--ef-douce);
}

/* La marge auto ancre en bas ; on garantit un minimum d'air au-dessus. */
.ifsgc-choix__carte--select .ifsgc-choix__texte,
.ifsgc-outil--select .ifsgc-outil__desc {
    margin-block-end: var(--ef-espace);
}

.ifsgc-carte__etat::before {
    content: "○";
    opacity: .55;
}

:has(> .ifsgc-uichoice:checked) > .ifsgc-carte__etat,
.ifsgc-choix__carte--select:has(.ifsgc-uichoice:checked) .ifsgc-carte__etat,
.ifsgc-outil--select:has(.ifsgc-uichoice:checked) .ifsgc-carte__etat {
    background: var(--ef-degrade);
    border-color: var(--ef-primaire);
    color: var(--ef-inverse);
}

.ifsgc-choix__carte--select:has(.ifsgc-uichoice:checked) .ifsgc-carte__etat::before,
.ifsgc-outil--select:has(.ifsgc-uichoice:checked) .ifsgc-carte__etat::before {
    content: "✓";
    opacity: 1;
}

.ifsgc-radio--aucune {
    margin-block: var(--ef-espace) var(--ef-espace-l);
    color: var(--ef-douce);
    font-size: .9rem;
}

.ifsgc-radio--aucune:has(input:checked) {
    color: var(--ef-encre);
}

.ifsgc-tarif {
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon);
    padding: var(--ef-espace-l);
    position: relative;
    background: var(--ef-surface);
    transition: transform .15s ease, box-shadow .15s ease;
}

.ifsgc-tarif:hover {
    transform: translateY(-2px);
    box-shadow: var(--ef-ombre);
}

.ifsgc-tarif--mis-en-avant {
    border: 2px solid var(--ef-primaire);
    background: rgba(var(--ef-primaire-rgb), 0.6);
    box-shadow: var(--ef-ombre);
}

.ifsgc-tarif__badge {
    position: absolute;
    top: -0.8rem;
    inset-inline-start: var(--ef-espace-l);
    background: var(--ef-degrade);
    color: var(--ef-inverse);
    border-radius: var(--ef-rayon-pill);
    font-size: .8rem;
    font-weight: 600;
    padding: .2rem .9rem;
    margin: 0;
    box-shadow: var(--ef-ombre);
}

.ifsgc-tarif__nom {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
}

.ifsgc-tarif__prix {
    margin: 0 0 .5rem;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ifsgc-tarif__unite {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ef-douce);
}

.ifsgc-tarif__barre {
    display: inline-block;
    margin-inline-start: .5rem;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ef-douce);
}

.ifsgc-tarif__note {
    color: var(--ef-douce);
    font-size: .9rem;
    min-height: 2.6em;
}

/* ---- Outils (liste informative) ---- */

.ifsgc-outils {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ef-espace);
    margin-block: var(--ef-espace-l);
}

/* Carte seule (hors grille) dans un contenu riche : même respiration. */
.ifsgc-richtext > .ifsgc-outil {
    margin-block: var(--ef-espace-l);
}

/* Grille de 3 cartes (maintenance). */
.ifsgc-outils--trois {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
    .ifsgc-outils--trois {
        grid-template-columns: 1fr;
    }
}

/* Encart promotionnel (offre combinée) : bandeau teinté vert marque. */
.ifsgc-callout {
    background: rgba(var(--ef-accent-rgb), 0.10);
    border: 1px solid rgba(var(--ef-accent-rgb), 0.45);
    border-radius: var(--ef-rayon-sm);
    padding: .8rem 1.2rem;
    margin-block: var(--ef-espace-l);
    text-align: center;
}

/* ---- Carte récapitulatif ---- */

.ifsgc-recap-carte {
    position: relative;
    overflow: hidden;
    background: var(--ef-fond);
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon);
    padding: var(--ef-espace-l);
    margin-block-start: var(--ef-espace-l);
}

.ifsgc-recap-carte::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--ef-degrade-marque);
}

.ifsgc-recap-carte h3 {
    margin: 0 0 var(--ef-espace);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ifsgc-recap-carte h3::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    border-radius: var(--ef-rayon-pill);
    background: var(--ef-degrade-marque);
    margin-block-start: .45rem;
}

#ifsgc-recap ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#ifsgc-recap li {
    padding-block: .35rem;
    padding-inline-start: 1.6rem;
    position: relative;
}

#ifsgc-recap li::before {
    content: "✓";
    position: absolute;
    inset-inline-start: 0;
    color: var(--ef-accent);
    font-weight: 700;
}

#ifsgc-recap li + li {
    border-block-start: 1px dashed var(--ef-bord);
}

.ifsgc-recap__total {
    margin: var(--ef-espace-l) 0 0;
    padding: .85rem 1.25rem;
    border-radius: var(--ef-rayon-sm);
    background: var(--ef-degrade);
    color: var(--ef-inverse);
    text-align: center;
    font-size: 1.05rem;
}

.ifsgc-outil {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon);
    padding: var(--ef-espace) var(--ef-espace-l);
    background: var(--ef-surface);
    box-shadow: var(--ef-ombre);
    transition: transform .15s ease, box-shadow .15s ease;
}

.ifsgc-outil:hover {
    transform: translateY(-2px);
    box-shadow: var(--ef-ombre-l);
}

/* Liseré dégradé signature en tête de carte. */
.ifsgc-outil::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--ef-degrade-marque);
}

.ifsgc-outil__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-block: .35rem .6rem;
}

.ifsgc-outil__nom {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ifsgc-outil__prix {
    flex: none;
    padding: .3rem .9rem;
    border-radius: var(--ef-rayon-pill);
    background: rgba(var(--ef-primaire-rgb), 0.12);
    color: var(--ef-primaire-fonce);
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
}

.ifsgc-outil__desc {
    margin: 0;
    color: var(--ef-douce);
    font-size: .95rem;
}

@media (prefers-reduced-motion: reduce) {
    .ifsgc-outil {
        transition: none;
    }

    .ifsgc-outil:hover {
        transform: none;
    }
}

.ifsgc-outil dt {
    font-weight: 700;
    margin-block-end: .35rem;
}

.ifsgc-outil dd {
    margin: 0;
    color: var(--ef-douce);
    font-size: .95rem;
}

/* ---- Responsive ---- */

@media (max-width: 767px) {
    .ifsgc-grid,
    .ifsgc-tarifs,
    .ifsgc-outils {
        grid-template-columns: 1fr;
    }

    .ifsgc-card {
        padding: var(--ef-espace);
    }

    .ifsgc-card--code {
        padding: var(--ef-espace-l) var(--ef-espace);
    }
}

/* ---- Contenu riche éditable (sections de type « contenu ») ---- */

.ifsgc-richtext > :first-child {
    margin-block-start: 0;
}

.ifsgc-richtext ul,
.ifsgc-richtext ol {
    padding-inline-start: 1.25rem;
}

/* Le reset du template supprime les puces : on les rétablit aux couleurs
   de la marque. */
.ifsgc-richtext ul {
    list-style: disc;
}

.ifsgc-richtext ol {
    list-style: decimal;
}

.ifsgc-richtext li {
    margin-block-end: .4rem;
}

.ifsgc-richtext li::marker {
    color: var(--ef-primaire);
}

.ifsgc-richtext dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ef-espace);
    margin: 0;
}

.ifsgc-richtext dt {
    font-weight: 700;
    margin-block-end: .35rem;
}

.ifsgc-richtext dd {
    margin: 0 0 var(--ef-espace);
    color: var(--ef-douce);
    font-size: .95rem;
}

@media (max-width: 767px) {
    .ifsgc-richtext dl {
        grid-template-columns: 1fr;
    }
}

/* ---- Cartes de choix (contenu riche : « deux possibilités ») ---- */

.ifsgc-choix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ef-espace);
    margin-block: var(--ef-espace-l);
}

.ifsgc-choix__carte {
    position: relative;
    overflow: hidden;
    background: var(--ef-surface);
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon);
    padding: var(--ef-espace-l);
    box-shadow: var(--ef-ombre);
    transition: transform .15s ease, box-shadow .15s ease;
}

.ifsgc-choix__carte:hover {
    transform: translateY(-2px);
    box-shadow: var(--ef-ombre-l);
}

/* Liseré dégradé signature en tête de carte. */
.ifsgc-choix__carte::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--ef-degrade-marque);
}

.ifsgc-choix__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(var(--ef-primaire-rgb), 0.12);
    color: var(--ef-primaire);
    margin-block-end: .75rem;
}

.ifsgc-choix__icone svg {
    width: 1.4rem;
    height: 1.4rem;
}

.ifsgc-choix__carte--accent .ifsgc-choix__icone {
    background: rgba(var(--ef-accent-rgb), 0.15);
    color: var(--ef-accent);
}

.ifsgc-choix__titre {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 .4rem;
    letter-spacing: -0.01em;
}

.ifsgc-choix__texte {
    color: var(--ef-douce);
    font-size: .95rem;
    margin: 0;
}

@media (max-width: 767px) {
    .ifsgc-choix {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ifsgc-choix__carte {
        transition: none;
    }

    .ifsgc-choix__carte:hover {
        transform: none;
    }
}

/* ---- Argumentaire crédits : sous-titres ---- */

.ifsgc-argu__soustitre {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-block: var(--ef-espace-l) .6rem;
}

/* ---- Page de remerciement (crédits) ---- */

.ifsgc-merci__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-block-end: var(--ef-espace);
    border-radius: 50%;
    background: rgba(var(--ef-accent-rgb), 0.15);
    color: var(--ef-accent);
}

.ifsgc-merci__icone svg {
    width: 2rem;
    height: 2rem;
}

.ifsgc-merci__titre {
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 .5em;
}

.ifsgc-merci__actions {
    display: flex;
    gap: var(--ef-espace);
    justify-content: center;
    flex-wrap: wrap;
    margin-block-start: var(--ef-espace-l);
}

/* ---- Barre d'identité persistante ---- */

.ifsgc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ef-espace);
    flex-wrap: wrap;
    background: var(--ef-surface);
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon-pill);
    padding: .55rem .6rem .55rem 1.25rem;
    margin-block-end: var(--ef-espace-l);
    box-shadow: var(--ef-ombre);
}

.ifsgc-topbar__hello {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

/* Point de statut « connecté » devant le prénom. */
.ifsgc-topbar__hello::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--ef-accent);
    flex: none;
}

.ifsgc-topbar__reset {
    margin: 0;
}

/* ---- Assistant : fil d'étapes ---- */

.ifsgc-steps-nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 0 0 var(--ef-espace);
    counter-reset: none;
}

.ifsgc-steps-nav__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon-pill);
    font-size: .9rem;
    color: var(--ef-douce);
    background: var(--ef-surface);
    transition: border-color .15s ease, background-color .15s ease;
}

.is-wizard .ifsgc-steps-nav__item.is-done {
    cursor: pointer;
}

.ifsgc-steps-nav__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ef-bord);
    color: var(--ef-encre);
    font-weight: 700;
    font-size: .85rem;
    flex: none;
}

.ifsgc-steps-nav__item.is-active {
    border-color: var(--ef-primaire);
    color: var(--ef-encre);
    background: rgba(var(--ef-primaire-rgb), 0.10);
}

.ifsgc-steps-nav__item.is-active .ifsgc-steps-nav__num {
    background: var(--ef-degrade);
    color: var(--ef-inverse);
}

.ifsgc-steps-nav__item.is-done {
    border-color: var(--ef-accent);
    color: var(--ef-encre);
}

.ifsgc-steps-nav__item.is-done .ifsgc-steps-nav__num {
    background: var(--ef-accent);
    color: #fff;
    font-size: 0;
}

.ifsgc-steps-nav__item.is-done .ifsgc-steps-nav__num::after {
    content: "\2713";
    font-size: .95rem;
}

/* ---- Assistant : barre de progression ---- */

.ifsgc-progress {
    height: 6px;
    border-radius: var(--ef-rayon-pill);
    background: var(--ef-bord);
    overflow: hidden;
    margin-block-end: var(--ef-espace-l);
}

.ifsgc-progress__bar {
    display: block;
    height: 100%;
    width: 20%;
    background: var(--ef-degrade-marque);
    border-radius: inherit;
    transition: width .3s ease;
}

/* ---- Assistant : étapes ---- */

.ifsgc-step {
    background: var(--ef-surface);
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon);
    padding: var(--ef-espace-l);
    margin-block-end: var(--ef-espace-l);
    box-shadow: var(--ef-ombre);
}

.ifsgc-step[hidden] {
    display: none;
}

.ifsgc-step h2 {
    margin-block-start: 0;
    margin-block-end: .9rem;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Trait dégradé signature sous chaque titre d'étape (rappel du hero). */
.ifsgc-step h2::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    border-radius: var(--ef-rayon-pill);
    background: var(--ef-degrade-marque);
    margin-block-start: .45rem;
}

/* Le titre reçoit le focus programmatique à chaque changement d'étape
   (annonce aux lecteurs d'écran) : pas de contour visuel sur un élément
   non interactif. */
.ifsgc-step h2:focus,
.ifsgc-step h2:focus-visible {
    outline: none;
}

/* Hors assistant (sans JS ou option désactivée) : étapes empilées, numéro discret. */
.ifsgc-wizard:not(.is-wizard) .ifsgc-steps-nav,
.ifsgc-wizard:not(.is-wizard) .ifsgc-progress {
    display: none;
}

/* ---- Assistant : commandes Précédent / Suivant ---- */

.ifsgc-wizard-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: .6rem var(--ef-espace);
    margin-block-start: calc(var(--ef-espace-l) * -0.5);
    padding: var(--ef-espace) var(--ef-espace-l);
    background: var(--ef-surface);
    border: 1px solid var(--ef-bord);
    border-radius: var(--ef-rayon);
    box-shadow: var(--ef-ombre);
}

/* Compteur discret sous les boutons. */
.ifsgc-wizard-nav__counter {
    grid-row: 2;
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ef-douce);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.ifsgc-wizard-nav [data-nav="prev"] { grid-row: 1; grid-column: 1; justify-self: start; }
.ifsgc-wizard-nav [data-nav="next"] { grid-row: 1; grid-column: 2; justify-self: end; }

@media (max-width: 767px) {
    .ifsgc-step {
        padding: var(--ef-espace);
    }

    .ifsgc-steps-nav__label {
        display: none;
    }

    .ifsgc-wizard-nav [data-nav] {
        width: 100%;
        text-align: center;
    }
}

/* ---- Accessibilité : mouvement réduit ---- */

@media (prefers-reduced-motion: reduce) {
    .ifsgc-btn,
    .ifsgc-input,
    .ifsgc-radio,
    .ifsgc-tarif,
    .ifsgc-steps-nav__item,
    .ifsgc-progress__bar {
        transition: none;
    }

    .ifsgc-btn--primary:hover,
    .ifsgc-tarif:hover {
        transform: none;
    }
}