/* ============================================================================
   ORAVOX — PRÉ-PLATEFORME · Fichier 3 sur 3 : les styles propres à la pré-plateforme.
   Tout le reste vient tel quel de la démo (css/oravox.css).
   ========================================================================== */

/* ---------- La lettre de Serge (à la place de la mise en garde) ----------
   Reprise exacte de la lettre de la porte de la démo (chiffrer.py) : bloc doré, double liseré, texte gravé dans l'or. */
#intro-html .vt-lettre{box-sizing:border-box;width:min(660px,100%);margin:12px auto 0;padding:58px 40px 16px;position:relative;text-align:left;border-radius:14px;
  background:linear-gradient(90deg,rgba(58,28,10,0) 0%,rgba(58,28,10,0) 78%,rgba(58,28,10,.30) 100%),linear-gradient(170deg,#CE9A57,#B8813F);
  border:2px solid #8A5E1E;box-shadow:inset 0 0 0 5px #C99350,inset 0 0 0 6.5px rgba(58,28,10,.55),0 0 0 1px #2A1210,0 14px 40px rgba(0,0,0,.6);}
#intro-html .vt-lettre p{margin:0 0 8px;text-align:left;font:400 15.5px/1.5 var(--title);color:#3A1C0A;letter-spacing:0;text-transform:none;
  text-shadow:0 1px 0 rgba(255,232,180,.45),0 -1px 0 rgba(58,28,10,.18);}
#intro-html .vt-lettre p.vt-sal{font:italic 400 25px/1.25 Georgia,'Times New Roman',serif;margin-bottom:8px;}
#intro-html .vt-lettre p.vt-fin{float:left;margin:2px 0 0;font-style:italic;}
#intro-html .vt-st{position:absolute;top:26px;right:34px;width:40px;height:40px;color:#4A2410;
  filter:drop-shadow(0 1px 0 rgba(255,232,180,.55)) drop-shadow(0 -1px 0 rgba(58,28,10,.25));}
#intro-html .vt-sig{display:flex;flex-direction:column;align-items:flex-end;margin-top:-50px;position:relative;}
#intro-html .vt-img{display:block;height:96px;width:auto;margin:-14px 0 -8px 0;opacity:.95;transform:translate(-46px,12px) scale(1.18);transform-origin:right bottom;}
#intro-html .vt-nom{font:400 21px/1.15 Georgia,'Times New Roman',serif;color:#3A1C0A;text-shadow:0 1px 0 rgba(255,232,180,.45);position:relative;z-index:1;margin-top:-1px;}
#intro-html .vt-role{margin-top:-1px;font:700 11px/1.3 var(--title);letter-spacing:.16em;text-transform:uppercase;color:#5A2C14;text-shadow:0 1px 0 rgba(255,232,180,.35);}
#intro-html .vt-role2{margin-top:-2px;letter-spacing:.06em;text-transform:none;font-weight:600;}
#intro-html .vt-role2 a{color:#5A2C14;text-decoration:underline;text-underline-offset:2px;}
/* La lettre n'est jamais plus large que l'écran, et toujours centrée */
#intro-html .ih-col{max-width:100%;}
#intro-html .vt-lettre{max-width:calc(100vw - 32px);}
#intro-html .ih-droits{margin-top:14px;}
@media (max-width:520px){
  #intro-html .vt-lettre{padding:44px 18px 16px;width:100%;max-width:none;}
  #intro-html .vt-lettre p{font-size:15.3px;}
  #intro-html .vt-lettre p.vt-sal{font-size:22px;}
  #intro-html .vt-lettre p.vt-fin{float:none;margin:6px 0 0;}
  #intro-html .vt-sig{margin-top:-6px;}
  #intro-html .vt-img{height:80px;margin-top:-6px;transform:translate(-26px,6px) scale(1.14);}
  #intro-html .vt-nom{font-size:19px;}
  #intro-html .vt-st{top:12px;right:16px;width:30px;height:30px;}
  /* 2 nov. (Serge) : lettre un peu plus grasse, plus lisible sur le fond doré */
  #intro-html .vt-lettre p{-webkit-text-stroke:.3px currentColor;color:#2E1405;font-size:16.2px;line-height:1.36;margin-bottom:7px;}
  /* lettre moins haute (pas la typo) pour voir le bouton d'entrée */
  #intro-html .vt-lettre{padding-top:30px!important;padding-bottom:12px!important;margin-top:4px!important;}
  #intro-html .vt-lettre p.vt-sal{font-size:22px;margin-bottom:4px;}
  #intro-html .vt-img{height:62px!important;margin-top:-4px!important;}
  #intro-html .vt-st{top:10px!important;width:24px!important;height:24px!important;}
  /* page d'entrée : logo, lettre, droits et bouton serrés ensemble, le groupe centré dans l'écran
     (la colonne est réduite à 0,8 par la démo, d'où la division) */
  #intro-html .ih-col{min-height:calc((100dvh - 22px - 40px) / .8);box-sizing:border-box;justify-content:center!important;}
  #intro-html .ih-tete{margin-top:0!important;margin-bottom:14px!important;}
  #intro-html .vt-lettre{margin-top:0!important;}
  #intro-html .ih-droits{margin-bottom:0!important;}
  #intro-html .vt-entrer{margin-top:18px!important;margin-bottom:0!important;flex-shrink:0;}
  /* essai (2 nov., Serge) : le bouton juste sous la lettre, les droits réservés en dessous */
  #intro-html .ih-tete{order:1;} #intro-html .vt-lettre{order:2;} #intro-html .vt-entrer{order:3;} #intro-html .ih-droits{order:4;margin-top:16px!important;}
  #intro-html .vt-lettre p.vt-sal{-webkit-text-stroke:.3px currentColor;}
  /* bouton « Bienvenue dans un monde sans écrans » : plus haut, texte plus grand */
  #intro-html .vt-entrer, #intro-html .vt-entrer *{font-size:clamp(17px, 5.1vw, 21px)!important;line-height:1.15!important;}
  #intro-html .vt-entrer{height:auto!important;min-height:62px!important;padding:12px 14px!important;letter-spacing:.02em;}
}

