/* ------------------------------------------------------------------
   Digic Child — Accueil V2-1
   Chargee APRES digic-child-phase4 (dependance declaree dans functions.php).

   La composition reprend Home 3 : fond de page #F2F2F2, panneaux blancs,
   titres de rayon alignes a gauche avec les liens a droite. Les panneaux
   blancs des widgets Wpbingo (.list-product) viennent deja du CSS du theme ;
   cette feuille ne traite que ce qui est propre a l accueil SMG.
   ------------------------------------------------------------------ */

/* 0. Bande de categories du haut (C-3).

      Sept entrees, une icone de police et un libelle court chacune, exactement
      le rendu de la reference.

      L icone vient de la meta de terme category_icon, une classe Font Awesome
      4.7 — la police est chargee par le theme parent sur toutes les pages. Le
      libelle court vient de la meta smg_band_label, substituee au nom du terme
      pendant le seul rendu de ce widget (inc/category-band.php). Ni l un ni
      l autre n est lu par WooCommerce : rien ne ressort sur la boutique ou les
      archives, a la difference de thumbnail_id employe jusqu en C-2.1.

      Le gabarit du parent pose deja la geometrie de la reference : icone de
      40 px dans une boite de 40 x 68, libelle a 12 px / 500 en capitales avec
      20 px de retrait a gauche. Cette feuille ne fait que rendre le libelle
      blanc, la reference l ecrivant sur un fond sombre, et corriger ce que
      C-1 avait pose pour une vignette. */
.home .smg-bande-categories .item-product-cat-content{
  display:flex;
  align-items:center;
}
.home .smg-bande-categories .item-title a{
  color:#fff;
}
.home .smg-bande-categories .item-title a:hover,
.home .smg-bande-categories .item-title a:focus{
  color:#fff;
  text-decoration:underline;
}
/* P5-PAGES A2 — cible tactile des libelles sous 768 px. Mesure P5 a 390 px :
   17 px de haut, sous les 24 px minimaux (WCAG 2.5.8). Le lien passe en
   bloc en ligne (14 px, l interligne du libelle) et gagne 5 px de retrait en
   haut et en bas (24 px), repris par une marge negative egale : la zone
   touchable grandit, la boite occupee et donc la mise en page de la bande ne
   bougent pas. Accueil seulement (.home, feuille chargee sur la seule page
   d accueil). */
@media (max-width:767px){
  .home .smg-bande-categories .item-title a{
    display:inline-block;
    padding:5px 0;
    margin:-5px 0;
  }
}

/* C-3 — animation de l icone au survol et au clavier.

   Le parent anime deja l icone au survol : un balancement horizontal amorti
   d une seconde (@keyframes b, template.css). Il lui manque deux choses, que
   l enfant ajoute sans y toucher.

   1. Le clavier. Le parent ne declenche l animation qu au survol : un visiteur
      qui atteint l entree par tabulation n avait aucun retour. :focus-within
      couvre le conteneur, dont les deux liens — l icone et le libelle — sont
      les cibles focusables. */
.home .smg-bande-categories .item-product-cat-content:focus-within .item-icon i{
  animation-name:b;
  animation-duration:1s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:1;
}
/* 2. Le mouvement reduit. Le parent ne respecte pas la preference : son unique
      bloc prefers-reduced-motion ne vise que les blocs de couverture Gutenberg.
      Ici l animation est coupee dans les deux declenchements, le survol compris,
      et l icone reste simplement immobile. Le fond, lui, ne bouge dans aucun
      des deux cas. */
@media (prefers-reduced-motion:reduce){
  .home .smg-bande-categories .item-product-cat-content:hover .item-icon i,
  .home .smg-bande-categories .item-product-cat-content:focus-within .item-icon i{
    animation:none;
  }
}

/* 1. Rayons Wpbingo — le fond blanc natif de .list-product est conserve.
      Seuls l arrondi et le retrait sont alignes sur Home 3 (radius 10). */
.home .bwp_product_list .list-product,
.home .bwp-filter-homepage{
  border-radius:10px;
}
/* En-tete de rayon natif de list_link.php : titre a gauche, liens a droite. */
.home .bwp_product_list .content-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 20px;
  margin-bottom:18px;
}
.home .bwp_product_list .content-heading .title-block h2{
  margin:0;
  font-size:28px;
  font-weight:500;
  line-height:1.3;
  color:#333;
}
.home .bwp_product_list .content-heading .list-link ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px 8px;
  margin:0;
  padding:0;
  list-style:none;
}
.home .bwp_product_list .content-heading .list-link li{
  margin:0;
  padding:5px 12px;
  border:1px solid #e4e8e6;
  border-radius:20px;
  font-size:13px;
  line-height:1.4;
  color:#636363;
  background:#fff;
}
/* F4 — les entrees sans lien de list_link.php (« Éditeurs disponibles »,
   « Achat en ligne ») sont des etiquettes, pas des filtres actifs ni des
   boutons : ni pastille, ni bordure, ni survol, curseur par defaut. Elles
   restent affichees, visuellement distinctes des pastilles cliquables. */
.home .bwp_product_list .content-heading .list-link li.active{
  padding-left:0;
  border:0;
  border-radius:0;
  background:none;
  color:#636363;
  font-weight:600;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.08em;
  cursor:default;
}
.home .bwp_product_list .content-heading .list-link li.active:hover{
  border:0;
  color:#636363;
}
.home .bwp_product_list .content-heading .list-link li a{
  color:inherit;
  display:block;
}
/* C-7 — affordance des pastilles d editeurs.

   Elles sont de vrais liens depuis C-1 : list_link.php:22 pose
   « <li><a href="..."> » des que show_active vaut 0, et les sept destinations
   sont nos archives de categorie, verifiees en GET 200 (mesure M-3). Ce qui
   manquait n etait pas le lien, c etait le signe qu il en est un : leur texte
   heritait du #636363 de la pastille, exactement la couleur du libelle
   « Éditeurs disponibles » qui, lui, n est pas cliquable.

   Deux gestes, aucun ajout de couleur hors charte, aucune pastille pleine.

   1. Le texte des liens passe au #333333 de la charte, celui du corps de
      texte, quand le libelle garde le #636363 secondaire. La hierarchie
      redevient lisible : le libelle est une etiquette, les sept autres sont du
      contenu actif. Le survol existant, bordure et texte en #218663, est
      conserve tel quel et prend le pas.

   2. Le retrait passe de la puce au lien. Le lien etant deja en display:block,
      la pastille garde exactement la meme geometrie — meme boite, meme rayon,
      meme bordure — mais sa surface entiere devient cliquable au lieu du seul
      texte : les 5 px en haut et en bas et les 12 px sur les cotes ne sont plus
      des zones mortes. Le curseur main couvre donc toute la pastille, et il ne
      ment pas. L anneau de focus pose plus bas suit la meme surface.

   Le libelle est exclu par :not(.active) : il garde son absence de pastille,
   son #636363, son curseur par defaut et son retrait gauche nul.

   Portee : les deux rayons. Microsoft n a qu une pastille cliquable,
   « Tous les produits Microsoft », qui gagne la meme lisibilite ; sa pastille
   « Achat en ligne » est un li.active et reste inerte. */
.home .bwp_product_list .content-heading .list-link li:not(.active){
  padding:0;
  cursor:pointer;
}
.home .bwp_product_list .content-heading .list-link li:not(.active) a{
  padding:5px 12px;
  color:#333;
}

/* Le survol vient apres : « li:not(.active) a » et « li:hover a » ont la meme
   specificite, 0,0,5,2 — « :not(.active) » compte pour la classe qu il porte.
   A egalite, c est l ordre qui tranche : le survol doit donc etre declare en
   dernier pour l emporter. */
.home .bwp_product_list .content-heading .list-link li:hover{
  border-color:#218663;
}
.home .bwp_product_list .content-heading .list-link li:hover a{
  color:#218663;
}

@media (max-width:767px){
  .home .bwp_product_list .content-heading{
    justify-content:flex-start;
  }
  .home .bwp_product_list .content-heading .list-link ul{
    justify-content:flex-start;
  }
  .home .bwp_product_list .content-heading .title-block h2{
    font-size:21px;
  }
}

/* 2. Menu vertical de l accueil.
      Le widget Wpbingo est pose dans la colonne gauche du hero, comme Home 3.
      Sur la demo, le titre est une bande pleine ; la charte SMG la met en vert.
      Sous 1024 px, Home 3 masque ce menu : on fait de meme, le menu mobile du
      theme restant le point d entree. */
/* Le panneau du menu est en position absolue : .categories-vertical-menu a une
   hauteur nulle. Un overflow:hidden a cet endroit effacerait le menu — l arrondi
   se pose donc sur le panneau lui-meme. */
/* C-1.1 — l arrondi etait obtenu par un overflow:hidden pose ici. Or le panneau
   deroulant d une categorie est en position absolue, a droite du menu (mesure du
   17/09 : le sous-menu d Adobe s ouvre a 360 px quand le menu s arrete a 310) :
   l overflow le rognait entierement. Le fond du panneau respecte l arrondi sans
   lui ; seule la bande verte du titre, qui a son propre fond, a besoin de
   l arrondi haut. */
.home .smg-colonne-menu .bwp-vertical-navigation{
  border-radius:10px;
}
/* Le parent impose line-height:55px sur ce titre (template.css) : sans
   line-height explicite, un libelle sur deux lignes produit une bande de
   142 px de haut. P8-3 C2 : le titre est un div (inc/seo.php, section G) ;
   « > h2 » devient « > div.widget-title ». */
.home .smg-colonne-menu .widget-title,
.home .smg-colonne-menu .widget-custom-menu > div.widget-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0 22px;
  height:55px;
  line-height:1.3;
  background:#218663;
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-radius:10px 10px 0 0;
}
/* P8-3 C2 : pile de polices du h2 d origine (bootstrap.css, regle des
   titres h1 a h6), que le div n herite pas ; display et hauteur maintenus
   contre « .categories-vertical-menu.show .bwp-vertical-navigation > div
   { display:block !important; height:100% !important } » (template.css,
   min-width 1199px), qui vise le panneau du menu et atteignait desormais le
   titre. */
.home .smg-colonne-menu .widget-custom-menu > div.widget-title{
  font-family:Poppins,serif;
  display:flex !important;
  height:55px !important;
}
.home .smg-colonne-menu .bwp-vertical-navigation > ul{
  margin:0;
  padding:6px 0;
  list-style:none;
}
.home .smg-colonne-menu .bwp-vertical-navigation > ul > li > a{
  display:block;
  padding:9px 22px;
  font-size:13.5px;
  line-height:1.45;
  color:#333;
}
.home .smg-colonne-menu .bwp-vertical-navigation > ul > li > a:hover,
.home .smg-colonne-menu .bwp-vertical-navigation > ul > li > a:focus{
  color:#218663;
}
@media (max-width:1024px){
  .home .smg-colonne-menu{ display:none; }
}

