/* =========================================================
   SOTIC — pont entre Elementor et la charte du site
   Deux familles de conteneurs :
   · .st-plain  → conteneur neutre : une section entière en widget HTML,
                  aucun espacement propre, la charte gouverne à l'intérieur.
   · conteneurs porteurs d'une classe de charte (hero, container, hero-split,
     feature, cta-band, split, media…) → ils reçoivent ici la mise en page
     correspondante, car ils remplacent les <div> d'origine et accueillent
     de vrais widgets Image Elementor.
   ========================================================= */

/* --- Réglages communs --- */
.sotic .elementor-section,
.sotic .elementor-section-wrap,
.sotic .e-con,
.sotic .e-con-inner,
.sotic .elementor-container {
  max-width: none;
  width: 100%;
  --container-max-width: 100%;
}

/* --- Conteneur neutre : section complète en HTML --- */
.sotic .e-con.st-plain,
.sotic .e-con.st-plain > .e-con-inner {
  display: block !important;
  flex-direction: initial !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* --- Widgets : aucun espacement parasite --- */
.sotic .elementor-widget,
.sotic .elementor-widget:not(:last-child),
.sotic .elementor-element {
  margin: 0;
}
.sotic .elementor-widget-html,
.sotic .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}
.sotic .elementor-widget-html > .elementor-widget-container {
  display: block;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
}
.sotic .elementor-widget-image,
.sotic .elementor-widget-image > .elementor-widget-container,
.sotic .elementor-widget-image figure,
.sotic .elementor-widget-image .elementor-image {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: initial;
}

/* =========================================================
   Conteneurs porteurs des classes de charte
   ========================================================= */
.sotic .e-con.hero,
.sotic .e-con.section,
.sotic .e-con.section-sm,
.sotic .e-con.container,
.sotic .e-con.hero-visual,
.sotic .e-con.fvis,
.sotic .e-con.cvis,
.sotic .e-con.media {
  display: block;
  flex-direction: initial;
  gap: 0;
  min-height: 0;
}

/* Sections */
.sotic .e-con.hero { padding: 96px 0; }
.sotic .e-con.hero.hero-sm { padding: 76px 0 66px; }
.sotic .e-con.section { padding: 96px 0; }
.sotic .e-con.section-sm { padding: 68px 0; }

/* Largeur de contenu */
.sotic .e-con.container {
  width: 100%;
  max-width: 1260px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Grilles à deux colonnes */
.sotic .e-con.hero-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  padding: 0;
}
.sotic .e-con.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 0;
}
.sotic .e-con.split.top { align-items: start; }
.sotic .e-con.feature {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  padding: 0;
  gap: 0;
}
.sotic .e-con.cta-band {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  padding: 0;
  gap: 0;
}

/* Blocs image */
.sotic .e-con.hero-visual { position: relative; padding: 0; }
.sotic .e-con.fvis { min-height: 340px; padding: 0; }
.sotic .e-con.cvis { position: relative; z-index: 1; padding: 0; }
.sotic .e-con.media { padding: 0; }
.sotic .e-con.hero-visual .tag { z-index: 2; }

/* Cadrage du visuel principal d'une fiche machine.
   Hors Elementor, la charte distingue photo et illustration par une classe
   posée à la génération ; ici le widget Image ne la transporte pas. On se
   fie donc à l'extension : une photo se recadre en « cover », une
   illustration technique garde son fond blanc et son cadrage intégral. */
.sotic .e-con.hero-visual.product img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--card);
}
.sotic .e-con.hero-visual.product img[src$=".svg"] {
  object-fit: contain;
  background: #fff;
}

/* --- Grilles de cartes converties en conteneurs ---
   La charte dessine « .grid » et « .pcard » pour des éléments en flux ;
   Elementor impose à tout conteneur son display:flex et sa largeur.
   On rétablit la grille et on laisse la carte se comporter en colonne. */
.sotic .e-con.grid,
.sotic .e-con.news,
.sotic .e-con.logos {
  display: grid;
  width: 100%;
  max-width: none;
  padding: 0;
  --width: 100%;
}
/* Bandeau de références : chaque logo devient un conteneur.
   Elementor applique « height: var(--height) » à tout conteneur, avec une
   feuille chargée après la charte : la hauteur fixe de la plaque doit donc
   être redonnée ici, sinon chaque logo s'affiche à sa taille naturelle. */
