@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap');

/* =========================================================================
   PARADISE PAINTBALL - Nouveau parcours de reservation (pages /resa2026/)
   Fichier NOUVEAU. Charge uniquement sur les pages du nouveau parcours,
   donc aucune regle ci-dessous ne peut atteindre le reste du site.
   Reference visuelle : maquette validee le 24/08/2026.
   ========================================================================= */

.r26 {
    --r26-bleu: #293445;
    --r26-jaune: #fec901;
    --r26-vert: #1AB385;
    --r26-fond: #f4f6f8;
    --r26-bord: #dee4ea;
    --r26-bord-clair: #e3e8ee;
    --r26-gris: #8a90a0;
    --r26-gris-fonce: #4d5064;
    --r26-gris-clair: #c3c9d4;
    --r26-jaune-fond: #fffbea;
    --r26-jaune-bord: #f2e3a0;
    --r26-jaune-texte: #6b5d1a;
    --r26-rouge: #ff6638;

    position: relative;
    background: var(--r26-fond);
    font-family: 'Rubik', system-ui, -apple-system, sans-serif;
    color: var(--r26-bleu);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

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

.r26 img { max-width: 100%; }

/* ---------- Pastilles d'etapes ---------- */
.r26-etapes {
    background: #ffffff;
    border-bottom: 1px solid var(--r26-bord-clair);
    padding: 12px 10px 14px 10px;
}
.r26-etapes ul {
    display: flex;
    justify-content: space-between;
    max-width: 520px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.r26-etapes li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 20%;
    margin: 0;
    padding: 0;
}
.r26-etapes li:before { display: none; }
.r26-etapes-lien {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    text-decoration: none;
    padding: 2px 0;
}
.r26-etapes-lien:hover, .r26-etapes-lien:focus { text-decoration: none; }
a.r26-etapes-lien { cursor: pointer; }
.r26-pastille {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    background: #c0c4c9;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}
.r26-etapes-nom {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #c0c4c9;
    text-align: center;
    line-height: 1.2;
}
.r26-etapes li.is-active .r26-pastille { background: var(--r26-jaune); }
.r26-etapes li.is-active .r26-etapes-nom { color: var(--r26-jaune); }

/* ---------- Le fil du parcours, colle au-dessus de la barre du bas ---------- */
/* Le fil et la barre voyagent ensemble dans un bloc collant commun : le fil
   reste ainsi sous les yeux pendant tout le defilement, ce que le bandeau du
   haut ne permettait pas. Le conteneur #r26-fil n'a volontairement aucun
   style : un fil vide ne laisse donc aucune trace au-dessus de la barre. */
.r26-socle {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: #ffffff;
    box-shadow: 0 -6px 18px rgba(46,50,64,0.06);
    margin-top: 10px;
}
/* A l'interieur du bloc, la barre n'a plus besoin de son propre decrochement
   ni de son ombre : le bloc s'en charge pour les deux. Regles limitees au
   bloc — l'ecran 5, qui n'en a pas, garde la barre exactement comme avant. */
.r26-socle .r26-barre {
    margin-top: 0;
    box-shadow: none;
}
.r26-fil {
    background: #ffffff;
    border-top: 1px solid var(--r26-bord-clair);
    padding: 7px 12px 8px 12px;
    text-align: center;
}
.r26-fil-texte {
    max-width: 520px;
    margin: 0 auto;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--r26-gris-fonce);
}
.r26-fil strong { font-weight: 600; }
.r26-fil-sep { color: var(--r26-gris-clair); margin: 0 6px; }

/* ---------- Lien retour (ecrans 2 a 5) ---------- */
.r26-retour-ligne {
    max-width: 560px;
    margin: 0 auto;
    padding: 12px 16px 0 16px;
}
.r26-retour {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--r26-gris);
    text-decoration: none;
    padding: 4px 8px 4px 0; /* zone tactile confortable */
}
.r26-retour:hover, .r26-retour:focus {
    color: var(--r26-gris-fonce);
    text-decoration: none;
}