/* 3. Hero — slider (C-1.1).
      Une slide est UNE surface : le visuel est l image de fond de la section
      interne .smg-slide, posee par le reglage Elementor natif (taille cover,
      position modifiable par appareil). Le texte est superpose. Aucun voile,
      aucun decoupage texte/image, a aucune largeur.

      La lisibilite du texte sur le visuel releve de la conception du visuel :
      cette feuille ne pose aucun dispositif de compensation.

      ----------------------------------------------------------------------
      Classes de reglage, a poser dans « Classes CSS » de la section .smg-slide
      (elles se combinent, une par famille) :

        Position horizontale de la boite de texte
          smg-slide--gauche ........ par defaut
          smg-slide--centre
          smg-slide--droite

        Position verticale
          smg-slide--haut
          smg-slide--milieu ........ par defaut
          smg-slide--bas

        Couleur du texte
          (aucune) ................. texte #333333, sur-titre #1A6B4F
          smg-slide--texte-clair ... texte et sur-titre blancs

        Comportement sous 767 px
          smg-slide--mobile-haut ... par defaut
          smg-slide--mobile-bas

      Largeur maximale de la boite de texte : variable --smg-slide-texte-largeur,
      58 % de la slide en bureau, pleine largeur utile en mobile. C est elle qui
      decide du nombre de lignes du titre, donc de la hauteur de la slide.
      ---------------------------------------------------------------------- */
.home .smg-hero-slider{
  position:relative;
}
/* Hauteur reservee avant initialisation, sans valeur arbitraire : les trois
   slides sont superposees dans une seule cellule de grille, la zone prend donc
   d emblee la hauteur que slick lui donnera. Seule la premiere est visible ;
   les suivantes gardent leur place sans etre lues (aria-hidden pose par slick
   des l initialisation). */
.home .smg-hero-slider > .elementor-widget-wrap:not(.slick-initialized){
  display:grid;
  grid-template-columns:100%;
}
.home .smg-hero-slider > .elementor-widget-wrap:not(.slick-initialized) > .smg-slide{
  grid-area:1 / 1;
}
.home .smg-hero-slider > .elementor-widget-wrap:not(.slick-initialized) > .smg-slide:not(:first-child){
  visibility:hidden;
}
/* Le conteneur pilote par slick est le .elementor-widget-wrap de la colonne,
   lui-meme element flex : a base auto, .slick-list se dimensionne sur sa piste
   au lieu du conteneur et slick en deduit une largeur de slide erronee
   (8559 px mesures le 17/09). On la contraint a la largeur du conteneur. */
.home .smg-hero-slider .slick-list{
  flex:0 0 100%;
  width:100%;
  min-width:0;
}
/* Digic pose .slick-slider .slick-list{margin:0 -15px} et .slick-slide{padding:0 15px}
   pour ses carrousels de produits (template.css:2850). Sur le hero, une slide est
   une surface pleine : la liste ne doit pas deborder du cadre et le fond doit le
   remplir exactement. Les retraits du contenu sont portes par la colonne
   .smg-slide__texte, jamais par la section — ces deux annulations n entrent donc
   en concurrence avec aucun reglage Elementor de la slide. */
.home .smg-hero-slider .slick-list{
  margin:0;
}
.home .smg-hero-slider .slick-list .slick-slide.smg-slide{
  padding:0;
}
/* Geometrie exterieure : meme principe que la reference, ou le slider et la
   colonne des bannieres partagent la hauteur du hero. */
@media (min-width:768px){
  .home .smg-hero-slider,
  .home .smg-slide{ min-height:468px; }
}

/* C-1.2 — coins arrondis du slider : 6 px, rayon releve sur le module de la
   reference (sr7-module.slider-3, style calcule).

   L arrondi appartient au composant, pas au fichier image : un visuel
   rectangulaire sans arrondi integre — ce que seront les visuels definitifs —
   est decoupe par le conteneur.

   Il est pose sur le conteneur exterieur des slides, jamais sur chaque slide :
   en fondu, deux slides arrondies superposees laisseraient un lisere aux coins.
   Deux conteneurs se succedent dans la vie de la page, d ou les deux
   selecteurs — le .elementor-widget-wrap avant que slick n intervienne, le
   .slick-list ensuite.

   Les puces et la commande pause/lecture ne sont pas dans .slick-list : slick
   ajoute les unes et hero-slider.js l autre au .elementor-widget-wrap, qui
   n est pas decoupe. Ni les commandes ni leurs anneaux de focus ne sont donc
   rognes. */
.home .smg-hero-slider > .elementor-widget-wrap:not(.slick-initialized),
.home .smg-hero-slider .slick-list{
  border-radius:6px;
}
.home .smg-hero-slider > .elementor-widget-wrap:not(.slick-initialized){
  overflow:hidden;
}

/* La boite de texte. Elementor pose width:100% sur le .elementor-widget-wrap :
   c est la borne de largeur qui fixe sa taille, et justify-content de la
   colonne qui le place. */
.home .smg-slide{
  /* C-1.3 — 42 %, soit 234 px de texte utile sur une slide de 743 px, le bord
     droit du texte tombant a 272 px du bord gauche de la slide.

     La valeur ne vient pas d une proportion choisie mais des visuels : a
     1440 px, le sujet le plus a gauche des trois placeholders commence a
     296 px (la main de la slide 3 ; 325 px pour les montres de la slide 2,
     349 px pour l ordinateur de la slide 1). Le texte s arrete 24 px avant le
     plus contraignant des trois, et la meme boite sert aux trois slides.

     Proportion de la reference, pour memoire : son texte le plus large tient
     dans 232 px sur un slider de 743, meme retrait gauche de 38 px. La boite
     retenue ici lui est donc quasiment identique.

     C est cette largeur qui decide du nombre de lignes du titre, donc de la
     taille de police tenable : voir la note du generateur sur les 28 px. */
  --smg-slide-texte-largeur:42%;
  position:relative;
  background-repeat:no-repeat;
}
.home .smg-slide .smg-slide__texte > .elementor-widget-wrap{
  max-width:var(--smg-slide-texte-largeur);
}
/* Horizontal : la colonne est le conteneur flex, le wrap borne par la variable
   en est le seul element. */
.home .smg-slide .smg-slide__texte{
  justify-content:flex-start;
}
.home .smg-slide--centre .smg-slide__texte{ justify-content:center; }
.home .smg-slide--droite .smg-slide__texte{ justify-content:flex-end; }
/* Vertical : la hauteur de la slide vient de son min-height, que le
   .elementor-container ne reprend pas de lui-meme — sans cette ligne, la
   colonne s arrete a la hauteur du texte et il n y a rien a repartir. */
.home .smg-slide > .elementor-container{
  min-height:inherit;
}
/* Le wrap est alors etire a la hauteur de la colonne : c est la repartition de
   ses lignes qui place le texte, pas sa propre position. */
.home .smg-slide .smg-slide__texte > .elementor-widget-wrap{
  align-content:center;
}
.home .smg-slide--haut .smg-slide__texte > .elementor-widget-wrap{ align-content:flex-start; }
.home .smg-slide--bas .smg-slide__texte > .elementor-widget-wrap{ align-content:flex-end; }

/* Couleurs du texte : portees par la classe, jamais par un reglage de widget,
   pour que smg-slide--texte-clair suffise a tout basculer. */
