/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* =====================================================================
   Styles SNIC — thème partagé par tous les sites du réseau
   (www.snic.tech, sig, connectique, snic-rail).
   Conventions du design system : préfixe .snic-*
   ===================================================================== */

/* ---------------------------------------------------------------------
   Carrousel d'images en mode couverture

   Le widget « Image Carousel » d'Elementor n'expose aucune option
   object-fit : les images gardent leur hauteur naturelle. Cette classe
   force chaque visuel à remplir toute la surface du slide, recadré au
   centre plutôt que déformé.

   À poser sur le widget, dans Avancé > Classes CSS : snic-carousel-cover

   La hauteur n'est volontairement pas imposée ici, pour ne pas empêcher
   de la définir depuis Elementor. Deux façons de la donner :
     - mettre le conteneur parent en « Align items : stretch », le
       carrousel prend alors la hauteur de la colonne voisine ;
     - ou ajouter la classe .snic-carousel-h ci-dessous pour une hauteur
       responsive prête à l'emploi.
   --------------------------------------------------------------------- */
.snic-carousel-cover .elementor-image-carousel-wrapper,
.snic-carousel-cover .swiper,
.snic-carousel-cover .swiper-wrapper,
.snic-carousel-cover .swiper-slide {
	height: 100%;
}

/* Elementor enveloppe chaque image dans un <figure> qui porte des marges
   par défaut, à neutraliser sans quoi l'image ne peut pas remplir. */
.snic-carousel-cover .swiper-slide-inner {
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: inherit;
}

.snic-carousel-cover .swiper-slide-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Hauteur responsive optionnelle, à composer avec la classe précédente :
   snic-carousel-cover snic-carousel-h */
.snic-carousel-h {
	height: clamp(280px, 38vw, 520px);
}

/* ---------------------------------------------------------------------
   Carrousel calé sur la hauteur de la colonne voisine

   Pour les sections en deux moitiés — visuel d'un côté, texte de l'autre —
   où l'image doit descendre exactement jusqu'en bas du bloc de texte, dont
   la hauteur dépend du contenu et de la largeur d'écran.

   Le widget garde sinon la hauteur naturelle de ses images : ni le
   « stretch » du conteneur ni une hauteur en pourcentage ne l'atteignent,
   faute de hauteur définie à remonter. On le passe donc lui-même en
   colonne flex pour que sa mécanique interne suive l'étirement.

   À poser sur le widget, avec snic-carousel-cover :
   snic-carousel-cover snic-carousel-fill
   Le conteneur parent doit être en direction « ligne » et « align items :
   étirer ». Ne pas y ajouter snic-carousel-h, qui figerait la hauteur.
   --------------------------------------------------------------------- */
.snic-carousel-fill {
	align-self: stretch;
	flex-grow: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* min-width: 0 est indispensable : en flex item, la largeur minimale
   automatique vaut la taille du contenu, soit ici la bande complète des
   diapositives — 16 500 px pour cinq visuels. Swiper mesure cette largeur
   à l'initialisation et en déduit des diapositives géantes. */
.snic-carousel-fill > .elementor-widget-container,
.snic-carousel-fill > .elementor-image-carousel-wrapper {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 0;
}

/* Une fois les deux moitiés empilées, il n'y a plus de voisine dont hériter
   la hauteur : le carrousel reprendrait celle de ses images sur toute la
   largeur de l'écran, soit près de 1000 px. On la borne. La valeur reste
   surchargeable depuis Elementor si la section demande autre chose. */
@media (max-width: 767px) {
	.snic-carousel-fill {
		flex-grow: 0;
		height: clamp(220px, 58vw, 360px);
	}
}