; on les remet côte à côte et on élargit le bloc. */
/* Le thème fixe width:260px, height:135px et padding:30px, d'où un badge
très au large autour de son contenu. On le laisse s'ajuster au texte.
Il est aussi masqué sous 767px par le thème : on le garde visible. */
.tronix-awards-section {
display: flex !important;
align-items: center;
justify-content: flex-start;
gap: 13px;
width: max-content;
height: auto;
min-height: 0;
max-width: none;
padding: 14px 18px;
border-width: 8px;
/* Le thème cale le badge à left:30px, sous une seule des deux personnes
de la photo. Centré, il se rapporte visiblement aux deux. */
left: 50%;
transform: translateX(-50%);
}
.tronix-about-two-small-image,
.tronix-awards-section { box-sizing: border-box; }
/* Le thème ajoute margin-right:15px à l'icône, qui s'ajoutait au gap
et creusait un vide entre la médaille et le nombre. */
.tronix-awards-section .tronix-Awards-icon { flex: none; line-height: 1; margin-right: 0; }
.tronix-awards-section .tronix-Awards-icon i { font-size: 34px; }
.tronix-awards-content {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: nowrap;
}
/* Le nombre en grand, suivi du « + » ; le libellé se répartit sur deux
lignes juste à côté, ce qui garde le badge compact. */
.tronix-awards-content .tronix-award-number {
margin: 0;
font-size: 40px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
/* chiffres de largeur fixe ; la largeur du nombre final est figée
en JS avant le décompte, pour que le badge ne bouge pas. */
font-variant-numeric: tabular-nums;
}
.tronix-awards-content .tronix-award-number::after {
content: "+";
font-size: .62em;
font-weight: 700;
vertical-align: super;
margin-left: 1px;
}
.tronix-awards-content .tronix-award-title {
margin: 0;
font-size: 13.5px;
line-height: 1.22;
text-align: left;
/* min-content : la ligne se coupe au mot le plus long, donc
« Années » puis « d'expertise », jamais au milieu d'un mot. */
width: min-content;
}
@media (max-width: 575px) {
.tronix-awards-section { gap: 10px; padding: 11px 14px; border-width: 6px; }
.tronix-awards-section .tronix-Awards-icon i { font-size: 24px; }
.tronix-awards-content { gap: 8px; }
.tronix-awards-content .tronix-award-number { font-size: 32px; }
.tronix-awards-content .tronix-award-title { font-size: 12px; }
}
/* Corps du mot des cofondateurs : le gris du thème est trop pâle pour un
texte de cette longueur. Contraste relevé et expressions clés en bleu. */
.about-des {
color: #3A4050;
font-size: 16.5px;
line-height: 1.85;
}
.about-des strong {
color: var(--thm-color);
font-weight: 600;
}
/* Le thème impose une hauteur fixe de 470px au conteneur et object-fit: cover
à l'image « à propos » (custom-widgets.css), ce qui recadrait le portrait des
cofondateurs. On rétablit ses proportions, en gardant le rayon du thème. */
.tronix-about-tow-image .tronix-about-two-main-image {
height: auto;
/* l'image gardait une largeur fixe : entre 1200 et 1400px elle débordait
à gauche de sa colonne, emportant le badge avec elle. */
max-width: 100%;
}
.tronix-about-tow-image { max-width: 100%; }
.tronix-about-tow-image .tronix-about-two-main-image img {
height: auto;
object-fit: contain;
display: block;
}
/* La colonne de l'image « à propos » porte un décalage de -100px réglé dans
Elementor, qui fait déborder l'image et le badge hors de l'écran entre
environ 1200 et 1400px. Le décalage n'est conservé que là où il y a la
place pour lui. */
@media (max-width: 1399.98px) {
.page-id-1472 .elementor-widget-wrap { margin-left: 0 !important; }
}
/* ------------------------------------------------------------------
À propos : logo au-dessus du portrait
Le texte des cofondateurs est long et la photo, centrée verticalement,
laissait un grand vide au-dessus. Le logo occupe ce haut de colonne,
à hauteur du titre, et la photo descend vers le corps de texte.
------------------------------------------------------------------ */
/* Elementor pose « .elementor img { max-width:100% } » et sa feuille est
chargée APRÈS celle de l'enfant : à spécificité égale elle l'emporte.
D'où le sélecteur préfixé, ici et sur le logo du pied de page. */
.elementor .vc-apropos-logo img {
display: block;
width: 100%;
max-width: 300px;
height: auto;
margin: 0 auto 34px;
}
/* Briques des cofondateurs : quatre en 2x2 dans une demi-colonne.
L'icône posée à gauche ne laissait que 150 px au titre, qui se coupait
sur deux ou trois caractères, et les quatre blocs faisaient 98, 128, 158
et 128 px de haut. Icône au-dessus pour rendre toute la largeur au texte,
corps réduit, et hauteur commune pour que la grille soit régulière. */
.page-id-1472 .elementor-widget-icon-box .elementor-icon-box-wrapper {
display: block;
text-align: left;
}
.page-id-1472 .elementor-widget-icon-box .elementor-icon-box-icon {
display: block;
margin: 0 0 12px;
}
.page-id-1472 .elementor-widget-icon-box .elementor-icon-box-icon svg,
.page-id-1472 .elementor-widget-icon-box .elementor-icon-box-icon img {
width: 38px;
height: 38px;
}
.page-id-1472 .elementor-widget-icon-box .elementor-icon-box-title,
.page-id-1472 .elementor-widget-icon-box .elementor-icon-box-title a {
font-size: 15.5px !important;
line-height: 1.42 !important;
font-weight: 500 !important;
display: block;
}
/* Hauteur commune : sans elle, les quatre titres n'ont pas le même nombre
de lignes et la grille part en escalier. */
@media (min-width: 768px) {
.page-id-1472 .elementor-widget-icon-box .elementor-icon-box-wrapper {
min-height: 134px;
}
}
.page-id-1472 .elementor-widget-icon-box { margin-bottom: 4px; }
/* Colonne du portrait : le texte des cofondateurs fait 1313 px de haut,
le logo et la photo 491 px à eux deux. La photo reste près du logo et
se cale en regard des paragraphes, pas des quatre briques : le blanc
tombe en bas, à côté des briques, là où il se remarque le moins. */
@media (min-width: 1025px) {
.page-id-1472 .elementor-element-23346572 > .elementor-widget-wrap {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: stretch;
min-height: 100%;
}
.page-id-1472 .elementor-element-23346572 > .elementor-widget-wrap > .elementor-widget-tronix_image_two {
width: 100%;
}
.page-id-1472 .elementor-element-23346572 > .elementor-widget-wrap > .vc-apropos-logo {
width: 100%;
}
}
/* ------------------------------------------------------------------
Texte justifié avec césure, PARTOUT — décision de la direction du
26/10/2026, confirmée après lui avoir soumis les mesures.
Une première version épargnait les blocs étroits et le téléphone ;
la direction a demandé de lever ces deux réserves. Les chiffres
relevés alors sont conservés ici pour mémoire : sur les colonnes
de 300 à 350 px, l'espace entre mots peut atteindre cinq fois sa
valeur naturelle de 5,3 px.
La césure est ce qui rend la chose tenable : elle s'appuie sur le
lang="fr-FR" posé par WordPress sur . Sur les blocs les plus
courts, elle est réglée plus permissive pour couper davantage et
resserrer d'autant les espaces.
------------------------------------------------------------------ */
.about-des,
.about-des p,
.vc-lead,
.vc-hero__meta,
.vc-hero__turn,
.vc-story__pane p,
.vc-step2,
.vc-step2 p,
.vc-adn__row > p,
.vc-adn__point p,
.vc-limites__note,
.vc-limite p,
.vc-techstrip__head p,
.vc-exp__card p,
.vc-path p,
.vc-panel p,
.vch-faq__a,
.vch-wrap > p,
.vch-chat-slot p,
.vch-round__item p,
.vch-step p,
.vch-card p,
.elementor-widget-text-editor p,
.elementor-icon-box-description,
.about-des,
.entry-content p {
text-align: justify;
text-justify: inter-word;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
/* Blocs courts et colonnes étroites : on autorise la césure sur des mots
plus courts (4 lettres, 2 de part et d'autre). Chaque coupe supplémentaire
est une occasion de ne pas écarter les espaces. */
.vc-adn__point p,
.vc-limite p,
.vc-exp__card p,
.vc-path p,
.vc-panel p,
.vch-round__item p,
.vch-step p,
.vch-card p,
.elementor-icon-box-description,
.vc-hero__meta,
.vc-hero__turn {
hyphenate-limit-chars: 4 2 2;
}
/* Téléphone : la justification s'applique aussi, à la demande. La césure
y est la plus permissive, c'est là que les lignes sont les plus courtes. */
@media (max-width: 767.98px) {
.about-des,
.about-des p,
.vc-lead,
.vc-story__pane p,
.vc-step2,
.vc-step2 p,
.vc-adn__row > p,
.vc-limites__note,
.vc-techstrip__head p,
.vch-faq__a,
.vch-wrap > p,
.vch-chat-slot p,
.elementor-widget-text-editor p,
.about-des,
.entry-content p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 4 2 2;
}
}
/* ------------------------------------------------------------------
Page Services : les six cartes faisaient 492 à 526 px de haut, ce qui
décalait la seconde rangée et désalignait les boutons.
Le conteneur Elementor n'a pas de hauteur définie, donc un flex-grow
n'avait rien à répartir : on fixe une hauteur minimale commune et on
cale le bouton en bas de carte. Les six cartes s'alignent alors, et le
texte reste libre de s'allonger si besoin.
------------------------------------------------------------------ */
@media (min-width: 768px) {
.page-id-1474 .tronix-service-six-wrapper {
display: flex;
flex-direction: column;
min-height: 530px;
}
.page-id-1474 .service-six-content {
display: flex;
flex-direction: column;
flex: 1;
}
.page-id-1474 .service-six-button { margin-top: auto; }
}
@media (min-width: 768px) and (max-width: 1100px) {
.page-id-1474 .tronix-service-six-wrapper { min-height: 580px; }
}
/* ------------------------------------------------------------------
Page Cybersécurité : le premier écran est le seul du site à utiliser
le slider du thème. Son conteneur étant bridé à 1220 px dans une
section de 1440, l'image flottait au milieu de la page comme un bloc
carré. La section passe pleine largeur sur fond marine, et un voile
dégradé rend le titre lisible sur une image très chargée.
------------------------------------------------------------------ */
/* Le sélecteur doit rester enfermé dans le conteneur Elementor DE LA PAGE
(.elementor-5154). Sans cela, « :first-of-type » attrape aussi la première
section du gabarit d'en-tête (.elementor-5196), qui est commun à tout le
site : la bande derrière le menu passait en marine et le menu, écrit en
sombre, devenait illisible. */
.elementor-5154 > .elementor-top-section:first-of-type { background: #061327; }
.elementor-5154 > .elementor-top-section:first-of-type > .elementor-container {
max-width: 100%;
width: 100%;
}
.page-id-5154 .slider-area { position: relative; }
.page-id-5154 .slider-area::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(100deg,
rgba(6, 19, 39, .92) 0%,
rgba(6, 19, 39, .78) 38%,
rgba(6, 19, 39, .34) 72%,
rgba(6, 19, 39, .12) 100%);
}
.page-id-5154 .slider-area > * { position: relative; z-index: 2; }
/* ------------------------------------------------------------------
Bloc « Nous joindre » sur Cybersécurité et Conseil. Sur les quatre
autres pages de services il vit dans une colonne latérale étroite ;
ici il est seul en pleine largeur, on lui rend une largeur de carte
et on le centre, pour que les six pages se terminent pareil.
------------------------------------------------------------------ */
.vc-joindre .elementor-widget-working_time {
max-width: 440px;
margin-inline: auto;
width: 100%;
}
@media (max-width: 520px) {
.vc-joindre .elementor-widget-working_time { max-width: 100%; }
}
/* ------------------------------------------------------------------
Contenu du bloc « Nous joindre ».
Le widget Working Time ne rend qu'un seul champ par ligne : le
second champ du répéteur n'existe pas dans le gabarit et était
ignoré en silence, si bien qu'un bloc intitulé « Nous joindre »
n'affichait ni numéro ni lien. Les deux lignes tiennent désormais
dans le champ rendu, séparées par un
; le porte
l'action, le reste de la ligne porte la précision.
------------------------------------------------------------------ */
.vc-joindre .tronix-woriking-time-list { align-items: flex-start; }
.vc-joindre .tronix-woriking-time-list-icon {
padding-top: 3px;
line-height: 1;
/* Les trois glyphes n'ont pas la même chasse : sans largeur fixe,
les trois libellés ne démarrent pas au même endroit. */
width: 20px;
text-align: center;
}
.vc-joindre .tronix-woriking-time-list-title {
font-size: 14.5px;
line-height: 1.65;
color: #5A6B84;
text-align: left; /* la justification générale n'a pas de sens ici */
hyphens: manual;
/* Sans cela chaque ligne se dimensionne sur son seul libellé en gras :
« Réponse en 2 à 4 h en moyenne », plus long que « Formulaire de
contact », se repliait alors qu'il reste de la place dans la carte. */
flex: 1;
min-width: 0;
}
.vc-joindre .tronix-woriking-time-list-title strong {
font-size: 16.5px;
font-weight: 600;
letter-spacing: -.1px;
color: #061327;
}
.vc-joindre .tronix-woriking-time-list-title a {
text-decoration: none;
transition: color .18s ease;
}
.vc-joindre .tronix-woriking-time-list-title a:hover strong,
.vc-joindre .tronix-woriking-time-list-title a:focus-visible strong,
.vc-joindre .tronix-woriking-time-list:hover .tronix-woriking-time-list-title a strong {
color: #0E59F2;
}
.vc-joindre .tronix-woriking-time-list-title a:focus-visible {
outline: 2px solid #0E59F2;
outline-offset: 3px;
border-radius: 3px;
}
/* Les 40 px de marge intérieure du widget mangent un tiers d'un écran de
390 px et replient « Formulaire de contact » sur deux lignes. */
@media (max-width: 480px) {
.vc-joindre .tronix-woriking-time-box { padding: 24px 20px; }
.vc-joindre .tronix-woriking-time-list { padding: 14px 16px; }
}
/* ------------------------------------------------------------------
Listes « Tronix List » (Notre périmètre, Ce que nous exploitons,
Ce que nous nous engageons à tenir…).
Le gabarit du widget ne rend que le libellé : les descriptions
saisies dormaient dans la base sans jamais s'afficher. Elles
tiennent désormais dans le champ rendu, derrière un
.
L'icône par défaut du widget relève de Bootstrap Icons, police que
le thème ne charge pas ; chaque entrée a reçu une icône Font
Awesome explicite.
------------------------------------------------------------------ */
/* L'alignement haut vient du réglage « icon-positon » du widget lui-même :
Elementor le compile en CSS plus spécifique que cette feuille. */
.vc-liste .tronix-list-box-item { margin-bottom: 22px; }
.vc-liste .tronix-list-icon {
flex: none;
width: 30px;
height: 30px;
font-size: 13px;
margin-right: 14px;
margin-top: 2px;
border-color: rgba(14, 89, 242, .28);
background: rgba(14, 89, 242, .06);
color: #0E59F2;
}
.vc-liste .tronix-list-title {
flex: 1;
min-width: 0;
font-size: 14.5px;
line-height: 1.6;
color: #5A6B84;
text-align: left;
hyphens: manual;
}
.vc-liste .tronix-list-title strong {
display: block;
margin-bottom: 3px;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.1px;
color: #061327;
}
/* est déjà en bloc : le
qui le suit ajouterait une ligne vide. */
.vc-liste .tronix-list-title strong + br { display: none; }
@media (max-width: 480px) {
.vc-liste .tronix-list-icon { width: 26px; height: 26px; margin-right: 11px; }
}
/* Sur les quatre autres pages de services l'accordéon vit dans la colonne
principale et mesure environ 800 px. Posé en pleine largeur sur
Cybersécurité et Conseil, il irait jusqu'à 1220 px : des lignes de
question trop longues à lire. */
.vc-faq .tronix-accordion-wraper .container,
.vc-faq .tronix-accordion-wraper .container-fluid {
max-width: 820px;
margin-inline: auto;
}
/* ------------------------------------------------------------------
Pied de page — bloc « Nous contacter ».
Le champ texte du widget passe par esc_html() : impossible d'y mettre
un lien. Les coordonnées sont donc rendues par le champ voisin, qui
passe par do_shortcode() et laisse passer le HTML. Le