/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
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: 2.22.0
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
*/

/* Add your custom styles here */

/* ------------------------------------------------------------------
   Corrections de style — Agence Audace, 22.09.2026
   Ajouts en fin de feuille du thème enfant : rien n'est écrasé, et
   retirer ce bloc suffit à revenir exactement à l'état précédent.
   ------------------------------------------------------------------ */

/* 1. Interligne des titres d'affichage.
   Les titres héritaient d'un interligne de 1,3 à 1,5 — un interligne de
   paragraphe appliqué à du texte de 40 à 48 px. Les titres étant montés en
   deux blocs (ligne grasse en h1/h2, ligne italique en p), les deux lignes
   d'un même titre se retrouvaient nettement séparées.
   Les h3 (petits intitulés de section, « Nos solutions ») ne sont pas
   touchés : ils tiennent sur une ligne et n'ont pas le défaut. */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
	/* !important assumé : le CSS que génère Elementor par élément
	   (.elementor-XXXX .elementor-element.elementor-element-YYYY
	   .elementor-heading-title) est plus spécifique que toute règle
	   raisonnable écrite ici. L'alternative — modifier les réglages
	   widget par widget — entrerait en conflit avec les éditions que
	   le client fait de son côté dans Elementor. */
	line-height: 1.08 !important;
	letter-spacing: -0.015em;
}

/* Sur mobile, un titre long a besoin d'un peu plus d'air pour rester lisible. */
@media (max-width: 767px) {
	.elementor-widget-heading h1.elementor-heading-title,
	.elementor-widget-heading h2.elementor-heading-title {
		line-height: 1.15 !important;
	}
}

/* La seconde ligne des titres est un <p> stylé comme un titre. Mais certains
   blocs — l'introduction des Actualités notamment — y placent un paragraphe
   entier de plusieurs lignes : à 1,08 il devenait illisible. On lui laisse
   donc un interligne intermédiaire, assez serré pour les titres sur une
   ligne, assez aéré pour un vrai paragraphe. */
.elementor-widget-heading p.elementor-heading-title {
	line-height: 1.22 !important;
	letter-spacing: -0.015em;
}

/* 2. Bandeau « titre du site » sous la navigation.
   Le gabarit Header contient un widget « Titre du site » posé sans aucun
   réglage (élément a1ff83b, ajouté le 10.12.2025). Il affiche blogname en
   taille par défaut, en doublon du logo juste à côté, et il est devenu très
   voyant depuis que le titre du site a été rallongé.
   Masqué ici plutôt que supprimé du gabarit : réversible, et surtout sans
   toucher aux données Elementor que le client édite de son côté. */
.elementor-widget-theme-site-title {
	display: none;
}

/* Masquer le widget seul laissait sa section vide occuper 20 px sous la
   navigation — la bande blanche constatee. La section ded44fd du Header ne
   contient QUE ce widget, on peut donc la masquer entierement.
   La regle sur le widget est conservee au-dessus : si le Header est un jour
   reconstruit avec d'autres identifiants, le titre restera masque meme si
   ce selecteur-ci ne correspond plus. */
.elementor-30856 .elementor-element-ded44fd {
	display: none;
}

/* 3. Légendes sous les portraits de l'équipe (page À propos).
   Le nom et la fonction étaient collés au bas de la photo. La marge posée
   dans les réglages Elementor n'était pas reprise par son générateur de CSS :
   on passe donc par une classe explicite, posée sur le widget titre. */
.elementor-widget.sg-legende-portrait {
	margin-top: 22px;
}

/* 4. Bloc des trois solutions (Bexio / Odoo / Nextesy).
   Après le retrait de Winbiz, les colonnes restaient à 25 % de large : le bloc
   n'occupait que trois quarts de la largeur et laissait un vide à droite.
   La classe `elementor-col-33` posée par Elementor 4 n'est définie nulle part
   dans les feuilles de style du site — elle est inerte. On fixe donc la
   largeur sur la classe maison, qui n'est portée QUE par ces trois colonnes. */
.elementor-column.sgw-software-card {
	/* !important nécessaire : une règle d'Elementor plus spécifique impose 25 %. */
	width: 33.3333% !important;
}

/* 5. Rang de logos partenaires de la page d'accueil.
   Les trois logos étaient réglés en largeur (150, 298 et 134 px), ce qui donne
   des hauteurs de 50, 21 et 42 px : le rang paraissait bancal. Des logos de
   formats différents s'harmonisent par la HAUTEUR, pas par la largeur.
   Ciblé par identifiant d'élément pour ne toucher que ces trois-là. */
