/* ═══ ESSAI D — « À l'horizontale » ════════════════════════════════
   Demandé par François le 21/09/2026 : « un 4e proto qui forcerait les
   gens à passer en horizontal sur le mobile ».

   Ce qu'on peut vraiment faire, et ce qu'on ne peut pas
   ----------------------------------------------------
   AUCUN site ne peut faire tourner un téléphone. `screen.orientation.lock`
   n'existe pas sur iOS Safari, et sur Android il exige le plein écran
   accordé par un geste. On ne FORCE donc pas : on BARRE le passage en
   portrait, avec un écran plein qui explique et un téléphone qui pivote
   à l'image. Une sortie discrète reste offerte (« continuer quand même »),
   parce qu'un visiteur qui a bloqué la rotation de son appareil n'a pas à
   rester devant une porte close.

   Et en paysage, on retrouve la mise en page de l'ordinateur, à hauteur de
   téléphone : la montre à gauche sur toute la hauteur, les options à
   droite, le prix en pied de colonne. 844 × 390, c'est 844 px de large —
   plus large qu'une tablette en portrait. C'est la seule façon d'avoir la
   montre ENTIÈRE et les options EN MÊME TEMPS.
   ═══════════════════════════════════════════════════════════ */

/* ── Le barrage, en portrait seulement ─────────────────────── */
.essai-tourner{
  position:fixed;inset:0;z-index:2147481000;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:32px;text-align:center;
  background:var(--papier,#faf8f5);color:var(--encre,#111114)}
@media(max-width:900px) and (orientation:portrait){
  body.essai-d:not(.essai-d-passer) .essai-tourner{display:flex}
  body.essai-d:not(.essai-d-passer){overflow:hidden}
}
.essai-tourner-tel{
  width:74px;height:120px;border:2px solid currentColor;border-radius:12px;
  position:relative;animation:essai-pivote 2.6s ease-in-out infinite}
.essai-tourner-tel::after{
  content:'';position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  width:26px;height:3px;border-radius:2px;background:currentColor;opacity:.5}
@keyframes essai-pivote{
  0%,28%{transform:rotate(0)}
  52%,78%{transform:rotate(-90deg)}
  100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.essai-tourner-tel{animation:none;transform:rotate(-90deg)}}
.essai-tourner h2{
  font-family:var(--display,'Oswald',sans-serif);font-size:1.6rem;
  text-transform:uppercase;letter-spacing:.04em;margin:0}
.essai-tourner p{max-width:26ch;margin:0;color:var(--encre-doux,#55585f);line-height:1.5}
.essai-tourner button{
  background:none;border:0;padding:8px 4px;color:var(--encre-doux,#55585f);
  font:inherit;font-size:.78rem;text-decoration:underline;text-underline-offset:3px}

/* ── La mise en page de paysage ────────────────────────────── */
@media(max-width:900px) and (orientation:landscape){
  body.essai-d.cfg-etapes-on #cfg-reset{display:none}
  body.essai-d.cfg-etapes-on #cfg-atelier{
    padding-top:calc(var(--essai-h) + 4px);padding-bottom:0;
    height:100svh;overflow:hidden}
  /* Deux colonnes, comme sur l'ordinateur : la montre tient la gauche. */
  body.essai-d.cfg-etapes-on .cfg-atelier-in{
    display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);
    gap:0 14px;height:calc(100svh - var(--header) - var(--essai-h) - 10px);align-items:stretch;
    overflow:hidden}
  body.essai-d.cfg-etapes-on .cfg-visuel{
    position:static;grid-column:1;display:flex;flex-direction:column;
    justify-content:center;padding:0;border:0;border-right:1px solid var(--trait)}
  body.essai-d.cfg-etapes-on #cfg-scene{max-height:calc(100svh - var(--header) - var(--essai-h) - 74px)}
  body.essai-d.cfg-etapes-on #cfg-atelier{
    --cfg-large:min(100%,calc(100svh - var(--header) - var(--essai-h) - 74px))}
  body.essai-d.cfg-etapes-on .cfg-vue-barre{position:relative;background:none;padding:4px 10px}

  body.essai-d .cfg-panneau{
    grid-column:2;display:flex;flex-direction:column;min-height:0;height:100%}
  body.essai-d #cfg-sommaire.en-ligne{
    position:static;flex:0 0 auto;padding:0;margin:0;
    border-bottom:1px solid var(--trait);background:#fff}
  body.essai-d #cfg-sommaire.en-ligne .cfg-som-nav{
    flex:0 0 40px;width:40px;height:40px;background:#111114;color:#fff;
    border:0;border-radius:0;opacity:1}
  body.essai-d #cfg-sommaire.en-ligne .cfg-som-nav[disabled]{
    background:#fff;color:#111114;box-shadow:inset 0 0 0 1px var(--trait)}
  body.essai-d #cfg-sommaire.en-ligne button{min-height:40px}
  body.essai-d #cfg-composants{
    flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-right:8px}
  body.essai-d .cfg-barre{
    position:static;flex:0 0 auto;padding:6px 8px 6px 0;border-top:1px solid var(--encre)}
  body.essai-d #cfg-total{font-size:1.05rem}
  body.essai-d .cfg-finance-duree,
  body.essai-d #cfg-echeances{display:none}
  body.essai-d .cfg-bilan{display:none}
  body.essai-d .cfg-panneau-tete{display:none}
}

