/*
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);
	}
}

/* ---------------------------------------------------------------------
   Liens dans le corps de texte

   Le widget « Paragraphe » d'Elementor 4 ne pose aucune classe sur les
   liens insérés au fil du texte : faute de style, ils héritent du noir du
   paragraphe et deviennent indiscernables du reste. Un lien qui ne se
   signale ni par la couleur ni par le soulignement échoue au critère
   WCAG 1.4.1, et se rate tout bonnement à la lecture.

   Le sélecteur écarte .e-paragraph-link-base, classe posée lorsque c'est
   le paragraphe entier qui est rendu cliquable depuis Réglages > Lien.
   Ces blocs-là — téléphone, adresse e-mail, mentions légales du pied de
   page — sont des lignes autonomes et n'ont pas à se souligner.

   Rien à poser dans Elementor : le style s'applique de lui-même, sur les
   quatre sites du réseau.
   --------------------------------------------------------------------- */
.e-paragraph-base a:not(.e-paragraph-link-base),
.elementor-widget-text-editor p a {
	color: var(--primary);
	text-decoration: underline;

	/* Le trait par défaut colle aux jambages et s'épaissit avec la graisse
	   de la police. On le fixe fin et décalé : lisible sans alourdir. */
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.18em;

	/* Le retrait compense le renfoncement, pour que le fond du survol
	   déborde légèrement du texte sans déplacer un seul caractère. */
	padding: 0.05em 0.15em;
	margin: 0 -0.15em;
	border-radius: 3px;

	/* Sans quoi un lien qui passe à la ligne perd son fond sur le second
	   fragment. */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;

	transition: color 0.15s ease, background-color 0.15s ease;
}

.e-paragraph-base a:not(.e-paragraph-link-base):hover,
.elementor-widget-text-editor p a:hover {
	color: var(--primary-hover);
	background-color: var(--accent-soft);
	text-decoration-thickness: 0.12em;
}

/* La navigation au clavier ne déclenche pas le survol : sans règle propre,
   le lien ciblé ne se distinguerait plus des autres. */
.e-paragraph-base a:not(.e-paragraph-link-base):focus-visible,
.elementor-widget-text-editor p a:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	background-color: var(--accent-soft);
}

/* ---------------------------------------------------------------------
   Lien au fil du texte sur fond sombre

   Même dessin que ci-dessus : le soulignement, son épaisseur, le décalage
   et le retrait sont hérités du bloc précédent, on ne redéclare que ce qui
   dépend du fond. Le trait n'a pas de couleur propre, il suit currentColor
   et devient blanc de lui-même — c'est ce qui garantit que les deux liens
   se dessinent exactement pareil.

   Le survol reprend le geste de la version claire, transposé : là où elle
   pose un lavis bleu pâle, celle-ci pose un lavis blanc. Le texte reste
   blanc, à 12,8:1 sur le #323232 des sections sombres.

   Le préfixe .elementor porte la spécificité à (0,4,1) : elle passe
   au-dessus du bloc clair sans recourir à !important, ce qui laisse la
   main pour d'éventuelles surcharges ultérieures.

   À poser dans Elementor : la classe globale snic-white-link sur le
   paragraphe, pas sur le lien.
   --------------------------------------------------------------------- */
.elementor .snic-white-link.e-paragraph-base a:not(.e-paragraph-link-base),
.elementor .snic-white-link .elementor-widget-text-editor p a {
	color: var(--text-inverse);
}

.elementor .snic-white-link.e-paragraph-base a:not(.e-paragraph-link-base):hover,
.elementor .snic-white-link .elementor-widget-text-editor p a:hover {
	color: var(--text-inverse);
	background-color: rgb(255 255 255 / 0.18);
}

.elementor .snic-white-link.e-paragraph-base a:not(.e-paragraph-link-base):focus-visible,
.elementor .snic-white-link .elementor-widget-text-editor p a:focus-visible {
	outline-color: var(--text-inverse);
	background-color: rgb(255 255 255 / 0.18);
}

