/*
Fichier : css_pub_carrousel.css
Chemin  : D:\speedclicV2\www\assets\css\css_pub_carrousel.css
Role    : LE CARROUSEL DE LA ZONE PUBLICITAIRE de la colonne droite.

          Sa propre feuille, et non trois regles ajoutees a speedclic_layout.css :
          celle-la porte deja toute la page d'accueil, et une publicite est un module
          (regles 37-39). Elle ne part QUE sur les ecrans publics qui portent la zone.

          IL NE TOUCHE PAS A LA ZONE ELLE-MEME. .sc-right-ads (330 px), .sc-big-ad et
          .sc-pub-photo restent ou elles sont, telles qu'elles sont : le carrousel se
          glisse DEDANS. Ramon, 15/08 : « il est interdit de retoucher aux boites. »

          LES SLIDES SONT EMPILES, un seul visible. Empiles et non caches par
          display:none : l'image suivante est deja chargee et decodee quand vient son
          tour, donc la rotation ne fait pas clignoter la colonne toutes les 30 s.

Ecrit le: 18/08/2026
*/

/* ═══ QUI SE DIMENSIONNE : L'IMAGE, PAS LE CADRE (18/08/2026) ═══
   Ramon : « pour toujours remplir sa zone proportionnellement », puis « en basse
   resolution cela va s'ecraser non ? ».

   J'AI D'ABORD ESSAYE DE DONNER AU CADRE LE RAPPORT DU PRODUIT (aspect-ratio) AVEC UN
   PLAFOND DE HAUTEUR. MESURE A L'ECRAN : ca ne marche pas. Une largeur fixee a 100 %
   l'emporte sur aspect-ratio ; max-height rabote alors la hauteur SANS reduire la
   largeur, et le cadre se retrouve au rapport 330/393 au lieu de 330/493. Le rapport
   qu'on voulait proteger etait justement celui qu'on cassait.

   LA BONNE PIECE EST L'IMAGE. Avec max-width/max-height a 100 % et des dimensions AUTO,
   le navigateur la met a la plus grande taille qui entre dans la zone, EN GARDANT SON
   RAPPORT NATUREL — c'est sa regle a lui, il ne peut pas la casser :
     - fenetre haute  -> l'image fait toute la largeur, une dimension est pleine ;
     - fenetre basse  -> elle retrecit proportionnellement, entiere, jamais coupee ;
     - jamais, dans aucun cas, ecrasee ni deformee.
   Et le vide eventuel tombe EN DESSOUS (align-items: flex-start) au lieu de se partager
   au-dessus et au-dessous : l'emplacement vendu commence en haut de la zone.

   Aucune dimension de produit n'a besoin d'arriver jusqu'ici : l'image PORTE deja son
   format, puisque le serveur l'a mise au format de l'emplacement avant de l'ecrire.
   Une piece en moins a tenir a jour. */
/* LE CADRE EST LA ZONE, ET C'EST L'IMAGE QUI SE DIMENSIONNE DEDANS.

   J'AI ESSAYE, CE SOIR ENCORE, DE DONNER AU CADRE LE RAPPORT DE L'EMPLACEMENT
   (aspect-ratio + max-height). MESURE, TROISIEME DEMENTI : zone 330x393, cadre obtenu
   330x393 — rapport 0,840 au lieu de 0,669. Une largeur a 100 % l'emporte sur
   aspect-ratio, et max-height rabote la hauteur sans toucher a la largeur.

   AUCUNE COMBINAISON CSS NE FAIT « la plus grande boite de rapport R qui entre dans ce
   conteneur » : height:100% + max-width casse dans un sens, width:100% + max-height dans
   l'autre. C'est l'IMAGE qui sait se dimensionner, pas la boite.

   DONC : le cadre prend la zone, l'image se dimensionne dedans — et elle le fait comme
   le decor, par object-fit: cover (voir plus bas). */
/* ═══ LE CADRE EST LA ZONE, COMME POUR LE DECOR ═══
   Ramon, 18/08/2026 : « on a dit qu'on remplissait comme les pubs [les decors] ».

   J'AVAIS DONNE AU CADRE LE RAPPORT DE L'EMPLACEMENT (aspect-ratio). Resultat a l'ecran :
   un bloc de 345 x 470 et du BLANC en dessous, parce que la colonne est plus haute. Ce
   n'est pas ce qui a ete demande. Le decor, lui, prend TOUTE la zone depuis toujours, et
   la publicite doit se comporter comme lui — c'est la consigne, repetee deux fois.

   DONC : le cadre prend la zone entiere, et l'image la remplit par object-fit: cover.
   Aucun blanc, jamais, sur aucun ecran. Ce qui depasse sort du cadre — exactement comme
   un decor trop grand, et c'est le comportement valide.

   LE FORMAT DU CATALOGUE (345 x 470, fichier demande 690 x 940) reste ce qu'il est : la
   taille de la zone sur l'ecran de reference. Il dit au professionnel quelle image
   fournir pour que rien d'important ne se retrouve au bord — il ne commande plus la
   forme du cadre. */
.sc-pub-carrousel {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Tous au meme endroit, empiles. Le fondu ne dure pas : a 30 s d'intervalle, une
   transition longue se remarquerait plus que le changement lui-meme. */
.sc-pub-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease-in-out;
}
.sc-pub-slide.sc-pub-actif {
    opacity: 1;
    visibility: visible;
}

/* Le lien remplit son slide : c'est toute l'image qui est cliquable, pas une zone
   approximative au milieu. */
/* Le lien remplit son slide : c'est toute l'image qui est cliquable, pas une zone
   approximative au milieu. */
.sc-pub-slide > a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Le decor et la publicite se comportent desormais PAREIL — c'est la consigne du 18/08.
   Le decor garde son object-fit: cover d'origine, et la publicite le reprend. */
/* ═══ LA PUBLICITE SE DIFFUSE COMME LE DECOR ═══
   Ramon, 18/08/2026 : « nos images Decors Pub ont rempli a 100 % cet espace ; jusqu'a
   present les pros doivent etre diffuses de la meme facon que les decors Pub. »

   Le decor emploie object-fit: cover depuis toujours — c'est ce qui le fait remplir la
   zone entierement, quelle que soit la fenetre. La publicite prend donc la MEME regle :
   deux contenus au meme endroit ne peuvent pas se comporter de deux facons.

   CE QUE cover FAIT, DIT SANS DETOUR : il agrandit l'image jusqu'a couvrir la zone et
   laisse SORTIR ce qui depasse. Rien n'est deforme — le rapport est intact — mais ce qui
   deborde n'est pas montre. La zone est pleine a 100 %, toujours.

   CE QUI DECIDE DE LA COUPE, C'EST L'ECART ENTRE LE RAPPORT DE LA ZONE ET CELUI DU
   FORMAT VENDU. Le jour ou les deux coincident, cover ne coupe plus rien : il remplit,
   point. C'est la seule variable qui reste, et elle se regle sur le format du catalogue,
   pas ici. */
.sc-pub-carrousel .sc-pub-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #ffffff;
    display: block;
}

/* CELUI QUI NE PEUT PAS VOIR LE MOUVEMENT NE LE SUBIT PAS. Le fondu disparait ; la
   rotation, elle, continue — c'est du contenu, pas une decoration. */
@media (prefers-reduced-motion: reduce) {
    .sc-pub-slide { transition: none; }
}

/* === FIN DU FICHIER : D:\speedclicV2\www\assets\css\css_pub_carrousel.css === */