/* ── Correctifs après mesure ───────────────────────────────────────
   `.cfg-atelier-in` a TROIS enfants — le visuel, le rail, le panneau —
   et la grille à deux colonnes donnait donc sa propre case au rail. On
   pose deux colonnes ET deux rangées : la montre tient la gauche sur
   toute la hauteur, le rail coiffe les options à droite. */
@media(max-width:900px) and (orientation:landscape){
  body.essai-d.cfg-etapes-on .cfg-atelier-in{
    grid-template-rows:auto minmax(0,1fr)}
  body.essai-d.cfg-etapes-on .cfg-visuel{grid-row:1 / span 2}
  body.essai-d #cfg-sommaire.en-ligne{grid-column:2;grid-row:1}
  body.essai-d .cfg-panneau{grid-column:2;grid-row:2;margin:0}
  body.essai-d.cfg-etapes-on .cfg-retour{display:none}
}

/* ── Le plafond mesuré par la page ─────────────────────────────────
   `configurateur.html` mesure l'écart entre le haut des options et le haut
   du socle, et le pose en `--cfg-place` : `#cfg-composants` s'y plafonne.
   Ce calcul suppose la disposition d'origine — socle fixé au bas de la
   FENÊTRE, rail au-dessus. Cet essai déplace les meubles : le socle est
   sous les options, et l'écart mesuré tombe à quelques pixels. Le cadre se
   refermait alors à quatorze pixels de haut. Ici, c'est la boîte flex qui
   donne la hauteur — on retire le plafond. */
@media(max-width:900px){
  body.essai-d #cfg-composants{max-height:none}
}

/* ── La colonne de droite déborde par la gauche ────────────────────
   `.cfg-atelier-in` est un `.wrap` : il porte les gouttières de la page.
   Passé en grille, sa colonne de droite héritait d'enfants qui se calent
   sur toute la largeur du wrap — le rail et le titre sortaient par la
   gauche, sous la montre. On referme la colonne et on lui rend sa propre
   gouttière. */
@media(max-width:900px) and (orientation:landscape){
  body.essai-d.cfg-etapes-on .cfg-atelier-in{padding-inline:0}
  body.essai-d.cfg-etapes-on .cfg-visuel{padding-left:10px}
  body.essai-d #cfg-sommaire.en-ligne,
  body.essai-d .cfg-panneau{overflow:hidden}
  body.essai-d .cfg-panneau{padding-right:12px}
  body.essai-d #cfg-composants{
    flex:1 1 auto;min-height:0;overflow-y:auto;max-height:none;padding-top:2px}
  body.essai-d .cfg-tete-etape{margin-bottom:6px}
  body.essai-d .cfg-etape-nom{font-size:1.1rem}
  body.essai-d .cfg-etape-sous{font-size:.72rem;margin-top:3px}
  body.essai-d .cfg-option{width:clamp(66px,9vw,82px)}
  body.essai-d .cfg-mention{display:none}
}