/* ---------------------------------------------------------------------
   Hauteur des champs du formulaire atomique

   Elementor calibre les champs de son widget « Formulaire » atomique sur
   une police de 12 px, et leur impose pour cela une hauteur fixe de 36 px.
   Notre classe snic-input porte la police à 16 px sans toucher à cette
   hauteur : le texte se retrouve à l'étroit dans sa boîte, 24 px
   d'interligne pour 8 px d'espace disponible une fois le renfoncement
   déduit.

   On rend donc la hauteur au contenu. Le sélecteur vise l'élément plutôt
   que la seule classe, pour passer devant la feuille de base qu'Elementor
   charge après celle du thème.

   Les zones de texte ne sont pas concernées : leurs 126 px sont une taille
   choisie, non un défaut, et le texte y respire.
   --------------------------------------------------------------------- */
.elementor input.e-form-input-base {
	height: auto;
}

/* ---------------------------------------------------------------------
   Formulaire classique aligné sur le formulaire atomique

   Le widget « Formulaire » d'Elementor Pro reste nécessaire là où le
   formulaire atomique d'Elementor 4 ne convient pas. Les deux coexistent
   donc sur le réseau, et rien ne doit le laisser voir : cette classe donne
   au widget classique l'apparence exacte du widget atomique, relevée sur
   la page Contact de SNIC Rail.

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

   Les valeurs viennent des tokens du kit, à une exception près : la teinte
   du texte de substitution, qui n'en a pas.
   --------------------------------------------------------------------- */
/* La classe est répétée dans chaque sélecteur pour passer devant les styles
   du widget, qu'Elementor charge après la feuille du thème : à spécificité
   égale, c'est lui qui l'emporterait. Deux fois la même classe suffit, et
   évite d'avoir recours à !important, qu'on ne pourrait plus surcharger
   depuis le panneau Style d'Elementor. */
.snic-form.snic-form .elementor-form-fields-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
}

/* Le widget classique enveloppe chaque libellé et son champ dans un groupe,
   là où l'atomique les pose côte à côte dans le même flux. On efface ce
   niveau intermédiaire : libellés, champs et bouton deviennent frères, et
   l'écart de 16 px s'applique uniformément entre eux.

   Corollaire à connaître : les largeurs de colonne d'Elementor ne
   s'appliquent plus. Cette classe suppose donc un formulaire sur une seule
   colonne — ce qui est le cas de tous les nôtres. */
.snic-form.snic-form .elementor-field-group {
	display: contents;
}

.snic-form.snic-form .elementor-field-label {
	font-family: Roboto, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--text-strong);
	margin: 0;
	padding: 0;
}

/* La hauteur n'est volontairement pas fixée : elle découle du renfoncement
   et de l'interligne, soit environ 54 px. Le widget atomique, lui, hérite
   d'un height: 36px calibré par Elementor pour une police de 12 px — une
   valeur que notre police de 16 px déborde. On ne reproduit pas ce défaut
   ici ; c'est l'atomique qui est aligné sur cette hauteur-là. */
.snic-form.snic-form .elementor-field-textual {
	width: 100%;
	padding: 14px 18px;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--text);
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: none;
}

.snic-form.snic-form textarea.elementor-field-textual {
	height: 126px;
	resize: vertical;
}

.snic-form.snic-form.snic-form .elementor-field-textual::placeholder {
	color: #9DA5AE;
	opacity: 1;   /* Firefox l'atténue par défaut, ce que ne fait pas l'atomique */
}

/* Le bouton garde sa largeur naturelle et reste calé à gauche, comme sur
   l'atomique — d'où le align-items: flex-start du conteneur. */
