/* ⚠️ Le site centre son contenu (`text-align:center` sur .content-b). Un
   formulaire et un récapitulatif de commande se lisent alignés à gauche : on
   redresse UNIQUEMENT la zone du tunnel, sans toucher au reste du site. */
.tunnel-zone{text-align:left}

/* Le bandeau photo du site fait ~450 px : sur une page d'achat il repousse le
   panier sous la ligne de flottaison. On le garde — c'est l'identite du site —
   mais on le réduit, et UNIQUEMENT sur les pages du tunnel. */
body.page-tunnel [class*="parallax"]{max-height:190px;min-height:0}
body.page-tunnel .tunnel-zone{padding-top:26px}
.tunnel-zone h1,.tunnel-zone h2,.tunnel-zone h3{text-align:left}

/* Feuille d'APPOINT du tunnel.
   Elle est chargée APRÈS celles du site et ne redéfinit aucune couleur :
   tout vient de style_vm1.min.css et de Bootstrap. On se contente de poser
   la mécanique de l'accordéon, que le site n'avait pas. */

.tunnel-etape{border:1px solid #ddd;border-radius:3px;margin-bottom:12px;background:#fff}
.tunnel-etape.ouverte{border-color:#1c56a1;box-shadow:inset 0 3px 0 #1c56a1}
.tunnel-etape.a-venir{opacity:.72}
.tunnel-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px}
.tunnel-rang{width:28px;height:28px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:14px;font-weight:bold;
  background:#eee;color:#777}
.tunnel-etape.ouverte .tunnel-rang{background:#1c56a1;color:#fff}
.tunnel-etape.fait .tunnel-rang{background:#7AFF09;color:#184a8b}
.tunnel-quoi{flex:1;font-size:17px}
.tunnel-resume{color:#777;font-size:14px}
.tunnel-modif{font-size:14px;text-decoration:underline}
.tunnel-dedans{padding:0 20px 22px 62px}
@media(max-width:600px){.tunnel-dedans{padding:0 16px 20px}}

.tunnel-article{display:flex;gap:16px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid #eee}
.tunnel-nom{flex:1}
.tunnel-opts{display:block;font-size:13px;color:#777;margin-top:3px}
.tunnel-retrait{margin-top:6px}
.tunnel-retrait button{background:none;border:0;padding:0;color:#777;
  text-decoration:underline;font-size:13px}
.tunnel-prix{white-space:nowrap;font-size:17px}

.tunnel-totaux{padding-top:14px}
.tunnel-ligne{display:flex;justify-content:space-between;padding:4px 0;color:#777}
.tunnel-grand{display:flex;justify-content:space-between;padding-top:12px;margin-top:8px;
  border-top:1px solid #333;font-size:21px}

.tunnel-cta{margin-top:18px;padding:12px 26px;font-size:17px}
@media(max-width:600px){.tunnel-cta{display:block;width:100%;text-align:center}}
.tunnel-aide{display:block;color:#777;font-size:13px;margin-top:5px}
.tunnel-option{color:#777;font-weight:normal;font-size:13px}
.tunnel-conf{display:flex;gap:9px;align-items:flex-start;color:#777;font-size:13px;
  line-height:1.5;margin-top:16px}
.tunnel-conf svg{flex:none;margin-top:2px}

.tunnel-moyens{margin-top:4px}
.tunnel-moyen{border:1px solid #ddd;border-radius:3px;padding:18px 20px;height:100%;
  margin-bottom:14px}
.tunnel-moyen h3{margin-top:0;font-size:16px}
.tunnel-erreur{margin-top:12px;padding:10px 13px;border-left:3px solid #a94442;
  background:#f2dede;color:#a94442;font-size:14px}

.tunnel-merci{max-width:640px}
.tunnel-numero{color:#777}
.tunnel-bons{list-style:none;padding:0;margin:20px 0}
.tunnel-bons li{padding:11px 0;border-bottom:1px solid #eee}
.tunnel-pdf{display:inline-block;margin-left:10px;font-size:.92em;text-decoration:underline}

/* Le corps du tunnel est neutre : c'est le gabarit de chaque site qui fournit
   son conteneur (`.container` sous Bootstrap chez Toulouse Parapente,
   la colonne `.b600` chez Voler en Parapente). */
.tunnel-corps{max-width:100%}


/* --- Mise en page interne du tunnel, autonome ---------------------------
   Les deux sites n'ont pas le meme socle : Toulouse Parapente charge
   Bootstrap 3, Voler en Parapente est un site de 2011 sans grille. Le tunnel
   porte donc SA mise en page, et n'emprunte aux sites que ce qui fait
   l'identite : l'en-tete, le pied, les polices, les couleurs et leurs boutons
   quand ils en ont (`btn-primary` chez l'un, `butAcheter` chez l'autre). */

.tunnel-champ{margin-bottom:14px}
.tunnel-champ label{display:block;font-size:13px;font-weight:bold;margin-bottom:5px}
.tunnel-saisie{display:block;width:100%;padding:10px 12px;border:1px solid #ccc;
  border-radius:3px;font:inherit;font-size:15px;background:#fff;color:inherit}
.tunnel-saisie:focus{outline:2px solid #1c56a1;outline-offset:1px;border-color:#1c56a1}
textarea.tunnel-saisie{min-height:64px;resize:vertical}
.tunnel-duo{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:620px){.tunnel-duo{grid-template-columns:1fr}}

.tunnel-bouton{display:inline-block;padding:12px 26px;border:0;border-radius:3px;
  background:#1c56a1;color:#fff;font:inherit;font-size:16px;font-weight:bold;
  cursor:pointer;text-decoration:none;text-align:center}
.tunnel-bouton:hover,.tunnel-bouton:focus{background:#184a8b;color:#fff;text-decoration:none}
.tunnel-bouton.secondaire{background:transparent;color:#1c56a1;border:1px solid #1c56a1}

.tunnel-titre{font-size:24px;font-weight:bold;margin:0 0 14px}
.tunnel-accent{color:#1c56a1}
.tunnel-moyens{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.tunnel-moyens{grid-template-columns:1fr}}

/* --- Bloc d'achat injecté dans les fiches existantes ------------------- */
.achat-bloc{max-width:420px;margin:22px 0 30px;padding:20px 22px;
  border:1px solid #1c56a1;background:#e7eef7;border-radius:4px;text-align:left}
.achat-prix{font-size:32px;font-weight:bold;margin:0 0 12px;color:#1c56a1}
.achat-option{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-top:1px solid #cfd8e3;font-size:15px;cursor:pointer}
/* ⚠️ Le bloc est INJECTE dans une page dont je ne maitrise pas la feuille.
   Ici, `.bgBlanc,.bgBleu{color:#fff}` du site rendait les libellés d'options
   blancs sur bleu clair — illisibles. Sur un composant pose chez autrui, le
   `!important` est la bonne reponse : il rend le bloc insensible aux regles
   d'accueil, dans les deux sites, sans avoir a courir apres leur specificite. */
.achat-bloc,.achat-bloc span,.achat-bloc label,.achat-bloc p{color:#151a20 !important}
.achat-option span{flex:1;font-weight:normal}
.achat-bloc .achat-prix{color:#1c56a1 !important}
.achat-bloc .achat-option em{color:#1c56a1 !important}
.achat-bloc .achat-note{color:#5a6470 !important}
.achat-bloc .achat-cta{color:#f5f9fd !important;background:#1c56a1 !important}
.achat-option em{font-style:normal;font-size:14px;color:#1c56a1}
.achat-cta{display:block;width:100%;margin-top:16px}
.achat-note{font-size:13px;color:#5a6470;margin:12px 0 0}

/* L'entrée « Panier » ajoutée au menu de Toulouse Parapente : on la met en
   avant dès qu'elle contient quelque chose, sans changer son style de menu. */
.panier-plein > a{font-weight:bold !important}
.panier-compte{font-weight:bold}