/**
 * Réservation AssurGala sur AssurTalent.
 *
 * Direction artistique reprise à l'identique du formulaire de formationsassurance.ch
 * (assets/front.css de la billetterie) : même structure, mêmes proportions, mêmes
 * ombres, mêmes boutons en pilule, mêmes cartes arrondies à 16px. Seule la palette
 * change : le rouge IFAway devient le bleu AssurTalent, Open Sans devient Figtree.
 *
 * Le formulaire n'emprunte plus les classes du thème (.at-form, .at-champ, .at-btn) :
 * elles imposaient un display sur les blocs conditionnels et rendaient visibles des
 * champs marqués « hidden » (Société, Code d'accès, Total). Tout est ici, préfixé atg-.
 */

.atg {
    /* Les tokens du thème s'il est chargé, les valeurs en dur sinon. */
    --atg-bleu: var(--bleu, #1E73B8);
    --atg-bleu-f: var(--bleu-2, #14548C);
    --atg-nuit: var(--nuit, #0C2E4A);
    --atg-texte: var(--encre, #1E2A36);
    --atg-gris: var(--muet, #5F7182);
    --atg-clair: var(--ciel, #E9F2FA);
    --atg-bord: var(--ligne, #E4EBF2);
    --atg-blanc: var(--surface, #FFFFFF);
    --atg-alerte: var(--anomalie, #B03A2E);
    --atg-alerte-fond: var(--anomalie-bg, #F9E5E2);
    --atg-attente: var(--attente, #9A6708);
    --atg-attente-fond: var(--attente-bg, #FCF0DA);
    --atg-ombre: 0 8px 30px rgba(12, 46, 74, .10);
    --atg-ombre-h: 0 12px 40px rgba(12, 46, 74, .14);

    max-width: 1000px;
    margin: 0 auto;
    color: var(--atg-texte);
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
}

.atg *,
.atg *::before,
.atg *::after { box-sizing: border-box; }

/* Le thème pose un display sur ses propres blocs, ce qui neutralise l'attribut
   hidden du HTML. Ici on le rétablit : un champ masqué doit rester masqué. */
.atg [hidden] { display: none !important; }

/* ---------------------------------------------------------- Entête */

.atg-entete { margin-bottom: 44px; text-align: center; }

.atg-titre {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.3px;
    margin: 0 0 18px;
    color: var(--atg-texte);
}

.atg-titre::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: var(--atg-bleu);
    border-radius: 2px;
    margin: 22px auto 0;
}

.atg-soustitre { margin: 26px auto 0; max-width: 700px; color: var(--atg-gris); font-size: 16px; }

/* ---------------------------------------------------------- Étapes */

.atg-etape { border: 0; padding: 0; margin: 0 0 40px; min-width: 0; }

.atg-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -.3px;
    color: var(--atg-texte);
    margin-bottom: 22px;
    padding: 0;
}

.atg-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--atg-bleu);
    color: #fff;
    font-size: 16px;
    flex: 0 0 auto;
    box-shadow: 0 4px 14px rgba(30, 115, 184, .35);
}

/* ---------------------------------------------------------- Cartes de tarif */

.atg-tarifs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.atg-tarif { position: relative; display: block; cursor: pointer; margin: 0; }

.atg-tarif input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.atg-tarif-corps {
    display: block;
    height: 100%;
    border: 1px solid var(--atg-bord);
    border-radius: 16px;
    padding: 28px 24px 30px;
    background: var(--atg-blanc);
    box-shadow: var(--atg-ombre);
    transition: all .3s ease;
}

.atg-tarif:hover .atg-tarif-corps { box-shadow: var(--atg-ombre-h); transform: translateY(-3px); }

.atg-tarif.est-choisi .atg-tarif-corps {
    border: 2px solid var(--atg-bleu);
    box-shadow: 0 12px 40px rgba(30, 115, 184, .22);
    transform: translateY(-3px);
}

.atg-tarif input:focus-visible + .atg-tarif-corps {
    outline: 3px solid rgba(30, 115, 184, .45);
    outline-offset: 2px;
}

.atg-tarif.est-complet { cursor: not-allowed; }
.atg-tarif.est-complet .atg-tarif-corps { opacity: .5; background: var(--atg-clair); box-shadow: none; }

.atg-tarif-haut {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.atg-tarif-label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: var(--atg-texte);
    line-height: 1.25;
    letter-spacing: -.3px;
}

.atg-tarif-prix {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--atg-bleu);
    white-space: nowrap;
    flex: 0 0 auto;
    letter-spacing: -.5px;
}

.atg-tarif-soustitre {
    display: block;
    font-size: 14px;
    color: var(--atg-texte);
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.5;
}

.atg-tarif-desc {
    display: block;
    font-size: 14.5px;
    color: var(--atg-gris);
    line-height: 1.65;
}

.atg-tarif-etat {
    display: inline-block;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--atg-gris);
}

.atg-tarif-etat--chaud { color: var(--atg-bleu); }

/* ---------------------------------------------------------- Champs */

/* Deux colonnes fixes : prénom / nom, puis email / téléphone.
   Une grille « auto-fit » produirait trois colonnes puis une ligne orpheline. */
.atg-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 24px;
}

.atg-champ { margin: 0 0 18px; }
.atg-champ--large { grid-column: 1 / -1; }

.atg-champ label {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--atg-texte);
    margin-bottom: 8px;
}

.atg-facultatif { font-weight: 400; color: var(--atg-gris); }

.atg-champ input,
.atg-champ textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid var(--atg-bord);
    border-radius: 10px;
    font-size: 16px;               /* 16px minimum : évite le zoom automatique sur iOS */
    font-family: inherit;
    color: var(--atg-texte);
    background: var(--atg-blanc);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.atg-champ textarea { resize: vertical; min-height: 92px; line-height: 1.6; }

.atg-champ input:focus,
.atg-champ textarea:focus {
    outline: 0;
    border-color: var(--atg-bleu);
    box-shadow: 0 0 0 3px rgba(30, 115, 184, .18);
}

.atg-champ input.atg-invalide,
.atg-champ textarea.atg-invalide { border-color: var(--atg-alerte); background: var(--atg-alerte-fond); }

.atg-aide { display: block; font-size: 12.5px; color: var(--atg-gris); margin-top: 6px; line-height: 1.5; }

.atg-erreur {
    display: block;
    font-size: 13px;
    color: var(--atg-alerte);
    font-weight: 600;
    margin-top: 6px;
}
.atg-erreur:empty { margin-top: 0; }

.atg-consentement { margin: 10px 0 0; font-size: 14.5px; }
.atg-consentement label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.atg-consentement input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--atg-bleu); }

/* Piège à robots : invisible sans être display:none, que les robots détectent. */
.atg-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------- Pied et bouton */

.atg-pied {
    border-top: 1px solid var(--atg-bord);
    padding-top: 34px;
    margin-top: 34px;
    text-align: center;
}

.atg-recap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    margin-bottom: 22px;
}

.atg-recap-label { font-size: 13px; color: var(--atg-gris); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }

.atg-recap-montant {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-size: 34px;
    color: var(--atg-texte);
    letter-spacing: -1px;
}

.atg-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 280px;
    border: 2px solid transparent;
    border-radius: 50px;
    background: var(--atg-bleu);
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 18px 38px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(30, 115, 184, .40);
    transition: all .25s ease;
    -webkit-appearance: none;
}