/* ---------- Le panneau « Accès réservé » (à la place du module de connexion) ---------- */
.vt-shell .mx-t{font-size:26px;line-height:32px;}
.vt-shell .vt-p{width:100%;margin:8px 0 0;text-align:center;font-family:var(--title);font-size:14.5px;line-height:1.4;font-weight:600;color:#4a2424;}
.vt-shell .vt-adr{display:block;margin:10px 0 10px;font-family:var(--title);font-size:15px;font-weight:700;letter-spacing:.04em;color:#4a2424;text-decoration:underline;text-underline-offset:3px;}
/* Téléphone (2 nov., Serge) : titre sur une ligne, sous le logo ; module plus large, texte deux fois plus lisible */
@media (max-width:600px){
  .vt-scene > .myp-head.of-titre{margin:23px 0 20px!important;padding-right:0!important;justify-content:center!important;}   /* titre centré entre le logo du haut et le module */
  .vt-scene .myp-title{white-space:nowrap;font-size:min(34px,7.4vw);line-height:1.15;}
  .cx-scene.of-cx.vt-scene .mx-shell.vt-shell{width:min(360px,calc(100vw - 24px));padding:0 0 40px;container-type:inline-size;}
  .vt-shell .mx-in{padding-top:17.9cqw;box-sizing:border-box;}   /* haut du logo posé sur la fine ligne brune du cadre, quelle que soit la largeur */
  .vt-shell .mx-in{width:77%;}
  .vt-shell .mx-logo{width:44%;margin-bottom:0;}
  .vt-shell .mx-t{margin-top:6px;font-size:30px;line-height:34px;}
  .vt-shell .vt-p{font-size:18px;line-height:1.24;font-weight:700;margin-top:13px;}
  .vt-shell .vt-adr{font-size:18px;margin:6px 0 0;}
  .vt-shell .mx-bas{margin-bottom:44px;}
  .vt-shell .mx-haut{flex:1;min-height:0;}   /* le texte se centre dans la place libre entre le logo et le bouton (taille ajustée par vitrine.js) */
  .vt-shell .mx-t{margin-top:28px!important;}
  .vt-shell .vt-p + .vt-p{margin-top:14px;}   /* de l'air entre les deux paragraphes */
  .vt-shell .vt-adr{margin-top:8px!important;}
  .cx-scene.of-cx.vt-scene .mx-shell.vt-shell{zoom:.74!important;}   /* module un peu plus petit : plus d'air au-dessus du micro */
}
/* module 8 % plus petit que celui de la démo, y compris sur les petits écrans (où la démo le réduit déjà) */
@media (max-width:600px) and (orientation:portrait) and (max-height:800px){ .cx-scene.of-cx.vt-scene .mx-shell.vt-shell{zoom:.72!important;} }
@media (max-width:600px) and (orientation:portrait) and (max-height:700px){ .cx-scene.of-cx.vt-scene .mx-shell.vt-shell{zoom:.62!important;} }
@media (min-width:420px) and (max-width:600px){ .ac-wrap:has(> .vt-scene){margin-bottom:-33px;} }   /* micro à la hauteur de l'accueil */
@media (max-width:375px){ .vt-shell .vt-p{font-size:15.5px;line-height:1.24;} .vt-shell .mx-t{font-size:26px;line-height:30px;} }

/* ---------- Ce que la pré-plateforme ne montre pas ---------- */
.porte-retour,#formatsBtn,#ver{display:none!important;}