.elementor-element-dfddf83,
.elementor-element-3453a39,
.elementor-element-0b2597c {
	width: auto !important;
	margin: 0 26px;
}

.elementor-element-dfddf83 img,
.elementor-element-3453a39 img,
.elementor-element-0b2597c img {
	height: 38px !important;
	width: auto !important;
	max-width: none !important;
}

/* 6. Bandeau « Envie d'avancer » du pied de page.
   La flèche vivait dans sa propre colonne, à 64 px après le titre et 36 px
   avant le bouton : un élément orphelin au milieu d'un couloir vide.
   On laisse les deux colonnes se dimensionner sur leur contenu et on les
   accole, pour que la flèche ponctue le titre. */
.elementor-element-9e58c3b > .elementor-container {
	justify-content: flex-start !important;
	gap: 14px;
}

.elementor-element-3e8e43f,
.elementor-element-a5fe613 {
	width: auto !important;
}

/* 23.09 : la flèche pointe désormais vers la page Contact — le curseur en main
   redevient légitime, la règle qui le neutralisait est donc retirée. */

/* 7. Respiration entre le texte d'accroche et la vidéo de la page d'accueil.
   Les deux blocs se touchaient exactement (0 px d'écart mesuré). */
.elementor-element-1698e53 {
	margin-top: 48px;
}

@media (max-width: 767px) {
	.elementor-element-1698e53 {
		margin-top: 28px;
	}
}

/* 8. Harmonisation des photos — 23.09.
   Constat : les largeurs étaient réglées image par image, sans règle (72, 75,
   80, 90 et 100 %). Trois photos sortaient du lot en s'affichant sur presque
   toute la hauteur de l'écran, repoussant le contenu sous la ligne de
   flottaison : Actualités (1340×893), la photo du duo sur À propos (1206×825)
   et Contact (965×643).
   Traitement distinct selon le sujet : Contact et Actualités deviennent de
   vrais bandeaux, d'une hauteur commune. La photo du duo n'en est pas un — un
   recadrage la couperait à mi-corps — elle est simplement remise en proportion
   (60 % de large, réglé côté Elementor). */
.elementor-element-0b4f91f,
.elementor-element-a622ad1 {
	width: 100% !important;
}

.elementor-element-0b4f91f img,
.elementor-element-a622ad1 img {
	/* !important : la largeur réglée widget par widget dans Elementor
	   (72 %, 100 %…) l'emporte sinon, et le bandeau ne file pas d'un bord
	   à l'autre. */
	width: 100% !important;
	height: 340px;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 767px) {
	.elementor-element-0b4f91f img,
	.elementor-element-a622ad1 img {
		height: 200px;
	}
}

/* 9. Pictogrammes des prestations, section « Votre réussite / notre engagement »
   de la page d'accueil. Ils étaient à 16 × 16 px — une taille d'icône de menu,
   invisible sur une carte de service. Portés à 40 px.
   Ciblés par identifiant pour ne pas toucher aux autres icônes du site
   (téléphone, enveloppe, réseaux sociaux…), qui sont bien à leur taille. */
.elementor-element-c83133a svg,
.elementor-element-ec766b5 svg,
.elementor-element-522b9e3 svg,
.elementor-element-8ca64d0 svg {
	width: 40px !important;
	height: 40px !important;
}

@media (max-width: 767px) {
	.elementor-element-c83133a svg,
	.elementor-element-ec766b5 svg,
	.elementor-element-522b9e3 svg,
	.elementor-element-8ca64d0 svg {
		width: 34px !important;
		height: 34px !important;
	}
}

/* 10. Deux blocs dont la typographie s'écartait du reste — 25.09.

   a) Le paragraphe de présentation de Tiago (À propos). Il avait été aligné
      sur celui de David le 23.09 en recopiant ses réglages Elementor, mais le
      client a depuis rouvert et réenregistré la page dans l'éditeur, ce qui a
      réécrit les données et effacé ces réglages : le bloc était retombé à
      16 px / graisse 300 / noir.
      On repasse donc par le thème : une règle CSS survit aux enregistrements
      d'Elementor, contrairement aux réglages stockés dans la page.
      Valeurs reprises à l'identique du bloc de David (8000f64e).

   b) La phrase « Nous accompagnons les PME… » (Contact et Atelier Bexio).
      Elle n'avait AUCUNE police déclarée : le navigateur appliquait sa police
      par défaut, un serif, au milieu d'une page entièrement en SuisseIntl. */
