/* Page Instructeur Mantrailing : le CSS du design v4 d'Aurélien (New
   Mantrailing2, 25/08/2026), porté tel quel et scopé .savoir-mt. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,400;0,500;0,600;1,400&display=swap');

  html, .savoir-mt { margin: 0; padding: 0; background: #D8D8D4; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  .savoir-mt a { color: #0E3A44; text-decoration: none; }
  .savoir-mt a:hover { color: #0E3A44; }
  summary { list-style: none; cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  image-slot:not([data-filled]):hover + [data-veil] { opacity: 0.16 !important; }
  @keyframes dvdPulse {
    0% { box-shadow: 0 0 0 0 rgba(255,214,10,0.75); }
    100% { box-shadow: 0 0 0 26px rgba(255,214,10,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    [data-bar] { transition: none !important; }
    [data-bar][data-w="25%"] { width: 25% !important; }
    [data-bar][data-w="50%"] { width: 50% !important; }
    [data-bar][data-w="75%"] { width: 75% !important; }
    [data-bar][data-w="100%"] { width: 100% !important; }
    [data-trail] { clip-path: none !important; }
    [data-paw] { opacity: 1 !important; }
  }

/* Le formulaire de pré-inscription, dans la carte claire de la section
   « Comment m'inscrire » : libellés en capitales Archivo, champs à filet,
   bouton jaune signal du design. */
