/* =============================================================================
   Correctifs responsive & réglages globaux Digitemis (site statique Astro)
   Fichier unique, référencé dans toutes les pages via <link>. Éditer ICI pour
   ajuster le responsif / les règles transverses de tout le site.
   (injection du <link> : refs/wordpress/inject-responsive-fixes.cjs)

   ⚠ Réglages du hero d'accueil VALIDÉS par Anthony le 2026-07-04 après de
   nombreuses itérations (étoile, vague+logos, alignements, breakpoints
   992/1200/1400). Ne pas modifier sans demande explicite.
   ============================================================================= */

/* --- En-tête : bascule desktop <-> burger alignée sur 1200px -----------------
   Sous 1200px : on masque l'entête desktop et on ne garde que la barre mobile
   (burger). La nav desktop restait affichée jusqu'à ~992px et s'enroulait sur
   plusieurs lignes (en-tête ~278px) tout en cumulant avec le burger. */
@media (max-width: 1199px) {
  .site-header .header-inner,
  .site-header .site-header__top { display: none !important; }
  /* ...mais on réaffiche le menu quand le burger est ouvert (classe is-active
     posée par custom.js), sinon "rien ne se passe" au clic. */
  .site-header .header-inner.is-active { display: block !important; }

  /* Menu ouvert : panneau FIXE plein écran, scrollable en interne. Sans ça,
     le header (absolu, sans scroll) grandit sous le viewport pendant que le
     scroll de la page est verrouillé (body overflow:hidden via is-show-menu)
     -> le bas du menu déplié était inatteignable. */
  body.is-show-menu .site-header {
    position: fixed !important; top: 0; left: 0; right: 0;
    height: 100dvh !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* le header est un flex wrap : sans ça, l'espace libre est distribué entre
       les lignes (align-content:stretch) et tout le menu se décale de quelques
       px à l'ouverture/fermeture d'un onglet */
    align-content: flex-start !important;
    /* Fond = EXACTEMENT le dégradé du hero de la home (.s-hero__inner) : le menu
       ouvert reprend donc le fond que le site a déjà sous le header. Opaque (le
       dégradé se termine en #180636), plein écran -> rien ne transparaît. */
    background:
      linear-gradient(rgba(24, 6, 54, 0) 58%, rgb(24, 6, 54) 100%),
      radial-gradient(at 100% 100%, rgb(49, 47, 186) 0%, rgb(24, 6, 54) 60%) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* La barre logo + croix (sticky) doit masquer le contenu qui défile dessous :
     fond OPAQUE = la couleur du HAUT du dégradé (#180636) -> raccord invisible
     avec le panneau, et identique au fond de la home sous le logo. */
  body.is-show-menu .site-header--mobile {
    position: sticky !important; top: 0; z-index: 5;
    height: 86px !important; box-sizing: border-box;
    background: rgb(24, 6, 54) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Surmenu (Digitemis Academy, Ressources, À propos, Recrutement, Contact) :
     de retour dans le menu ouvert, sous la navigation principale. */
  body.is-show-menu .site-header .site-header__top { display: block !important; }
  body.is-show-menu .site-header .site-header__top .site-header__top__wrap {
    flex-direction: column; align-items: flex-start; gap: 16px;
    padding: 8px 0 32px;
  }
  body.is-show-menu .site-header .site-header__top .menu-right {
    display: flex; flex-direction: column; gap: 14px;
  }
}

/* --- Hero : pas d'étoile décorative quand un visuel occupe la colonne droite -
   L'étoile et la photo se gênaient mutuellement. Règle : si .right contient une
   image, on retire l'étoile (.s-hero__icon). N'affecte pas les grands visuels
   centraux d'articles, uniquement le visuel à droite du hero. */
.s-hero__inner:has(.s-hero__content .right img) .s-hero__icon { display: none !important; }

/* --- Hero avec photo à droite (uniquement en 2 colonnes, >=768px) :
   photo alignée sur le TEXTE (pas le titre), marge nette entre texte et photo,
   et largeur de photo maîtrisée (sinon le width:100% de l'image dans une colonne
   sans largeur définie s'effondre à 0, ce qui empêche aussi le chargement d'une
   image lazy). En dessous de 768px le hero s'empile : on ne touche à rien. */
@media (min-width: 768px) {
  .s-hero__content:has(.right img):not(.--one-col) { align-items: flex-start !important; column-gap: 64px !important; }
  .s-hero__content:has(.right img):not(.--one-col) .left { flex: 1 1 auto !important; }
  .s-hero__content:has(.right img):not(.--one-col) .right { flex: 0 0 42% !important; margin-left: 0 !important; margin-top: 80px !important; }
  .s-hero__content:has(.right img):not(.--one-col) .right img { width: 100% !important; height: auto !important; display: block; }
}

/* Hero d'ARTICLE (.--one-col) : image à la une centrée, pleine largeur sous le
   titre (le layout 2-col ci-dessus ne s'applique plus aux articles). On garantit
   une largeur définie à la colonne image pour éviter l'effondrement à 0 (lazy).
   JAMAIS d'étirement : hauteur AUTO + pas de max-height/crop imposé par le thème
   (.wp-post-image) -> l'image garde son homothétie (ratio d'origine). */
.s-hero__content.--one-col .right { width: 100% !important; }
/* Meme HAUTEUR pour toutes les images a la une (ratio des visuels recents 1280x500) :
   largeur variable, homothetie preservee, centree. Les vieux visuels d'autres dimensions
   gardent donc la meme hauteur que les recents (contain = pas d'etirement, pas de crop). */
.s-hero__content.--one-col .right img { aspect-ratio: 1280 / 500 !important; width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; display: block; margin: 0 auto !important; }

/* =============================================================================
   Accueil <1200px : hero empilé, structure SIMPLIFIÉE en un seul système.
   Principe : la vague et les 3 logos forment UN bloc blanc solidaire
   (.s-hero__bottom = corps blanc de la vague, ::before = courbe au-dessus,
   logos EN FLUX dedans -> ils ne peuvent physiquement pas en sortir ni glisser
   vers les bords). L'étoile est plongée dans la vague (translateY + coupe
   overflow au ras du bloc blanc) : à toute largeur, elle émerge de la vague,
   branches basses mangées. Au-delà de 1200px : version desktop d'origine.
   ============================================================================= */
@media (max-width: 1199px) {
  /* hauteur = contenu (pas de min-height desktop qui laisse flotter l'étoile) */
  .s-hero--home { min-height: 0 !important; }
  .s-hero--home .s-hero__inner { flex-direction: column !important; min-height: 0 !important; padding-bottom: 0 !important; }

  /* Texte CENTRÉ sur toute la plage empilée (dès que l'étoile passe en bas) */
  .s-hero--home .s-hero__content { align-items: center !important; }
  .s-hero--home h1,
  .s-hero--home .s-hero__content,
  .s-hero--home .s-hero__content * { text-align: center !important; }
  .s-hero--home .btn-group { justify-content: center !important; }
  /* moins de vide entre les boutons et l'étoile (le .left portait 80px de padding bas),
     et colonne pleine largeur : sinon le thème garde 55% dès 992px et le texte
     "centré" se retrouve décalé à gauche de l'écran. */
  .s-hero--home .s-hero__content .left { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; padding-bottom: 24px !important; }
  /* paragraphe sous le H1 : bien dégagé des bords sur écrans moyens
     (sans effet sur mobile : 680px n'y contraint rien) */
  .s-hero--home .s-hero__content__des { max-width: 680px !important; margin-left: auto !important; margin-right: auto !important; }

  /* Étoile : centrée, TOUJOURS plongée dans la vague (la coupe overflow tombe
     au ras du bloc blanc -> jamais de trou sombre, jamais d'étoile qui flotte). */
  .s-hero--home .s-hero__icon {
    position: static !important; right: auto !important; bottom: auto !important;
    width: 420px !important; max-width: 84% !important;
    margin: clamp(8px, 2vw, 20px) auto 0 !important; max-height: none !important;
    /* enfoncement ~20% de la hauteur de l'étoile, à toute largeur */
    transform: translateY(clamp(58px, 18vw, 82px)) !important;
  }

  /* Vague desktop (figure absolue) hors jeu sur toute la plage empilée */
  .s-hero--home .s-hero__curve { display: none !important; }

  /* LA VAGUE : bloc blanc en flux + courbe au-dessus. Padding haut nul :
     les logos collent à la courbe (imprimés sur la vague). */
  .s-hero--home .s-hero__bottom {
    position: relative !important; bottom: auto !important;
    background: #fff !important;
    min-height: 0 !important;
    padding: 0 24px 12px !important;
    margin-bottom: 40px !important;
    z-index: 2;
  }
  .s-hero--home .s-hero__bottom::before {
    content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 74px;
    transform: translateY(-100%);
    background: url("/wp-content/themes/hello-elementor-child/assets/images/hero-curve.webp") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
  /* Les 3 logos : EN FLUX dans le bloc blanc, centrés, symétriques.
     position:relative (et non static) : la courbe ::before est absolue et
     peindrait PAR-DESSUS les logos (hauts coupés) ; en relative ils passent
     au premier plan, et top négatif les remonte SUR le plateau de la courbe. */
  .s-hero--home .s-hero__bottom .logo {
    /* remontée plus forte sur petits écrans (-33px à 320px de large, -18px à 1100px) */
    position: relative !important; top: calc(-40px + 2vw); bottom: auto !important; left: auto !important; right: auto !important;
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: center !important;
    gap: clamp(24px, 6vw, 64px) !important;
    padding: 0 !important; margin: 0 !important;
  }
  .s-hero--home .s-hero__bottom .logo figure { margin: 0 !important; }
  .s-hero--home .s-hero__bottom .logo figure img { height: clamp(40px, 7vw, 60px) !important; width: auto !important; }
}

/* --- Accueil desktop : de l'air entre le texte et l'étoile (colonne texte
   55% -> 48%), et hero compressible : le padding bas de 185px rendait le
   contenu plus haut que les petits écrans desktop (zoom, laptops) et faisait
   sortir les logos de l'écran. */
@media (min-width: 1200px) {
  .s-hero--home .s-hero__content .left { flex: 0 0 48% !important; }
  .s-hero--home .s-hero__inner { padding-bottom: 110px !important; }
  /* Étoile : GROSSE, ancrée en bas à droite et mangée par la vague desktop
     (elle plonge sous la courbe blanche, qui est peinte après elle). Ancrage
     bas = position stable : fini le top:50% qui la faisait monter dans le
     menu sur les grands écrans. */
  .s-hero--home .s-hero__icon {
    top: auto !important; bottom: -60px !important; transform: none !important;
    display: block !important;
    width: 43% !important; max-width: 700px !important; max-height: none !important;
    margin: 0 !important;
  }
  .s-hero--home .s-hero__icon img { width: 100% !important; max-width: 100% !important; max-height: none !important; }
}

/* --- Heros 1200-1399px : le container du hero est pleine largeur (padding 24)
   alors que le logo du header est à 48px -> le texte dépassait à gauche du
   logo. On aligne. (>=1400px les deux containers font 1328px centrés.) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .s-hero .container { padding: 0 48px !important; }
}

/* --- Accueil : H1 en pyramide (3 lignes garanties, largeur croissante) -------
   Chaque ligne est un bloc (plus de <br> fragile). Tailles en em : la
   progression tient à tous les breakpoints. Largeurs rendues ~351/381/410px
   à 56px de base = effet "construction". Les spans internes gardent la
   graisse light du thème (Un / se construit). */
.s-hero--home h1 span.nf-pl { display: block; font-weight: 900; line-height: 1.08; }
.s-hero--home h1 span.nf-p2 { font-size: 1.30em; }
.s-hero--home h1 span.nf-p3 { font-size: 1.14em; }
/* Sous-titre : largeur calée pour une coupe propre —
   "… gouvernance / et conformité … organisation – et / votre réputation." */
.s-hero--home .s-hero__content__des { max-width: 552px !important; }

/* --- Carrousel "Ils nous font confiance" : espacement fiable -----------------
   Le layout swiper (largeurs de slides figées en px + transform) donnait des
   espacements irréguliers en responsive. Le carrousel n'autoplay pas : on le
   rend statique en flex centré, gap fluide, retour à la ligne propre sur
   mobile. Les slides dupliqués (mode infinite) sont masqués. */
.elementor-widget-image-carousel .swiper-wrapper {
  display: flex !important; flex-wrap: wrap !important;
  justify-content: center !important; align-items: center !important;
  gap: clamp(20px, 4.5vw, 64px) !important;
  transform: none !important; width: auto !important;
}
.elementor-widget-image-carousel .swiper-slide { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; }
.elementor-widget-image-carousel .swiper-slide-duplicate { display: none !important; }
.elementor-widget-image-carousel .swiper-slide-image { height: clamp(24px, 3vw, 34px) !important; width: auto !important; }
/* MAIF (triangle compact) : légèrement plus grand pour équilibrer */
.elementor-widget-image-carousel .swiper-slide-image[aria-label="MAIF"] { height: clamp(30px, 3.8vw, 43px) !important; }

/* --- Page Contact : texte descendu au niveau du formulaire + grande étoile
   sous le texte (comme le hero de la home, mais à gauche). Desktop 2 colonnes
   uniquement ; en empilé le hero reste tel quel. */
@media (min-width: 992px) {
  /* Heros AVEC formulaire (page contact + pages ressources : livre-blanc, guide COMEX, webinars,
     academy, sensibilisation, devenir-dpo...) : colonnes alignees en HAUT + carte formulaire a
     hauteur FIXE, independante de la longueur du texte. Reference = livre-blanc (form a ~327).
     Avant : align-items:center faisait varier la position du form selon la hauteur du texte
     (texte long guide-COMEX -> form pousse a 400). flex-start + paddings fixes = toutes ces pages
     identiques (h1 ~296, carte form ~327). Cible :has(.form-contact) => uniquement les heros qui
     contiennent le formulaire (pas les articles/expertises ou le form est dans le corps).
     (2026-07-16, demande Anthony) */
  .s-hero__content:has(.form-contact) { align-items: flex-start !important; }
  .s-hero__content:has(.form-contact) .left { padding-top: 32px !important; }
  .s-hero__content:has(.form-contact) .right { padding-top: 71px !important; }
}
.nf-star-left { position: absolute; left: 24px; bottom: -80px; width: 640px; max-width: 46%; margin: 0; z-index: 0; pointer-events: none; }
.nf-star-left img { width: 100%; height: auto; display: block; }
/* alignée à gauche sur le texte du hero (même géométrie que .s-hero .container) */
@media (min-width: 1200px) and (max-width: 1399px) { .nf-star-left { left: 48px; } }
@media (min-width: 1400px) { .nf-star-left { left: calc((100% - 1328px) / 2 + 24px); } }
@media (max-width: 991px) { .nf-star-left { display: none !important; } }

/* Largeur du formulaire de contact capee a 500px (regle d'origine). Aucun "effet dossier" :
   retire a la demande d'Anthony (2026-07-16) apres trop d'allers-retours. Les formulaires
   restent une carte blanche arrondie normale posee sur le bloc bleu. */
.form-contact { max-width: 500px; }

/* Carte du formulaire : coins arrondis sur les 4 cotes. Elementor posait border-radius:0 0 8px 8px
   -> coins du HAUT carres (reliquat de l'ancien design a bandeau navy). Sur TOUTES les pages qui
   portent ce formulaire (contact, ressources/telechargements, expertises, articles) : carte blanche
   arrondie normale. (2026-07-16, defaut pre-existant signale par Anthony sur contact + ressources.) */
.form-contact__inner { border-radius: 8px !important; }

/* --- Page Contact (page-id-61095) : correctifs specifiques (2026-07-16, defauts pre-existants) ---
   1. DOUBLE ETOILE : l'etoile native du hero (.s-hero__icon) s'affiche EN PLUS de la grande
      etoile custom .nf-star-left (l'intentionnelle). On masque la native sur cette page. */
body.page-id-61095 .s-hero__icon { display: none !important; }
/* 3. L'etoile .nf-star-left (absolute, z-index:0, placee APRES le contenu dans le DOM) passait
   PAR-DESSUS le texte (contenu en static, peint avant les elements positionnes). On remonte le
   contenu du hero au-dessus de l'etoile -> texte lisible, etoile en decor derriere. */
body.page-id-61095 .s-hero__content { position: relative; z-index: 1; }

/* --- Loop grids (Expertises liées, offres, blog) : largeur pleine ------------
   Dans un conteneur flex en align-items:center, le widget loop-grid rétrécit
   à son max-content, et une grille minmax(0,1fr) y vaut 0 + les gaps (60px).
   Le masonry d'Elementor mesurait alors 60px et figeait des items en
   position:absolute width:60px (Expertises liées écrasées en bas des pages
   expertise). Pleine largeur = le masonry mesure juste dès le chargement. */
.elementor-widget-loop-grid { width: 100% !important; }

/* --- Filet de sécurité : médias jamais plus larges que leur conteneur -------- */
.elementor-widget-image img,
.elementor-widget-text-editor img,
.entry-content img,
figure img { max-width: 100%; height: auto; }

/* ===========================================================================
   Pages d'offres d'emploi /offres/<slug>/ (générées, hors Elementor)
   =========================================================================== */
.nf-offre .container { max-width: 1128px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.nf-offre__body { padding: 48px 24px 72px; }
.nf-offre__content { max-width: 760px; margin: 0 auto; color: #2b2a4e; font-size: 17px; line-height: 1.7; }
.nf-offre__content h2 { color: #141354; font-size: clamp(20px, 3vw, 26px); font-weight: 800; margin: 40px 0 14px; }
.nf-offre__content h2:first-child { margin-top: 0; }
.nf-offre__content p { margin: 0 0 16px; }
.nf-offre__content ul { margin: 0 0 20px; padding-left: 0; list-style: none; }
.nf-offre__content ul li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.nf-offre__content ul li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 8px; height: 8px; border-radius: 2px; background: #4C58FF; transform: rotate(45deg); }
.nf-offre__content strong { color: #141354; }
/* Badges (pilules) sous le titre : lieu, contrat, télétravail, niveau, expérience */
.s-hero__content__des .nf-offre-badge { display: inline-block; margin: 4px 8px 4px 0; padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); color: #fff; font-size: 14px; font-weight: 600; }
/* Bloc candidature : formulaire Elementor IDENTIQUE à /recrutement/ (verbatim).
   La CSS des champs vient du bundle Elementor partagé, chargé sur toutes les pages. */
.nf-offre__apply-block { max-width: 760px; margin: 44px auto 0; padding: 32px; background: #f6f7fb; border: 1px solid #e3e9f2; border-radius: 14px; }
.nf-offre__apply-block h2 { color: #141354; font-size: clamp(20px, 3vw, 26px); font-weight: 800; margin: 0 0 6px; }
.nf-offre__apply-intro { color: #55557a; margin: 0 0 22px; }
/* Rendu IDENTIQUE au formulaire de /recrutement/ : les règles Elementor du widget
   sont scopées `.elementor-363` (classe body de la page recrutement) et ne
   s'appliquent pas ici. On les réplique (les variables --e-global-* du kit sont,
   elles, globales et résolues partout). */
.nf-offre__apply-block .elementor-form-fields-wrapper { margin: 0 -6px -12px; }
.nf-offre__apply-block .elementor-field-group { padding: 0 6px; margin-bottom: 12px; }
.nf-offre__apply-block .elementor-field-group > label {
  color: var(--e-global-color-text, #141354); font-family: "DM Sans", sans-serif;
  font-size: 0.9rem; font-weight: 700; line-height: 1.75rem; letter-spacing: -0.02rem; padding-bottom: 8px;
}
.nf-offre__apply-block .elementor-field-group .elementor-field:not(.elementor-select-wrapper) {
  background-color: var(--e-global-color-47a6225, #fff); border: 1px solid #E3E9F2; border-radius: 0;
}
/* Champ CV (upload) : SANS fond (le natif « Aucun fichier choisi » ne s'affiche
   plus sur un bloc blanc), ni bordure — juste le bouton natif sur la carte. */
.nf-offre__apply-block .elementor-upload-field { background: transparent !important; border: 0 !important; padding-left: 0 !important; }
.nf-offre__apply-block .elementor-form .elementor-button[type="submit"] {
  background-color: var(--e-global-color-fca566e, #4C58FF); color: var(--e-global-color-47a6225, #fff);
  border: 2px solid var(--e-global-color-fca566e, #4C58FF);
}
.nf-offre__apply-block .elementor-form .elementor-button[type="submit"]:hover { color: #fff; }

/* Cookies : la CMP (bannière + modale) est désormais la CMP maison
   public/consent.js (remplace tarteaucitron, retiré). Plus aucun CSS ici :
   consent.js embarque son propre <style>. */

/* Panneau de succès des formulaires : REMPLACE le formulaire (façon Make IT Safe),
   centré (icône check + message). Injecté par digitemis-forms.js dans le conteneur
   du formulaire (carte CF7 .form-contact__inner ou wrapper Elementor). */
.dgt-form-success { display: flex; flex: 1 1 100%; width: 100%; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 210px; padding: 28px 20px; gap: 14px; }
.dgt-form-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #e6f7ef; color: #0a7a4e; }
.dgt-form-success__msg { margin: 0; font-size: 17px; font-weight: 700; color: #141354; line-height: 1.5; max-width: 440px; }
.dgt-form-success__link { font-size: 14px; font-weight: 600; color: #4C58FF; text-decoration: underline; }

/* Stabilité de largeur : on réserve toujours la gouttière de la scrollbar. Sinon,
   quand un contenu s'allonge (ex. message de succès d'un formulaire) et fait
   apparaître la barre de défilement, la largeur du viewport change de ~15px et
   les éléments en % se redimensionnent (ex. l'étoile .nf-star-left de la page
   contact « change de taille » à la soumission). */
html { scrollbar-gutter: stable; }

/* Offres recrutement en liste 1 colonne (data-nfcols="1") : cartes compactes
   (moins hautes, titre plus petit) au lieu des grosses cartes de grille. */
[data-nfcols="1"] .e-loop-item > a { min-height: 0 !important; padding: 0 26px !important; }
[data-nfcols="1"] .e-loop-item .e-con-inner { padding: 16px 0 !important; }
[data-nfcols="1"] .e-loop-item .elementor-heading-title { font-size: 16px !important; line-height: 1.35 !important; }

/* Footer : le fond visible est le DÉGRADÉ RADIAL du thème porté par .site-footer
   (+ la vague cyan décorative). On garde .footer-inner TRANSPARENT à toutes les
   largeurs : un fond plat (#141354) écrasait la vague et créait un joint de couleur
   en haut (les 64px de padding-top laissaient voir le dégradé, le reste était plat).
   Fond sombre de SECOURS sur .site-footer (teinte foncée du dégradé) pour garantir
   un texte lisible même si le dégradé venait à manquer — jamais de blanc sur blanc. */
.site-footer { background-color: #180636; }
.site-footer .footer-inner { background-color: transparent; }

/* Lien « Gérer mes cookies » du footer : grisé (blanc atténué) pour signaler
   que ce n'est pas une page légale comme les 3 liens voisins. */
#dgt-cookie-manage { color: rgba(255, 255, 255, 0.5) !important; }
#dgt-cookie-manage:hover { color: rgba(255, 255, 255, 0.82) !important; }

/* Fil d'Ariane : les séparateurs sont de petits ronds (::before). À 4px, l'anti-
   crénelage les faisait paraître d'épaisseur variable selon leur position sous-pixel
   (surtout quand le fil passe à la ligne sur mobile, le point se retrouvant en tête
   de 2e ligne). On les fige à 5px, sans rétrécissement flex, pour un rendu net et
   uniforme d'un point à l'autre. */
.breadcrumbs > span::before { flex: 0 0 auto !important; width: 5px !important; height: 5px !important; position: relative !important; top: -1px !important; }

/* ============================================================================
   Bannières lead magnet dans les articles (Checklist Shadow IT & IA + Guide COMEX)
   Card cliquable à la charte : navy #141354, CTA indigo #4C58FF, accent cyan.
   ========================================================================= */
.dgt-lm { margin: 30px 0; }
.dgt-lm-banner { display: flex; align-items: center; gap: 32px; background: #141354; border-radius: 12px; padding: 20px 24px; text-decoration: none !important; overflow: hidden; }
.dgt-lm-banner:hover { text-decoration: none !important; }
.dgt-lm-banner__body { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.dgt-lm-banner__eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #7FFDF1; font-weight: 700; margin: 0 0 7px; }
/* Titre : TOUJOURS 1 ligne, clippé dans sa colonne (jamais de débordement sur
   l'icône) — ellipsis en dernier recours si vraiment trop long. */
.dgt-lm-banner__title { font-size: 18px; line-height: 1.2; color: #fff; font-weight: 800; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgt-lm-banner__desc { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.72); margin: 0 0 12px; }
/* Desc : 2 lignes MAX (une phrase par ligne), chacune clippée à 1 ligne. */
.dgt-lm-banner__desc span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* CTA en TEXTE indigo (plus de bouton -> banner moins haute), flèche animée au survol. */
.dgt-lm-banner__cta { display: inline-flex; align-items: center; gap: 7px; background: none !important; color: #8A93FF !important; font-size: 14px; font-weight: 700; padding: 0 !important; }
.dgt-lm-banner__cta svg { transition: transform 0.18s ease; }
.dgt-lm-banner:hover .dgt-lm-banner__cta { color: #a3aaff !important; }
.dgt-lm-banner:hover .dgt-lm-banner__cta svg { transform: translateX(4px); }
.dgt-lm-banner__icon { flex: 0 0 auto; width: 150px; height: 150px; border-radius: 20px; background: rgba(127,253,241,0.12); display: flex; align-items: center; justify-content: center; }
.dgt-lm-banner__icon svg { width: 84px; height: 84px; stroke: #7FFDF1; }
/* Écrans intermédiaires : police réduite pour que titre (1 ligne) et desc (2 lignes)
   tiennent sans être coupés, l'icône restant présente. */
@media (max-width: 900px) {
  .dgt-lm-banner__title { font-size: 16px; }
  .dgt-lm-banner__desc { font-size: 12.5px; }
  .dgt-lm-banner__icon { width: 120px; height: 120px; }
  .dgt-lm-banner__icon svg { width: 64px; height: 64px; }
}
/* Mobile : icône masquée (place au texte), titre TOUJOURS 1 ligne (nowrap conservé). */
@media (max-width: 640px) {
  .dgt-lm-banner { padding: 20px; gap: 0; }
  .dgt-lm-banner__icon { display: none; }
  .dgt-lm-banner__title { font-size: 15px; }
  .dgt-lm-banner__desc { font-size: 12px; }
}

/* Chapô : l'extract déplacé du hero vers le début de l'article. */
.dgt-chapo { margin: 0 0 26px; }
.dgt-chapo p { font-size: 18px; line-height: 1.6; color: #141354; font-weight: 500; margin: 0; }

/* ============================================================================
   Frise « parcours » : cards en 2 colonnes qui serpentent, reliées par un TRAIT
   dégradé indigo->cyan (sans point). Partagé recrutement (4 étapes) + à propos
   (8 dates-clés). Remplace les anciennes flèches/chevrons.
   ========================================================================= */
.nf-frise { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 60px 78px !important; align-items: stretch !important; position: relative; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; }
.nf-frise > .e-con { position: relative; width: 100% !important; max-width: none !important; justify-self: stretch !important; background: #fff; border: 1px solid #E7E9F5; border-radius: 16px; padding: 26px 28px !important; box-shadow: 0 8px 28px rgba(20,19,84,.06); }
.nf-frise > .e-con > * { width: 100% !important; max-width: 100% !important; }
/* Serpentin : rangées paires inversées (grid-area explicite jusqu'à 8 cards). */
.nf-frise > .e-con:nth-child(1) { grid-area: 1 / 1 !important; }
.nf-frise > .e-con:nth-child(2) { grid-area: 1 / 2 !important; }
.nf-frise > .e-con:nth-child(3) { grid-area: 2 / 2 !important; }
.nf-frise > .e-con:nth-child(4) { grid-area: 2 / 1 !important; }
.nf-frise > .e-con:nth-child(5) { grid-area: 3 / 1 !important; }
.nf-frise > .e-con:nth-child(6) { grid-area: 3 / 2 !important; }
.nf-frise > .e-con:nth-child(7) { grid-area: 4 / 2 !important; }
.nf-frise > .e-con:nth-child(8) { grid-area: 4 / 1 !important; }
/* Trait de liaison (dégradé charte) dans les gouttières, orienté dans le sens du parcours. */
.nf-frise > .e-con::after { content: ""; position: absolute; display: none; border-radius: 2px; }
.nf-frise > .e-con:nth-child(4n+1):not(:last-child)::after { display: block; right: -78px; top: 50%; width: 78px; height: 4px; transform: translateY(-50%); background: linear-gradient(90deg, #4C58FF, #7FFDF1); }
.nf-frise > .e-con:nth-child(4n+3):not(:last-child)::after { display: block; left: -78px; top: 50%; width: 78px; height: 4px; transform: translateY(-50%); background: linear-gradient(270deg, #4C58FF, #7FFDF1); }
.nf-frise > .e-con:nth-child(4n+2):not(:last-child)::after { display: block; left: 50%; bottom: -60px; width: 4px; height: 60px; transform: translateX(-50%); background: linear-gradient(180deg, #4C58FF, #7FFDF1); }
.nf-frise > .e-con:nth-child(4n):not(:last-child)::after { display: block; left: 50%; bottom: -60px; width: 4px; height: 60px; transform: translateX(-50%); background: linear-gradient(180deg, #4C58FF, #7FFDF1); }
/* Variante recrutement : cards « étapes » dont le contenu (titre + texte) était en
   ligne → on empile en colonne pour un rendu lisible dans une card 2-colonnes. */
.nf-frise--stack > .e-con { flex-direction: column !important; align-items: flex-start !important; }

/* Mobile : 1 colonne, trait vertical descendant entre chaque card. */
@media (max-width: 900px) {
  .nf-frise { grid-template-columns: 1fr !important; gap: 44px !important; }
  .nf-frise > .e-con:nth-child(n) { grid-area: auto !important; }
  .nf-frise > .e-con::after { display: none !important; }
  .nf-frise > .e-con:not(:last-child)::after { display: block !important; left: 50% !important; right: auto !important; top: auto !important; bottom: -44px !important; width: 4px !important; height: 44px !important; transform: translateX(-50%) !important; background: linear-gradient(180deg, #4C58FF, #7FFDF1) !important; }
}


/* ===== Pagination du blog (remplace le load-more Elementor mort) ===== */
.dgt-pagegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; align-items: start; margin-top: 8px; }
@media (max-width: 1024px) { .dgt-pagegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dgt-pagegrid { grid-template-columns: 1fr; } }
.dgt-pagegrid .bs-card { display: block; text-decoration: none; margin: 0; }
.dgt-pagegrid .bs-card__media { display: block; aspect-ratio: 16/10; border-radius: 14px; background: #141354 center/cover no-repeat; margin-bottom: 16px; transition: opacity .18s; }
.dgt-pagegrid .bs-card__media--ph { background: radial-gradient(at bottom right, #312FBA 0%, #180636 70%); }
.dgt-pagegrid .bs-card:hover .bs-card__media { opacity: .9; }
.dgt-pagegrid .bs-card__cat { display: block; color: #4C58FF; font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.dgt-pagegrid .bs-card__title { display: block; color: #141354; font-weight: 800; font-size: 18px; line-height: 1.32; transition: color .18s; }
.dgt-pagegrid .bs-card:hover .bs-card__title { color: #4C58FF; }
.dgt-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 48px 0 8px; }
.dgt-pager__b { min-width: 44px; height: 44px; padding: 0 13px; border: 1px solid #E3E3F0; background: #fff; color: #141354; font-weight: 800; font-size: 15px; font-family: inherit; border-radius: 11px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.dgt-pager__b:hover:not([disabled]):not([aria-current]) { border-color: #4C58FF; color: #4C58FF; background: #fff; text-decoration: none; }
.dgt-pager__b[aria-current] { background: #4C58FF; border-color: #4C58FF; color: #fff; cursor: default; }
.dgt-pager__b[disabled] { opacity: .4; cursor: default; }
.dgt-pager__nav { font-size: 18px; }
.dgt-pager__gap { color: #9a9ab0; font-weight: 800; padding: 0 2px; }
@media (max-width: 600px) { .dgt-pager__b { min-width: 40px; height: 40px; font-size: 14px; padding: 0 10px; } .dgt-pager { gap: 6px; } }

/* ===== Article : espace avant les H2 de contenu reduit (2em -> 1.25em) ===== */
.elementor-widget-theme-post-content h2.wp-block-heading { margin-top: 1.25em !important; }


/* ===== Article : sommaire (TOC) aligné en haut sur le chapô =====
   Annule le margin-top:2.5em!important hérité (le reset margin:0 du thème n'a pas
   d'!important et perdait). Desktop seulement : en mobile le sommaire reste au-dessus. */
@media (min-width: 992px) {
  .elementor-element-b60ea90 > .elementor-widget-container > #ez-toc-container { margin-top: 0 !important; }
}

/* Cross-link de désambiguïsation (audit applicatif <-> test de site) : encart
   léger en tête d'article, juste après le chapô. Liseré indigo, fond gris,
   texte navy. Discret, pas une bannière. */
.dgt-xref { display: flex; gap: 10px; align-items: baseline; margin: 0 0 28px; padding: 12px 18px; background: #f6f7fb; border-left: 3px solid #4C58FF; border-radius: 0 8px 8px 0; }
.dgt-xref__arrow { color: #4C58FF; font-weight: 700; flex: 0 0 auto; }
.dgt-xref p { margin: 0; font-size: 15px; line-height: 1.5; color: #141354; }
.dgt-xref a { color: #4C58FF; font-weight: 600; text-decoration: none; }
.dgt-xref a:hover { text-decoration: underline; }

/* Sommaire : le trait vertical (border-left) ne doit pas dépasser le texte en
   haut/bas. Chaque lien a padding:9px 0 → le trait débordait de ~9px. On retire
   le padding-haut du 1er item et le padding-bas du dernier pour que le trait
   épouse exactement le bloc de texte. */
#ez-toc-container .ez-toc-list > li:first-child > a { padding-top: 0 !important; }
#ez-toc-container .ez-toc-list > li:last-child > a { padding-bottom: 0 !important; }


/* ===== Bloc "Nos articles sur le sujet" (maillage descendant pilier/expertise -> articles) =====
   Liste texte compacte (juste les titres), titre de section en navy.
   Largeur = REPLIQUE EXACTE de la boite FAQ (Elementor e-con-boxed) : le padding lateral
   (228/80/24) est sur le CONTENEUR pleine largeur, et la content-width (1440/100%) est
   une boite centree A L'INTERIEUR de la zone deja rognee par ce padding. */
.dgt-related { padding: 8px 228px 72px; box-sizing: border-box; }
.dgt-related__inner { max-width: 1440px; margin: 0 auto; }
/* meme taille/graisse que le titre FAQ (typo secondaire du thème, var globale sur body.elementor-kit-6) */
.dgt-related__title { color: #141354 !important; font-size: var(--e-global-typography-secondary-font-size, 2rem); font-weight: var(--e-global-typography-secondary-font-weight, 800); margin: 0 0 24px; }
.dgt-related__list { list-style: none; margin: 0; padding: 0; }
.dgt-related__li { border-top: 1px solid #ECECF4; }
.dgt-related__li:last-child { border-bottom: 1px solid #ECECF4; }
.dgt-related__link { display: block; padding: 15px 2px; color: #141354; font-weight: 600; font-size: 17px; line-height: 1.4; text-decoration: none; transition: color .15s; }
.dgt-related__link:hover { color: #4C58FF; }
@media (max-width: 1024px) { .dgt-related { padding: 8px 80px 72px; } .dgt-related__inner { max-width: 100%; } }
@media (max-width: 767px) { .dgt-related { padding: 8px 24px 72px; } .dgt-related__link { font-size: 16px; } }


/* ===== Expertises liees : memes CARTES mais UNE seule colonne (lignes pleine largeur). =====
   On NEUTRALISE le script inline #loop-masonry : il met les .e-loop-item en position:absolute
   avec une width = clientWidth du conteneur, et sur un 2e passage (items deja absolus, plus de
   contenu en flux) ce clientWidth peut s'effondrer -> cartes ultra-fines/tres hautes (race
   condition, aleatoire selon le navigateur). Nos regles !important battent les styles inline
   NON-important poses par le JS -> les cartes restent en FLUX NORMAL, pleine largeur, jamais
   effondrees. data-nfcols="1" reste (le JS calcule 1 colonne) mais nos overrides sont la ceinture+bretelles. */
.dgt-exp-onecol .elementor-loop-container { display: block !important; width: auto !important; height: auto !important; max-width: none !important; }
.dgt-exp-onecol .e-loop-item { position: static !important; width: auto !important; max-width: none !important; left: auto !important; top: auto !important; margin: 0 0 24px !important; box-sizing: border-box !important; }
.dgt-exp-onecol .e-loop-item:last-child { margin-bottom: 0 !important; }
/* Desktop : la section "Expertises liees" est padee a 120px (vs 228 pour la FAQ). On aligne son
   PADDING sur celui de la FAQ (228px) plutot qu'une marge fixe sur le loop : les deux .e-con-inner
   (max-width 1440) se comportent alors a l'identique a TOUTES les largeurs desktop. (L'ancienne
   marge fixe de 108px sur-compensait au-dela du cap 1440 -> cards trop etroites en grand ecran ;
   corrige 2026-07-11.) */
@media (min-width: 1025px) {
  .e-con-boxed.e-parent:has(.dgt-exp-onecol) { padding-left: 228px !important; padding-right: 228px !important; }
}

/* --- Design INTERNE de la carte restaure explicitement ---
   Sur les pages expertises, le CSS carte injecte pose padding/taille via des variables Elementor
   (--padding-top, var(--e-global-typography...)) qui NE s'appliquent pas (noms de vars differents
   de l'appli reelle / cascade) -> repli a 16px partout + padding 26/16 = hierarchie cassee
   (surtitre = titre). On refixe les valeurs de la carte native (page categorie) en dur. */
.dgt-exp-onecol a.elementor-element-af76b9f { padding: 0 40px !important; }
.dgt-exp-onecol .e-loop-item .e-con-inner { padding: 40px 0 !important; padding-block: 40px !important; }
/* surtitre 12px / titre 24px / etiquettes 12px (le reste - navy, gras, majuscules - est deja bon) */
.dgt-exp-onecol .elementor-element-88dacec .elementor-heading-title,
.dgt-exp-onecol .elementor-element-88dacec .elementor-heading-title * { font-size: 12px !important; }
.dgt-exp-onecol .elementor-element-b89073c .elementor-heading-title { font-size: 24px !important; line-height: 1.3 !important; }
.dgt-exp-onecol .elementor-element-97cec3a,
.dgt-exp-onecol .elementor-element-97cec3a * { font-size: 12px !important; }

/* Desktop : etiquettes (ETI / GRANDS COMPTES / PME) remontees en haut a DROITE, sur la ligne du
   surtitre -> gagne de la place, reduit la hauteur de carte. La place ne manque pas en pleine largeur. */
@media (min-width: 1025px) {
  .dgt-exp-onecol a.elementor-element-af76b9f { position: relative; }
  .dgt-exp-onecol .elementor-element-97cec3a { position: absolute; top: 40px; right: 40px; width: auto !important; margin: 0 !important; text-align: right; }
}


/* ===== Mentions RGPD des formulaires de contact (Contact Form 7) =====
   Le bloc .form-infos ("*Informations obligatoires ... cliquez ici") reste SOUS le bouton, dans le
   formulaire (revert de move-form-infos.cjs). Police reduite (13px -> 11px) + espace resserre entre
   "*Informations obligatoires" et le paragraphe (marge des <p> reduite) pour gagner de la hauteur. */
.form-infos { font-size: 11px !important; }
.form-infos p { margin: 0 0 3px !important; }


/* ===== FAQ : texte de reponse en GRIS (comme la description des cartes expertises), pas en indigo.
   On cible le panneau de contenu (.e-con) de chaque item ; la question (<summary>) n'est pas dedans
   donc reste navy. Les liens (a) gardent leur couleur. ===== */
.e-n-accordion-item > .e-con, .e-n-accordion-item > .e-con *:not(a) { color: #717491 !important; }

/* ===== FAQ : double trait en bas du dernier item (2026-07-16). Le titre de chaque item porte une
   bordure-bas separateur ; sur le DERNIER item FERME, elle tombe au ras de la bordure-bas du conteneur
   (carte) -> deux traits paralleles. On retire le separateur du dernier item quand il est ferme
   (ouvert, la bordure sert de separation titre/contenu, on la garde). ===== */
.elementor-widget-n-accordion .e-n-accordion-item:last-child:not([open]) > .e-n-accordion-item-title {
  border-bottom-width: 0 !important;
  --n-accordions-title-border-bottom-width: 0 !important;
}


/* =====================================================================================
   LOT A - Nettoyage "enchainement de cartes blanches" sur pages expertises (2026-07-10)
   ===================================================================================== */

/* red-team (60320) : deux cartes blanches se suivaient ("Les objectifs" + "Les 4 piliers").
   On garde la 1re (objectifs) en carte, on sort la 2e ("Les 4 piliers", conteneur d4a1ae1 +
   son enfant ea28f7d + widget-containers internes) en TEXTE NORMAL comme l'intro :
   plus d'ombre, plus de radius, plus de bordure, plus de padding de carte. */
.elementor-60320 .elementor-element-d4a1ae1,
.elementor-60320 .elementor-element-d4a1ae1 > .elementor-widget-container,
.elementor-60320 .elementor-element-ea28f7d,
.elementor-60320 .elementor-element-ea28f7d > .elementor-widget-container {
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  --padding-top: 0 !important; --padding-bottom: 0 !important;
  --padding-left: 0 !important; --padding-right: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
/* Air avant le titre "Digitemis propose la methode" : PAS de marge fixe sur le bloc piliers
   (elle s'additionnait au padding-top RESPONSIVE de la section methode -> 178px en grand ecran).
   On FIGE plutot le padding-top de la section methode (a6a44d1, sinon 0->80px selon largeur) pour
   un gap constant = 32px (gap flex e-con-inner) + 66px = 98px texte-a-texte, comme les autres blocs. */
.elementor-60320 .elementor-element-a6a44d1 {
  --padding-top: 66px !important;
  padding-top: 66px !important;
}

/* red-team - carte "Objectifs" conservee mais DEGONFLEE (densite aeree-compacte) :
   ombre-maison discrete (comme la frise, 0 8px 28px) au lieu de 0 32px 80px + padding reduit. */
.elementor-60320 .elementor-element-56acc7d {
  box-shadow: 0 8px 28px rgba(20,19,84,.08) !important;
  --padding-top: 26px !important; --padding-bottom: 26px !important;
  --padding-left: 30px !important; --padding-right: 30px !important;
}


/* =====================================================================================
   HARMONISATION DU RYTHME VERTICAL DES SECTIONS - pages expertises (2026-07-10, validee Anthony)
   Les sections Elementor ont 80px de padding vertical qui (1) s'empilent entre sections voisines
   (80+80 = 160px de trou) et (2) gonflent selon la largeur (piege responsive). On FIGE le padding
   vertical des sections top-level (.e-parent) a 48px, identique a toutes les largeurs -> gaps
   inter-sections ~96px, coherent avec le rythme 98px texte-a-texte. On NE touche PAS aux .e-child
   (qui portent les cartes) ni au padding HORIZONTAL (max-width/centrage du contenu). !important sur
   la variable => bat aussi les overrides responsive d'Elementor. */
[data-elementor-post-type="expertise"] .e-con.e-parent {
  --padding-top: 20px !important;
  --padding-bottom: 20px !important;
  /* padding DIRECT (pas juste la variable) : sinon Elementor met 0 en responsive/mobile
     -> sections claires "coincees" entre 2 blocs fonces. 20px partout (gaps ~40px entre sections) :
     48 puis 32 paraissaient encore trop aeres (cible Anthony ~40px entre blocs). Horizontal gere
     par Elementor. */
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
/* CORRECTIF (2026-07-10) : la regle ci-dessus visait les sections, mais les CARTES "Expertises
   liees" sont aussi des a.e-con.e-parent (dans le loop) -> elles recevaient +48px de padding
   vertical = cartes gonflees. On annule ce padding pour tout .e-parent DANS un loop-container
   (leur air vient de leur .e-con-inner, pas de la section). */
[data-elementor-post-type="expertise"] .elementor-loop-container .e-con.e-parent {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  --padding-top: 0 !important;
  --padding-bottom: 0 !important;
}

/* Titre -> card/conteneur qui suit : la card a souvent un margin-top (40px) qui s'ajoute au row-gap
   (32px) = trop d'espace AVANT la card (ex. "Ce que nous auditons" -> cartes, mainframe). On annule
   la MARGE (pas le padding DANS la card) du .e-con.e-child directement apres un titre -> gap = juste
   le row-gap. Corrige partout. */
[data-elementor-post-type="expertise"] .elementor-widget-heading + .e-con.e-child {
  margin-top: 0 !important;
}

/* Cartes LIEES empilees (ex. "Ce que nous auditons" -> 3 cartes bordurees sur mainframe /
   audit-a-blanc / iso-27001, section e7a6915) : le gap de 32px + le padding interne des cartes
   les faisait paraitre deconnectees. On resserre a 16px pour qu'elles se lisent comme un groupe.
   Section partagee par 3 pages d'audit -> corrige le pattern partout. */
[data-elementor-post-type="expertise"] .elementor-element-e7a6915 {
  --gap: 16px 16px !important;
  --row-gap: 16px !important;
  --column-gap: 16px !important;
}
/* "Ce que nous auditons" (mainframe / audit-a-blanc / iso-27001) : cartes RESSERREES entre elles
   (marge 8 + row-gap 16 = 24px) ; titre -> 1re carte a peine plus (marge 16 + row-gap 16 = 32px).
   Demande Anthony 2026-07-13. */
[data-elementor-post-type="expertise"] .elementor-widget-heading + .e-con.e-child.elementor-element-a4c3508 {
  margin-top: 16px !important;
}
[data-elementor-post-type="expertise"] .elementor-element-f120ff8,
[data-elementor-post-type="expertise"] .elementor-element-ef5f515 {
  --margin-top: 8px !important; margin-top: 8px !important;
}

/* Hierarchie des titres (pages expertises) : un titre doit rester lie a son texte mais RESPIRER.
   Le gap titre->texte venait du row-gap flex (32px) = identique au gap au-dessus -> titre qui
   "flotte". On tire le texte adjacent de 8px vers le haut -> gap ~24px (lie mais aere), gap
   au-dessus inchange (~32px). (-16px etait trop colle.) */
[data-elementor-post-type="expertise"] .elementor-widget-heading + .elementor-widget-text-editor {
  margin-top: -8px !important;
}

/* Interligne des titres (pages expertises) : etait a 1.0 (lignes collees sur les titres 2 lignes).
   -> 1.3 pour que les titres multi-lignes respirent (hero + titres de section). */
[data-elementor-post-type="expertise"] .elementor-heading-title {
  line-height: 1.3 !important;
}

/* Espace liste -> texte (pages expertises) : un <p> juste apres un <ul>/<ol> dans un
   text-editor etait COLLE a la derniere puce (marges a 0, ex. "Sanctions..." apres les
   echeances AI Act). On redonne une ligne d'air. Corrige partout. */
[data-elementor-post-type="expertise"] .elementor-widget-text-editor ul + p,
[data-elementor-post-type="expertise"] .elementor-widget-text-editor ol + p {
  margin-top: 16px !important;
}

/* recrutement : la frise "Parcours d'integration" (.nf-frise--stack) doit avoir la MEME largeur
   que la frise dates-cles d'entreprise-digitemis (1280px). Elle etait bridee a 1169px par les
   128px de padding lateral de SA section. On reduit ce padding (desktop) a 72px pour qu'elle
   atteigne 1280px et s'aligne. Cible = la section boxed qui contient la frise stack. */
@media (min-width: 1025px) {
  .e-con-boxed:has(.nf-frise--stack) {
    padding-left: 72px !important;
    padding-right: 72px !important;
  }
}

/* Pages piliers/categories : le fond bleu "Expertises liees" (section boxed contenant le loop-grid)
   est padee a 20px lateralement -> 4px trop large de chaque cote que le footer (marge 24px). On
   aligne a 24px pour que le fond bleu tombe pile sur celui du footer. Exclut les pages expertises
   (leur "expertises liees" = .dgt-exp-onecol, geree separement). */
.e-con-boxed.e-parent:has(.elementor-832):not(:has(.dgt-exp-onecol)) {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/* MOBILE : fond bleu "Expertises liees" COLLE aux bords (comme footer et formulaire) -> gagne de
   la place horizontale pour les cards. On resserre aussi le padding interne du fond bleu (16px). */
@media (max-width: 767px) {
  .e-con-boxed.e-parent:has(.elementor-832):not(:has(.dgt-exp-onecol)) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .e-con-boxed.e-parent:has(.elementor-832) > .e-con-inner > .e-con-full {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ===== FIX iOS Safari : blog "masonry" qui se chevauche au scroll (2026-07-10) =====
   Le script #loop-masonry positionne les .e-loop-item en position:absolute et fige la hauteur du
   conteneur. Sur iOS Safari, le lazy-load des images change les hauteurs AU SCROLL mais les
   positions absolues (calculees avant) ne suivent pas -> cartes qui se chevauchent (le blog deborde
   sur le livre blanc, bas de la home). Chromium calcule juste -> invisible en preview. Sur mobile,
   une colonne unique est de toute facon le bon rendu : on neutralise le masonry en CSS (les
   !important battent les styles inline non-important poses par le JS, meme s'il se re-execute). */
@media (max-width: 767px) {
  .elementor-loop-container.elementor-grid {
    display: block !important;
    height: auto !important;
  }
  .elementor-loop-container.elementor-grid > .e-loop-item {
    position: static !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    margin: 0 0 24px !important;
  }
}

/* MOBILE #1 : plus d'air entre les blocs de contenu des sections expertises. Le gap flex interne
   (.e-con-inner) etait a 32px -> les blocs "plats" type "Digitemis propose la methode" collaient
   aux cards avant/apres. On monte a 44px sur mobile. */
@media (max-width: 767px) {
  [data-elementor-post-type="expertise"] .e-con.e-parent > .e-con-inner {
    row-gap: 44px !important;
  }
}

/* MOBILE #3 : l'ombre de la carte FAQ (accordion) creait une transition trop dure avec le blanc
   plat de "Nos articles sur le sujet". On adoucit fortement l'ombre sur mobile. */
@media (max-width: 767px) {
  [data-elementor-post-type="expertise"] .elementor-widget-n-accordion > .elementor-widget-container {
    box-shadow: 0 2px 12px rgba(20, 19, 84, 0.04) !important;
  }
}

/* Champ fichier (CV, formulaires) : le texte natif "Aucun fichier selectionne" est illisible
   (contraste sur le fond du formulaire) et inutile -> on masque le texte, on garde le bouton
   "Choisir un fichier" lisible. Couvre le pseudo standard ET le pseudo webkit (iOS Safari). */
input[type="file"] { color: transparent !important; }
input[type="file"]::file-selector-button { color: #141354 !important; }
input[type="file"]::-webkit-file-upload-button { color: #141354 !important; }

/* MOBILE : page "A propos" (entreprise, page-id-61042). Entre le texte hero et la photo d'equipe,
   un trou de ~132px (texte padding-bottom 80px + gap 20px + photo padding-top 32px). On resserre
   sur mobile (la photo est conservee). */
@media (max-width: 767px) {
  body.page-id-61042 .s-hero__content .left { padding-bottom: 16px !important; }
  body.page-id-61042 .s-hero__content .right { padding-top: 8px !important; }
}

/* =========================================================================
   MARGE INTERNE DES COLONNES DE CONTENU = 120px (2026-07-13, demande Anthony)
   Les wrappers "colonne de contenu" du template (`.e-con-full.e-con.e-child`) ont 256px de padding
   lateral interne (colonne centree etroite). On le reduit a 120px pour que le contenu respire, SANS
   toucher la largeur des sections (elles gardent leur modele natif : home / expertise / article).
   Liste = grep `padding-left:256px` sur tout src/snapshots/_pages/. */
@media (min-width: 1025px) {
  :is(
    .elementor-element-4261c04e, .elementor-element-a01b105, .elementor-element-3c6c60ed,
    .elementor-element-56bd6b0, .elementor-element-74b34ea, .elementor-element-31377a7,
    .elementor-element-a350b7d, .elementor-element-7b7531e, .elementor-element-fb4288b,
    .elementor-element-b6c89d0, .elementor-element-9bb7a68, .elementor-element-385d3ad8,
    .elementor-element-b055dba, .elementor-element-30e2328, .elementor-element-e7a6915,
    .elementor-element-97cc9f0, .elementor-element-c196ada, .elementor-element-3f8b2c7,
    .elementor-element-c87bfe3, .elementor-element-5939b06, .elementor-element-6c1fd77,
    .elementor-element-f8ac600, .elementor-element-b216416, .elementor-element-bb117d9,
    .elementor-element-1586697, .elementor-element-e189f9e, .elementor-element-ffef09d,
    .elementor-element-e878d65, .elementor-element-a205d49, .elementor-element-38385f7,
    .elementor-element-e61129b, .elementor-element-5bbca57, .elementor-element-434c3f1,
    .elementor-element-5eaa65b, .elementor-element-f1348dd, .elementor-element-657c771,
    .elementor-element-c5408e1, .elementor-element-7d4a314, .elementor-element-45b11f2,
    .elementor-element-9d4b67e, .elementor-element-25247d9, .elementor-element-7a8cbc5,
    .elementor-element-e3376e2, .elementor-element-cd99654, .elementor-element-b5aa3af,
    .elementor-element-a6a44d1, .elementor-element-f2d5ae4, .elementor-element-5b20ae7,
    .elementor-element-e8a2822, .elementor-element-287fcc7, .elementor-element-c1693cd,
    .elementor-element-0308cc4, .elementor-element-68b3091, .elementor-element-8c85c58,
    .elementor-element-cd53b22, .elementor-element-74953c1, .elementor-element-62ca46c,
    .elementor-element-a0d0e15
  ) {
    --padding-left: 120px !important; --padding-right: 120px !important;
    padding-left: 120px !important; padding-right: 120px !important;
  }
}


/* =========================================================================
   PAGES EXPERTISES - retouches 2026-07-16 (demandes Anthony)
   1. Retrait des separateurs (bordures 1px haut/bas) de la section "Expertises liees".
   2. Rythme vertical CONSTANT : le trio du bas (Expertises liees / FAQ / formulaire) est a 20px
      comme les sections de contenu -> gaps ~40px uniformes sur toute la page (revu 2026-07-16).
   3. Padding lateral du corps (colonnes de contenu) a 160px (vs 120 global).
   Cibles par STRUCTURE (:has) et non par ID -> robuste sur les 44 pages, y compris les
   2 pages aux IDs atypiques (hds, audit-de-surete-physique).
   ========================================================================= */

/* 1. Section "Expertises liees" (celle qui contient le loop .dgt-exp-onecol) :
   on retire les bordures haut/bas (les "separateurs" inline #E3E9F2 de chaque snapshot).
   Padding vertical ALIGNE sur les sections de contenu (20px) -> RYTHME CONSTANT ~40px sur toute
   la page (revu 2026-07-16 : Anthony veut un rythme parfaitement constant, on annule l'aeration a 44px). */
[data-elementor-post-type="expertise"] .e-con.e-parent:has(.dgt-exp-onecol) {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  --border-top-width: 0 !important;
  --border-bottom-width: 0 !important;
  --padding-top: 20px !important;
  --padding-bottom: 20px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* 2. Section FAQ (accordion) : meme rythme constant (20px). */
[data-elementor-post-type="expertise"] .e-con.e-parent:has(.elementor-widget-n-accordion) {
  --padding-top: 20px !important;
  --padding-bottom: 20px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* 3. Section formulaire de contact (.form-contact) : meme rythme constant (20px, haut ET bas). */
[data-elementor-post-type="expertise"] .e-con.e-parent:has(.form-contact) {
  --padding-top: 20px !important;
  --padding-bottom: 20px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* 3. Corps des pages : padding lateral des colonnes de contenu 120 -> 160 (expertises uniquement).
   Meme liste d'IDs que la regle globale ci-dessus, re-scopee sur les expertises (specificite
   superieure + plus bas dans le fichier => gagne ; les autres pages restent a 120). */
@media (min-width: 1025px) {
  [data-elementor-post-type="expertise"] :is(
    .elementor-element-4261c04e, .elementor-element-a01b105, .elementor-element-3c6c60ed,
    .elementor-element-56bd6b0, .elementor-element-74b34ea, .elementor-element-31377a7,
    .elementor-element-a350b7d, .elementor-element-7b7531e, .elementor-element-fb4288b,
    .elementor-element-b6c89d0, .elementor-element-9bb7a68, .elementor-element-385d3ad8,
    .elementor-element-b055dba, .elementor-element-30e2328, .elementor-element-e7a6915,
    .elementor-element-97cc9f0, .elementor-element-c196ada, .elementor-element-3f8b2c7,
    .elementor-element-c87bfe3, .elementor-element-5939b06, .elementor-element-6c1fd77,
    .elementor-element-f8ac600, .elementor-element-b216416, .elementor-element-bb117d9,
    .elementor-element-1586697, .elementor-element-e189f9e, .elementor-element-ffef09d,
    .elementor-element-e878d65, .elementor-element-a205d49, .elementor-element-38385f7,
    .elementor-element-e61129b, .elementor-element-5bbca57, .elementor-element-434c3f1,
    .elementor-element-5eaa65b, .elementor-element-f1348dd, .elementor-element-657c771,
    .elementor-element-c5408e1, .elementor-element-7d4a314, .elementor-element-45b11f2,
    .elementor-element-9d4b67e, .elementor-element-25247d9, .elementor-element-7a8cbc5,
    .elementor-element-e3376e2, .elementor-element-cd99654, .elementor-element-b5aa3af,
    .elementor-element-a6a44d1, .elementor-element-f2d5ae4, .elementor-element-5b20ae7,
    .elementor-element-e8a2822, .elementor-element-287fcc7, .elementor-element-c1693cd,
    .elementor-element-0308cc4, .elementor-element-68b3091, .elementor-element-8c85c58,
    .elementor-element-cd53b22, .elementor-element-74953c1, .elementor-element-62ca46c,
    .elementor-element-a0d0e15
  ) {
    --padding-left: 160px !important; --padding-right: 160px !important;
    padding-left: 160px !important; padding-right: 160px !important;
  }
}


/* ===== Pages CAS CLIENT (/cas-client/*) — charte Digitemis (retours Anthony) :
   contenu ALIGNE A GAUCHE et contenu (pas centre, pas de bandeaux gris), titres navy comme
   ailleurs sur le site, RESULTATS dans un CADRE BLEU navy a 3 vignettes, verbatim centre,
   chips, puis bloc "expertises mobilisees" entre le formulaire et le footer. ===== */
.dgt-cas { color: #3a3d5c; }
.dgt-cas-band { padding: 52px 24px; }
.dgt-cas-inner { max-width: 900px; margin: 0 auto; }
.dgt-cas-inner--narrow { max-width: 760px; }
/* RÈGLE ANTHONY : 2 largeurs SEULEMENT. Width A = texte ; Width B = bloc navy + formulaire.
   Mesurees au DOM (cartographie) : A=849/1009/1120 @1440/1600/1920 ; B=1169/1329/1440. */
@media (min-width: 1025px) {
  .dgt-cas-inner { max-width: min(1120px, calc(100vw - 576px)); }              /* Width A (texte) */
  .dgt-cas-inner:has(.dgt-cas-resultbox) { max-width: min(1440px, calc(100vw - 256px)); } /* Width B (navy = form) */
}
/* Eyebrow (a gauche, indigo) */
.dgt-cas-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-weight: 800; font-size: 13px; color: #4C58FF; margin: 0 0 10px; }
/* Titre de section : a gauche, navy, comme le reste du site */
.dgt-cas .dgt-cas-h2 { color: #141354 !important; font-size: 1.9rem !important; line-height: 1.3; font-weight: 800; margin: 0 0 1.4rem; text-align: left; }
/* Prose */
/* Corps aligne sur les pages expertises : couleur #717491, interligne 1.6 (meme rendu). */
.dgt-cas-prose p { color: #717491; line-height: 1.6; margin: 0 0 1.1rem; }
.dgt-cas-prose ul { margin: .4rem 0 0; padding: 0; list-style: none; }
.dgt-cas-prose li { position: relative; padding-left: 1.7rem; margin-bottom: 1rem; line-height: 1.6; color: #717491; }
.dgt-cas-prose li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #4C58FF; }
.dgt-cas-prose li strong { color: #141354; }
/* Liens comme sur les autres pages : indigo, GRAS, SANS soulignage. */
.dgt-cas-prose a { color: #4C58FF; text-decoration: none; font-weight: 700; }
.dgt-cas-prose a:hover { text-decoration: underline; }
/* Resultats = CADRE BLEU a visuels, repris du composant ibmi-as-400 ("Scenarios testes") :
   cadre navy degrade, titre centre a l'interieur, 3 cartes translucides image + titre + texte. */
.dgt-cas-resultbox { background: linear-gradient(135deg, #35339e 0%, #1c1a66 46%, #130f3d 100%); border-radius: 24px; padding: 48px 44px 52px; }
.dgt-cas-resultbox__title { text-align: center; color: #fff !important; font-size: 1.7rem !important; font-weight: 800; margin: 0 0 2.4rem; }
.dgt-cas-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dgt-cas-vignette { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 16px 16px 22px; }
.dgt-cas-vignette__img { width: 100%; height: auto; aspect-ratio: 768 / 432; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 18px; }
.dgt-cas-vignette__title { color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1.3; margin: 0 0 .6rem; padding: 0 4px; }
.dgt-cas-vignette p:not(.dgt-cas-vignette__title) { color: #c7c9e6; line-height: 1.6; font-size: .92rem; margin: 0; padding: 0 4px; }
@media (max-width: 800px) { .dgt-cas-results { grid-template-columns: 1fr; } .dgt-cas-resultbox { padding: 32px 24px 36px; } }
/* Verbatim centre a gros guillemet (design valide) */
.dgt-cas-quote { text-align: center; margin: 0; }
.dgt-cas-quote::before { content: "\201C"; display: block; color: #4C58FF; font-size: 4.5rem; line-height: .8; font-family: Georgia, serif; margin-bottom: .2rem; }
.dgt-cas-quote blockquote { margin: 0; border: 0; padding: 0; color: #141354; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.5; font-weight: 500; }
.dgt-cas-quote figcaption { margin-top: 1.4rem; color: #141354; font-weight: 800; font-size: 1.05rem; }
.dgt-cas-quote__role { display: block; color: #4C58FF; font-weight: 600; font-size: .95rem; margin-top: .15rem; }
/* Chips (a gauche) */
.dgt-cas-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6rem; }
.dgt-cas-chip { background: #eef1ff; color: #141354; border: 1px solid #e3e9f2; border-radius: 999px; padding: 7px 16px; font-size: .85rem; font-weight: 600; }
/* Entre le formulaire et le footer : la vraie section FAQ du site (composant natif reutilise). */
/* Cas client : meme espace FAQ -> footer que la homepage (~80px). Scope par .dgt-cas
   (present uniquement sur les pages cas client). La FAQ = derniere section (60e16005). */
body:has(.dgt-cas) [data-elementor-post-type="expertise"] .elementor-element-60e16005.e-con.e-parent { padding-bottom: 60px !important; }

/* Cas client : LOGO DU CLIENT a droite du hero (dans le slot natif .right, figure vide).
   On masque l'etoile deco (.s-hero__icon, absolue bas-droite) qui sinon chevauche le logo. */
body:has(.dgt-cas) .s-hero__icon { display: none !important; }
body:has(.dgt-cas) .s-hero__content .right { display: flex; justify-content: flex-end; align-items: center; flex: 1 1 auto; }
.s-hero__client { margin: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e3e9f2; border-radius: 16px; padding: 26px 40px; box-shadow: 0 8px 28px rgba(20,19,84,0.08); }
.s-hero__client img { display: block; width: 240px; max-width: 100%; height: auto; }
@media (max-width: 991px) {
  body:has(.dgt-cas) .s-hero__content .right { justify-content: center; padding-top: 4px; }
  .s-hero__client { padding: 20px 30px; }
  .s-hero__client img { width: 190px; }
}


/* =============================================================================
   PAGES EXPERTISES (template) — retours Anthony 2026-07 :
   (1) largeur du contenu "Expertises liees" + "Nos articles sur le sujet" = celle du
       contenu corps (colonne des H2), plus etroite que le formulaire ;
   (2) plus d'air entre ces 2 sections et le formulaire / la FAQ / le footer.
   Le contenu corps mesure ~ (largeur zone de contenu - 576px), plafonne. On replique. */
/* Desktop seulement (>=1025) ; sous 1024 le site repasse en pleine largeur (cf. @media plus bas). */
@media (min-width: 1025px) {
  /* "Expertises liees" (loop) = Width A = min(1120px, 100vw-576px) : cale sur la colonne des H2. */
  body.single-expertise .dgt-exp-onecol .elementor-loop-container {
    width: min(1120px, calc(100vw - 576px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* "Nos articles sur le sujet" (cards) = largeur de la FAQ = min(1440px, 100vw-456px), centre. */
  body.single-expertise .dgt-related > .dgt-related__inner {
    width: min(1440px, calc(100vw - 456px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
body.single-expertise .dgt-related { padding-left: 0 !important; padding-right: 0 !important; }
/* Respiration (cf. homepage) : espacer les 2 sections du reste.
   Expertises liees : marge (le padding de section est fige ailleurs) ; Nos articles : padding.
   padding-bottom genereux = air demande par Anthony entre les cards et le footer. */
body.single-expertise .elementor-element-1f7ce0e { margin-top: 72px !important; margin-bottom: 72px !important; }
body.single-expertise .dgt-related { padding-top: 72px !important; padding-bottom: 96px !important; }

/* --- Cards "Nos articles sur le sujet" (facon vignettes du blog) --- */
.dgt-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.dgt-related__card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E3E9F2; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 28px rgba(20,19,84,0.08); text-decoration: none; }
/* Hover IDENTIQUE au blog (.bs-card) : image legerement assombrie + titre indigo, AUCUN mouvement. */
.dgt-related__card:hover .dgt-related__thumb img { opacity: .9; }
.dgt-related__card:hover .dgt-related__cardtitle { color: #4C58FF; }
.dgt-related__thumb { display: block; aspect-ratio: 768 / 432; background: #eef1ff; overflow: hidden; }
.dgt-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .18s; }
.dgt-related__cardbody { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1 1 auto; }
.dgt-related__cat { color: #4C58FF; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.dgt-related__cardtitle { color: #141354; font-weight: 700; font-size: 1.05rem; line-height: 1.4; transition: color .18s; }
@media (max-width: 1024px) { .dgt-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dgt-related__grid { grid-template-columns: 1fr; } }