.sotic .e-con.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  --width: auto;
  height: 84px;
  --height: 84px;
}
.sotic .e-con.logo img { height: auto; max-height: 100%; width: auto; object-fit: contain; }
/* Retrait haut transposé depuis un style en ligne du gabarit */
.sotic .e-con.st-pt-30 { padding-top: 30px; }
.sotic .e-con.pcard,
.sotic .e-con.news > .e-con {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  padding: 0;
  --width: auto;
  gap: 0;
}
/* le corps de carte reste un widget HTML : il ne doit pas s'étirer */
.sotic .e-con.pcard > .elementor-widget-html,
.sotic .e-con.news > .e-con > .elementor-widget-html { width: 100%; }
/* La vignette garde sa hauteur propre : sans « height: auto », la règle
   générique « .elementor-widget-image { height: 100% } » posée plus haut pour
   les blocs image pleine hauteur (.fvis, .cvis, .logo) fait occuper au widget
   toute la hauteur de la carte, et le corps de texte est rejeté sous le cadre
   blanc — carte vide à l'écran, intitulés flottant entre deux rangées. */
.sotic .e-con.pcard > .elementor-widget-image,
.sotic .e-con.news > .e-con > .elementor-widget-image { width: 100%; height: auto; flex: none; }

/* --- Images : la charte cible déjà « .hero-visual img », etc. --- */
.sotic .elementor img {
  display: block;
  height: auto;
  max-width: 100%;
}
.sotic .e-con.fvis img,
.sotic .e-con.cvis img { height: 100%; }

/* La règle height:auto ci-dessus est plus spécifique que « .pcard img » de
   la charte et écraserait la hauteur fixe des vignettes de carte : on la
   rétablit ici, pour que toutes les cartes d'une grille restent alignées. */
.sotic .e-con.pcard img { height: 190px; object-fit: cover; }
.sotic .e-con.news .e-con img { height: 180px; object-fit: cover; }

/* --- Listes de la charte --- */
.sotic .elementor ul,
.sotic .elementor ol { list-style: revert; margin: revert; padding: revert; }
.sotic .checklist,
.sotic .dots,
.sotic .contact-list,
.sotic .pcard ul,
.sotic .site-footer ul,
.sotic .hero-pills,
.sotic .params ul,
/* Remise à zéro des listes. Ne jamais y remettre .mega-cols : ce n'est pas
   une liste mais la grille de colonnes du mega menu, et l'annulation de son
   padding désaligne les intitulés de colonne par rapport aux autres menus. */
.sotic .faq { list-style: none !important; margin: 0; padding: 0; }
.sotic .checklist li,
.sotic .dots li { list-style: none !important; }
.sotic .checklist { margin: 18px 0; }
.sotic .dots { margin: 14px 0; }

/* --- Éditeur Elementor --- */
.elementor-editor-active .sotic .hero,
.elementor-editor-active .sotic .section { outline: 1px dashed rgba(243,156,18,.35); outline-offset: -2px; }
.elementor-editor-active #site-header,
.elementor-editor-active #site-footer { min-height: 0; }

/* --- Barre d'administration --- */
.admin-bar .mobile-menu { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .mobile-menu { top: 46px; } }

/* =========================================================
   RESPONSIVE — mêmes ruptures que la charte
   ========================================================= */
@media (max-width: 1080px) {
  .sotic .e-con.hero-split,
  .sotic .e-con.split,
  .sotic .e-con.feature,
  .sotic .e-con.cta-band { grid-template-columns: 1fr; }
  .sotic .e-con.cvis { display: none; }
}
@media (max-width: 760px) {
  .sotic .e-con.container { padding-inline: 18px; }
  .sotic .e-con.hero { padding: 66px 0 72px; }
  .sotic .e-con.hero.hero-sm { padding: 56px 0 50px; }
  .sotic .e-con.section { padding: 66px 0; }
  .sotic .e-con.section-sm { padding: 52px 0; }
  .sotic .e-con.hero-split,
  .sotic .e-con.split { gap: 34px; }
  .sotic .elementor-widget-html { overflow-x: clip; }
}

/* --- Pagination WordPress dans la charte --- */
.sotic .navigation.pagination { display: flex; justify-content: center; }
.sotic .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sotic .page-numbers {
  font-family: var(--head); font-weight: 700; font-size: .9rem;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--green-deep); background: #fff;
}
.sotic .page-numbers.current,
.sotic .page-numbers:hover { background: var(--green); border-color: var(--green); color: #fff; }