/* ---------- Corps d'ecran ---------- */
.r26-ecran {
    max-width: 560px;
    margin: 0 auto;
    padding: 18px 16px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.r26-titre {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 4px 0;
    color: var(--r26-bleu);
    text-transform: none;
}
.r26-soustitre {
    font-size: 12px;
    color: var(--r26-gris);
    margin: -6px 0 0 0;
}

/* ---------- Cartes de choix (ecran 1) ---------- */
.r26-offres {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}
.r26-carte {
    background: #ffffff;
    border: 1px solid var(--r26-bord);
    border-radius: 14px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    color: var(--r26-bleu);
    font-family: inherit;
}
.r26-carte:hover, .r26-carte:focus { color: var(--r26-bleu); text-decoration: none; }
.r26-carte-icone {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--r26-fond);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.r26-carte-icone svg { stroke: var(--r26-gris-fonce); }
.r26-carte-texte { flex: 1; min-width: 0; }
.r26-carte-nom { display: block; font-size: 15px; font-weight: 600; }
.r26-carte-detail { display: block; font-size: 12px; color: var(--r26-gris); margin-top: 2px; }
.r26-carte-fleche { flex-shrink: 0; }
.r26-carte-coche { display: none; }

.r26-carte.is-choisi {
    background: var(--r26-jaune-fond);
    border: 2px solid var(--r26-jaune);
    box-shadow: 0 4px 14px rgba(254,201,1,0.2);
}
.r26-carte.is-choisi .r26-carte-icone { background: var(--r26-jaune); }
.r26-carte.is-choisi .r26-carte-icone svg { stroke: #ffffff; }
.r26-carte.is-choisi .r26-carte-nom { font-weight: 700; }
.r26-carte.is-choisi .r26-carte-fleche { display: none; }
.r26-carte.is-choisi .r26-carte-coche {
    display: flex;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: var(--r26-jaune);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------- Ligne d'aide ---------- */
.r26-aide {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--r26-gris);
}
.r26-aide strong { font-weight: 600; color: var(--r26-gris-fonce); }
.r26-aide a { color: var(--r26-gris-fonce); text-decoration: none; }

/* ---------- Barre du bas ---------- */
.r26-barre {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: #ffffff;
    border-top: 1px solid var(--r26-bord-clair);
    box-shadow: 0 -6px 18px rgba(46,50,64,0.06);
    padding: 12px 16px 16px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.r26-barre-resume { flex: 1; min-width: 0; }
.r26-barre-petit { font-size: 11px; color: var(--r26-gris); }
.r26-barre-fort { font-size: 14px; font-weight: 700; }
.r26-btn {
    height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 14px;
    background: var(--r26-vert);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.r26-btn:hover, .r26-btn:focus { color: #ffffff; text-decoration: none; opacity: .92; }
.r26-btn.is-large { width: 100%; }
.r26-btn.is-inactif {
    background: #c9ced6;
    cursor: default;
    box-shadow: none;
    pointer-events: none;
}

/* Exception, ecran 3 uniquement : le bouton eteint accepte quand meme le
   clic, pour que le script puisse dire ce qui manque au lieu de rester
   muet. Les boutons eteints des ecrans 2, 4 et 5 gardent la regle
   generale ci-dessus (clic ignore). */
#r26-btn-formule.is-inactif { pointer-events: auto; }

/* Utilitaire : bloc masque par le script */
.r26-cache { display: none !important; }

.r26-bascule-choix[disabled] {
    opacity: .45;
    cursor: not-allowed;
}
.r26-barre.is-colonne { flex-direction: column; align-items: stretch; gap: 7px; }

/* ---------- Calendrier ---------- */
.r26-bloc {
    background: #ffffff;
    border: 1.5px solid var(--r26-bord-clair);
    border-radius: 16px;
    padding: 14px;
}
.r26-cal-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.r26-cal-mois { font-size: 16px; font-weight: 700; }
.r26-cal-fleche {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--r26-fond);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.r26-cal-jours, .r26-cal-grille {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}
.r26-cal-jours div {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--r26-gris);
    padding: 4px 0;
}
.r26-cal-case {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: var(--r26-bleu);
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
.r26-cal-case.is-vide { visibility: hidden; cursor: default; }
.r26-cal-case.is-passe { color: #d8dde4; cursor: default; }
.r26-cal-fleche.is-inactif { background: transparent; cursor: default; }
.r26-cal-case.is-complet {
    color: var(--r26-gris-clair);
    text-decoration: line-through;
    cursor: not-allowed;
}
.r26-cal-case.is-choisi {
    background: var(--r26-jaune);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(254,201,1,0.35);
}

/* ---------- Creneaux ---------- */
.r26-sous-titre {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px 0;
}
.r26-note-jaune {
    background: var(--r26-jaune-fond);
    border: 1px solid var(--r26-jaune-bord);
    border-radius: 12px;
    padding: 9px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 12px;
    color: var(--r26-jaune-texte);
    line-height: 1.45;
}
.r26-note-jaune svg { flex-shrink: 0; margin-top: 1px; }
.r26-note-jaune strong { font-weight: 700; }
.r26-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 7px 0;
}
.r26-section.is-premiere { margin-top: 0; }
.r26-section-nom {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #6f778f;
}
.r26-section-trait { flex: 1; height: 1px; background: var(--r26-bord); }
/* Titre JOUR replie apres une bascule nocturne : tappable pour redeplier */
.r26-section.is-replie {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 8px 0;
}
.r26-creneaux {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}
.r26-creneau {
    height: 44px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--r26-bord);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--r26-bleu);
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
.r26-creneau.is-complet {
    background: var(--r26-fond);
    border-color: #eef1f5;
    color: var(--r26-gris-clair);
    text-decoration: line-through;
    cursor: not-allowed;
}
.r26-creneau.is-choisi {
    background: var(--r26-jaune);
    border-color: var(--r26-jaune);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(254,201,1,0.3);
}
.r26-creneau.is-inactif {
    color: var(--r26-gris-clair);
    border-color: #eef1f5;
    cursor: default;
}
.r26-mention { font-size: 11px; color: var(--r26-gris); margin-top: 7px; }
.r26-mention.is-avant { margin: 0 0 4px 0; }

/* Heure de fermeture, sous le titre de section de l'ecran 2. Bleu de marque :
   visible sans emprunter le sens du vert (avancer), du rouge (erreur) ni du
   jaune vif (choix du client). */
.r26-mention.is-fermeture {
    background: #e9edf3;
    border-left: 3px solid var(--r26-bleu);
    color: var(--r26-bleu);
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 4px;
}

/* ---------- Garde-fou : experience pas encore choisie ---------- */
.r26-garde { text-align: center; }
.r26-garde-texte {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* ---------- Ecran 3 : formule ---------- */
/* Les deux choix portent le meme costume : repos en blanc, choisi en jaune.
   Le jaune reste la marque de la selection, comme partout dans le parcours. */
.r26-choix {
    background: #ffffff;
    border: 1.5px solid var(--r26-bord-clair);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.r26-choix:focus-visible {
    outline: 3px solid rgba(254,201,1,0.55);
    outline-offset: 2px;
}
.r26-rond {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    border: 2px solid var(--r26-gris);
    background: #ffffff;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.r26-choix.is-choisi {
    background: var(--r26-jaune-fond);
    border: 2px solid var(--r26-jaune);
    box-shadow: 0 4px 14px rgba(254,201,1,0.22);
    padding: 13.5px; /* compense la bordure passee de 1,5 a 2px */
}
.r26-choix.is-choisi .r26-rond {
    border-color: #c9a200;
    background: #c9a200;
    box-shadow: inset 0 0 0 3px #ffffff;
}
.r26-choix-texte { flex: 1; min-width: 0; }
.r26-choix-nom { display: block; font-size: 16px; font-weight: 800; }
.r26-choix-detail {
    display: block;
    font-size: 12px;
    color: var(--r26-gris-fonce);
    margin-top: 3px;
    line-height: 1.4;
}
.r26-choix.is-choisi .r26-choix-detail { color: var(--r26-jaune-texte); }

/* Volet qui se deplie au choix « maintenant ». La marge negative annule le
   « gap » de .r26-ecran tant qu'il est ferme, pour ne pas laisser un blanc. */
.r26-volet {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-bottom: -10px;
    transition: max-height .3s ease, opacity .25s ease, margin-bottom .3s ease;
}
.r26-volet.is-ouvert {
    max-height: 900px;
    opacity: 1;
    margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
    .r26-volet { transition: none; }
}
.r26-etiquette { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.r26-etiquette span { font-weight: 500; color: var(--r26-gris); font-size: 12px; }
.r26-lanceurs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}
.r26-lanceur {
    height: 44px;
    border-radius: 12px;
    background: #ffffff;
    border: 1.5px solid var(--r26-bord-clair);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--r26-bleu);
    font-family: inherit;
    cursor: pointer;
    padding: 0 4px;
}
.r26-lanceur.is-choisi {
    background: var(--r26-jaune);
    border-color: var(--r26-jaune);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(254,201,1,0.18);
}
.r26-bloc-billes {
    background: #ffffff;
    border: 2px solid var(--r26-jaune);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(254,201,1,0.10);
}
.r26-bloc-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
/* Le "?" reprend le rouge des "?" du site actuel (#ff6638).
   Le cercle reste discret ; la zone tactile fait 44 px (voir :after). */
.r26-question {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: #ffffff;
    border: 1.5px solid var(--r26-rouge);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--r26-rouge);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    padding: 0;
}
.r26-question:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.r26-reponse {
    display: none;
    font-size: 12px;
    color: var(--r26-gris-fonce);
    background: var(--r26-fond);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 10px;
    line-height: 1.45;
}
.r26-reponse.is-ouvert { display: block; }
.r26-billes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}
.r26-bille {
    border: 1.5px solid var(--r26-bord-clair);
    border-radius: 12px;
    padding: 9px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 52px;
    background: #ffffff;
    font-family: inherit;
    cursor: pointer;
}
.r26-bille-nb { font-size: 14px; font-weight: 700; color: var(--r26-bleu); }
.r26-bille-prix { font-size: 11px; color: var(--r26-gris); }
.r26-bille.is-choisi { background: var(--r26-jaune); border-color: var(--r26-jaune); }
.r26-bille.is-choisi .r26-bille-nb { color: #ffffff; font-weight: 800; }
.r26-bille.is-choisi .r26-bille-prix { color: #ffffff; font-weight: 700; }
.r26-bascule { display: flex; gap: 8px; margin-bottom: 12px; }
.r26-bascule-choix {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    background: #ffffff;
    border: 1.5px solid var(--r26-bord-clair);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--r26-gris-fonce);
    font-family: inherit;
    cursor: pointer;
    padding: 0 4px;
    text-align: center;
}
.r26-bascule-choix.is-choisi {
    background: var(--r26-jaune);
    border-color: var(--r26-jaune);
    color: #ffffff;
    font-weight: 600;
}
.r26-participants {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #eef1f5;
    gap: 10px;
}
/* Mode "sur place" : la partie billes est cachee, le compteur reste seul
   dans le bloc — plus de trait de separation au-dessus. */
#r26-partie-billes.r26-cache + .r26-participants { border-top: 0; padding-top: 0; }
.r26-participants-nom { font-size: 14px; font-weight: 600; }
.r26-participants-detail { font-size: 11px; color: var(--r26-gris); }
.r26-compteur { display: flex; align-items: center; gap: 14px; }
.r26-compteur-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #ffffff;
    border: 1.5px solid var(--r26-bord-clair);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.r26-compteur-btn.is-plus { background: var(--r26-bleu); border-color: var(--r26-bleu); }
.r26-compteur-btn[disabled] { opacity: .4; cursor: not-allowed; }
.r26-compteur-valeur {
    font-size: 20px;
    font-weight: 800;
    width: 52px;
    text-align: center;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--r26-bleu);
    font-family: inherit;
    padding: 4px 0;
    outline: none;
    box-shadow: none;
    height: auto;
}
.r26-compteur-valeur:focus {
    border-color: var(--r26-bord-clair);
    background: #ffffff;
}
.r26-participants-mini {
    font-size: 11px;
    font-weight: 600;
    color: var(--r26-jaune-texte);
    margin-top: 2px;
}
/* Valeur tapee sous le minimum : la ligne passe en rouge, gras, et monte
   de trois tailles (11 px -> 14 px) pour ne pas passer inapercue */
.r26-participants-mini.is-invalide {
    color: #d63f2a;
    font-weight: 800;
    font-size: 14px;
}
/* Lanceur unique : son nom en titre du bloc billes */
.r26-lanceur-titre {
    font-size: 18px;
    font-weight: 800;
    color: var(--r26-bleu);
    margin-bottom: 8px;
}
/* Ligne sous le titre "Vos billes" */
.r26-note-billes {
    font-size: 11px;
    color: var(--r26-gris);
    margin: -4px 0 8px 0;
}

/* ---------- Ecran 4 : coordonnees ---------- */
.r26-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.r26-champ {
    background: #ffffff;
    border: 1.5px solid var(--r26-bord-clair);
    border-radius: 14px;
    padding: 9px 14px 10px 14px;
}
.r26-champ.is-large { grid-column: 1 / -1; }
.r26-champ label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--r26-gris);
    letter-spacing: 0.4px;
    margin: 0;
    text-transform: uppercase;
}
.r26-champ input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--r26-bleu);
    padding: 3px 0 0 0;
    height: 30px;
    box-shadow: none;
}
.r26-champ input::placeholder { color: var(--r26-gris-clair); font-weight: 400; }
.r26-champ:focus-within { border-color: var(--r26-bleu); border-width: 2px; padding: 8px 13px 9px 13px; }
.r26-obligatoire { font-size: 11px; color: var(--r26-gris); padding: 0 4px; }