.atg-submit:hover:not(:disabled) {
    background: var(--atg-bleu-f);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(30, 115, 184, .55);
}
.atg-submit:disabled { opacity: .72; cursor: wait; }

.atg-spinner {
    display: none;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: atg-tourne .7s linear infinite;
}
.atg-submit.est-charge .atg-spinner { display: block; }

@keyframes atg-tourne { to { transform: rotate(360deg); } }

.atg-rassurance { margin: 18px 0 0; font-size: 13px; color: var(--atg-gris); }

/* ---------------------------------------------------------- Alertes */

.atg-alerte {
    border-radius: 10px;
    padding: 16px 20px;
    font-size: 14.5px;
    margin-bottom: 24px;
    border-left: 4px solid;
}

.atg-alerte--erreur { background: var(--atg-alerte-fond); border-color: var(--atg-alerte); color: var(--atg-alerte); }
.atg-alerte--info { background: var(--atg-attente-fond); border-color: #E0A82E; color: var(--atg-attente); }

.atg-lien-secours { display: inline-block; margin-top: 8px; color: inherit; font-weight: 700; text-decoration: underline; }

.atg-ferme {
    background: var(--atg-clair);
    border: 1px solid var(--atg-bord);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
}
.atg-ferme p { margin: 0 0 10px; }
.atg-ferme p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- Le billet */

.atg-billet { max-width: 540px; margin: 0 auto; }

.atg-billet-carte {
    background: var(--atg-blanc);
    border: 1px solid var(--atg-bord);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--atg-ombre-h);
}