.elementor-element-ec2da5c,
.elementor-element-ec2da5c p {
	font-family: "SuisseIntl-Regular", sans-serif;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #4C4D54 !important;
}

.elementor-element-80a6cbc,
.elementor-element-80a6cbc .elementor-icon-box-description {
	font-family: "SuisseIntl-Regular", sans-serif !important;
}

/* 11. Champs du formulaire de contact — 25.09.
   FluentForm impose sa propre police aux zones de saisie : les champs Nom,
   Prénom, Société, Email et le message s'affichaient dans la police système
   du visiteur, au milieu d'une page en SuisseIntl. Les libellés et le bouton,
   eux, étaient corrects — d'où un formulaire visuellement bancal.
   !important nécessaire : la règle de l'extension l'emporte sinon (vérifié). */
.frm-fluent-form input,
.frm-fluent-form textarea,
.frm-fluent-form select,
.frm-fluent-form .ff-el-form-control {
	font-family: "SuisseIntl-Regular", sans-serif !important;
}

.frm-fluent-form input::placeholder,
.frm-fluent-form textarea::placeholder {
	font-family: "SuisseIntl-Regular", sans-serif !important;
}

/* 12. Retours client du 28.09 — mise en page.
   Tout passe par le thème enfant : le client édite ses pages dans Elementor,
   une écriture dans _elementor_data serait écrasée à sa prochaine sauvegarde.
   Retour arrière = retirer ce bloc. */

/* 12a. Contact — « Prendre rendez-vous » sur sa propre ligne.
   Le titre desktop (473d10f) s'écrit « Contact <span>Prendre rendez-vous</span> »
   sans <br>, alors que sa variante mobile (c680301) en a un : d'où les deux
   membres collés sur une seule ligne en grand écran. On passe le span en bloc
   plutôt que d'aller insérer une balise dans les données Elementor. */
.elementor-element-473d10f .elementor-heading-title span {
	display: block;
}

/* 12b. Pages de services — « Nos autres services » collé au bloc précédent.
   Les quatre sections concernées ont un padding haut à 0 et la section qui les
   précède un padding bas à 0 : le titre démarre exactement sur la limite.
   Vérifié : haut du titre et haut de section au même pixel. */
.elementor-element-201b2e4,   /* Comptabilité */
.elementor-element-36537c4,   /* Salaires et RH */
.elementor-element-0b40a52,   /* Déclaration d'impôt */
.elementor-element-3732a64 {  /* Digitalisation */
	padding-top: 104px !important;
}

@media (max-width: 767px) {
	.elementor-element-201b2e4,
	.elementor-element-36537c4,
	.elementor-element-0b40a52,
	.elementor-element-3732a64 {
		padding-top: 64px !important;
	}
}

/* 12c. À propos — portraits des collaboratrices ramenés à l'échelle des associés.
   Noémie et Stéfanie s'affichaient en 495×660 dans des colonnes de 680 px,
   contre 230×367 pour David et 351×549 pour Tiago : elles paraissaient deux
   fois plus importantes que les fondateurs. On resserre le conteneur de la
   section et on plafonne la largeur des images. */