.snic-form.snic-form .elementor-button {
	padding: 14px 28px;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	font-weight: 600;

	/* Le widget classique laisse son interligne à 16 px, l'atomique le porte
	   à 24 px : sans cette ligne, le bouton est plus bas de 8 px et ne
	   s'aligne plus sur la hauteur des champs. */
	line-height: 24px;
	letter-spacing: 0.16px;
	text-transform: none;
	color: var(--text-inverse, #FFFFFF);
	background-color: var(--primary);
	border: 1px solid var(--primary);
	border-radius: 8px;
}

/* L'atomique n'expose aucun état de survol ; on en ajoute un, faute de quoi
   le bouton paraîtrait inerte au pointeur. */
.snic-form.snic-form.snic-form .elementor-button:hover,
.snic-form.snic-form.snic-form .elementor-button:focus-visible {
	background-color: var(--primary-hover);
	border-color: var(--primary-hover);
}

/* Message affiché après l'envoi (confirmation ou erreur générale). Elementor
   l'ajoute à la fin du formulaire, juste sous le bouton, avec une marge
   trop faible : on l'en détache nettement. Le sélecteur vise l'enfant direct
   du formulaire, pour laisser en place les erreurs propres à chaque champ,
   qu'Elementor range à l'intérieur des groupes de champs. */
.snic-form.snic-form .elementor-form > .elementor-message {
	margin: 24px 0 0;
	font-family: Roboto, sans-serif;
	font-size: 16px;
	line-height: 24px;
}

/* ---------------------------------------------------------------------
   Piège à robots du plugin Honeypot

   Le plugin ajoute aux formulaires un champ leurre destiné à n'être rempli
   que par un automate. Il réduit son conteneur à 1 px de haut mais ne coupe
   pas ce qui déborde : le champ, lui, en mesure 42, et s'affiche sous le
   bouton avec son libellé « Alternative: ». Un visiteur le voit et ne sait
   qu'en faire.

   On le sort du cadre plutôt que de le masquer : display:none le retirerait
   de l'arbre d'accessibilité et le rendrait détectable par les robots, ce
   qui priverait le piège de tout intérêt. Décalé hors écran, il reste
   remplissable — et donc opérant.
   --------------------------------------------------------------------- */
.altEmail_container {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* ---------------------------------------------------------------------
   Boutons classiques : zone cliquable etendue a tout le bouton

   Les boutons de telechargement utilisent le widget Bouton classique
   d'Elementor, pour disposer de l'icone. Sur ce widget, la classe
   snic-button se pose sur le conteneur et non sur le lien : le conteneur
   peint le bouton et porte le padding, le lien ne couvre que la ligne de
   texte. Un clic dans le padding tombait donc a cote.

   Plutot que de recopier le padding de snic-button sur le lien — et ses
   variantes par point de rupture — on etend la surface du lien par un
   pseudo-element cale sur le conteneur. Les boutons atomiques portent la
   classe sur le lien lui-meme et ne sont pas concernes.
   --------------------------------------------------------------------- */
.elementor .snic-button.elementor-widget-button {
	position: relative;
}

.elementor .snic-button.elementor-widget-button .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Le focus clavier doit entourer le bouton visible, pas la seule ligne de
   texte. :has() plutot que :focus-within, qui s'allumerait aussi apres un
   clic a la souris. */
.elementor .snic-button.elementor-widget-button .elementor-button:focus-visible {
	outline: none;
	box-shadow: none;
}

.elementor .snic-button.elementor-widget-button:has(.elementor-button:focus-visible) {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Liens de telechargement des fiches produit (listes d'icones)

   Meme langage que les liens au fil du texte : couleur de marque et
   soulignement fin au survol, l'icone suit le texte.

   La zone cliquable est ramenee a la largeur du libelle : en pleine
   largeur, un clic dans le vide a droite declenchait le telechargement
   d'un fichier de plusieurs dizaines de megaoctets.
   --------------------------------------------------------------------- */
.elementor .snic-card .elementor-widget-icon-list a {
	width: fit-content;
}

.elementor .snic-card .elementor-widget-icon-list a .elementor-icon-list-text,
.elementor .snic-card .elementor-widget-icon-list a .elementor-icon-list-icon svg {
	transition: color 0.15s ease, fill 0.15s ease;
}

.elementor .snic-card .elementor-widget-icon-list a:hover .elementor-icon-list-text,
.elementor .snic-card .elementor-widget-icon-list a:focus-visible .elementor-icon-list-text {
	color: var(--primary);
	text-decoration: underline;
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.18em;
}

.elementor .snic-card .elementor-widget-icon-list a:hover .elementor-icon-list-icon svg,
.elementor .snic-card .elementor-widget-icon-list a:focus-visible .elementor-icon-list-icon svg {
	fill: var(--primary);
}