/* ⚠️ 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). */

/* ⚠️ `width:100%` + rembourrage + bordure = 26 px de DEBORDEMENT hors du
   cadre, parce que le site de 2012 ne pose aucun `box-sizing` global. Les
   champs sortaient de leur encadre bleu sur la droite. Releve par Adrien le
   18/09/2026, capture a l'appui. On pose la regle sur NOTRE bloc uniquement :
   le reste de la page garde son modele de boite d'origine. */
.tunnel-corps,.tunnel-corps *,.tunnel-corps *::before,.tunnel-corps *::after{box-sizing:border-box}

.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}

/* Complement d'achat sur voler-en-parapente : la fiche porte deja son bouton
   (`#but`, en absolu sur la photo) et son prix (l'ecusson). On n'ajoute que
   les options, sous la photo, dans la largeur du cadre du site (870 px). Le
   bouton d'origine reste le declencheur. */
.achat-complement{max-width:none;margin:14px 0 24px}
.achat-titre{font-size:17px;font-weight:bold;margin:0 0 10px;color:#1c56a1}
.achat-bloc .achat-titre{color:#1c56a1 !important}

/* Pages de texte servies par le gabarit du site (mentions legales…) : le
   gabarit d'origine n'a aucun style pour des titres de niveau 2 dans le corps,
   et tout se colle. */
.page-contenu h2{margin:26px 0 10px;font-size:20px;font-weight:bold}
.page-contenu h2:first-child{margin-top:10px}
.page-contenu p{margin:0 0 12px}
.page-contenu ul{margin:0 0 14px 20px;padding:0}
.page-contenu li{margin-bottom:5px}

/* Ajout au panier en cours : le bouton dit qu'il travaille. Discret — l'aller-
   retour dure quelques dizaines de millisecondes, une animation serait un
   clignotement. */
.achat-en-cours,[aria-busy="true"]{opacity:.55;pointer-events:none}
/* ⚠️ L'animation ne DEPLACE pas le bandeau, elle ne fait que le reveler. Une
   animation interrompue — onglet en arriere-plan, navigateur qui gele le
   compositeur — laisserait sinon le bandeau decale de quelques pixels vers le
   haut, a moitie hors de l'ecran. Sur l'opacite seule, le pire des cas est un
   bandeau deja visible. */
.tp-ajout{animation:tp-ajout-entree .18s ease-out both}
@keyframes tp-ajout-entree{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tp-ajout{animation:none}}
/* Le bandeau pose par le script arrive apres un clic, souvent au milieu de la
   page : fixe en haut de la fenetre, il est vu sans que la page bouge. */
.tp-ajout-flottant{position:fixed;top:0;left:0;right:0;z-index:9999;
  box-shadow:0 2px 10px rgba(0,0,0,.28)}

/* ⚠️ Le bouton « Retirer » n'avait pas de curseur de main : sans bordure ni
   fond, rien ne disait qu'il etait cliquable. Releve par Adrien le 18/09/2026. */
.tunnel-retrait button{cursor:pointer}
.tunnel-retrait button:hover{color:#b94a48;text-decoration:underline}

/* L'etat « ajoute » du bouton d'achat : le retour visuel la ou l'oeil est
   deja, au moment du clic. Les boutons d'origine du site sont des `div`, on ne
   peut donc pas compter sur leurs styles de bouton. */
.achat-fait{background:#3f8f46 !important;background-image:none !important;
  color:#fff !important;border-color:#3f8f46 !important;transition:background .15s}
.achat-fait strong,.achat-fait em,.achat-fait span{color:#fff !important;font-weight:700}