/* ============================================================
   SAMEY — scenes.css (thème enfant, 19/08/2026)
   Géométrie des scènes de la maquette Claude Design, portée en CLASSES pour
   Elementor free (la maquette la posait en styles en ligne : 309 sur l'Accueil).
   Une classe = un rôle. motion.css fait bouger, ce fichier dispose.
   Spécificité .e-con.xxx : Elementor pose ses propres width/position sur .e-con.
   ============================================================ */

/* ---- Scène : le wrapper donne la longueur de défilement, la stage est épinglée ---- */
.e-con.m-scene,.e-con[class*="m-scene-"]{padding:0;margin:0;max-width:none;--content-width:100%}
/* 01/09 (verdict lot 4, S-10) : hero 170→135, words 185→140, steps 215→170 — validé par
   captures p=1 aux trois largeurs ; les updaters finissent à p≈0,8-0,95, le surplus de
   wrapper n'était que du défilement mort entre la fin de l'animation et le dé-épinglage. */
.e-con.m-scene-hero{height:135vh}
.e-con.m-scene-strip{height:225vh}
.e-con.m-scene-columns{height:280vh}
.e-con.m-scene-words{height:140vh}
.e-con.m-scene-steps{height:170vh}
.e-con.m-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;width:100%;max-width:none;padding:0}
/* hors pin (mobile, tactile, reduced) : motion.css remet la stage en static et le wrapper en auto */

/* ---- Bande (strip) ---- */
.e-con.m-stage.m-stage-strip{flex-direction:column;justify-content:center;gap:32px}
.e-con.m-strip-copies{display:grid;padding:0 var(--marge-page,48px);width:100%}
.e-con.m-strip-copy{grid-area:1/1;flex-direction:column;gap:12px;padding:0;width:100%}
.e-con.m-strip-rows{flex-direction:column;gap:20px;width:100%;overflow-x:clip}
.e-con.m-strip-a,.e-con.m-strip-b{flex-direction:row;flex-wrap:nowrap;gap:20px;width:max-content;max-width:none;padding-left:var(--marge-page,48px)}
.e-con.m-strip-b{padding-left:0;padding-right:var(--marge-page,48px)}
.m-strip-a .m-frame,.m-strip-b .m-frame{flex:0 0 auto;height:clamp(180px,30vh,340px);border-radius:var(--rayon-image,4px);overflow:hidden;background:var(--photo-1,#E9DFD0);width:auto}
.m-frame .elementor-widget-container,.m-frame img{width:100%;height:100%;display:block}
.m-frame img{object-fit:cover;border-radius:0!important}

/* ---- Ratios d'image (classe sur le widget, le wrapper porte la proportion) ---- */
.m-r-3-2{aspect-ratio:3/2}.m-r-2-3{aspect-ratio:2/3}.m-r-4-5{aspect-ratio:4/5}.m-r-5-4{aspect-ratio:5/4}
.m-r-1-1{aspect-ratio:1/1}.m-r-16-9{aspect-ratio:16/9}.m-r-4-3{aspect-ratio:4/3}.m-r-6-7{aspect-ratio:6/7}

/* ---- Sur-titre et texte de scène ---- */
.m-surtitre .elementor-heading-title{font-size:var(--sur-titre,12px);font-weight:600;letter-spacing:var(--sur-titre-ls,.2em);text-transform:uppercase;color:var(--gris-texte,#6B655C)}

/* Palier entre deux fonds (S-10, verdict lot 4) : sous 1025 les scènes sont dépliées et
   words (encre) touchait steps (crème) bord à bord (0 px mesuré à 390 et 768).
   07/09 — LE REMÈDE ÉTAIT AU MAUVAIS ENDROIT. Le mal n'est pas entre les sections,
   il est DEDANS : la ligne 10 pose padding:0 sans condition, ce qui est sans effet
   tant que la scène fait 140vh et centre son contenu, mais colle le texte aux deux
   bords dès que motion.css la replie en height:auto. Mesuré à 390 : « La lumière »
   avait 0 px de creux en haut ET en bas, « Le déroulé » 1 px, quand les sections
   saines du même Accueil tiennent entre 24 et 118 px (médiane 70). D'où une bande
   noire compressée suivie d'un vide crème de 64 px, signalé par Ronaldo.
   On rend donc leur respiration aux scènes dépliées, et la marge externe s'en va :
   deux aplats de couleur qui se touchent ne sont pas un défaut, du texte collé au
   bord en est un. */
@media (max-width:1024px){
  .e-con.m-scene,.e-con[class*="m-scene-"]{padding-block:var(--respire-scene,72px)}
  /* la scène du héros garde ses propres règles : mobile.js l'anime seul (html.m-vif) */
  .e-con.m-scene-hero{padding-block:0}
  /* colonnes : elle portait déjà 57/56 px de creux mesurés, la dose pleine la
     poussait à 149/126, plus large que toute autre section de l'Accueil. */
  .e-con.m-scene-columns{padding-block:0}
}

@media (max-width:767px){
  .e-con.m-strip-copies{padding:0 var(--marge-page-mobile,20px)}
  .e-con.m-strip-a{padding-left:var(--marge-page-mobile,20px)}
  .e-con.m-strip-b{padding-right:var(--marge-page-mobile,20px)}
  .m-strip-a .m-frame,.m-strip-b .m-frame{height:clamp(140px,24vh,220px)}
}
@media (min-width:768px) and (max-width:1024px){
  .e-con.m-strip-copies{padding:0 var(--marge-page-tablette,36px)}
  .e-con.m-strip-a{padding-left:var(--marge-page-tablette,36px)}
}