.elementor-element-895af5a > .elementor-container {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.elementor-element-691f420 img,
.elementor-element-60d81ef img {
	width: 100% !important;
	max-width: 340px;
	height: auto !important;
}

.elementor-element-691f420 .elementor-widget-container,
.elementor-element-60d81ef .elementor-widget-container {
	text-align: center;
}

/* 12d. Même réglage sur petit écran : les portraits des collaboratrices
   restaient à 340 px quand ceux des associés tombent à 151 px, le
   déséquilibre réapparaissait donc sur téléphone. */
@media (max-width: 767px) {
	.elementor-element-691f420 img,
	.elementor-element-60d81ef img {
		max-width: 240px;
	}
}

/* ==========================================================================
   13. Rythme vertical — 28.09.2026
   Relevé avant correction : les sections employaient 0, 40, 44, 50, 70, 80,
   96, 100, 120 et 252 px, posés à la main sans échelle. D'où des vides allant
   de 90 à 417 px entre deux blocs sur une même page.
   Cible : 120 px entre blocs en desktop, 72 px sous 768 px.
   On corrige les écarts, on ne réécrit pas les sections déjà justes.
   ========================================================================== */

:root { --sg-rythme: 120px; }
@media (max-width: 767px) { :root { --sg-rythme: 72px; } }

/* 13a. Les trois sections posées à 252 px de marge haute — la source des plus
   gros vides (accueil : outils et actualités ; à propos : l'équipe). */
.elementor-element-3829561b,
.elementor-element-2613b5d9,
.elementor-element-56f4947 {
	margin-top: var(--sg-rythme) !important;
}

/* 13b. Bas de section trop généreux, qui s'ajoutaient au haut de la suivante.
   78f7768 : 96 + 40 = 136. 8a97097 : 50 + 40 = 90. b022429 : 44 + 104 = 148. */
.elementor-element-78f7768 { margin-bottom: 80px !important; }
.elementor-element-8a97097 { margin-bottom: 80px !important; }
.elementor-element-b022429 { margin-bottom: 16px !important; }

/* 13c. Doubles espacements : la section porte un padding bas ET la suivante
   une marge haute. On supprime le premier, la marge suffit. */
.elementor-element-4b1d123 { padding-bottom: 0 !important; }
.elementor-element-895af5a { padding-top: 0 !important; }

/* 13d. « Nos autres services » : 104 px posés le 28.09 au matin, ramenés à
   l'échelle commune maintenant qu'elle existe. */
.elementor-element-201b2e4,
.elementor-element-36537c4,
.elementor-element-0b40a52,
.elementor-element-3732a64 {
	padding-top: var(--sg-rythme) !important;
}

@media (max-width: 767px) {
	.elementor-element-78f7768,
	.elementor-element-8a97097 { margin-bottom: 48px !important; }
	.elementor-element-b022429 { margin-bottom: 0 !important; }
}

/* ==========================================================================
   14. Rythme vertical, suite — 28.09.2026
   Le relevé a montré que l'espace n'est pas posé sur les sections mais sur le
   padding de leurs colonnes : 140/140 sur les strates colorées de l'accueil,
   120/120 sur celle d'À propos, 0/120 et 0/64 ailleurs. Les sections SANS
   fond, coincées entre deux strates, cumulaient leur marge et leur padding :
   c'est là que naissaient les vides de 250 à 300 px.
   ========================================================================== */

/* 14a. Air interne des strates colorées ramené de 140 à 100 px.
   C'est l'air propre du bloc, pas l'espace entre blocs — mais à 140 il rend
   le site mou. 100 px reste confortable et resserre l'ensemble. */
.elementor-element-b1d8f76 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-477d439 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-78f7768 > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-top: 100px !important;
	padding-bottom: 100px !important;
}

/* 14b. Sections sans fond : on retire le padding bas de colonne, la marge
   haute de la section suivante suffit à créer l'intervalle. */
.elementor-element-3829561b > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-bottom: 0 !important;
}
.elementor-element-56f4947 > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-top: 0 !important;
	padding-bottom: 72px !important;
}

/* 14c. Doubles espacements restants sur À propos : la strate porte déjà
   100 px d'air en bas, inutile d'y ajouter marge et padding de section. */
.elementor-element-78f7768 { margin-bottom: 0 !important; }
.elementor-element-4b1d123 { padding-top: 0 !important; }

/* 14d. Actualités — le H2 « Des analyses claires… » est une phrase de deux
   lignes rendue en 42 px : c'est un chapô, pas un titre. Ramené à l'échelle
   d'un texte d'introduction. La balise reste un h2 (structure SEO inchangée). */
.elementor-element-8e9d33e .elementor-heading-title {
	font-size: 22px !important;
	line-height: 1.5 !important;
	max-width: 60ch;
}

@media (max-width: 767px) {
	.elementor-element-b1d8f76 > .elementor-container > .elementor-column > .elementor-widget-wrap,
	.elementor-element-477d439 > .elementor-container > .elementor-column > .elementor-widget-wrap,
	.elementor-element-78f7768 > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
	.elementor-element-56f4947 > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-bottom: 40px !important;
	}
	.elementor-element-8e9d33e .elementor-heading-title {
		font-size: 19px !important;
	}
}

/* ==========================================================================
   15. Gabarit d'article — 28.09.2026
   Relevé : corps de texte 14 px / interligne 24, sous-titres 48 px / 67,
   titre de l'article 22 px. La hiérarchie était inversée — les sous-titres
   étaient plus de deux fois plus gros que le titre — et le texte courait sur
   848 px de large en 14 px, donc illisible.
   ========================================================================== */