.savoir-mt .savoir-interesse__form label { font-family: 'Archivo Black', Archivo, sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #0E3A44; }
.savoir-mt .savoir-interesse__form input[type="text"],
.savoir-mt .savoir-interesse__form input[type="email"],
.savoir-mt .savoir-interesse__form input[type="tel"] { width: 100%; border: 0; border-bottom: 2px solid #0E3A44; background: transparent; padding: 10px 2px; font-size: 16px; border-radius: 0; }
.savoir-mt .savoir-interesse__form input:focus { outline: none; border-bottom-color: #FFD60A; box-shadow: none; }
.savoir-mt .savoir-interesse__form .form-item { margin: 0 0 16px; }
.savoir-mt .savoir-interesse__form .description { font-size: 12.5px; color: #6B6B66; }
.savoir-mt .savoir-interesse__form button[type="submit"],
.savoir-mt .savoir-interesse__form input[type="submit"] { width: 100%; background: #FFD60A; color: #0E3A44; border: 0; font-family: 'Archivo Black', Archivo, sans-serif; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; padding: 18px 24px; cursor: pointer; }
.savoir-mt .savoir-interesse__form button[type="submit"]:hover,
.savoir-mt .savoir-interesse__form input[type="submit"]:hover { background: #FAFAF7; }
.savoir-mt .form-item--error-message.invalid-feedback { color: #B3261E; font-size: 13px; }

/* La révélation se fait par classe : les styles en ligne restent
   intacts, les sélecteurs mobiles par sous-chaîne continuent de matcher. */
/* Règle d'or : le contenu est visible par défaut. Le design pose
   opacity:0 en style en ligne pour ses apparitions, mais si le script
   ne tourne pas, ou tourne au mauvais moment (onglet ouvert en second
   plan, retour par le cache du navigateur, position restaurée après un
   rechargement), rien ne viendrait le rallumer et les tarifs
   resteraient invisibles. Le masquage n'a donc lieu que si le script a
   posé mt-anime, c'est-à-dire s'il est bien là pour révéler ensuite. */
.savoir-mt [data-reveal] { opacity: 1 !important; transform: none !important; }
.savoir-mt.mt-anime [data-reveal]:not(.mt-revele) { opacity: 0 !important; transform: translateY(22px) !important; }
.savoir-mt .mt-revele { opacity: 1 !important; transform: none !important; }
/* Coupe-circuit d'un instant : les transitions ne progressent pas dans
   un onglet en second plan et peuvent rester figées à leur valeur de
   départ. Au retour, on les neutralise le temps d'un rendu, par classe
   et jamais en écrivant dans l'attribut style. */
.savoir-mt .mt-sans-transition { transition: none !important; }

/* ── La couche mobile ────────────────────────────────────────────────────
   Le design v4 est une planche de bureau : paddings de 88 px, colonnes en
   pixels, titres de 120 px, tout en styles en ligne. Cette couche les
   reprend au global : sous 900 px les grilles tombent en colonne unique,
   les paddings respirent, les titres se calment ; sous 620 px on resserre
   encore. Les !important sont assumés : il faut battre les styles en
   ligne du design. */
@media (max-width: 900px) {
  .savoir-mt section { padding-left: 24px !important; padding-right: 24px !important; }
  .savoir-mt section[style*="padding:76px 88px"],
  .savoir-mt section[style*="padding:80px 88px"],
  .savoir-mt section[style*="padding:84px 88px"],
  .savoir-mt section[style*="padding:88px 88px"],
  .savoir-mt section[style*="padding:96px 88px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  .savoir-mt [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .savoir-mt h1 { font-size: clamp(44px, 13vw, 72px) !important; }
  .savoir-mt h2 { font-size: clamp(28px, 8vw, 38px) !important; }
  .savoir-mt [style*="font-size:76px"] { font-size: 52px !important; }
  .savoir-mt [style*="font-size:26px"] { font-size: 19px !important; }
  .savoir-mt [style*="font-size:24px"] { font-size: 18px !important; }
  .savoir-mt img[style*="height:520px"], .savoir-mt img[style*="height:440px"],
  .savoir-mt img[style*="height:420px"], .savoir-mt img[style*="height:380px"] { height: auto !important; object-fit: contain !important; object-position: center !important; }
  .savoir-mt [style*="width:560px"] { width: 100% !important; }
  .savoir-mt div[style*="height:420px"] { height: auto !important; }
  .savoir-mt [style*="min-height:210px"] { min-height: 0 !important; }
  .savoir-mt svg[width="1180"] { width: 100%; height: auto; }
  .savoir-mt [data-paw] { display: none; }
  /* Les bandes photos pleine largeur du design : 1180 px fixes avec une
     marge de -88 px pour saigner aux bords de la planche. Sur mobile elles
     saignent aux bords de l'écran, ni plus ni moins. */
  .savoir-mt [style*="width:1180px"][style*="-88px"] { width: calc(100% + 48px) !important; margin-left: -24px !important; }
  .savoir-mt [style*="margin:32px -88px"], .savoir-mt [style*="margin:24px -88px"] { margin-left: -24px !important; margin-right: -24px !important; }
  .savoir-mt [style*="height:380px"][style*="width:1180px"], .savoir-mt [style*="height:520px"][style*="width:1180px"],
  .savoir-mt [style*="height:420px"][style*="width:1180px"], .savoir-mt [style*="height:440px"][style*="width:1180px"] { height: auto !important; }
  .savoir-mt [style*="width:1180px"] img { width: 100% !important; height: auto !important; }
  /* Toutes les largeurs figées du design passent au fluide : panneaux,
     photos des formateurs, colonnes de texte. Les hauteurs suivent. */
  .savoir-mt [style*="width:1004px"], .savoir-mt [style*="width:900px"],
  .savoir-mt [style*="width:860px"], .savoir-mt [style*="width:760px"],
  .savoir-mt [style*="width:620px"], .savoir-mt [style*="width:560px"],
  .savoir-mt [style*="width:490px"], .savoir-mt [style*="width:380px"],
  .savoir-mt [style*="max-width:860px"], .savoir-mt [style*="max-width:620px"] { width: 100% !important; max-width: 100% !important; }
  /* La dalle vidéo : hauteur pilotée par le ratio 16/9, jamais écrasée
     (un iframe en height:100% d'un parent en auto tomberait à zéro). */
  .savoir-mt [style*="height:565px"] { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; }
  .savoir-mt [style*="height:612px"] { height: auto !important; aspect-ratio: 4 / 5; }
  /* Les 9 certifiées : deux par rangée, portraits gardés en 3:4 entier. */
  .savoir-mt img[style*="width:200px"] { width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; object-fit: cover; }
  /* Chaque bande photo garde son ratio d'origine : l'image s'affiche
     entière, et l'espace est réservé avant même le chargement paresseux
     (sans ratio, une image pas encore chargée s'effondre à zéro). */
  .savoir-mt img[src*="hero-piste"] { aspect-ratio: 1200 / 675; }
  .savoir-mt img[src*="mantrailing-binome"] { aspect-ratio: 1200 / 900; }
  .savoir-mt img[src*="photo-formation"] { aspect-ratio: 1180 / 420; }
  .savoir-mt img[src*="photo-terrain"] { aspect-ratio: 1200 / 675; }
  .savoir-mt img[src*="photo-debriefing"] { aspect-ratio: 1200 / 973; }
  .savoir-mt img[src*="photo-examen"] { aspect-ratio: 760 / 428; }
  .savoir-mt img[src*="photo-planning"] { aspect-ratio: 560 / 420; }
  .savoir-mt img[src*="hero-piste"], .savoir-mt img[src*="mantrailing-binome"],
  .savoir-mt img[src*="photo-formation"], .savoir-mt img[src*="photo-terrain"],
  .savoir-mt img[src*="photo-debriefing"], .savoir-mt img[src*="photo-examen"],
  .savoir-mt img[src*="photo-planning"] { object-fit: cover !important; }
}
@media (max-width: 900px) and (min-width: 621px) {
  .savoir-mt [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr 1fr !important; }
  .savoir-mt [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 620px) {
  .savoir-mt section { padding-left: 18px !important; padding-right: 18px !important; }
  .savoir-mt [style*="width:1180px"][style*="-88px"] { width: calc(100% + 36px) !important; margin-left: -18px !important; }
  .savoir-mt [style*="margin:32px -88px"], .savoir-mt [style*="margin:24px -88px"] { margin-left: -18px !important; margin-right: -18px !important; }
  .savoir-mt [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr 1fr !important; }
  .savoir-mt [style*="padding:36px 32px"] { padding: 26px 20px !important; }
  .savoir-mt [style*="font-size:120px"] { font-size: 44px !important; }
}

/* Le signe des questions : plus quand c'est fermé, moins quand la
   réponse est dépliée. Le texte du gabarit s'efface et le pseudo
   élément prend le relais. */
.savoir-mt details[open] .mt-faq-signe { font-size: 0 !important; }
.savoir-mt details[open] .mt-faq-signe::after { content: "−"; font-size: 22px; line-height: 1.2; }