.atg-billet-entete {
    background: linear-gradient(135deg, var(--atg-nuit) 0%, var(--atg-bleu-f) 60%, var(--atg-bleu) 100%);
    color: #fff;
    padding: 30px 30px 32px;
}

.atg-billet-eyebrow {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .85);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.atg-billet-titre {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: #fff;
}

.atg-billet-qr { text-align: center; padding: 32px 30px 24px; }
.atg-billet-qr svg,
.atg-billet-qr img { display: block; margin: 0 auto; width: 100%; max-width: 268px; height: auto; }

.atg-billet-code {
    margin: 20px 0 6px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: .14em;
    color: var(--atg-texte);
}

.atg-billet-consigne { margin: 0; font-size: 13.5px; color: var(--atg-gris); }

.atg-billet-infos { margin: 0; padding: 0 30px; }
.atg-billet-infos div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--atg-bord); }
.atg-billet-infos dt { margin: 0; color: var(--atg-gris); font-size: 14px; flex: 0 0 auto; }
.atg-billet-infos dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; }

.atg-billet-scanne {
    margin: 20px 30px 0;
    padding: 14px 16px;
    background: var(--atg-attente-fond);
    border-left: 4px solid #E0A82E;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--atg-attente);
}

.atg-billet-actions { display: flex; gap: 12px; padding: 26px 30px 30px; flex-wrap: wrap; }

.atg-btn {
    flex: 1 1 170px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 50px;
    background: var(--atg-bleu);
    color: #fff !important;
    text-decoration: none;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 15px 20px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 6px 20px rgba(30, 115, 184, .35);
    transition: all .25s ease;
}

.atg-btn:hover { background: var(--atg-bleu-f); transform: translateY(-2px); color: #fff !important; }

.atg-btn--fantome { background: transparent; color: var(--atg-texte) !important; border-color: var(--atg-bord); box-shadow: none; }
.atg-btn--fantome:hover { background: var(--atg-clair); border-color: #C7D6E4; color: var(--atg-texte) !important; }

.atg-billet-rappel { margin: 20px 0 0; font-size: 13.5px; color: var(--atg-gris); text-align: center; }

.atg-attente {
    background: var(--atg-clair);
    border: 1px solid var(--atg-bord);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
}
.atg-attente p { margin: 0 0 10px; }
.atg-attente p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- Impression */

@media print {
    body * { visibility: hidden; }
    .atg-billet, .atg-billet * { visibility: visible; }
    .atg-billet { position: absolute; left: 0; top: 0; width: 100%; max-width: none; }
    .atg-billet-actions, .atg-billet-rappel { display: none !important; }
    .atg-billet-carte { box-shadow: none; border: 1px solid #999; }
    .atg-billet-entete { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
    .atg-billet-titre, .atg-billet-eyebrow { color: #000 !important; }
}

/* ---------------------------------------------------------- Mobile */

@media (max-width: 860px) {
    .atg-titre { font-size: 28px; }
    .atg-legend { font-size: 19px; }
}

@media (max-width: 600px) {
    .atg { font-size: 15.5px; }
    .atg-tarifs { grid-template-columns: 1fr; }
    .atg-grille { grid-template-columns: 1fr; }
    .atg-submit { width: 100%; min-width: 0; }
    .atg-billet-actions { flex-direction: column; }
    .atg-recap-montant { font-size: 28px; }
}

/* ---------------------------------------------------------- Divers */

.atg-centre { text-align: center; }