/* 15a. Titre de l'article : il doit dominer sa page. */
.elementor-element-c738b7f .elementor-heading-title {
	font-size: 40px !important;
	line-height: 1.12 !important;
	letter-spacing: -0.015em;
}

/* 15b. Corps de texte — 18 px, interligne 1.65, mesure limitée à 68 caractères.
   Au-delà, l'œil perd la ligne suivante. */
.elementor-element-26bc285 p,
.elementor-element-26bc285 li {
	font-size: 18px !important;
	line-height: 1.65 !important;
}

.elementor-element-26bc285 .elementor-widget-container {
	max-width: 68ch;
}

/* 15c. Sous-titres ramenés de 48 à 28 px, avec un espace au-dessus qui les
   rattache visuellement au paragraphe qu'ils introduisent. */
.elementor-element-26bc285 h2 {
	font-size: 28px !important;
	line-height: 1.25 !important;
	margin-top: 2.4em !important;
	margin-bottom: 0.7em !important;
}

/* 15d. Le titre était répété : une fois en h1 par le gabarit, une fois en h2
   en tête du contenu. On masque le doublon (le premier h2 du contenu, qui
   reprend mot pour mot le titre). */
.elementor-element-26bc285 .elementor-widget-container > h2:first-child {
	display: none;
}

@media (max-width: 767px) {
	.elementor-element-c738b7f .elementor-heading-title { font-size: 30px !important; }
	.elementor-element-26bc285 h2 { font-size: 23px !important; margin-top: 2em !important; }
	.elementor-element-26bc285 p,
	.elementor-element-26bc285 li { font-size: 17px !important; }
}

/* 15e. Bandeau d'en-tête d'article — le gabarit ne contraint pas la hauteur.
   L'ancien visuel était un bandeau large (848×231) ; une vraie photo, en
   portrait, s'étirait à 848×1271 et mangeait tout l'écran. Même traitement
   que les bandeaux des autres pages : hauteur fixe et recadrage au centre. */
.elementor-element-61ada0b img {
	width: 100% !important;
	height: 360px !important;
	object-fit: cover;
	object-position: center 45%;
	display: block;
}

@media (max-width: 767px) {
	.elementor-element-61ada0b img { height: 220px !important; }
}

/* ==========================================================================
   17. Page Actualités — 28.09.2026, retour d'Hugo
   ========================================================================== */

/* 17a. RETOUR EN ARRIÈRE ASSUMÉ sur la règle 14d.
   J'avais ramené ce chapô de 42 à 22 px en le jugeant trop gros. Hugo préfère
   le modèle des pages de services — titre à 41 px suivi d'une ligne à 42 px —
   qu'il trouve mieux proportionné. On y revient, et on retire la limite de
   mesure qui l'étranglait. */
.elementor-element-8e9d33e .elementor-heading-title {
	font-size: 42px !important;
	line-height: 1.22 !important;
	max-width: none;
}

@media (max-width: 767px) {
	.elementor-element-8e9d33e .elementor-heading-title {
		font-size: 28px !important;
	}
}

/* 17b. La grille d'articles réservait 829 px de haut pour une seule fiche,
   laissant plus de 200 px de vide, puis 260 px avant la photo. */
.elementor-element-378df4a {
	min-height: 0 !important;
}

.elementor-element-378df4a .elementor-grid,
.elementor-element-378df4a .elementor-loop-container {
	align-items: start !important;
}

/* 17c. Intervalle avant le bandeau ramené à l'échelle du site. */
.elementor-element-d03888e {
	padding-top: 0 !important;
	margin-top: calc(var(--sg-rythme) - 40px) !important;
}

/* 17d. La fiche d'article fait 629 px de haut pour 227 px de contenu : le
   gabarit de boucle impose une hauteur fixe par ligne de grille. Avec un seul
   article publié, ça laissait 400 px de vide au milieu de la page. */
.elementor-element-378df4a .elementor-loop-container {
	grid-template-rows: auto !important;
	grid-auto-rows: auto !important;
}

.elementor-element-378df4a .elementor-loop-container > .elementor {
	height: auto !important;
	min-height: 0 !important;
}

/* 17e. Le conteneur de la grille d'articles porte une marge basse de 200 px,
   posée dans les réglages Elementor. Avec un seul article publié, elle
   s'ajoutait au vide de la grille : près de 300 px avant le bandeau. */
.elementor-element-378df4a > .elementor-widget-container {
	margin-bottom: 0 !important;
}