/* Champ obligatoire laisse vide ou mal rempli */
.r26-champ.is-invalide { border-color: #d63f2a; }
.r26-champ-erreur {
    font-size: 11px;
    font-weight: 600;
    color: #d63f2a;
    margin-top: 4px;
}

/* Liste deroulante de l'autocompletion code postal / ville (jQuery UI) :
   son habillage n'est charge que sur l'ancienne page, on le fournit ici */
.ui-autocomplete {
    position: absolute;
    z-index: 200;
    background: #ffffff;
    border: 1.5px solid var(--r26-bord-clair);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(46,50,64,0.14);
    list-style: none;
    margin: 4px 0 0 0;
    padding: 4px;
    max-height: 220px;
    overflow-y: auto;
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: 14px;
    color: #293445;
}
.ui-autocomplete .ui-menu-item { list-style: none; }
.ui-autocomplete .ui-menu-item:before { display: none; }
.ui-autocomplete .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item a {
    display: block;
    padding: 9px 10px;
    border-radius: 7px;
    cursor: pointer;
    color: #293445;
    text-decoration: none;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item a.ui-state-focus {
    background: #f4f6f8;
}
.ui-helper-hidden-accessible { display: none; }

/* ---------- Ecran 5 : recap ---------- */
.r26-recap-titre { font-size: 15px; font-weight: 800; }
.r26-recap-lignes { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.r26-recap-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    font-size: 13px;
}
.r26-recap-ligne dt { color: var(--r26-gris); font-weight: 400; flex-shrink: 0; }
.r26-recap-ligne dd { font-weight: 600; margin: 0; text-align: right; }
.r26-recap-note { font-size: 11px; color: var(--r26-gris); margin-top: 9px; }
.r26-recap-client {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #eef1f5;
    font-size: 12px;
    color: var(--r26-gris-fonce);
}
.r26-recap-client strong { font-weight: 700; }
.r26-recap-client a { color: var(--r26-gris); }
.r26-arrhes-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.r26-arrhes-titre { font-size: 15px; font-weight: 800; line-height: 1.3; }
.r26-arrhes-montant { font-size: 28px; font-weight: 800; color: var(--r26-bleu); white-space: nowrap; }
.r26-arrhes-texte {
    font-size: 11px;
    color: var(--r26-gris-fonce);
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid #eef1f5;
    line-height: 1.55;
}
.r26-avis { background: #ffffff; border: 1.5px solid var(--r26-bord-clair); border-radius: 14px; padding: 11px 14px; }
/* Paiement annule (retour de Stripe) */
.r26-alerte {
    background: #fdecea;
    border: 1.5px solid #f0b6ad;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #b3321f;
    line-height: 1.45;
}
/* Messages d'erreur de l'ecran de paiement (CGV, demarrage impossible) */
.r26-cgv-erreur {
    font-size: 12px;
    font-weight: 700;
    color: #d63f2a;
    padding: 0 4px;
}
.r26-btn[disabled] { opacity: .65; cursor: wait; }
/* Ligne CGV : une carte discrete dont toute la surface coche la case.
   L'etiquette s'etire (flex) et porte le padding, donc l'appui « a peu pres »
   sur la ligne coche au lieu d'ouvrir les conditions. */
.r26-cgv {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid var(--r26-bord-clair);
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--r26-gris-fonce);
}
.r26-cgv-zone {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px;
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.r26-cgv input { width: 22px; height: 22px; flex-shrink: 0; margin: 0; accent-color: #293445; }
/* Seul ce lien ouvre les conditions, dans un nouvel onglet. */
.r26-cgv-lire {
    flex-shrink: 0;
    padding: 12px 12px 12px 6px;
    color: var(--r26-bleu);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}
.r26-pied {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 7px;
    font-size: 11px;
    color: var(--r26-gris);
}
.r26-pied span { display: flex; align-items: center; gap: 5px; }
.r26-pied strong { font-weight: 600; color: var(--r26-gris-fonce); }
.r26-pied a { color: var(--r26-gris-fonce); text-decoration: none; }

/* ---------- Merci ---------- */
.r26-merci { text-align: center; padding: 30px 6px; }
.r26-merci h1 { font-size: 21px; font-weight: 800; margin: 0 0 10px 0; text-transform: none; }
.r26-merci p { font-size: 14px; color: var(--r26-gris-fonce); line-height: 1.5; }

/* ---------- Grands ecrans ---------- */
@media only screen and (min-width: 768px) {
    .r26-ecran { padding: 26px 16px 12px 16px; }
    .r26-titre { font-size: 24px; }
    .r26-barre { border-radius: 16px 16px 0 0; }
}

/* ---------- Barre du bas : cadree sur la colonne (02/09/2026) ----------
   Constat de Matthieu : sur grand ecran, le bouton Continuer partait tout a
   droite de la fenetre, loin de la colonne centrale. La barre reste pleine
   largeur (fond, ombre, bord) ; seul son CONTENU est ramene au gabarit de la
   colonne des ecrans (560 px, memes marges). Sur telephone, rien ne change. */
@media (min-width: 700px) {
    .r26-barre {
        padding-left: calc(50% - 264px);
        padding-right: calc(50% - 264px);
    }
}

/* ---------- Ecran 3 : la petite photo dans les boutons lanceur (02/09/2026) ----
   Uniquement les boutons qui PORTENT une photo (classe ajoutee par le
   partial formule.htm). Un bouton sans photo garde exactement son costume
   d'origine. Sur petit ecran, la photo se resserre pour laisser la place
   aux noms longs (Precision, Top Gun). */
.r26-lanceur-photo {
    height: 58px;
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
    padding: 0 6px 0 8px;
}
.r26-lanceur-photo img {
    width: 54px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
    pointer-events: none;
}
.r26-lanceur-photo span { min-width: 0; }
@media (max-width: 480px) {
    .r26-lanceur-photo { font-size: 12px; gap: 5px; padding: 0 3px 0 5px; }
    .r26-lanceur-photo img { width: 38px; height: 32px; }
}