.home .smg-slide .smg-slide__surtitre .elementor-heading-title{ color:#1a6b4f; }
.home .smg-slide .smg-slide__titre .elementor-heading-title{ color:#333; }
.home .smg-slide .smg-slide__corps{ color:#333; }
.home .smg-slide--texte-clair .smg-slide__surtitre .elementor-heading-title,
.home .smg-slide--texte-clair .smg-slide__titre .elementor-heading-title,
.home .smg-slide--texte-clair .smg-slide__corps{ color:#fff; }

/* C-1.2 — ecarts du texte des slides.
   La marge basse d un widget vaut, chez Elementor,
   calc(var(--kit-widget-spacing) + la valeur reglee sur le widget) : l ecart
   general du kit, 20 px, s ajoute a celle-ci. Les espacements reels du texte
   n etaient donc aucun de ceux poses par le script.
   Remettre a zero la marge du widget ferait perdre le reglage ; c est la
   variable du kit qui est ramenee a zero, pour la seule boite de texte des
   slides. Les valeurs du generateur deviennent alors les ecarts mesures —
   6 px sous le sur-titre, 8 px sous le titre, 25 px sous la description, ceux
   du slider de la reference — et restent modifiables dans Elementor.

   La variable est redefinie sur le widget lui-meme par la feuille du kit
   (.elementor-widget:not(:last-child){--kit-widget-spacing:20px}) : la poser
   sur un ancetre ne suffit pas, il faut la reprendre sur le meme element. */
.home .smg-slide .smg-slide__texte .elementor-widget:not(:last-child){
  --kit-widget-spacing:0px;
}
/* Le paragraphe de la description porte la marge basse des paragraphes du
   parent : elle s ajouterait aux 25 px regles sur le widget. */
.home .smg-slide .smg-slide__corps p:last-child{
  margin-bottom:0;
}

/* Un element facultatif vide par l editeur ne doit laisser ni balise visible ni
   marge : le widget lui-meme est retire du flux. */
.home .smg-slide .smg-slide__texte > .elementor-widget-wrap > .elementor-widget:has(.elementor-heading-title:empty),
.home .smg-slide .smg-slide__texte > .elementor-widget-wrap > .elementor-widget:has(> .elementor-widget-container:empty){
  display:none;
}

/* C-1.3 — entre 768 et 1199 px, la regle des 24 px avant le sujet ne peut pas
   etre tenue, et c est le recadrage qui l en empeche, non la typographie.
   A 768 px le cadre fait 440 x 468 : cover met le visuel a l echelle sur la
   hauteur, soit 744 px de large, dont 152 sont coupes de chaque cote. Le sujet
   de la slide 3, a 296 px dans le visuel entier, se retrouve a 144 px du bord ;
   il ne resterait que 96 px de texte utile, ou aucun titre ne tient lisiblement.

   Retenu : la proportion de la reference a cette largeur — son texte occupe au
   plus 191 px sur un slider de 430, soit 44 % — avec un titre de 22 px. Le
   texte passe donc sur le sujet en tablette. Signale, non corrige : aucune
   autre solution ne garde un titre lisible, et les visuels definitifs, dont le
   sujet sera place en connaissance du recadrage, le resolvent. */
@media (max-width:1199px){
  .home .smg-slide{ --smg-slide-texte-largeur:55%; }
}

@media (max-width:767px){
  .home .smg-slide{ --smg-slide-texte-largeur:100%; }
  /* Sous 767 px, la position verticale est celle de la famille mobile, quelle
     que soit la classe haut/milieu/bas retenue pour les grandes largeurs. */
  .home .smg-slide .smg-slide__texte > .elementor-widget-wrap{ align-content:flex-start; }
  .home .smg-slide--mobile-bas .smg-slide__texte > .elementor-widget-wrap{ align-content:flex-end; }
}

/* Bouton pilule des slides (C-1.2, pastille reprise en C-1.3).
      Releve sur le bouton « Learn more » de la reference : pilule blanche de
      35 px de haut, retraits 0/12, rayon 25 px, Poppins 12 px / 500, casse du
      libelle inchangee, aucun espacement de lettres, aucune bordure. Ces
      valeurs-la sont des reglages du widget, poses par le script generateur.

      C-1.3 — la pastille etait portee par l icone du widget button, qu Elementor
      rend en SVG en ligne : rien ne le centre dans un rond de 20 px et la
      fleche n y apparaissait pas. Le reglage d icone est retire du generateur
      et la pastille est posee ici d un bloc, en ::after, avec le glyphe icomoon
      du theme parent — exactement la declaration que le parent applique aux
      boutons des bannieres (template.css, .bwp-widget-banner.layout-N .button)
      et que porte le bouton de la reference. Le calage aussi est celui de la
      reference : 3 px d ecart au libelle, 2 px de debord a droite, 1 px vers le
      haut.

      Le libelle tient sur une seule ligne : « Demander un devis » est le plus
      long des trois. */
.home .smg-slide .smg-bouton-pilule .elementor-button{
  white-space:nowrap;
}
/* La pastille est posee sur le conteneur du libelle, non sur le lien : Elementor
   rend ce conteneur en display:flex, donc de niveau bloc, et un ::after pose sur
   le lien tombait sous le libelle — le bouton faisait deux lignes. En element de
   la boite flexible, la pastille se place a cote du libelle et align-items la
   centre exactement. */
.home .smg-slide .smg-bouton-pilule .elementor-button-content-wrapper{
  align-items:center;
}
.home .smg-slide .smg-bouton-pilule .elementor-button-content-wrapper::after{
  content:"\e90b";
  flex:0 0 20px;
  font-family:icomoon;
  display:inline-block;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#218663;
  color:#fff;
  line-height:20px;
  text-align:center;
  font-size:7px;
  position:relative;
  margin-left:3px;
  right:-2px;
  top:-1px;
  transition:.2s;
}
/* Survol de la reference : la pilule passe au vert, la pastille au blanc. */
.home .smg-slide .smg-bouton-pilule .elementor-button:hover .elementor-button-content-wrapper::after,
.home .smg-slide .smg-bouton-pilule .elementor-button:focus .elementor-button-content-wrapper::after{
  background:#fff;
  color:#218663;
}

/* Puces : la reference en affiche trois, sans fleche. Pastille opaque propre a
   chaque puce : les commandes restent identifiables sur n importe quel visuel,
   sans voile pose sur l image. */
/* C-1.3 — position relevee sur la reference, identique a 1440 et a 768 px :
   puces calees a gauche, sur le meme retrait que le texte, et bas des puces a
   30 px du bas du slider. Seule la position change ; la taille, la pastille
   blanche et la puce active verte restent celles de C-1.1. */
.home .smg-hero-points{
  position:absolute;
  left:0;
  right:0;
  bottom:30px;
  display:flex;
  justify-content:flex-start;
  gap:10px;
  margin:0;
  padding:0 0 0 38px;
  list-style:none;
  z-index:3;
}
/* Digic dimensionne ses puces de carrousel en 5 px gris et etire la puce active
   a 20 px (template.css:2861). Celles du hero sont des cibles de pointage : on
   reprend la main sur la taille, et la pastille blanche opaque les rend
   identifiables sur n importe quel visuel — sans voile sur l image. */
.home ul.smg-hero-points li{
  width:auto;
  height:auto;
  margin:0;
}
.home ul.smg-hero-points li button{
  width:14px;
  height:14px;
  padding:0;
  border:2px solid #fff;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
  font-size:0;
  line-height:0;
  cursor:pointer;
}
.home ul.smg-hero-points li.slick-active button{
  background:#218663;
}

/* Bouton pause / lecture — WCAG 2.2.2. Fond blanc plein, meme raison. */
.home .smg-hero-pause{
  position:absolute;
  right:14px;
  bottom:12px;
  z-index:4;
  padding:6px 12px;
  border:1px solid #218663;
  border-radius:16px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
  color:#218663;
  font-size:11px;
  font-weight:600;
  line-height:1.3;
  cursor:pointer;
}
.home .smg-hero-pause:hover{
  background:#218663;
  color:#fff;
}

@media (max-width:991px){
  /* Les bannieres du hero passent sous 300 px de large. */
  .home .smg-hero-bannieres .smg-banniere-bwp .content{ max-width:82%; }
}

@media (max-width:767px){
  .home .smg-hero-pause{ right:10px; bottom:10px; }
  /* C-1.2 — la commande pause/lecture porte un libelle entier : sous 767 px
     elle occupe plus de la moitie de la largeur de la slide et recouvrait la
     derniere puce (mesure a 390 px : puce jusqu a 226, commande a partir de
     208). Le calage a gauche, generalise en C-1.3, resout ce recouvrement ;
     ne reste ici que le retrait, celui du texte de la slide en mobile.
     C-1.3 — les puces remontent aussi moins haut qu en bureau : la commande de
     pause est a 10 px du bas, les 30 px de la reference les en eloigneraient
     inutilement sur une slide deja courte. */
  .home .smg-hero-points{
    bottom:16px;
    padding-left:18px;
  }
}

/* 3 quater. Masquage visuel sans retrait de l arbre d accessibilite.
   Ni display:none ni visibility:hidden : le texte reste dans l arbre
   d accessibilite et dans ce que lisent les moteurs. Position absolue hors
   flux : aucun decalage de mise en page.

   Deux porteurs : le H1 de l accueil, masque depuis C-1.3, et « smg-hors-ecran »,
   classe generale employee depuis C-10.1 pour completer le nom accessible d un
   lien dont le texte visible se repete d une carte a l autre. */
.home .smg-hors-ecran,
.home .smg-h1-accueil{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* 3 bis. Bannieres bwp_image natives (layouts 5 et 6 de Home 3).
      Le gabarit du plugin superpose le texte a l image ; on fixe seulement le
      cadrage et la hauteur, mesures sur Home 3 : 322x232 (hero), 435x316
      (intermediaires). */
.home .smg-banniere-bwp .bwp-widget-banner,
.home .smg-banniere-bwp .bg-banner,
.home .smg-banniere-bwp .banner-wrapper,
.home .smg-banniere-bwp .bwp-image{
  height:100%;
}
/* Le gabarit enveloppe l image dans un lien : inline par defaut, il ne
   transmettrait aucune hauteur et l image garderait son rapport natif. */
.home .smg-banniere-bwp .bwp-image > a{
  display:block;
  height:100%;
}
.home .smg-banniere-bwp .banner-wrapper{
  position:relative;
  overflow:hidden;
  border-radius:10px;
}
/* C-1.3 — recadrage releve sur la reference : elle ne recadre pas. Son cadre
   fait 322x232 pour un fichier de 336x242, soit le meme rapport a 4 pour mille
   pres ; l image y est simplement etiree a la taille du cadre (object-fit par
   defaut, « fill ») et s affiche entiere.
   Ici le cadre fait 322x229, le hero etant a 468 px : reprendre « fill »
   deformerait l image de 1,6 %. On garde donc « cover », centre, qui laisse
   l image indeformee et lui coupe 2 % de sa hauteur — cinq pixels, repartis en
   haut et en bas. C est le comportement le plus proche de la reference sans
   deformer. */
.home .smg-banniere-bwp .bwp-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.home .smg-banniere-bwp .banner-wrapper-infor{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:22px 24px;
  /* Meme voile de lisibilite que les slides. */
  background:linear-gradient(90deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.92) 48%,
    rgba(255,255,255,.45) 74%,
    rgba(255,255,255,0) 100%);
}
.home .smg-banniere-bwp .content{
  max-width:64%;
}
/* C-1.1 — bannieres du hero uniquement : aucun voile, l image s affiche telle
   quelle. Le texte et le bouton restent superposes, comme dans la reference.
   Les bannieres layout-6 et les bannieres larges de rayon gardent le leur :
   la levee est restreinte a .smg-hero-bannieres. */
.home .smg-hero-bannieres .smg-banniere-bwp .banner-wrapper-infor{
  background:none;
}
/* Sur-titre a 11 px : #218663 mesure 4,03:1 sur le voile de la banniere, sous
   le seuil AA. #1A6B4F, assombrissement de la couleur principale deja employe
   pour les survols, mesure 6,36:1 sur blanc et tient quel que soit le visuel. */
.home .smg-banniere-bwp .bwp-image-subtitle{
  margin-bottom:6px;
  color:#1a6b4f;
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.home .smg-banniere-bwp .title-banner{
  margin:0 0 8px;
  color:#333;
  font-size:19px;
  font-weight:600;
  line-height:1.3;
}
.home .smg-banniere-bwp .bwp-image-description{
  margin-bottom:12px;
  color:#636363;
  font-size:13px;
  font-weight:500;
}
.home .smg-banniere-bwp a.button{
  display:inline-block;
  padding:9px 18px;
  border:1px solid #218663;
  border-radius:4px;
  background:#218663;
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.2;
}
.home .smg-banniere-bwp a.button:hover,
.home .smg-banniere-bwp a.button:focus{
  background:#1a6b4f;
  border-color:#1a6b4f;
  color:#fff;
}
/* Hero : deux bannieres empilees a parts egales.
   C-1 — la composition de reference pose les bannieres dans une colonne, et non
   dans un conteneur. Le .elementor-widget-wrap d une colonne est un flex en
   ligne : sans redressement, chacune des deux bannieres prend 100 % de la
   hauteur et la seconde deborde sous la section. */
.home .smg-hero-bannieres > .elementor-widget-wrap{
  flex-direction:column;
  flex-wrap:nowrap;
  gap:10px;
}
.home .smg-hero-bannieres > .elementor-widget-wrap > .elementor-widget{
  flex:1 1 0;
  min-height:0;
  width:100%;
  margin-bottom:0;
}
.home .smg-hero-bannieres .smg-banniere-bwp,
.home .smg-hero-bannieres .elementor-widget-container{ height:100%; }
/* C-1.2 — coins arrondis des deux blocs bwp_image du hero : 6 px, rayon releve
   sur la reference (.bwp-widget-banner.layout-5, style calcule). Le decoupage
   est deja assure : .banner-wrapper est en overflow:hidden. Les bannieres
   intermediaires et larges, hors du hero, gardent leurs 10 px. */
.home .smg-hero-bannieres .smg-banniere-bwp .banner-wrapper{
  border-radius:6px;
}

/* C-1.3 — couleur du texte des bannieres du hero.

   Les visuels Home 3 de ces deux bannieres sont sombres et la reference y ecrit
   en blanc (titre et description, #FFFFFF ; elle n a pas de sur-titre, mais
   partout ou son gabarit en affiche un sur fond sombre, il est blanc aussi).
   Les trois passent donc au blanc, la hierarchie tenant par la taille comme
   dans la reference. Aucun voile n est ajoute : c est le visuel qui porte le
   contraste.

   Pour un futur visuel clair, poser « smg-banniere--texte-sombre » dans
   « Classes CSS » du widget bwp_image : le texte reprend alors les couleurs par
   defaut de cette feuille — titre #333333, description #636363, sur-titre
   #1A6B4F. La classe se pose et se retire dans Elementor, sans rien
   reconstruire. */
.home .smg-hero-bannieres .smg-banniere-bwp .bwp-image-subtitle,
.home .smg-hero-bannieres .smg-banniere-bwp .title-banner,
.home .smg-hero-bannieres .smg-banniere-bwp .bwp-image-description{
  color:#fff;
}
.home .smg-hero-bannieres .smg-banniere--texte-sombre .bwp-image-subtitle{ color:#1a6b4f; }
.home .smg-hero-bannieres .smg-banniere--texte-sombre .title-banner{ color:#333; }
.home .smg-hero-bannieres .smg-banniere--texte-sombre .bwp-image-description{ color:#636363; }
/* C-1.2 — bouton pilule des bannieres du hero.
   Le gabarit du parent pose deja cette pilule pour layout-5
   (template.css : 12 px / 500, interligne 28 px, retraits 0/10, rayon 15 px,
   fond blanc) et la pastille verte de 20 px en ::after, glyphe icomoon. La
   regle generique de cette feuille, ecrite pour les bannieres de rayon, la
   recouvrait d un rectangle vert. On rend la pilule au seul bloc hero : les
   bannieres layout-6 et les bannieres larges gardent leur bouton vert. */
.home .smg-hero-bannieres .smg-banniere-bwp a.button{
  padding:0 10px;
  border:0;
  border-radius:15px;
  background:#fff;
  color:#333;
  font-size:12px;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  line-height:28px;
  white-space:nowrap;
  transition:.2s;
}
.home .smg-hero-bannieres .smg-banniere-bwp a.button:hover,
.home .smg-hero-bannieres .smg-banniere-bwp a.button:focus{
  background:#218663;
  color:#fff;
}
.home .smg-hero-bannieres .smg-banniere-bwp a.button:hover::after,
.home .smg-hero-bannieres .smg-banniere-bwp a.button:focus::after{
  background:#fff;
  color:#218663;
}
/* Intermediaires : 316 px de haut sur Home 3. */
.home .smg-banniere-intermediaire .smg-banniere-bwp .banner-wrapper{ min-height:316px; }

/* 3 quinquies. Les trois bannieres intermediaires (C-5).

   Le titre sortait du cadre par le haut, de 158 px exactement, aux trois
   largeurs. La cause tient a deux regles qui se completaient mal. Le parent
   centre le bloc de texte sur layout-6 :
     .bwp-widget-banner.layout-6 .banner-wrapper-infor{ top:50%; transform:translateY(-50%) }
   La regle de V2-2 de cette feuille, ecrite pour le hero, lui imposait
   « inset:0 » sans toucher au transform : le bloc prenait alors la hauteur du
   cadre, 316 px, et le translateY(-50%) le remontait de 158 px — la moitie de
   cette hauteur au lieu de la moitie de la sienne.

   Le mecanisme du parent est donc rendu a ces trois bannieres : le bloc
   retrouve la hauteur de son contenu et le centrage redevient exact, comme
   dans la reference. Le hero, en layout-5, n a pas ce transform et garde sa
   regle.

   Le voile de V2-2 est retire ici : la levee de C-1.1 ne valait que pour le
   hero. Les trois visuels ayant une zone de texte sombre — luminance 65, 28 et
   113 sur 255, mesuree sur la moitie basse — le texte passe au blanc, comme
   dans la reference. Aucun voile, degrade, filtre ni opacite n est ajoute. */
.home .smg-banniere-intermediaire .smg-banniere-bwp .banner-wrapper-infor{
  inset:auto;
  top:50%;
  left:0;
  width:100%;
  height:auto;
  display:block;
  padding:0 30px;
  background:none;
}
/* Rayon du hero, avec le decoupage qui fait suivre l image. */
.home .smg-banniere-intermediaire .smg-banniere-bwp .banner-wrapper{
  border-radius:6px;
  overflow:hidden;
}
/* L image remplit le cadre, quelle que soit sa hauteur.

   Le cadre est tenu par un min-height, et un min-height ne satisfait pas le
   height:100% d un enfant : sous 992 px l image gardait son rapport propre et
   s arretait a 161 px quand le cadre en faisait 316. Le texte, centre dans le
   cadre, se retrouvait pour moitie sur le fond gris de la page.

   Posee en absolu, l image occupe la surface entiere du cadre a toute largeur.
   A 1440 px le cadre a le rapport du fichier et rien n est coupe ; plus bas,
   cover rogne lateralement, centre, sans jamais deformer. */
.home .smg-banniere-intermediaire .smg-banniere-bwp .bwp-image{
  position:absolute;
  inset:0;
}
.home .smg-banniere-intermediaire .smg-banniere-bwp .bwp-image > a{
  display:block;
  height:100%;
}
.home .smg-banniere-intermediaire .smg-banniere-bwp .bwp-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.home .smg-banniere-intermediaire .smg-banniere-bwp .banner-wrapper-infor{
  z-index:2;
}
/* Typographie relevee sur la reference : sur-titre 14 px / 500 en capitales,
   titre 28 px / 500, description 13 px / 400, les trois en blanc. */
.home .smg-banniere-intermediaire .smg-banniere-bwp .bwp-image-subtitle{
  margin-bottom:0;
  color:#fff;
  font-size:14px;
  font-weight:500;
  line-height:1.7;
  letter-spacing:normal;
}
.home .smg-banniere-intermediaire .smg-banniere-bwp .title-banner{
  margin:0 0 4px;
  color:#fff;
  font-size:28px;
  font-weight:500;
  line-height:1.2;
}
.home .smg-banniere-intermediaire .smg-banniere-bwp .bwp-image-description{
  margin-bottom:12px;
  color:#fff;
  font-size:13px;
  font-weight:400;
  line-height:1.7;
}
/* Pour un futur visuel clair : poser « smg-banniere--texte-sombre » dans
   « Classes CSS » du widget, la meme classe qu au hero (C-1.3). */
.home .smg-banniere-intermediaire .smg-banniere--texte-sombre .bwp-image-subtitle{ color:#1a6b4f; }
.home .smg-banniere-intermediaire .smg-banniere--texte-sombre .title-banner{ color:#333; }
.home .smg-banniere-intermediaire .smg-banniere--texte-sombre .bwp-image-description{ color:#636363; }
/* Bouton pilule, comme au hero : le gabarit du parent le pose deja pour
   layout-6, c est la regle generique de cette feuille qui le recouvrait. */
.home .smg-banniere-intermediaire .smg-banniere-bwp a.button{
  padding:0 10px;
  border:0;
  border-radius:15px;
  background:#fff;
  color:#333;
  font-size:12px;
  font-weight:500;
  letter-spacing:normal;
  text-transform:none;
  line-height:28px;
  white-space:nowrap;
  transition:.2s;
}
.home .smg-banniere-intermediaire .smg-banniere-bwp a.button:hover,
.home .smg-banniere-intermediaire .smg-banniere-bwp a.button:focus{
  background:#218663;
  color:#fff;
}
.home .smg-banniere-intermediaire .smg-banniere-bwp a.button:hover::after,
.home .smg-banniere-intermediaire .smg-banniere-bwp a.button:focus::after{
  background:#fff;
  color:#218663;
}

/* C-5 — sous 992 px, les trois bannieres restent sur une ligne, comme la
   reference, et le cadre se resserre : la typographie suit. La reference fait
   de meme, titre a 22 px et sur-titre a 12 px a 768 px. Nos textes etant plus
   longs, le titre descend a 20 px. Le cadre est ramene a 260 px, assez pour le
   texte le plus haut — 186 px mesures — et moins rogne lateralement que 316. */
@media (max-width:991px){
  .home .smg-banniere-intermediaire .smg-banniere-bwp .banner-wrapper{ min-height:260px; }
  .home .smg-banniere-intermediaire .smg-banniere-bwp .banner-wrapper-infor{ padding:0 20px; }
  .home .smg-banniere-intermediaire .smg-banniere-bwp .bwp-image-subtitle{ font-size:12px; line-height:1.4; }
  .home .smg-banniere-intermediaire .smg-banniere-bwp .title-banner{ font-size:20px; line-height:1.15; margin-bottom:3px; }
  .home .smg-banniere-intermediaire .smg-banniere-bwp .bwp-image-description{ font-size:12px; line-height:1.4; margin-bottom:8px; }
}

@media (max-width:767px){
  .home .smg-banniere-bwp .content{ max-width:82%; }
  .home .smg-hero-bannieres > .elementor-widget-wrap > .elementor-widget{ min-height:200px; }
  /* Une banniere par ligne : la largeur revient, le cadre peut reprendre de la
     hauteur et la typographie de bureau. */
  .home .smg-banniere-intermediaire .smg-banniere-bwp .banner-wrapper{ min-height:230px; }
  .home .smg-banniere-intermediaire .smg-banniere-bwp .banner-wrapper-infor{ padding:0 30px; }
  .home .smg-banniere-intermediaire .smg-banniere-bwp .bwp-image-subtitle{ font-size:14px; line-height:1.7; }
  .home .smg-banniere-intermediaire .smg-banniere-bwp .title-banner{ font-size:28px; line-height:1.2; margin-bottom:4px; }
  .home .smg-banniere-intermediaire .smg-banniere-bwp .bwp-image-description{ font-size:13px; line-height:1.7; margin-bottom:12px; }
}

/* 3 ter. Bannieres larges de rayon — image de fond de section, texte en HTML
      par-dessus, comme Home 3 (1020x280 mesures au DOM).

   C-6 — le voile en degrade blanc pose en C-1 est retire, et avec lui son
   rayon de 10 px.

   Le voile servait a rendre lisible un texte sombre. La reference n en a
   aucun : elle ecrit en blanc sur l image nue, sans degrade, sans filtre et
   sans opacite. Son rayon de 10 px dessinait en outre des coins arrondis sur
   une section qui n en a pas — la section est a border-radius 0 et overflow
   visible — de sorte que les quatre angles du voile se detachaient sur
   l image carree.

   Couleur du texte. Luminance mesuree dans la zone de texte des deux visuels,
   apres cadrage « cover » : 10,5 sur 255 pour Microsoft, 89,3 pour Securite.
   Les deux fonds sont sombres : le texte passe en blanc sur les deux. La
   classe « smg-banniere--texte-sombre » de C-1.3 n est donc pas mobilisee ;
   elle n aurait de toute facon rien accroche ici, ses selecteurs visant les
   sous-elements du widget bwp_image (.bwp-image-subtitle, .title-banner,
   .bwp-image-description) et non les widgets heading, text-editor et button
   dont cette banniere-ci est faite.

   Portee. La classe « smg-banniere-large » est posee par le generateur sur les
   deux bannieres de rayon. Le retrait du voile et le texte blanc valent donc
   pour Microsoft et pour Securite : le defaut etait identique, et laisser un
   voile sur l une des deux n aurait aucun sens.

   Specificite. Elementor ecrit la couleur des titres sur
   « .elementor-91381 .elementor-element.elementor-element-XXX
     .elementor-heading-title », soit quatre classes. Les regles ci-dessous en
   comptent cinq : elles l emportent sans dependre de l ordre des feuilles.

   La regle « .smg-banniere-large-texte { max-width:56% } » est supprimee :
   l element n existe dans aucune des deux bannieres, verifie au DOM. Elle ne
   bornait donc rien. La largeur du bloc de texte reste tenue par la marge
   interieure de 90 px de la colonne, comme dans la reference. */
.home .smg-banniere-large .elementor-widget.elementor-widget-heading .elementor-heading-title,
.home .smg-banniere-large .elementor-widget.elementor-widget-text-editor,
.home .smg-banniere-large .elementor-widget.elementor-widget-text-editor p{
  color:#fff;
}

/* C-6 — compacite de la banniere large, rayon Microsoft seulement.

   Le modificateur est pose par le generateur sur la seule banniere de
   Microsoft. Le rayon Securite est hors du perimetre du lot et garde les
   espacements de C-1.

   Le kit Elementor pose « --kit-widget-spacing:20px » sur
   « .elementor-widget:not(:last-child) », et chaque widget calcule sa marge en
   « calc(var(--kit-widget-spacing) + valeur ) ». Sans cette remise a zero, les
   5 px demandes au generateur seraient rendus 25. La variable est redefinie sur
   le widget lui-meme, la ou le kit la pose : une declaration sur un ancetre ne
   suffirait pas (lecon de C-1.2). */
.home .smg-banniere-large--compacte .elementor-widget:not(:last-child){
  --kit-widget-spacing:0px;
}

/* 4. Bannieres — conteneur cliquable, visuel a droite, texte en HTML. */
.home .smg-banniere{
  transition:box-shadow .2s, transform .2s;
}
.home .smg-banniere:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.home .smg-banniere-visuel img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:120px;
  margin-left:auto;
}

/* 5. Raccourcis du haut — une ligne, defilement horizontal si necessaire
      plutot qu un retour a la ligne desordonne. */
.home .smg-raccourcis ul.elementor-icon-list-items{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 0;
}
.home .smg-raccourcis .elementor-icon-list-item{
  white-space:nowrap;
}

/* 6. Selection SMG et onglets — les cartes WooCommerce rendues par shortcode.
      Mesure du 16/09/2026 : les visuels du catalogue vont de 205 a 308 px de
      haut, ce qui desaligne titres et prix d une carte a l autre. Home 3 aligne
      ses cartes ; on impose donc une zone de visuel de hauteur constante, le
      visuel restant entier (contain) et jamais recadre. */
.home .smg-selection ul.products,
.home .smg-onglets-devis ul.products{
  margin:0;
  padding:0;
  list-style:none;
}
/* C-8 — cadre d image du bloc devis, normalise comme ailleurs.

   La regle de C-1 figeait la hauteur a 230 px et laissait la largeur suivre le
   fichier. Mesure M-5 : les huit cadres des deux onglets Adobe faisaient bien
   230 x 230, mais par la seule coincidence de visuels carres — 260x260 et
   512x512. L onglet AutoCAD, dont les sources sont en 390 x 260, donnait
   245 x 230 ; et la largeur variait avec l ecran, de 207 a 1600 px jusqu a 148
   a 390 px, pour un cadre alors deux fois plus haut que large.

   Meme motif qu en C-4.1 et C-6, aux memes valeurs : rapport 1:1, fond #F2F2F2
   de la charte, visuel entier en contain, marge interieure qui l ecarte du bord.
   Le selecteur est borne au seul widget — verifie au DOM, « smg-onglets-devis »
   n a qu un porteur — et il est descendant, donc il vaut aussi pour les cartes
   injectees par AJAX au changement d onglet. */
.home .smg-onglets-devis .products-thumb{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  background:#f2f2f2;
}
/* C-8.1 — la marge interieure du cadre devient proportionnelle.

   Les 18 px poses en C-8 valaient 11,5 % de la largeur du cadre tant que
   celui-ci faisait 314 px. A six colonnes il tombe a 199 px, ou la meme valeur
   fixe en occuperait 18 % : le visuel utile aurait perdu bien plus que le cadre.

   Le rapport de C-8 est donc reconduit tel quel, exprime en pourcentage :
   18 / 314 = 5,73 %. Un retrait en pourcentage se calcule sur la largeur du
   bloc contenant sur ses quatre cotes — le cadre etant carre, la marge reste
   egale partout. Aucune valeur n est calibree sur les visuels du jour. */
.home .smg-onglets-devis .products-thumb .woocommerce-LoopProduct-link{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:5.73%;
  background:transparent;
}
.home .smg-onglets-devis .products-thumb img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* 6 ter. Titres de carte du bloc devis — deux lignes reservees (C-8.1).

   A quatre colonnes, la largeur de texte etait de 314 px et un seul des seize
   titres de l onglet Abonnement se repliait. A six, elle tombe a 200 px et ils
   sont trois — aucun n atteint trois lignes. Sans reserve, les trois cartes
   concernees descendaient leur prix et leur bouton de 16,8 px sous ceux des
   autres ; avec elle, l ecart tombe a zero sur cet onglet, de 1440 px a 1600.

   La hauteur reservee vaut donc deux lignes, soit deux fois l interligne rendu
   de 16,8 px. Elle est ecrite en em, relative a la fonte : 2,4 em de 14 px font
   33,6 px, et la valeur suit la fonte si elle change, au lieu d etre calibree
   sur le rendu du jour.

   C est une reserve, pas une contrainte : un titre plus long continue de
   pousser sa carte. Trois cas mesures le font — « Adobe Creative Cloud avec
   Stock (10 image/mois) » entre 1200 et 1440 px et a 390 px, et les titres de
   47 et 33 caracteres de l onglet Licence Perpetuelle. Porter la reserve a
   trois lignes les alignerait, au prix de 16,8 px de vide sur les treize autres
   cartes : ecarte, et consigne pour arbitrage.

   Borne au seul bloc devis — la Selection et les rayons gardent leurs titres a
   hauteur libre. */
.home .smg-onglets-devis .product-title{
  min-height:2.4em;
}

/* 6 bis. Selection SMG — cadre d image normalise (C-4.1).

   La hauteur constante posee en C-1 alignait deja titres et prix, mais laissait
   la largeur du cadre suivre le rapport de chaque visuel : 232, 304, 262 et
   232 px pour les quatre cartes, mesures a 1440 px. Le bloc paraissait irregulier
   alors que les colonnes, elles, font bien 334 px chacune.

   La reference cadre ses visuels dans un carre de 304 px, arrondi a 15 px et
   borde de #E7E7E7 — un cadre du composant, pas une propriete des fichiers.
   Le meme principe est repris ici : le cadre occupe toute la largeur utile de
   la carte et adopte le rapport 1:1. A 1440 px il fait 304 px de cote, comme
   la reference.

   Fond #F2F2F2 : c est le gris de fond de page de la charte, aucune valeur
   nouvelle n est introduite. Sur le panneau blanc du bloc, il detache le cadre
   sans l assombrir. La reference ne declare pas de fond — le gris qu on y voit
   vient de ses images de remplacement — il fallait donc en choisir un.

   Le visuel reste entier : contain, jamais deforme, jamais rogne, avec une
   marge interieure qui l empeche de toucher le bord arrondi. */
.home .smg-selection .products-thumb{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  background:#f2f2f2;
}
.home .smg-selection .products-thumb .woocommerce-LoopProduct-link{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:18px;
  background:transparent;
}
.home .smg-selection .products-thumb img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* C-4.1 — titre du bloc sous 767 px.

   Le parent descend deja de 28 a 24 px sous 991 px
   (.bwp_product_list.list-deal2 .content-title h2). A 390 px cela suffit a la
   reference, dont le titre fait seize caracteres ; le notre en fait trente-quatre
   et passait sur deux lignes, soit 58 px au-dessus d une carte de 301.

   19 px est la plus grande taille a laquelle « La sélection Sene Multimedia
   Group » tient sur une seule ligne a 390 px : a 20 px il repasse a deux. Le
   texte n est ni raccourci ni tronque. L ecart sous l en-tete suit, de 20 a
   14 px. Au-dela de 767 px, rien ne change. */
@media (max-width:767px){
  .home .smg-selection .content-title h2{
    font-size:19px;
    line-height:1.25;
  }
  .home .smg-selection .bwp-heading-content{
    margin-bottom:14px;
  }
}

/* 6 ter. Cadres d image des grilles de rayon (C-6).

   Constat de M-2 : la hauteur du cadre n est posee nulle part. Les seules
   regles qui l atteignent sont « .content-product-list .products-thumb »
   (inline-block) et « .products-list.grid .product-wapper .products-thumb »
   (position relative, overflow hidden) ; aucune ne declare height, min-height
   ni aspect-ratio, et l image y est en « height:auto ». Le cadre prend donc le
   rapport du fichier.

   Les quatre cartes de Microsoft paraissaient regulieres par coincidence : ses
   cinq visuels font tous 500x442. Le rayon Securite, meme widget et meme CSS,
   le demontre par l absurde — 244,8 px de haut pour les trois ESET (250x272),
   225 pour BitDefender (327x327) et Panda (260x260).

   Portee du selecteur. Verifie au DOM avant d ecrire la regle : « list-link3 »
   n est porte que par les deux widgets de rayon, et par eux seuls sur toute la
   page ; verifie en base : aucune autre publication ne contient ce layout. Les
   trente-cinq autres cadres de l accueil — Selection, onglets devis, colonnes
   laterales — sont hors de « .list-link3 » et ne sont pas touches. Les
   colonnes laterales gardent ainsi leur vignette de 85 px de large, posee par
   le parent en « flex:0 0 85px ».

   Motif repris de C-4.1, sans rien y changer : rapport 1:1, fond #F2F2F2 — le
   gris de fond de page de la charte, aucune valeur nouvelle —, lien en flex
   centre occupant toute la hauteur avec une marge interieure qui empeche le
   visuel de toucher le bord, image en « contain » a 100 %. Le visuel reste
   entier : jamais deforme, jamais rogne. */
.home .bwp_product_list.list-link3 .products-thumb{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  background:#f2f2f2;
}
.home .bwp_product_list.list-link3 .products-thumb .woocommerce-LoopProduct-link{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:18px;
  background:transparent;
}
.home .bwp_product_list.list-link3 .products-thumb img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* 6 quater. Bas de la colonne laterale des rayons (D-2).

   Constat. Elementor etire deja les deux colonnes de la section a la meme
   hauteur : mesure a 1440 px, 710,9 px de part et d autre pour Microsoft. Ce
   qui ne suit pas, c est le panneau blanc : il vit dans une section interne, et
   le « .elementor-widget-wrap » qui la porte est en « align-content:flex-start ».
   Sa ligne de flex est donc tassee en haut, a la hauteur de son contenu —
   601,7 px — et le panneau s arrete 74 px au-dessus du bas de la colonne de
   gauche, 181 px pour Securite.

   Ce que fait la reference. Rien. Son « .elementor-widget-wrap » est en
   « align-content:flex-start » lui aussi : aucun mecanisme d etirement. Si ses
   deux colonnes finissent au meme niveau, c est que chez elle la colonne de
   DROITE est la plus haute des deux — bouton « All products » de 59,4 px plus
   panneau de 651, soit exactement les 710,4 px de la section — de sorte qu elle
   n a aucun jeu et que son dernier element touche forcement le bas. C est la
   colonne de gauche qui s y etire, de 11,5 px. Une coincidence de contenus,
   pas une propriete de mise en page : chez nous la banniere large rend la
   colonne de gauche plus haute, et le rapport s inverse.

   Mecanisme retenu. Rendre la ligne de flex extensible plutot que tassee, et
   donner au conteneur de la section interne la hauteur de son parent. Le reste
   de la chaine suit tout seul : la colonne interne et le panneau sont des
   elements de flex en « align-items:normal », donc etires par defaut. Aucune
   hauteur n est ecrite : la regle tient quel que soit le nombre de produits,
   la longueur des titres ou la hauteur de la banniere.

   Ce qui occupe l espace ajoute : le panneau blanc s allonge, et lui seul. Le
   panneau garde « align-content:flex-start », de sorte que le titre et la liste
   restent groupes en haut, a leur hauteur naturelle — entrees mesurees
   inchangees, 90,9 px. L espace gagne reste donc blanc, sous la liste :
   99 px pour Microsoft, 206 px pour Securite a 1440 px.

   Bornage a 992 px. Au-dela, les deux colonnes sont cote a cote et l alignement
   a un sens. En dessous de 992 px elles le sont encore jusqu a 768, mais
   l etirement y couterait 144 et 284 px de blanc pour une colonne deja etroite :
   l objectif etant le bureau, la regle s y arrete. Sous 768 px les colonnes
   s empilent et la regle est inerte : le panneau reprend la hauteur de son
   contenu, sans hauteur residuelle. */
@media (min-width:992px){
  .home .smg-rayon-colonne > .elementor-widget-wrap{
    align-content:stretch;
  }
  .home .smg-rayon-colonne > .elementor-widget-wrap > .elementor-section > .elementor-container{
    height:100%;
  }
}

/* 7. Onglets « sur devis » — repere visuel aligne sur les liens de rayon. */
.home .smg-onglets-devis .elementor-tabs-wrapper{
  gap:4px;
}
.home .smg-onglets-devis .elementor-tab-title{
  border-radius:20px 20px 0 0;
}

/* 7 bis. Bandeau « Nos partenaires » — haut du panneau du bloc devis
   (C-13, elargi a huit marques en C-13.1).

   Il remplace le bandeau de C-8, qui portait le badge Adobe, la formule
   « Solutions professionnelles disponibles sur devis » et un bouton de devis.
   Les quatre selecteurs qui repartissaient ces trois widgets ont ete retires
   en C-13 : plus rien ne les porte.

   Fond de cellule RETABLI en C-13.1. En C-13, les cellules ne peignaient rien :
   les logos Adobe et Microsoft de la mediatheque avaient un fond BLANC OPAQUE,
   et toute teinte aurait imprime deux rectangles blancs au milieu des quatre.
   Les huit marques sont desormais detourees — verrouillages horizontaux
   officiels pour Adobe, Microsoft et Dr.Web, qui etaient les trois carres
   opaques — et le #F2F2F2 de la charte reprend sa place.

   Hauteurs. Elles ne sont ni egales ni deduites de la boite : a hauteur egale,
   un logotype tres etire couvre bien plus d encre qu une marque compacte. Les
   huit sont posees sur une moyenne geometrique de leur rapport natif, puis
   verifiees a l ecran. Rapports natifs : Adobe 3,95 · Microsoft 4,68 ·
   Autodesk 9,06 · Kaspersky 4,82 · Dr.Web 3,61 · ESET 2,53 · Bitdefender 6,79 ·
   Zoom 4,44.

   Elles sont posees en « max-height », jamais en « height » : avec
   « max-width:100% » et des dimensions automatiques, une cellule trop etroite
   reduit le logo en conservant son rapport, au lieu de l ecraser. Meme montage
   qu au panneau des Guides en C-10.1.
   ------------------------------------------------------------------ */
.home .smg-editeurs .smg-editeurs-grille{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  align-items:center;
  gap:8px;
}
.home .smg-editeurs .smg-editeurs-cellule{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:5px 4px;
  background:#F2F2F2;
  border-radius:10px;
}
.home .smg-editeurs .smg-editeurs-cellule img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
}
.home .smg-editeurs .smg-editeurs-cellule--adobe img{ max-height:26px; }
.home .smg-editeurs .smg-editeurs-cellule--microsoft img{ max-height:24px; }
.home .smg-editeurs .smg-editeurs-cellule--autodesk img{ max-height:17px; }
.home .smg-editeurs .smg-editeurs-cellule--kaspersky img{ max-height:24px; }
.home .smg-editeurs .smg-editeurs-cellule--drweb img{ max-height:26px; }
.home .smg-editeurs .smg-editeurs-cellule--eset img{ max-height:30px; }
.home .smg-editeurs .smg-editeurs-cellule--bitdefender img{ max-height:20px; }
.home .smg-editeurs .smg-editeurs-cellule--zoom img{ max-height:24px; }

/* Grille. Huit cellules sur une rangee au-dessus de 1199 px, quatre en dessous.
   La bascule est MESUREE, pas choisie : a 1440 px la cellule offre 150,9 px de
   contenu et le plus etire des huit, Autodesk — rapport 9,04 — y tient en
   16,7 px de haut, juste au-dessus du seuil de lisibilite de 16 px. A 1199 px
   la cellule tombe a 120,8 px et Autodesk avec elle, a 13,4 px : sous le seuil.
   La rangee de huit s arrete donc la, et non a 992 px.

   Rappel de mesure : la largeur vue par les requetes media compte la barre de
   defilement, celle de « clientWidth » non. Les paliers se lisent a un pixel
   pres. */
@media (max-width:1199px){
  .home .smg-editeurs .smg-editeurs-grille{
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
  }
}

/* Sous 735 px, la cellule de la grille de quatre descend sous 154 px et
   Autodesk sous le seuil : 16,1 px a 735, 6,6 px a 390. La grille passe donc a
   deux colonnes. Le palier n est pas choisi sur un nombre rond mais sur la
   largeur ou la mesure bascule, verifiee a 735 et a 734. Deux colonnes font
   quatre rangees : c est plus haut que 4 x 2, et c est le prix de la
   lisibilite des huit. */
@media (max-width:734px){
  .home .smg-editeurs .smg-editeurs-grille{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  /* A 390 px, la cellule offre 141,6 px de contenu avec le retrait de 4 px et
     Autodesk y tombe a 15,7. Le retrait passe a 2 px : 145,6 px de contenu,
     16,1 px de haut, le seuil est repris. On resserre l air avant de toucher
     aux logos. */
  .home .smg-editeurs .smg-editeurs-cellule{
    padding:5px 2px;
  }
}

/* 7 ter. Acces catalogue « Catalogue Adobe » et « Catalogue AutoCAD » (C-8, C-8.1).

   Ils occupent leur propre ligne, alignee a droite, immediatement au-dessus de
   la rangee d onglets — la ou les rayons posent « Tous les produits Microsoft »
   au-dessus de leur panneau de cartes. Ils ne sont pas entres DANS la rangee :
   le gabarit du plugin est ferme et aucune regle ne peut y faire entrer un
   element exterieur ; l y amener en absolu supposerait de connaitre la hauteur
   du bandeau, qui varie avec la largeur.

   C-8.1 — de un a deux acces. Le widget bouton d Elementor ne rend qu un seul
   lien : il cede la place a un widget HTML qui porte les deux ancres dans une
   rangee a lui. La rangee est posee sur ce conteneur-la, jamais sur le
   « .elementor-widget-wrap » de la colonne, qui contient aussi le widget
   d onglets et dont la disposition ne doit pas changer.

   Les deux acces ne dependent pas de l onglet actif : ce sont deux destinations
   fixes, le catalogue Adobe et le catalogue AutoCAD, et rien dans leur rendu
   n est lie a l etat du carrousel.

   Repli. La rangee passe a la ligne d elle-meme si la place manque, sans
   troncature ni defilement horizontal. A 390 px, les deux pilules mesurent
   ensemble moins que les 370 px disponibles et tiennent cote a cote ; le repli
   ne sert que si un libelle s allonge.

   Meme pilule que les liens de rayon, valeurs de C-8 reconduites telles quelles :
   fond blanc, bordure #E4E8E6, rayon 20 px, 13 px / 500, texte #333, survol et
   focus en #218663. Les onglets, eux, sont en texte nu de 16 px sans fond ni
   bordure : les deux langages ne se confondent pas, les acces vivent sur une
   autre ligne, et ils viennent avant les onglets dans le DOM — la tabulation
   les rencontre donc en dehors de leur sequence. */
.home .smg-onglets-lien.elementor-widget{
  margin:0 0 6px;
  padding:0;
}
.home .smg-onglets-lien .smg-catalogue-liens{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.home .smg-onglets-lien .smg-catalogue-lien{
  display:inline-block;
  padding:5px 12px;
  border:1px solid #e4e8e6;
  border-radius:20px;
  background:#fff;
  color:#333;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:normal;
  text-transform:none;
  text-decoration:none;
}
.home .smg-onglets-lien .smg-catalogue-lien:hover,
.home .smg-onglets-lien .smg-catalogue-lien:focus{
  border-color:#218663;
  background:#fff;
  color:#218663;
}
.home .smg-onglets-lien .smg-catalogue-lien:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff, 0 0 0 5px #1a6b4f;
}
/* P5-ACCUEIL — sous 768 px, la rangee alignee a droite collait la seconde
   pilule au bord du panneau (10 px de la fenetre a 390 px, mesure P5), seule
   au milieu du fond gris entre deux panneaux. Elle est centree : marge egale
   des deux cotes. Au-dessus, l alignement a droite sur le bord du panneau
   reste celui de C-8.1. */
@media (max-width:767px){
  .home .smg-onglets-lien .smg-catalogue-liens{
    justify-content:center;
  }
}

/* 7 quater. Onglets du bloc devis — focus visible au clavier (C-8).

   Les trois onglets sont des liens atteignables a la tabulation, mais le parent
   rend « outline-style:none » sur tout le site : rien ne signalait le focus.
   Meme langage que partout ailleurs dans cette feuille — anneau double, blanc
   puis vert fonce — pose sur « :focus-visible », de sorte qu un clic a la
   souris ne l affiche pas. L activation au clavier, elle, le montre. */
.home .smg-onglets-devis .filter-category li > a:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff, 0 0 0 5px #1a6b4f;
  border-radius:3px;
}

/* 7 quinquies. Fleches du carrousel devis — extremites (C-8.2).

   Depuis C-8.1 ce carrousel est en « infinite:false » : aux extremites, la
   fleche cesse d agir. Elle ne le montrait pas, et affichait meme le contraire
   de la verite au retour sur un onglet laisse en fin de course.

   L attribut est tenu a jour par js/onglets-devis.js, qui recopie sur les
   fleches visibles le verdict de Slick. Une regle sur « slick-disabled » ne
   pouvait rien atteindre : cette classe vit sur les fleches d origine, que le
   parent detache du document apres les avoir clonees. Le detail est dans le
   script.

   Traitement : la fleche reste presente et lisible, mais nettement effacee, en
   #333333 de la charte plutot qu en noir plein, et le survol ne la fait plus
   passer au vert. Elle n est pas escamotee — une commande qui disparait deplace
   ses voisines et laisse croire a un defaut.

   « pointer-events:none » suffit a rendre le clic sans effet : le gestionnaire
   du parent est pose sur la fleche elle-meme, et ne recoit donc plus rien. Rien
   n est retire du parcours clavier, ces fleches etant des <i> sans « tabindex »
   ni « role » — elles n y ont jamais figure.

   Specificite. La regle de survol du parent qui revele les fleches en compte
   quatre (« .bwp-filter-content > .content-product-list:hover .slick-arrow ») ;
   celle-ci en compte cinq : elle l emporte sans dependre de l ordre des
   feuilles, et sans !important. */
.home .elementor .smg-onglets-devis .slick-arrow[aria-disabled="true"]{
  color:#333;
  opacity:.3;
  cursor:default;
  pointer-events:none;
}

/* 8. Guides — les trois derniers articles publies (C-10).

      Le bloc etait deux colonnes Elementor construites a la main, avec les
      titres, les extraits, les slugs et deux identifiants de media ecrits en
      dur. Il est desormais rendu par [smg_guides], dans inc/guides.php, qui
      interroge les articles : la raison du choix et le perimetre de la source
      sont expliques la-bas.

      La grille est ici, et elle suit celle des blocs deja valides plutot que
      d en inventer une : trois cartes jusqu a 992 px, deux de 768 a 991, une
      en dessous — ou la Selection passe elle aussi a deux puis a une, et ou le
      bloc Guides s empilait deja.

      Un ecart de 20 px separe les cartes. Les deux colonnes du bloc statique se
      touchaient — ecart mesure a 0 px — et leurs rayons se rejoignaient au
      milieu : les deux cartes se lisaient comme un seul panneau fendu. */
.home .smg-guides{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media (max-width:991px){
  .home .smg-guides{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width:767px){
  .home .smg-guides{
    grid-template-columns:1fr;
  }
}

/* La carte, aux valeurs du bloc statique : fond blanc, rayon 10 px de la
   convention, retrait 20 / 20 / 24 / 20. En colonne de flex pour que le lien
   se pose en bas quel que soit le repli du titre ou de l extrait — meme motif
   qu en C-8.1, l alignement par construction plutot que par coincidence. */
.home .smg-guide{
  display:flex;
  flex-direction:column;
  padding:20px 20px 24px;
  border-radius:10px;
  background:#fff;
}

/* Le visuel devient un PANNEAU (C-10.1).

   C-10 recadrait en « cover » dans un rapport 16/9. Les images a la une vont
   de 1,19 a 3,92 de rapport — 940x788, 850x500, 979x250, 1920x600, 1920x700,
   788x444 — et le recadrage coupait les plus larges : le logo AUTODESK de la
   deuxieme carte perdait ses deux extremites. Le bloc etant dynamique, aucun
   futur article n est a l abri.

   L image est donc posee ENTIERE, en « contain », sur un panneau au rapport
   fixe. Le rapport reste 16/9 : c est lui qui garde les trois cartes alignees,
   et il ne derive pas — a la difference de la hauteur de 190 px posee en C-1,
   qui valait pour deux cartes de 642 px et pour elles seules.

   Retrait interieur en pourcentage, jamais en pixels : meme motif qu en C-8.1,
   ou une valeur fixe representait 11 % du cadre a une largeur et 18 % a une
   autre. 4 % de la largeur du panneau font 16 px a 1440 et suivent partout
   ailleurs.

   Fond #EEF5F2 — hsl(155, 26%, 95%). Il derive du vert de la charte, #218663,
   dont il reprend la teinte a 155 degres ; la saturation tombe a 26 % et la
   luminosite monte a 95 % pour que le visuel reste le sujet. Il ne peut pas
   etre le #F2F2F2 des cadres produits, qui est la signature du catalogue
   depuis C-6 : c est precisement ce que ce bloc ne doit pas evoquer.

   Aucune signature graphique ne s y ajoute : le theme parent n offre ni trame
   ni motif reutilisable — ses images sont toutes fonctionnelles, fil d ariane,
   curseur, chargement, moyens de paiement — et fabriquer un decor serait
   ajouter du bruit a un bloc qu on demande justement de ne pas charger.

   Rayon 6 px : convention close, les visuels sont a 6 px et les conteneurs a
   10 px. La carte reste donc a 10. */
/* Deux niveaux : le rapport sur le panneau, la marge et le centrage sur le
   cadre, sorti du flux.

   Pourquoi hors flux. Une hauteur en pourcentage ne se resout pas de facon
   fiable contre une hauteur deduite d un « aspect-ratio » : mesure faite, le
   panneau de la premiere carte prenait 249,6 px au lieu de 225,9 et suivait son
   image, tandis que les deux autres tenaient — un comportement qui depend de
   l ordre de chargement des images, donc inutilisable. Un cadre en
   « position:absolute; inset:0 » a, lui, une taille definie par construction :
   celle du panneau. Les pourcentages qu il contient se resolvent alors tous.

   Le retrait reste proportionnel, 4 % de la largeur du cadre — meme motif qu en
   C-8.1, ou une valeur fixe representait 11 % du cadre a une largeur et 18 % a
   une autre. A 1440 px, 4 % font 16 px.

   L image n est ni etiree ni recadree : elle est simplement bornee. Elle garde
   donc ses proportions natives quoi qu il arrive, ce qu « object-fit » n aurait
   obtenu qu en lui donnant d abord une boite qui n est pas la sienne. */
.home .smg-guide__visuel{
  position:relative;
  display:block;
  width:100%;
  margin-bottom:16px;
  aspect-ratio:16 / 9;
  border-radius:6px;
  background:#eef5f2;
}
.home .smg-guide__cadre{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4%;
}
.home .smg-guide__visuel img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}

/* Le marqueur editorial. « aria-hidden » est pose dans inc/guides.php : il
   repeterait pour l oreille ce que le titre du bloc dit deja. L icone est un
   « ::before », donc absente du document — decorative par construction, elle ne
   peut entrer dans aucun nom accessible.

   Police : FontAwesome 4.7, celle du parent, deja employee en C-2 et C-3 —
   presence du glyphe f02d verifiee a la mesure avant d etre retenue. Aucune
   police ni aucun fichier d icone n est ajoute. */
.home .smg-guide__marqueur{
  display:block;
  margin-bottom:8px;
  color:#218663;
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  line-height:1;
  text-transform:uppercase;
}
.home .smg-guide__marqueur::before{
  content:"\f02d";
  margin-right:7px;
  font-family:FontAwesome;
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
}

.home .smg-guide__titre{
  margin:0 0 10px;
  color:#333;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
}
.home .smg-guide__titre a{
  color:inherit;
}
.home .smg-guide__extrait{
  margin:0 0 18px;
  color:#636363;
  font-size:14px;
  line-height:1.65;
}

/* Le lien de lecture, editorial et non plus bouton (C-10.1).

   Le bouton a contour vert de C-10 empruntait le vocabulaire des appels a
   l action du catalogue — « Demander un devis », « Voir la categorie ». Ici on
   invite a lire, pas a acheter : un lien suffit, et il distingue le bloc sans
   rien ajouter.

   « margin-top:auto » le pousse en bas de la carte et « align-self:flex-start »
   l empeche de s etirer : c est ce couple qui aligne les trois liens quelles
   que soient les longueurs de titre et d extrait. Acquis de C-10, conserve.

   La fleche est dans le document, non en « ::after », pour pouvoir porter
   « aria-hidden » et rester hors du nom accessible du lien. Son deplacement au
   survol est une micro-interaction : elle est tue lorsque le systeme demande la
   sobriete des animations. */
.home .smg-guide__lien{
  align-self:flex-start;
  margin-top:auto;
  color:#218663;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
}
.home .smg-guide__lien:hover,
.home .smg-guide__lien:focus{
  text-decoration:underline;
}
.home .smg-guide__fleche{
  display:inline-block;
  margin-left:7px;
}
@media (prefers-reduced-motion: no-preference){
  .home .smg-guide__fleche{
    transition:transform .2s ease;
  }
  .home .smg-guide__lien:hover .smg-guide__fleche{
    transform:translateX(3px);
  }
}

/* 8 bis. En-tete du bloc Guides (C-10.1).

   Le titre « Guides » reste le widget Elementor d origine. L accroche et
   l acces « Voir tous les guides » sont deux widgets HTML poses apres lui dans
   la meme colonne ; c est le wrap de cette colonne qui les repartit, comme le
   bandeau du bloc devis en C-8 : tant que deux widgets vivent dans des colonnes
   differentes, aucune regle ne peut les poser sur une meme ligne.

   « align-items:baseline » aligne l acces sur la ligne de base du titre, et non
   sur son milieu ni sur le haut de sa boite.

   L accroche et le carrousel prennent une ligne entiere chacun ; le titre et
   l acces se partagent la premiere. Sous 767 px, l ordre est echange pour que
   l acces passe SOUS l accroche plutot que de comprimer le titre — le repli du
   flex seul l aurait laisse a cote du titre, sur une ligne trop etroite.

   Elementor pose « width:100% » sur chaque widget d un wrap : sans le lever,
   les quatre resteraient sur quatre lignes. Les selecteurs comptent cinq
   classes la ou Elementor en ecrit trois. */
.home .elementor .smg-guides-colonne > .elementor-widget-wrap{
  align-items:baseline;
  column-gap:24px;
  row-gap:0;
}
.home .elementor .smg-guides-colonne > .elementor-widget-wrap > .elementor-widget-heading{
  flex:0 0 auto;
  width:auto;
  margin:0;
  order:1;
}
.home .elementor .smg-guides-colonne > .elementor-widget-wrap > .smg-guides-acces{
  flex:1 1 auto;
  width:auto;
  margin:0;
  order:2;
  text-align:right;
}
.home .elementor .smg-guides-colonne > .elementor-widget-wrap > .smg-guides-accroche{
  flex:0 0 100%;
  width:100%;
  margin:6px 0 24px;
  order:3;
}
.home .elementor .smg-guides-colonne > .elementor-widget-wrap > .elementor-widget-shortcode{
  flex:0 0 100%;
  width:100%;
  margin:0;
  order:4;
}
@media (max-width:767px){
  .home .elementor .smg-guides-colonne > .elementor-widget-wrap > .smg-guides-accroche{
    order:2;
    margin:6px 0 14px;
  }
  .home .elementor .smg-guides-colonne > .elementor-widget-wrap > .smg-guides-acces{
    flex:0 0 100%;
    width:100%;
    order:3;
    margin:0 0 24px;
    text-align:left;
  }
}

/* L accroche : gris de texte secondaire, corps inferieur au titre de 28 px,
   ni capitales ni point final. Elle dit ce que le bloc contient, une fois. */
.home .smg-guides__accroche{
  margin:0;
  color:#636363;
  font-size:15px;
  font-weight:400;
  line-height:1.6;
}

/* L acces au blog est un lien editorial, pas un bouton : ni cadre, ni pilule,
   ni fond. Les pilules du site menent au catalogue — celle du bloc devis, celles
   des rayons ; ce bloc-ci n en est pas. */
.home .smg-guides__tout{
  color:#218663;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  white-space:nowrap;
}
.home .smg-guides__tout:hover,
.home .smg-guides__tout:focus{
  text-decoration:underline;
}

/* 9. Badge Adobe — rendu tel quel par digic_child_adobe_badge().

      Portee. « smg-badge-adobe » est portee par DEUX widgets shortcode : celui
      du bandeau du bloc devis (17cb184) et celui du bloc « Pourquoi choisir »
      (534ecbe). Les regles ci-dessous valent donc pour les deux, et toute regle
      propre a l un des deux doit passer par une autre accroche — voir 9 bis.

      Le balisage de la fonction porte « hidden-xs hidden-sm », heritees de
      l usage en en-tete : contrairement a ce qu affirmait le commentaire de
      C-1, le badge du contenu EST masque a 991 px et au-dessous, par
      template.css:29055 et :29059. Mesure M-6. Ces classes servent ailleurs sur
      le site : on ne les touche pas, on traite la consequence en 9 bis. */
.home .smg-badge-adobe .adobe-badge img{
  height:auto;
  width:100%;
  max-width:300px;
  margin-left:auto;
  margin-right:0;
}
@media (max-width:767px){
  .home .smg-badge-adobe .adobe-badge img{
    margin-right:auto;
  }
}

/* 9 bis. Bloc « Pourquoi choisir Sene Multimedia Group » (C-9).

   Convention des rayons, close en C-9 et valable pour toute l accueil :
   10 px pour les panneaux et les conteneurs, 6 px pour les visuels, le hero et
   les bannieres. Le panneau de ce bloc est deja a 10 px, pose dans Elementor ;
   aucune reprise retroactive n a ete faite sur les autres blocs.

   Accroche. Les deux colonnes du panneau portent desormais une classe posee
   dans Elementor — « smg-pourquoi-texte » sur la colonne de la liste,
   « smg-pourquoi-badge » sur celle du badge. C est ce qui permet de viser ce
   bloc sans toucher au bandeau du bloc devis, qui partage « smg-badge-adobe ».
   Les selecteurs comptent quatre classes la ou Elementor en ecrit trois
   (« .elementor-91381 .elementor-element.elementor-element-XXX ») : ils
   l emportent sans dependre de l ordre des feuilles, et sans !important.

   1. Alignement du badge, de 992 px et au-dessus.

   La regle 9 pose deja « margin-left:auto », mais l image reste « display:inline »
   et une marge automatique n a aucun effet sur une boite en ligne : mesure M-6
   a 1440, l image restait collee a gauche de sa colonne, 154,8 px de vide a sa
   droite. L en-tete ne rencontre pas le defaut, phase4.css:60 y posant deja
   « display:block ». On fait de meme ici, pour ce seul bloc : la marge
   automatique de la regle 9 reprend alors son effet, sans aucun positionnement
   fixe ni absolu. */
.home .elementor .smg-pourquoi-badge .adobe-badge img{
  display:block;
}

/* 9 bis, suite — 2. Espace residuel a 991 px et au-dessous.

   Le badge y est masque par « hidden-sm » puis « hidden-xs », mais sa colonne
   restait dans le flux : 36 % de la largeur du panneau entre 768 et 991 px —
   286,2 px de vide mesures a 900 — puis une ligne de 1 px une fois les colonnes
   empilees. La colonne entiere est donc retiree du flux, et celle du texte
   reprend toute la largeur.

   Le point de rupture est ecrit a la meme valeur que celles de template.css :
   les deux basculent ensemble, quelle que soit la facon dont la largeur est
   calculee.

   Le retrait interne droit de la colonne de texte tombe lui aussi : ses 15 px
   separaient la liste du badge, et il n y a plus de badge a separer. Le texte
   s aligne alors sur les 30 px de retrait du panneau, a gauche comme a droite. */
@media (max-width:991px){
  .home .elementor .elementor-column.smg-pourquoi-badge{
    display:none;
  }
  .home .elementor .elementor-column.smg-pourquoi-texte{
    width:100%;
  }
  .home .elementor .elementor-column.smg-pourquoi-texte > .elementor-element-populated{
    padding-right:0;
  }
}

/* 10. CTA final — rangee des deux actions (C-11).

   La sous-section qui portait les boutons a ete retiree du contenu Elementor :
   elle les enfermait dans deux sous-colonnes de 50 %, chacune alignant son
   bouton vers l interieur. Les deux libelles n ayant pas la meme largeur, le
   groupe etait desaxe a 1440 px — 90,3 px de vide a gauche contre 68,2 a
   droite — le second bouton se repliait sur deux lignes a 1199, et sous 767 px
   les deux partaient en escalier, l un colle a droite, l autre a gauche.

   La rangee est posee ici, sur la colonne de droite, et nulle part ailleurs.
   Aucune structure Elementor n a ete ajoutee en echange, et le reglage « align »
   des deux boutons a ete retire : aucun alignement de texte ne concurrence plus
   cette rangee.

   Elementor pose « width:100% » sur chaque widget d un wrap : sans le lever, les
   deux boutons resteraient sur deux lignes pleine largeur. Les selecteurs
   comptent cinq classes la ou Elementor en ecrit trois — ils l emportent sans
   dependre de l ordre des feuilles, et sans !important.

   Hauteurs egales. « align-items:center » centre les elements sans les etirer :
   un libelle qui se replierait donnerait deux hauteurs differentes. Le repli est
   donc empeche a la source, sur le libelle lui-meme. Combine au retour a la
   ligne du flex, cela donne le bon comportement — quand la place manque, c est
   le second bouton qui descend d une ligne, jamais son texte qui se casse, et
   les deux gardent la meme hauteur a toutes les largeurs. Mesure : le plus large
   des deux fait 195,7 px pour une colonne qui n est jamais sous 320 px.

   La regle « .home .smg-cta-texte a » de C-1 a ete retiree : elle stylait le
   lien inline « Nous contacter », que C-11 supprime du paragraphe. Verifie au
   rendu avant retrait — le paragraphe ne contient plus aucun <a>. La regle de
   focus visible des boutons, elle, est conservee : elle porte sur toute la page
   et vaut aussi pour ces deux boutons-ci. */
.home .elementor .smg-cta-actions > .elementor-widget-wrap{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}
.home .elementor .smg-cta-actions > .elementor-widget-wrap > .elementor-widget{
  flex:0 0 auto;
  width:auto;
  max-width:100%;
  margin:0;
}
.home .smg-cta-actions .elementor-button .elementor-button-text{
  white-space:nowrap;
}

/* Sous 767 px, les deux colonnes de la bande s empilent : le texte et la rangee
   se centrent, et les boutons se posent l un sous l autre ou cote a cote selon
   la place — jamais en escalier. */
@media (max-width:767px){
  .home .elementor .smg-cta-final .elementor-widget-heading,
  .home .elementor .smg-cta-final .smg-cta-texte{
    text-align:center;
  }
  .home .elementor .smg-cta-actions > .elementor-widget-wrap{
    justify-content:center;
  }
}

/* 11. Focus visible sur les composants de l accueil.
       Le parent rend outline-style:none ; le double anneau tient sur le fond
       gris de la page, sur les panneaux blancs et sur la bande verte du CTA. */
.home .elementor .elementor-button:focus-visible,
.home .elementor .elementor-tab-title:focus-visible,
.home .elementor .elementor-icon-list-item a:focus-visible,
.home .elementor .elementor-heading-title a:focus-visible,
.home .smg-guide__visuel:focus-visible,
.home .smg-guide__titre a:focus-visible,
.home .smg-guide__lien:focus-visible,
.home .smg-guides__tout:focus-visible,
.home .smg-banniere a:focus-visible,
.home .bwp_product_list .content-heading .list-link li a:focus-visible,
.home .smg-colonne-menu .bwp-vertical-navigation a:focus-visible,
.home .smg-hero-points button:focus-visible,
.home .smg-hero-pause:focus-visible,
.home .smg-banniere-bwp a.button:focus-visible,
.home .smg-banniere-bwp .bwp-image a:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff, 0 0 0 5px #1a6b4f;
}

/* Les deux controles du slider sont de vrais <button>. Le parent pose
   button:focus{ outline:0; box-shadow:unset !important } (template.css) :
   sans egalite de priorite, aucun de ces boutons ne montre sa prise de focus.
   L usage de !important est limite a ces deux selecteurs. */
.home .smg-hero-points button:focus-visible,
.home .smg-hero-pause:focus-visible{
  box-shadow:0 0 0 2px #fff, 0 0 0 5px #1a6b4f !important;
}

/* C-15.1 — etat d attente de la queue de course des onglets du bloc devis.
   Volontairement minimal : un texte centre, rien d autre. Aucune hauteur n est
   posee ici — celle qui stabilise la mise en page pendant la queue est mesuree
   au clic et portee en style en ligne, puis retiree. */
.home .smg-onglets-devis .smg-onglets-attente{
  padding:24px 0;
  color:#333333;
  text-align:center;
}

/* L element reste dans le document en permanence : une region live retiree ou
   mise en display:none n annonce pas. Hors attente il est vide, et cette regle
   lui ote tout encombrement — c est une regle d effacement au repos, pas une
   regle de dimensionnement du bloc. */
.home .smg-onglets-devis .smg-onglets-attente:empty{
  padding:0;
  height:0;
  overflow:hidden;
}